Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about front-end Web design and development. And we have a YouTube now. I guess we should say that. We've been posting some videos up to our YouTube here. Right, Chris? We're doing the--

Chris Coyier: Yeah, exactly. Chris Enns has been working on that, and it's kind of thanks to some of the technology in Riverside as well that makes this easier. I mean I'm looking at Dave's face right now as we record this. We might as well be in the same room. But we're not. But for the power of the Internet.

And we just flip the switch on in Riverside that says, "Hey, why don't you capture the video, too? Why not?"

Dave: Mm-hmm.

Chris: I can't promise that it's going to be 1000x interesting YouTube video, but YouTube is so big. And we heard from people directly that are like, "I would listen on YouTube if I could." I people have their own YouTube flows - or whatever they do. They just vibe with YouTube.

I thought, "You know, why not publish there, too?" It's just another publishing target. And if it doesn't cost us that much more money and time to drop it off there as well, hey, why not? Let's do it." It also gives us the opportunity to do little shorts and stuff. Shorts are just kind of fun and, certainly, a lot of people vibe with those things. Whatever - you're in the bathroom and flipping through shorts.

Dave: Yeah.

Chris: It makes sense to me.

Dave: Somebody told me my head was big, so I changed my camera, so that's cool.

Chris: Oh, I see. Oh, that's what it really is!

Dave: Actually, I don't know. I don't know.

Chris: There are going to be a lot more people seeing your face.

Dave: Yeah.

Chris: Yeah.

Dave: So, I'm like, "Oh, man. I might have to comb my hair."

Chris: Right.

Dave: Yeah.

Chris: Fair enough.

Dave: And do things.

Chris: I guess we'll share a screen here and there as well if it is obviously powerful to what we're showing. I don't know.

Dave: Yeah, instead of mouth blogging things, you could catch it up later on the... [Laughter]

Chris: Yeah. We're going to make sure that we don't harm the audio version of the show.

Dave: Yeah.

Chris: Certainly, that's what I listen to.

Dave: The audio is our primary.

Chris: Absolutely.

Dave: But hey, anyway, if you're watching this on YouTube, welcome.

Chris: Yeah.

Dave: We do this every week for the last 15 years. [Laughter]

Chris: Maybe it'll open up some sponsor opportunities, too. We have the Patreon and the Discord, which mostly funds the show. But I will tell you; not quite.

Dave: Hmm... Yeah.

Chris: So, it's nice to have a sponsor here and there. No pressure. You don't have to join. We love the people that do it, and it does form a pretty nice, little community. Certainly, the most pleasant community I'm a part of online, so way to go, Shop-o-maniacs. But I wouldn't mind doing an ad here and there.

00:02:50

Chris: I'll say this episode is very much sponsored by CodePen Pro. [Laughter]

Dave: Hey!

Chris: That's my actual day job that makes sure I can pay my mortgage, quite literally, and all that. So, please join. We are headed into a private beta of the new CodePen editor, as you probably hear me poke at once in a while. This thing is taking a very long time, but we're trying to do a good job. Yeah, sending out imports.

You know we're going to do a Discord-based, Dave? I think this is a little bit interesting is that you can send somebody a link to a Discord to join a particular... What are they? Organization?

Dave: Panel, yeah, org.

Chris: What do you call the highest level thing?

Dave: Yeah.

Chris: A server?

Dave: A server, yeah.

Chris: I guess it's the highest level thing on Discord. Then the invite tends to be a particular channel. Although, once you're in the Discord, if there's a public channel, you just have access to that, too. So, it seems like a little half-baked to me, in a way. But we'll invite you to the private beta channel on the Discord (in our CodePen Discord).

Then we were able to wire up. They have robust APIs, so you could get kind of like a webhook and be like, "Hey, when somebody joins a channel, fire off a webhook to whatever." That's a little bit of custom code, so we were like, "You know what? Instead of writing it, we'll just use Zapier."

Dave: Mm-hmm.

Chris: Zapier has a zap that's like, "When somebody joins a private channel, then do a webhook - or whatever." We're like, "Ooh... That's nice," so I just attached that to that particular channel.

I send out a Discord invite to you, for example. You join the Discord. Then a webhook gets fired off to our server, and I just wrote a quick, little Go endpoint for it that just says, "Oh, really? Interesting. Real quick, throw something in Reddis that says, you know, make a UUID and throw it in Reddis and say, 'That's valid for one use.'" A feature flag, essentially. "Then send a little junk of JSON back to Zapier that says, 'Okay, here's a special URL and a little message,'" So we can control the message in our codebase.

The message says, "Hey! Welcome to the CodePen beta. Here's a URL you can click to redeem your feature flag," or whatever. Cool, so they get a DM on Discord that says, "Welcome to the beta." They can click that. Then they have to be logged into CodePen. It checks to see that it's a valid key in our little Reddis store. Then for the logged-in user, it just adds the feature flag to them. That takes them to a special landing page that explains what's going on and all that kind of thing.

I thought it was nice to have a Discord first invite flow for beta. So, if somebody wants to join the beta, I just give them this URL and walk away. That's the invite.

Dave: You should publish that, man. We rolled out a whole waiting system for Luro, like, "Sign up." It went to a Netlify forum. Then we pulled that into a spreadsheet. Then we were bulk-inviting.

How cool would it be just to be like, "Oh, you got into the Discord private beta channel? Great." [Laughter] "Here you go. You now have access to the thing."

Chris: What it was is that it forces you into it, though.

Dave: Yeah.

Chris: But I'm okay with that because if a user is like, "Oh, I don't want to be in the Discord," that's okay. You can just wait for the public beta that's later if you want to.

Dave: Yeah. If they never click the link, they're never in, right?

Chris: But a private beta is like I'm asking you for feedback. So, if you don't have the time or wherewithal to even participate in the Discord at all, then just wait. It's cool.

Dave: Mm-hmm.

Chris: But I hope that some people do and want to and we'll be thankful for them in some way. That's the idea. Yeah, kind of cool. It should be ready next week-ish, I hope. Feel free to email if you really want in on that beta - or whatever. Woo! A lot of work, man.

Dave: Yeah.

Chris: I tell you what.

Dave: Yeah.

Chris: I'm getting some landing pages together because I'm like, rather than just drop them into the experience with no help at all, we're like, "Gosh, there should be a page that explains what's up, what you can and can't do."

I'm going to have to make the new documentation public. We've got a tour together, so there's a button in the footer that walks you around the new editor. It doesn't force it down your throat. But if you kind of want the tour, that's available.

There was a lot of work just on that side. The hard part was getting the actual application to do all the stuff that it needs to do. Then when you're looming down on actually releasing it, you're like, "Oh, God! There's so much tangential stuff you have to do."

00:07:34

Dave: No, you start pulling that thread on the sweater. We had the same thing. It's like, "Finally! We built the user auth system and the waitlist. We're ready for users." You're like, "We have no onboarding. Crap. What do we do?"

Uh! We've got to go through. We've got to build out little screens and little charts that fill up - or whatever. You're just like, "Man, this is so much work!" [Laughter]

Chris: Mm-hmm.

Dave: Thankfully, it's just one component that made a billion requests to figure out how much application they've used - or whatever. It was just... You know. You just start... You think, "Oh, we're good, and we can get people to sign up." Then you're like, ooh, but are they going to just sign up and not know what's going on or are they going to sign up and be like, "Oh, okay. I get what's going on"?

Chris: Yeah.

Dave: That's a whole science. That's a whole team's job. That's what we also realized. At big companies, Chris, there's a whole team the size of CodePen who only do the onboarding piece.

Chris: Yeah, yeah, yeah.

Dave: Ah! It's wild. It's so much. It's so critical, and it's so, like, "Oh, yeah. We have to do that."

Chris: That's what makes startups so amazing. You have all the jobs - all of them.

Dave: Yeah.

Chris: And there's an amazing number of them.

Dave: Take a billion dollars and you have all the jobs. You can have all the jobs filled out.

Chris: Mm-hmm.

Dave: There's--

00:09:05

Chris: All right. Well, thanks for listening to that. Sponsored by CodePen at the moment, but you know, Sweet Baby Ray's, we're always listening.

Dave: Yeah. Sweet Baby Ray's, Subway. I know they technically don't sell food - or whatever - but we'll hock Subway sandwiches. We'll do it.

Chris: I was sick the other week. As I was getting off of being sick because you haven't eaten, your body is just purged, you get a hunger like no other.

Dave: Yeah.

Chris: You're like, "I could eat anything," and somehow, some way, what my body really craved was a sandwich from Subway.

Dave: A $5--

Chris: That's what it wanted after being sick.

Dave: --Italian, yeah. Spicy Italian, heck yeah.

Chris: [Laughter] That was my high school sandwich, for sure.

Dave: Yeah.

Chris: I have graduated into being more open-minded about which sandwich I get there.

Dave: Oh...

Chris: But what doesn't change is I get just extra pickles, extra banana peppers, extra jalapenos. I like the vinegary crunch of a Subway sandwich.

Dave: Mm-hmm.

Chris: Not sponsored! Could be, though.

Dave: Could be.

Chris: Could be, easily.

Dave: Or if a different sandwich company wants to get in on this, you should.

Chris: Yeah. Yeah. Any time.

Dave: Yeah.

00:10:17

Chris: I was playing with some CSS yesterday that I thought was interesting because I was working on some of these landing pages. Of course, that's how content comes up is you do your job. Then you're like, "Oh, that's interesting." Then it becomes a little bit of content, in a way.

But there was a special card-like container we were using that has kind of a light rainbow kind of background. But as you know, most of the... We're going to be digging into color modes a little more seriously on CodePen, like actually switching to a light mode if you want to. But at the moment, a lot of our landing page public stuff is pretty much just dark mode only.

When I'm throwing in a little card bubble that's actually more like light mode within a dark mode world, a lot of stuff just isn't ready to go. The colors of links will just be wrong. You can change the color. Then you're like, "Oh, cool. I did it." Then all of a sudden, there's an anchor link in the middle of the text and it's way too light of a blue - or something.

Dave: Mm-hmm.

Chris: You're like, "Okay. Well, I can't change just that color. I have to change any other colors inside as well." Yadda-yadda-yadda.

Anyway, one of the things I wanted to do was just have underlined links. I don't know if this is directly related, but I'm just going to go for it.

I think it's nice (within body copy) to have your links generally be blue and generally be underlined. If you can do that, that's probably a good idea. I think that's just how links generally are on the Web - that kind of thing.

Dave: Smart default. Smart default.

Chris: Smart default. But it's a little harsh, I find. I find the default browser blue to be too blue mostly, for situations.

Dave: Mm-hmm.

Chris: I like the change the blue a little bit. I find that underline to be a little tight against the text.

Dave: Mm-hmm. Mm-hmm.

Chris: And I find the fact that the underline is the same blue also to be a little harsh.

Dave: Hmm...

Chris: So, there are a couple of things you can do to still maintain your basic needs there but chill it out a little bit. One of them is you can push that underline away a pixel or two if you want to. You can do that text decoration offset, I think.

Dave: Offset, yep.

Chris: Yeah, you can push it away. Just a little bit, I think, makes it look a little nicer. Then you can keep the underline the same color but you can tone it down, the opacity, by just doing... Now you can do text decoration color. That's a new thing. Or is it text underline color? I think it's specific to underline. It's one of the two.

Dave: Mm-hmm.

Chris: What color would you set it to, though? Well, you could use color mix and say color mix in a color space the current color. You know current color is just a keyword.

Dave: Oh, yeah. Yeah.

Chris: In CSS, current color, and then mix it with transparent 50% or 80% - or something. That way the underline is just whatever the color is, the link already is, but you've just chilled out that underline. You've moved it away a little bit and you've added some opacity to whatever color it currently is. Then just make the hover restore the color of the underline, which gives it a nice hover/focus thing.

Dave: Hmm... Nice. Yeah.

Chris: I just thought it was nice.

Dave: Yeah.

Chris: It was a nice little approach there. I shared it, and then people made it better on Bluesky. I was like, "Well, cool."

Dave: [Laughter]

00:13:44

Chris: Anna Tudor chimed in with an even better way because you don't have to... If you're putting this in something like a reset style sheet, which I almost think is worthy of that--

Dave: Mm-hmm.

Chris: --that you don't have to say text decoration underline on a link because it already is in a reset.

Dave: Mm-hmm.

Chris: Then you can just say... You can just apply a style to when it's not in hover. You can say is not hover focus. [Laughter]

Dave: Mm-hmm.

Chris: Then that will give it that particular style when it's not being hovered. Then when it's hovered, it removes that style and goes back to the default. I was like, "Actually, that's clever. It turns this thing into literally a one-line in your CSS."

Sorry about the mouth blog there. Maybe I should attempt to share that, share a screen with that. But I intentionally didn't share a screen because I was worried that I would--

Dave: Leak the CodePen.

Chris: --rely too much on the visual of it.

Dave: Oh, yeah. No, that's fair. Yeah. No, I think you described it enough. I understood it.

Chris: Okay.

Dave: Yeah, I think it's cool from, you know, I think there's a lot you can do with links. I like that, the current color and color mix. Are you finding--? What's the support of color mix? I feel like it's pretty good, right?

Chris: It's super good. Yeah.

Dave: Yeah.

Chris: I avoided it for a long time because when I learned about... Here's the thing that I find myself wanting to do the most: apply some opacity to the color that I already have, and I don't care what it is. It could be any color, and it could be in any format. I just want 80% transparency on whatever it is that I already have.

The answer to that is usually... To me, the first syntax I saw that I really liked of it was the relative color syntax.

Dave: Mm-hmm.

Chris: The one where you use color. Then you say from, use the from keyword.

Dave: RGBA, yeah.

Chris: And it can be whatever, yes.

Dave: Or RGB, and then you do RGB/0.2.

Chris: I really like that. It can be in any color format.

Dave: Yeah.

Chris: Then you can just apply transparency at the end of it. I learned that, and I was like, "Well, I love that. I still love that. I'm just going to wait for that."

The trouble is that support for that was real lacking and still is. Although, it is in interop this year, so that will be ready to go by the end of the year.

Dave: Dah-dah-dah-dah!

Chris: But today, you can use color mix to do the same thing with the browser mixer. If all you're trying to do is just apply some transparency to it, just do it in SRGB, and then just mix it with transparency, and you get the same result, and you can use it today.

Dave: Yeah.

00:16:12

Chris: I'm a fan of color mix. Also, in my mind I was like, "Who needs to mix red and blue to make purple?" I just don't need to do that. I don't want a--

Dave: Hand-mix your paints.

Chris: --programmatic answer to that.

Dave: Yeah. [Laughter]

Chris: If I want purple, I want to hand-pick my purple.

Dave: What's the paint place? Benjamin... What's his face?

Chris: Oh, yeah, an actual paint brand.

Dave: I'm not running a paint shop.

Chris: [Laughter] Yeah.

Dave: I'm not running a paint shop over here. Okay? I'm not Home Depot. I'm not Martha Stewart mixing colors and crap. I really mostly want to opacify or do something really extreme.

Chris: Slightly lighten, slightly darken.

Dave: Yeah.

Chris: But if it comes to be like, "Give me a little green, a little pink, a little--" that ain't happening. That's going to happen in another app, and then I'm going to have the perfect right color. Then I'm going to make that a variable.

Dave: Mm-hmm.

Chris: That's just me. No shame. I don't hate that color mix exists or anything. It's just I like using it for mixing with black or white - or whatever.

Dave: Yeah.

00:17:17

Chris: Gosh. I had to go through our whole code base and fix that crap up, too. We wanted to get on the latest version of Sass.

Dave: Mm-hmm.

Chris: I don't even remember why, but it's nice to be on the latest version of stuff. And there have been so many changes in Sass, even Dart Sass and beyond, where it's like there is no lighten and darken and stuff anymore.

Dave: Oh!

Chris: And they took principled stands. They're like, "You don't actually want darken. You want color.adjust." There's some stuff in the docs that's like people lean too heavily on darken, but what you really want to do is add black to your color, not darken it - or something. [Laughter] I was like, "Okay."

Dave: Oh, man.

Chris: At least the migration tool was okay. But there's some just deprecated stuff. You used to be able to have a selector, like .dave{}. Then inside of it put include. Then it would go grab a file or whatever and blast it in there.

Well, include is deprecated now. You have to use @use. That's the new thing.

Dave: Yeah.

Chris: I think that's a smart move.

Dave: Mm-hmm.

Chris: But we occasionally scoped some stuff, so it was like, "Oh, gosh. We have to refactor that entirely." There are no just raw functions anymore. There's no Nth or darken or anything like that.

Dave: Oh, wow!

Chris: It's all like you have to @use something. It has a module system. You have to use Sass color.

Dave: Hmm...

Chris: Then you have access to color.stuff in it. It ended up being like, "Oh, man. This is a lot of work." [Laughter]

Dave: Are you trying to say my Compass app isn't going to work anymore? [Laughter]

Chris: Your mixins now have to be at the end of all your declarations before nesting, and I always put them first because I had a hard rule. I was like, "All mixins should be the first thing in a block of CSS."

Dave: For sure. Yeah.

Chris: Because if you want to... A) They're just more visible because they're a little more powerful. Who knows what they're doing? So, I want to see them at the top. Then if they do something that I don't like, I have an opportunity after them to override something that happened in that mixin.

Dave: Mm-hmm.

Chris: But if they're at the bottom, I don't.

Dave: Yeah. Functions at the top seem smart. But what do I know?

Chris: Yeah, you can't do that anymore.

00:19:25

Dave: Hey, this is the problem with the CSS industrial complex, Chris. Okay?

Chris: Pretty much.

Dave: Big CSS is trying to get into your code base and make you change things. Okay? I think that needs to stop. You know what I mean?

Chris: It does.

Dave: Yeah.

Chris: I have a PR up. This is our second or third on, like, let's fix it all up because also they're just deprecations or they're deprecation warnings not full deprecations. So, it will still work. Some of the stuff will still work for a minute. But you just get a big, nasty red warning in CI.

Dave: Mm-hmm. Mm-hmm.

Chris: Or at the command line when you run it. I was sick at looking at them. I went in, but there's still some stuff to fix.

The temptation is, while your brain is in a really right brain kind of thing where you're just looking at code, you're just like, "I know what it wants me to do. I'm just going to make these changes throughout the code base." But then you step back and look at your PR, and you're like, "Man, I touched a bunch of stuff."

Dave: Every file, yeah.

Chris: And I did not--

Dave: Oh, 500 files changed. [Laughter] Yeah.

Chris: [Laughter] Yeah, and we don't have any... I'm trying to think of the canonical apps that do this, but there are some nice apps that I do kind of support the existence of but do find them, like, "That's going to be a lot." It'll have previous screenshots of all your pages. Then you do up a PR, and it makes new screenshots of all those pages and does a visual dif.

Dave: Mm-hmm.

Chris: It just has a little warning that says, "Oh, your user profile page changed in this way," and you can look at it and be like, "Oh, that color is now wrong," or it's missing an underline or something.

We don't really have that. It feels like you'd just get false positives a ton with apps like that, I think.

Dave: Mm-hmm. Mm-hmm.

Chris: You've just got to do some click-throughs and stuff. Of course, it's one of those; it doesn't feel good to be finished because your goal with all this work is so that nothing changes. [Laughter] You know what I mean?

Dave: Yeah. Yeah, it's just complete, like trying to be... I'm going to change everything. I'm going to touch every single file in the code base. But I'm not going to break anything or move anything.

Those are risky, man. I feel that. I'm in the middle of that right now with somebody. But it's this... That's a hard one. That's a hard, like, we're going to make a big, sweeping change and there will be zero things moved on the page. [Laughter]

Chris: Yeah.

Dave: That's a tough one to sell.

Chris: Then sometimes at the end of it you're like, "Well, but now we're on the latest TypeScript and it actually has some feature that we want to use, so now we're able to do it," and that feels good. There's just some general fuzzies inside about, like, not being on outdated technology - or whatever. That's pretty freakin' loose, though.

Dave: Yeah.

Chris: Sometimes at the end of it you're like, "It unlocks nothing."

Dave: Zero percent different.

Chris: Yeah.

Dave: We just updated small number to big number, and that's the only difference.

Chris: Yeah.

Dave: Maybe less dependencies... maybe.

Chris: Maybe...

Dave: I don't know.

00:22:25

Chris: Yeah, maybe there's a little speed here and there sometimes that comes out.

Dave: Yeah.

Chris: I remember that was an impetus to get to Dart Sass at all is that when you're on Ruby Sass, clearly that's much slower.

Dave: Yeah.

Chris: Did you see the news that TypeScript is getting a lot faster? That's pretty cool. They ported to Go.

Dave: I did see that. That makes me almost want to use it. No... [Laughter] I use TypeScript.

Yeah, porting to Go, right? Then it's like 10x faster, on average.

Chris: Huge, dude, for us.

Dave: For a large app... I had that post all right here, actually.

Chris: Well, to us it's not only our app but the TypeScript that we offer to the world. Here's the big thing about TSC. There's only one usage of TypeScript that actually outputs error messages about problems with types. There's lots of stuff out there that will take your TypeScript and execute it. But it does that by type stripping. That's how Dino is doing it. There's probably some nuance to this that I'm getting wrong, but that's how certainly the new Node does it, and that's how esbuild builds it and all this stuff.

If you can get away with just having esbuild run your TypeScript, that's great. But esbuild is just stripping. The reason it's so fast is it just strips out all the types and runs it.

Dave: Mm-hmm.

Chris: If you have an egregious problem in your types, it could care less. It is not going to give you that feedback. So, that feedback is only happening at a CI level. And guess what's running it: TSC or the VS Code level. Guess what's happening: TSC.

Dave: Mm-hmm.

00:24:00

Chris: TSC is the slow thing. That's what's really a bummer. And so, if we're offering TypeScript on CodePen, which of course we are (in a very nice way in the new CodePen, a real, proper, good TypeScript experience), if we want to be showing our users, "Hey, you screwed up your type right here on line 8 of hamburger.tsx," we have to run TSC. We have to.

Dave: Yeah.

Chris: And it's slow.

Dave: Yeah, well, and you probably have a server loop, right? You're going from CodePen to the TypeScript server back, right?

Chris: Absolutely.

Dave: Unless you're putting a TypeScript server on the computer.

Chris: And there might even be steps ahead of it, too. I don't know. Maybe not with this particular technology. But we make a whole build process, and we have to go through the steps of the build process. Then it will then get to TSC potentially a couple of steps down the road. I'm just pointing that out to be like any speed improvement to TSC is welcome, especially one that's written.

We chose Go because Go is smoking fast for our build process stuff like this. And it's nice to be validated, like, "Why did they do it? Speed."

Dave: Yeah. Well, yeah.

Chris: Why did we do it? Speed.

Dave: Yeah, well, and it's going to be... It looks like, from a large VS Code, 1.5 million lines of code, it took 77 seconds to compile it. The new one is 7.5. Can you imagine you're building the project and it's just like, "I'll see you in a minute"? That's a lot of action. [Laughter] That's a lot of waiting from a classic, like, "How long is this going to take?"

Then you talk about CI servers, which I'm finding are 10x slower than your computer.

Chris: Yeah, notoriously slow.

Dave: Right. For some reason, we've decided servers should be slow... [laughter] slower than laptops.

Chris: Yeah because they provision the cheapest Linux distro thing absolutely possible to run that.

Dave: Yeah, there are 700 computers on this one computer. You know, so your 77 seconds turns into 700 seconds, so you're talking about, like, 10 minutes just to build. You didn't even run a test. You just did a build.

Chris: Right, and it happens all the time, and it's always like my commit where I changed one hex color. It's like, "All right, computer. Buckle up. You're spending 10 minutes running some absolutely unrelated unit tests for my hex code change. Let's go!"

Dave: Yeah. Well, I built our project, and I had an error, so I need to figure that out. That's a cool thing I've got to do today. [Laughter] But... [laughter] I don't think it was there yesterday.

But it took 56 seconds, so I don't think we're in the millions of lines of code. I guess I could figure that out. But what is it? WCL, and then I'll just do star dot TS - or something like that. WCL packages... We're at 70,000 lines of code, and it took 56 seconds, so let's say one second per thousand lines of code. Then imagine that going down to one second per 10,000. That'd be incredible.

Chris: Yeah.

Dave: That'd be incredibly fast.

00:27:39

Chris: A straight up order of magnitude change is obviously a big deal. It'd be nice to see two orders of magnitude.

Dave: Well, because then I could build the whole project before in a pre-commit. Right now, we're not doing build in pre-commit because that would take too long. You're just trying to commit code up. And every time you do it, it takes 70 seconds, a minute.

You would move that into sub-ten-second territory. You could build the whole project in a pre-commit hook and now you know your CI is going to sail through. No surprises (unless the CI has some different config or something).

Chris: Oh, yeah. You're making an intentional choice to move some work left, as they say.

Dave: Move it left, and so I feel like that's a huge thing. Then it's just down to tests. Maybe your whole test suite gets faster because I'm sure the test suite has to make sure all the modules are built. That's cool.

I'm pro faster TypeScript. JS Doc also had a huge drop. It's faster now, too. You just type 10x less words.

Chris: [Laughter] Is that--?

Dave: Yeah.

Chris: They announced that? That's good.

Dave: If you had a ten-word variable name, you just do one.

Chris: Yeah.

Dave: And it's 10x faster.

Chris: 10x faster.

Dave: So, JS Doc really--

Chris: Yeah.

Dave: Yeah, just delete all descriptions of variables. Super-fast.

Chris: Yeah.

Dave: Just like TypeScript.

Chris: That makes a lot of sense, actually. Yeah.

Dave: Yeah. You remove the descriptions; it works just as fast. So, 10x.

Chris: Totally. Vanilla is really crushing it, too. They actually recommend just not writing any JavaScript at all.

Dave: Yeah. Yeah.

Chris: Just saying.

Dave: The fastest JavaScript is the JavaScript you never ship.

Chris: Yep.

Dave: That's always going to be true.

00:29:28

Chris: I wanted to put this out there in case anybody wants to write in about anything interesting. We all know what AI slop is, right? It's just really low effort crap. You could write in, "Write me a story about Amelia Bedelia." Remember those books? I don't know. This was a kids' book that we got.

Dave: No but go ahead. [Laughter] Yeah, okay.

Chris: Okay. Sure. Or Mamma Llama.

Dave: Goofus and Gallant?

Chris: Mamma Llama or Llama Llama.

Dave: Okay. Yeah. Mamma Llama, yeah. Red Pajama.

Chris: Mamma Llama. Write me a Llama Llama story.

Dave: Mamma Llama Red Pajama.

Chris: You could go to Claude and be like, "Write me a nice story about Llama Llama. Reference all the existing Llama Llama books that already are published. But make this one where he really wants some new sunglasses but he can't afford them. So, his mom makes him do chores and stuff to save up for them. Then it turns out, at the end, he doesn't actually want them anyway. He wants a Nintendo Switch game." Just put some plot details in there.

We all know that AI would probably do a pretty good job, right? Not amazing. It's not going to be a story that's maybe ready for the shelves but it's going to get you started.

But if all you do is copy and pasted that thing and just published it, I'd put it in the slop category.

Dave: Yeah, sort of. Yeah, right.

Chris: Because it's just low effort. Just blah-blah. And I think there's going to be more and more of that. As AI improves, there's just more and more of that, like, "I'm not even going to look." There's not even going to be a human in the process hardly.

Dave: Send. Yeah.

Chris: Yeah. And I feel like that's already happening quite a bit.

Dave: I've heard Amazon... You can self-publish on Amazon. I've heard that market is completely swamped. It's just people going straight to AI.

Chris: Which means that it's working a little bit. There are enough people either swindled or choosing to buy books of this category that it works because otherwise they would stop doing it.

I think that's my point here. I've been swindled once. I bought a kids' book. We forgot to bring books, and we always do books at bedtime, so I just pulled out my phone. I went to Apple Books, and I downloaded some book that looked good.

I started flipping through the first few virtual pages of it, and there was a little callout box that says, "Oh, this is my first book that I used AI to write." It was almost like a self-congratulatory thing. I was like, "I want to be warned." I was pissed. I wouldn't even read it. I should be warned before I pay $7.99 for a book if some author just pooped out some AI and published it.

Dave: Yeah.

Chris: I want to be told that. That is garbage.

Dave: What was your $7 contribution times number of books? Was it a one-sentence prompt? Cool. [Laughter] Okay.

Chris: Yeah.

Dave: I'd like to pay less.

Chris: That might even be true, Dave. They might have used AI sprinkles. They could have spent more time manipulating the AI to get what they wanted than they would have writing it. Maybe it was an amazing amount of effort, but I'm so sensitive to it right now that I'm not ready to hear that. Nor did they offer that information.

Dave: Mm-hmm.

Chris: They just said, "We used AI to build it."

Dave: Hmm... Hmm... Hmm.

Chris: So, I was annoyed by that. A friend group shares around Instagram crap sometimes. We got one the other day from a friend that was this really beautiful praying mantis bug, and it flew in and landed on somebody's hand. But it was a rare kind of praying mantis bug. A little flower. Actually, it was kind of a big flower grew on the back of the praying mantis. It was like, "Wow! What an interesting, beautiful bug."

But I was also like, "It's a little too beautiful." And the backgrounds are these snowy mountains. It looks like they're at about 12,000 feet altitude. Why is there this big, juicy praying mantis bug with a flower on the back of it? That's pretty weird.

Dave: Yeah, that's where mantis like to hang out, in the snow. Yeah.

Chris: Then I was like, "Nope. Nope. Nope. It's AI." We wrote back. We looked it up, and actually it is a kind of interesting praying mantis bug that kind of looks like an orchid flower. So, we write back and be like, "Oh, actually, the real version of that bug is actually pretty cool, too." They were like, "Oh, gosh. What do you mean real version? I was totally duped." They were just duped that this was an AI thing, so that's happening more and more.

Then my kid, eating cereal in the morning, is listening to a new podcast. It's called Bluey Stories. That's the name of it. It's on Apple Podcast. I think it's on all of the stuff.

Dave: Mm-hmm.

Chris: It's really weird. It's got a big picture of Bluey and Bingo on the cover. It's Bluey Stories in the Bluey font. But when you listen to it, it's just some lady explaining the plot. It's almost like they took an episode of Bluey, and they turned it into a short book. Then they read the book out loud.

Dave: Okay. Okay.

Chris: The book may or may not exist, but somehow it was turned into a book, so that's the idea.

Dave: Synopsis to book kind of situation.

Chris: Synopsis. Yeah.

Dave: Yeah?

Chris: Right. Then I was like, "Gosh, the voice is okay. It sounds like a real person, but the cadence is pretty strict. There are no mistakes ever." I was like, "You know what? I bet this is just AI slop."

Dave: Hmm...

Chris: Then the next one is an Australian guy voice. Then somebody sent me this 11 Labs - or something.

Dave: [Speaking with an Australian accent] Oh, they paid extra for that, mate! [Laughter] Oh, mate!

Chris: Yeah.

Dave: [Speaking with an Australian accent] $18.95 for another voice.

[Laughter]

Chris: Yeah! I was like, "That’s what this is, I bet!" But it's weird because there are no ads.

Dave: Uh-huh. Uh-huh.

Chris: But it really doesn't look official. I look at all the reviews of it, and there are like 800-ish reviews. They're all just crap.

Dave: "This is great."

Chris: Or not great. Or "I'm mad at Billy." Or a bunch of emojis.

Dave: Hmm...

Chris: There's not a single one of them that I thought looked like, "Oh, God. A person clearly listened to this and reviewed it and left the message of the review." Nothing.

I was like, "Oh, my God!" It's like the third time, third, fourth time I've been dupped or swindled by AI slop (in a month or less)."

Dave: This week, yeah. Yeah. Gees.

Chris: Ugh!

Dave: It's getting hard.

Chris: But some people want it. My daughter wants it. She chooses this podcast. You know what I mean?

00:35:53

Dave: There is a market, like people who want cheap content. Right? They've read all of the salacious elf erotica books, and they just want more.

Chris: They want another one.

Dave: They just want another one, and AI is happy to deliver. You know what I mean? That's fine. If you're like, "No, I'm digging in the trash bin and I fricken' want trash. I am a raccoon for elf erotica. Okay? This is what I want," that's fine. You can do that. I'm super-happy for you.

I do think there is, though, that needs to be devalued. I value it less, so I would like it to have less value or cost zero dollars and be very transparent about what created this monstrosity. That's me.

I was going to say, if you want some quality Mamma Llama Red Pajama content, there's a video of Ludacris rapping Mamma Llama Red Pajama.

Chris: Oh, yeah, yeah.

Dave: So, you've got to watch that. That's very good. Okay?

Chris: I've seen it many times.

Dave: [Laughter]

Chris: It's one of those videos that's like, "If this comes across my desk, I am definitely going to watch it because it's amazing."

Dave: Yeah. No matter how many times the algorithm serves that up to me, I'm watching it.

Chris: [Laughter]

Dave: I was like, "Oh, okay. Yep. We're doing Luda again." This is great.

Chris: Yeah. It's one of the best.

00:37:07

Dave: I was on Bluesky this weekend.

Chris: Mm-hmm.

Dave: A new follower, new follower, new follower, new follower, like 30, 50, hundreds of new followers on Bluesky.

Chris: Oh, really?

Dave: I've had explosive weekends like when Twitter died and Twitter did die, I think, on Monday. But when Twitter is having problems or kind of Nazi-ing out, I've had an influx of users. But it's usually kind of people I know, right? It's usually familiar faces from the Internet-o-sphere of Web development, right? How you would find me, I don't know. You either listen to the podcast or you know my work, probably. That's fine. That's normal to me, but it's never in the 50s and 60s numbers coming to Bluesky in a weekend.

I start clicking on all these profiles to see who is coming in, and it's all these left-wing grifter accounts, like all these, "Oh, I hate Trump and MAGA! No MAGA! Also, no porn and no crypto, please." Something like that. "DM is open!"

It's all these fake accounts that are basically left-wing activist accounts. It's like a grandma in Kentucky who loves LGBTQ DOCA. You know? You're like, "Oh, those don't go together, but that's weird."

Anyway, it was this influx of left-wing botnet-like bot accounts. And you know with AI and LLMs and everything, those are getting more convincing as far as looking and appearing like real humans. They were overloaded with keywords. But again, who is doing this? Why are they doing it? Who has--?

These have like 25,000 followers a piece, and they're following 25,000 accounts. They have 16,000 followers, so this is a botnet of about 30, 50, 100,000 bots. Who is paying for that? A state actor. Who is getting duped by it? Probably a lot of people are like, "Oh, my gosh! I have cool new followers."

Agh! It's a problem! It's going to be bad, dude. What's the security mechanism to stop all this?

I don't blame AI specifically. It's just kind of like it is slop, though. It's a form of slop. It's just fake accounts, fake bots doing fake engagement to whatever, steal your credit card at some point or dupe you into voting for a different political candidate.

Chris: Yeah, you've got to wonder what the actual motive is. It's so weird to me when the motive is unclear.

Dave: Yeah.

Chris: That freaks me out. You're like, "What are you trying to do? What is this Bluey podcast trying to do, really?" Some human wired this up. Why?

00:40:11

Dave: Bringing us back to Web development [laughter], I've wondered. I've kind of been like that's in context, right? But I wish every podcast had to say, "Here's why this exists," or something like that, on the top. Or every component, every variant in your design system, a sentence that says, "Here is why this exists," like, "Some people don't like the primary button, so we made the secondary button." Or "Why does this exist?" "Because Jim really wasn't going to collaborate on the primary button, so he made all outline buttons," or something. I don't know.

That's a fine excuse. It's not the best excuse, but it's a fine reason. I don't know. I feel like everything needs to have a little context stapled to it so we kind of all know why something exists.

Chris: I love that. It reminds me of my database column idea where I feel like almost every single database column should have a "why" text at the end of it--

Dave: Why? Yeah.

Chris: --that's like if it was ever edited, touched, or whatever. I know that's probably a waste of space on a lot of database tables, but I find myself wanting it so often, and be like, "What changed here? Who changed it? Why did they change it?"

Dave: Why? Yeah. Even bans, right? Why did I ban this person? Why did I mute this person?

Chris: Yeah, exactly.

Dave: Why? I'd love to know what 2016 Dave was thinking about certain JavaScript influencers.

00:41:52

Chris: It's kind of a nice... It's a little bit of a reason. There's this kind of expensive group email app we use called Front. It's not the only one on the block. In fact, there are some other cool alternatives I've seen recently.

One of the number one features that I like about it is that your whole team logs into it, and you're seeing, for example, the support email address. Everybody can see that same inbox.

Dave: Mm-hmm.

Chris: But if Marie on our team responds, I can see that it was Marie who responded even though, to that person, it kind of just looks like CodePen - or whatever. Although, we all sign it when we send it, too, so there'd be another way to see that.

But this other feature is that there's just chat attached to all email threads. So, you're chatting back and forth with your team not over email, just over the internal chat mechanism baked into the app. What's cool is that adds a lot of context and it stays there forever. So, if you go back and look at, like, "Oh, what was up with that situation?" you're not only seeing the email thread but you're seeing the internal conversation that happened with it, which is awfully useful.

Dave: Mm-hmm. Yeah. What was... Basecamp used to have a CRM. I'm sure Salesforce does this, too.

Basecamp had a CRM tool that was kind of like that. Not Campfire. Not Basecamp. Highrise, I think is what it was called.

Yeah, you could get a little email thread or basically a chain of, like, "Here is what we told this person on October 2nd." Yeah, just a little context stapled to that conversation that exists in time. Then people don't have to remember why that exists. Yeah. Huge.

Chris: Lovely. Wonderful. How much time? We've got a little time left here.

Dave: We've got some time. Yeah.

00:43:38

Chris: Let's do one that Steve wrote in just because this might ignite some interesting stuff from the old community there. Steve Polito, a friend of the show, writes in. This is from a little while back because we've had this, you know, our numbers are fine on this show, but certainly we're not in a hockey stick growth category here at ShopTalk Show listeners.

In fact, it's a little hard to know because we've switched platforms and stuff over the years and stuff. But it's my guess that we've had a peak that is higher than it is now as far as listenership on ShopTalk Show, and we were worried about that. We were thinking, "Oh, I wonder if it's you were a fan of the show early and then you just changed."

Dave: Yeah.

Chris: You got a different job or you leveled up and stuff. I wonder if there are a bunch of senior developers now.

Dave and I are senior developers, so you'd think you could still value listening to this show to some degree. But maybe you're just less interested. I don't know what it is.

Dave: Yeah. If you end up in a more manager position, maybe your senior level is more manager, I could see why you'd be like, "I'm not going to do the whole podcast every week." I totally get that.

Chris: Yeah. Steve wanted to share his journey with hopes that other people might share theirs too, in kind of bullet point form. Let's read Steve's. Steve said, "In 2012, had an internship as a Web designer/developer. Turned into a full-time gig. Was the only developer at an agency." That's so funny. That's exactly how mine worked, kind of.

"That was the sink or swim moment and was spending time configuring and styling Drupal sites and WordPress sites and building HTML emails and that kind of thing. Didn't do a lot of JavaScript. Didn't really dig down on the fundamentals."

Time goes on. He got really confident at doing that styling and working on those sites. But if needed to do something custom on those sites and there wasn't a Drupal plugin or WordPress plugin to do it, he was in trouble.

The next bullet point: "I eventually discovered Rails, which was an ah-ha moment for me. I realized this was what I was looking for was a Web development framework. Not a CMS but a framework.

"I spent a year or so doing deep dive on Rails until I built up enough confidence that I convinced the agency I worked for to take on a Rails project. Used Rails. Used other hobby projects to build up a resume, and then started applying for literally Rails jobs.

"My concern was that the career options would be limited if I kept working in WordPress. Not because WordPress isn't a great tool but because there's a limit to what you can build with it. During this time, I wrote a lot of blog posts on the subject," so stevepolito.design was writing about Ruby on Rails.

"Did it at the last job. Doing hobby projects in it. Applying for Rails jobs. Writing about Rails, et cetera.

"Fortunately, I got a job as a Rails developer working at a startup. I think my writing is what helped me out." And then the last bullet point, "I'm happy to say that now I work at Thoughtbot, which is an agency that specializes in Rails specifically."

Yeah, Thoughtbot is definitely who I think of when I think of Rails jobs. Interesting journey there, Steve. Feel free to send in your dev journey as well, how it started, how it's going.

Dave: Yeah.

Chris: That'd be kind of cool.

Dave: I thought this was good. I wanted to kind of see. Steve, you don't put dates on your blog posts. I'm going to flag you for that. But I wanted to see what was the intern to Rails timeline because I think that's probably interesting to folks, going from I'm just cooking WordPress to I'm writing apps and delivering these to people. I would love to know what that timeline is. He said it took like a year to learn Rails.

Chris: Yeah.

Dave: Yeah. Anyway, everyone's timeline is going to be different, but I just kind of was curious. Start writing for Hotwire. Blog. The Thoughtbot blog, sorry.

Chris: Yeah.

Dave: That's cool.

Chris: Pretty rad.

Dave: I'm just going to sneak a date in here somewhere. He's not perfect. He's going to put a date somewhere. He's going to use it as an example and I'm going to find it.

Chris: Well, you can see the dates on the Thoughtbot blog posts but not the--

Dave: Yeah. I'm going to find one.

Chris: --personal ones.

Dave: I'm going to get him. Okay, "Install Bootstrap 4 on Rails 6." Okay, cool. When?

Chris: Bootstrap?

Dave: Jarvis, when was Rails 6 release date?

Chris: Yeah. I bet AI would be decent at answering that question.

Dave: Let's see. August 2019. Okay.

Chris: Sounds about right.

Dave: I got it down to a seven-year window. "Why I still think Rails is relevant in 2019." Ha-ha! We're getting closer. But no, that's great. So, six, seven years in the field and feel like then it's time to writing and standing out and getting hired. That's cool. That's awesome. I'd love to hear dev journeys like that in bullet point form.

Chris: Mm-hmm.

00:49:03

Dave: Yeah. Mine is pretty boring. It's like worked, been doing websites as a hobby since I was 14 or 15 in the early '90s. Then ran a multi-blog network thing. Then made real estate websites for a Phoenix real estate company in 2006-07, right as the real estate market crashed. [Laughter] Then started Paravel. Then got job at Microsoft. You know, pretty short list that spans 30 years.

Chris: Yeah.

Dave: But you know. Whatever. [Laughter]

Chris: Whatever. Yeah.

Dave: A short list, 5 bullet points, 30 years.

Chris: There tends to be a little bit of a moment where you can point at in people's, like, "That's where they got smart. Right there in that little spot." [Laughter]

Dave: That one.

Chris: [Laughter] Which I'm waiting for that moment, still. I can't wait.

00:50:00

Dave: I was... I did... Somebody... Susan Roberton tagged me in the blog questions thing. Do we have time for this? Yeah.

Chris: Mm-hmm. Sure.

Dave: Sure! Tagged me in the blog questions thing, and the first question is, "Why do you blog?" I had a Zeen in high school with my best friend Mike. We'd stay up late gluing it together and stuff like that. Then did a blog in college, kind of like post-college, getting a job, then moving to Japan sort of thing. Then my current blog was because I think I went to South by in 2009 - or something - right when I moved to Austin and I met Zeldman.

Chris: Nice.

Dave: Hero time, like, "Whoa! This is the guy I read his book, and now I make HTML sites instead of Flash sites." That was very cool.

But I think my takeaway from that was actually like, "Hey, the difference between you and Zelman," I mean there are a lot of differences, "he writes and he publishes and then he gets published into books and then he talks at conferences. Then he wins lifetime South by Southwest Webby Awards."

I'm not saying it's a foolproof plan, but that gave me a template for, like, "Here's how I could pursue a career," and that started in 2009.

Chris: That's the shortcut nobody takes.

Dave: Well, you know.

Chris: Not nobody, but--

Dave: I can even trace what I do now and the fact that you and I are talking to that moment. I started writing about WebKit animations transitions.

Chris: Nice.

Dave: And I did a talk at a local meetup about it because people knew who I was through these blog posts.

Chris: Yep.

Dave: Then who did I meet there? Christopher Schmitt. Christopher Schmitt invites me to talk at conferences. Who do I meet at conferences? You, Brad Frost, all these people, like Estelle Weyl.

Chris: Fascinating. You can draw a pretty straight line. It's not that abstract.

Dave: It's not that hard.

Chris: Yeah.

Dave: I'm not saying I knew what I was talking about or still do. [Laughter] I'm sure I have huge inaccuracies in my thinking.

Chris: Yeah.

Dave: But pretty linear line between writing and getting invited to conferences and speaking. And I think you should write down your thoughts.

Chris: Yeah, that's pretty sweet. It's a different world now. We can't commit the classic, like, old-guy sin of, like, whatever.

Dave: Yeah, conferences don't exist anymore. [Laughter]

Chris: Yeah.

Dave: That's a problem.

Chris: Yeah. Certainly, a different world out there these days. But there is, I'm sure, equivalent journeys that can and will be had.

00:53:05

Dave: I had a dream about a ShopTalk CodePen conference where we just were in Denver. We're doing it in Denver because it's somewhat central and easy to get to. Sarah Draasner was there. It was like, "This is what we'll do. We'll just do it in Denver." Everyone was like, "Yeah, that makes perfect sense. We're going to Denver. It's easy to get to. A major airport."

Chris: It's going to happen someday, man.

Dave: Yeah.

Chris: I swear to God. It's one of my dreams is to have an event like that. I think everybody wants to. I think there's enough momentum there. I'd be willing to take it on at some point. But my prerequisite is a little deeper of a war chest. Instead of it being like, "We're doing fine."

Dave: Yeah. I want it to cost me zero dollars. [Laughter]

Chris: Yeah. I want it to round down to zero.

Dave: Yeah. That's the only issue I have with the whole situation is I cannot lose $30,000 or $130,000 on the job.

[Laughter]

Dave: Just negatively impacts my family's wellbeing if I lose $100,000 here and there.

Chris: Uh... man.

Dave: Less than ideal.

00:54:17

Chris: No, no. I want to be... [Laughter]

Somebody sent me a reel this morning that was like these hilarious women having a conversation. She was like, "What's the hardest thing about being a liberal?"

"Not having any friends with a boat."

[Laughter]

Dave: That's good. Yeah.

Chris: I'd like to be the first liberal with a boat.

Dave: That's good.

Chris: I think that's my goal.

Dave: Yeah. Be the change you want to see in the world. That's it.

Chris: [Laughter] That's my motivating factor from here on out.

Dave: Just set goals. Set goals. Vision board it.

Chris: Oh... funny.

Dave: All right. Well, thank you, dear listener, for downloading this in your podcatcher or YouTube of choice. Be sure to star, heart, favorite it up, shart it up. That's how people find it. Click that thumb button. Be sure to like and subscribe. Ring that bell for notifications. [Laughter]

Chris: [Laughter] Oh, yeah! You can say that now.

Dave: I can say that now. And then join us in the D-d-d-d-discord. That's where all the fun happens. Patreon.com/shoptalkshow. And... Chris, do you have anything else you'd like to say?

Chris: ShopTalkShow.com in current color.