Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--in the auctioneer booth--Rupert [laughter] and with me is Chris Coyier. Hey, Chris.

Chris Coyier: Hey, Dave! Just--

Dave: Can I get five? Can I get five? Can I get ten? Can I get ten?

Chris: What am I bidding on?

Dave: Can I get 95, 95?

Chris: Feels fair.

Dave: Um... I don't know. I've done... Have you ever done an auction? Have you ever been asked to do that, like auctioneer an auction?

Chris: I've never been asked to do it, no. I've heard it. I've heard it before, and there are some better than others. The ones that are actually just kind of mumbling, you're like, "Meh," but when you're really good at it, it's almost Boomhauer-y. You are saying stuff just really quickly.

Dave: Yeah. Yeah. I have been asked to do it, and I actually have a friend that does it. He's really good at it. He gets invited to Hollywood and crap to go do these auctions.

Anyway, I've done it before, but I've realized my weakness is doing math on the fly. So, if somebody is like, "$100," I'm like, "What's the next number?" I have no idea how to do a number after this.

[Laughter]

Dave: What are we going up by?

Chris: That is kind of the whole point, right? Can I get a $101? - or whatever. That kind of thing.

Dave: Yeah. Yeah. $109, $109 when to see, $109, $109... Yeah.

Chris: Yeah.

Dave: Then how do you--? I just can't. Anyway. I can't do the math.

Chris: Wasn't the micromachines guy--? Wasn't he? Was he just fast-talking or was he auctioneer-y?

Dave: He must have been. He had to do that on the side. But I think he just was a fast talker. He just worked on talking the fast. [Laughter]

Chris: It came up yesterday somehow in conversations. Now somebody... One more person is going to say something about fast-talking today just so that I get the triple. You know? Things happen in threes.

Dave: Oh, yeah. Get the old wives' tale kind of triple, "things happen in threes" thing.

Chris: Yeah.

Dave: Yeah.

Chris: Yeah.

00:02:12

Dave: Somebody will. I have a story.

Chris: Mm-hmm.

Dave: It's weather related. We're talking about weather on the podcast. It's not my favorite thing, but the AC in my shed went out the other day.

Chris: Does that make it wholly unusable? It seems like it would.

Dave: Well, when God closes a shed, sometimes he opens a sauna. You know? You've got to think of, you know, on the bright side.

Chris: [Laughter]

Dave: It's 108 here in Austin, Texas, so it was getting pretty hot.

Chris: Oh, my God.

Dave: Apparently, there was a freon leak, like out of the front, the blower side, so I've just been huffing freon for God knows how long. [Laughter] All summer long.

Chris: Oh, my gosh.

Dave: Anyway, it's fixed now, and I want to thank the folks at Backyard Office who built my shed. They treated me very nice and got it all fixed up in a very quick manner, so they're cool.

Chris: The shed people are the HVAC people too?

Dave: Well, I just called them because I was like, "I don't know if I have a warranty or anything." They were like, "Let me see here," and so yeah. But I think they've historically switched to... Ooh... they have a new model of shed. Maybe I need to look at that.

Chris: [Laughter]

Dave: I should get a new one. [Laughter] It's the Executive Model. But I need to... Anyway, it's backyardoffice.com, if you're interested in looking and shopping.

But I was going to... Anyway, I just was like, "What's going on?" Apparently, these mini-split ACs, apparently there's... It got me thinking about services or component frameworks and stuff like that, too.

You can buy a $900 one, $700 one on the Internet. I had an AC guy and the guys who actually replaced mine, they were like, "Hey, is it an online one or is it a Mitsubishi?" Those were the two versions. And Daikin was another one, a Korean brand.

But online or Mitsubishi, and I was like, "Oh, I guess it's an online one." They're like, "Yeah, these are hard to service. You have to order parts from far away. There's no customer service line, or it's very under-staffed, or straight up just not in this country. You know what I mean?

Chris: Hmm...

Dave: Anyway, the replaceability by going with a big brand name was very interesting to me. They were like, "Hey, if you go with this, you can get this thing replaced." It had me... It made me have some thoughts about component frameworks or any JavaScript sort of thing we use.

Chris: The bigger the better, in a way.

Dave: Sort of, which is not my attitude. But I was kind of like, "Well, if you need a part replaced, you probably want to go with something that is well-known."

00:05:06

Chris: Yeah. Yeah. A buddy of mine was stuck traveling. He was in Las Vegas. I was in Vegas for the weekend, Dave. A great time.

Dave: Mm-hmm.

Chris: Anyway, he was trying to get back to San Diego. There's a hurricane out west.

Dave: Mm-hmm. Mm-hmm.

Chris: Everything is fine in nature, though. [Laughter]

Dave: Yeah.

Chris: Wow. Hurricanes on the West Coast now.

Dave: Nature is doing good. Yeah.

Chris: Really? Yeah.

Dave: Yeah. I'm in a heat dome. There's a hurricane out west.

Chris: All rights are canceled. He's like, "I'll rent a car." You know? What are you going to do?

Dave: Mm-hmm.

Chris: I'll drive it. Winds affect cars a little less. All the cars are gone. Of course, they are.

Dave: Yikes. Yeah.

Chris: A bummer situation, but a guy was like, "Do you need a car? I'll get you." There are small-time car renters at the airport being like, "Yeah, I'll drum up some business. This is a big opportunity for me, the small guy." But it was the same kind of vibe, right?

Let's say they're legit, which if they ask you to pay for your car in Bitcoin, let's say it's not.

Dave: Yeah, that seems like a not legit, probably stolen car. But go ahead.

Chris: Right.

Dave: Yeah. [Laughter]

Chris: Let's say they are real. Throw all that away. They're just trying to drum up business for their not Hertz level, not national level.

Dave: They've got to make a payment on their 2012 Carola.

Chris: But still, who are you going to call if something goes wrong? Where do you return it? Is it some weird driveway somewhere (because it's probably not at LAX - or whatever).

Dave: Mm-hmm. Mm-hmm.

Chris: It's that kind of thing. Okay, maybe this works. Maybe they're going to fulfill a need. Maybe even the price is right. But you don't get what you get from the bigger players.

Dave: Yeah. Yeah.

Chris: Same kind of vibe a little bit.

Dave: There's a little bit of a downgrade in what you... Yeah. You know.

Chris: Yeah.

Dave: But at the same time--

Chris: Anyway, use React. It's great. [Laughter]

Dave: Use React. I think that we're a Next.js podcast now, so....

Chris: No.

Dave: No, but I could also go the other way. If you're in San Diego and you're going to get fish, don't go to Chili's. Go to one of the smaller places that gets fresh fish. You know what I mean?

Chris: It can go the other way, can't it? Oh, gosh. All metaphors have been debunked.

Dave: Yeah. Myth busted.

Chris: Yeah.

00:07:16

Dave: Speaking of MythBusters, I'll give you a mouth blog that I've been working on.

Chris: Uh-huh. Okay.

Dave: Do you know Adam Savage, the myth buster Adam Savage? There's Jamie and Adam.

Chris: I'm familiar.

Dave: Adam has this new YouTube channel called "Tested" and they do a bunch of different stuff on there. It's kind of like continue the maker spirit, sort of, in tech and making and stuff like that.

Adam Savage does these things called one-day builds. Are you familiar with that? He basically says it's one day; I'm going to build something. Like a model, a movie replica, a Lego set.

Chris: Okay.

Dave: Or a lot of it is he's going to build a shelf for his shop. He's just going to reorganize his shop.

Chris: That's kind of neat. I like that. I'm kind of a one-day blog post kind of guy. You know?

Dave: See. Yeah.

Chris: I like scoping things down to a certain level. What he's not going to do is build a multi-level deck for his cabin because that's a week-long project, or two or a month or whatever. Yeah.

Dave: Right. I'm really attracted to this idea of one-day builds. I did one last week. Trent needed a little tool to fake some data. Not for illegal purposes, but just for better demonstrations.

Chris: Mm-hmm.

Dave: I just said, "Okay. Today is the day. I'm doing it," and I built it in one day, shipped it, and it was out. Only one person is ever going to use it.

Chris: That's cool. Does it put fake data in Luro that's kind of believable-looking kind of thing?

Dave: Yeah. Yeah.

Chris: Yeah, I like that.

Dave: Because right now... I guess I can... [Laughter] We just have a component tracking technology now, so you can basically track the rollout of your components on your live site. You basically tell us what they are and how to find them with CSS selectors, and we'll go find them. Then we'll run counts, tallies, and stuff like that.

But if you don't update your website, like we don't, it's just a flat line. And so, we were like, "We could--" It's a little more impressive if the data sort of swoops or it looks like it's going up (just for a demonstration).

Chris: Which it might if you're rolling out a design system or something.

Dave: Yeah, if you're actually building on a live site, it will move around quite a bit. But if you're three, four, just kind of working on a website intermittently, then it doesn't move that much.

Anyway, very cool. But just built a little tool to fake the data for the demo just so we could show investors or potential customers or whatever just kind of what it probably looks like.

Chris: It seems pretty smart, honestly. Any app that needs some data in it to look like you're trying to because you can always show your own. But then your own is going to have a little bit of rough edges maybe to it.

Dave: Yeah.

Chris: I'm picturing something like Apple. They constantly have... They're showing their mail app. They're showing iMessage. They're showing all these apps, photo apps, and stuff. They want to make it feel like that could be you.

Dave: Mm-hmm. Mm-hmm.

Chris: But of course, it has to be filled with very banal conversations and beautiful photos and that kind of thing.

Dave: And legal requirements. You can't use a real person's name.

Chris: Ah... There you go.

Dave: If you look at the names, they're always the same. Microsoft always uses this company called Contoso in their demos.

Chris: Hmm...

Dave: Once you see it, you'll never unsee it, so I apologize.

Chris: Okay.

Dave: But anyway, Contoso. It's just because if you say whatever - Flickr - it's like, "Oops, that's copyrighted. We're sued, and we used that on stage."

Chris: Right.

Dave: Anyway, it's very cool. Johnny Appleseed, isn't that Apple's person?

Chris: Oh, yeah. I feel like I haven't seen that in a minute, but yeah. It was, wasn't it?

Dave: Yeah.

Chris: It feels a little too fake now. Maybe they moved on.

Dave: A little too fake, but anyway.

00:11:20

Chris: I was using this app the other day called Beeper. I should write about it because I think I'm just about to pull off of it. I think I maybe originally saw it on Kotke or something, but it's an app that you'd assume exists but also kind of assume doesn't exist. It's a chat combiner app, Dave.

Dave: Okay.

Chris: Beeper.com. Pretty cool name. Pretty cool URL. But let's say you use Slack and Discord and iMessage and Signal and WhatsApp and Facebook Messenger and all that stuff.

Dave: Mm-hmm. All right now. Yeah.

Chris: Yeah.

Dave: Yeah.

Chris: Yeah. There's a lot of them. It's a little bit of a prolific period of it. But it doesn't seem to have just exploded. It's been slowly exploding for a long time, showing no signs of slowing down, really. A little bit like social networking is happening.

I guess the premise is, wouldn't it be nice if there was just one app that smashed them all together? Not like adding one to it. They don't have beeper messaging. They just combine all of your other ones into one.

I was like, "That sounds a little too good to be true. Is there really APIs for all of these that just work? How is this the only thing that is doing this?" But apparently, there is because it does work. I think it's still in beta. And I got it working.

I just authorized everything. Maybe to my... Maybe that's a little dumb. But it was kind of nice to have. I never check my Instagram DMs, but I have Instagram. I post stuff there. So, it was kind of nice to have a place that those just show up right next to all the rest of your messages, so you don't miss it.

Dave: Yeah, that's cool. Yeah.

Chris: Even your Discord DMs and stuff. I was kind of into the idea. I don't know what else to say other than it felt like just a little unpolished and a little bit like you've got a lot of messages that were like, "Our Facebook integration isn't working today. Don't worry. We'll let you know when it is," kind of thing. I'm like, "Yeah, you have to let people know that." But I also don't care. Also, now this message is noise to me.

Dave: Mm-hmm.

Chris: I don't need any more noise, so there's just a little bit... And it's early days. It's beta. So, maybe they'll get stuff out. But a clever idea. I thought of it only because they also have marketing that's full of faked data that shows what using this app is like.

Dave: Yeah. yeah.

Chris: Like your tool that you built surely does this kind of thing.

Dave: It's weird when you start a company (or are in a company) just all the small things you have to do, like, "Oh, we need an admin reporting tool. Oh, we need a tool for faking data to sell the product, or even just streamline screenshot making." All these things, you're busy.

Chris: Yep. Yep.

Dave: Making videos and stuff like that, it all adds up, man. It's hard to do with a small team.

Chris: We're a little lucky on CodePen that there's so much public stuff.

Dave: Yeah. Yeah.

Chris: But there are a lot of people that just have kick-ass profiles that they just make and are intended to be public.

Dave: Right. Right. See. That's cool. We're probably a ways away from the public stuff, I'd say.

Chris: Yeah, if ever. It's kind of a personal thing.

Dave: Yeah. But anyway, one-day builds. I'm a fan.

Chris: One-day builds. Adam Savage. Yeah.

00:14:50

Dave: Here are some bonuses, too, right? You do a one-day build. Guess what, Chris. You've got a one-day story. You've got a blog post out of that because you did.... You know? Now your content engine is going.

You did one thing in one day. Maybe it spills to two days, but you're not like, "Man, I'm going to take a week to build the app of my dreams," and then that takes two weeks, a month, a year.

Chris: Yeah.

Dave: You're just like, one day, I'm going to do stuff. Adam Savage kind of says, "I don't jump into one days. I kind of pre-think it all through."

Chris: Right.

Dave: He background thinks all the stuff he needs and maybe sources some materials beforehand so that when he works on it, he can just, boom, work on it. That's the other issue with the workshop. You've got to have your workshop in place, like the tools you use, the tooling.

Chris: Right.

Dave: I think about even codebases and stuff. Man, wouldn't it be a one-day build, like we're finally updating NPM packages? One-day build project.

I guess my full extrapolation is, like, how far could you take this? How many one-day build projects could you have as a company? Is that a viable strategy for product development, trying to think in those terms?

Chris: Yeah. Even if it's not, I think the goal then is if it's a bigger project than that, how far can you slice it up?

Dave: Mm-hmm.

Chris: Can you make little bits? Can a card, can a task be a one-day task?

Dave: Yeah.

Chris: I think, like it or not, there are going to be people that work for you that thrive on that type of thing, and you need to set things up for them or let them work in that way.

Dave: Yeah.

Chris: The one-day PR, let's call it.

Dave: Yeah. There are planners, too. Planners want to plan, right? If I'm like, "No, I'll only work on the one-day build when I think I've done all the thinking for it," you know that doesn't help everybody. I don't know. It's just interesting to me. I think I'm getting a lot of this idea of one-day builds and rapid iteration problem-solving. You're just like, "Here we go. We're just doing it."

Chris: Yeah. Yeah.

Dave: But even stuff like I'm going to clean up my office. That would be a one-day build project. [Laughter] Organize my crap, and then I'm more relaxed when I go to work. That's probably worth it, the intangible stuff. Or I'm going to clean up the repo, finally get... Well, if you mess with any config files, it's going to take a year. But I'm finally going to get the workspace, the code editor set up how I want it. Anyway, it'd be interesting. More one-day builds; that's what I'm after.

00:17:40

Chris: I like it. The Discord is doing pretty good. Join us on Patreon. We've got some new faces in there. Very cool. Great bloggers. Hot Drama is one of my favorite things.

Dave: Mm-hmm.

Chris: My what?

Dave: Oh, well, I'm just saying Discord, we haven't been doing a lot of ads, so the Discord community is really helping us get through the summer here of 2023. We appreciate it.

Chris: It is indeed. Yeah. Earlier this year, we were like, "We're not going to do ads," and then we ended up doing some ads. [Laughter] So, there you go.

It was a little unsustainable to do zero ads, being that we pay for transcripts and we pay for editing and there are some hosting costs and stuff like that. It would be a little too net-negative to do absolutely nothing.

Dave: Right.

Chris: But the Discord goes a long way in helping out. Thanks for that.

The Hot Drama channel is one of my favorites. There's a spicy little Zach Leatherman Mastodon post in there about tracking. It wasn't just him. He had saw various people saying things about Gatsby. That was acquired by Netlify earlier this year and totally unsurprising to me. It's a little deadsky.

Dave: Yeah. I think Zach was wondering. I guess earlier this morning he was just like, "What's up with Gatsby?" I'm sure there's some weird blood between Netlify, Gatsby, 11ty.

Very soon after the Gatsby acquisition, 11ty stopped sponsoring 11ty development, which is... whatever. I don't know anyone's books or anything. But then I think Fred K. Schott, who is no stranger to hot drama himself -- very frequent hot drama channel member, subject.

Chris: I love Fred. He's a little spicy sometimes.

Dave: Yeah. He's got a propensity for spicy. But he was just saying there's zero commits to Gatsby in the last 24 days. Then there are follow-up tweets. It's just like all the Gatsby folks are basically gone. What's happening there?

I don't know, man. What do you think?

Chris: Well, things have a lifespan. I don't expect the things go on forever. I didn't use it anyway. What do I care?

Dave: Yeah. That's true.

Chris: Am I super sad for anybody that uses Gatsby? Even then, not really. Does your website work? Yeah? Well, fine then.

If there's a huge security problem or something, that could be a bummer. But we haven't seen that happen yet. Maybe there is something in place that would fix it if that was the case. Again, we don't know, so why invent drama out of nothing?

Dave: Right.

00:20:28

Chris: Gatsby has been on the decline for years. What did you expect to happen, a huge bounce back?

Dave: Yeah.

Chris: No.

Dave: I wonder if that acquisition was more like a fire sale. That's what I've secretly wondered. Or not so secretly wondered.

Chris: Yeah. That was no secret when it came out. They got some... It wasn't just Gatsby. There were other projects involved with it.

Dave: Yeah.

Chris: Who knows? They could have bought it for a dollar. We don't know.

Dave: We don't know.

Chris: It was undisclosed.

Dave: Yeah, undisclosed, so you don't know. Yeah, I've said it multiple times, but I wish we used home real estate lingo for acquisitions and mergers, like, "It was a short sale," "It was a foreclosure," you know, something like that. but anyway. I don't care, actually.

Chris: Well, that's the kind of thing we talk about in the Discord, though. Kind of fun. People always sharing hot drama links. Part of the culture of the ShopTalk Show, I'd say.

Dave: Yeah. We've got to get the hot drama cooking.

Chris: Always fun for that kind of thing. Absolutely.

Dave: The Gear channel is super-expensive because somebody will post something and then you have to buy it, basically. That's how it goes. [Laughter]

Chris: Yeah. Not a lot of super-inexpensive things in the Gear channel, I'll say.

Dave: No, Gear channel is pretty... It'll cost you. That was an expensive adventure we're all going on.

00:21:56

Chris: Old Simean Greg is here from the mailbag.

Dave: Ooh... Yes.

Chris: This isn't super-new. I keep wanting to bring this one up because I think there's a new term in here that I really like. His new thing is, "I have a new marketing tactic called The Spicy Slug. What do you think?"

I used to do this once in a while, and I think if I ever started a new CSS-Tricks or something--which is of course something I'm required to fantasize about in the future--I would have a pre-commit or a pre-publish button thing. WordPress supports this, too. I'm sure other CMSs do too. Before you're actually allowed to hit publish, or you hit publish and then it runs some checks. It's like, "Did you do the SEO stuff? Did you get the social media set up correctly on this?"

One of them would be, "Did you give it a spicy slug?"

Dave: Ooh...

Chris: A slug being the URL thing.

Dave: Mm-hmm.

Chris: How does yours work? Can you pick it exactly? Do you have to pick it, or does it auto-generate it based on the title?

Dave: I can pick it. I can pick whatever I want. It's basically the file name in a static site generator.

Chris: It's the file name.

Dave: Yeah.

Chris: Oh, so the title of the blog... I see. I see. So, you pick it by naming the file, and the name of the file has nothing to do with the title of the post.

Dave: Yeah. I could name it whatever. "React is Stupid" and then it's about Vue or something. [Laughter]

Chris: You have to pick the slug. You have no choice because you have to name the file, so you have to pick the slug.

Dave: Yeah. Yeah, yeah.

Chris: That's cool. Your latest post here about chips, real good blogging, Dave.

Dave: Thanks. Thanks. I channeled my inner Chris Coyier a little bit.

Chris: Yeah. Ooh... This is what I'm here for.

Dave: [Laughter]

Chris: You had to name a file quick-thoughts-on-chips.md or spaces, maybe. Who knows what the little internal machine does to make it URL compatible.

Dave: Mm-hmm.

Chris: But you just happened to name this blog post "Quick Thoughts On Chips" too. But you could have just named it chips.md and then the slug would have been chips.

00:24:04

Dave: Yep. Yep, and so I use a tool called Jekyll Publish.

Chris: Yeah.

Dave: And so, I can type bundle exec Jekyll, which I have a shortcut called jek.

Chris: Okay.

Dave: Jek draft, and then I do quotes and say, "Quick Thoughts On Chips," and then it'll create drafts, "Quick Thoughts On Chips."

Chris: A little scaffolding. Yeah.

Dave: Then I can say, "Jek publish drafts quick thoughts on chips," and it will go through and add the published date. Then it will pre-pen the date to the URL, too, because you need that in Jekyll, like the 2023-08-20.

Chris: Uh-huh. Oh, yeah. Okay, so that date comes from physical--

Dave: The file name, yeah.

Chris: Okay.

Dave: Yeah, so that's just the limitation of file base. But I have this little tool called Jekyll Publish (I think that's what it's called).

Chris: Yeah, that's cool.

Dave: And it just kind of automates that. I would write that bash script for anything I use, I think. If I switched to Astro or if I switched to 11ty, I would absolutely re-port that script over to something.

Chris: Yeah. Oh, interesting. That's a little difference between me. I would find some other way to do it that's not... Like, I could write the bash script if I had to, but I'd probably be like, "Ooh, I'm going to do it in Raycast or something," just on purpose to avoid the damn command line.

Dave: Oh, yeah. That's fair. Yeah, Raycast would actually be a really good option. Anyway, not to turn this into the Raycast Show.

I feel like Raycast is really bad at surfing my file system. [Laughter] I feel like it just is like, "Files? I would like to not do that."

Chris: I've heard that. Wasn't Josh saying in the Discord that the other one is better? Alfred is better.

Dave: Alfred? I feel like Alfred is better at files, like file surfing.

Chris: Yeah.

Dave: I'll even look for a file I know the name of. It's like, "Did you mean X-code project sample.xcode?"

Chris: [Laughter]

Dave: I'm just like, "No, buddy."

Chris: No. No.

Dave: I don't use that one. "Okay, did you mean header.c?" [Laughter] No, I didn't mean that one, guy. No.

00:26:21

Chris: [Laughter] Well, anyway, the spicy slug, though, just to come full circle is when you don't pick the obvious slug for your blog post. Like, Dave, you should have picked, for example, "Eat Doritos Outside."

Dave: Yeah.

Chris: Or "Eat Nacho Cheese Doritos Outside." Then that way it's almost like... It's not spicy in this case. It's just kind of like an extra little bonus content. It's almost like the alt text of an ex-KCD comic or something.

Dave: Yeah. I like it. I like that because occasionally I'll see people's spicy slugs. I think Josh Collinsworth, triple-threat... If you go to his "Things you forgot or never knew because of React," which was very hot drama, very good post, but the spicy slug is "Antiquated React."

Chris: It's a perfect spicy slug. You know?

Dave: Yeah. It got me. I was like, "Huh? I'm going to click it." Yeah.

Chris: That makes me think of... Because it's pretty short, it makes me think of the opposite sometimes, too. People pick a ridiculously long slug that's an entire sentence, or a short slug and then make the blog post ridiculously long. I think once every six months, you should do the blog post where the entire paragraph is in the title field. I always think that's fun.

Dave: Oh, that's good. That should be... I do have one.

Chris: You can't do it too much because people will just unsubscribe. But it's just a little eye-catcher. You know? It's like if you could make the title orange. Well, you can't, but you can do this.

Dave: I have a post I'm working on. I've been working on it for months. It's called "MDX with Web Components," and the post is... I'll read it to you here. "Just use regular Markdown." [Laughter]

Chris: [Laughter] "Because Markdown supports HTML and Web components are HTML, so why the hell do you need MDX?" is the point?

Dave: Yeah.

Chris: Yeah.

Dave: Basically. Yeah. You don't need all that junk. You just script tag and go. There you go.

Chris: I was surprised by it because part of me is like, "Oh, my God." Some people that really lean into MDX hard. And I'm thinking of what's his name -- Josh Comeau.

Dave: Yeah. Yeah.

Chris: This blog is amazing, and he puts all these incredible interactive demos inside of it, and it feels like React. It feels like Josh made a little React component with all its little use states and sliders and makes a little interactive thing. Then he gets a chance to slot it into a blog post because MDX.

Dave: Mm-hmm. Mm-hmm.

Chris: It doesn't have to be. You could have done that same thing with a Web component.

Dave: Yep. Yeah.

Chris: A little isolated, interactive component works anywhere. Yadda-yadda.

Dave: Yeah. I mean it's just a place to bind some interactivity. Anyway, it was just a silly little joke.

Chris: Yep. Yep. Yep. Good stuff. Good stuff.

Dave: Hey. Let's make blogs weird again. Just post weird things.

Chris: Yeah.

Dave: Your thesis on chips.

Chris: Mm-hmm.

Dave: Whatever you've got going on.

00:29:29

Chris: There's so much change in CSS, just to change the subject a tiny little bit. You see it asked a lot. Every other month, you hear Jen Simmons asking around, correctly, as her job is asking for feedback on, like, "Now what's next?!"

She's always like, "This is what we shipped. Look at all of this amazing stuff. What next? What do you want to see? What do you want to see? What do you want to see?"

I feel like she's constantly building and refining lists of what real-world Web designers want. You see that from the Google folks too.

Dave: Yeah.

Chris: We got it from Adam the other day, like, "Okay. What do you want? What kind of UI could we help build better?" and that kind of thing.

I'm happy to chime in with whatever's on my mind only because we tend to get it. So, it's usually worth a little brain power in saying it because, in the last few years, it's like, "Wow. Ask and you shall receive, huh?"

One of the ones I mentioned the last time he asked, it occurred to me--I can't remember why exactly, but they were on my mind again--is regions. There was a weird little period in CSS history where Adobe was when they were doing kind of Web standards work. It seems like more than they do now. I don't know if that's fair or not, but they had a little period in Adobe's life where they were a little hot and heavy with being involved with standards in browsers and stuff.

It made sense that Adobe was working on it because think of a tool like Adobe InDesign, which is famous for doing something like a book layout, a multipage thing. The printing world lives in this. "Oh, I'm going to do a 16-page printed, full color, foldable, saddle-stitched thing about health insurance, and I'm going to mail it out to people between 60 and 70 years old. You know. Whatever. That was the world I lived in for a long time. There's only one piece of software left anymore that people do that in and it's Adobe InDesign.

Dave: Yeah.

Chris: I don't know if that's entirely fair. Cork lived in that world for a long time. It might still exist.

Dave: Correll Draw 4. [Laughter]

Chris: Sure. Yeah. But there's a fundamental thing that's built into software like that is flow.

Dave: Mm-hmm.

Chris: I can make a text box anywhere the heck I want and make another text box totally somewhere else in a document on a different page. It has the concepts of pages. And I can just draw a line between them and say, "When the text leaves that one box, go flow into this other box."

Dave: Mm-hmm.

Chris: It's just not even... seemingly not even difficult thing for that piece of software to do. They just wrote the software to do that. It makes perfect sense.

Of course, when you're laying out a book, if you edit a paragraph on page three, it pushes the flow of the book further. It might even make another page if it needs to. It's just a very natural, normal thing to do when setting something like a book or a brochure or anything like that.

That's what Adobe was working on. They crafted up some CSS properties and values that said, "Hey. This element, when it overflows, flow into this other element." That was back kind of even before we had CSS Grid. I think it was being thought about in terms of CSS Grid - even then. But it didn't have to be. It wasn't a prerequisite.

00:32:46

Dave: Yeah. I want to say 2011-ish is where I'm putting it.

Chris: Yeah.

Dave: Yeah.

Chris: Oh, gosh. Was it that long ago? Wow. Even then, though. But now that we have CSS Grid, now it makes a lot more sense or at least some more sense to me. This grid area should flow to this other grid area. Even if it's as simple as a left side and a right side.

Dave: Mm-hmm.

Chris: Like a book would be. So, I thought it had legs then. I was sad about it the whole time it was gone. I don't think anybody is working on it. But it's on my little list as far as things I'd like to see CSS do. I'm sure it's very complicated. I have no doubt that this is no small task. Although, probably smaller in scope than, say, container queries, which we got. Maybe all that will kind of happen.

But then it got me thinking about, okay, well, what do people do when they want to put a book online then now? I think about it because let's say in my future someday I decide to write a book. I'm going to do it on the Web because I'm a Web guy and I like the idea of writing in Markdown or something.

Dave: Mm-hmm.

Chris: But I also like the idea of a page. Why can't I make a page say 50--I'm on a desktop anyway--50 viewport units wide because I'm trying to limit the line length like a single column kind of thing. But then have a top and a bottom to the page. Not just infinite flow like an article, but I'm looking at a page. Then I can scroll down. Then there's another page.

I want a white box and then a little divide in between and then another white box. I want the flow to go from the white box on top to the white box on the bottom.

There's really no way to do that. There's no way to say flow from this box to that box. I just think that would be kind of nice.

Dave: If you had just a grid column interrupted by decorators or whatever you want to do, it'd be cool if content could just flow to the next box rather than you wrapping another div to explicitly chuck in a thing.

Chris: Yeah.

Dave: You could create a vertical rhythm that you couldn't otherwise. I always wanted it for ads, to push ads to a different place. Like in this viewport, the ad block is only 1,000 pixels or 200 pixels tall. So, if your content is more than that, let's just push it down. You get pushed to the next block - or whatever.

Chris: Right.

00:35:27

Dave: I had a bunch of ideas at the time. I feel like it got killed. I was going to post an article. Do you remember the A List Apart article by Hakon Wium Lie, one of the guys who made CSS?

Chris: Mm-hmm.

Dave: He said, "CSS Regions Considered Harmful," in 2014.

Chris: Oh, I remember.

Dave: I did not like this post, and I was very mad. I think I made some enemies. [Laughter] I was very disrespectful to one of the guys who made CSS.

Chris: Me too.

Dave: Opera had a competing spec. I think he was at Opera, right? The CTO of Opera.

Opera had a competing spec for paged content, basically. You basically would say... Or CSS multi-column, but basically they had a thing where you could be like, "This is page two. This is page three."

I was like, "Why are we advocating for a thing that doesn't exist when regions is in a browser?" You could use it in... I guess WebKit was probably where it was used or when Chrome was on WebKit, probably.

But we had a prototype of it, and then it just got shot down. It was just like, "Man. We were so close to having it." I don't know.

You could just say, "Here's a content brick, and here's an ad brick. Now you just go figure it out, website." [Laughter] That would be cool, right? But they didn't allow that.

That post kind of cut the sails, I feel like. That was... I don't know.

Chris: It did. I'll admit. Maybe the dude was right. I don't know. I can't... You can't A/B test the past, or whatever, like they say.

Dave: Yeah.

00:37:11

Chris: But still, I want it now. I want it ten years later. An interesting one: I put a GitHub repo here, too, a little piece of tech from Robin Sloane. A great author. I really like Robin. He wrote this wonderful book, Mr. Penumbra's 24-Hour Bookstore - or something like that.

Dave: 24-Hour Book Shop, yeah.

Chris: 24-Hour Book Shop? Yeah, and then wrote another book in that universe. Has written other books. Makes olive oil. I feel like I've given this intro a number of times, but he just gives off good vibes to me.

A little bit of a coder as well. I just think how fun is that to read a book from somebody that actually knows technology. You know? And writes it and publishes it and has open-source repos. I just think that's cool.

Anyway, has this demo of one called Perfect Edition that's like, hey, let's say you were going to publish a book on the Web. Wouldn't it be nice to start with somebody who has thought about this to some degree?

The approach that Robin took with this GitHub repo called Perfect Edition, again -- we'll link it up -- is to use the multicolumn CSS layout because that does have kind of like rectangle-to-rectangle flow.

Dave: Yeah. Yeah.

Chris: But horizontally not any other way.

Dave: Right.

Chris: And so, you can kind of just say, "Columns auto."

Dave: Mm-hmm.

Chris: And it will just make as many columns. It'll make 5,000 columns if it needs to. Whatever.

Dave: Yeah. Yeah.

Chris: As long as there's enough width there to handle it, so there's probably a little JavaScript or something that helps with width. I don't even know. Maybe it doesn't.

Then all this thing does is bind the spacebar and clicks and stuff to shift the page over and kind of gray out the edges of the column that you're not viewing right now.

Dave: Okay.

Chris: It looks pretty light-weight, and a pretty cool looking way to present a book. That's the kind of thing I'm interested in. If you write a book, I just kind of feel like the presentation of it should look book-like.

Dave: Mm-hmm.

Chris: You should have a design opportunity to make it feel a little different than you're just reading a long blog post.

Dave: Right. Yeah. I agree with you. I don't know.

Adactio does some books, right? Resilient Web Design and stuff like that.

Chris: Oh, that's right. Yeah.

Dave: Yeah, it would be nice if you had a little more style control or a little more book-like vibes than just a long column of text.

Chris: Yeah. I thought I'd do it. This barely qualifies as a book, but I wanted to do something related to CSS-Tricks, so at one point I did "The Greatest CSS-Tricks," and I called it Volume 1 for CSS-Tricks, thinking I'd do multiple versions of them over time.

It ended up just being a little bit more blog post-like. I just grouped up the best ones, gave it a little bit of a unique design, but never really solved how to present each chapter uniquely. I was overall pleased with it, though, especially the writing process. I just really like writing in the tools that I already know rather than having to write in Markdown, which I don't do very often, or write in InDesign or something like that. Yeah.

Anyway, Resilient Web Design, yeah, we should link that up, too. Pretty cool.

00:40:29

Chris: Another friend of the show, Mat Marquis, his JavaScript for Web Designers book for A Book Apart was recently published.

Dave: Mm-hmm. Mm-hmm.

Chris: On the Web as well and does have a very kind of cool, book-like feel to it. But does just do this long, single column down the middle feel. Miraculously, typeset pretty much exactly like the book is.

Dave: Yeah, it's beautiful.

Chris: Which makes me wonder, like, did they set it on the Web and then convert it to print?

Dave: Yeah. Good question.

Chris: Or did somebody set it for print and then replicated it pretty darn nicely on the Web? But it looks great.

Dave: Yeah. No, it looks wonderful. Yeah, the column of content isn't bad, especially if you're reading on an iPad or whatever.

Chris: Yeah.

Dave: But I could also see, "Oh, I refreshed," or whatever "closed the browser, and now I'm back at the top. Where was I? I have to scroll down."

Chris: That's the thing, yeah. Do you keep the tab open or what? Not that regions helps with that necessarily.

Dave: Yeah.

Chris: Ugh. It's just stuck in my mind that to design a page feels so nice.

Dave: Mm-hmm.

Chris: I want that somehow on the Web.

Dave: Yeah.

00:41:46

Chris: We should shout out Mr. Ethan has a new book.

Dave: Ethan has a new book.

Chris: You Deserve a Tech Union. Congratulations, buddy. I'm sure that was a big journey. Ethan, of course, known for the invention of responsive Web design. Wrote a couple of books and has spoken endlessly on that subject. Now doing something very different in talking about the industry and the labor movement and stuff. Just super different, so I imagine that's tough.

Dave: Yeah. I just started reading it this weekend. So far so good. It's interesting. I'd love to have him on here and talk to him about it because it's this weird tangential thing where most places don't have a union and they build websites just fine. But what would it be like if more places had it?

That's something interesting to think about. Would it be more ethical, more equitable? Is that the right move for the industry? I don't know. I'm sure people have predispositions, politically charged predispositions.

Chris: Yeah.

Dave: I am lucky to sit right in the middle, and I live in a state that won't let you have one, I guess. [Laughter] Or is a "Right to Work" state, officially.

Chris: I'm pretty middle, too. My dad was a union boss. He was a union president of his local for a while, which predisposes me to thinking that that is all a good idea. Fought for people's jobs. Was a very big deal to him and his life.

Yeah. I run this small business, and I'm not opposed to it. I just don't feel particularly attached to all that. Are my four employees going to make a union? I guess.

Dave: Yeah.

Chris: Maybe.

Dave: Well, I think about the SAG-AFTRA thing going on, or WGA Writer's Guild thing going on. We're in a weird state where movie, TV production has been paused, so we're just going to have this really weird dearth of movies, even when it starts cycling back up again. It's going to take a while. There's not going to be new content until 2024.

Chris: Yeah. I was thinking about that the other day. Does it just mean that YouTube is going to kick as, though, or that there'll be a lot better podcasts or something?

Dave: Well, it's MILF Island, or whatever, is going to come out. It's just, you know, reality shows kind of fill the gap.

I think it'll be... Or there's probably some stuff that's half-cooked. They started on something and then had to shut down.

But anyway, it's just interesting how one of the points they're arguing about is should AI be able to take my job. If I'm an extra in this thing, you don't just get to use my face in any movie you want.

But the movie execs are like, "You know what would be cheap is not paying extras." You know? [Laughter]

I'm just like, "Dang! That's hard." Business-wise, I'm like, "Yeah, randomly generated people is a lot easier than sourcing humans to come, show up, paychecks, and SAG credits and stuff like that."

But then it's also just like if you're an actor and you're like, "I did one movie and now I'm in 1,000 movies, and I don't get paid for it," that stinks.

Chris: Ack.

Dave: Blah. That's illegal. I don't know. That's wrong. [Laughter] Anyway, it's just weird what they're fighting over. I don't know. I think it's good they're having the big fight about AI and all that accreditation.

Sarah Silverman is fighting for, like, "You can't just use my voice and tone later. I'm going to sue you."

Chris: Ooh...

Dave: Very interesting times we live in. But they wouldn't be able to do that without a union. They would have had to get everybody to get upset. [Laughter] Like, "Hey, everyone, sign this petition to say you're upset." And movie stars are--

Chris: That's a very good point. Any leverage that they have now. And even now, it's a struggle to get it to work. Man, if you didn't have that, which is about as strong-arm as you can possibly be, and it's still not obviously working.

Dave: Yeah.

Chris: It would have never worked before.

Dave: Yeah. Yeah, you'd have no tools in the tool chest to fight a higher up decision.

Chris: Yeah.

Dave: Very interesting.

00:46:35

Chris: Yeah. We have an audio one here from a great question-asker, Simi de Klerk here. I think we'll play it for the show.

Simi de Klerk: Disclaimer: I'm a hobby developer who has worked mostly with React, JS, and a little bit with Flask and Jinja. I'd love to hear your thoughts on component libraries like React with Vue versus templating languages like PHP, Rails, and Jinja plus Flask.

My sense is that they're very similar in that both are ways of expressing ... [indiscernible] data into HTML and both have composition concepts. I get that component libraries update the DOM dynamically whereas templating languages traditionally update the DOM through full page refreshes only. But is that the only real difference?

I get the sense that component libraries also lean somewhat harder into the "use many components and compose them together" mindset. Whereas that is present in templating languages but not as encouraged. Or is that just my perception because I'm not that familiar with the templating language world?

This came to mind for me again recently with the hype around Next 13 and React server components. The Next 13 marketing is self-aware that they've sort of now recreated PHP or Rails but with React as the templating language. However, even there it feels like there's a bit of subtext of, "We've been using React for so many years and we've only just recently realized that we could use it as a back-end templating language because it's very similar."

Finally, while on Next 13, their marketing had the, "See! Now Next 13 is just like PHP or Ruby!" feel, but here I felt like I could have leaned a little bit more into the yes, it's a back-end templating language now like Rails, but it still has the dynamic line components and smooth page transitions by default of React and mix of old.

Keen to hear your thoughts on all of this. Love the show. Cheers. Simi.

00:48:38

Chris: Can you do exactly what you can do in Vue in PHP, aside from the DOM, the live DOM stuff? I feel like less so.

Dave: So, I had to look it up while Simi was asking. Jinja is a Python-based templating language. Flask, I think, is a wrapper around that to make it, I guess, a little more routing, adding features like that, redirects, so it's a bit of a meta-framework around the templating system of Jinja. Is that okay?

Chris: Sure.

Dave: Do we all feel pretty good? [Laughter]

Chris: Yep. Like you can use Nunjucks and then 11ty as a wrapper around it to make it more useful.

Dave: Yeah, exactly. Yeah, exactly.

Chris: Yeah.

Dave: This is kind of a mustache-style syntax for Python in there.

Chris: Yeah. Okay, so now you're going to build a website. You're going to build a website for book reviews. So, you're going to have a template called book and a book is going to have the photo and the review and the star rating and the publisher and the date published and all this kind of information about it.

If you're going to write that in Vue, you're going to just make some choices about how to break that up into smaller components. You might have a book cover component. You might have a date component that does specific things for the data.

I feel like you'd make some choices about how to break that up. And I think this is what Simi is wondering, and I have been long curious about the same question. Do you make the same choices when you're doing it with a server-side-only component thing?

I think you don't, and I don't know why exactly. But I've tried to think this way. I think you've looked at the code for the fricken' ShopTalk Show website, which is WordPress. You'd see me trying to break the thing up into tiny, reusable components.

I have a folder that I just called components, maybe, or parts. Sometimes I call it parts.

Dave: Yeah, parts. Yeah.

Chris: I try to make little PHP templates that I can then call. But unfortunately... Not unfortunately, but a little bit unfortunately. There's no ESM for PHP. You just call an include statement. But the include statement doesn't give you the opportunity to pass in props, really. You're setting global variables and then calling the template and letting the global variables populate what happens in the template.

That's changed a bit. I think there are answers to that. But it's just different. Because it doesn't give you quite the component ergonomics like you'd get in Vue, you end up just deciding to break it up differently.

00:51:34

Dave: Yeah. I was going to say that. The addition of props, which exists in some things like Jekyll includes can accept props. A little-known fact, but they're cool.

I have a star rating component for my book review. Right? Ideally, I go star rating, and then I just pass it a number: 1, 2, 3, 4, 5. Maybe 4.5. Then the component figures it out.

Whereas in PHP or a big loop, it's almost like explicit versus implicit assignment. You're sort of just saying, "Hey, I expect this to be in the post loop, and so I'm just going to call post and hope that shows up."

Whereas in a JS component, you're more like, "Hey, no, the post is this post. I'm going to send that whole thing down to you." Or more accurately, "I'm just going to send you the number five and you just show me what five stars looks like."

Chris: Right. I think that's just better. I hate to say it, but it just is. I think that that world--

Dave: Well, it means you can use your star rating outside of the post loop.

Chris: Right.

Dave: You could use it on your user rating or your comment rating.

Chris: Right.

Dave: You're not... It dodges a variable naming like all the variable naming is at that component level, so I think you architect it a little more differently. You get a little more usability.

Chris: Yeah. Ruby helped a little bit more because they eventually started taking local. They even had a different name for it, but it's essentially a local variable that you pass to whatever their version of include is. It wasn't include. A partial?

Dave: Ruby partial.

Chris: Yeah.

Dave: Yeah. ERB. ERB.

Chris: A little bit better. Or in PHP, you could write a function. You could write a function called show book, or something, and show book would take parameters that then you accepted and that you would just assume that it returns HTML, I guess. [Laughter] I don't feel like anybody did that, though.

Dave: Yeah. But that's essentially what the JavaScript is doing.

Chris: It is.

Dave: It creates a component that accepts these parameters and then renders out, basically.

Chris: Yeah.

Dave: Yeah, it's different but the same. [Laughter] Breaking up stuff into smaller chunks, yes, that is it. But the component mentality sort of inverts the -- what do they call it -- inversion of control. You basically are just sort of like saying, explicitly, "This has 5 stars, 4.5 stars." You're not saying, "Hey, just assume post is in this loop and render that out."

I don't know enough about Jinja or Flask to know if they cover that for you. Maybe they allow props, and maybe it's exactly the same. But that would be the big distinction, I think, for me.

Chris: Yeah. I want to ask GitHub how many star-rating.php files are there on all of GitHub and how many star-rating.js files are on there on all of GitHub. [Laughter]

Dave: Yeah. Well, yeah. Probably 1000:1 or so.

[Laughter]

Dave: You know what I mean?

Chris: Yeah.

Dave: Yeah.

Chris: Maybe. That's just a guess, but I feel like the same way is that the JavaScript leans into that a little harder, and especially now that TypeScript and what you pass in can be typed and all that.

Dave: Yeah. Yeah.

Chris: Okay. Well, that's fun to think about.

Dave: Yeah.

Chris: That's why I always thought - I don't know - that WordPress should lean into that harder, like, I want to build sites with components for crying out loud.

Dave: Yeah. Well, hey. Have you heard the good news about Web components? [Laughter]

Chris: Yeah! All right, we need to do another Web components show.

Dave: You just get a flavor of components, but you can still write your PHP or your other stuff all the same. Anyway--

Chris: Yeah. SSR them up.

Chris: But even though I advocate for Web components, I do still have questions. Anyway, we maybe need somebody on the show.

Chris: All right, well, good stuff. We got through many things.

Dave: Got through some questions. Hey, as usual, send us your questions, everybody, or your hot drama. We appreciate that. We'll talk about that. If you've got some spicy slugs we need to know about, please send those over. We enjoy those.

Follow us on the X or the Mastodon. I really don't know anymore. Then join us over in the D-d-d-d-discord.

Oh, I just realized Twitter changed tweet deck, which was how I tweeted out the ShopTalk stuff, so we might not be able to tweet anymore. [Laughter] But anyway, we'll figure that out as time goes on.

Yeah, but join us in the D-d-d-d-discord. That's where things are happening. Patreon.com/shoptalkshow.

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

Chris: Yeah. Just ShopTalkShow.com.