Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. This might be not quite a hard stop, but it might be a bit of a shorty here. We got a bit of a late start. That's fine.

So, anyway... [Laughter] How's it going, Chris? I'm Dave Rupert.

Chris Coyier: Oh, I'm doing good.

Dave: How's it going, Chris Coyier?

Chris: Fantastic, really.

Dave: Great on the intro this week, and I feel like I just a milkshake as a reward.

[Laughter]

Chris: Dang right you do, Dave!

Dave: Yeah, I do. I do. Oh, man...

Hey, so a follow-up. I have a follow-up.

Chris: Uh-huh. You do?

Dave: The other week, probably two weeks from when this comes out here, but I talked about using ChatGPT to make a fidget, like my little maze fidget. I wanted a little app I could just open on my phone.

Chris: Oh, yeah! We were talking about... Yeah. Give me something to do while I'm digesting your website - in a way.

Dave: Yeah, while I'm in line at CVS.

Chris: Yeah.

Dave: Can I just do this? Just be bored on my phone without it being Twitter or social media.

Chris: Yeah.

Dave: Then I was like, but I don't have time to cut it, so maybe I just should use ChatGPT to do it (because we were also talking about ChatGPT), so I tried it. And it was very interesting, Chris. It wasn't all it's cracked up to be.

00:01:40

Chris: [Laughter] Yeah. But I saw the output. Okay, so I hate to jump ahead or anything, but--

Dave: Go for it. Yeah.

Chris: But you were like, I want to make a little maze generator. And I didn't know you did this, but you typed in - I don't know - "Build me a maze generator," into one of the AI tools.

Dave: Yeah.

Chris: It sounds like you said ChatGPT.

Dave: Yeah.

Chris: Not GPT4, which is the new one.

Dave: No, open AI.

Chris: The free one (for now).

Dave: Mm-hmm. Mm-hmm.

Chris: I guess they're all kind of free. But if you wanted 4, I think you have to pay for it right now to jump the line.

Dave: I think you have to pay $20. Maybe I need to pay $20 to get it to do it.

Chris: I mean, I don't know. You should try the Edge one, or you should try Bard, or you should try all of them, or whatever. But I think ChatGPT is known for code output better.

Although, I say that and what's actually known for code output is Copilot. So, maybe you could have taken a crack at that, of starting a project and having it draw a canvas to the screen. Then you do the trick in Copilot where you just do a code commend and describe what you want it to generate.

Dave: Maybe I'll do that. Maybe that'll be V2 or something.

Chris: Yeah.

Dave: Kind of like, can I trick the machine? Right?

Chris: Mm-hmm. But then you fast-forward. You send me a Pen or you posted in the Discord. It clearly generated a maze.

Dave: Well, yeah. it got the maze generation. Then, actually, the next part, which I was trying to get to and it kind of failed was drawing the maze, letting people put their finger on it and draw around a maze, and it actually scribbles on the thing.

Chris: Oh, right. That seems like a taller order. Yeah.

Dave: It was too tall for it.

Chris: Yeah.

Dave: But actually, there was one version I set the Pen up to get to that, like give ChatGPT the benefit or the ideal state.

Chris: Right. Starter.

Dave: But it was pretty good at drawing it, but it was finicky. It would jump cells through a wall. I was like, "Okay, can you do that but not go through walls. Then it kind of just died. It's weird.

ChatGPT is very smart. It can do things. But I don't know. I felt like it wasn't good at patching its own code. You know? Which maybe is the same for me. [Laughter] But it would write code, and then you'd say, "Cool. Awesome. This is good, but can you handle the drawing around the maze?"

They're like, "Yeah, I can totally do that. I'm just going to do it." Then it just will invent a function, like line intersects wall," and you're like, "Okay, cool. Line intersects walls is undefined. Can you define that?"

They're like, "Yeah. Oh, I'm so sorry. Yeah, of course, I'll do that," and it starts writing out this function. But it'll use different variables, global variables that it didn't have before.

Chris: Yeah. Right. It wasn't... Yeah.

Dave: It's just getting code from another place, so it's copy/pasting from a different Stack Overflow into this one.

Chris: Right.

Dave: It's like, "Well, that doesn't work either. There's no player Y and player X defined."

They're like, "Oh, yeah. Yeah. Totally. No, I get it. That's a mistake. Uh... let me fix that," and then it invents more functions as it tries to fix that. Right?

Chris: That makes sense to me. That's not good, but I also don't think that these tools were designed with coding heavily in mind.

Dave: Right.

Chris: It's not like you asked an AI model--

Dave: I mean I'm at like 100 lines. I'm not like 1,000 lines. I don't know.

Chris: Yeah. Well--

Dave: I don't know. What's reasonable for my robot? I don't know. It's a little bit like an actual developer. [Laughter] It's like overly optimistic that it solved the problem and then you're like, "Hey, that didn't solve the problem," and they're like, "Ah, sorry, man," like it read a business book, like, "Ah, I'm sorry, man. Yeah, that's my fault."

Chris: Yeah. Yeah.

Dave: Then the third time it does that and says, "Oh, I'm sorry, man," it's like, "No, you're just like a stoner." [Laughter] "You got a job that has no plan, like you do not have the skill for this job." And they're like, "Ah, sorry."

00:05:57

Chris: They say, though, especially ChatGPT is the most bull-crappy of them all.

Dave: Oh, interesting. Yeah.

Chris: It's the chattiest. It has the most, I think, hallucinations is a hilarious word because what they mean is wrongness. [Laughter]

Dave: Yeah.

Chris: You know?

Dave: Yeah. yeah.

Chris: Way to invent a very fancy word to just say "got it wrong."

Dave: Yeah. It's a hallucination.

Chris: It's a hallucination.

Dave: Yeah.

Chris: But you know I've been doing it for bios for people. We just had Kristin on last week, and I was like, "Give me a biography for her." And she's not super online.

Dave: Yeah. Yeah.

Chris: Like has a LinkedIn, a Twitter bio, and some real basics, but there's not a bunch of articles about her, necessarily. Bard was like, "There's not enough here," so it politely declined to even try.

Dave: See, that's respectable, actually.

Chris: Yeah. Right. Notion, which I don't know what it uses internally, but surely have not created their own entire AI product, so I think it was probably ChatGPT is the one they can use. It did okay, actually. It did one paragraph and was pretty reasonable.

I forgot to ask her how wrong it was, so maybe I'll have to shoot her a Discord message to see how funny it was, but it didn't seem to add up with what was on her LinkedIn.

Dave: Yeah. Yeah. Yeah.

Chris: Then I put it in GPT4 and it just was like cracks knuckles, just blah, just like eight paragraphs of just blatant lies.

Dave: Full biography.

Chris: [Laughter]

Dave: [Laughter] Yeah.

Chris: Oh, my gosh.

Dave: Hallucinations, Chris, not lies. Hallucinations.

Chris: It was funny to see. I used one the other day to grade effect. Of course, because we're developers, we're very interested in the developer use cases for this.

Dave: mm-hmm.

Chris: Which seems to me like nothing but optimistic except for the obvious implications of, is this going to actually cost people their jobs? I don't want to get too deep into that because - whatever - it's a little played out. But I had the perfect use case for it.

Now, you know GitHub Copilot, right?

Dave: Mm-hmm.

00:08:02

Chris: They have another VS Code plugin called Pilot Labs.

Dave: Yeah.

Chris: Which is Copilot stuff that's - I don't know - not ready to ship or something.

Dave: Yeah.

Chris: One of the things it is, you open the drawer, and whatever code is selected in a file you have open, it will pre-populate this little text area in that drawer (or panel or whatever it is), and then say, "Would you like me to convert this to another language?"

Dave: Hmm...

Chris: Which doesn't come up every day. It's not like developers are very often being like, "I need to write the same exact function in Python."

Dave: Yeah. Yeah.

Chris: But when it does, Dave, it's awful useful. You know?

Dave: Okay. Yeah. Yeah.

Chris: I kind of did it two ways. One, I tried that way, and it was a bespoke function about sanitizing a string in a very particular way. There were very specific characters that needed to be removed from the string.

Dave: Mm-hmm.

Chris: One of the things that it needed to do was if it found multiple dashes, it would kind of smoosh them down into one dash.

Dave: Like an em dash kind of thing?

Chris: Yeah, but it was just a dash in this case, but I know what you mean. Then one of the things is if the string ended in a dash, it would just remove it. So, it had some pretty specific jobs to do, and it was in Ruby.

Dave: Hmm...

Chris: And I needed it in Go. Some of the stuff in it was just a straight replace. Some of it was RegEx-based and stuff. I told it to do it, and it did not do it right. [Laughter]

Dave: Oh, no!

Chris: It did okay, but that's all I wanted. I don't want perfection.

Dave: Yeah.

Chris: I just needed a head start. I just needed it to be like, "Ugh. How do you even do that?"

I have this little moment where I'm like, "Ugh. How do you even do RegEx in Go again?"

Dave: Yeah.

Chris: "I'm going to have to Google it," because it has this weird thing where you have to compile the RegEx before you use it. But really, you should use this function called Must Compile, which means that it if your RegEx is malformed, it won't error. It'll just panic, which is kind of what you want because you don't want a broken RegEx and all that stuff.

Dave: Right. Right.

Chris: It did all that. Then I can finetune it. It did just what I wanted. But I actually got better output when I used the thing where I described what I wanted it to do with English in a comment first.

Dave: Mm-hmm. Mm-hmm.

Chris: Then got the output from that--

Dave: You got the auto-complete--

Chris: --rather than the labs thing.

Dave: Oh, interesting.

00:10:40

Chris: It was cool, but I do want... I want that to be a release. If that was next week's AI story is, "Here's this new tool from company X that is an LLM that's 100% to help you code."

Dave: Yeah.

Chris: There's no English stuff in it at all. It's all code output. I'd be like, "Cool. Thanks."

Dave: Well, that's sort of where I came down was like it's $8 a month or $10 a month for--

Chris: Copilot.

Dave: Copilot. Right. It's like, sure. If can... $10, man, for how much code I write and how much whatever, and it can, you know... In the grand scheme of things, $100 a year for a developer probably isn't a lot.

Chris: Yeah. I like your take because what you're doing is intentionally omitting how inexpensive other products are. It's tempting to be like, "I don't even pay that much for GitHub itself."

Dave: No. Yeah.

Chris: But you're like, "I'm not going to factor that into my equation. I'm going to factor in the value that I get for this."

Dave: Yeah. I think purely as that as a service. You could probably have a dedicated tool that you pay $10 for some Mac app or something that you pay $10 for to translate your Python to Ruby - or whatever.

Chris: Mm-hmm.

00:12:08

Dave: You probably wouldn't bat an eye at paying for that. But for some reason, when it's wrapped up in AI, we're all like, "Ooh, is this taking our jobs?" But it's like, no. That's not the work I want to do. [Laughter]

I'm not like, "You know I love porting code, man. That's my favorite part of the job." [Laughter] It's not why I got into programming, so I don't know.

I'm trying to stay positive. But I'm trying to just be like, "What jobs does this release me from?" I think running this through the ChatGPT maze generator thing, I think I released I don't know that it's good at coding. It can spit something out and, through enough wrestling, it will. Sometimes, it just quits. It writes while loops. It loves while loops, which are super-dangerous from my perspective. [Laughter]

Chris: Hmm... Mm-hmm.

00:13:09

Dave: And I feel like there are some things that, actually, a lot of people are like, "It's great for beginners," or something. But I don't think it's great for beginners because it A) uses while loops and that's going to mess you up later, especially if you're a beginner, but B) when it forgets a variable or makes up a function, a beginner might not know to even check the console or it might not know what's going on.

My son used it to code a Roblox game, and they were like, "It just doesn't work, man." You know? I was just like, "Well, it's because you're not a programmer. You don't know anything about code. You just copy/pasted stuff in."

Chris: Yeah. They could have copy/pasted and missed the last character and, thus, it wouldn't run.

Dave: Yeah, so the robot might have done fine, but they just don't understand. Or it just quit. It didn't close a while loop or something.

Chris: Right.

Dave: It bombed out or something. I just don't know if it's good for beginners in that sense because it might create problems that you don't know how to solve.

But what I do think it's good at, which is just like, you can say, "Tell me the steps it takes," I did this, "to write a pet simulator X game on Roblox. Give me all the steps."

Chris: Yeah.

Dave: It literally tells me, like, "Okay. You've got to get a...."

Chris: Oh, you had it write pseudo code for you?

Dave: Yeah! I was like, "Give me a list of the steps."

Chris: Oh, that's a great idea.

Dave: That part, I think, is awesome because you're just like, "Hey, I want to write a maze generator that you can draw on. Give me the list of steps."

It's actually pretty good at that, and it will give me some steps. But I think the temptation is, "Okay, now--" because I'm talking to a sophisticated robot. It just told me the steps. You're like, "Now, you go code the steps," or "You go do the steps," and I think that's where it sort of sucks. When it's on the third or fourth tier of the logic train, it gets messed up.

Chris: Yeah. Yeah. Yeah, I can see that.

Dave: But anyway, it was interesting. As developers, you're like - whatever - "I need to order or create an e-commerce site. List all the templates I'm going to have to build," or something.

00:15:29

Chris: I like thinking about it as search, though. If you're asking it something that is so unusual, it will never get that right because it hasn't been trained on that, right?

Dave: Mm-hmm.

Chris: In a way, it's like, "I know a bunch of people have thought about this and written and published about this. I know a lot of people have. But I can't be troubled to load it into my brain right now. You do it." That's perfect. That will always be perfect for it.

But if you're saying, "I have this idea that's never been done before, never been thought about before," well, how would it know?

Dave: Yeah. Yeah, it can only be as good as what it has seen or can regurgitate, basically. Right? Like what it can crib.

00:16:20

Chris: Yeah. I've got a shout-out to Josh Comeau's article on it, "The End of Front-End Development." It was a really nice take. Lots of great, quotable lines on it. It's great at tasks but not jobs. I like how he phrased that.

Dave: Ooh... That's a good way to phrase it.

Chris: Yeah, and that the stuff that we're getting now is just like, "Yeah, it's not... So far anyway, it really hasn't replaced a lot of what we do. It's mostly just a tool." Whatever. Tools are good.

I really like the pseudo code idea, though, just to put a point on it one more time. I think there was... I still do it. I remember doing it yesterday. I was like, "Ooh, what does this thing need to do? Ugh, I can't. My brain can't do it in code." Let me just stop and just write it in English quick. Then I'll convert the English to code, slowly.

Dave: Mm-hmm.

Chris: It helps when you're tired, especially, I think.

[Laughter]

Dave: AI usage goes up in the afternoon.

Chris: I just have a memory buried in there of Laura Shanks. I was with her in person, and she was teaching some people some WordPress stuff or jQuery or something. She would always do that, and it was such a nice way to teach, too.

Dave: Just talk about what you have to do. Comment in code. Okay, what's step one, what's step two, et cetera.

Chris: Yeah.

Dave: Nick Pettit used to do that on Treehouse.

Chris: Oh, nice. Yeah.

Dave: I assume he still does it to some degree on Frontend Masters.

Chris: Jeremy Keith called it writing a script. He was talking about JavaScript. He's like, "No, no. Not that kind of script. Like a movie script."

00:17:55

Dave: Like a movie, yeah. Go do this. Go do that.

No, I mean I feel like... I think that there is a temptation, though. It's like, "Okay, machine. You wrote the script. Now do the steps," and Copilot might be able to. Sometimes it's okay at it.

But I feel like you can edit the script to, like, "Okay. No, actually, I don't need this weird thing you invented, you hallucinated."

Chris: [Laughter]

Dave: And I can pare down. Anyway, I don't know. It's interesting times here. But I don't think it's going to replace your job. But I think it's just - I don't know. I'm trying to find the edges of what it's good at and what it's not really and where I think I could leverage it.

Chris: Yeah. Even that, I wouldn't blame anybody for taking a pause on for a minute because it changes so damn fast. It's tempting to me that if you find those edges that, in two months--

Dave: It could be wrong. Yeah.

Chris: Yeah.

Dave: Well, yeah.

Chris: Totally different.

Dave: That's the thing is I wasn't using the, take a picture of a website and turn it into a CodePen. You know? [Laughter] That's pretty advanced, man.

I also wonder, too. I don't know enough about, like, that was cool what they did, but how do I augment it to use my code to build the website? It's cool you found code off the Internet, but how do you do it with my code? How do you augment the AI? Is it you use more sentences to explain it or what?

How do you get predictable results out of an AI, too? It does seem like it's just bullshitting every time. When it failed to write the maze app the first time, I tried again, and it wrote a different maze app entirely. But it was similar-ish.

00:19:46

Chris: I had a woman that goes to the same gym as me who wanted to have a meeting. She's like, "Oh, you do computers, right? Let's talk about AI stuff." I'm like, "Oh, yeah. Sure." You know? I don't have any research to dig into. I'm not an AI guy. But we could talk about it.

She was a recruiter, and I thought for sure it was going to be like, "Okay, what's coming down the pipe here? Do I need to be hiring for AI-related roles or whatever?" [Laughter] That's really not what it was about at all.

She just wanted to be like, "Show me what the tools are and how I can use them to do my job better."

Dave: Oh, wow.

Chris: I was like, "I also can't do that, but I can kind of point you at some stuff," but I think the laypeople of the world, the non-computer people of the world are interested in, like, can it write an email for me? Can it write a Slack update for my team? Can it formalize this press release? Can it do all these things?

I think it kind of can. I think those are like it's better at that type of stuff than us asking it to code a maze.

Dave: No. I mean, yeah, it does seem like it's good at whatever, reformatting-ish. Maybe some accuracy, but it's good at condensing, summarizing, or expanding a summary. It can do the back and forth of that.

I think I might experiment more with this whole, like, before I jump into a task like, "Hey, I'm going to write a notification system for Luro," like an activity. What do I have to do, and what privacy regulations do I have to abide in or something? Let it kind of give me an outline. Then we can kind of say, "Cool, is this good?" If it's good, we can convert it to tickets.

Chris: Right. it's just a jumping-off point. It's not like you have to trust every sentence that it puts out. Certainly, not.

I asked it to... I say "it," but I don't even remember which one I used because I got fricken' access to all these different ones. I don't even know which one it is anymore. I suspect we won't care in the future. We'll be like, "I don't know. Whatever the one is that's built into the tool you're using."

It was like, 'What do I have to think about when I do a social media campaign?" It was like, "Oh, you should invent a hashtag and encourage users to use it. You should reach out to influencers, and you should offer prizes." It had all this stuff that was like, "Okay, none of that is particularly interesting, but it's all the stuff that we should at least bring up in that meeting." It's a starter of stuff.

If you asked me to prepare for this meeting and, of course, I'm going to do in the ten minutes before the meeting because I'm busy and a disaster like that, I'll probably forget about half of that stuff.

Dave: Oh, for sure. Well, yeah, and your ability... Yeah. It seems to be good at boiling information down. It digests kind of what is out there and so I don't know. I want to keep experimenting.

I like what you're saying. Just because it exists doesn't mean you have to use it. I think that's the other trick, too. I do think there's a worry about content, what's happening to content, if people are just going to start content farming. Just flooding... As Steve Bannon says, "Flooding the field with shit." Is that going to become a thing that we have to deal with? I do worry about that.

00:23:40

Chris: Yeah. Yeah. At least we can see it coming. I hope the people that know what they're talking about have their eyes open here.

You just can't avoid conversations. We were just out for dinner last night with some friends sitting at a picnic table, and they're like, "Did you see the images of Trump getting arrested today?" They knew they were fake, but it was like they were going around crazy, all these really well-done, AI-generated pictures of him running away from the cops on the street, and Milania screaming out. [Laughter]

Dave: Wow. I didn't see those.

Chris: They were great. Great from a quality standpoint.

Dave: Right.

Chris: Like, "Holy crap!"

Dave: It is going to be this weird--

Chris: I know me and you share a love for the deep fake audios of the video games ones. [Laughter] Those are just great. I would listen to that all day.

Dave: Oh, man. Yeah. No, I'll take deep fakes. [Laughter]

I saw this one. Well, it wasn't a fake. It was somebody actually did this, but they snuck their cat into Jurassic Park. They replaced the dinosaurs with the cat, their actual cat.

Chris: [Laughter]

Dave: There was one scene, too, it was like... They did all this with green screens and stuff, but there was one scene where they're in the car, and I think the little girl eats a bag of chips or something or makes a noise. The dinosaur crashed it. She opens a can of Friskers, you know, like cat food.

Chris: Yeah.

Dave: The cat breaks in. Anyway, it was funny. Anyway, if that stuff gets easier to make, that's even better, right? Life is better.

00:25:17

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Frontend Masters. That's frontendmasters.com. Their learning paths are super good. Ain't they, Dave?

Dave: Oh, man. They have everything. Whether you're starting from a certain level like beginner to professional to expert, you want to hit the computer science track or the full-stack track or design to code track, lots of different tracks from what skill you're trying to hit. But then, boom, they've got technology-specific tracks like JavaScript, CSS - like if you need a skill buff in one area.

Chris: That's what I would do. I'd be like, "Dude, I need to learn TypeScript now. I'm way behind on this." Take the TypeScript class.

"Oh, I need to get a job." Dude, take the React class.

[Laughter]

Dave: Take the React class. No, or I'm doing Vue. I have a good understanding of Vue. But piecing it together over a bunch of blog posts isn't the best.

Chris: No.

Dave: So, watching Sarah Drasner's Vue course is super rad.

Chris: Yeah.

Dave: Or Node. Just seeing somebody build something, like an API or whatever, helps my brain internalize that way more than just - whatever - piecing it together myself.

Chris: Right. Right. I kept calling them courses and classes and stuff, but they're really learning paths, and you might hop between different videos and stuff. There are elective coursework and stuff.

These learning paths are really put together to bring you the best of whatever that topic is. That really appeals to me. I think is really quite cool.

Dave: And I think it can work for you as an individual or for your whole company. If you're trying to do a big skill buff in React.

Chris: Yes.

Dave: Your company noticed like, "Hey, we're not super great," so boom, get a whole skill buff for your whole entire team.

Chris: Yeah! Or in my case, we're switching over everything to TypeScript. Guess who should level up in it. Everybody, not just you.

Dave: Yeah. Well, and if you want to do it, are you doing it in the one-month or the one-year plan? You know what I mean?

Chris: Yeah.

Dave: It helps to level up first, right?

Chris: Bring your company to frontendmasters.com.

[Banjo music stops]

00:27:29

Chris: Here's a question that we got. This is a one-two punch here that I thought was interesting. This is a classic, Dave. You'll recognize this.

Martin de Lima writes in, "Is there any value in specializing in front of the front-end dev, or is it just irrelevant now? I've been job hunting for over six months, and an overwhelming majority of the time they expect back of the front-end experience."

How many times have we heard that?

Dave: A million-billion.

Chris: On ShopTalk Show.

Dave: Did we do this question?

Chris: Martin, here's--

Dave: But--

Chris: We maybe did that exact one, but this is new, this answer to it.

Dave: Okay. Okay. Yeah. Yeah.

Chris: Steve Polito says, "It's come up several times. Do people still hire for front of the front-end?" The concern that in order to be relevant, you need to know a framework or something.

Steve writes, "I think the problem with this paradigm is that it assumes the job is for a Web developer when in fact it seems like that front of the front-end stuff is more suited towards Web design and Web designer roles. At my organization, we don't have designers. We have designers that code. All of our designers are proficient with HTML, CSS, and sprinkles of JavaScript. They don't need to know React or Rails, but they need to know enough to be dangerous to help clean up the front end. TLDR, there are still plenty of jobs for folks that only know HTML, CSS, and a bit of JavaScript, but that job is a designer who codes."

That's how it works at Steve's design agency, and I've heard that. I've heard that from others, too.

Where is that? There's another organization that has no... Nobody just knows Figma. All the designers they hire are both. I think it's that big shop that does Rails work. You know what I mean?

Dave: Oh, Black Pixel or something like that?

Chris: No, that sounds familiar, but I think they're out of Minneapolis. Anyway, forget it.

Dave: Oh... 10up, 7up, 10up?

Chris: Maybe.

Dave: They do WordPress stuff. Yeah. Yeah. Basecamp HQ.

Chris: No.

Dave: They do Rails stuff. They're also hiring. Yikes. [Laughter] But I would agree with that. Brad Frost, I think, famously kind of said that too, right? He was like, "I do all this code and people try to pigeonhole me as a developer. Then they ask me to Python their SQL."

Chris: Right.

Dave: He was like, "No, dude. I do not do that at all," so he started calling himself a designer, and he got the right work by doing that - for him - responsive work. And so, maybe that's actually a really good flex. I think Steve has got a really good point.

00:30:11

Chris: Yeah. Look for design roles because I do think of people like Estelle or something who is famously a very front of the front-end person. She was just talking about some JavaScript that she wrote. She's like, "Yeah, still got it," but it was presentational JavaScript. It was converting some colors and stuff, so she's clearly genius-level stuff at HTML, CSS, and presentational (we'll call it) JavaScript but is not a designer. That's tricky.

If Steve is saying, "Yeah, well, those are design roles," that implies that you have some design talent, too. Are we admitting the fact that if you only know HTML, CSS, and presentational JavaScript but don't have design chops and don't have any back-of-the-front stuff that that's not enough?

At some point, we can admit that, for example, just knowing some HTML, it's not enough. It's not enough. You need to know some more stuff.

Dave: I think you need... Yeah. I would say, too, there are other options. I was going to say ad tech could probably really hurt your heart in the long term, but it is HTML, CSS, and images. There's probably very little JavaScript going on in your ad tech if you get into making banner ads and stuff like that, so that's an option. Find a company or offer that in your resume. Just say, "I do ads."

Chris: Okay. Yeah.

Dave: A/B testing is also another one. Do you know what an A/B test is? It's just injecting shit on a page.

[Laughter]

Dave: You know? And so, if you know how to do that and faithfully execute it, that's actually a pretty awesome role in a company. It's a bit of a dirty jobs, Mike Rowe Dirty Jobs style thing. You're kind of just doing the work no one else wants to do kind of role.

But I think it can be valuable. it can be business valuable.

You're finding out about the business, like what works and what doesn't. You're interfacing with people high up who have ideas that need them on the website, or you're maybe landing critical fixes in production [laughter] through the guise of an A/B test. I think that can be rewarding work, even if it sort of is this basically injecting a tiny virus onto a page.

Chris: Yeah, but you need a job tomorrow. Go take Frontend Masters' React course. [Laughter]

Dave: Yeah. I think that's a play. I think you can... Do you want to take a long tail approach where it's slower growth or do you want the money upfront? Get going on React.

Chris: Yeah. I'd say it's just not that bad either. If you're really good at HTML, CSS, and presentational JavaScript, tacking on a framework to that is no big flex. There's going to be a little learning curve action to it, but you'll be okay. It ends up in the DOM anyway.

00:33:37

Chris: Speaking of HTML, Brody Austin writes in about Scott O'Hara's blog post in late January of this year who is cautiously optimistic about using the dialog element. The title of the blog was "Use the Dialog Element Reasonably."

Scotts writes, "Today, the HTML specification landed a very important change to the dialog element, one that resolves a multiyear discussion about how the dialog element should handle focus." I'll spare you every detail there. You can link over to Scott's post.

But he's kind of saying, "Okay. We did it." You know? Even from somebody who is absolutely 100% focused on good accessibility is kind of giving this thing a cautious green light on usage.

Again, the dialog element, like angle brackets, the word "dialog" is the Web platform saying this is what you should use for a popup modal experience that traps the focus inside of it and is meant to grab the user's attention and show them a message. Something that we have hand-coded forever was often called the "boss mode of accessibility problems" because of how difficult they are to pull off.

Web platform has delivered this. It as problematic for a little while and now maybe less so. That's pretty cool.

Brody's specific question, though, is, "Would you ever use the dialog element for a mobile navigation "drawer"? It feels like a modal that's just styled and positioned to one side of the screen and be full height, because you do have design control over these things. Is that stretching what the dialog element is intended to do?"

Uh... yes. [Laughter]

Dave: I'm going to say, "A little bit. Yeah."

Chris: Yeah.

Dave: But I think this is where I get a little frustrated because it comes down to nerd shit. You're not wrong for thinking of it.

Chris: Mm-hmm.

Dave: Because what a dialog is, it's an interactive... It's like a micro document on the top layer of the browser, which means it sits over everything else. It's Z-index one billion. It's always on the top layer, but that's only when you use dialog with show modal, and that's what triggers that sort of modal state, right?

Chris: Yeah.

Dave: There is a new attribute, actually, that's coming that's in Open UI called Popup, and so you say popup equals popup - or something like that - because there are a few different kinds of popups. I think it could be a combo box, a list box, or something, which again, that's nerd stuff that no one understands the difference of unless you do accessibility, so I think there's a problem there.

But Popup will be for these top-layer things, whether it's a fly-out menu that flies out or a menu that slides in from the side. I do think, in my brain, yeah, it could be a hamburger kind of thing.

Chris: Maybe. Yeah. I also get the thinking. Part of me thinks, though, that it's so unusual that breaking a thing that people usually do is a weird form of inaccessibility.

Dave: Mm-hmm.

Chris: Just because I want to navigate to the about page from the homepage doesn't mean I want my focus to be trapped while I'm making that decision.

00:37:11

Dave: Yeah. Yeah, and I'm seeing detail summary. It's not perfect, but it could also maybe be something like that.

Chris: Oh, yeah, see all of GitHub. [Laughter]

Dave: Yeah. All of GitHub is a details element under the hood. [Laughter] But that might be... There's some work you have to do when you return focus and stuff like that. Unfortunately, it's not... I can't say it's something I've ever done super successfully. But sometimes a disclosure is great.

Yeah, I don't know. We're kind of using details, I think, as our sort of menu manager. But again, I'm sure you're going to find somebody who is like, "Don't use that. I think Adrian Roselli had a thing, like, "Don't use it for hamburgers," or a details element is not a blah-blah-blah.

Chris: Yeah, it's not. And then every possible thing it's been bastardized as. [Laughter]

Dave: Yeah. It's not - I don't know. It's this, like, "It should only be used for this one situation where you click something to reveal something."

Chris: Yeah.

Dave: Yeah.

Chris: It's like movie spoilers only.

Dave: Movie spoilers only. Yeah. And I'm like, "Well, let's think a little bit broader, everybody." You know?

00:38:31

Chris: Yeah. It almost begs, like, if it's not good for it then what could we do that is a generic toggle? Aren't toggles coming to CSS? That gets threatened once in a while. I could see that happening in 2023. I forget how it works exactly, but it's kind of like, "Ah... It's too many people putting input elements and then using :checked in CSS." There's probably a more appropriate way to code something like that in CSS that's arbitrary toggles.

It's a Tab Atkins thing. I just forget where it's at.

Dave: Yeah, Tab Atkins and Miriam had a draft of it. I don't know what's happening. I think the idea of behaviors and state machines in CSS is a little out there, but--

Chris: Yeah. It seems like everybody has got a line where they're ready for CSS to not cross.

Dave: Yeah. But I'm like, "Hey, you put hover in here pretty early on. You already made it a state machine. It's very concerned about states."

Chris: Yeah.

Dave: @media, that's a state. Sorry. @container, that's a state. So, it's very stateful. Right?

Chris: Right. A selector is a conditional piece just by what it is.

Dave: Well, like smacks was all about using CSS to reflect state, like is hovered, is active.

Chris: Yeah.

Dave: Whole CSS systems have been around the state idea.

Chris: Right. Yeah. You know it was custom properties for a lot of people that was like, "It's too programmy-y, or something."

Dave: Mm-hmm.

Chris: Then not just the nature of programming but this thing that you could pick up a piece, a declarative chunk of CSS and put it somewhere else and have it be meaningless in the new location because it is missing what those properties would do.

Dave: Mm-hmm.

Chris: That's an interesting take. I'm certainly pro custom properties. I think they've done nothing but good for CSS.

Dave: Yeah.

Chris: But that was a line for some people, I think.

00:40:45

Dave: Yeah. Well, and I was reading Bramus. He works on Chrome. I forget the last name there.

Chris: Van Damme, I think.

Dave: Yeah. Was that right? He was tweeting. He was just like, "CSS properties came out in 2017, and people still don't know they exist." I'm like, "CSS custom properties are--"

Chris: Of course, they don't.

Dave: "--a six-year-old technology, and people still don't know that you can even do that."

He was just like... I was surprised, and he works at Chrome.

Chris: Nobody knows anything. It's amazing. I don't.

[Laughter]

Chris: I'm shocked at stuff all the time.

Dave: Well, somebody was like, "Oh, yeah. Nesting lands in the next version of Chrome," or something, so it's probably out by the time this show is out.

Chris: Wow.

Dave: But it was just like--

Chris: We heard from a little birdie because there's this thing that it has to start with a symbol, right? Don't hate it, actually.

Dave: Mm-hmm.

Chris: At least it's a rule. It's an easily teachable, understandable rule. That even that might go away.

Dave: Oh, really?!

Chris: If that does, that's nuts. Then all the talk, "It can't be like Sass. It can't be like Sass. It can't be like Sass." Just kidding. It's like Sass.

Dave: Good.

Chris: [Laughter] I know.

Dave: Don't tell me pave the cow paths. Well, yeah, pave the cow path. Pave the cow path. Then not pave the fricken' cow paths.

Chris: [Laughter]

Dave: They're like, "Yeah, we're going to pave--"

Chris: That is fair. That is fair.

Dave: "We're going to pave the cow paths. Psych! Superhighway, bros."

Chris: [Laughter]

Dave: It's just like, "No, dude. I literally just need a fricken' tabs element. Don't give me this--" I don't know.

Chris: [Laughter]

Dave: Don't give me this complex, low-level garbage. Just give me a tabs element, please.

Chris: I'm all about the nesting. That's finally it for me. Sass is finally dead.

Dave: That's the last ... huh?

Chris: That's it. We're done. That's great because it affects my day-to-day because my default Pen on CodePen has Sass turned on, still.

Dave: Yeah.

Chris: In the year of our Lord, 2023.

Dave: Yeah.

Chris: I still have it on because I have so much muscle memory mostly for nesting.

Dave: I use it for, yeah, mostly nesting.

Chris: Yeah.

Dave: Like in components and stuff.

Chris: Was it Tyler, Cloudflare Tyler is anti-nesting? That's his line.

Dave: Oh, really?

Chris: He had a different line. He's not anti-nesting. He just doesn't care about it. He's just like, "I don't know."

Dave: Nah.

Chris: I care.

Dave: I care. I'm in. Put me in.

Chris: [Laughter]

00:43:16

Dave: I want nesting. I actually have turned the tide, too. Sass variables, I guess you have color. You can do darken, lighten, alpha on Sass stuff, right? But when that comes, I think I'm fully done because that is maybe the one thing you cannot do.

Chris: Yeah, but those are dropping.

Dave: Yeah, soon.

Chris: It's soon because you can do something like even if you have a hex code.

Dave: Mm-hmm.

Chris: You can write color() reference the hex code - either by custom property or just drop the hex code in there.

Dave: Yeah.

Chris: Then say, like, "From HSL or to HSL," or something. You have to say what color format you intend to use. Then this is really awkward, but there are some spaces after it. You just say "H S L", so you can just leave them along, or you can choose to manipulate them with calc.

Dave: Mm-hmm.

Chris: Even with the hex code, you can just say, "H S" and then for the L, go "calc L*110%" or whatever. It will even brighten a fricken' hex code. And if that's not dropped, it's coming real soon. I think it is basically ready.

Dave: Yeah. I didn't know if it was in Color 4. I thought it was, but I don't know if color mix or color... But I'm looking forward to that. I want that.

Chris: Yeah. Mix is fine. It's all exciting, in a way.

Dave: But I'm definitely in the, like, "I now see CSS variables as better than--

Chris: Than Sass was?

Dave: --than Sass variables. You know?

Chris: Yeah. Yeah.

Dave: By a long run.

Chris: You can set them from JavaScript. They cascade. They have fallbacks. They're amazing. You can type them.

00:45:03

Dave: I have one place in Luro that's using maps, loops, and stuff like that. But that can still be Sass. You know what I mean? That can still be the one place that uses it.

Chris: Yeah. Right. Yeah, you don't have to turn off Sass everywhere, but it's mostly in my day-to-day, like ten creation. I wish I didn't have to pre-process really basic scenarios. It's like, eh.

Dave: How do you--? This is a question. How do you find old CSS and get rid of it? What's your method? Is it the comment it out and see if it changed, or is it the grep it and rip it?

Chris: Oh, you can't bring up a giant question like this.

Dave: Okay.

Chris: With 15 minutes....

Dave: A few minutes left. Sorry. Okay.

Chris: [Laughter] No....

Dave: Because I came up with a slightly new way.

Chris: Oh... Oh! Oh, okay. Well, let's hear that, then. I want to know.

Dave: Well, this was my new trick. I looked at the old stuff, and I put it in @layerold.

Chris: Oh, wow.

Dave: Then I wrote the new stuff in @layernew. Then I could see in my Web inspector what was coming from what layer.

Chris: Oh, that's why you were playing with a layer turn-off machine the other day.

Dave: Yeah! That's why I made a whole layer turn-off machine.

Chris: I saw that CodePen, and I'm like, "That looks fricken' complicated," but you had a real reason to need it.

Dave: Well, I was just obsessing. Let's not call it a reason.

Chris: Yeah.

Dave: Let's call it a mild obsession.

[Laughter]

Dave: But then I was like, you know, because I could just turn off layer old by calling it slayer old. You know? And it just disappeared.

Chris: Yeah.

Dave: Then I could move forward with confidence that I didn't beef up the whole entire app.

Chris: That's clever!

Dave: But I was just curious. I'm even dealing with, like, I've got components that we're not using anymore. I'm just like, "How do you evaluate dead code?"

Chris: I think one answer to it is just an extreme familiarity with your app, which is not an answer for a lot of people.

Dave: Right. Right.

Chris: But I can get away with it in my codebases because I remember every line of CSS ever written and why in this app.

Dave: [Laughter] Your one super skill. It's your super skill. Yeah.

Chris: Kind of, and I think that that matters. And we have dev, and we have integration tests, and we have a staging environment we can test and all that stuff. And, over time, we've switched more and more to a component model.

Dave: Yeah.

Chris: That dead CSS on components is way less likely, way less likely. If the component dies or isn't loaded on the page, that CSS is so tightly bound to it, it's irrelevant. It's not that a component can't have any dead CSS, but you can wrap your mind around what's used and not used in any given component quickly and easily.

Dave: Yeah.

Chris: It's just those global styles that are trickier.

Dave: Yeah.

00:48:04

Chris: I have a PR in right now that rejiggers some of our global styles and how some fonts are loaded and stuff that is removing a whole bunch of CSS. It feels pretty good, but it does have that kind of dangerous territory.

In fact, now we're publishing an NPM package. I don't think it's quite that. But we have internal packages in our mono repo that are intended to be shared.

Dave: Mm-hmm.

Chris: One of them is just called styles, and they're intended to be global styles that all of the apps use. Moving our global styles to that shared location has been kind of cool, but when you screw that up, it becomes more clear.

I was working on an admin app, and there was the time output in our app.

Dave: Mm-hmm.

Chris: It's pretty unusual. It's text transform upper case. It sets font size 80%. It shrinks it down. It makes it look small. It sets a gray color to make it a little more chill because that's how we use it mostly. But in the admin app, I was outputting time in a table. I was like, "Oh, I don't like that look," and I changed how time looked. But unbeknownst to me, I was doing it in our very global--

I was just doing it on the time selector.

Dave: Yeah. Yeah.

Chris: Which, in a big app, is a little... That's just a little too broad. [Laughter]

Dave: Right. Right.

Chris: I kind of screwed it up. Yeah, even on existing CodePen, all of a sudden, the time styles, which show up in pretty prevalent locations. Like even the footer of the Pen editor says, "Last edited four minutes ago."

Dave: Oh, yeah.

Chris: All of a sudden, was looking all gigantic and not gray anymore. I was like, "Ooh, crap!"

[Laughter]

Dave: Whoop!

Chris: Yeah, so that's definitely a barstool getting kicked over at another bar, as the old Thomas Foulks tweet goes.

00:50:00

Dave: You know it's funny. I'm starting to feel like our tools should start burping at us when we write a root select or an element selector or something. It's like, "Hey, buddy. This one, red flag." You know? Or pop a little red flag emoji or something.

Chris: Where would you want to see it? Would you see it shifted left, all the way to the VS Code-ish level? Would you want to see it in a commit hook? Would you want to see it in CI? Would you want to see it as a third-party tool?

Dave: That's a good question. I mean maybe it's a VS Code plugin or something.

Chris: I'd prefer to see it when I'm reviewing somebody else's code.

Dave: Ooh... Okay. Yeah.

Chris: Did I miss the fact that they changed a really high level selector? I probably wouldn't, but. [Laughter]

Dave: Well, what I'm finding, too, is in our component because we've done a lot of component CSS, like display flex. It's in the codebase about 1,500 times, Chris.

Chris: Yeah.

Dave: There's no punishment for that, but it's like, "Oh, I think there's an abstraction here we could have had." We wrote these--

Chris: Don't invent Tailwind.

[Laughter]

Dave: I reinvented Tailwind.

Chris: [Laughter]

Dave: Well, you know, to some degree, I did. We had a flex row. Then we had - oh, shoot. Now we need to know wrap. Then, oh shoot. Now we need a shrink. Now we need a grow.

I just was like, this is a lot. Maybe it's more of a declarative thing like a component. And so, we ended up making an H-stack and a V-stack component. It's silly, but it's really refreshing to have these literal, like, this is a vertical stack of junk. You know? [Laughter] This is what it does.

Anyway, yeah. Sorry. I opened up a big--

Chris: Kind of. I was relatively proud of the post I wrote about how you remove unused CSS from a post. It's an old CSS-Tricks post now.

Dave: Yeah. Yeah.

Chris: You know it talks to that it's not... Like all good snake oil salesmen and whatever, there are tools out there that says, "This is the tool."

Dave: Mm-hmm.

Chris: You want to know how to do it? You use this tool, and it tells you how to do it. And then you're done.

I'm like, "No! Absolutely not."

Dave: Yeah, you call it coverage. Yeah, it's like coverage is, "Oh, you're not using 90% of your CSS."

Chris: Right.

Dave: I delete all my table styles. Cool. [Laughter] I've made everyone mad.

00:52:37

Chris: Yeah. There's a reverse way. We put this in our app now, believe it or not. Robert, who works with me, wrote this and stuck it in everywhere in dev in our app, and it does a reverse style. Dave, it looks at every class name in HTML.

Dave: Mm-hmm.

Chris: I think it's just classes. And also looks at every class name in all the loaded style sheets on the page. I think document.stylesheets will give you every single style sheet, whether it came from an inline style block or anything else.

You loop over all of them, and you just compare. You say, "Is there a class name on any HTML element that is not in any of these style sheets?" And it just does a console.warning on them.

Dave: Hmm...

Chris: And I was ready to be mad at it for some reason, like, "This is stupid." [Laughter] But I think, just to flatter ourselves, we only found like three examples - or something - in the whole app, and it wasn't wrong. It was just a class name on the HTML that didn't need to be there.

That's not finding unused CSS, but it is finding unused class names on your HTML elements, which could cause future confusion. For us, I think that since we're off jQuery, there's no $".class. There's nothing reaching into the DOM to look for classes (for the most part).

It's not jQuery, so classes are just styles. They have one job, "What styles do this thing have?" When those are unused, it's a minor red flag.

Other attributes are used for things like - I don't know - integration testing or to tell app cues where to point at something. If you're using one of those things, we are pretty consistent in not using a class for it. There's always an explanatory attribute - or whatever.

Dave: Yeah.

Chris: It's data-reason.

Dave: Okay. Yeah.

Chris: It's a nice way to go. Is there some unused CSS on CodePen? Probably.

Dave: Yeah, but to what degree?

Chris: Not a problem.

Dave: We just saw a Lighthouse warning, and it was like, "Twenty-four of your 26 kilobytes are unused," and I'm like--

Chris: Suck it. I hate that.

Dave: --is that true, though? Yeah.

Chris: Yeah, but what if you click over one page? Are they used there? Well, guess what. They're cached then on that next page, and that's actually a good performance characteristic, so suck my pants.

Dave: I preloaded a thing, so.

00:55:19

Chris: Yeah. I put one more in the question list. It'll take one second anyway.

Dave: Hit it. Yes. Go.

Chris: There are more. Will Harris wrote in. We're talking about CodePen anyway. Why did we decide to use Go for our GraphQL sever? Why not Node?

I don't know that we ever made a Node attempt at it. Our first GraphQL service was in Rails. There was some gem or something where you could write all of your resolvers and models and crap in Ruby, and we did that. Now we're rewriting it in Go not just for fun but for reasons and stuff because we kind of want to spin down the old Rails app eventually and have a more broken-up system or whatever. And our Go API is not done, but it's serving some production use cases now, so we're pretty happy with that.

Yes, it's a good question. We could have plucked the Ruby stuff off and ran that as a separate service. We could have written it in Node.

We chose Go because we were just doing a bunch of Go work anyway. There's just some Go love here at CodePen, so it's a little bit cultural.

Dave: Mm-hmm.

Chris: Just like, "We like Go. It's a good language. We're going to use it for stuff." But not because we just liked it because we were like, "I like how the syntax looks," or something. It was more like, "This language is so fast and so efficient," that that's where some of the love comes from.

But not to mention it's typed and the code editing experience is really clean. But we could have got that from TypeScript, too. But there was certainly more Go love than TypeScript love at the time. Our TypeScript love is growing - to my chagrin.

Dave: Well, and I would think you... Part of the reason you use types and you use compiled language is removing your memory overhead. Right?

Chris: Mm-hmm.

Dave: It's supposed to be faster in that regard. I would say it's probably easy to code a bad Node app through a few NPM installs.

Chris: Yeah, maybe. We certainly should have shared some language. I think there would have been advantages to doing it in Node.

Dave: Mm-hmm.

Chris: There are more people that know JavaScript here. it would have consolidated language usage to JavaScript. That's not bad.

Dave: No. No.

Chris: That's good.

Dave: Yeah.

Chris: But you can also look at our AWS charts for how busy our Go server is that powers that API, and it's just sitting there just doing nothing. It's just so, so powerful of a server that doesn't sweat at all. We could hammer that thing.

Dave: For CodePen, servers are probably one of your major, major expenses. Right?

Chris: For sure.

Dave: And so, I think if you can eliminate that cost by using something that's way more server-oriented than Node because Node is very server, but it's the browser engine ripped out. [Laughter] You know? I don't know.

We're using Node. We love it. But we needed a proxy server thing just because we were hitting the thing. So, we built it. We used a Go library, a Go package for it because we just were like, "Man, we need--"

Chris: For a Web server?

Dave: Yeah because we just needed--

Chris: Nice.

Dave: It's going to get hit, and so we were just like, "Dude, we just need that to be bulletproof and not fall down," like memory safe.

Chris: That is a good choice then.

Dave: That's where I feel like Go is strong. Sort of set it, forget it.

Chris: I forget which one we use. Do you remember which server you picked?

Dave: Listen and Serve, or something. Is that like a default ... name?

Chris: Cool...?

Dave: Yeah. I don't know. Yeah.

Chris: It's just like Node. Everybody has got their little ones that they like.

Dave: I think we literally just said fork and then deploy, basically. [Laughter]

Chris: Yeah. Nice.

Dave: Yeah, so anyway.

Chris: That's how it starts, I guess.

Dave: Let us know. I mean maybe people are getting good mileage out of Node. Node is good. Node is good at concurrent requests. It's good at taking in a lot of requests. I think you can also--

Chris: That's how it was born, wasn't it?

Dave: Yeah, but I think you can also spike the memory. [Laughter] It's pretty memory hungry is what I'm noticing, just like Google Chrome. So, anyway--

Anyway, that's it. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on Twitter or Mastodon. You know where to find us. And join us over on patreon.com/shoptalkshow and join the D-d-d-d-discord.

Chris, do you got anything else you'd like to say?

Chris: Oh... That's all. Thanks, everybody, for listening. ShopTalkShow.com.