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--bass in your face--Rupert, and with me is Chris -- ♪ Happy birthday to you ♪ -- Coyier.

Chris Coyier: Aw... It'll be the day. It'll be the day of my birthday when this comes out.

Dave: Yeah!

Chris: Yeah.

Dave: It's a little early. A little premature when we're recording this, but yeah, that's how we get it out to you on Monday mornings. Just wanted to say happy birthday.

Chris: Well, thank you. That's nice.

Dave: Got big plans now? Yes, no?

Chris: Absolutely not.

Dave: Yeah.

Chris: It's 44, probably the least prestigious birthday I can think of, I'd say.

Dave: I feel like the older you get, it's just a downhill climb, really.

Chris: Yeah.

Dave: We were just at Brad Frost's 40th, which is about as--

Chris: You go big for a 40th, and I was in San Diego for another guy's 40th just a few weeks before where we went really big, too. That's a noteworthy one, I think.

Dave: Yeah.

Chris: Welcome to - I don't know - middle-aged.

Dave: Back pain.

Chris: Even though your 30's feels like middle-aged, too. I don't know.

Dave: Yeah. No.

Chris: Back pain?

Dave: Yeah, that's what you get in your 40's. It's wonderful. It's great. Everything. Sitting down hurts.

Chris: I wonder how Brad's back is doing.

Dave: It's probably got to be out. That was--

Chris: [Laughter]

00:01:34

Dave: We should talk about Frostapalooza. It was just a wonderful weekend.

[Laughter]

Dave: It wasn't even a full week. It was just like a weekend, bingo-bango, we're done.

Chris: Yeah. I don't know if y'all know this out there in ShopTalk Show land. Dave is a monster bass player. Dang, man! There was some basement jams where Dave was just on the bass just making it happen, man. It sounded amazing. You're right there, man. You're in the pocket.

Dave: I love bass because you can literally not play the song other people are playing and it sounds wonderful.

[Laughter]

Dave: Just approximately in the right key, you're great.

Chris: Yeah.

Dave: It's just like, bom-boom-bom... Oh, I'm going bee-dah-boop-bop. You can't stop me.

Chris: [Laughter] Yeah.

Dave: Anyway, it was fun. It was great, man. I can't believe it happened. It was 40 musicians - or something - who have never practiced together. Practiced in little pockets but never fully together and just showed up.

Chris: It does seem highly improbably, doesn't it?

Dave: Yeah.

Chris: Especially based on the output. It's one thing to say that, but then I think maybe later on once the video gets edited and stuff, you'll have to listen to what it was. It was a full-blown ass concert of quality. If somebody walked in off the street, they'd be like, "Damn! Who is this band? They're good."

Dave: Yeah. Yeah.

Chris: [Laughter]

Dave: What? It's a 30-piece band? What's going on? Yeah.

Chris: [Laughter] Yeah.

Dave: And more than one entertainer. You know a lot of bands just have one guy who has got the pizzaz. You know?

Chris: Mm-hmm.

Dave: This was just full of people just kind of hamming it up and doing a big show. And so, man, it was... I don't know.

Chris: Rightfully so, it kind of centered around Brad because he's mostly on bass, although he gave it up here and there to play a drum or keys or something. But he's such a force of nature that he really did... And what a perfect instrument for Brad. It's almost like a metaphor for his life. It's just really foundational and driving and brings everybody together. I think that his bass alone kind of made the thing work. And Ian's drumming. Such a solid foundation.

I was up there doing the dumb little songs I'm on, and I couldn't ruin it if I tried. Mine was such a flea on the great ship of Frostapalooza that that felt good to me. Now, I'm not trying to downplay anything I did, but whatever. But it didn't matter, in a way, because it was such a boulder rolling down a hill.

Dave: Yeah, well, I mean I was like a foot away from my bass amp, and I cannot hear my bass guitar, which is one of the loudest instruments, just because there was so much music on the stage. That was cool and frightening and fun at the same time.

Chris: Yeah, dude.

Dave: It was just like there's so much going on. If I messed up, I don't think anyone would know. I did mess up for sure, but it was just like there's so much going on, I don't know that you could hear it or pick anything out. It was just kind of that huge.

00:04:53

Chris: That was just the concert part of it, which was a big deal and was all pointed towards and really was the climax of the whole time we were there, but we were there for a bit longer practicing--

Dave: Mm-hmm.

Chris: --in the Frost's basement and having little parties and hanging out with each other and stuff. It was nice.

Dave: Yeah.

Chris: I don't get to hang out with you and Jesse hardly at all, and so that was nice.

Dave: No, it was good to see you and just even - I don't know - just hanging out and doing something outside of ShopTalk, exactly. I feel like the last few times we've hung out it's always been like, "We're doing ShopTalk at a conference," or something. You know?

Chris: Right.

Dave: We've gotten other jobs, but this was kind of just like we're just hanging out, and then we do stuff when we're told. [Laughter]

Chris: Yeah.

Dave: Yeah.

Chris: But it was still webby. I mean it was kind of like mostly Web people.

Dave: Mm-hmm. Yeah.

Chris: Wasn't it, do you feel like? I mean maybe there were a couple of musicians that had nothing to do with that. But for the most part, they were a great musician and somebody who works on websites.

Dave: A bunch of Web people.

Chris: Yeah.

Dave: Yeah, it was cool. And there was a whole... Ben Callahan put on a design systems conference the day before, so there were a lot of design systems folks up there, so it was cool to see everybody.

Chris: Yeah, and the whole thing was a benefit for a couple of different organizations including Carson Daly showed up. [Laughter]

Dave: Which is... I will basically say I was on Total Request Live.

Chris: [Laughter] Pretty much.

Dave: I feel like I'm one degree now from Carson Daly, and that means I've been on TRL. I was on MTV. I'm going to write that down.

Chris: Absolutely.

Dave: Here lies Dave Rupert. Was on MTV once. Don't ask.

[Laughter]

Chris: Yeah, a little stretch. It worked out pretty good.

Dave: Yeah.

Chris: Well, that's great and really, really cool. You can just tell Brad and family are still just buzzing over this a week later, and as they should be. Can't wait to see some of that kind of... The high-quality pictures are starting to roll in, and that's fun because so far we've been just trading iPhone photos - or whatever - trading phone photos. That's fun, but it's cool to see the real photographer photos coming through. Then soon the real video will come through, and that will be really cool.

00:07:16

Dave: To put it on a scale, it was almost... I think Brad even said, or Mellisa said, Frost said it was bigger than their wedding. It's like a wedding where everybody has to do something [laughter] and you have to load in and out yourself.

Chris: Yeah.

Dave: It's kind of like it was a big organizational task as well.

Chris: I was like, what, no banjo tech? Come on.

[Laughter]

Dave: Uh... Excuse me. I can't play without my--

Chris: Really cool. Well, you know the Web powered some of it, too. Behind the scenes, the way that everybody communicated was right on the Frostapalooza website at secret URLs that Brad had in there that were like, "All right. Here's the song list and the video about where people stand and stuff." I think that was amazing. There's a video with moving circles of where every one of these people are on the stage. That's a heck of an effort right there if you're like, "How hard can a concert be?" Well, try to organize where people are standing, which super-matters because that's where you plug in. And you can't have too many people in certain spots and whatever. Just that part alone was pretty complex. That's on the website.

Then it was kind of like to make sure that this is going to be of good enough quality, the people involved were like, "Okay. Here's the track so far. Could you please layer your part on top of it? Then get Brad your tracks separated so he can mix it, too. Then make sure that's on the website." It's like this ball of a song that's growing into its kind of final form, which was cool for everybody to listen to and know what they're in for, but also proof that you're able to meaningfully contribute to the song.

[Laughter]

Dave: Yeah, yeah. Well, and I mean it just kind of... Because we're doing it all remote. We can't get together and practice. People are in California and the UK.

Chris: Right.

Dave: It's just this, like, little whiff of confidence. And you know we actually... It powered some changes. Jesse was originally supposed to sing Sledgehammer.

Chris: Oh, really?

Dave: Then she sang it. Yeah, we recorded it and sang it.

Chris: Yeah?

Dave: We just were like, "I don't feel good about it." Then who was it? Seth, I feel like, sang it. It just slayed. It just got... It was just so good with a cocky male instead of just a female vocal.

Chris: [Laughter] Yeah.

Dave: We just kind of realized her voice is the wrong instrument for this particular song. And so, it was kind of cool to check that before you go on stage.

Chris: That was a highlight song to me. But unfortunately, I was a little nervous during it because my songs were right after it, and it's such a banger.

Dave: Mm-hmm. Mm-hmm.

Chris: You're like, "Now let's take it down a notch."

Dave: What's exciting about a guy in a three-piece suit dancing, and maybe he had a tuba on. I don't know.

[Laughter]

Dave: Anyway, that was fun, though. Good weekend. Great times. Yeah, it feels like a little bit of a dream. It just was like, "Did I do that? I did that! That was--"

Chris: [Laughter] Yeah.

Dave: I was on a stage last week? Okay.

Chris: Gosh.

Dave: Yeah, weird. All right.

Chris: A little tiring.

Dave: Yeah.

Chris: Can't wait. Yeah, all right. Well, what else about websites?

00:10:55

Dave: Well, you know, I don't know. We have some questions here we could dig into if you want.

Chris: Yeah, certainly. Dishwasher wrote in, Dishwasher-save Code wrote in about--

Dave: Dish--

[Laughter]

Dave: Which I assume is your Christian name.

[Laughter]

Chris: "I have a question about dealing with medium/large code bases or anything that's not just a tiny portfolio. In my experience, it seems like every code base eventually becomes unwieldy or straight-up terrible over time unless you constantly refactor. Whenever I jump into a larger project with other teams and develop new features, I often feel the need to ignore the rest of the code and just focus on making my feature as tidy as possible. Is this a common experience amongst developers? I'm sure Facebook and other giants have several "Do not touch" files that work but do not adhere to any current best practices. Do all code bases inevitably become messy?" [Laughter]

Dave: Ah...

Chris: Maybe. [Laughter]

Dave: I think so. I don't know. It's kind of like if you see somebody who says they have the perfect code base, they are a liar.

Chris: [Laughter]

Dave: I do think... I would say... I don't know. One of my points of inspiration is always CodePen, so you guys always find ways to pay down technical debt. I would kind of love to know your story, but you also -- which would be my thing is you also tend to use frameworks that support organization, like Ruby on Rails.

Chris: Yeah.

Dave: Very strict on where you put your files and what they do.

Chris: Mm-hmm.

Dave: Then you're using Next right now, right?

Chris: Right.

Dave: So, very kind of like--

Chris: Also pretty strict. Yeah.

Dave: --prescriptive about where you put your files, and I feel like if you want to win, that's a good way to do it. I work in a mono repo every day, which is a zoo. [Laughter]

Chris: Mm-hmm.

Dave: Like 1,500 emails a week kind of zoo, but it is a very... For an unorganized lump of code, it is very organized just because that mono repo structure means everything is in a package.

Chris: Hmm...

Dave: So, the leaf node is a package that you're going to deal with.

00:13:22

Chris: Right. Okay. That's interesting. Yeah. Yeah, everybody has their own experiences. I've certainly seen and dealt with messy code bases, including our own over time. But yeah, we are. Because we're so heavy on developers and developers as the top dogs at the company, a lot of time is spent cleaning up and making sure the code base is pretty. I'd say, at the moment, I'm not embarrassed by our code base. I think it's pretty nice, actually. Pretty good little code base.

There's certainly old stuff in there, though. Old sometimes mistakes, mistakenly for bad. I have this David Khourshid quote that just echoes in my mind forever about don't call it legacy code; call it legendary code. I love that so much because it's like, "Yeah, sure it's old. But how much money did that code make? What did this code do for this organization? Has it been sitting there for eight years doing exactly what it needs to do helping do whatever this organization needs to do? Yes? Well, then it's fricken' awesome code, actually." [Laughter]

I don't know. I think that it's worth looking at code that you think is messy but really has been sitting there just doing its job for a long time. I think that's kind of awesome.

I think mono repo... You said we use Next and Ruby on Rails. We do and we have Cloudflare workers sitting outside of all that. And we have a packages folder at the top, like y'all have (it sounds like). And the idea of packages is that they're not part of Ruby on Rails or Next.js. They're just their own thing. And either one of those things can consume a package. I think that's a nice way to structure things - in a way.

It does lead to some complication. I don't think it's Next.js's favorite thing in the whole world to consume crap like that from some folder outside of its home base. It can be done. It has gotten easier over time. But I didn't love the technical debt that instilled for a while.

Yeah, and then the mono repo has its own complications of like when this stuff is all together, then what? What are the implications of that? And we have to fight that quite a bit. I'd say that's one of the juicier parts at the moment causing problem and time wasted that you don't love.

You need a package manager at the top, right? This is mostly JavaScript town for us. And we use Yarn because it has workspaces support and, traditionally, that was one of its strengths, really, was workspaces. Workspaces meaning like these all get to share some stuff. [Laughter]

It's a little hard to describe if you don't live in workspaces town, but it's fairly important so that each folder knows about each other (to some degree) for efficiency reasons and convenience reasons, meaning you can run scripts at the top level that can go down into those workspaces and do things.

But it causes some problems as well. For example, we have a top-level package.json, and that's become our little enemy lately. So, there's stuff in there.

We talked about this just recently. For example, Prettier - or whatever. That's up at the top because it just seemed to make sense at the top. You're like, "Why would each project want Prettier individually? That's dumb. I thought that's one of the things that is a benefit of having a mono repo."

It kind of is. It's not totally stupid. But the problem is let's say Prettier has a bunch of dependencies. I don't even know what they all are, but I just guarantee it has a bunch of them. Just little stuff all the way down to left pad - or whatever. It probably has a little ball of them.

Well, the way dependency resolution works is then a sub-package might also have a left pad in it but a different version of it. Then it can get confused. Which version is it going to honor and use? Is it the one at the sub-level or is it the one at the top level that's only there because Prettier happens to be up there?

Dave: Or both.

Chris: Yeah.

Dave: "Por que no los dos?" sometimes, you know?

Chris: Yeah. [Laughter] Right.

Dave: Yeah.

00:17:54

Chris: That stuff you'd think would have hard and fast rules about how it gets resolved and handled. And it just doesn't.

Dave: Mm-hmm.

Chris: It might work one way on your machine. It might work a little different in a Docker setup. It might work different in your CI or on production - or something. That sucks, those little dependency things.

In our mono repo at the moment, the way it's feeling like is, gosh, I wish there was no top-level package.json. I wish nothing... I wish only individual projects and packages had their own package.json, their own really isolated stuff. So, there's no accidentally resolving a dependency that's a little bit higher up that's just unrelated to what it has asked for. That means getting that top-level stuff out of there.

In our code base, there just happens to be some lingering stuff up there like Prettier and like our linting stuff. Even we have Cypress at the top for some reason (even though we've kind of moved that down into a package as well). It just is one of those things where we just need to sit down and be like, "All right. Those got to go bye-bye." And the answer, you can still make Prettier work but as a package. Then anything that wants to use Prettier--which is everything, really--you import your own package that does it.

Dave: Mm-hmm. Yeah. Yeah, @codepen Prettier. Yeah.

Chris: Exactly.

Dave: Yeah.

Chris: You're calling your own little internal one. Now, is that absolutely trivial? No because, of course, in our code base, it's not just like, "You hit save and VS Code prettiers it." Sure, that's there. But we also have, like, "Well, then this code generator runs because it looks at - I don't know - a GraphQL schema and generates some crap." Well, that's got to get prettified too because we look at it sometimes and we want it to.

There is no command S on that file. It needs to call a function to prettify the output. Well... [Laughter] That sucks. And it doesn't suck. It's just, what do you call then? Well, it assumes some availability. It's kind of like import Prettier from Prettier. Then you call prettier.dojob - whatever the API is. Well, you don't want to do that because now you're dependent on that global thing being available. That means your package@codepen/prettier -- whatever we turn it out to be -- needs to export some kind of machine to do that job so that everybody can use that machine. I don't know.

Is that pushing the world forward? Are we a better company now because we have that little internal package? No, we're not. That's paying down technical debt that's just cleaning up the world at the cost of with and out features.

Unfortunately, for us, it's been a balance. We are very fortunate to have this company that does okay, that people like, and we invest in the community, and have a company that's in the black. Gosh, thank you, everybody. I am going to make CodePen the best it can be forever for you, and it's working out just fine.

Now, if we were in the red, we're not making CodePen / Prettier. We have bigger fish to fry. We need to make the company do better. [Laughter] Who cares about a little technical debt at the top? We're too small to worry about that at the moment. It's not a huge priority. The priority is making the company do better.

Now, fortunately, we're just in that area where we can. The company is doing well enough that we can focus on just a really clean code base because we are making a CodePen 2.0. And when 2.0 launches, it's almost for our brain reasons. We cannot be fighting dumb code mistake crap. It needs to launch really clean because we need to then be working on--

There are going to be problems no matter what. So, there can't be problems because we were just sloppy. That's not going to work for us.

We've been around so long that we've lived through knowing what sloppy feels like and what clean feels like. Right now, we're living through a clean code base. While it's not mega exciting, there are not features dropping every second, what there is, not a tone of gnarly support. There's not a ton of, like, "Oh, my god. Can you believe this is broken? What's happening here? What unexpected disaster is here on a Monday morning?" kind of thing.

We don't have that that much, and it feels good. And so, when 2.0 drops, I want to continue to feel that good.

00:22:47

Dave: Yeah. I wrote a post a long time ago. Sorry, I'm going to talk about my own post. I'll put a dollar in the douchebag jar.

But technical debt, the guy who made that phrase, I found a quote of him saying technical debt is a lack of understanding. And so, when you hop into a repo or a project or whatever, and you're like, "Dude, what is going on?" that's a manifestation of technical debt is you just don't know what's going on.

When I hear y'all talking, this is why I love CodePen's practice of paying it down, when an error happens, you're not surprised, and you're not like, "Where is that happening in the code?" because everyone has renewed their understanding of the app and what it's doing and why it's doing it and where things go. I think that's awesome. I think that's like you have to go through the exercise of updating the code base just to make it feel correct to how you understand how your software works.

Early stage, you're just building crap, standing up whatever folder called flarf, and I'm putting everything in flarf for right now, and I'll fix it later. But once you've stabilized, now you need to refix things based on your understanding.

We're having that experience now. Less so me. I'm not standing up a new... We're standing up a new project just for... But in having a chance to redo the mono repo or rebuild things and make different decisions, and so I'm not... John and Jane are doing this mostly on my team, but it's been interesting because we're getting to redo some decisions and reorganize how we think about things. It's really helping.

But it is a mono repo and, like you said, that top-level package.json, I think it should exist. It's sort of like, "Hey, we're all sharing these." But you can have a problem. I was stuck in a package lock issue last week, and I just wanted to lay on the floor.

Chris: Hmm...

Dave: I was breaking and NPM installing and deleting and... And I just was like, "What's going on?" But finally, we got it all kind of sorted out. Yeah, it was just kind of--

Chris: Yeah.

Dave: It was... Anyway, there are pros and cons for any direction. But I would say to who wrote it in, Dishwasher, "Dishwasher, I would not hesitate to use an established organization tool. I'm not Mr. Tools, but from a company with a brand name." If you're using - whatever - Blimpy's code framework, blah, maybe not. But if you're using Vercel's thing, it's probably been a little battle-tested.

You'll hate that organizational style at some point and some kid is going to come around and be like, "Well, this is old-school. This is not the way you do it," but again it's about the team understanding how it works and how it's organized.

I would also... Make Mermaid charts and crap. Just feel free to diagram the hell out of it and let people... That's my favorite thing is when you just diagram how it all comes together and who does what in the operation. Man, it's good. I will use Mermaid. I tell you what.

Chris: Mermaid rules, doesn't it?

Dave: I love it.

Chris: I love it. I find it so satisfying somehow to get the little boxes ticking.

Dave: I might put it on my blog because I'm just like, "I think in Mermaid," and all my blog posts are probably just going to be charts from now on.

Chris: Yeah. That's awesome. Didn't this come up in the Discord the other day? It was kind of like everybody somehow is... Not everybody, but that was part of this conversation was like, "Basically, it's TLdraw in Mermaid." Mermaid when you need to put it in documentation and it needs to possibly be versioned and stuff.

Dave: Yeah.

Chris: By TLdraw is the one where you're like, "I need to draw a box with an arrow," so it's that.

Dave: [Laughter] Yeah.

00:27:21

Chris: Yeah, I like TLdraw, but I'll tell you I did a FigJam this week.

Dave: Hmm...

Chris: And I was almost poo-poo'd on FigJam before, not publicly but I was kind of like, "Is this such a big product that it needs to be--?" like when you make a new document in Figma, it asks you which one do you want to make. Do you want to make a Figma document or do you want to do a FigJam? I was like, "I don't know that this little side project of yours warrants that kind of top-level experience - or something. And now I've changed my tune. I think FigJam is really cool.

The amount of people in the world that need to draw some boxes with arrows is a lot, I think. It's a really convenient way to think. The fact that everything else that Figma has comes along for the ride, like your whole team has access and it's real-time with each other and whatever.

It's just a nice, considered set of tools. When you draw a box, you can draw a box, but then you can just immediately click in it and put words in it if you need to. There's a limited set of colors, which kinds of reminds me of Notion (right) where you can't make an ugly Notion document.

Dave: Mm-hmm. Mm-hmm.

Chris: The colors, you only get so many colors. You can only put a header up here. You can only use these few fonts - that kind of thing. That's true in FigJam as well. There are only four fonts, but they're really nice and they make sense and they're the ones that you need. I became a fan, I'm afraid.

Dave: Yeah.

Chris: Pretty good.

Dave: I'm into that, I think. I don't use FigJam a lot just because it's not my thinking tool, but it could be. I don't know.

00:29:00

Chris: To me, it's one of those, if you have it anyway then you use it.

Dave: Mm-hmm.

Chris: I don't know that I'd switch to Figma just for FigJam, but if you're in Figma anyway because all your other stuff is, it's a pretty solid add-on tool. For them, surely a churn reducer.

Dave: Mm-hmm.

Chris: Like, "Oh, everybody loves this. We can't get rid of Figma." Anyway, pretty cool.

Dave: Yeah. Well, yeah. I'm pretty transactional when it comes to Figma, though. I actually love dev mode. I know I'm just-- [Laughter]

Chris: Yeah.

Dave: Just mark it ready for dev and, guess what, my life gets simpler. [Laughter]

[Laughter]

Dave: Oh, it's green? I'll take it.

Chris: That was a smart move by them.

Dave: Yeah. Yeah.

Chris: I can't believe how that all shook out. They were like, "Oh, nobody is going to buy us!" which to me made all the sense in the world because I'm like, man, Adobe, some super-billion-zillions of billions company that has great tools but has not hit the mark for modern digital design tools in the same way that Figma has, they're like, "Oh, we'll buy Figma then. We're big and we should be able to do that kind of thing." The government was like, "Nope." [Laughter]

Dave: Mm-hmm. Yeah.

Chris: Then Adobe has to write Figma a billion-dollar check, a B on it!

Dave: Like an "Oops, I'm sorry," check.

Chris: Yeah.

Dave: A breakup check. [Laughter]

Chris: Yeah.

Dave: Yeah.

Chris: A billion dollars! What?! So, clearly, they have some bucks to try different stuff with. And everything... Between dev mode and FigJam and the plugin stuff they do and the variable support, no wonder people are excited about it. It's one of those companies that, when they release something, it's like stand up and watch. That's a good ass feature. [Laughter]

Then to see these tools like Canva exist, too, which are also billion-dollar companies, you're like, "Man, I almost feel bad for Adobe." [Laughter] You're getting punched in the gut from multiple sides. Not that Adobe doesn't make good software that I still use. But I'm like, "Man, you're getting trounced."

Dave: Yeah. Yeah. Well--

Chris: That's all right. We can help you, Adobe. Just buy me.

Dave: You can buy the entire podcast for--

Chris: [Laughter]

Dave: What was it? What were we selling it for, $100,000?

Chris: Half a billion.

Dave: Half a billion? Yeah, half a billion, you got it.

00:31:18

[banjo music starts]

Chris: Hey, you should check out this browser extension. It's really cool. It's about making much better bug reports when working on websites, and I'll tell you how to do it. Anyway, go to jam.dev -- a nice URL, right? -- jam.dev. Sign up. Get the browser extension. It's all free.

Then it's a cute little strawberry icon as a browser extension. And when you see a bug, you just click on the little strawberry, and then you either just click and get the whole screen or you click and drag and get a piece of the screen that you're trying to show somebody.

It has nice annotation tools in there, so if you need to type something or draw an arrow to something or boxes around it - whatever - that's nice because you're trying to point at what the bug is. You can write with words about the bug - or whatever. And that's it. So, it's really no harder than just taking a screenshot, but what you get then is a URL that you can share of the problem. That's nice. Or you can have a team account. It's automatically part of the team and all that. But here's the greatest part is that it's full of all this metadata that you wouldn't have gotten normally with a screenshot, like the entire browser console.

Here's a story that happened on our team. We were debugging this problem and somebody left the tab and came back, and there was just an error sitting there. Another user -- we were sitting on a Zoom call or whatever -- was like, "Ooh, make sure you take a screenshot of that, but do it with the console open because we need to see if there are errors in there." They were like, "Oh, okay. I guess I'll do that."

If you were to use Jam to do that, you wouldn't... It takes all the thinking out of it. The console is automatically captured, and it can't be on the wrong tab or you didn't capture all of it or the important thing has already scrolled past. None of that can happen. You're going to have the whole console as part of the metadata around this little screenshot/bug report that you've automatically created just by clicking and dragging really quickly.

It's got network information. You can connect it up to integrations if you want to later send it to Jira or send it to Notion or something. There are tons of integrations. You can hook it up to Sentry, so you know if it was a bug that triggered in Sentry. You can connect the two up together. There's AI stuff built into it for diagnosing what's wrong. That's all the juicy stuff on top of the Jam.

But the best part is, when you're just working with your team, all you do is be like, "Oh, yeah." Muscle memory. Screenshot. Take screenshot. There's the screenshot of the bug and, automatically, without having to do any extra work, has all this useful debugging information along with it, so it makes bug reports way easier with no additional work. Jam.dev, super-cool tool.

[banjo music stops]

00:33:51

Dave: Hey, we got a question in from BBA (anonymous), if that is your real name.

"Hello! I'm thinking about taking part in the Js13k competition over at js13kgames.com. It runs from August 13th to September 13th," so it's already underway, so you're already behind.

Chris: Yeah.

Dave: But, "Have you heard about it? One of the prizes is a CodePen Pro account." Ka-ching!

Chris: Hey!

Dave: "Before you get initiated, you have to make a game in JavaScript and the whole thing needs to be below 13kb. Do you have any tips, tricks, ideas for making a super-tiny game?" Anyway, yeah.

Chris: I would look at the past games, for sure. It's been running forever. This is the 11th. It started in 2012, so it's the 12th year of it. That's amazing, by the way. Good job.

I would think there would be a lot of that going on. But 13k is ridiculously small. [Laughter] So, you're not using images unless it's just a majorly tiny sprite or something.

I would look around. I have a collection on CodePen that I've named "Games." There's a lot of stuff there. I would think it's going to get better and better.

In fact, I read a post by Temani Afif. You know him. Temani.

Dave: Yeah.

Chris: He's one of the CSS masters of today, I think. It was about how you can use the keyboard. Let's say you had a little Mario, and you needed to go up, down, left, and right on the screen.

Dave: Mm-hmm.

Chris: Just in a grid-like formation. You can use the arrow keys to do that these days thanks to some kind of modern technology. I'd look at that. That seems like it's opening some doors that you can do now that you weren't able to do before. Pretty cool. The post is called "How Keyboard Navigation Works in a CSS Game." I'll put it in the show notes.

Dave: Mm-hmm.

Chris: I was very impressed by that.

00:35:55

Dave: Well, you know, there's a lot you can do. I started making a game based on cards and a deck build kind of game. It was pretty small. It could be smaller. I'm sure that my assets kill it.

But I would want to know the exact rules here if it's just the whole game and assets need to be under 13k. I think I'm on that edge with this game I made. But you know it could be--

Chris: Yeah? What was the tech?

Dave: Web components.

[Laughter]

Dave: And a lot of just kind of HTML. Just click a button, get a thing. Click a button, get a card.

Chris: Hmm... Oh, yeah! You're talking about the mining one?

Dave: Yeah, yeah. Unreleased mining game. But I'll probably release it here soon. I play-tested it in the D-d-d-d-discord, and then people were like, "It's fun but too random." I was like, "Cool. That's what I thought. I'm going to make it less random."

Then my first attempt at making it less random didn't work. And then I got a job, so I stalled out.

[Laughter]

Dave: So, anyway, I'm back on it. But anyway, I started making that and it's pretty small. But I don't know. You can do a lot with Canvas.

You're going to need some kind of collision library, you know, if X touches this. But it does not have to be a full-blown Canvas engine. You could just have... It could be in JavaScript, and you could use... What is that, CSS Snap - or whatever - where you snap it to, like, a grid?

Chris: Mm-hmm. Mm-hmm.

Dave: You could have it like CSS Snap, and then query, "Is it on this thing or is it next to this thing? Cool. Do this." You're going to write a lot of bad code. But then maybe you'll eventually come out with something that makes sense.

Yeah, I think there are music games I'm looking at. You can kind of get into a little Web audio kind of stuff if you wanted. You could... A lot of city builders are like, "Click here and do something." You could make a 16x16 CSS Grid and make checkers or something, I assume.

Chris: Yeah. Yeah. There's always the tech stuff, and I always feel like not intimidated by that. I'm like, "I'll go figure out how that is." What I'm so intimidated with games is they need to be fun.

Dave: Mm-hmm.

Chris: And that's such a high bar, I feel like. It needs to be a kind of novel, interesting idea. You're really good at it. I'm always like, "Ugh!"

Dave: No, I feel like I'm just like, "Uh... How do--? Okay, here's an idea. Here's a piece of an idea."

Chris: Mm-hmm.

Dave: I don't have the full, like, "Here's how to get to the end of an idea." We should get old Adam Coster on here from Butterscotch Shenanigans because they are a good game company who makes Crashlands. He's in the D-d-d-d-discord. We should get him in here.

Chris: Heck yeah.

Dave: Get him to talk about this at some point.

Chris: What makes things fun?

Dave: Yeah. How do I make a fun game? Please tell me.

00:39:26

Chris: [Laughter] Yeah, I wonder if scroll snap would be... there are opportunities for gaming stuff in there. I saw a cool trick from Adam the other day. He made this kind of like card swiping UI that had to do with view transitions. I always say the wrong thing. Scroll-driven animations.

Dave: Scroll-driven animations.

Chris: I love them. I think they're so cool maybe because the bar is a little high on them. They're not hard to do, but you can't just slap them into something. You really have to think about it and the code is a little fancy and stuff. If you're doing something with them, it's probably cool.

But there was scroll snapping, too. So, you know what it is. If you happen to have an iPhone and you do the swipe-up thing from the very bottom, you get all your open apps. Then you can scroll left and right through your open apps to find the one that you want.

The ones that are the furthest back are a little scaled-down, just a little bit. The one that's closer to the "front" of the stack is a little bit bigger. But they also snap a little bit. You can't stop anywhere. Wherever you stop, they kind of slowly move into a snap position.

There are two things going on here. There's the scroll-driven animation, and you need that one in order to apply the transform to make the further back ones just a little bit smaller. Then you need scroll snapping as well. Then you need a way to lay them all out in a row, too, which in Adam's case he used Grid.

He used Display Grid, but you can just say grid auto flow column. It's a little bit like Flexbox. It's just like, lay them all out in a row and just keep going. Just keep going. Don't break down into a new row without that information, which is kind of nice. But then you can, at the grid level, control how wide those columns are still, so it's kind of like Flexbox but with the control of Grid. I was like, "Ooh, that's clever. I like that."

Then he'd put a little trick in there with pseudo element. Imagine you have 15 open apps and you can scroll through them. Well, he put one at the end and one at the beginning that are invisible that intentionally have scroll snapping turned off on them. So, as you get to the edge, you can swipe a little extra far because you're going onto that invisible card. But then it snaps back to the previous card because it's like, "Oh, there was no scroll snapping on that card." It gives you this rubber band effect at the beginning and the end because of this invisible card. I'm like, "Oh, that's so clever." This is a great demo if you ask me.

Dave: Yeah. I've tried to get the perfect scroll snap kind of thing, like gallery thing, multiple times. The thing that always gets me is when it's edge-to-edge, like on a phone, it's easy. You just pad the left and then you just add a scroll snap horizontal scroller, right?

Chris: Mm-hmm.

Dave: Then you'll probably need a pseudo element on the end just to make it the gutter line up. But when you go wide, desktop-wide, what do you do? Does it just clip or does it keep going to the edge? But then how do you maintain?

Chris: That's funny. The desktop is harder than mobile?

Dave: Yeah. Yeah, or it breaks my brain a bit on how to do it without crying. Anyway, I don't know.

At some point, too, I wonder. Do you just want an infinite canvas instead of a big horizontal scrolly boy?

00:43:17

Chris: [Laughter] Maybe. Yeah. I see that's what iOS 18 has done for their photo apps. They've leaned way more into the, "It's just an infinite grid of photos." They don't even have a bottom.

Dave: Oh!

Chris: Right now, you open up photos and there's kind of a lot of crap at the bottom of the screen.

Dave: Mm-hmm.

Chris: They just got rid of all of it.

Dave: Yeah. Whoa! Whoa!

Chris: Yeah, it's just a grid, baby. Because that stuff on the bottom is kind of like, "Here's all your albums. Does anybody care about albums?" Yeah, some people do.

Dave: Yeah. But they're like, "No."

Chris: Not very many. It's much less used than that. And you can still get to them. It just doesn't need to be this first-class citizen kind of thing.

Dave: Quintessential feature? Yeah. Do you think--? On that note, do you know if Masonry ever got resolved? Did that--?

Chris: No.

Dave: No?

Chris: I was salty about that a week later because there was a big round of, like, "Here are two blog posts that are really--" one of them is like, "Let's do it this way," and the other one was like, "I see what you're saying, but let's do it this other way." Do y'all remember this? It was like Jen Simmons at Apple laid out some amazing use cases and stuff and said, "Let's just do it in Grid," and Rachel Andrew wrote for Google and said, "Yeah, all that stuff is awesome, but it doesn't mean that we have to use Display Grid, Grid Columns Masonry. We can use Display Masonry to do that."

It just felt super-unresolved. Then I was thinking, after the latest working group meeting, we'd hear something about it. We haven't. It just seems dead.

I'm sure it's not dead because my timeline in my brain is a little faster moving.

Dave: Mm-hmm.

Chris: Whereas a year of downtime for a spec is nothing.

Dave: Yeah, yeah.

Chris: That happens all the time to specs.

Dave: They're on the ten-year time scale.

Chris: Yeah.

Dave: We're like, "I want it now!" Who was it, Veruca Salt? "I want it now, daddy!"

Chris: [Laughter] Yeah, I just thought we might hear a little - I don't know. It was so public, but it's like, why isn't the follow-up also public?

Dave: Mm-hmm.

Chris: What do you all think now about each other's posts?

Dave: Mm-hmm.

Chris: Could you do a podcast together and talk it out?

Dave: Man.

Chris: No?

Dave: We need more hard-hitting TikTok journalism where it's like, "Google and Apple are fighting over the correct way!" You know?

Chris: Yeah.

Dave: Just some really good, punchy expose journalism.

Chris: Yeah. That was about as juicy as it got for this year in terms of tech stuff. But then, to me, the juice falls off when there's no follow-up.

Dave: Mm-hmm. Yeah. Yeah. It's like, "Hey, last call! Everybody get your opinions in," and we're going on vacation. We're out of here. [Laughter]

00:46:16

Chris: Yeah. Right? There was me being salty about your employer a while back. There was some guy in charge of AI or something at Microsoft, and he said something a little off-kilter, right? He said something like, "Who cares about LLM models slurping up the entire Internet without any permission whatsoever? That's just the way it goes." Yeah, that's not verbatim. It was something like that. It seemed like, "Hey, buddy. Chill."

He got some hard blowback from it. But then the news cycle ends. That's what bothers me about the news cycle these days is, like, "Somebody said something awful." Then you're like, "And, moving on to the next thing."

You're like, "What happens now? Is he fired? No? Yes?" And that's what I wrote. It's interesting either way. I wish journalism would follow up with that type of thing because it's interesting if, when you say something like that, it costs you your job. Now, I'm not calling for his head. I want to know what happens.

Chris: To me, it's also interesting if there's absolutely no change whatsoever. That's interesting, too. But are we ever going to find out? Not through them. I could maybe look it up. I could maybe do my own citizen reporting and figure out what the follow-up was, but I probably won't.

Dave: Mm-hmm. Yeah. I mean I can't comment on that story specifically. Throw out the old--

Chris: Why? [Laughter]

Dave: --"keep my job" card.

Chris: Yeah.

Dave: But no. I see it in politics, too.

Chris: Oh, yeah. More so.

Dave: Like, "Whoa! They said this thing. Anyways..."

Chris: Yeah.

[Laughter]

Chris: Right?

Dave: Like, "We don't want to pause for a minute on that, or we want to discuss that?" I think that's... I don't know. Not to detract from various serious issues, but I think a lot of it is we are just so addicted to this outrage machine. It's just like, "Can you believe this guy said that?" Then you're like, "Yeah. [growling]" Then we move on to the next one.

We never try to... I don't know. Not like mob violence is the solution, but what's the positive, actionable, and get a statement? I feel like that used to be news for kind of outrage. How do we turn that into an actionable change?

I think politics is one thing, but yeah, I'm coming up with ten different scenarios in my brain right now. It's just like, "How do we hear something, say something, and then figure out how we're going to see change beyond just yell at them more?"

Chris: Yeah.

Dave: Yeah.

00:49:18

Chris: We'll end here with one from Bill Hye. Bill lives around here in central Oregon with me. We met up a few times to talk about some things. He just has a general topic thing about WordPress. We don't have ages, but he just wants to know what's the discussion on the current state of CMS (as in the current state of WordPress), which I think, as a topic, is actually quite interesting and maybe worthy of a bigger show at some point.

But there has been some recent articles published that feel that are kind of putting a point on some negative stuff happening in WordPress. That has happened forever. Everything that WordPress has ever done has met criticism, some pretty extreme criticism. Partially it's because it's so big. They're too big that anything they do is going to piss off some group of people, and there's absolutely no way to avoid it whatsoever, I think.

It was really peaked when they made the blocks thing. When Gutenberg was the thing, and people felt like they were getting it kind of pushed down their throats - or whatever - there was a lot of it. And it came from people that had been super-involved for a super long time. So, it felt like the people saying it were, like, "Man, I used to love this and now I hate it. Screw you for making me do this," kind of thing.

I kind of got it, but I also - I don't know. I think I've been on the record for thinking that was a smart call. I think making a block editor was the right move for WordPress despite what you might think about it. Actually, the upgrade path wasn't so bad. I lived it a couple of times and was like, "Okay, whatever."

That one I get. You had to make big technical changes and do. Now I feel like I'm on the other side of it again because it seems like what's happening with full site editing and stuff is the way that is being encouraged that they want you to make a theme. It's basically like, "Put a JSON file in a folder and say that your brand color is orange and go to bed." It feels like they're trying to get you to not make themes, almost. [Laughter] They're like, "Just describe some capabilities of your theme," or something, to me, in this convoluted JSON format, and there you go.

I was like, "Um... That's just not how--" It doesn't click with my brain so much because then the way that you build a site so much is in the database and not the PHP. It's like when you build a site, you make a footer block, and you put the footer block at the bottom of this page template. You did that. Without code, you did that through some kind of template thing that you're crafting in the UI itself. It's just kind of lost me in a way. Not in a way that--

I don't know if that's what they're saying. Are they saying, "We want you to do this," or "We want you to make themes the old way," or not? It seems like the message is lost to me. What do you want me to do? I don't know that there's an answer for that.

00:52:32

Dave: Yeah. That's tough when the whole kind of... Maybe it's moving it away from something you can do by yourself. You have to make this whole theme that has to be this whole... It's kind of catering to theme builders maybe more than bloggers or people who make their own things.

Chris: Hmm...

Dave: I feel like WordPress had this thing, too, where it was like, "We're going to sell all your stuff to AI." Then everyone was like, "Wait, no!" Then Matt Mullenweg was like, "I'm going to on sabbatical. I'll talk to you later."

[Laughter]

Dave: Did that ever get resolved? Did that?

Chris: I don't think so.

Dave: Okay.

Chris: AI news is especially like that. You can't hardly keep up with that. If you're mad about AI, which I feel like I have been for a minute, and it just does not seem to matter. To me, it still boils down to, like, "Yeah, but you took my stuff," and nobody wants to tell you that that's true or false. There's a lot of LLMs now. It's not just Llama and ChatGPT 4.0, blah-blah. Whatever the names of these models are, there are a ton of models. There are so many.

I don't know. I guess I should follow this stuff more closely because now I'm worried about sounding ignorant or whatever. But there's not a list of whether this LLM is trained on this list of sources. [Laughter] I've never ever seen that ever. Never. So, what's the deal? Were you? Were you trained on my stuff? Did you read my book? Did you scrape CodePen? Did you learn about CSS from CSS-Tricks? Did you do that or not? Because you didn't ask me.

I've never gotten an email ever from any model ever-ever in my inbox. I get lots of emails. I have never gotten one that said, "Do you mind if we train it on this site?"

But then you'll hear a news article, and you'll be like, "Matt Mullenweg got awarded $20 billion for allowing WordPress to be used in language models." You're like... Why don't they just scrape him, too? Are they more scared of his lawyers than mine? Because I don't have one and he does. You know? Or whatever. [Laughter]

Or Reddit allowed to be a source, or Stack Overflow allowed to be a source. So, if you're big enough, they'll ask you. Or they'll pen a deal with you. But most content is not. Most content, surely they just scraped up and gave nothing to. It almost makes it hurt more.

Dave: Mm-hmm.

Chris: You're like, "Oh, I see. You've got to be rich to make money. That's the trick.

Dave: Ooh... See, that's the one I get worried about is, "Oh, it's a rich-get-richer deal. Ah-ha." Ah-ha-ha-ha-ha-ha. I see.

Chris: Certainly.

00:55:20

Dave: Yeah. Yeah, no. Well, I was going to say, on the CMS front, WordPress I think is... I think it's still a gold-standard choice. I think you can still use WordPress.

I'm going to say my classic line. I think WordPress needs to do a better job talking about WordPress.

Chris: [Laughter] Right.

Dave: For years, it's been, "Oh, WordPress, man! It sucks, but you can make it headless now, and that's how you do React." You know? I feel like maybe with just how things are swinging, you just say, "Hey, WordPress is really good at building websites." I think you can say that. I think you should say that. I know a lot of people have jumped ship through all the Substack kind of drama and stuff like that. A lot of people have jump-ship to Ghost, try Ghost.

Chris: Right. They like the newsletter angle to it - or whatever they like.

Dave: It has a built-in newsletter into your blog, and so that's kind of cool, and money-taking and stuff like that. I think that's pretty cool. I still have questions.

Chris: Yeah. WordPress has all that crap too, though, you know. It's just that they make it less of... It's why design matters because Ghost makes it an unavoidable part of the experience. It's like this is a first-class citizen in here whereas WordPress, I'd almost trust WordPress to do it better.

Dave: Yeah.

Chris: But it's not a first-class citizen. It's like, "Install Jetpack and then--"

Dave: I think Craft CMS is still a really good way to get a very big website up.

Chris: Yeah. [Applause]

Dave: I think... I'm trying to think of other CMSs off the top of my head. But those stand out to me as big options. I think you've got Astro. Astro has a DB now, a database now, product that you could use that. There's the headless content CMSs that you could totally use and even work that in with something like 11ty or something like that.

Chris: I think it should be the same as your opinion on Web components. You're like, "Is this component being used in more than one place? Then maybe you could use Web components." That's how I feel about headless. Is this content being used in more than one place? Then maybe consider headless. But don't go down the crazy headless town if you don't have multiple consumers of that data. That's asking for trouble, I think.

Dave: Yeah. Then WordPress and Craft and whatever can also give you a little JSON file. [Laughter] So, are you that committed to do that?

Chris: Right.

Dave: The JSON file just absolutely doesn't work. Craft even has a whole GraphQL thing.

Chris: There are some DX problems. If they're being real, it seems to be there hasn't been a concerted DX focus at WordPress. They're almost closing their eyes to the idea of modern developers really like the idea of building in a component-based way. And they just don't want to answer to that. They're like, "Well, then don't. Then either just write in PHP or use our block editor thing to do that."

For example, you can craft a query as a block. If you had news items or something and you're like, "I want to put all the latest news items in my sidebar," you can do that in a block theme. You can craft this layout in the block editor. Then as a block in the sidebar, you can put a query block over there and have it query just for the news items and output them there. That's their answer to then do that kind of thing.

In the past, that's the thing that we've had to do with PHP. I'm going to write my own custom query, and I'm going to put it over here in PHP - and stuff. But I think modern developers are like, "Oh, I have a news item component, and I will do a fetch for news items. Then I will put that... The output of that I will map over it and put the news items there."

I think that's how a lot of developers think these days. And there's a mismatch between what is able to be done in WordPress and how developers think about doing it. I don't see it changing. I don't think they're going to embrace a component architecture there, and they're going to miss this DX ship that has long been sailing.

Dave: Well, if Matt Mullenweg wants to pay me to tell him about Web components, I could probably do that for them.

Chris: That could be an answer to it, honestly. [Laughter]

01:00:08

Dave: Probably should. Then on a totally different... There's Decap CMS, which was spun off from Netlify CMS. And I'm going to bucket in TinaCMS here, too, which is kind of in the headless idea. But it's more... It's kind of like a get-based CMS. You do a commit, and you can have editing and flows and stuff like that.

Chris: Cool.

Dave: Those would be something to think about, too.

Chris: Yeah. There's Sanity. There's Strappy. There's all kinds of stuff.

Dave: Yeah. Anyway, hopefully, yeah. I don't know if somebody has a CMS they're loving. Let us know. We'd love to do that.

Then I'm going to follow up. We got a lot of turkeys in the chat.

[Laughter]

Dave: From the message last week. Enough to where the pressure is on to actually do a Thanksgiving episode, so thanks, everybody. Gobble-gobble. We really appreciate that.

Chris: Yeah, we heard from a lot of people we don't hear from much there. Apparently, a lot of people listen to the end. Gobble-gobble.

Dave: Yeah. We appreciate that. Yeah, and I don't know.

Thank you for listening to this show all the way to the end. We really appreciate that. Be sure to follow us on Mastodon. That's the good one. Then over... What else do we got? We've got the Discord, D-d-d-d-discord, patreon.com/shoptalkshow. Yeah. Chris, do you got anything else you'd like to say?

Chris: [speaking in a whisper] ShopTalkShow... ♪ dot com ♪