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 Squiggly Rupert, and with me is Chris Crunchy Coyier. Hey, Chris.

[Laughter]

Dave: It's our new kid show.

Chris Coyier: We could make... We could make money. Blimpy proves that it's not a quality issue.

Dave: Oh, no. No, it's a consistency, five-minutes max times a thousand, basically.

Chris: Yeah. Look a little silly so you're not scary in any way.

Dave: Dumb hat. Dumb hat. Yeah.

Chris: And play with stuff.

Dave: Hmm...

Chris: Be interested in the world. Be like, "What's this?!" You know? Kids respond to that.

Dave: Man, this sounds like my whole Twitch stream strategy. [Laughter]

Chris: Yeah.

Dave: Whoa! Whoa! What is this?! A Web component?!

Chris: Yeah.

Dave: Wow! What's it do?

Chris: Look! What's that required attribute for?

Dave: Oh!

Chris: We could do a real folksy. That would work.

Dave: That's good. Yeah, we should do it. We should try it out on the old YouTube. Resurrect that and do--

Chris: Just be really surprised, like a "Learn with Dave." Instead of learn with Jason, but Jason plays it up, too.

Dave: He's Mr. Business. Mr. Business, yeah.

Chris: I don't know. He's smarter than he comes off, occasionally, because that's the point of the show is to not pretend like he doesn't know anything but prefer that the expert shows him. You know?

Dave: Yeah. Yeah. But we should do it really like, "Whoa! What's that?!"

[Laughter]

Chris: Yeah. All the way out.

Dave: Yeah.

Chris: Dial it. Yeah.

Dave: Hidden?! Does that mean it's hidden?!

[Laughter]

Dave: What do you think, Chad? Say yes!

Chris: Slots?! What's a slot?! I only know about those from Double Dragon arcade games.

Dave: Las Vegas.

Chris: Oh, yeah. There you go.

Dave: Yeah.

Chris: That's pretty good.

Dave: Oh, man.

Chris: Cheesin' with Dave. j

00:02:11

Chris: I've got my laptop sitting in the other room. I decided to just wipe it.

Dave: Ooh!

Chris: You ever have a day like that? You're like, "I hate... This thing is so jacked up. Little stuff."

There was no way on Earth. I was on the phone with Apple, which I was surprised at how easy it was to get a guy on the phone to talk to me about my photos app. You know?

Dave: Mm-hmm. Yeah.

Chris: I expect a little support for hardware or business stuff - I don't know - but I just needed... my photos app wouldn't sync. Man, if there wasn't a really intelligent, useful human being on the other side of the phone.

Now, I say that; he couldn't solve my problem. So, you know, how useful was he?

Dave: Yeah. So, did you--?

Chris: But it was a weird problem. It just would not sync.

Dave: Did you lose photos? Or you just couldn't sync?

Chris: No lost photos. It was fine. I got multiple laptops. I've got an iPad, iPhone. All my photos are there. They sync perfectly fine; 100% happy.

Dave: It just would not come to this laptop.

Chris: One laptop, no sync. Wouldn't come.

Dave: Huh.

Chris: And it's funny because I can't really think of a reason. My best idea was that there was someone in the Discord the other day, somebody linked up Next DNS.

Dave: Mm-hmm.

Chris: And I was like, "Oh, that's interesting." I totally regret installing that because it's just blocking traffic at a level away from your computer even.

Dave: Right, right, right.

Chris: So, you're like, "Man, if anything is wrong, it's definitely that thing's fault." You know?

Dave: Yeah.

Chris: But I did find that it is somehow... at least it felt faster. When the traffic doesn't even come close to your computer, man, what a great place for an ad blocker - I think, for most people.

Dave: Mm-hmm.

Chris: But if you're like you and me, if you do a lot of computer stuff, the chances of it interfering are just a little too high for me.

00:03:50

Dave: Yeah. Not to put us into some sort of religious elite or something like that, but I feel that way about small keyboards. I move my fingers enough on a keyboard, a small keyboard is not cool. [Laughter]

Chris: [Laughter] Yeah.

Dave: I kind of need dedicated zones for what I'm doing. The small keyboards where I have to up-up-down-down-left-right-left-right-B-I-B-I-start to enter into my F keys, it just is not the right thing for me.

Chris: Yeah. Medium to large keyboards, I get.

Dave: Yeah.

Chris: It was too much because then I have Tailscale, too.

Dave: Mm-hmm.

Chris: Once in a while, I'll use another VPN. It's too much.

Dave: Too many. Too many.

Chris: Things that interfere with traffic.

Dave: Yeah.

Chris: It could have been that, but I hadn't installed that on the other computer. Then my messages app would freeze once in a while.

I have this one repo that, when I push Git, it just goes, like, "That repo doesn't exist." And you're like, "Well, it does exist, though, because--" It's fine.

So, then I open up GitHub desktop, which is a nice Git app.

Dave: Yeah.

Chris: But I do find it weirdly underused. Do you know anybody that just that's the app they use for Git?

Dave: I put my coworkers on it, and it was super successful because it was like, "Hey, here's a GUI for how Git works."

Chris: Yeah.

Dave: My designer coworkers. And so, you can commit stuff. But where I think it falls down is when you get into pre-commit hooks and stuff like that. It doesn't always run those successfully.

Chris: Ooh... Hm...

Dave: Unless they have fully set up Husky, right? [Laughter] Or whatever.

00:05:28

Chris: Yeah. I remember that. That was even an issue in Git Tower. That's my preferred one.

Dave: Mm-hmm.

Chris: Where I had to go give it a path somewhere deep in the bowels of it to tell where pre-commit hooks are - or something.

Dave: Yeah. Yeah.

Chris: But I did get that working, and that's been my go-to of choice. Although, I've seen more and more people just use VS Code.

Dave: Mm-hmm.

Chris: I feel like the idea of vets from Microsoft, that's where GitHub is. It has pretty good diffing stuff built in. More and more people are just doing that. And plenty of people are just on the command line, still, of course.

Dave: It's nice to visually see what you're about to send over. You know? I don't know. I can go through, and I get red grains and be like, "Oh, yeah. I did this file I just messed up for--"

Chris: That's exactly right. You've got to look for your console.log before you commit.

Dave: Yeah.

Chris: You're like, "Ooh, shoot. I forgot one. I'm going to go do it." You know?

Dave: Yeah.

Chris: I really like that. I think Git is the perfect thing for a GUI tool. Anyway, so it wouldn't work in Git Tower ... "The repository doesn't exist." Go to GitHub desktop, hit commit, boosh, right up.

Dave: Mm-hmm.

Chris: So, I'm like, "These apps have some permissions problems. There's something wrong."

It was starting to be like four or five things. I'm like, "What is up with this laptop, yo?!" So, I just wiped it.

It's a lot faster than I thought. They're built into modern MacOS. There's some kind of... They save the installer or something on disk.

Dave: Okay. Okay.

Chris: So, if you want to wipe, it takes three minutes.

Dave: You're braver than I am, but I should consider it. I'm not in messed-up zone, but I've been there before. Windows, notoriously so, the solution was to wipe. But you know. I think, for my Mac, I think it A) makes you more cloud. Does that make sense? [Laughter]

Chris: Oh, it does. I took five minutes. And I was like, "What's on here?" I looked at my desktop to see if there's anything there because I'm kind of a keep crap on the desktop kind of guy. But then I was like, "Oh, even my iCloud, I sync desktops," so even that's clouded.

Dave: Yeah.

Chris: Then I looked in a few folders in my home directory to see if there were a few things in there. I'm like, "Oh, there are a few things in here, but I don't actually care about them."

I moved one little folder up to my Dropbox. I still use Dropbox. I want to be like you, Dave. I want to get off it.

00:07:47

Dave: I killed Dropbox. I still technically have... What's the Microsoft one?

Chris: Google Drive?

Dave: OneDrive.

Chris: OneDrive.

Dave: Yeah.

Chris: Yeah.

Dave: But I'm going to get rid of that. I'm just going to do the Apple one.

Chris: Yeah. It's built-in. Whatever. It's fine.

Dave: And if I go back to Windows, I'll just switch. I'll just drag that folder. [Laughter]

Chris: To OneDrive.

Dave: Into OneDrive, and we fixed it.

Chris: Just a little... Dropbox has got their claws in me just a little bit. You know? I do the file management with this show, for example, and that's shared with Chris Enns. And I have a folder with my wife. And I have a folder for founder's stuff at work where we keep stuff. It's just enough combo sharing things--

Dave: Yeah.

Chris: --that I'm like, "Ugh. I've got to..." and it's like $100 or something. But yeah, I would love to nuke it.

Dave: Yeah. I just don't. I just had to say good-bye. I was like, "What am I using from it?" Nothing. Cool. Bye.

Chris: Yeah.

Dave: Yeah.

Chris: Between that and iCloud is a no-brainer for me. It's part of the operating system, so I use it.

Dave: Yeah.

Chris: Between that and then just Git, it's almost a thin client. Obviously, I install stuff. But files wise, it's nothing.

00:09:00

Dave: Do you ever watch Kurt Cobain play guitar? Then he just smashes it, right? A nice Fender Jaguar, he's just smashing. You know?

Chris: Yeah.

Dave: You're like, "Dude, you don't like your guitars?" But he understood, "I can always just get a new guitar." [Laughter]

Chris: Yeah.

Dave: I feel like that's what I want out of my computer. It's not like I'm just going to smash my computer on stage after a talk or something like that, but I want to be able to be like, "If this falls in a toilet or gets run over by an airplane, no big deal."

Chris: Yeah. That's great. A thin client of guitars; I love that.

Dave: Yeah. I just want to grab... Anywhere in the world, I can just walk in and buy a computer, and then it's set up for me.

Chris: Yeah.

Dave: That would be cool.

Chris: Isn't there some--? I feel like I saw it in the news just this week. Somebody, some company, released a $150 thin client.

Dave: Ooh...

Chris: Really thin.

Dave: Really? Okay. Just very--

Chris: It's kind of what the Chromebook was supposed to be.

Dave: Was it under the framework laptop sort of vibe or no?

Chris: I can't talk about it because I just lost it. But the thing was criticized. Where I read it said it's too early or bad timing or something.

Dave: Hmm...

Chris: I don't know. Everybody has got their own opinion. I'm sure $150 is very appealing to a lot of people on Earth, I'm sure. Hopefully, they have a good time of it.

00:10:20

Dave: If you're willing to wait. You know? I think, for me, it's just... I had the thin clients. I had the Microsoft Surface I used for like two years. It was my main machine, and that was not even... It was the Surface Pro. But it was way underpowered, so builds took forever.

Chris: Didn't they all have AMD chips in them or something that were not great?

Dave: They have Intel, but it was all i3 or something. Then they were switching. I think they're in the process of switching to AMD, and they had one line with AMD.

Chris: Oof.

Dave: But I don't know how--

Chris: It got complicated?

Dave: Microsoft, there are just so many Windows computers and so many Intel chips and so many apps that'll never get rebuilt again.

Chris: Yeah.

Dave: They're going to be stuck for a while. Mac, as bad as its obsolete, planned obsoletion is, it does turnover. It composts. All the bad apps leave the system pretty regularly.

Chris: Hm...

Dave: Or get kicked out.

Chris: Yeah.

Dave: Or apps that were--

00:11:29

Chris: Maybe NPM should do that. [Laughter] I'm sorry. All these old packages, they're gone.

Dave: Sorry. If it's not in ESM, we just... You have to use NPM old to install.

Chris: Do you know how low it is? It's absolutely shocking. It's a very sad number. It's something like one percent, I think, of packages are ESM.

Dave: Is ESM? Gees. Well, wasn't it famously like React is finally ESM? 11ty finally is ESM, I think.

Chris: Dang! Good job. That's excellent.

Dave: Hell of a refactor, not to shit on these people. It's a lot of work but, man.

Chris: Nontrivial, let's say. Absolutely.

Dave: Nontrivial. But man.

Chris: In ways I don't even fully understand because my brain does rally against it a little bit. I'm like, "What's the big deal? Just replace your requires with imports. How hard is that?"

Dave: Yeah. How hard is that?

Chris: But it is, actually. [Laughter]

Dave: Jest. I'm going to blame Jest.

Chris: Especially for your consumers, too. It's not just, "Is the code hard?"

Dave: Mm-hmm.

00:12:30

Chris: Speaking of Discord--

Dave: Mm-hmm. Mm-hmm.

Chris: I think Andrew was showing. I don't know if it was a show-and-tell channel thing or what, but it was like... You know I just never knew this about Sass, so I feel like I could share it.

He was like, "Oh, should I do this thing?" I think it was part of his Vite config. The Vite config, under pre-processors -- that bit of JSON - or whatever -- you can say Sass. Then, as part of that object, say additional data camelCase.

Dave: Mm-hmm.

Chris: Then just give it a string. I'm like, "That's real weird - to me." [Laughter]

Dave: Yeah.

Chris: And the string is just some Sass. So, you could say color red or a set of variables -- $brandcolor=red -- or something.

Dave: Okay.

Chris: Now, that's just set on every Sass file that it processes from here on out.

Dave: Wow.

Chris: But more likely what you're going to do is put in a use statement or an import statement into it.

Dave: Like @import vars - or something like that, right?

Chris: Vars.

Dave: Yeah.

Chris: It'll be vars or typography or some kind of global thing that you want everywhere. I'm like, "Oh, that's nice. Is that just Vite? I'm just learning about this. Is it just Vite that offers this?"

Dave: Ooh...

Chris: Or is this some Sass configuration thing that I didn't know about? I need to look at it more or ask Andrew how he got into it because, on the CodePen codebase, we have - I don't know - 100 or 200 CSS files that all start with the same line that import some global thing so that they have access to it.

It's not like I would refactor it immediately, but I just like the idea that you don't have this repetitive line of code in your codebase.

Dave: Yeah.

Chris: Additional data.

00:14:12

Dave: Well because usually when you do a Sass project, you have your main .css and that has all the imports. Then you have all the partials and stuff like that.

But the problem is if you want to compile a style sheet just for one thing, now you have to replicate main. Now you have two main files, like a new and an old, whereas if each Sass file and each Sass partial had its own import statement, you'd kind of have... It's just a cleaner story with imports and exports. Here's the import stuff. Then here's what it shoots out.

Chris: Right.

Dave: If every file did that.

Chris: Yeah. You've got to be careful. Somehow it feels like the globalness of CSS feels okay.

Dave: Mm-hmm.

Chris: Yeah, of course, I want these variables at the top. But then I'm like, "Is there a JavaScript version of this?" It's like, "Well, kind of. Just put stuff on the window."

Dave: Yeah.

Chris: If you're talking client.

Dave: Yeah.

Chris: You're like, "That's not cool, usually."

Dave: It's not cool until you call it signals, and then it's cool.

Chris: [Laughter]

Dave: And so, then it's really cool.

Chris: Just put an observer on the window. Um... okay.

Dave: Yeah.

00:15:30

Chris: Here's another one. I was reading this blog post. I'm not going to call it out specifically because it was a well-written explanation.

Dave: Burn 'em, Chris. Burn 'em to the ground. No. Just kidding.

[Laughter]

Chris: Well, in a way, I was proud of them for doing things, like thinking about the UX of it. And the UX of what I'm talking about is one-time passwords, four-digit codes let's say.

Dave: Mm-hmm.

Chris: That come to your phone or whatever via SMS message. I even mentioned it the other day because I installed this Mac app that would do that thing that iOS does but on Macs.

Dave: Yeah, like copy the--

Chris: I think even Android does it at this point. I don't even know. But yeah, get it on your clipboard so it's easier to do. There's no lack of security. The security is that it arrived at a device that's on your person.

Dave: Yeah.

Chris: Helping you get the code to the right input is just a UX concern. Pretty cool. But this was like, okay, now you're going to build one for the Web. And for whatever reason--blame design patterns or whatever--it's never just a rectangular input, and you just put the four digits in it. It's always got one, two, three, four independent, individual rectangles.

Dave: Mm-hmm. Mm-hmm.

Chris: That's always how it looks - for some reason. And this article said, "Well, use four max length one inputs then for them."

Dave: Sure. Okay.

Chris: I was like, "Well, okay, I guess that gives you styling control over them. But it wrecks all kinds of other stuff." What are the labels for all four of them? One-time password digit number three?

Dave: Yeah.

Chris: No. Get out of here. That's awful. How do you paste then? He's like, "I covered pasting." He figured out how to take the split--

Dave: Split it and trim it. Yeah.

Chris: Exactly and dump them all into the right holes. You're like, "Okay. Well, that's cool." But then you also have to handle, you know, I entered it on my keyboard, so now I need to move the focus over one. And you need to do it for the delete key, too. There's just this pile of JavaScript for dealing with these four inputs.

I was like, [Loud exhale] "This is ridiculous. Can't you just--?" For one thing... Well, I was like, "You know what I'll do? I'll download an SVG of a rounded rectangle."

Dave: Yeah.

Chris: I'll set it as background of this input.

Dave: Repeat, yeah.

Chris: And say, "Background repeat X." Then just fiddle with a few magic numbers that make it so that the numbers look like they appear in each box. Then you have none of these other problems.

Dave: Mm-hmm.

Chris: You've still got to do it right. You've still got to use the correct slew of attributes that make this work, and it's a non-intuitive slew of attributes, I'll say.

Wouldn't you think, "Oh, I'll make it input type equals number." No, you can't use number because--

Dave: It puts the little counter thing in the side.

Chris: Yeah.

Dave: Yeah.

Chris: You don't need that thing.

Dave: Yeah.

Chris: It's not like you're like, "Ooh, I was one off. I'm going to use these little spinner arrows to increment."

Dave: [Laughter] Increment my one-time password app.

Chris: You don't want that. And you're not getting that much value out of it. What you really want is input mode numeric because that triggers the keyboard that you want and you need the pattern attribute that only accepts digits just in case. Then you need a max length attribute. You probably want a required attribute. And crucially, what you really want is the auto-complete attribute that equals the string one-time-code.

Dave: One time. Yeah. Yeah.

Chris: Because that's the thing that will tell the browser and password fillers and stuff what's going on. Woo! That's a slew. I didn't even mean to get that into that.

As I was playing with it, the browser does this weird thing where even if it's max length four, it will not let you add a fifth attribute. The cursor will go to the fifth one, and it kind of pushes all the text over one.

Dave: Mm-hmm.

Chris: It's hard to describe. But now the numbers don't line up in my little boxes like they did, so I made the Discord deal with it. Of course, Alex was all over it, and so was Josh, triple-threat Josh Collinsworth. And they solved it. So, hopefully--

Dave: They solved the problem.

00:19:31

Chris: One of the three of us will blog it somehow. But I think it's nice. Isn't a zero JavaScript solution ideal in these situations? I'm not trying to be 100 years old and being like, "Them kids with their JavaScript," but compare the solutions. [Laughter]

Dave: Right.

Chris: It just is simpler to not use for inputs.

Dave: Yeah. The auto-complete, too, seems like the slam dunk, the one-time code. It seems like--

Chris: Yes.

Dave: That's what you want. That's literally what you need.

Chris: You can't use it if you have four inputs because that doesn't make sense anymore.

Dave: You could do maybe hidden, but maybe that's not allowed. I don't know. Input type equals hidden.

Chris: Right.

Dave: But I don't know if that's allowed. I like the CSS. I would be curious what people say. I know input masking is notoriously bad news, but this seems like the least bad. [Laughter] It's just a background image on a single input.

Chris: Yeah. It's not like... Input masking is the one where you type your phone number and it adds parentheses, dashes, and stuff?

Dave: Like parentheses and crap, yeah, yeah.

Chris: But that's in the value.

Dave: Right.

Chris: Whereas this isn't.

Dave: Right. Right, right. Yeah. No, that seems good.

Chris: Hmm...

Dave: I like it. Well, and you know it's funny. I feel like there should be... Back to your YouTube, there should be a thing like how you set this input up with the properties. "Hey, are you coding?"

Here. I'm going to do my YouTube. Ready? People can make fake TikToks. Ready?

Chris: Mm-hmm.

Dave: Hey! Do you want to create a one-time password code? Here's what you need. You need input, not type equals number. Type equals text. Pattern. Some numbers. And then... [laughter] input mode numeric. And, crucially, auto-complete one-time code. There you go! Have a good one!

Chris: Nice.

Dave: Yeah.

Chris: Did you keep it under 60 seconds, though?

Dave: I don't know. That might have gone out of short territory.

Chris: TikToks can be ten minutes. But if you're going to cross-post to YouTube Shorts, it's got to be under 60 seconds.

Dave: Okay.

Chris: They only take that. Reels are 90 seconds, so really just do 60, and then you get all 3.

00:21:41

Dave: Yeah. Man. I saw you making cool videos.

Chris: I'll tell you.

Dave: I liked your... I want to know what app you're using to make those videos.

Chris: Oh, yes. It's just the website is screen.studio.

Dave: Screen.studio.

Chris: And I am very impressed with them. I'm not even... I'm just having a lot of fun. [Laughter] You should just do a quick video with it and see what it's like because it is an excellent little piece of software.

Dave: Well, because it follows your mouse focus. I don't know how it does that, but that's cool how it does that. It puts your little video in a corner. Yeah.

Chris: Yeah, and you can control that, so if you don't like it or whatever. There are just two timelines, Dave. You just get one timeline of the video that you shot of the window.

Dave: Yeah, yeah.

Chris: You can record. Just like any screenshot, you can record a window. You can record an area. You can record the whole screen. You do whatever you want and it will get that area.

Then it kind of rounds the corner and puts it on a trendy-looking background like a screenshot tool, but it's video. Then the second timeline is just for Zooms. That's all it does. So, you can be like, "At this point, zoom. Then stop." When it zooms, it really classily zooms in.

Dave: Yeah. Yeah.

Chris: Then back out. Yeah, and it kind of follows your mouse while you're zoomed in, and you can control that behavior. But there's not too much. Learning this is not learning Logic or learning Final Cut Pro.

Dave: Or even what's the video editor one?

Chris: ScreenFlow.

Dave: ScreenFlow, yeah.

Chris: ScreenFlow is a dumbed-down version of those, and it's not that dumb.

Dave: Yeah.

Chris: Or iMovie. This is even easier than those but classier because it also makes your mouse really big, which looks good in those things, and it smooths. This is crucial. You might not even notice this when you're watching these videos. It smooths the mouse movement.

Dave: Yeah.

Chris: I don't know how on Earth they do that, but it looks great.

Dave: Yeah. It lines up. It dips out your video and then puts in... Yeah, smooths it. But your voice stays over it, and then it comes back. I'm seeing now they have speaker notes, which would be helpful for me because I'm too rambling.

Chris: Mm-hmm. Let's say it's a video that's designed to loop.

Dave: Yeah.

Chris: They have it where wherever your mouse ends -- let's say it's 50 pixels away from where it started--

Dave: Mm-hmm.

Chris: It'll normalize them. So, when the video loops, the cursor doesn't shift. It just is really good.

Dave: Are you doing that where you end on the lead into the video? What was my thing? "Today, we're working on one-time passwords," and then end of the video is, "But how do you code a one-time passcode?" "Today, we're working on--"

Chris: Right.

Dave: Yeah.

Chris: So, one-time passcodes. Yeah, that's genius stuff. I'm not at that level yet. I'm just playing.

Dave: Oh, man. You've got to get there.

00:24:29

Chris: But what was killing me... Remember? What was it, in the last episode or before? I had a tirade about video. That was one of the things is that YouTube is the ultimate example. They want 16x9 videos for YouTube, generally. That's the interface of it is mostly designed for that. But that's starting to be the only one left. YouTube Shorts, you can't. It has to be exactly 9x16. The other way, vertical.

Dave: Wow! Really?! Okay.

Chris: Well, at least through their API.

Dave: Yeah.

Chris: Which was funny. I would shoot one, and I was using this Screen.studio, this software that we've been talking about, which will kind of help you get it to 9x16. It has a couple of various tools to help you with that. But it doesn't help you when you're selecting an area to record. That is pretty rudimentary part of their API and it's on you to just get pixel dimensions that happen to be 9x16.

Dave: Oh, yeah. That's hard.

Chris: Now they could improve that.

Dave: Yeah.

Chris: But then you can kind of crop it after you've recorded it. That was the paradigm shift with the other one, ScreenFlow.

Dave: Mm-hmm.

Chris: Where it would be like, "Just record more than you need and then fix it in post."

Dave: Right.

Chris: They really strongly encouraged that. But anyway, if it's one pixel off 9x16, the YouTube Shorts API won't take it. They'll just be like, "Nope."

Dave: Okay, that's really good because I like that you had a square format. Maybe you're adding stuff on the 16x9, but one of them you did was a square.

Chris: Yeah, squares are nice.

Dave: And I just thought that was the perfect thing for dev content because you can have a wide angle at the top and a wide angle at the bottom, like two landscapes on top of each other.

Chris: Yep. I like it, too, because Instagram was famously square forever.

Dave: Mm-hmm.

Chris: And it still looks good, I think, generally. I think Instagram will take a square. YouTube Shorts will also take a 1x1 exactly.

Dave: Right.

Chris: But TikTok won't. TikTok zooms in your square and crops the sides, so it's garbage. You can't do it. What we want in the world is to shoot your fricken' video one time.

Dave: Yeah. Yeah.

Chris: But if you're really doing it perfectly. You really should shoot a wide one for classic YouTube, and then a 9x16 definitely for TikTok, and then maybe a square for the others. It's like that's too hard. That's too many videos.

00:26:48

Dave: Yeah. Well, I know Streamlabs' OBS has a capture thing that they will also capture a Short, basically.

Chris: Hmm...

Dave: It's your camera on top (or however you want to set it up), and then some like 4x3 rectangle -- whatever the math is -- a 16x9 camera on top of whatever rectangle the form is 16x9.

Chris: Yeah.

Dave: I don't trust how it's going to show up, but that's really interesting to me how would that work or could I just...? If I could get a YouTube video and a Short all in just one button press or something, that would be really cool. Again, I'm so armchair on this. I don't actually make this crap, so I should just shut up. [Laughter] But only want to do it if it's easy, too. j

Chris: Yeah.

Dave: That's the whole philosophy of this podcast, right? [Laughter]

Chris: It kind of is.

Dave: I just only want to do it if I've eliminated all technical hurdles.

Chris: There's a trick with that, though. It's still got to be good. You know?

Dave: That's true. Yeah.

Chris: I struggle with that because I'm like, "Oh, I should have slowed down on that one and actually done it a little better.

Dave: Wrote it out.

Chris: Yeah. Because I can't make it my whole day, at the moment. You know?

Dave: I can't make it my whole day. There is this weird plugin I think somebody shared in the Discord that you don't go into DaVinci Resolve, and you don't do your Descript. Although, you could do all those things, too, right?

But it basically just cuts out dead air. So, any time you're--

Chris: Oh...

Dave: --paused, so you can talk as slow as you want and it'll just chop it down.

Chris: Yeah.

Dave: Very interesting because that's the YouTube vibe is, every three seconds, there's a cut. I watched this whole video on how--

Chris: I like the Descript thing, too, where you're like, "Oh, I don't--" I said one second is a little too much, and you could manually cut it, but that's the Descript promise, right? You go in there, and you cut out the words you were saying, and it magically chops it.

Dave: Yeah.

Chris: The UX of making these quick chops is way better.

00:28:51

Dave: Yeah, so I watched this whole thing on a Mark Rober intro, right? I could maybe find the video and put it in the show notes here.

Mark Rober does the science videos. He did that whole, like, "I built a crazy course for my squirrels in the backyard." You know? Like the squirrel Olympics.

Chris: Yeah. Okay, yeah.

Dave: Fat Gus. R.I.P. Fat Gus. [Laughter] No. I love Fat Gus.

Anyway, but apparently he does 40 cuts in the first minute - or something like that.

Chris: Oh, my gosh.

Dave: So, it's almost a cut a second - or something like that. Then there's a key change. He tells exactly what the video is about in the first five seconds, and that's stuff I've never done. That's stuff we don't do really on our videos, like, "Today, we're talking about Web components. Why are they good?" Boom. Or "I had a problem with this something-something."

Chris: Yeah, we're too slow. We're too slow.

Dave: We're too casual. I think, to be a good YouTuber, you need to really just--poof--come out with a bunch.

Chris: Yeah, punch it.

Dave: And then you have exactly what you're... Set expectations, I guess, is sort of the thing. Yeah.

Chris: I do need a catch phrase, too. There's this guy, the YouTube Shorts guy I really like, the one that Jake Archibald turned me onto. It's this Scottish guy that does property reviews of just horrible houses.

Dave: Yeah. Yeah. [Laughter]

Chris: He's like, "Oh, the ... are at it again. Look at this. This wall is three degrees out of plumb. Absolutely shocking."

[Laughter]

Chris: He does this... It works great.

Dave: It's good.

Chris: Then he'll save it, but only once in a while he'll be like, "Look at this! The Shrek swamp in the backyard. Ridiculous." [Laughter] You're like, "I just watched the next one to hope that he says ridiculous in it."

Dave: Oh, yeah. See, that's it. You need the thing. You need... I use too much YouTube. I had to switch off Premium because I'm using too much YouTube. But there's this kid who plays Rainbow Six Siege. It's a video game where you break into a building with a team of five v. five - or something like that.

Chris: Yeah.

Dave: Anyway, this kid's name is Jynxzi. He's full -- What's a positive way to spin this? -- unmedicated would be a good way to put it.

[Laughter]

Dave: He's just hot, but he makes his own language. If he's watching a video, and to say somebody has good aim, he's like, "Good aim."

[Laughter]

Dave: And I'm just like, "He just added an R, like a trilled R." He's like, "Good aim. Bad aim." You're just like--

Chris: Whoa!

Dave: It's fricken' catchy.

Chris: But it works. Yeah.

Dave: It's fricken' catchy. It's fricken' catchy. He also hocks loogies right on his webcam, which I'm not going to do. Sorry.

Chris: Yeah.

Dave: If you're waiting for that video. But he'll just straight-up rocket punch his camera. It has to be a GoPro or something because it just shoots across the room. Anyway--

Chris: [Laughter]

Dave: He's just... anyway.

Chris: Holy cow. That's good.

Dave: He lives with his mom. [Laughter] His mom has got to be chill or just happy.

Chris: Or gone.

Dave: He's raking in the bucks. Yeah. Anyway. Yeah, got to have your thing. What's your thing? You've got to come up with--

Chris: Yeah, well, because that should be crossing your mind immediately. Why would anybody choose to spend these 60 seconds with me, or 10 minutes, or whatever? There should be some reason.

Obviously, you probably have one, but it should be really strong. Be like, "I'm showing you something hilarious or that you've never seen before."

00:32:23

Dave: All right. Here. I'm going to riff. I'm going to riff. Ready?

Chris: Yep.

Dave: Here's one. Fat guy does programming. Hey, Chad!

[Laughter]

Dave: Is that good? Is that good?

Chris: Immediately. Yeah, I would watch the next 30 seconds. Let's see where this is going.

Dave: Swipe to next. Okay, cool. That's good.

Chris: I watched a Wes Bos one this morning. I opened TikTok. I'm just fascinated by the... I've got to keep it at arm's length because it feels a little dangerous to me.

Dave: Yeah.

Chris: Don't read too much into that. I don't even know what I'm saying. Whatever. But Wes does it pretty good. At the beginning, he had to promise that it was going to be a good video. I thought that was a TikTok thing.

He was like, "I'm going to show you three CSS Tips. I promise they don't suck." Or whatever. Because I feel like there's probably so much that he's fighting against that are just stupid.

Dave: Yeah. Yeah.

Chris: Just search for the word CSS on TikTok and see what kind of just stupid crap you get.

Dave: Yeah. Yeah. Oh, I bet it's bad. Yeah, hey. You've got to come up with... You've got to have a hook, right? You need that hook in that first sentence, and so you've got to work on it.

Chris: Yeah.

Dave: One thing I always thought... One series of TikTok videos I thought would be good -- and no one steal this. It's patented. My lawyers... I'm a very litigious person. [Laughter]

All the elements in HTML, starting from the top to the bottom, and you're like, "Anchor element, A tag, also known as A tag. Why is it important? Well, it links pages together."

Then "Here is the accessibility semantics that kind of go with it." Then, boom, you're done. Right?

Go through ever element in HTML and tell you why it exists and why it's important and what matters and why it's "semantic."

Chris: Mm-hmm.

Dave: I feel like it would just be very useful. Then you could get into weird ones like ABBR. Ugh! Don't really use it but you can. And it accepts a title attribute, but everyone turns off titles, so whatever.

Chris: Yeah, that would be--

Dave: Good luck.

Chris: The ABBR would be. You could do that in 60 seconds.

Dave: Yeah.

Chris: It's not like everything has to be fast Twitch these days, but it does... I don't know. I don't blame society. I'm not like, "Oh, everybody doesn't have time anymore. Nobody slows down." They do for the things they care about. I think this fast hit just means it's just forced whoever was making it to make it more useful more quickly. It's not the destruction of society. It's fine.

Dave: I think it kind of is a predator on your dopamine system. Does that make sense?

Chris: Well, it does because you're like, "Look at the ass on this. This is going to be great."

Dave: Yeah.

[Laughter]

Chris: Then you... How about another one? That would be good.

Dave: Yeah. Yeah.

Chris: [Laughter]

Dave: There's a person in a swimsuit on this video that says "Fail." That looks like I'll like it. You know?

Chris: Right, and it's double trouble because she's about to jump off a diving board, too.

Dave: What?! Don't do that!

Chris: It's like, "I get both things?"

[Laughter]

Dave: No, that's the... Yeah. My immediate issue with TikTok is the algorithm figured out I was over 40, and so it just started showing me 40-year-olds, desperate, like ex-youth minister 40-year-olds just craving attention.

[Laughter]

Chris: Oh, that's great.

Dave: So, it was hard. It made it very bad.

Chris: I could see that, if you struggled with that. I'm sure lots of people do. They're like, "Okay. I really need to learn tech so I could do the next video course that I should do, or my homework if I'm in school or something. Or I could open this other app that's way more fun. [Laughter]

Dave: Yeah. Yeah. I could learn something, or--

00:36:19

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Miro. That's miro.com/podcast. Really a tool for teams.

Think of it as an online visual workspace with an infinite canvas that you can do anything. I like how Miro gets out of your way. You can use this space any way that you want to use it, and I like tools like that, that kind of get out of your way.

There are all sorts of templates and stuff that you can pick. But it doesn't matter. However you and your team work, you're going to find it because you can draw in there. You can diagram in there. You can put code blocks in there. You can put text in there and sticky notes and shapes and arrows.

And anything you want to do that helps your team communicate with each other, you can do in Miro. I think that's so strong.

Now, there are all kinds of stuff you can do. Project management, I think, is a big one. But there's also brainstorming, kickoff meetings, and stuff I think Miro is really strong for. And there are a bunch of AI tools built into Miro to help with that.

For example, auto-generating new content, that's in there in case a blank canvas is too much. You just need some help getting started. That's one of the ways that I like to use AI, and that's all built in as well. It can do all kinds of stuff.

It can also go kind of in the other direction where it can summarize stuff. Let's say you have a board that's just full of sticky notes from this great, super productive meeting with people. Lots of ideas, and they're dragging them around, categorizing them, prioritizing them, and stuff. You can select cards and get a summary of what's going on there just instantly. Super cool.

You could generate mind maps. You can have it... If there's a block of code in there, you can have it explain in plain English what that code does. All kinds of great AI features. Really cool.

Find simplicity in your most complex projects with Miro. Your first three Miro boards are free when you sign up today at miro.com/podcast. That's three free boards at miro.com/podcast.

[Banjo music stops]

00:38:22

Chris: Well, I don't know. All right, so here's a tech one.

Dave: Yeah. Hit me.

Chris: I keep thinking about this because it keeps coming up. There was yet another Discord thing that reminded me of it, but it was about :has, the :has selector, I mean, in CSS.

:has -- super powerful stuff. It's on people's mind again. We're going to see more and more of it over the next couple of months because it's dropping in Firefox, and now we get the full green bar.

Dave: Ah...

Chris: Can I use all the ways? Everybody is going to be happy about that.

Dave: I've got a good :has trick, by the way. Keep going. Yeah.

Chris: Do you? Yeah. Well, two or three times, I've seen people pull off what is essentially column highlighting on a table.

Dave: Mm-hmm.

Chris: Row highlighting is easy, right? TR hover. Change the background. Done. Got it.

Dave: Done. We're done. Yeah, yeah.

Chris: Column highlighting is notoriously difficult. It's not that hard in JavaScript because JavaScript can, for example, see that you're hovered over a cell, figure out which index is it, then do a new query selector with that same index, select all the cells, so that same index in all the rows.

Dave: Add a class hover until mouse out.

Chris: Really pretty easy to do.

Dave: Yeah.

Chris: Yeah, exactly, until mouse leaves or I don't know what. I still don't know which is better. Great. Not hard in JavaScript.

It's not the right place for it. You want it in CSS with your... You know. So, :has kind of can do it, like if you write ... that says table has TD Nth child three hover, then select the table, select all the rows, and select all the table cells that are of Nth child three, and you can do it. That works except for you had to hard code that number three into that selector, which is not great because now you have as many selectors as you have columns. If you have 100 columns, you've got to write 100 selectors to get this done.

Dave: Yeah.

Chris: That doesn't feel very CSS to me.

Dave: Yeah. Yeah.

Chris: Here's another one. Then you can do yours in a second. You've got ten elements, and you want them to stagger in.

Dave: Mm-hmm.

Chris: Not that hard in JavaScript. You can do it in CSS with Nth child one, animation delay 0.001 seconds. Nth child two, animation delate 0.002 seconds. Nth child three, animation delay--

Dave: Yeah. Yeah.

Chris: It's the kind of thing you'd write--

Dave: Kind of like a staggered list. Yeah, staggered list show-er. Yeah.

Chris: But what if in CSS you didn't have to go Nth child three? You could just say whatever the index of that element is. The index is what Nth child is it, essentially.

Dave: Yeah. Yeah.

Chris: What if that was just a variable you could use?

Dave: God, that would be sweet.

Chris: Adam Argyle wrote this up in 2019 as a proposal. Lots of positive sentiment about it. Even two weeks ago, there was some fresh talking about it. It just looks nice. You could go animation delay and then use the element index multiplied by 0.01 seconds - or something like that.

Dave: Yeah.

Chris: Now you have one selector, one value. But his thing was, like, "Let's only do it for values," because I think he knows, internally, some stuff and that that would be easier to pull off for values. But values are not selectors.

Dave: Mm-hmm.

Chris: It doesn't help the table thing.

Dave: Yeah.

Chris: Anyway, I just blog posted about it. I got a couple of nodding agreements that moving that to the selector level would be useful, too. I don't know if we'll ever get it.

Dave: Element indexes, it would be cool. Yeah, wouldn't it be cool? I don't know. I'm just trying to think. It's hard to think of examples, but that's a very concrete one, the table row and index. But any time you've said Nth child one, Nth child two, Nth child three, any time you've done that, it would be cool to be like, "Just let me just do this."

Chris: Right.

Dave: Let me just use an index.

Chris: Maybe we'll even get loops in CSS. Maybe that would help it. But you'd have to write that loop infinite times. It's not the same as a loop. Loops are a slightly different use case.

Dave: Well, and a loop is going to give you an index. So, if we get loops out of the deal, that's great. Right? Hopefully.

Chris: Yeah, totally. That would basically solve it, too, because it's not the world's biggest deal to write a loop for 50 table rows, more than you'll ever need.

Dave: Yeah. That could probably actually transpile back a lot easier, right?

Chris: Yeah.

Dave: Auto-prefixer could probably negotiate a CSS for loop backwards.

Chris: Mm-hmm.

Dave: Yeah. That'd be cool.

00:42:37

Chris: What was I going to say about all that? Yeah. Just a really, really, really quicky, somebody wrote to me and said, "Oh, how do you do random blog posts in WordPress?"

I just said, "Oh, I just do a query, and I just pass it this random." In query posts in WordPress, you can just say to order by random.

Dave: Mm-hmm.

Chris: Then I just do a PHP redirect to that thing and publish a page that uses that template really easy, really, really easy. Then this guy writes me. He's like, "You don't have to do any of that. As a URL parameter on all WordPress sites--" this works on ShopTalkShow.com "--just put ?random. Put a URL param of random with no value. Just the word random." Guess what. You go to a random post.

Dave: What?!

Chris: On any WordPress site.

Dave: Wow. I am now on Episode 273. I didn't know that was a feature of WordPress. That seems like--

Chris: [Laughter] Neither did I! I immediately ripped out my custom template and just used that because I'm like, "Why would I have special code that does this when this one fricken' URL param works?"

Dave: Wow!

Chris: Apparently it's contextual, too, so if you're looking at a category, a listing of category and then you put random, you'll get a random one in that category.

Dave: Yeah, like whatever the nested, latest nesting is.

Chris: Yeah. So, any WordPress site. I tried it on old CSS-Tricks. It works the same way. It works on my personal site.

Dave: Maybe I should build it into my Jekyll.

Chris: Yeah.

Dave: I mean it's probably ten lines of JavaScript. Well, no. I need a list of posts.

Chris: That would have to sit on the window or something?

Dave: Yeah.

Chris: Put it in a window object.

Dave: That's expensive. That's what Gatsby did. [Laughter] Oh, boy!

Chris: Maybe there's a clever way you could do it, though, with some kind of selector or something that somehow knows your list of posts because of pagination or something. I don't know how I would do it.

Dave: Yeah, I mean I could go read my--

Chris: You have a page on your site that lists every single URL?

Dave: Yeah, and a site map, too, XML.

Chris: Yeah, so you could hit a JavaScript, could go to that page, get the list of them, pick one at random, and redirect.

Dave: Yeah. Under the posts, yeah. It could.

Chris: Yeah.

Dave: Yeah.

Chris: That's not server-side, but it would still work.

00:44:44

Dave: Speaking of sites, well, this is where my :has thing comes in. I've been fixing up my site a bit, just tinkering. I've been in a mood to work on my site.

Chris: It's your worry stone?

Dave: My worry stone, yeah.

Chris: Is it...?

Dave: And it's been fun, and I've fixed a bunch of issues. I had those little wobbly boxes on my homepage, rough boxes.

Chris: Yeah.

Dave: It was this CSS Houdini thing.

Chris: Yeah, I remember that. Yeah.

Dave: I loved it because I loved the fricken' Web is just rectangles and crap. That's so boring. [Laughter]

Chris: Yeah.

Dave: I'm so bored, so I wanted it to be kind of messed up on purpose.

Chris: Right.

Dave: I like rougher prototypes and webs and whatever, so that's the metaphor I'm embracing. But it did not work in Safari. So, every time I pull up my phone or my iPad, my website just doesn't look the same.

Do websites need to look the same? No, but I kind of was like, "You know what? I'm going to make it work," and so it took months of exploring and prototypes and stuff. But I finally came around to, like, "I'm just going to make an SVG box, and I'm going to wobble the edges like I'm using the Q parameter in a path, which is basically like set a point and bend it."

Chris: Whoa. Really?

Dave: Like arc it. It's for arcing.

Chris: Oh, I thought you were going to say you were going to use that distortion filter.

Dave: Oh, FE matrix. Yeah.

Chris: Yeah.

Dave: I'm not that smart, but I could use that now. Now I could use that.

Chris: Yeah.

Dave: But I just used--

Chris: But how does it work?

Dave: If you have 00 to 100-0, like a line, and I say, "Q," and then it's 50-10 in the middle there, so it's 00 Q 50-10, 100-0, so back to the top.

Chris: You just put a new point in the middle of those two coordinates?

Dave: You put a new point.

Chris: Okay.

Dave: Yeah, and Q will just create--

Chris: Oh, it'll curve between them.

Dave: It'll create a curve.

Chris: Yeah.

Dave: And so, I created a box that curves, and then I can pass it a variable and spit out a new box that has its own custom kind of curving. Then I kind of explode the edges different and mirror the top and bottom.

Chris: That's fricken' clever. Q is just one of those points that takes just two values. There are five different types of curves.

Dave: Yeah. There's C and A, I think, too.

Chris: Yeah.

Dave: So, Q was the simplest one, so I did that, and so then it injects it into a background or border image. Then I use the nine-slice border image thing, which is weird.

Chris: No!

Dave: But that's what all this is doing.

00:47:24

Chris: You used border image for them?

Dave: I used border image for the first time in my life. [Laughter] I still don't understand it. But I used border fricken' image.

Chris: That is absolutely shocking to me. I would have never. I would have been like... If somebody was like, "I think border image is right for this," I'd be like, "Well, I'm out."

Dave: Yeah. Yeah. No, it's the weirdest API for me.

Chris: Why?! Can't you--? Because then it stretches more better?

Dave: Well, it just occupies the border. The box for the element still stays the same, but it just occupies the border. I didn't have to chuck in background. That's sort of why I did it.

Chris: Oh, my God. It does weird stuff on the corners a little bit, too, in a good way.

Dave: Yeah. It kind of tucks in the corners because that's the nine-slice box.

Chris: Yeah, that's what border image... That's the kind of thing that would normally annoy somebody about border image. But in this case, it kind of works.

Dave: It kind of just gives it a little tuck. But I think I could do four background images and go bloop-bloop-bloop-bloop, but I don't know. I'm just kind of embracing it as it is right now.

Eventually, I'd like to allow custom border widths or something. Kind of mess that up, or maybe it goes really weird.

Chris: I was imagining. There's some SVG property that's like, "When this thing scales, don't scale the strokes."

Dave: Right. Right.

Chris: That's how I was somehow picturing this.

Dave: I think you can do that. I'd forget it, though. Then it was midnight, and I was like, "I'm just done." [Laughter]

Chris: Well, it looks good. I'd almost crank it up a little bit.

Dave: A little bit? Okay.

Chris: The wobbliness.

Dave: Yeah.

Chris: That's my critique of it because you can almost... If you don't know it, you could almost just be like, "Ah, they're just rectangles still."

Dave: No. my whole thing is I have the little grunge effect in the background, like this paint splatter. I want people to think their computer is messed up. That's the goal.

Chris: Yeah.

Dave: That's the goal of my website. [Laughter] "Did I sneeze on my computer?" That's the vibe I'm going for.

Chris: Yeah? Nice.

Dave: The old Paravel grunge routine. But I also fixed up my bookshelf, or I added a whole projects page with all these projects going through decades of projects.

Chris: Mm-hmm.

Dave: Got a little teary doing that just because you do a lot of stuff, man.

Chris: Yeah.

Dave: But then on my bookshelf, I used Petite Vue a long time ago. We probably talked about it on the podcast.

Chris: Mm-hmm. How do you get to your bookshelf? Is that a secret?

Dave: About then bookshelf. Yeah.

Chris: Oh, okay.

Dave: I may put it back up in the nav now that I have a bunch of nav there. But now it's just vanilla JavaScript. I watched a Ken Powell video.

Chris: Yeah.

Dave: About filtering with view transitions, and I'm doing that, and it's wonderful. It fixed a few things, but I had this weird thing where--

Chris: Why were you using Vue at all, or the Petite Vue? - I can't remember.

Dave: Petite Vue, it just was easy. It was very declarative, too. It was very, like... I was using Vue for my day-to-day job.

Chris: As like a template, right? So, you didn't have to repeat--

Dave: Yeah, to template the filters, and then I used Vue.

Chris: I see.

Dave: But now I'm just using Ruby to template the filters. Yeah, and now it's just on data attributes and stuff like that. Pretty simple, like ten lines of JavaScript or something.

Chris: Right. So, if you display none some because it's not in that filter, then view transitions will whoosh them into place, right?

00:50:42

Dave: Will whoosh them into place, yeah. And I had a problem with my old blog. Empty years, if you look at books on climate change or something like that, there are books, years I didn't read a single book on climate change. But you just see the year hanging out there.

But I used this :has trick where I said if year has book hidden, hide it. But if year has book not hidden, show it again.

Chris: Pfft.

Dave: If there's a hidden one in there, I hide it. But then if there's one showing, I show it again. And so, it's kind of this weird logic gate that ends up hiding the whole year.

Chris: Dude, I love that.

Dave: It was pretty cool. Fun. I don't know. Fun, right?

Chris: God, I was thinking of empty. That doesn't work, though, because these are--

Dave: Empty sucks.

Chris: Empty sucks.

Dave: Yeah.

Chris: It doesn't work because they're not actually removed from the DOM, right? They're just still sitting there, all these books.

Dave: If you have a single white space character, which you do--

[Laughter]

Dave: If you have a comment, which you do--

Chris: Yeah.

Dave: It's toast. And so, there's--

Chris: Isn't there a better one, though? Isn't there blank - or something - that's a little more tolerant?

Dave: Yeah, that might be Firefox only, though, or something like that.

Chris: Oh, my God. You know what that reminds me of is Ruby. You probably know the answer to this, but I shipped a bug the other day because I did object dot another thing dot empty question mark.

Dave: Mm-hmm.

Chris: But in Ruby, there is a lot of those little--

Dave: Nil. Yeah. Empty.

Chris: Blank is one.

Dave: Blank. Yeah.

Chris: Yeah. And you're like, "Which one?" because it's not intuitive.

Dave: Yeah. They all mean something very different. Yeah.

Chris: Because now I'm getting used to JavaScript. Well, you put a question mark at the end of a thing like that, it will not throw.

Dave: Mm-hmm.

Chris: Because it's optional chaining, and it will just be nil then. Not in Ruby, baby.

Dave: Ruby has a bedtime.

Chris: Ruby will 500 your page for you.

Dave: Good.

Chris: You're welcome.

Dave: Love you, Ruby.

[Laughter]

Dave: It is. That's... I don't know. I actually appreciate 500s. [Laughter] Having worked on a client-side-ish app, we did server rendering but it's still all client-side, right?

Chris: Yeah.

Dave: There's something about a 500 error from a server that says, "Hey, the server tried to do the page. It didn't work out. Sorry about it."

Chris: Right.

Dave: Whereas JavaScript is like, "This little sliver of the page failed, and now the whole page fucking failed."

[Laughter]

Chris: Yeah.

Dave: Sorry. I just crashed the whole app, all of the application, instead of negotiating what I could.

Chris: Right.

Dave: Whereas I feel like the server, too, it'll be like, "Ah, dude. We did 85% of the page made it, dude." I feel like... [Laughter] You know? They're just like, "This page, nah. You just type stuff that made no sense. We didn't get that."

Chris: Right. Well, the chances are that you're going to catch it before it goes out then is higher. Although, in this case, it was not the case.

Dave: Ooh...

Chris: It turned out it was just a rare URL param would crash, and it was annoying. But I'll tell you just mostly because I feel like Sentry should by this show, that those 500s are going right to your Sentry, baby.

Dave: Yeah!

Chris: Then you can see how many people it's affecting, and it will have a nice little stack trace waiting for you there to figure out where to--

Dave: This is... Sentry made a mistake buying Syntax.

[Laughter]

Dave: Let's lay it all out. Wes and Scott are too good. They don't write bugs. Who writes bugs, Chris? We do!

Chris: We do. That's right.

Dave: We go into Sentry and we use Sentry all the time because we write the bugs. Those guys, a little too good.

Chris: Mm-hmm.

Dave: So, they should have hired us. They should have bought us. Oh, man.

Chris: You went premium. You should have went budget. You know?

Dave: Yep. If you want to sell your bug service, you need people who write bugs. You know what I mean?

Chris: [Laughter] Yeah.

Dave: If you're going to sell the bug tracking service, you need people who write bugs.

Chris: You're using it in dev. Do you ever do that? A lot of people, they just turn it off in dev.

Dave: Mistakenly, yes, I have turned it on in dev.

Chris: Yeah?

[Laughter]

Dave: And Slack... Everyone notices.

00:54:52

Chris: We have this weird development-only bug.

Dave: Ooh...

Chris: That Rachel has been trying to fix on our team, and she just cannot trigger it. But me, if I screenshare with her, I cannot trigger the bug.

Dave: Yeah.

Chris: But as soon as we're separated, then I'll be like, "There it is!" So, we made development-only Sentry integrations.

Dave: Nice.

Chris: When I hit the bug, it goes up to Sentry. Then she can go look and see what happened on my machine.

Dave: Does CodePen--? I know you have a bunch of services, but are you in one big Sentry? Does everything go to one, or do you split it up?

Chris: Yeah. it's one big Sentry.

Dave: See, we split it up, and it's helpful.

Chris: I mean there's staging and stuff. It's split up by environment.

Dave: Yeah. Yeah. But we split up our services, so our Lighthouse machine and our Figma machine and stuff like that. They're all on different reporting.

Chris: All right.

Dave: It's helpful because if you get 500 errors suddenly, it's all into one queue. It's not a needle in a haystack.

Chris: I see. Yeah.

Dave: But I do wonder if we should have just kept it in one big funnel.

Chris: Well, now that you say that, I actually didn't set it up, so I don't even 100% know. Now I've lost... I sounded like I knew what I was talking about, but I really don't.

Dave: Oh, well.

Chris: There might be buckets. I don't know if there are buckets.

Dave: There are some. There are a few types of buckets I think they offer, too. Yeah.

Chris: Yeah. I think we probably separate server and client. I know that client is a little too heavy. We don't have it on all the time.

Dave: Hmm...

Chris: It's just too much.

Dave: Yeah. I bet with browser extensions and stuff, people... and with self-inflicted errors.

Chris: Yeah, user authored code. Yeah.

Dave: You guys are just hitting... Yeah. You guys are hitting way too much.

Chris: There's still probably a way to deal with that. I do want to do one question just because it's related to some stuff we were talking about.

Dave: Sure. We are a question-and-answer podcast.

00:56:53

Chris: Patrick O'Neil, Patty O'Neil wrote in. He was asking about... This is a number of shows ago, probably a dozen at least, but we were just talking about you want to show one component instead of the other component. Not just rejigger it with CSS, but it needs different HTML, too.

Dave: Mm-hmm.

Chris: It's too different between, say, mobile and desktop (if you want to use those monikers, which is inescapable, still, after all this time). Couldn't you just do it with CSS? Why not?

Of course, you can. Right? Can you just put the mobile component and the desktop component on the same page, display none one? Swap it out when you hit the breakpoint for the other one? That's a thing you can do, right?

Dave: Yeah.

Chris: You don't have to necessarily mess with JavaScript conditionals and match media and whatnot, right?

Dave: Yeah. Like Bootstrap famously had the hide mobile and show desktop classes, right? Just do that.

You totally can do that. There are two risks. Mentions search engines would be smart enough to work it out. I think they are.

Chris: They're the ones that wouldn't be, I think. If you display none, accessibility should be fine. But what's not is who knows what a bot is doing.

Dave: Yeah, totally. Accessibility should be fine. Yeah, I think you're right. I think a Googlebot, though, may potentially treat that as duplicate content. I would be curious to learn more about that because it used to be an old trick. I'd put white links on my page - or whatever - and that's bad guy SEO stuff.

That would be one risk. I think the bigger risk is if you are shipping both components on the page and you are hitting the 2,000-element limit on the page, which is not a lot of elements. But let's say it's 5,000 now with our nice computers. You're exhausting that limit of elements. Those elements are still in the DOM tree.

Chris: Right.

Dave: They're parsed and active. And if you're in React, they are in your React JS DOM. It's in those components and those elements.

Chris: Yeah, I think you're paying even more in React land, almost certainly.

Dave: Double or quadruple, probably. Yeah.

Chris: Interesting. Yeah. Then if it's content that doesn't matter. I feel like if it's in React then you probably should just do it the React way. [Laughter] But it's like if you're in something else. By the React way, I mean just do a match media then and render one instead of the other. I don't know. Somehow that seems better to me.

Dave: Yeah.

Chris: I think it's most likely that you're swapping out components that aren't content. You don't have card big and card small. Those tend to be simpler somehow. What I'm imagining is a hamburger, a special mobile menu.

Dave: Mm-hmm.

Chris: Those are just some links. Who cares if a bot sees two sets of links? That doesn't matter.

Dave: Right. Right. It depends on how big the page is and what problems you're having. But I think it's generally okay to just ship both. [Laughter] Are you winning HTML purist awards? No, you're not.

Chris: Yeah.

Dave: But are you getting the job done so you can have a nice relaxing weekend? Yes, you are.

Chris: With very little logic, and logic that's at a pretty low-level. CSS is as low as it gets, really, and that's nice.

Dave: Yeah.

Chris: Assuming the people on your team know just as much CSS as React. [Laughter]

Dave: Hmm...

Chris: Which almost feels like a joke these days.

Dave: Yeah.

Chris: Okay. Well, good job. Good show, Dave. Good chitchat. We got one question in. Good for us.

Dave: We got one question on our question-and-answer podcast, so that feels pretty good.

Thank you, dear listeners, for sending in your questions. We'll take more, obviously, and we'll answer one at a time.

[Laughter]

Dave: If you want to follow us for zero updates a month, head over to Mastodon, front-end.social. We're over there at ShopTalk Show. The party is really over in the D-d-d-d-discord, patreon.com/shoptalkshow.

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

Chris: Yeah. very little churn in the Discord.

Dave: Love those people.

Chris: ShopTalkShow.com.