Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about front-end Web design and development. I'm Dave--in the shed--Rupert and with me is Chris--in the booth--Coyier. How are you, Chris?

Chris Coyier: I'm doing pretty good. Thanks, Mr. Dave. Yeah, we just got a regular show, just me and Dave this week. We thought we'd actually get to some questions like we've been promising to for a couple of weeks. Let's see how many we can do.

Dave: Hey. Before we do that--

Chris: Yeah.

Dave: [Laughter]

Chris: Let's do it. Yeah.

Dave: Okay.

Chris: What do you got?

Dave: Here. Right? Got a new camera. It's going great except it turns off. I'll figure that out. [Laughter] But I'm very excited about upping my setup, but there's the Elgato Key Lights, right? There's the key light here.

Chris: I've got one. Yeah.

Dave: The key light, light.

Chris: Uh-huh.

Dave: Which one is the correct one? Is it the key light here or the light?

Chris: I can send you a picture. Well, I don't know. Probably just the light. The air--

Dave: The big one?

Dave: I guess. Well, the big one is just literally bigger, right?

Dave: Yeah. Yeah.

Chris: Yeah. I like mine because, you know what a cool thing about it is that it has the stand that it comes on and the stand you can use for other stuff. I just combined this, so I bought an arm for the stand. I put my camera on that because I used to have two stands, and I just didn't really realize, oh, I could combine these. So, my key light stand is the same as my camera stand.

Dave: Ooh...

Chris: Which is a nice little combo I did there. I'm jealous of your new little camera, though. I have this big beefy DSLR. I don't know why I went that route. I just did. It's been years now. But it really is -- the appeal to yours, it's more of a purpose-built camera for this.

Dave: Yeah. I got the Sony -- this is a birthday present -- Sony ZV-1 vlogger camera, so it's built for vloggers. I know that's wild, but there's an echelon, entry-level echelon of cameras. There's a Cannon one and a Sony one for vlogging. They now can be through a cam link. This one is through USB. I can use it as a webcam, right? They're awesome because they're a high-quality lens.

Chris: You still need the cam link or you don't need the cam link?

Dave: I don't need the cam link, I don't think.

Chris: Oh.

Dave: I need to -- but it shuts off, so maybe I do. But the benefit of these is they're kind of designed for shooting a face from an arm's length away, like classic -- whatever -- [laughter] I live in a house of vloggers. Vlogger kind of lifestyle vlogging. So, it's cool.

Chris: It's going to have clean HDMI output for one thing. It's going to have high-quality audio, of course. It's going to have probably the bokeh background kind of thing because that's what really sets you apart from your average kind of camera thing.

Dave: Yep.

Chris: And it's going to be plugin-able, meaning you're not changing battery and stuff all the time, so a lot of advantages that are really cool. I'm tempted, although it's not cheaper. It's dang near $1,000 camera.

Dave: Yeah. It's like $700 and then for the vlogging kit, which you don't need. There are actually cheaper things. That's what basically gets you an SD card and this fancy remote or whatever. That's another $100.

What I like about it is it's entry-level. If I want the big $3,000 camera, maybe one day I can upgrade to that. But I tell you what. This will probably get me where I want to go.

Chris: I like it. I'm just seeing it for the first time, although I'm looking at you in Around, which the purpose of it is not full super screen high-quality video.

Dave: You're not watching my TV show. Yeah.

Chris: But we'll Zoom and I'll check out. That'd be cool.

Dave: Yeah.

Chris: It seems like an upgrade even from what I have, which is definitely a more expensive setup, but I like the purpose built-ness of what you've got going on. You know what I tried gear-wise?

Dave: Yeah--

Chris: Oh, you have a final thought.

Dave: Well, I was going to say it's like point and shoot size, and I think that's an important thing. It's not the DSLR size. It's like the old -- yeah, oh, I have a camera in my pocket -- kind of size. That's kind of what's cool about it too.

00:04:22

Chris: Yeah. You know there's been a bunch of blog posts about this, but what got me to do it was Seth Godin because I think of Seth as a tech intelligent guy but not a straight-up tech guy. He blogs every single day, which is this incredible achievement. I look up to him in that way. He had a post. Most of his posts are two paragraphs kind of thing.

Dave: Mm-hmm.

Chris: Just like a little boop of a thought and take it or leave it. But I generally find them pretty good. This was one of his more longer-form ones where he's talking about that idea of upping your gear game for video calls in this day and age kind of thing. He decided to go all-in on the teleprompter approach.

Dave: Yeah.

Chris: Meaning you set your camera behind this reflective screen such that we're looking at each other in the eyes when we're talking to each other, and you get to use a high-quality camera to do it.

I find when you're just laptop Zooming with somebody and you have the built-in one that's right at the top of the screen, you kind of already are looking at each other in the eyes. I think it does a pretty good job of that.

Dave: Yeah.

Chris: But the second you move away, like you have now to this fancier camera, you've mounted it elsewhere and the eye contact thing is going to suffer.

Dave: Mm-hmm. Mm-hmm. Yeah.

Chris: Other people don't -- when they're looking at you, it looks like you're looking away and it might lose something. What you've gained in quality you've lost in connection. It's theoretically solvable with this kind of teleprompter idea. I decided to try it because I kind of had that "If Seth Godin can do it, I can do it" kind of vibe. But I did look at what he did.

Dave: Okay. Go for it. Go for it.

Dave: The little device was even a couple hundred bucks, but I really thought this could be a cool thing. I set it up and it really wasn't that hard to set up. The actual teleprompter device has no technology. It's just a reflective thing. You put it on your mount, and you mount the camera behind it. It's like a two-way mirror, like a crime show.

Dave: Mm-hmm.

Chris: The camera can see right through this 45-degree angled glass.

Dave: Yeah.

Chris: But when you're looking at it, it's mostly reflective. Then the idea is you need to put something underneath that 45-degree angled glass to reflect. It needs to be a computer screen.

Dave: Right.

Chris: Fortunately, I have an iPad already, and iPad has that -- I forget what you call it -- AirPlay, but they call it Sidecar, I guess.

Dave: Sidecar.

Chris: Right.

Dave: Yeah.

Chris: That's what I can slip under this thing. Then when I'm on a Zoom call, I can, through Sidecar, drag a Zoom window up to it. You've got to lock the screen rotation and flip it upside down and stuff. But then I'm on a Zoom call and I can be looking right at your eyes, or whatever, and do it. I did it a couple times. Fortunately, I did it right before we were at An Event Apart, and I was having a wrap-up show with Eric Meyer.

I like it. I gave it a thumbs up on that aspect of it that I can be looking right at it. I feel more engaged.

Dave: Mm-hmm. Mm-hmm.

Chris: When I'm looking right at you kind of thing because you are looking at them too. They're looking at you in the eyes, but you're looking at them in the eyes too, and it really does bolster that kind of connection thing.

I would say I took it down already. I can't just have it there all the time because the thing is very bulky. I'm not in Sidecar all day. I don't want my Sidecar just sitting there up in the teleprompter all day long.

Dave: Yeah.

Chris: That's not what I use the iPad for mostly. All in all, I think I ultimately give it kind of a thumbs down.

Dave: Oh, no.

Chris: I don't have a dedicated device to just leave up there to make it kind of a permanent part of my video conferencing thing. That's the piece of technology that I don't like about it.

Dave: I think it's cool that you unlocked it. If you're ever to do a workshop or whatever, maybe on your CSS-Tricks videos, you're kind of more like, "Let's go riff it." But if you're doing hard edits, you could go camera one (I'm talking into the lens camera). Then camera two (I'm just coding at the desk).

Chris: That's exactly what I was thinking. If I have a very important thing come up, let's say I have five interviews in a week, I'll probably set it up so I can do those interviews with the thing.

Dave: Mm-hmm. Yeah.

Chris: It really wasn't that big of a deal to set up and down just because my desk setup has enough space around it that I'm able to do that. I don't have to pull my desk out from the wall and rejigger the world. I have 360 access to the desk, which I like.

Dave: Nah, that's cool.

00:09:13

Chris: Okay. Well, that's kind of gear talk.

Dave: Sorry. Gear talk. People like it. I also like it. I don't know. It's that -- been in the house for a long time. I'm just going to start up in the game. Just going to -- whatever -- pull the trigger on this stuff.

Chris: Mm-hmm. I've been working on my microphone setup. Hopefully, I sound okay now because I'm in the booth.

Dave: Oh, yes. Yes. Yeah.

Chris: I have the Shure SM7B in here. It goes through all these devices, the cloud lifter and the DBX and all this stuff.

Dave: Mm-hmm. Mm-hmm. Mm-hmm.

Chris: I like that setup, but I'm starting to get the itch again for what else I can do. The unfortunate thing is that I replicated the same exact thing on my desk and it's so different. Echo is a part of it, but almost have the echo solved, I think. I have so much sound crap I've bought and put over the walls tastefully. I even have -- early next week -- ceiling people coming in. This is ridiculous.

Dave: Wow!

Chris: But I did it because the ceiling is reflective, too. They're going to cover the whole ceiling in sound blocking stuff.

Dave: Nice! Nice.

Chris: Okay, so echo is done, right? It's still just not that good. I just need to do it and, of course, now I'm asking everybody for YouTube recommendations today in the [techno voice] Discord. Everybody has got good stuff, but a couple of them were gearhead channels. I'm excited to watch some wrecks just so I can try something different. Maybe I'll sell this audio setup and just start fresh with something. I think that might be what I need to kind of finally solve this at-the-desk audio situation.

Dave: Yeah. Especially with analog audio, which I know you have at the desk. Sometimes something is weird. You don't know if it's your little DBX thing or if it's a defect.

Chris: Is it the mic itself? Is it a cable? Is it the audio interface? Yeah, I don't know.

Dave: With my USB B cable, which is the big chunky boy, square boy, I have one that's bad. I don't know which one because I forget to label it. It'd gold, too. You think, oh, the golds are the good ones, right? But this one, it picks up all kinds of interference. I can hear a static over a USB on a USB mic, which you shouldn't be able to do, right? But it happens. Yeah, with your mic cable it could just be -- I don't know -- it passed by your Bluetooth and that's what wrecked it. I don't know.

Chris: Yeah. I've solved little problems like this before. I have a mouse. I use that Logitech ergonomic mouse that I like. Over the years, I've learned that I cannot plug it into a USB hub with all my other USB stuff because it interferes and I just don't get as good of a connection to it. So, I have this special dongle that I plug into a special place that's not by any other USB stuff, and it's worked great for me.

Dave: Wow.

Chris: Every once in a while, I'm like, "Oh, surely technology has evolved. That's not a thing anymore. How can it be? My God." Then I'll take off the dongle, and I'll plug it in somewhere a little more tenable. Then the connection sucks again. I'm like, eh, going back to the dongle.

Dave: Sorry. We've got the seven-foot wire going up to the ceiling.

Chris: Yeah.

Dave: No. Oh, well. I'm thinking my next thing might be monitors. Chris, we'll get into that some other day.

Chris: Yeah. Yeah.

Dave: That's a big change.

Chris: Hmm. I don't know. I even announced what I did monitor-wise. We'll save it.

Dave: We could do a monitor show.

Chris: I want a chunky boy. Tyler Dumphrey writes in.

Dave: Yep.

00:12:59

Chris: "What build tools should I learn or not bother with? I'm regrettably starting to dive into dev tools more and more." Regrettably? Come on, Tyler. This is the fun part.

"I prefer vanilla JavaScript, vanilla HTML, vanilla CSS. You know. However, working with WordPress blocks and another large JavaScript project have made it necessary for me to use dev tools that I find a bit complicated and intimidating. Plus, I'm wanting to dig more into JAMstack stuff and build more custom WordPress blocks." Yadda-yadda. "What's the build tool gang? What should I start with: Babel, Gulp?" That's what he's saying here.

Babel is not really a build tool. It's something you'd put in a build tool. Gulp, people use it as a build tool. Technically, a task runner, but the most--

I'd say, go listen to our next-gen build tool show, Tyler. We had -- who was it -- Fred and Jason on to talk about their two.

Dave: Yep.

Chris: Then later we had Evan on to talk about Vite.

Dave: Mm-hmm.

Chris: Those are ready, Tyler. I don't know that there's a Vite WordPress block builder yet, but there probably will be.

Dave: Mm-hmm. Mm-hmm.

Chris: Vite is hot. But so is Snowpack and so are these other ones. I'd say that they're -- you know, what's hot? Is Webpack still hot, Dave? Yeah. If you download -- in fact, if you're using any of these WordPress block builder things, the two that I know of both are just Webpack deals.

Dave: Well, I was going to say, if WordPress is sort of your wheelhouse and blocks are kind of showing up on your work plate, Webpack is good. What is that WordPress block, like create-guten-p-block?

Chris: There's create-guten-block, which I like that one.

Dave: Create-guten-block.

Chris: But the creator of this has kind of been like, "Ah, I should update that, but we'll see if I get around to it."

Dave: Uh-huh.

Chris: But I thought they did a tremendously good job with it, but then WordPress themselves is like, "Uh, we're going to offer that, actually." So, I don't think that author has any incentive to maintain that one anymore. The way that the WordPress people ship it, I think, is through WP-CLI.

Dave: Mm-hmm.

Chris: Which is a scaffolding-ish tool.

Dave: Okay.

Chris: I didn't realize that was like a core thing, but yeah. I guess it is. So, there's some CLI command that you're like, "Make new block, please."

Dave: Okay.

Chris: When you do that, you get a little build process for free.

Dave: You get a little Webpack-y in there. You get a Webpack config.js.

Chris: Right. It's not going to be a Vite thing. It's not going to be a Snowpack thing. It's going to be a Webpack thing and that's just reality for a lot of projects.

00:15:37

Dave: I would say that's the best place to start because you are familiar with blocks. You're familiar with what they do.

Chris: Yeah.

Dave: I know what you're thinking. You want a but's block that pull up my CodePen profile header and that's what is the most important block to build. I think you could build that and then look at the Webpack and kind of see what it's doing because you kind of have an idea. It's going to grab some JavaScript or it's going to take an entry file. Then it's going to try to bundle that all together. Then it's going to probably label an output file.

For me, Webpack is zero percent what is it doing. Well, I don't know. Fifty percent what is it doing and 50%, okay, what words do I have to type to make it do the job I want it to do? Webpack comes with this idea of transforms where you transform your code.

Chris: Right.

Dave: That's where Babel kind of comes in. That's the prototypical transformer. It turns your new code into old code, kind of.

Chris: Yeah, but Webpack is the thing that's actually going to process your imports together and such.

Dave: Yeah, so it's going to do all the bundling and stitching and splitting and everything that you need, so I think that's a great place.

Chris: It is. I like the idea, what you said that it's got a very explicit import and export when you're working with a block.

Dave: Mm-hmm.

Chris: You're like, I probably need a blocks.js file that I'm going to end up enqueuing in WordPress because that's how blocks work. Webpack is very -- what's my entry point file? What's my export bundle file?

Dave: Mm-hmm.

Chris: That works. That mental model is the right one in this case. You wouldn't really use Parcel because Parcel assumes it's looking at an HTML file, which you won't really have here.

Dave: Yeah. Yeah. Parcel, I mean, yeah, can you just point Parcel at localhost:8888? Yeah, maybe you can. It's just going to be weird. It's going to be a little different.

Chris: Yeah. And you know that you need JSX because these blocks are React and such. Because you need that, you're not right. I know you say you like vanilla JS. Who doesn't? Vanilla JS is great. We all love it. But you need something to transform your JSX in this world. You just do, so you need some kind of build, and the Webpack Babel way is probably fine.

Dave: But do the Webpack thing. Just make the cool but's block. Then, immediately, take that code. Copy/paste the component itself, and then just "Hello, World!" Vite. We were talking about this in the [techno voice] Discord, I think, recently.

Once you've used Webpack and you understand, oh, it's like generating these files and stuff, okay. You understand the input and the output. You take it over to Vite and it's just like, "Oh, my goodness. It just does what I want. It's so lightweight. It is very, very, very fast." That would be a great place to start.

If you want to skip over the whole Webpack era, I don't think you can ignore it because there's so much code using it. But if you want to skip over that esbuild by itself is cool, but I think Vite gets you from just raw esbuild to, like, "Oh, it has a server and I can use it."

Chris: Yeah. Mm-hmm.

Dave: It's really, really nice for writing code.

Chris: Anyway, we've talked about this a lot on the show. Good luck, Tyler. Don't be afraid of this. You can do it. In fact, I think owning this a little bit in your brain is pretty key to have these days.

Dave: I think if you're going to be a WordPress developer, just by the nature of where that ship is steering, you've got to know this stuff.

Chris: You do, and you're going to be really good at it and sought after. Oh, my God, is WordPress development different these days. Now, they're shipping this full site editing thing. I think it's really cool. You can build your entire site with blocks. You're not screwing around with any of these, any PHP componentry. You just block up the whole damn thing. Your footer is a block. Your sidebar is a block. Your menu is a block. Every damn thing is a block. That's great. The fact that blocks can just be anything and are so customizable and WordPress is saying, "Developers, please take these things. Own these things. Build these things."

Dave: Mm-hmm.

Chris: Then you're building the whole site that way. That's just different. [Laughter]

Dave: Mm-hmm.

Chris: That's just different.

Dave: Yeah.

Chris: Anyway, I like the idea of blocks that then -- like a WPQuery block. That unlocks a lot of worlds too. That's a lot of where I still -- just two or three times this week, I ended up in that world a little bit.

Dave: Yes.

Chris: I needed a tags page and ended up running a query for that. Anyway, if you could just have a block, it would probably be a core block. They would do well to deliver this to us. Then you use dropdowns and stuff to configure the exact query you want to run, and it shows that. That'll be a gamechanger too, I think.

Dave: Oh, yeah. Show me the last ten posts about pizza. Done. Everyone needs something like that.

Chris: Yeah, and make sure the pagination is in there. Then the block that you show for each pizza, that's this other block.

00:21:19

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Treehouse. You know Treehouse. Follow the link in the show notes, but it's TeamTreehouse.com with the cute little frog hand as a logo. Treehouse is awesome.

You can go there and get a seven-day free trial of the program. You sign up, and then you have access to this huge library of things to learn that work for people from all backgrounds and all skill levels. The point is to learn code or to learn a new programming language. It's all on-demand, so it's video courses in all kinds of topics and subjects.

They really help you get through them. It's not like, "Okay, here you go. Learn." It's kind of gamified with quizzes and code challenges and workspaces to help you literally do the code, pass the challenges, make sure you're learning what you need to learn, which is great.

They have this thing called tech degree, the Treehouse Tech Degree. It's like a boot camp, if you're familiar with that word. I'm going to go to boot camp, and then I'm going to graduate and get a job. It's like that. It's just a fraction of the cost of traditional boot camps, and there's none of this, "Just do it for free and then we'll take a chunk of your money that you earn from your real job later," like an income share agreement. None of that stuff going on, so don't worry about it, if you are.

A million people have finished Treehouse. That's outstanding and really cool. You'll be in good company, so go to TreamTreehouse.com to start your subscription and start learning code today.

[Banjo music stops]

00:23:04

Chris: All right. All right. Tyler, good luck. Good luck. In fact, while we're in WordPress land for a minute, maybe we'll divert to the social media images talk. I've been a little obsessed with this for years and obsessed in a way because I've never nailed it. So, not obsessed like I'm awesome at this and I want to show the world, but obsessed in, like, why can I never get this to work the way I want it to? The idea being you have a website and you want good -- what do they call them -- meta images or open graph or whatever.

Dave: Yeah. The Twitter card.

Chris: Right.

Dave: The image that shows up on your Twitter or Facebook post.

Chris: Surely, you live this life more. It's important for clients, right? Of course, even they'll be thinking about it and asking for this. What do people see when they tweet my link? If you do nothing, they're going to see nothing. It's just going to be a link. That's just like leaving money on the table.

Dave: Yeah.

Chris: Because in Twitter land, if you paste a link, it's going to look for that open graph Twitter card. You can put a big, beefy, enticing image there. It's like being a YouTube star and just not caring about your thumbnails.

Dave: Yeah.

Chris: Nobody does it. You've got to care about your thumbnails.

Dave: You could put the full first paragraph, the whole lead inside the image.

Chris: Right.

Dave: This is what kind of bothers me, truth be told. But height wins on social media. Height is hierarchy. The taller your post, the more engagement it gets. [Laughter] I hate it, but that's the truth.

Chris: There's even physics behind it. It's like clickable area.

Dave: Yeah. Yeah.

Chris: Yeah, anyway. Of course, if you're going to build a conference page or something, you should have a hand-designed, beautiful, custom card. You put it up. Any time somebody shares the conference, it's going to be accompanied by this beautiful social media card.

It might be the number one most viewed piece of digital design that people see related to your conference. It might be the brand.

Dave: Nah, I would wonder if you tracked image impressions on those images. I've got to think that would be--

Chris: Yeah, can hammer it.

Dave: It would be 20x what your clickthrough rate to the actual page is.

Chris: Right.

Dave: That's what my Twitter posts are. They're literally 1/50th of the views, or whatever, or somebody actually clicked.

Chris: Right. That's for a landing page or something. Fine. But then there's this dynamic content style website, which is almost more common. DaveRupert.com, your blog.

Dave: Mm-hmm.

Chris: You make a blog post. The blog post has a URL. It's about a beautiful, science fiction film, or something.

Dave: Mm-hmm.

00:25:55

Chris: That blog post probably deserves its own custom media image. I've been thinking about it today because, just farting around on Twitter the last few weeks, it seems to me this is new, unless I'm just totally out of my mind. I haven't heard anybody talking about it. If you see somebody post a GitHub link, GitHub, to me, looks like they have new cards.

Dave: That's true. Yeah.

Chris: They look good.

Dave: They generate these cool cards with your avatar. You can actually configure your image, like cards in GitHub, so you can dress it up or whatever.

Chris: It'll have your avatar on it. It'll have the name of the repo. It'll have the issue title, if you're posting an issue or something. They look really good, just like your blog post ones should look good. But is 11ty going to help you with that? Not really. You could wire something up, but you're kind of on your own here. It's a little bit of a wild west for the best way to handle this.

Hand-doing it, I think, is the best possible way for the best bang for your buck. Dave Rupert, you could, in your front matter, have a thing that says, "Custom meta card." Hand design it in Figma or whatever. Upload it somewhere.

Dave: I do that.

Chris: You do?

Dave: Occasionally. But it's a lot of work for me.

Chris: Oh, right. I dreamed of it in my last redesign. I went in Figma. I made a template. It's got a beautiful place for the avatar. I grab a blockquote from the article and put it in there. I did it like three times because I just don't--

Dave: Yeah. Here. I'll tell you exactly how I'm going to do it.

Chris: Yeah. You can do a "find in project."

Dave: Yeah. Yeah. Image colon. That's all it'll take. Keep going.

Chris: Automating it to some degree has got to be done. That's why I'm obsessed with it. I dabbled a little bit at conferences.css-tricks.com. I wanted to get this done so if somebody tweeted a link to one of the individual conferences that it would have a custom thing. I got in my mind that SVG was the way to do this because SVG has this compositional aspect to it, right? I can say, "Here are the dimensions of the SVG."

I can make the dimensions exactly match the pixel dimensions that a website like Twitter wants. Then I can place things very explicitly where they're going to be on that SVG, get the SVG just right, but the SVG will render text and all that stuff. So, I can put dynamic content in there. But SVG won't work in the metatag. That's not an acceptable format. So then, in my little 11ty build process, I just run a little thing that is called SVG to PNG, or something.

Dave: Okay.

Chris: It just makes the PNG version of it. It works great. Then I forgot to actually wire it up to put the metatag in the head.

Dave: Oh...

Chris: It does all the work of making these headers, but they're not that cool and nobody shares these URLs anyway, so I kind of don't care that much. But imagine a site like CSS-Tricks. We have to have good ones. It's, like I said, leaving money on the table to not do it. What we do is just pick something.

Dave: Mm-hmm. Mm-hmm.

00:29:08

Chris: WordPress will help you with it in that having a featured image in a blog post is a built-in feature of WordPress. If you have one, and we do have one because it's just part of our editorial flow, that just becomes the social media card for the post. That's fine, but it doesn't really solve automation. You know what I mean? You've still got to do it.

It is possible to automate it, though, and I have a bunch of links I can put in the show notes. People have done a beautiful job of this in the past. Imagine, Dave Rupert, where you put a block quote in your front matter, and you hand design a template for a social media card.

Dave: Yeah.

Chris: Then it gets converted and added in all the right ways such that the end result of it is very dynamic. It's still cool. But imagine then doing me on CSS-Tricks. I'll have the author name on that. I'll have the author avatar on it. I'll have the date it was published. I'll have a chosen block quote. Maybe I'll have five different templates I can pick from.

I feel like WordPress is really well suited to do this. I was like, "I should get around to doing that someday," and never did. Then just today found, through the [techno voice] Discord, a link to a project that was doing it.

I just downloaded it. I haven't even installed it yet, but I'll report back. But it looks very promising. It looks like that. It looks like you can templatize your own versions of this, and I think that's the way to go. I think it's under talked about.

Dave: No, totally. That automation is kind of the key piece I'm interested in. I know people do it as like a build process thing. I know there's Gatsby and 11ty plugins.

Chris: Yeah.

Dave: I saw Wes Bos tweeting about it. He just changed his, or something, and did like 1,500 posts. It took 29 minutes or something and his build process actually stalled out. That's a rip. Too bad. But I would like to figure out something that's very easy to do. Just kind of a pre--

Chris: It's too bad SVG isn't supported. Then you wouldn't have to pre-build them. They could be dynamically built. You wouldn't have to--

Dave: Well, that's what I'm wondering about these SVG to PNG kind of things. I don't know.

Chris: I mean it could be a cloud function that runs it in a Lambda so that you just hit the Lambda and it barfs out the PNG but it's been dynamic the whole time.

Dave: Yeah. I don't know.

Chris: Maybe...

Dave: Because you could even -- I mean it could just be pre-commit hook or something that chucks it in there. Yeah.

Chris: I think prebuilding them is going to be a pain in your ass forever. The Wes Bos route, I would think that he's starting to regret it.

Dave: Yeah. Yeah, because I mean you almost want it to be -- like you were saying, an SVG is another collection that builds out. Then something converts the -- I mean dream world, these things support SVG. But that's probably not going to happen.

Chris: Yeah. Don't you like the idea of a little bit of an editorial step too? What about a really long blog post title or an author URL that's super long or something? I like the idea of having it be easy to do but having a last-minute check.

Dave: Mm-hmm.

Chris: Be like, oh, does the social media card look good, or do I need to pick a different template or do a tweak to it? Then if you have to do the tweak, you do it, and then you lock it in time. Then you never have to think about that one again. But if you have 750 of them to generate, or 7,500 of them to generate, you have no opportunity to editorially check them.

Dave: Yeah. That's the other trick. Maybe you have -- I don't know.

Chris: How does GitHub do it? Do you think they're adjusting font size a little bit for really long repo names? I haven't looked at it deep enough.

Dave: Yeah. Maybe they can or they text truncate or something. I don't know. Maybe we could put that to the test. Yeah, so I have 275 posts and I've maybe done it 27 times, a custom image for my post.

Chris: Yeah, so you're leaving 725 posts just out to dry on social media, man.

Dave: Yeah. I'm just dead on social media because it's funny, too. It's that quintessential thing where you put your heart and soul into the post and you tweet it out. You're like, "That was a good post, man." Then you're just sitting back and it's like seven likes.

Chris: Yeah.

Dave: You're like, "Man, that was a good post for seven likes. What's going on?" Then the post about, whatever, farts, jQuery fart machine gets whatever, 500 likes. The Internet doesn't make sense.

Chris: I would suspect there's already some kind of law of the Internet about that. But if there's not, we should coin one.

Dave: Yeah.

Chris: Because I find that to be highly true as well. If I work for weeks and weeks and weeks on something--

Dave: The inverse.

Chris: Yeah.

Dave: Inverse thermodynamic like dynamics of blogging.

Chris: I opened up Twitter and it was Wes's tweet about his build time choking out. I think it's algorithms.

Dave: That's a long time to wait. Then it choked.

Chris: Yeah.

Dave: He was right at the end, too.

Chris: But it didn't choke on his local machine. It choked on the Netlify build.

Dave: Yeah.

Chris: You're a little more helpless to deal with then. Womp-womp.

Dave: Yeah.

Chris: Sorry, bud.

Dave: Yeah. It hurts. It hurts.

00:34:51

Chris: What was I going to say? Should we do another question?

Dave: Another question before we only turn into a one-question show. Stu Grant writes in. "Is there a way of ensuring that a child element respects the border-radius clipping of its parent without using overflow hidden or nested border-radius? Overflow hidden has undesirable results for things like tooltips, which might render part of the way around the container and be cut off. I'm trying to avoid Nth child, as we don't split our cards into segments every time. Surely this is a solved problem or at least a property that will make this happen.

Chris: You know that if you have a parent with border-radius ten pixels on it and then a child that there is no margin or there's no padding on the inside of that element. You put a div and you put background black on it or something, it won't respect that border-radius of the parent. It'll just hang right out.

Dave: Mm-hmm.

Chris: A lot of times what people do is just do overflow hidden and then that rounded radius of the parent will apply to everything. Stu is saying, "Yeah, okay, fine, but I can't always rely on overflow hidden because what if this thing has tooltips in it or something," which is a perfectly legit thing. I find in my ramblings that if the child element butts right up against the parent, you can just make it also border-radius ten pixels. Then it's fine.

Dave: Yeah.

Chris: But you might have to do border top right ten pixels, or whatever, if the whole thing doesn't have the same pixel rate. But as soon as you're set inset a little bit, it won't be ten pixels anymore. In fact, that will look wrong. It will look weird. You'll probably have to do border-radius eight pixels or nine, or something, based on that padding. I'm sure there's math that makes it work, but I've always only eyeballed it.

But the idea is if there's ten pixels of padding and they're both border-radius ten pixels, it won't look uniform. It'll look weird. But it doesn't sound like you have that gap. You're just saying, "I just want the child to have the same border-radius as the parent." In that case, I think you could do border-radius inherit, couldn't you? It'll just suck it from the parent.

Dave: Maybe. I don't know if border-radius shoots down, but it might.

Chris: Well, it won't by default. But if you ask it to, it probably would. I wonder if it even does it corner by corner. I'll test it quick. You do another question. [Laughter]

Dave: Well, I was going to say I felt like there was -- oh, yes. Somebody was saying border-radius inherit. I thought there was a way to do this with a property. Box sizing or something like that that made this kind of happen. But I don't know. I think it's just maybe not -- I'm just live googling this. It isn't helpful. But I was hoping you would know that, I guess, Chris. [Laughter] Overflow is sort of the way to do it.

Chris: Yeah. Just overflow.

Dave: I think at this point you have to ask yourself how important is the border-radius. Is it 100% important? Where it gets you in trouble is when an image is the top of the thing at the card. I sort of assume it's like a card UI. But if you have an image as the top thing, that's where it gets you in trouble because the image pokes out.

Chris: Yeah. Right. Any background would kind of poke out here.

Dave: Yeah.

Chris: I'm confirming that border-radius inherit will pick it up. Even if the parent was border-radius ten pixels and you only wanted the top right corner to grab that, you could go border top right radius inherit and it will grab it.

Dave: Okay.

Chris: You're managing it in the same place, although I'm looking at a Pen right now where I'm playing with it and I can see. I have two different colors on the parent and the child. I can see the parent poking out a little bit, even though there is no padding or anything. It's just like a rendering bug or something.

Dave: Well, that's the problem with border-radius. It's like you go in. The science actually changes. If the outer one has a border-radius of three pixels and the inner one has a border-radius of three pixels, they won't match up exactly just because there's some math on it.

Chris: But only if there's padding on the parent one, right?

Dave: Hmm.

Chris: Or does that work even with the child? I would think if they occupied the exact same space that it would match.

Dave: Yeah.

Chris: But I think you're right here because I'm looking at it with my very own eyes and I can see the parent sticking out a little bit. Boo!

Dave: Yea. No, it's a little bit tough. That's the nature of borders and stuff because borders is outside of the box, actually. Yikes!

Chris: Ack! Ack! Rob Lindsey--

Dave: Sorry. I don't have a good answer, Stu. Sorry. Okay.

Chris: Just overflow it and tell your company you can't do tooltips.

00:40:09

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Jetpack Boost. Jetpack Boost is by the Jetpack gang, the plugin for your WordPress sites, but this is a totally standalone plugin. You can just install this if you want to, and it's just the performance features of Jetpack broken off into this plugin, but it adds some new ones that you don't get from just the core Jetpack plugin.

It does three things. It optimizes CSS loading, defers nonessential JavaScript, and does lazy image loading. Lazy image loading, I think, is the only one that was in the core Jetpack plugin and has now moved over to this one. A lot of bang for your buck there.

It's just like any image that's below the fold that a user landing on your website, if there's an image that they don't see because they haven't scrolled to it yet, it's not loaded at all, which is amazing for performance and bandwidth saving reasons. There's no reason you shouldn't be doing that.

And there's really no reason you shouldn't be doing these other two as well. The nonessential JavaScript is like the plugin figures out if there's JavaScript that's being loaded that could be loaded later (deferred) that it just is going to do that, and that's tremendous for performance because it doesn't hurt the page functionality. It just loads it later.

But the one I'm most impressed with is the optimized CSS loading one. It does critical CSS, which is that thing that's again above the fold. Whatever the user sees, what's the minimum amount of CSS to style just that stuff? That's loaded inline into the head of your document so it's just there immediately as the page loads. The rest of your CSS is deferred, like the deferred JavaScript is, and it loads later. Meaning, you don't notice any difference in how the page loads because everything you can see is styled already. But then pretty quickly afterward, the rest of the styles are loaded. K

By the time you're scrolling, you probably won't notice anything. Tremendous for performance because CSS is like a render-blocking thing, and very hard to pull off. The way that it does it is just magic. It just figures it out for you. It takes a little while to run whatever magic it's doing behind the scenes to do it, but then it just does it.

For the first time in my life, I have critical CSS on CSS-Tricks thanks to this plugin. High five and thanks for the support, Jetpack.

[Banjo music stops]

00:42:40

Chris: This is asking Dave specifically because he used to be a Windows guy, but he's saying, "Dave, is there any--? What if you have to debug Safari in Windows?"

Dave: Uh... You just cry.

Chris: Yeah.

Dave: You ask your coworkers to give you a screenshot.

Chris: There's just no -- you can't do it, right? Can you emulate OSX on Windows somehow?

Dave: You could use an emulator.

Chris: Yeah. I would just use crossbrowsertesting.com.

Dave: Cross-browser testing would be a way. There's a new tool by Kenneth Auchenberg called inspect.dev - Inspect. Kenneth is a smart person and figured out how to juke the permissions. [Laughter] I mean that in the nicest way. I think you have to install--

Chris: Wow!

Dave: I could be wrong. I think you have to install iTunes just to get the plugin worked, the proxy stuff working.

Chris: I have not seen this. This is cool. A new developer tool for Mac, OS, and Windows to inspect and debug mobile Web applications and websites on iOS devices.

You could have a Windows machine fire this thing up, plug in your iPhone, and debug on it even though all you had was Windows.

Dave: Yeah.

Chris: Wow.

Dave: There is a way. This is kind of the way around it, I think, right now. Your mileage may vary, but it's basically a VS Code environment, but it's got dev tools kind of slapped in there.

Chris: Yeah.

Dave: Just your Chrome dev tools.

Chris: What if you don't even have an iOS device though?

Dave: If you don't have an iOS device, then you're kind of hosed. Yeah, if you just don't have -- what's happening, the problems is coming out of the iOS device. This would actually be a good tool if you're on Mac because you have to use Safari's dev tools to inspect your iOS devices.

Chris: Right.

Dave: Much love to the Safari team, although I've got some questions.

Chris: Oh, is this Chrome dev tools, not Safari dev tools?

Dave: Yeah, Chrome dev tools.

Chris: Oh, sick. Really? This is--

Dave: That's a bonus. You know what I mean? Because Safari dev tools are just weird.

Chris: Yeah. I hate to say it, but Chrome dev tools are way good.

Dave: Yeah. Safari dev tools just got weird. Yeah, I would super recommend Inspect. I guess it's coming soon, Inspect over wi-fi, so maybe you don't even have to plug in your device too, so that could be kind of cool. To debug iOS, you don't necessarily need an iPhone. You can just get an iPod Touch or whatever, if they still sell those. Do they still sell those? I think they do. Just have that by your desk. That could be kind of a cool way to just get what you need there.

00:45:33

Dave: All right. Next question from Tom Segura. All of my professional and personal websites run on Drupal. As a new listener, I tuned into several of your episodes with CMS in the title expecting to hear about Drupal but was surprised to find it wasn't discussed. Why not? What are your thoughts on the state of Drupal in 2021? Love the show. Thanks for reading."

Chris: Hey, it's a blind spot for me, I'll tell you, Tom. I have never ever built a Drupal site ever. Never once, so that's why.

Dave: Yeah. Nah, I think for me, too, I do know people who are in Drupal shops and stuff like that. There's a shop in Austin called Four Kitchens. They did a lot of Drupal stuff and kind of worked with them and new people from there. But I just never opened the box and was like, "Yes, let's roll. Let's do this." In fact, I've been on a couple of projects, like, "Get us off of Drupal," and that was like, "Oh, okay. Let me help you with that."

Chris: I'm sure it's flippin' huge, though, right? Didn't the government like it for a long time? I know there's more and more government websites on WordPress, but it used to be the government darling for a minute.

Dave: Yeah. A lot of higher ed and a lot of government used Drupal, so I think it is very, like, still a workhorse and a very good CMS. I think there was -- for me, there's a bit of a hiccup in between Drupal 7 and 8 where I kind of lost interest just because it seemed like they're having trouble getting it out. But that was me.

Chris: The little blobs on their homepage are sweet. Good job, Drupal. I think these are cool.

Dave: Yeah. I think, too, most of the people I know are kind of moving away from it, so I guess maybe that colors my feelings. But I know there are people that do Drupal, so maybe we're just not giving it enough justice here.

Chris: Maybe. I'm just going to tell you it's a blind spot for me. I don't even know enough to speak intelligently about it, so cannot do it.

00:47:44

Chris: You know what I did, just because now I'm thinking about CMSs again? At one point, I built my own code block. Can we just stop calling it Gutenberg now because it's not that anymore? It's the block editor.

Dave: Block editor.

Chris: I made a custom block. WordPress already has a code-block block in it that it ships with.

Dave: Mm-hmm.

Chris: You just select it or you just do triple backticks and it pops open, or whatever. But there is nothing to it. It just makes the font have a pre-code tag around it and that's it.

Dave: Okay.

Chris: Not that useful, although I do appreciate how ... it does escape code for you but does that whether you're in the block or not. I like being able to type open bracket div close bracket and know that I'm not going to break my website.

Dave: Mm-hmm. Mm-hmm.

Chris: In old WordPress, you would literally just break it. Now you'd have an unclosed div tag and your entire website would be hosed.

Dave: Sideways, yeah.

Chris: Yep.

Dave: Yeah.

Chris: I like that, but I built my own because I have a history on CSS-Tricks of the way that the front-end expects the attributes and stuff to be on those pre-code blocks. I set it up a long time ago. I can't convert every single one of them. Maybe somebody craftier with MySQL could do it. In fact, I have more and more experience with that, so I could probably fix it now. But sometimes my brain is just like, "You know what? There are 8,000 pieces of content on this site. This is the way we've always done pre-code blocks with this set of classes and these other attributes. I'm just going to keep it like that." So, I made the block to match how we've always done it before.

Dave: Mm-hmm. Mm-hmm.

Chris: But I figure if I do that, then I can have a little more control. That way when you're crafting a block of code in a blog post, I have this sidebar of options I can pick because that's what the block editor does. I can pick what language it is from a dropdown menu. I don't have to write it in HTML.

Dave: Yeah. Yeah, yeah.

Chris: I get to pick it. It's a nice little UI. Now I have all this control because it's a React component, so I can do whatever the hell I want in the React component. So, I do fancy stuff, like I duplicated it and ran it through PrismJS so I could see a code, a syntax highlighted version of it, because why not? I would like to verify that the syntax highlighting is working properly for it, so I did it.

There's a bunch of other. I can highlight particular lines by just entering a number. It's really a clever little thing.

But what I couldn't do -- what I wanted is, you know like you're on CodePen. You just are writing code and it's syntax highlighted as you write it. That's just how Code Mirror works.

Dave: Yeah. Yeah.

Chris: That's how the Ace Editor works. It's like maybe I should be using that because then the experience of writing the code block would have all the niceties of a code editor, but I didn't go quite that far because that's just a step too far for me. It's a little more technical debt than I was ready to handle.

Dave: Yeah. The whole Code Mirror inside your Gutenberg, or whatever.

Chris: Yeah, exactly.

Dave: Yeah. Yeah.

Chris: What kind of--? What am I signing up here? It's not exactly an iframe, you know, so who knows what you're going to get. But I was already using Prism anyway, so I like it when the code editors match. In fact, I once removed Prism from CodePen and just made no matter where we're outputting code, even if it's on the blog, on the CodePen blog, Code Mirror is what syntax highlights it just so that our themes are consistent 100% across all of CodePen.

Dave: Okay.

Chris: The same piece of technology does the syntax highlighting. I did the same thing in reverse on CSS-Tricks. Only Prism is in charge of doing the syntax highlighting just so it's consistent. You know what to expect on both sides.

Dave: Yeah.

00:51:32

Chris: This blogpost from Oliver Grier, a guest blog post, did this really clever thing where he would take a text area, just a normal text area in HTML, then run it through Prism, and then take the results of it and just place it like Z Index style identically on top of the text area. It's syntax highlighted -- you know what I mean -- but you can just type in it, still.

Dave: Yeah.

Chris: Because it has pointer-events-none on it, you know? So, you can just click right through it.

Dave: Yeah, so it's just a passthrough overlay.

Chris: It's just a passthrough, yeah. But there are problems with that because then you can't see the caret from the text area. There are all these little caveats, because I've tried this before and I was like, "Oh, this is beyond me." I don't know. the spellchecking gets weird and the caret gets weird.

Dave: Mm-hmm.

Chris: There are all these little weirdies, but he solved all of them in this blog post. I was like, "Hell, yeah, buddy. Thanks for writing it for CSS-Tricks," because now I can literally take your exact code--

Dave: Steal it.

Chris: --put it in my Gutenberg block, and now I have syntax highlighted. I have a little, mini, fake Code Mirror right inside my blocks. It just feels so good. It makes me feel like how lame it was before the block editor and how we had to do blocks of code.

Dave: That's kind of next level. That's pretty clever. I like it. Sometimes you worry, like CSS and UX or whatever has all plateaued. But I like it when people kind of figure out these little tricks. You're like, "Oh, you figured out the thing."

Chris: [Laughter] Yeah. There were touches that were necessary to make it work. One of the CSS things that unlocked this is the caret-color property in CSS. How often do you use that? Never.

Dave: Never. Yeah.

Chris: But you can select a text area or input and say, "Caret-color yellow," or whatever, and then just the little, tiny caret will become that color. That's, believe it or not, a necessary component to make this little trick workable.

Dave: Oh, man. I've got to read this because you could text -- yeah, then it's just text fill transparent, basically.

Chris: Well, because what you have to do is say color transparent on the text area so that you don't see the text and you're not seeing the doubled up text.

Dave: Oh, okay.

Chris: But as soon as you do color transparent, you've lost your caret. But then you say caret-color white and you get your caret back.

Dave: Wow! Tricks! That's so simple, it's great. I hate it. I love it.

Chris: [Laughter]

Dave: Wow!

Chris: Yeah.

Dave: Yeah. It's like, oh, how did you delete the--? Okay. Wow.

Chris: Yeah.

Dave: I would have thought color wins in that every time, but no.

Chris: Isn't that fun to think of the CSS things that win and don't win?

Dave: Mm-hmm.

Chris: I'm often -- people intuitively understand that you can't beat display. If the parent is display none, a child cannot be display block. It cannot un-deed its parent. It's gone. Parent is display none. It's been vaporized.

But for whatever reason, visibility doesn't work that way. If you've visibility hidden the parent, the child will be hidden too, unless you visibility visible it and then it uninvisibles itself even though the parent is invisible.

Dave: Whoa.

Chris: That's just mind-blowingly weird to me.

00:54:53

Dave: One of the things we've been trying to solve in Open UI--

Chris: Yeah?

Dave: --is like deep linking, right? If you have a tabs and you deep-link to paragraph two of the third tab, or whatever, or heading two of the third tab, or something.

Chris: Yeah. Heading two of the third tab, yeah.

Dave: You know, so then somebody sends you that link. Gives it to Chris. Then sends you to that. You get the hash and you expect to see that paragraph. What do you expect should happen? Should it show that paragraph or should it auto-figure it out? Or are you just SOL? [Laughter] Like, whatever.

Chris: It has to tell you not only what tab to be active but what heading in the tab to be active?

Dave: Yeah, exactly. Then Google indexable and stuff like that, or something, like if you came back from search or something like that. But then you take it the next-next step and it's like, I would never do this, but what about tabs within tabs or a dropdown, a popup inside a tabs inside a modal.

Chris: Where is it headed? I would think it would just figure it out, right? It'd be like this is a unique ID. It happens to be in tab three, which is within tab four, so I'm going to activate tab three and tab four.

Dave: Yeah.

Chris: Because I have to. Otherwise, it's not visible, and that's a UX problem.

Dave: Then you have to just work up the tree. Yeah, I don't know. But then what if that -- what if that paragraph was display none? What would you do? Now, what do you do? By the user agent, so.

Chris: Yeah, because you can't just -- I don't know. I was in a meeting today where we had a couple of edge cases that come up. We'd be like, you know what we're going to do about those edge cases? Nothing.

Dave: Big 'ol peace out.

Chris: Yeah.

[Laughter]

Chris: But you can't because you're talking about Web platform stuff. You can't peace out on the Web platform.

Dave: Yeah. Yeah, but it's just interesting to think about it. It's like, "Oh, man. I just want to make tabs and now I have to figure out deep linking within a tab within a tab."

00:57:03

Chris: I should have probably Discord you about it or whatever, but I think twice now I've had to link to your -- I wanted to link to your slow like brisket, which is not the title of the blog post. The title of the blog post is about slow Web standards or something. Slow like brisket is a header--

Dave: Mm-hmm.

Chris: --fairly far down the blog post, but it doesn't have an ID on it.

Dave: Oh, sorry.

Chris: I should have just made you put an ID on it, but I didn't. Then I was like, should I use the Chrome special thing where you do the thing?

Dave: Ooh...

Chris: But then I'm like, um... no, probably not. I just don't like how it looks. [Laughter]

Dave: Colon squiggly? [Laughter]

Chris: Yeah.

Dave: Yeah. Yeah, yeah, that doesn't look great. I don't even know which post that is. [Laughter] I'll figure it out. Oh, I think it's about the--

Chris: But should there be? I don't blame Google. It's actually kind of a good idea. It unlocks this possibility. It just only unlocks it for Chrome. That's mostly what I don't like about it.

Dave: Well, when I switched to 11ty, it's totally going to happen one day. [Laughter]

Chris: It'll have an ID then, right? Because you'll just some--

Dave: I'll put it in. I'll just use Markdown.

Chris: Can you just tell your Markdown to do that? Yeah.

Dave: Yeah. Yeah, so I'll get a heading in there one day but, you know, not this year.

[Laughter]

Dave: That would be too much.

Chris: Yeah.

Dave: I'll get it in there, though.

Chris: Yeah.

Dave: Anyway.

Chris: You're going to do it slow like brisket.

Dave: I'll do it over the course of two and a half years, which is my current timeline on my 11ty migration. 11ty is great. It's not really 11ty's problem. Although, it was 0.5 seconds slower than Jekyll, and that's why I said, "Oh, no!" [Laughter]

Chris: I remember that. Didn't you decide that you're over it? But you just haven't circled back?

Dave: I'm the worst. 0.5 seconds, why do I make my life harder for half a second?

Chris: Well, it's not only that, but does it do anything? I mean your IDs -- now we've discovered one thing it's going to do. Your headers are going to have IDs. What else is it going to do?

Dave: Oh, yeah. It's gonna -- well, GitHub actions is going to be the big thing. Continuous performance and accessibility integration. Whatever.

Chris: Oh, yes! Dude! Do that so that I can copy it every single time I need to add that to a project.

Dave: Yeah, because that's just like, just put a Lighthouse in there. Bing! Bong!

Chris: Yeah.

Dave: I just wanna--

Chris: Did you see the Web page test API has a GitHub action now too, so you can just hit it and it will barf out a nice little -- I like the idea that a pull request is fricken' loaded with information about what's going on, on that. Netlify unlocks that because they solved one of the hardest aspects of it, which is giving you a URL to hit to run those tests on.

Dave: Yeah.

Chris: But the PR, of course, has this immutable thing, so you could run it against -- yeah, you could run it against Lighthouse. You could run Axe on it.

Dave: Mm-hmm. Mm-hmm.

Chris: What else could you run on it?

Dave: You know anything, like your tests.

Chris: Yeah, integration tests. That's three right there.

01:00:01

Dave: But we had a thing like the deployment failed to AWS, or whatever. I forget what happened. I think I messed up something.

It was their weird thing where I set up -- [laughter]. This is the dumbest thing I've ever done. I needed -- there was like a countdown to a certain midnight date. The client was like, "Let's just turn off sales at midnight." I was like, "Okay. Cool." I don't want to do a 2:00 a.m. deploy, so we're going to write a countdown timer and then use state to flip the whole site. Use the current state to flip the whole site.

Chris: Yeah.

Dave: Unfortunately, Nuxt, in server-side render mode, just ate it. It just took a nosedive. Stuff disappeared. It was pretty bad, but the site flipped, which I anticipated happening and worked locally. It didn't happen on the server-side generated piece because you don't have Vue X or something when the page loads. Blah-blah-blah.

It just bailed, and I just was like, "Man, that's a bummer." Then I was like, "Okay, well, I can just fix it in the morning." It was back to Monday morning when I did it, but I was like, "How can I fix this?" Then it was like, "Oh, you could do a fake commit," like just add a space or something or get no -- I forget what the command is. Just do an empty commit.

Then I was like, you know what? I'm going to try the GitHub action and just hit the rerun this.

Chris: Yeah.

Dave: That's all it took because the time was all fixed. And so, it's so dumb, but I didn't have to open up Jenkins or something. I just went to GitHub actions. That did it and that fixed it. It was just cool. It was cool to -- I don't know. All that information was there. I didn't have to go to the third or fourth app. Anyway, I think I want to unlock GitHub actions a little bit more here in the year 2021.

Chris: Big fan, myself. Yeah. It's not that different from other CI tools. You use GitHub anyway.

Dave: Yeah.

Chris: So, why not just rock it right there? They're just super integrated into the GitHub interface. It's not exactly innovation, but it kind of is because it brings that tool right there.

Dave: Well, and if your site is built using NPM commands and stuff like that, each command, you run that command and then retrigger a build or whatever, like fetch my likes from Feedbin and then rerun the build. That's cool. You could do that. You get a free UI in GitHub.

Chris: Yeah, it's a free fricken' computer, which I'm sure half of the usage of is currently mining Ethereum.

Dave: Bitcoining.

Chris: Yeah. [Laughter]

Dave: There is actually some GitHub spam that did that. Somebody would put a crypto-miner into Preact or something like that. But because the Jenkins will run, it actually does mine some amount of coin because the Jenkins would run.

Chris: Oh, yeah.

Dave: Then it would expire.

Chris: There was a bug for a minute, too, where it actually would just run the action on a PR--

Dave: Oh, yeah.

Chris: --which was really super, super, super, super, super bad.

Dave: Yeah.

Chris: One of the things that GitHub action can do is access your secrets.

Dave: Oh, that's a weird eco secret to send an email to my secrets. [Laughter]

Chris: Yeah, that's not good.

Dave: Yeah.

01:03:41

Chris: Even if that’s not fixed or was a very small surface area bug or something. What's bad is that I got a PR the other day that looked like one of those -- we're going to bump Lodash for you.

Dave: Yeah. Evergreen bot, or whatever it's called.

Chris: Yeah.

Dave: Dependabot.

Chris: Dependabot. It made it look like a Dependabot update, but it added a GitHub action to the repo. I was like, "Uh, no!" Looking at the code, I couldn't quite figure out that it was doing anything nefarious or that it absolutely was, but it was like, "How can it not be?"

Dave: Yeah.

Chris: That looks awful.

Dave: Hmm.

Chris: I heard from GitHub on it and they were going to -- I don't know what the solution is. Surely, they're fighting spam all the time, but it was to generally make PRs that add or change a GitHub action much more--

Dave: Prominent.

Chris: --prominent and be--

Dave: Elevate that.

Chris: Yeah, but like, "Be careful. There's a change here to the GitHub action."

Dave: Even package.json should just be like [warning sirens]

Chris: [Laughter] Yeah. Probably.

Dave: Because I mean that -- I don't know -- 90% of the time. Yeah. We have spammers all the time. I don't know. I think somebody wanted to buy one of my jQuery plugins or something. I'm just like--

Chris: No.

Dave: "What are you going to do with that, buddy?" [Laughter] It sounds like something not legal. I don't know.

Chris: Mm-hmm.

Dave: We'll see.

Chris: All right.

Dave: All right. Let's wrap it up. Thanks, dear listener, for sending in your questions. We like questions here on the ShopTalk Show. It is a question-and-answer podcast.

Thank you 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 and join us over on the Discord, patreon.com/shoptalkshow to get in. The Discord is cool.

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

Chris: ShopTalkShow.com.