Transcript

[Banjo music]

MANTRA: Just Build Websites!

Chris Coyier: [Whispers] You're up. Go.

Dave Rupert: Oh, we're going. I didn't even see the countdown.

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. I'm Dave -- in the shed -- Rupert and with me is Chris -- in the booth -- Coyier. Hey, Chris. How are you?

Chris: Good! Yep.

Dave: Hey. You're talking to old Dave Rupert. Dave Rupert went one whole day without caffeine. And let me tell you, it was miserable.

Chris: Oh, my gosh.

Dave: It was awful.

Chris: Was it detox, or were you just out of coffee? [Laughter]

Dave: Unintentional detox. Yeah. It was like I hadn't had it by 10 o'clock, and I was like, "Man, I'm just going to go a day without it."

Chris: Just roll it?

Dave: Awful. I was in bed at 4:00. [Laughter] I had a headache.

Chris: Hmm.

Dave: I woke up with a headache. I went to bed with a headache. I woke up with a headache. It was terrible and learning a lot about my own body. I'm addicted to caffeine.

Chris: Yeah.

Dave: Probably need to figure that out - but whatever.

Chris: Probably most of us are. I definitely am, and I don't know how extreme it is. But, yeah, definitely like a two cups a coffee in the morning kind of guy for me, and I notice if I didn't have it.

But what gets me is that the downsides aren't particularly -- like, it's a weird feeling to know that you're addicted to something and that it's a problem if you ever stop. But while you're addicted to it, the downsides are so minimal that I almost don't care.

Dave: Yeah. I feel the same about my meth habit. [Laughter] No, I'm just--

[Laughter]

Dave: Um... But no. I just unintentionally tried this out, like a coffee fast.

Chris: Right.

Dave: I just learned, if I'm going to do this for real, I need to have a more strategic operation. Apparently, something like 50% of people -- I'm getting this from about.com, the holy grail of information.

Chris: Ooh...

Dave: But it might have been a Wiki How, so getting serious here. [Laughter] But 50% of people have a response, and it doesn't matter if you have a lot or a little. But if you have over 200 milligrams, you're maybe more likely to have withdrawals and stuff like that. But 200 milligrams is like, "Whatever, dude. That's breakfast for me."

00:02:26

Chris: Ah, yeah. Yeah. Sometimes I get -- if you just drink the same cup of coffee every morning, my brain is like, "I'm bored of that."

Dave: Hmm. Yeah.

Chris: "I want to do something else." But the problem is the alternative. There are so many other things that have caffeine.

We have a pack of bubbly water at the house right now that's caffeinated. Come on.

Dave: Yeah. Well, yeah, and my wife was like, "Maybe I'll get you that so you drink less coffee," or whatever. I was like, "No," because I learned this thing about bubbly water. It doesn't hydrate you if it has carbonation or if it has flavors and salts or whatever. If it's not just purely carbonation and water.

Chris: It doesn't count as water?

Dave: Yeah, if it's not just purely carbonation and water, it doesn't hydrate you. [Laughter] I was just like, "Well, that stinks. That was my whole point. That was my whole hydration plan."

Chris: Oh, gosh.

Dave: Now that stinks. Now that just becomes like fake beer for me. [Laughter] It's interesting. I didn't really set out to give up coffee or anything, but now I maybe am going to think about trying it. I don't know.

Chris: Yeah.

Dave: Nothing is good for you, basically. Or like G Fuel. Maybe I need some G Fuel. If G Fuel wants to sponsor the podcast, I'd take it.

Chris: Yeah.

Dave: Coder Fuel!

Chris: I have a bit of a sore throat and went for -- you know those little glass bottles at the gas station of like Starbucks Caramel Frappuccino Blasters?

Dave: Yeah.

Chris: They feel so good on the throat! Oh!

Dave: Oh, because it's just kind of an oil.

Chris: Yeah.

Dave: It's oil-based CBD. [Laughter]

Chris: Mmm. [Laughter] I wish it had some CBD. That's what it needs.

Dave: Just oil going straight down the throat. That's good. Oil and sugar.

00:04:05

Chris: I think it was last week -- yeah, where we talked about some new Safari stuff coming out. They've been on a bit of a tear lately. Clap-clap-clap. But mentioned that it had inert in it, or at least I think we did. I didn't dig up the clip exactly, but we were corrected, and it might have been their mistake also, too. I think maybe early blog posts said that they shipped it, but they really didn't.

Dave: Yeah. Yeah. I think there were a couple of features that got on the "Hey, we shipped this," but that's not -- you know. The releases are still awesome. But, yeah, I think it's definitely in the technology preview though. Yeah.

Chris: Yeah, it's just not in - whatever. And if we have that wrong, we're not correcting it. [Laughter] We're done with the corrections. We just do lies now.

Dave: Yeah. All lies podcast.

Chris: Um... But it will be great when it does ship. Again, that's the one that, as far as I know, the whole point of it is that focus trapping is so hard to write and is a literal requirement of modal. Modal comes up and says, "Are you sure you want to delete this thing, Dave Rupert?"

Dave: Mm-hmm.

Chris: As you tab around in that message, it needs to stay in there. Maybe there are only two interactive elements: okay and cancel.

Dave: Mm-hmm.

Chris: Well, then tabbing should go back and forth between those two things, and that's it. It should not leave and go to the main navigation of the page.

Now, is that easy to code? No, it isn't. It's really weird and hard. That's kind of like the boss level of accessibility. Somebody wrote that once, and it's been stuck in my head ever since then. I wish I could credit the correct author for that. I'll dig that up if I can. That's like accessibility on boss mode - or whatever.

00:05:49

Dave: Oh, and it's weird to me it's a requirement, and it's so hard to do. It's possible. Through months of engineering, you can achieve this feat where you focus trap something and successfully across browser, across device, across screen reader.

Chris: Yeah.

Dave: You can totally do it, but it's just so hard. Inert seems super good for, like, I'm just going to disable this whole part of the DOM, like the whole--

Chris: Yeah. Anything that's interactive is not interactive if any parent of it has an inert attribute. All you do is check inert as an attribute on the DOM node. That's it. That's amazing.

Dave: Yeah. That's going to have a huge boost for accessibility. There are some other things in that realm that the new Safari has. I think they did. I'm going to verify here because I get it wrong.

Chris: What you got?

Dave: The focus visible it out-out. That was kind of what happened through the open prioritization movement through Igalia. I think that is out in the main branch now.

Chris: Yeah.

Dave: I'm trying to verify that here, but I'm not seeing it. I'm certain that was there.

Chris: Focus visible is so great. It's one of those ones where, once we get to the day where focus visible is absolutely supported everywhere that it almost becomes a focus replacement.

Dave: Mm-hmm.

Chris: In my mind because it's like you want to style something specifically for when it's focused, but not when just clicked with a mouse.

Dave: Yeah.

00:07:34

Chris: We got into this situation. I remember a great Mina Markham conference talk where she went way into how annoying that was in her work at Slack and all the workarounds necessary to do it, and that it's so great that focus visible is coming. But there's a little trickery to use it earlier than later. Anyway, yadda-yadda-yadda.

The point is, how many--? Speaking of, it's the same kind of situation as modal dialogs. It's so hard to get right that, usually, people get it wrong, and for really dumb reasons.

The same thing with focus. It's so annoying that when you just click a link in the main navigation that it gets these big, gnarly outlines around it. You can have stakeholders be like, "What's that?! Get rid of that."

Dave: Why did you do that? Yeah.

Chris: Then they just say, "Okay. Well, focus equals border zero," or whatever, "outline none."

Dave: Mm-hmm.

Chris: Outline zero, and then it's gone. Problem solved. Well, you just wiped out your focus styles for everything.

But if you put focus visible in, you get to keep those focus styles for when keyboard usage happens and remove them when mouse clickage happens. It's like, "Thank God! Thank you, Web platform, for doing exactly what we needed of you."

Dave: I should have wrote all these down, but every client has not approved, has not thumbs up where I do active or hover active visible styles. They're like, "Why is the button still green after I click it?"

Chris: Ugh.

Dave: It's like, "Oh, because it's focused." They're like, "I don't care." [Laughter] "It shouldn't be green anymore." You know? So, yeah.

Chris: You're both kind of right because, no, it should be focused. Focused is the correct state for the thing. But the fact that it looks green is actually a little weird.

Dave: Mm-hmm.

Chris: But you know.

Dave: It never -- I tried to sneak it in, and it never passed.

Chris: Yeah.

Dave: At some point -- maybe it is negligence, but they pay the bills. They pay my bills, so what do I do?

Chris: Yeah.

Dave: But now we have a tool, and that's awesome. I feel like inert is also another tool that we can do the right thing.

Chris: Mm-hmm.

Dave: If you have to stop somebody before using the webpage, you just inert it.

00:09:59

Chris: Yeah. Dialog fits into this category a little bit for me, too. You don't get--

I don't know that it's inherently accessible. In fact, early versions of angle bracket dialog (I'm talking about), which also dropped in Safari, it's just like the semantically correct element to use for a dialog.

Dave: Mm-hmm.

Chris: But it has some functionality. There are JavaScript APIs for it for hiding and showing it and such. But perhaps my favorite ability of it (just from a design perspective) is that you don't have to then code your own div that has position fix, top zero, left zero, right zero, bottom zero, that's Z-indexed below the dialog for sure. But in the cases where there are dialogs on top of dialogs, that gets extra confusing and weird.

It was always kind of like bring your own background. Well, now we have ::backdrop.

Dave: Mm-hmm.

Chris: Which works along with the dialog that's just like, "Oh, that's the thing that you style to style the whole rest of the screen except for the dialog." That's just great. Come on. Thank you. Gees.

Dave: It's pretty cool, and you can put a little filter blur on that - or whatever - the background. What did you say?

Chris: Yeah, backdrop filter.

Dave: Backdrop filter.

Chris: Yeah, if you want to, or you can make it orange, or you could have stripes behind it. You can style it however the hell you want, which I think is great.

Dave: Yeah. A lot easier than it used to be.

Chris: A lot. Anyway, we'll link up that Safari release post, but inert is not quite here yet but there are lots of other cool stuff to check out, so that's cool.

Also, there is Mark Otto had a blog post about the dialog element.

Dave: Yeah.

Chris: He titled "Fun with the Dialog Element," that has him playing with it. It's some of the first experimentation I've seen that's like, "Can you make this look actually good?"

Dave: Mm-hmm.

Chris: Like shippable because, of course, it has some default user agent styling dialog, but it looks like crap.

Dave: Right.

Chris: That's the job, though. You're not supposed to. I don't know. Maybe that's controversial, but I don't think it's necessarily the job of browsers to have extremely esthetically beautiful default elements like that. I'd almost prefer that they're a little ugly and that people bring their own styles to them.

Well, Mark's demos are bootstrap-a-rific - we'll call them. You know?

00:12:23

Dave: Yeah. Mark is no stranger to CSS. No. Yeah, exciting times. There's also that Safari technology preview 1.4.2, which has some cool stuff like Subgrid.

Chris: Oh, what?! I did not hear that.

Dave: Yeah.

Chris: Seriously?

Dave: Yes, sir.

Chris: Subgrid in Safari. Sick! Okay, Chrome. Your turn.

Dave: Container queries. Uh-oh! A second browser with container queries. It could be a pretty awesome future here in 2022. Other stuff: Motion path. It's big. It's very big.

Chris: It is. It is. Yeah, just because one more thing I notice on Mark's blog post. He found a way to make it behave like a dropdown menu too, which I don't know if that's questionable esthetically or not.

Dave: Yeah, maybe question, but sure. Go ahead.

Chris: Yeah, but it has click to close on the outside and stuff. It looks great, so--

Dave: Yeah, you know it's like I don't know. I've been in all these open UI things about popup, about something that would solve -- or select menu, or whatever -- something that would solve, basically, this. You know it's interesting. it's not much different than a dialog. It's a top level element.

Chris: What's better? The disclosure element, is details better or is dialog better? [Laughter]

Dave: Yeah. Good question. Probably -- I don't know. Maybe details....

Chris: But details needs the thing that you can click. Oh, well, I guess so does anything else. I don't know.

Dave: Yeah, well, with dialog, you get the click outside to close for free. Then a dialog, you'd get escape to close would also work.

Chris: Mm-hmm.

00:14:18

Dave: It would announce, also, you're in a dialog. You know what's interesting is there's that details-utils from Zach Leatherman. I think we maybe talked about it. it's like a wrapper for details elements. It's a Web component, and it adds close on escape behaviors, close on click outside, animate details. So, kind of cool.

Chris: Yeah, I thought so. Very, very, very cool thing. Good job, Zach. Sorry for the fumbling here, but does it extend? It doesn't really extend the native element, right? You can't do that. Isn't that impossible to do?

Dave: Yeah. You can't do that, and that is complements of Safari. [Laughter] Safari has kind of put their foot down. How you would do it, how it was spec'd out was the "is" attribute. You would say details is super details - or something like that. Then you could add onto the details behavior.

Safari, which I think is maybe the right call, is like you cannot extend the native element prototype. Otherwise--

Chris: You like that.

Dave: Well, I think I agree, just like it creates the same problem, the MooTools problem where we have prototype pollution where we can't add to details because, guess what, bootstrap had prototype or whatever -- dialog popup behavior - or something like that. Basically, if you're extending the element directly, not creating another or not--

Basically, you're hijacking into the element. You're saying this element is now this element. My class is a dialog element or a details element. I think it starts polluting the prototype of the element.

Yeah. It ends up in a weird situation where you can't make changes to the Web platform because people have extended elements so much. Does that make sense?

00:16:25

Chris: Yeah. I do understand that. There was a good Eric Meyer blog post just the other day about the conditionals in CSS. There wants to be an if-else statement in CSS, essentially.

Dave: Mm-hmm.

Chris: But you can't use at-if because Sass uses at-if.

Dave: Hmm...

Chris: Sass is big enough that that's out.

Dave: Wow, man!

Chris: So, they're going when-else.

Dave: When else?

Chris: Which is a little funny because Sass also has "else." But apparently, without the "if," it's parsable to the point of not being a big problem anymore. So, when-else looks good, but I don't know.

Dave: Yeah. Interesting. Right? Yeah, I think--

Chris: What if it was Stylus? Remember Stylus?

Dave: Mm-hmm.

Chris: Was Stylus big enough that if they had at-if, would the Web platform bow down to Stylus, or Stylus never got enough traction?

Dave: Yeah.

Chris: What if you made your own little processors and eight people used it? Certainly not then. That's in the territory where the Web platform would be like, "Pfft. I'm not going to not do it because one guy in Austin, Texas wrote one language one time."

Dave: [Laughter] Yeah.

Chris: What is the metric? Is it gut feeling, or do they have actual metrics?

Dave: You know I don't know. Yeah. I guess probably some compat engineers, like Mike Taylor or somebody come along, or who knows. That's what's weird. I guess it's weird because you're supposed to -- Sass is supposed to be a meta thing. You write Sass, and it outputs CSS, so CSS should kind of not care. But I think maybe it is enough that it does. [Laughter] You know?

Chris: Yeah.

Dave: I guess you can't now write if statements in Sass because Sass will choke.

Chris: Yeah. That's the thing. If you want the if statement to come out the other side of Sass, what do you do? You could just make it Sass's problem. You could say, "I don't know. Then escape your if statement or something, authors of Sass."

Dave: Well, yeah. But then everybody is not on the latest Sass.

00:18:40

Chris: Yeah. I don't even know. They faced this problem already with at-import because sometimes--

At-import is meaningful in Sass.

Dave: Mm-hmm.

Chris: It tries to fetch that file. But what if you want that import to come out the other side of your Sass? It's tricky.

Dave: Didn't we have to invent something else for that? Didn't we have to invent at-use?

Chris: They did, but I think there are even other ways to do it. I think if you use at-import and then use the URL function, Sass will leave it alone because it knows that's that kind of a browser level thing, not a Sass level thing. I don't know. Don't quote me on that.

There's stuff, and I think they regret that one. Hence, at-use.

Dave: Yeah.

Chris: But they didn't know. They're not going to regret at-if because they had no idea (at the time) that that would ever become a CSS thing.

Dave: Yeah. That's--

Chris: They didn't really stomp on any toes there, like prototype did or MooTools did. They were stepping on toes big time. [Laughter]

Dave: Yeah. They just kind of went in there and [laughter] and just extended it. But I think that was kind of the talk du jour. You can just extend string or extend array. Go for it.

Chris: Yeah.

Dave: I probably still have code that does that (to some degree).

Chris: Yeah, probably. I know what you mean. It's hard to throw fault around when it just felt like the thing to do at the time.

Dave: It felt like the old thing.

00:20:06

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Notion. Learn more and get started for free at notion.com/codepen, that's notion.com/codepen to help you take the first step towards an organized, happier team today.

I know this is ShopTalk Show, but they sponsor CodePen Radio as well, so we're using the same URL, notion.com/codepen.

Have I ever mentioned how we use Notion at ShopTalk Show? We use it for a bunch of stuff. The most important thing, probably, is our show calendar. We have every single show in there that has the date and whether it's published or not and who the sponsors are and notes for the show. Then Dave and I are a team. We share it, and we share it with our editor as well. We can invite other people into it when necessary, like the guests of the show (if we want to collaboratively edit the notes). That's just one particular workflow in notion that it just handles effortlessly because Notion is just awesome like that. I love the permissions model.

But we use it for a document to keep all of our upcoming videos that we want to do, even just ideas for it, and a document of guest ideas that we'd love to get on the show (if we possibly could). We have a document that we can share with potential advertisers about what we offer and how we work in that way.

Just looking through our Notion workspace, we have all kinds of stuff in there that we've saved throughout the years: series ideas and email templates that we've used to invite guests for different series, and workflow stuff that we can share with our editors to be like, "These are all the things that are important to do when you're publishing an episode."

All that stuff are just documents, information sharing things that are just the hub of ShopTalk Show, the business, and that makes Notion the hub for ShopTalk Show, the business, and we love it. Thanks, Notion. Bye-bye.

[Banjo music stops]

00:22:08

Dave: Let's keep on the hot drama train, the news train.

Chris: Sure. Sure.

Dave: Nicole Sullivan - or somebody - was talking. Who's the AMP guy? I'm blanking. Paul Bakaus, right, no?

Chris: Yeah, but he's retired. Not retired, but has moved on, I think.

Dave: He's at Vercel, I think, or something.

Chris: Yeah.

Dave: But I think somebody was like, "Put JSX in the Web platform," and I think Nicole Sullivan was kind of--

Chris: Hmm. I've heard that from Nicole, too. I also don't totally get it. [Laughter]

Dave: I tried to get to the bottom of it, and Sarah Drasner (I think) was like, "Yeah, this is exciting," or something. I was like, "Can somebody explain this to me? I feel like an idiot." [Laughter]

You use JSX, so I want to ask you.

Chris: I do.

Dave: [Laughter] This is maybe just my complete anti-React vibe here coming out. When I say I'm putting JSX in the browser, what do you want from that? Is it just returning a template?

Chris: I can't tell you that I get entirely what that means. I think, okay, what's so different about JSX than HTML? Uh... You know?

Dave: Yeah.

Chris: It enforces some rules, so it's prettier-able in a way that HTML isn't. I kind of like that. I think of how you slap on click handlers and stuff, but there is no reason you can't slap a click handler onto HTML too, so that's not particularly unique.

Dave: Mm-hmm.

00:23:39

Chris: I do think of the stuff like how a lot of JSX is littered with maps and filters and stuff, so you do your iterative looping right in the JSX. You know? You set up a UL, and then, inside, you go, like, items.map. You know?

Dave: Yeah.

Chris: Then item. Then you loop over that and give it a key and output all your LIs for your menu or whatever. That, HTML can't do.

Dave: Right.

Chris: Also, even template literals can't really do that super good either really.

Dave: Mm-hmm.

Chris: The syntax gets real messy.

Dave: Kind of. Yeah. Yeah, yeah.

Chris: Maybe it's that that they're talking about, that little ability to do little--

Dave: Syntax highlighting.

[Laughter]

Dave: Sorry. I hear you say syntax highlighting is the whole reason we should build this thing. [Laughter]

Chris: I would like an answer to that too. When people say, "Put JSX in the browser," what does that mean? I've heard it from enough smart people that they have something in mind that they mean.

Dave: Yeah.

Chris: It's not clear.

Dave: Yeah. The ability to write HTML in JavaScript, if that's it, okay. I think I understand it - without being like document, create element div, div.classname= blah-blah, you know? Without doing that whole rigmarole.

Chris: Well, maybe that's it. Is that what they mean?

Dave: Like a declarative syntax or something that allows you to generate HTML. Maybe that's it. But I'm just like, well, tag template literals kind of do that, but maybe that's a bit insecure and maybe that involves doing element.innerHTML= something at some point - maybe. Maybe that is dangerously settling.

Chris: Yeah, and it doesn't enforce. You know how JSX kind of enforces it to be correct, too? It's invalid JavaScript if you're missing a closing div.

Dave: Mm-hmm. Okay.

Chris: It just dies. Whereas a template literal, you're perfectly within your right. You might have a good reason to not close that div.

Dave: Mm-hmm.

Chris: Because you're going to close it later with some string manipulation.

Dave: Yeah. Okay.

Chris: Maybe it's that.

Dave: Yeah.

Chris: I don't know.

Dave: I don't know. I guess I've just been exposed to the HTML template, tag template literal in Lit, and I think that's good. Is that not good? Why is that not good? Now it's like when somebody is like, "Oh, you can't wear those shoes," I'm like, "Wait. I like those shoes. Why can't I wear those shoes? These shoes are good, no? What? Why does everyone hate these shoes?"

Chris: Yeah. [Laughter] Yeah.

Dave: I don't know. I would love a concrete breakdown on what JSX in the browser means. I get it, less repos and stuff, but then I also wonder. When browsers make JSX in the browser, does React now have the MooTools problem? Is it now they can't -- like React can't upgrade because they have all this legacy garbage - or whatever? Or we can't create JSX because JSX does some weird thing and now--?

Chris: Mm-hmm.

Dave: Anyway, I'd be curious what that equals in the future.

00:27:08

Chris: Speaking of that, I saw React 18 dropped.

Dave: Yes.

Chris: It certainly has stuff in it.

Dave: Suspense. It's very suspenseful. [Laughter]

Chris: Yeah. I guess that was a long-time coming, right? I don't know. I looked through it and it doesn't -- I'm not like, "Oh, my God! Look at this! This is going to change my day-to-day so heavily!"

Dave: It kind of punted on the server client stuff a bit, or I think there's support for it but the server component is still in development. Right? I think that's one part of their thing.

Chris: Yeah. It's still experimental. It's listed as, I guess. That does seem pretty cool.

You've got to wonder if this is -- I mean this is a big, cool release. No shade or anything, but React has slowed down, and maybe is that good, slowed down and its matured kind of way? It doesn't need big, flashy releases anymore. But if it doesn't, is that dangerous too? If jQuery 4 came out, would anybody care anymore? When you slowdown that far--

Dave: Yeah. Have you ejected from the hype cycle? Possibly. Yeah, well, so React 19 might have Web component support, so I'm stoked on that.

Chris: Yeah. Yeah.

Dave: That's kind of the--

Chris: But it does seem like that almost should be. In an early, rapidly iterating project, that would just be a little point release. "Oh, we fixed that."

Dave: Yeah. Well, I think it's a breaking change, so it has to be kind of a big one.

Chris: Oh, okay.

Dave: But I wonder. I mean, straight up, React is big, to the point I've been talking to people. I mention I'm not using React, people are like, "Oh, why aren't you using React?"

Chris: Hmm.

Dave: It's like, "Well, I don't know. I want to use Vue," so then you have to mount a Vue defense, like, "Why would you use Vue? No one uses it." Well, it's popular in China, so--

Chris: Oh, that's annoying. It puts you on the defense immediately.

Dave: Yeah. Yeah. "But it's popular in China," that's what I say.

Chris: What was that, in Looper, who was like, "I'm from the future. You want to move to China."

00:29:15

Dave: [Laughter] Yeah, so I think it's big enough of a behemoth, it just becomes the default.

Sorry. We're all over the place here. Was it Tech Lead or something, but the O'Reilly. O'Reilly has those annual reports - or whatever - and stuff like that. They were kind of saying they put SPA (by default) on blast. They sort of said people are doing this without understanding the architectural tradeoffs, and so SPA (by default) is actually maybe an antipattern we need to stop doing.

Chris: Hmm.

Dave: But I think it's just that common. People are doing React, and so everyone has to be React. Then you have to do React as a company so that you can hire a developer who does React because there might not be developers who do other stuff. I hear that a lot. A lot of people are just like, you're finding people who know React but don't know anything else - or whatever.

Chris: We had a discussion about it at work, and it kind of fizzled out. It was kind of like, "How much do we care?" I didn't even weigh in because I'm like, "I don't have anything to say." [Laughter]

I'm almost like, "We use Next, so why don't we just wait for Next to pick it up? Then we'll upgrade Next." I think, from a day-to-day perspective, Next almost looms larger, is almost like a more important piece of technology than React is.

Dave: Yeah. Yeah.

Chris: Which is crazy to say, but--

Dave: No, I mean I think that's a very-- I like React. I think I like its inventions. But I think what I didn't like about it was it just kind of plopped you in, no rules, and so it's just the wild west.

But Next is just like, "We're going to handle so much for you. You're actually going to have a fun time in here because we do so much." I think that's cool.

Chris: Yeah.

Dave: So, I would applaud Next for that.

The same thing. I played with Remix. I like Remix.

I liked -- what is it -- Redwood. I think I just--

Chris: I almost think that languages don't get big until their major framework arrives. We saw that. Now that both React and Vue went through that cycle, then when Svelte arrived, they knew they couldn't wait long for Svelte Kit, at least that's what it seems like to me, and they got that going right away, faster than you'd think.

Dave: Mm-hmm.

Chris: I think future frameworks will probably arrive with it in toe.

Dave: Mm-hmm.

Chris: Knowing that you can't just do the framework part if you want to be big.

Dave: Yeah. Yeah, you can't. You have to have the meta framework - or the sort of thing.

Chris: Yeah. I'm not sure if that's entire true. Solid is doing pretty good, and it doesn't have a meta framework thingy. But how big is it, really?

00:32:12

Dave: Well, and where does Astro fit on this? [Laughter]

Chris: They just arrived as a meta framework already.

Dave: Kind of, sort of, right?

Chris: That was day one. That's all it is.

Dave: Yeah. It's kind of interesting, right?

Chris: They announced they have a big week coming up. We're going to definitely cover that.

Dave: Mm-hmm.

Chris: We might even grab Fred for the show because I would like to talk about their releases. I have no idea what the releases are, but they have one of those things where it's launch week. Talk about trends in the industry.

Dave: Oh... Netlify has a launch week.

Chris: That's a thing people--

Dave: Astro has a launch week. Dave Rupert is doing a launch week.

Chris: Yeah. Cloudflare has like launch month, usually. You know? They go ham with it.

Dave: Cloudflare, you were on this. You were on this, right? With J. Coop, John Cooperman.

Chris: Oh, yeah! We did a little founder talk thing. Yeah.

Dave: Cloudflare TV. They have a 24/7 TV channel. [Laughter]

Chris: They do.

Dave: That's wild. That's a different world.

Chris: It is truly weird that they have enough video content that, rather than YouTube it, which maybe that's why. Maybe they just wanted to attempt to do something different than everybody else does.

Dave: But it's just enough content, they have a 24/7 streaming service, which is bold. I wonder, too, if it helps with internal knowledge management. That's what I'd wonder. Sort of like, "Oh, you know what? There's a brownbag about some weird feature we have." What's the thing we played with? "Database key value stores, I actually have not learned that, so I'll just watch this one." You know?

Chris: Yeah. That's a good point. I'm sure they just have TVs up at the old office playing it.

Dave: Just burning gigawatts, mining bitcoins of content. [Laughter] Yeah. No, it's interesting. They're a company with enough going on that maybe it's super worth it for the internal sort of culture.

Chris: Hmm.

Dave: I don't know.

Chris: Yeah. Launch week, everybody is doing it. Trends.

Dave: I'm going to do it.

Chris: I love it.

Dave: Dave Rupert LLC, launch week. What are we launching? We're launching--

Chris: Yeah. Blog Post Monday - Monday - Monday. [Laughter]

Dave: Blog Post Monday! Blogtober!

00:34:33

Chris: Hey, we had Jim Neilson on the show the other week. Remember that?

Dave: Yeah. Speaking of bloggers, gees. This kid.

Chris: Ooh, I know. He's got it. You got what it takes, Jimmy.

A good one from him the other day. Did you see this? "The things that the CSS spec folks got right."

Dave: Oh, you know, that's on my to-read.

Chris: Ah, it's a fun one because it's-- Have you seen that classic one? I don't know. Does Jim link to it here? There's a great page somewhere in the specs that are like the things that CSS got wrong that were like, "Oops. Sorry." [Laughter] "This was totally janked up." But this is the opposite of that. This is Jim giving high-fives to things that did good.

For example, font weight and how it has this 100 to 900 system, which is so clever and has held up over time and adds a lot of flexibility even beyond where we are now. High-five. You know?

It has keywords, but they just map to the numbers, and the numbers were prescient in what they needed at the time. Pretty clever.

I like how -- we just talked about Sass and at-import, at-use, and all that stuff. That's one of the things there, too, is that CSS (out of the box) could import another CSS file. Then it took 100 years for JavaScript to do it.

Dave: [Laughter]

Chris: And we're still waiting for HTML to do it.

Dave: Yeah. Yeah. Yeah, I see.

Chris: CSS could do it immediately.

Dave: I see I get a mention here. HTML imports will come out the day I pass away.

Chris: [Laughter]

Dave: Yeah. Thanks. Appreciate it. Thanks, Jim. Yeah.

Chris: Nobody wants you to get hit by a bus, but it'll be great for HTML.

Dave: It's going to be good for HTML to be my legacy.

Chris: [Laughter]

Dave: [Laughter] There's font family, too. I don't want to read on the podcast, but one, at font face, the coolest thing about it is it does not request the file until it knows you're using the font.

Chris: Oh, it's so great.

Dave: I could declare every font face on my computer.

Chris: You could.

Dave: But it will not request a single file from Google Fonts, or whatever, until it knows I'm using that font. Frickin' amazing.

Chris: Genius. It's so good.

Dave: I just get goosebumps. That's so forward-thinking. They were like, "Nope. We're not eagerly fetching fonts, everybody. We're only getting the ones we need."

00:37:03

Chris: This isn't a problem, but you know how a lot of, like Google Fonts, for example, one of the ways that you can use it is, well, you use it as a link tag or an at-import. It gives you both options.

Those will still get requested. It won't then pull the font file. But it will still pull that style sheet. That's kind of a plus one for not doing it that way. Having your own at font face blocks right in your own CSS so that you benefit more clearly from that.

Dave: Yeah. Because CSS is a blocking request, so it's going to say, "Oh, I'm going to stop everything to go ask Google what fonts you might be using."

Chris: Yeah.

Dave: That can be it. And Google, it's interesting, too, because Google actually does a really good job loading fonts. But the font face file ends up really bloated because it'll split languages like English, Greek, Vietnamese. It'll just split out all the Unicode ranges, so it'll only request a subset of the font that you are using. If it detects you are using Vietnamese, it'll go get the Vietnamese font and probably not the Greek font and probably not the English font.

Chris: Mm-hmm.

Dave: It'll just say, "Oh, they're only using Vietnamese." But the cost is you download a larger font file from Google Fonts.

Chris: Right. Isn't there some streaming thing happening or threatened to happen with fonts that is like that?

Dave: Oh, dynamic byte ranges, kind of?

Chris: Yeah, kind of, in that, like, "Oh, you never--" there are no letter O's with -- I don't know. What's the German thing?

Dave: Umlaut.

Chris: Two dots above it. There's no O with an umlaut on this page, so I'm keeping an open connection to where this font is hosted on the server, and that one never needed to come across the wire because it just was never necessary.

Dave: That would be awesome. That would be super cool.

Chris: Like a video. You only watch half a YouTube video. You probably downloaded 61% of the video. Not 100%.

Dave: Oh, I've got analytics on y'all here where y'all....

Chris: Yeah. [Laughter]

Dave: Like 41%. Come on, team. Watch the whole dang show.

00:39:24

Chris: That streaming stuff is so cool. I didn't really, and I still don't, understand this. This is definitely a blind spot for me, but somebody was talking in the Discord the other day about this Taylor Hunt series on Web performance.

Dave: [Laughter] Yeah.

Chris: One of the things he wanted to fix was or the second article of the series of three is all about streaming HTML, which is like as the server gets the data for what it has that that part of the HTML gets completed and comes across. I'm like, "What the hell is streaming HTML?!"

It requires some cooperation from your server to do it.

Dave: Mm-hmm. Mm-hmm.

Chris: I just fully don't understand it. He said the tooling for it is so limited.

Dave: Mm-hmm.

Chris: He pointed to this library called Marko, I think, with a K, M-A-R-K-O. He called it un-googleable library, but I just googled it and it came up just fine. But maybe that's because I've been to this page before.

I've seen this before, but I kind of wrote it off as, like, I don't need another HTML framework at the moment. I don't know how to take advantage of this stuff sometimes, so it just comes and goes from my mind.

He said this particular library supports the idea of streaming HTML, and that's what he used for the library. It got the attention of definitely some performance-focused people saying streaming HTML is the only way to go. I'll have to put it on my reading list.

00:40:54

Dave: It's funny. The first post is a really good read. He got this phone [laughter] from Kroger, like the cheapest phone they sell. It's called -- hold on. I've got to get it right because it's the perfect phone name. Hold on.

Chris: Yeah. It's like--

Dave: [Keyboard clacking] Okay. The Hot Peppers Poblano VLE5, $35, $15 on sale, one gig RAM, eight gigs total disk storage, 1.1 gigahertz processor. Just the Hot Peppers Poblano VLE5 phone. It's the new phone everyone is getting. Check it out at your local Kroger.

Chris: Wow, hotpeppermobile.com, and it cost $15. That's how much the phone cost, right?

Dave: Yeah.

Chris: It's got a camera and everything.

Dave: You know it's interesting because we are probably in the more affluent side, right?

Chris: Hmm.

Dave: We just had -- you and I particularly -- long careers doing stuff - or whatever. But you think about any normal person, even me. You dropped your phone in a toilet. Oops. It doesn't work anymore. Are you going to go out and buy the $1,000 iPhone every time it happens or if you work on a jobsite and get hit by boards or breaks your phone. Dropped it everywhere. You've got a kid who throws it in the ocean. Are you buying a whole new phone every time, or is the Hot Pepper Poblano just work? That seems like it works just fine to get you through until your next paycheck or your next big bonus or whatever to get the new-new iPhone.

Dave Rupert would probably go into debt just to get the new iPhone just because I do so much business on that, but again not everyone can write their phone off as a business expense. [Laughter]

Chris: Oh, these things look amazing. It's not just that they exist. It's that they're the top selling phone.

Dave: Yeah.

Chris: From their stores. I mean, granted, they're grocery stores and I don't know how many people buy phones from grocery stores, but Kroger is pretty humungous. Aren't they top 50 companies in the United States, certainly?

Dave: Oh, yeah. It's like if your local grocery store is not a Kroger--

Chris: It will be soon.

Dave: It's just like Kroger, Safeway, Whole Foods, Trader Joe's, or something. Yeah, everything falls under that umbrella, basically, right?

Chris: Mm-hmm.

Dave: I'm sure there's a local - whatever. There's a different brand they sell at Safeway. Who knows what they sell at Duane Reade.

Chris: Great phone for testing, knowing how popular it is, though. You know? Wasn't that--? There's like a recipe for or the baseline for performance, and it was a midrange Android phone.

Dave: Mm-hmm.

Chris: Well, you know, I wouldn't even think this qualifies as midrange. This might be low-end Android phone, but that's what it is.

00:43:56

Dave: I bet it's a very big surprise [laughter] for your website. Well, then I saw this other thing. Not to pile on drama or things for other companies, but I think I saw somewhere. Somebody was talking about how--

It was a big site like Amazon or something. They had looked into React - or whatever - but it just literally couldn't do fast enough on these devices and stuff like that. So, it's like there's actually huge concerns. You've got to figure out, if people are using these devices and coming to your site, what are you going to do? You've got to maybe change your strategy a bit. Interesting, to say the least. Dude, everyone is going to have a Hot Pepper Poblano, and I'm going to just be here.

Chris: It makes me a little hungry, honestly. I got to go to Denver recently, just for a quick trip, and they got the green chili thing on lock.

Dave: Mm-hmm.

Chris: You know?

Dave: Some hatch happening? Yeah.

Chris: Yeah. Austin too, right? But I don't know why they try to win that game.

Dave: Yeah, well, we get it. It's just a little later in the season.

00:45:08

Chris: Yeah. Yeah. Austin wins on so many other levels anyway. I see Smashing Conf is coming through town for you.

Dave: Yeah!

Chris: Are you going to crash it?

Dave: I might crash it. It's been a while since it came because it either has been canceled the last couple of years, but I'll see what I do. I know a few people.

Chris: Yeah. I see it's one week after their San Francisco one. They're just doing them back to back. Crazy!

Dave: Yeah, I think that's good.

Chris: I put it on my calendar just because - I don't know.

Dave: Hey.

Chris: It appeals to me to come crash it, too. We'll see.

Dave: Hey. That's great. Well, we've got a murphy bed, so just ready for you.

Chris: No promises, people.

Dave: [Laughter]

Chris: Listeners--

Dave: [Laughter]

Chris: Do you really? Is that the kind that folds down from the wall?

Dave: Yeah! Yeah. Yeah.

Chris: Nice.

Dave: There we go, man.

Chris: Nice. Nice. That's a nice way to do it for a guest room.

Dave: Yeah.

Chris: Why take up the floor space all the time?

Dave: Yeah. It's a playroom otherwise, so it may have whatever permanently embedded Legos in the carpet. But you know, other than that, it's a pretty good setup.

00:46:12

Chris: Mm-hmm. [Laughter] Gosh, we were in Mexico last week.

Dave: Okay. Yeah.

Chris: Hot tip, people. Don't listen to the Internet that tells you that you can bring your toddler to Canada or Mexico with a birth certificate.

Dave: Oh, not true?

Chris: You've heard it right here from ShopTalk Show. This is a not true statement, despite the Delta agent telling us it was true (on the phone) and having us be all not worried about it. Not that I'm against getting a passport. We ordered it. It just didn't come in time for our trip. But neither my wife nor I sweated it for any reason.

Dave: The Internet says it's fine. The computer says yes.

Chris: Yes.

Dave: Yeah.

Chris: Yeah. The lady on the phone said it was fine. So, we show up the morning, because it's a 6:00 a.m. flight out of Bend. Our little town, they stack up the flights early.

Dave: Oh, yeah.

Chris: Then they go to Seattle or whatever, and then they have more normal timed flights out of those towns. I think it's the curse of the small town.

But anyway, we're at the airport at 4:30 in the morning, and the guy is like -- you know, we're holding up the line behind us. He's trying to figure out how can we get you on this plane. The answer is you can't. There's no getting on this plane, we find, before we even leave our town, which I guess that's the time you want to find out.

Dave: Yeah. You don't want to find out in Mexico - or whatever. Yeah.

Chris: But we're just dejected, you know, just bummed out. But we were going to meet some other families down there, and those families didn't know each other. We kind of organized the thing. We're all like, "You're all going to love each other." You know?

Dave: Yeah. Yeah.

Chris: At the last minute, Miranda goes, "You go. I'll stay here, figure out the passport thing, and meet you down there." You know?

Dave: Okay.

Chris: There's got to be some way. You know, if your heart is really dedicated to it, you've got to be able to get a passport. Maybe it'll take a day or two.

Dave: You're doing this at 4:30 in the morning. This is awful.

Chris: Yeah, and we're not -- our brains aren't even fully loaded or anything. But I agree, and I'm so sad about it.

Dave: Mm-hmm.

Chris: I was like, "Oh, my God," and she did all the work planning the trip and all this. It's such a beautiful location. It was also celebratory, you know. We sold the blog and all that.

Dave: Yeah.

Chris: I get on the plane and go.

Dave: Okay.

Chris: It's three flights all the way down there without my family. Sad as heck, but I'm with another family and trying to be Uncle Chris. Hopefully, that's okay, and stuff.

We're trying to brainstorm, and we have all these crazy ideas, some of which should never be mentioned, and I won't. [Laughter]

The ultimate mention is, it is actually true that you can cross the border to Mexico by land or sea.

Dave: Oh... P.A.

Chris: But not by--

Dave: By foot. [Laughter]

Chris: But not by plane. That's off.

Dave: Whoa! Okay.

Chris: Yeah, but by foot is okay. But you also -- at least theoretically, can't do it with one parent.

Dave: Oh...

Chris: Because the point is, you know, to prevent one parent from grabbing a kid and running across the border. You know?

Dave: Sure. Sure. Yeah.

Chris: I decide I'll fly back, meet you in San Diego, and you fly down to San Diego, and we'll walk across the border. Then we'll catch a domestic flight from Tijuana down to where we're headed in Cabo.

Dave: [Laughter]

Chris: When it's a domestic flight, you don't need a passport.

Dave: Don't need a passport, yeah.

Chris: Just like you don't in the U.S.

Dave: Wow.

Chris: We hatched this whole plane, which is just an enormous amount of planning and flights and last minute crap and last row of the airplane kind of stuff. We'd be lucky to sit together stuff. Fine.

We make it all work. Then we have to stay in a hotel room in San Diego, wake up at the crack of dawn again, get a car to take us to the official border crossing that is in the U.S., and you walk right across, and you walk right into the Tijuana airport. The Tijuana airport is right on the border of the U.S.-Mexico border.

Dave: Strategically placed.

Chris: The company that does this is called CBX (Cross-Border Xpress). It's a whole company around walking you across the border.

Dave: Mm-hmm.

Chris: But they're an official -- you know, it was a big, fancy building, a big parking lot, and stuff. It's a whole thing.

But they have computer systems, you know, with an input field. You know?

Dave: Mm-hmm.

Chris: Required attribute on it that asks for your passport.

Dave: This is getting harder. Oh-no! And old Ruby doesn't have one.

Chris: So, they say, "Oh, you don't have a passport. No, you can't. You can't cross the border here."

Dave: Oh-no!

Chris: What?!! Which is not the law, but it's their policy, and they're an independent business. They can do whatever they want. They say, "No. Nope. Nope. Nope. Nope. Nope."

So, we were like, "Oh, my God!" You know? But our driver, we're telling him the whole story on the way there.

He's like, "Oh, what are you talking about? Getting into Mexico is not a problem." You know?

Dave: Okay.

Chris: "I'll just take you down. I could walk you across. It's just that I'm working for this company now, and they have some special rules or whatever. If I had my passport, I could just walk you across this little hole in the fence right here," but I don't know. It was a weird thing to say.

But he's like, "But there's a place you can walk across the border. It's just down a couple of highway stops." We're like, "Fine!" We are so far into this.

Dave: [Laughter]

Chris: He takes us down there. He calls his buddy on the phone and walks us through where we've got to walk. I'm trying to remember what he says and all this stuff.

But yeah, man. We did it. We just walked across the border - you know.

Dave: Hey.

Chris: Nobody asked a damn thing. We didn't have to cough up a birth certificate or anything.

Dave: Good.

Chris: Literally no documentation at all. Yeah.

Dave: Bienvenidos. [Laughter]

Chris: Bienvenidos. Popped a cab back to the Tijuana airport, and then caught our flight from there. But even that was hair raising because we tried to get to the gate, and we we're stopped. They're like, "Where's your travel visa?"

I'm like, "We don't have a travel visa," so they put us in line to talk to a Mexican--

Dave: Like a consulate kind of thing. Yeah.

Chris: Yeah.

Dave: Yeah.

Chris: They're like, "Where's your passport?" We were like, "Oh, no!" But we were like, "Oh, we heard the birth certificate was okay."

They side eyed us and asked us some questions and stuff, but they were like, "Well, make sure you get one next time," but ultimately gave us the travel visa, so we caught the flight and made it. We made it.

Dave: Wow!

Chris: Then we had to do the same exact dance on the way home.

Dave: Oh, no!

Chris: Because we called Delta, and we were like, "Is it different on the way home?"

Dave: Yeah.

Chris: Shouldn't it be easier to get back when you are an American citizen? But, no, same deal, and at CBX. Nope, you can't go back either.

Dave: Wow!

Chris: We had to do the same crazy walk across the border dance on the way home.

Dave: Wowzers! Did you call the same cabbie and tip him?

Chris: Totally!

Dave: Yeah?

Chris: Totally. Totally. Totally.

Dave: "Hey, we're coming back, the same fence hole."

Chris: Same. [Laughter] Yeah.

Dave: No.

Chris: It was not quite a fence hole, but it was official, in a way, but official in, we were like, "Wow! This is how this works?" kind of way.

Dave: Yeah. Yeah. We have those in Texas.

Chris: Yeah. [Laughter]

Dave: Just like, I'm walking across this bridge. Anyone care? Is this--?

Chris: Yeah. Does anyone care? Yeah.

Dave: I'm going very slow.

Chris: [Laughter]

Dave: Very honest. Very upstanding, so--

Chris: Just a regular guy here.

Dave: Yep. Just walking across the bridge.

Chris: Yeah, that was wild. Then, of course, we get home, and I get sick. The electricity went out in the garage, and the chest freezer food is all dead.

Dave: Bummer! Oh, no.

Chris: Our laptop won't charge anymore. It's one of those things where you're like, you leave for a week and your life just falls apart.

Dave: Been there. Yeah.

Chris: Yeah.

Dave: No.

Chris: Cheese and rice.

Dave: Cheese and rice.

Chris: The next trip we go on is going to feel like, you know, the easiest thing I've done in my life compared to this.

Dave: [Laughter]

Chris: It was nine flights in total it took us to operate that.

Dave: Brutal. I'm surprised you did the whole get all down there, but that makes sense because you were kind of the glue for the whole week - or whatever.

Chris: I was. It was the Frost family, as some of you might know as Web people. Brad Frost and Mini Frost.

Dave: Yeah.

Chris: Melissa came down, and they have a four-year-old like we have. Yeah, man.

Dave: Good times.

Chris: Brad bought his mini bass. We jammed by the pool and had fun down there. Then the other family was just some new friends we have in Bend, including the lawyer who closed the CSS-Tricks deal.

Dave: Nice.

Chris: So, it all comes around, doesn't it?

Dave: Yeah. Nice. Go celebrate. Do it!

Chris: We did, man. I had a steak down there that was next level, Michelin Star steak.

Dave: Ah... I'm happy for you guys. I should have crashed. I should have done that. I should have.

Chris: You should have. I told you about it, man. You were busy.

Dave: Yeah. Our Spring Break didn't align.

Chris: No, it didn't.

Dave: But that was the number one problem. But then - whatever - I'm probably not fun to hang out with. Too stressed out. Whatever. [Laughter] It would have been good.

Chris: [Laughter] One of these days.

Dave: One day, we'll do it. I need to get up to Bend, for real though. Every article I read is like, "Have you heard about this town called Bend, Oregon?"

Chris: [Laughter] That's the place to be, man. I tell you what. It's beautiful.

00:55:24

Dave: Awesome. Well, hey. We can wrap it up there. I was -- my wife bought me a magazine, Chris.

Chris: Oh, yeah?

Dave: Here. Let me get real quick. It's right here.

Chris: Nice. Nice. I've got an airport magazine, too.

Dave: Are you ready?

Chris: Yeah. What is it?

Dave: It's called Secret Societies. It's about--

Chris: Whoa!

Dave: It's about conspiracy theory, cults, and stuff like that. Anyway.

Chris: Yeah.

Dave: Next week--

Chris: Magazine edition?

Dave: --I'll interview you for the mafia.

Chris: Nice.

Dave: How does that sound? [Laughter] Good?

Chris: I've got a class, man, Entrepreneur Magazine, at the airport.

Dave: Oh... All right.

Chris: Yeah, Jessica Simpson's business was profiled. There's a big ad for cigarettes in it, which I didn't even know was legal anymore.

Dave: No.

Chris: It felt a little weird.

Dave: Yeah. You're like, "What is this? Is this from--?" Did you check the date? You're like, "Is this from the '90s?"

Chris: [Laughter] Did we go through a portal in time?

Dave: Yeah. Oh, cool. Yeah. We'll wrap it up. Hey, thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.

Hey, we do YouTube now. We have a vanity URL, youtube.com/shoptalkshow. That's where you find us.

Then let's see. Oh, we have a Patreon. That's the best part, actually. Go over to patreon.com/shoptalkshow to get in the D-d-d-d-discord. Chris, do you got anything else you'd like to say?

Chris: ShopTalkShow.com.