Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another hard-stop edition of the ShopTalk Show. I'm Dave--in the shed--Rupert and with me is Chris--in the office--Coyier. Hey, Chris. How are you doing today?

Chris Coyier: I'm doing fantastic. Thanks, Dave. Happy and healthy. [Laughter]

Dave: 2024.

Chris: It's been a day. Another day in the office. Yeah. Mid-March here, waiting for it to warm up and stuff.

You know we thought we'd just do a bunch of questions because they do build up over a while, and really appreciate everybody that sends them in. And we pick out some of our favorites that are applicable to things going on, and we're just going to do it. So, I'll read the first one, and you can read the next one, and there we go.

Chris Colvin writes in, "Hey, dudes!" Ah... We are dudes. Thanks, Chris.

"I recently asked a question on our front-end subreddit," which I recently learned has a Discord, too. That's interesting that popular subreddits have Discords, or at least webdev does, our webdev, "about a WordPress developer position I'm interviewing for, and I was surprised how vehemently people there seem to argue against taking a WordPress-centered position. Some went so far to say that including WordPress on your resume as a front-end is a career killer. I was surprised by this with the prevalence of WordPress on the Internet and wondered, is there some truth to this or just a few, slightly elitist, framework fans on Reddit? Thanks."

Yeah, I don't know that Reddit is emblematic of the entire industry. People just tend to have some opinions on that there website, just like the old Hacker News and stuff.

I would agree that WordPress is real polarizing sometimes, and I would not be surprised if there was somebody in a hiring position who just had this career, and they just happen to be one of those types of developers that just fricken' hate WordPress. I've met lots of them in my time.

Dave: Mm-hmm.

Chris: And somebody who has an interview with them, they see WordPress, and they're just like, "Eh! Blah!" And they don't hire you. I could see that happening easily. I think that's ridiculous, but--

00:02:34

Dave: It is so disgusting. But it's the truth. There are these weird biases. It's like you say something wrong and people will be like, pfft, "You said it not good. You said WordPress. You're out." You know? I don't know.

I think that it's dumb. I think Reddit also is going to be like new tech is the best tech. What's hot? Literally, the website has "hot." It has a hot button. [Laughter] So, it's always going to err towards what's hot. So, you've got to temper that.

I don't know. I would love to know your thoughts, Chris, because I'm behind the modern WordPress development sort of thing, the curve, but I do think there is an argument to be had that if you are doing WordPress, you are probably in a totally different environment than most tech companies. Does that make sense?

If I'm working on WordPress, I've usually got a LAMP stack server, a LAMP, WAMP, local.

Chris: Sure. Yeah.

Dave: I'm not really NPM installing stuff. I'm not bundling stuff. I'm not doing React dev.

Chris: Oh, I see. Yeah.

Dave: I'm not doing this. I am just kind of living my life in PHP-land.

Chris: Mm-hmm.

Dave: And very light theming. I'm not getting into the whole CSS and JS Webpack, React, Rube Goldberg Machine.

00:04:05

Chris: Yeah, unless you are.

Dave: Unless you want to. Yeah.

Chris: Yeah, unless you--

I was listening to a front-end happy hour where they had, I think, Jason Ball on. We've had him on this show before, too, talking about his WP GraphQL plugin. Every person that's ever installed that plugin is building something that's in NPM, JavaScript-land, so whatever that number is. And that's just one plugin, right?

But I do tend to agree with you. The WordPress sites I generally build don't do that. Although, it's changing a little bit because my muscle memory for wanting that stuff. The last WordPress site I worked on, I jammed Vite into it because I was like, "God dang it! I want something to process my crap," and Vite is relatively simple to just be like, "Okay, I just need my JavaScript bundled up, and CSS bundled up," and it just was able to do that with a little watcher server pretty easily. So, I did that.

Then I even did the little VS Code thing that whenever I open that folder, it runs a command. And that command is NPM run dev, and NPM run dev is Vite, Vite Watch - or whatever it is. It's just like I don't even think about it. You open that folder. Vite is doing its thing. Rock-n-roll.

I only mention that because that's a little bit modern. It's a little bit touching that kind of world that probably people that poo-poo WordPress think isn't involved anymore - or whatever. I'd say, as a random thing, I'm a little behind the curve, too.

There's this concept in WordPress called full site editing that they abbreviate FSE a lot that I don't have a good bead on. Is that what they want you to do? Does WordPress have an opinion like that? Are they saying, "Hey, we want you to continue building themes, but the kind of themes we want you to build are FSE themes," or do they not really care? Are they like, "That works for some sites, but the "traditional" way of just a bunch of PHP--"

They're very different in that a full site editing theme, it might just have a style.css file and then it's something called theme or site.json - or something. It just has a bunch of design token stuff in it, like for real. That's it. You're like, "Oh, these are the fonts used? These are the colors and stuff?"

You don't have this big folder full of PHP files like you normally think of as a WordPress theme. That's important because if you're a WordPress developer, probably a lot of your time is spent in that theme folder, just like, "What's going on with this theme?" Maybe if you're really focused on plugins, that's going on. Yeah.

It is kind of a different world. I would hope that people with their heads screwed on straight wouldn't poo-poo somebody just because they happen to have some WordPress experience. That's silly. I'd consider it a plus a little bit. It just means, "Hey, they've done some work on the Internet. They've been around. They've done some things." Who cares?

00:07:14

Dave: Well, and that's the twist, too. What I'm going to in my head is, like, I would actually rather you have worked on a production WordPress site that had traffic versus you wrote infinite JavaScript on an internal app with three users. You're going to have totally different challenge sets there. You're almost greenfield, do whatever you want, no rules, no consequences on the small use internal app. But any mess-up you do could topple the PHP server in WordPress. You know?

I don't know. I don't think it's a career killer. But I do think there are different types of development. I think you may want to either... If you do take this job... and I think you should, especially in this economy.

[Laughter]

Dave: I think you should... If it's a good job and pays good and does what you want, do it. But I would also maybe look for ways that you can set up your LinkedIn - or whatever - to amplify the non-WordPress stuff you do, and maybe you have a side project.

Chris: Yeah.

Dave: I hate to put that on you, but maybe that's a really great way to show that you don't just know WordPress.

Chris: Sure.

Dave: I think maybe you just write a LinkedIn post about how you're taking Vite into your--

Chris: Oh, yeah. There you go.

Dave: --into your WordPress-ification. That could probably get you your next job.

Chris: It just might. I think there's an element of just, "Hey, read the room." Ask them some questions first. Don't roll in there and be like, "Hi. My name is Jim. Love me some WordPress. Does this job got the WordPress because I'll do that?" You know? Whatever.

Be a little more quiet about it. If you can sense that they're into that, then lean into it. If you can sense that whoever you're talking to has a little bias against it, then just shut up about it.

[Laughter]

Dave: "Hi. My name is Mr. WordPress, and I would like to work at your company."

[Laughter]

Chris: "I've been pressing words my whole life." Yeah.

Dave: Mr. WordPress, do you know any other software? "What in tarnation?! I do not! I only know WordPress. I would never." Yeah.

Chris: Yeah.

Dave: Mr. WordPress is... Don't be Mr. WordPress or Mrs. WordPress. Yeah.

Chris: That's all Chris wanted to know there, so I think we're good to go. You know we got a sent in audio question here, so Chris Enns, slide that MP3 in there if it still resolves. It looks like it does. A friend of the show, Steven Garrity, wants to know.

00:10:11

Steven Garrity: Hi, Dave. Hi, Chris. It's Steven Garrity here from Prince Edward Island, Canada, and my question for you today is what are your most and least favorite parts about building a website these days?

My answer to the question would be: my least favorite parts are setting up the build process and the general tooling around that. Not because it's not important, and I love when it's done well. But it just feels like it's one step removed from actually building the website. It's probably also because I'm not great at it.

My most favorite parts would probably be writing the basic CSS for some of the most fundamental elements of a site like button styles, link styles, basic form styles, font styles, things that sometimes are global because that's what building websites used to be. Anyhow, what's your least and most favorite parts? Thanks a lot. Bye.

Chris: What are yours, Dave? I like straight-up levels of fun. Is there anything you still consider, "Ooh... I like this part"?

Dave: I like when there is a pattern and there's new tech. Does that make sense? Dropdown with popover or dropdown with details. You know what I mean? When there's a new advancement in CSS and can I squeeze in or do the old trick with the new thing, that's the stuff I kind of like and I try to look for opportunities to mess with that sort of stuff.

Grid has changed my life, but it's sort of... I think, last week on the show, we had Fred on to talk about Astro's new DB. I have a project, and I was building out some big, dumb, YAML thing, and I was like, "You know, this is probably a great use case for Astro DB." Those sort of things where a new tech happens and it can fit, and I can stop doing it the dumb way or maybe fix that, those are still my favorite parts, I think.

Chris: That's awesome.

Dave: Animation, scroll-triggered animations are fricken' awesome. I only understand them half, but they're fricken' great.

Chris: Oh, my God, dude. You've got to look at that API one of these days. It's so good. I'm glad this went through some... I happen to know it went through some revisions, I think.

I think there's a world where you imagine it first, and you're like, "Okay. API. Uh... The duration of this animation is just the length of the scroll, so done." You know?

But they didn't. That's certainly possible. But they did much more than that. They did this thing that it ties to the current visibility of the element on the page.

If that's all they had before -- and I'm not sure if this is exactly how it went down, but you're like, let's say you're 75% scrolled down the page and that's when this little section comes in that has little blog post cards - or something - and you want them to pop up a little bit when they become visible. How would you do it before? You'd just have to be like, "Uh, I don't know. I guess that's 75% scrolled we start doing that." That's not going to cut it. That's too magic number.

But you can say, "When this element becomes in view," and it can be immediately. It can be only when it's 100% in view. It can be when it's 50% in view or 25% in view. Then make the animation apply, and make it finish when it's, say, halfway up the page. Or make it finish when it's 100% of the way through the page.

It's really cleverly done. How long do you want that animation duration to be is between two points on the scrolling thing.

Dave: On a viewport, yeah.

Chris: It's like, "Uh! That's so good!"

00:14:19

Dave: Yeah. No, they did a really good job with it. And I've tried some things, but it gets into this whole math element, which there are people... the person--I forget who it was. Was it--? I have Scott Kellum in my head, but I don't know--who did the 3D, like build a cube in CSS using CSS perspective and all that stuff.

Chris: Yeah, I think of Desandro with that.

Dave: Okay. Desandro, yeah.

Chris: That was a pretty common thing to try to do.

Dave: Yeah. People who intuitively grasp that, I'm always amazed.

Chris: [Laughter]

Dave: I'm just very, like, "I think I get it. It's back-faced visibility. Ah!"

Chris: [Laughter] I know.

Dave: [Laughter] So--

Chris: Then the draw drops for the Anna Tudor stuff and Temani Afif - and whatever - who are making not only a cube but a dodecahedron in 3D - or something.

Dave: Yeah.

Chris: You're like, "I'm out. I'm out."

Dave: You're just like, "It's the Tron cycle but in CSS." You're like, "Wow! Whoa!"

[Laughter]

Chris: Yeah.

Dave: It's the animated film A Bug's Life in CSS. [Laughter]

Chris: Mm-hmm.

Dave: Wow! Amazing!

Chris: Yeah. There are these... Yeah. I could go on and on because CodePen is fortunately home to some of that stuff that you see. CSS paintings by Ben Evans.

Dave: Oh, yeah. What are your favorite parts of the Web, like building, or least favorite?

00:15:55

Chris: I don't know. There's lots of it. Solving some kind of UX problem, like thinking out four or five ways to do it, even collaboratively, is very fun to me. I'd be like, "Ooh, yeah. That's it. You nailed it. That's the one." Like, "Oh, I love it. We landed on the perfect solution," kind of thing. Or "It's better than it was, so ship that." I like that.

Technology-wise, no surprise probably to anybody, I really do like writing CSS. If that becomes part of what I have to do that day, like, "I need to turn this concept or these decisions into CSS," even just refactoring CSS is fun. There's kind of a UI PR that came through that I was like, "Ooh, that just needs some work." I get it. It's all good.

It was just temporary anyway, so it wasn't anybody's fault that it wasn't clean. But I'm like, "I'm just going to make this follow the patterns that we've already established for CSS on this site," and that was very satisfying and fun and nice, partially because of CSS's evolution.

I'm like, "Oh, I see what they're trying to do here. Don't need to do that anymore. That's a two-liner," or a zero-liner in some cases. But if something is already display grid or something, I'll just leave it alone or things like that.

It's kind of interesting to see somebody who hasn't written CSS in a minute reach into some stuff and be like, "Wow, you're setting all kinds of stuff that's in this design system you didn't even have to." If you use the select element, don't worry about setting its background and hover colors and stuff. The design system has already got it.

Dave: Yeah. Yeah.

Chris: I really like that CSS stuff these days. But I liked your answer, too. I think that's fun to kind of try out new tech and see how it might potentially help you someday.

Dave: Yeah, like abusing a range slider or something to build something squeezy or something like that, that's fun.

Chris: Yeah.

Dave: It's abusive. It's probably really inaccessible, but it's fun. It's interesting.

There was that Safari toggle came out, but some people would make a toggle that's ten pixels wide that would go from zero to one and only have a step of one. So, it's basically a binary input.

Chris: Oh... What?!

Dave: It may be a terrible idea, but it kind of achieved... I don't know. That stuff is interesting.

Chris: Step one on a range slider.

Dave: Yeah, step one, ren slider zero to one.

Chris: Hilarious.

00:18:35

Dave: And on or off. I have a recent example of something I don't like. Actually, I started making a game for the play date, the little yellow square guy.

Chris: No! Really?

Dave: Yeah, I started playing around with that.

Chris: I've got one of those.

Dave: Yeah. Mine is somewhere. [Laughter] But anyway, I just wanted a lot of limitations and this felt like it had it. But I was making it, and then I chose this framework that gave me a Zelda-style top-down. You go to a room and go to another room and, like, "Ta-da!"

Chris: Okay.

Dave: This is not Web tech. This is in Lua. It's a little bit out there for me. But I was... I'm enjoying it. I'm hacking it, the demo, kind of making it mine, feeling out the bounds of the game.

Then somehow I broke the piece where you go up (north) and go to the room above the north, and your guy shows up at the bottom. It's that piece of... I don't know. That's the whole Zelda thing is going from room to room. That's why I used this little framework thing because that was in the thing.

Then I broke it somehow or it was never working but I swear it was working at one point. So, I broke it, and I don't know how to fix it now. It's going to be a whole couple of days stopper to figure out how to fix that piece. Yikes! That's just a frustrating thing.

The only other facsimile I can think of is the Nuxt 2 to Nuxt 3 upgrade. That was a hard upgrade. [Laughter]

Chris: Mm-hmm.

Dave: Nuxt was like, "Oh, it's going to be easy. We're going to make all these tools and stuff." It's still a hard upgrade. I don't know people who are... I think most people are not upgrading. They'll just rewrite the whole thing because that's what's easiest.

Chris: Oh, wow.

Dave: This whole dependency--

Chris: Is Nuxt 2 still in Vue 3, though?

Dave: Nuxt 2 can run Vue 3, but it's in Vue 2.

Chris: Ew.

Dave: Which has been EOL'd and all this stuff.

Chris: Yeah.

Dave: It's a bad situation, but the upgrade was super hard. [Laughter] When you're building an app--

Chris: That sucks. I expect it to be a little chiller than that. Upgrades like that tend to be... They just tend not to be so hard. They allow more incremental crap.

Next is just edging with some troubles with it because they're like, "You know how you use this pages folder or whatever? Now there's an app folder, too, and you can incrementally move stuff to it." I'm like, "Ooh... A new folder that's that fundamental? Oh, no!" You know?

Dave: Yeah. Yeah.

00:21:38

Chris: Anyway, Astro has been generally chill. I heard a little chatter in the Discord. Fair enough that they've only been around a couple of years, and they're on, what, 4.5 or 5.

Dave: Yeah. Yeah.

Chris: I shipped a website to production at 0.8 not that long ago.

Dave: Wow. Wow. Yeah.

Chris: But I did upgrade it at one point, and I was like, "Oh, I see. This is a little different." But it took, like, an hour maybe.

Dave: Mm-hmm.

Chris: There was error messaging that helped along the way. That's more in line with what I expect.

Dave: Yeah. I wonder if... This might be an app that somebody could build, but a pain scale, like upgrading from 2 to 3 of something or 4 to 5 or zero to 4.

Chris: Yeah. How bad is it?

Dave: What was the pain scale?

Chris: Yeah. Hey, you want to know who wins?

Dave: Who?

Chris: WordPress.

Dave: Ooh...

Chris: You know what happens when you ship a WordPress version update? It just works.

Dave: It works.

Chris: Any version you jump to. They don't break anything ever and it's awesome. [Laughter]

Dave: [Laughter] Yeah, I feel like they learned their lesson. Well, and this was kind of old tech days (right), PHP. But you're sending an update over the wire and it has to land and it has to update. It pre-flights the whole update and then it commits it if it was successful. That's wild. It runs all the migrations, all that stuff.

Chris: Yeah.

Dave: Incredible.

00:23:14

[Banjo music starts]

Chris: This episode of ShopTalk Show was sponsored by Jack's Radical Design Course. That's radicaldesigncourse.com/shoptalk.

If you could lick a three-pound toad and magically become an incredible designer, would you do it? I would. [Laughter]

And what if instead of an organic wart machine, it was a rebellious video course? And instead of licking it, all you had to do was watch it and follow along? Would you do it then, fair listener?

Well, this ad script that I was handed might suggest this toadless, wartless Web design course by Jack McDade, the creator of Statamic, is anything but boring. It will not teach you how to copy over used trends nor surrender to the safety of so-called best practices and cookie-cutter templates. Instead, it teaches you how to develop your own personal style, how to write content that will be remembered, how to use design to stand out in a crowd, and how to design quickly and efficiently so you can get on with the 71 other things on your to-do list.

Don't I know it? And I love Jack's style, too. This is good copy. He's an excellent designer, too. I'm going off-script. Sorry.

And yes, even though Jack wrote the script I'm reading to you right now, you don't have to take his or my word for it. Real customers of this course have called it exceptional, hilarious, and more life-changing than toilet paper. So, if you have the itch to build new skills and create something original, check out Jack's Radical Design Course at, again, radicaldesigncourse.com/shoptalk and use the code SHOPTALK (all caps) to save 10%. Prior design experience not required. Burnt-out designers welcome.

[Banjo music stops]

00:25:04

Chris: Fantastic. What do we got next, Dave?

Dave: We got a question from Dave's Blinking Cursor. I assume that's mine.

Chris: [Laughter]

Dave: "Would love to hear your thoughts on HTMX. Have you had a chance to try it out yet?"

Chris: Hmm... I have not actually tried it. Although, I've heard plenty about it.

Dave: Yeah. I've read the docs. I've seen it. I've even done stuff like this in the past, like jQuery versions of this. [Laughter]

Chris: Sure.

Dave: Where I would ask Rails for a Rails partial and, in Rails, could spit out HTML if I said, "Accepts HTML," on the request. I would kind of do this, and that was kind of how Turbo Links kind of worked.

I do think what's cool is HTMX is pretty well known, I guess. If I slipped DAVEMX into a project, that's a hair-raising experience. If I sneak HTMX into a project, people would be like, "What's this cool new thing I heard about on Reddit?" It has that going for it, I would say.

Chris: Right.

Dave: I think just the universality and distribution-y-ness of it is good. Yeah.

Chris: That helps the world, in a way. Yeah.

Dave: Yeah.

Chris: Notably, it's not a router, really, right? The way that you build with it is pretty aligned with the old-school way of building websites. That jQuery way is not... Is closer to the HTMX world than it is to Vue or React, certainly.

Dave: Mm-hmm. Yeah. Yeah, I think... Yeah. I think it's cool. I think it's great. I think it also depends on what you have set up. You have to have a server that can serve back HTML as a response.

Chris: That! That!

Dave: Little chunks of HTML, right?

Chris: Are you listening, everybody? You need to be basically a backend developer to use it. It's more of a backend tool because it says, "Your API, when you hit it, you can do whatever you want. It could be rest. It could be anything. Whatever."

When you hit one of those URLs, though, what it wants back is HTML, not JSON. So, figure it out. There are less tools for that, I feel like.

I'm almost surprised it's not more popular in WordPress because it's like WordPress rest API will give you the HTML of something like a post.

Dave: Mm-hmm. Mm-hmm.

Chris: Or a group of posts. That's what you need. You need a server that's returning HTML at endpoints. If you have that (or are very comfortable building that), then you can take advantage of HTMX greatly. But HTMX itself does not help you with that.

They're like, "You need a server that can return little chunks of HTML. Do you got that? No? Then build it yourself."

Dave: Yeah. So, I think there's something to be said about this pattern. You're sending requests and getting this HTML back. I think that's kind of cool. But I also think you have to be set up for it. And so, if you're not set up for it, which I don't know many that are, or you're writing middleware to do it all.

Chris: Yeah.

Dave: You have to write it somewhere. That's the thing.

00:28:50

Chris: I've listened to a bunch of interviews with the guy who made this thing, and you will never hear the word hypermedia more in your life. That's what is the fundamental kind of -- call it computer science, if you will -- thing behind it.

Dave: Yeah.

Chris: Because the thought is, what if HTML did this? That's, I believe, why it's called HTMX is because, in a perfect world (for him or the people that really like this philosophy), HTML failed to do this stuff for us, so we're going to augment HTML as if it had more powerful hypermedia controls.

Dave: Right.

Chris: I like projects that have a philosophy like that. They're like, "We have a strong philosophy. We publish papers on this philosophy, and here's the framework that goes with that philosophy."

Dave: Yeah. Yeah, and isn't it the HATEOAS (hypermedia as the engine of application state)? I think there's something elegant as, like, you're sending state down as a JSON chunk, and you're saying, "Hey, browser. Do what you will with this JSON chunk." Sort of like an agnostic, but then they're saying, "Take it a step further and make the server just compute that HTML that it would render." I don't hate that. It's actually more friendly to clients, like making your iPhone.

We just did that Web sustainability episode. Making your iPhone, shipping it to JavaScript to process and stuff so that it can spit out a list of LIs bespoke to this page. That's a lot to put on a phone (times a million views).

Chris: Mm-hmm.

Dave: Making the server do it is actually pretty efficient, I should say. Pretty efficient, so that I like about it.

There is, I think, a meta-discussion. I know they got kicked off of Web.dev or ourwebdev or something like that, the HTMX, for a while.

Chris: Yeah, even the Twitter account is very spicy, mean, and stuff. It's a big turnoff for me, but hearing the actual dude behind it talk, he's not an idiot. He's a smart guy, so I almost give him some leverage.

Dude, you have no marketing chops. You tried this. It worked. So, there. Lean into it. I get it.

Dave: Right. Right. I think that's kind of probably how it happened. Is it talked about just because it got talked about, like a brute-force attempt to make it popular? [Laughter] Is that why? Was it a social exploit that made it popular or is it really useful for people? I don't know.

That said, we were just talking about the YouTubers before the show. I know Primagen likes it for Go apps and stuff like that or whatever.

00:31:54

Chris: I could see it. I could see it if you're a Go dev and you're constantly making little routes. It does seem to fit that world, to me, pretty well.

Dave: Yeah. It's almost like if you were only doing a backend app that serves HTML, this is a way to go. You're not even getting into whole client-side crap. That's compelling.

Chris: Yeah. What's the sprinkleability factor of it? Do you have a good sense of that?

Dave: Ooh... sprinkleability.

Chris: Because, you know, like Lit is sprinkleable, and Petite Vue is sprinkleable. You could argue jQuery is sprinkleable. They're starting to get pretty big, but I've seen things that are like, "Oh, HTMX is really good at, for example, infinite scroll." You scroll down and it makes a request to get some more stuff and jacks it in there.

Is it worth loading HTMX just for that? Is it small enough for that? Let's see what the--

Dave: Well, it's a 15K Gzipped, 44K minified.

Chris: Eh... It's in that jQuery territory.

Dave: In the jQuery territory. I don't know. Yeah, I mean it could be. I think you don't want to do it everywhere, maybe. Eh, I mean I think it's a cool tech. If I came across it in a project, like I'm saying, I would rather if somebody took this approach than use HTMX so that I know what it is when I hop into a repo. I understand, "Oh, that's what they were doing."

Chris: Right.

Dave: It's not a mystery to me.

00:33:32

Chris: I wonder what kind of... This is just ignorance. Sorry, everybody. We're doing speculation on a podcast rather than actually just knowing what's up.

You can put attributes for clicking (and what you want to happen with the clicking) right on whatever HTML element. Is it actually whatever or does it limit what's going on? The homepage is like, "Look, you can put a post on a button." Buttons can't post by themselves normally.

Dave: No.

Chris: They've got to be in a form.

Dave: Right.

Chris: Then you click, and then the form can post. Fine.

Dave: Mm-hmm.

Chris: But this is saying, "No, I don't want to wrap it in a form. I just want to post right from the button." It seems kind of fine to me because you can already click a button. It already has focus state and all that stuff. Hitting return on it presumably will continue to trigger this event and stuff, so the accessibility isn't ruined here. But if it was as div and you put HX post on it, that's not good because you can't focus on it, so you've screwed accessibility. And the framework, in a way, isn't trying to prevent you from doing that.

Dave: Yeah. To my knowledge, it's not. Yeah, so the potential for foot gunning is up there. But you know no JavaScript helps you. React doesn't help you. Nothing helps you solve this.

Chris: That's true. So, why be mad at just one library for not helping you when none of them do?

Dave: Yeah. Be mad at everybody all the time.

Chris: [Laughter] Fair enough.

Dave: That's the secret to being a senior Web developer. Well, I feel like we answered that one.

00:35:02

Chris: Sure. Rafael here, Ferand, is kind of wondering about PNPM. "It seems like PNPM is the trending Node package manager right now. Everywhere we hear people talking about it, we only hear good stuff. Have you used it? Any reason not to jump on this train? Are the benefits worth moving to it when working on an existing project or when starting new projects?" that kind of thing.

Have you PNPM'd, Dave?

Dave: [Laughter] That sounds not safe a word.

[Laughter]

Dave: Yes. I have before. I'm not on it right now. There was something that was like, "Oh, it's asking a lot of me to move over to this." It was something like I had to set up my Node or something to use a feature.

Chris: Right.

Dave: That feature that they're talking about turning on by default, and then you'd have to turn off for NPM. Anyway, I'm blanking on it right now.

PNPM is cool. As I understand it, it installs all of your Node modules not into the project Node modules folder. It installs it to a root folder, like your user folder.

Chris: Mm-hmm.

Dave: And so, everything is kind of global. Then it's like - whatever - .pnpm, and then you have a folder for React at 1.2 or React at 14, React at 15, React at 18.

Chris: Mm-hmm.

Dave: Then your project says, "Cool. I'll just get the one I already have. If this project is resolving to 18, I'm just going to grab the one from disk." And so, it speeds up the whole process, right?

It also solves the Node modules black hole problem, sort of, because you just have one black hole. You don't have a thousand black holes on your machine.

Chris: Yeah. Okay. Isn't the way that Node resolves modules is to look first in the current directory, but it's happy to go up directories? But in PNPM, if there's only one directory to look at, that seems to add some efficiency to the party.

Dave: Yeah. Yeah, and it's going to be a shared repository of things on your system that it's going to go look for.

Chris: What if you only have one project? It's not that useful then, or it's most useful across multiple projects?

Dave: I think most useful across multiple. If you're a company with ten repos, I think it'd be great. If you have project one, project two, project three, this would be really great to help you.

When people are moving faster because chances are they've installed project one when they open project two. So, when they open project two, the dependency map or graph is probably going to be very overlap on the Venn diagram. So, I think you're going to have a faster time installing that.

Chris: Oh, I see. I wonder if that's true for a mono repo, too, then. Is it inherently mono-repo friendly?

Dave: I think it has mono repo features. That's part of it, too, is it has this whole workspace idea. NPM has that, too. But it has kind of a mature workspace sort of idea. Yeah, I think, honestly, for my next project, I would consider it.

00:38:24

Chris: I wonder what the gotchas are, though. There's got to be some, right? Is there crap that's just not compatible with it, or is it just magically 100% compatible with anything NPM can do?

Dave: Yeah, I think it's pretty compatible. The thing I was talking about was Corepack. Sorry.

Chris: I know all about Corepack.

Dave: Of course, I should have known it was Corepack. Corepack is what you have to enable to run PNPM.

Chris: Oh, you do?

Dave: And you also have to do it in later Yarns, yeah.

Chris: Right. Corepack is a Node thing.

Dave: It's a Node feature, a module for Node, and you have to turn it on for Node.

Chris: Right, and there may be implications to that.

[Laughter]

Dave: Node is a good software. I do not know what you're talking about. Yeah, I think it was... I'm looking here. PNPM, it wasn't really until Node 16, 18, 20 where really it very worked. I think I was kind of in a Node 14 project or 16 project when I'd first tried it.

Chris: Yeah.

Dave: It was kind of like, it should have worked but it was just kind of beefier. I don't know. Beefed it.

Chris: That's kind of cool. There's even a package.json change. I'm not sure how directly related it is, but you can demand which package manager a project uses from your package.json now. It's the package manager property. Then say, "You've got to use PNPM for this." I don't know if that's good or bad. I would say it's good at a company so that you don't have one of your six developers is just like, "I like PNPM, so I'm just going to use it." You're like, "Well, I don't want random crap going wrong on your machine, please." You know?

Dave: Right. Right. Yeah, I don't think you should YOLO this because, with Yarn, you could kind of use Yarn and no one would know. You know? I think it'd create a Yarn lock - or whatever. But you don't commit that.

Chris: If you don't commit it, though, that's... I mean I get what you're saying but that's not a good vibe.

[Laughter]

Chris: Don't do that.

Dave: What do you mean? You don't have just 12 files you don't commit, like 12 ghost files? [Laughter]

Chris: Because that lock file is pretty important across your... Across the people that you work with.

Dave: Yeah.

00:40:48

Chris: Okay, here's a little story. We used Yarn 1 at CodePen. Yarn 1 is old.

Dave: Whoops! Yeah. [Laughter]

Chris: But let me tell you, listener, that Yarn, at one time, was better than NPM.

Dave: Mm-hmm.

Chris: It did clever installation stuff. It was faster. It had workspaces. It could do stuff that NPM can do.

Yarn 1's days are over.

Dave: Yeah.

Chris: Just default NPM is definitely way better than Yarn 1.

Dave: Yeah.

Chris: But Yarn kept evolving, so we recently have upgraded to Yarn 4, which does use the Corepack and all that stuff.

Dave: Mm-hmm.

Chris: Yarn 4 is cool. Yarn 4 has options that you can be like, "I want it to behave like PNPM operates."

Dave: Yeah.

Chris: With the global cache thing. So, if you want the spirit of PNPM, Yarn 4 can just do that if you want. It can also do it the way that NPM works. If you want it to work just like NPM, you can have it do that, too. And it has this other crazy version that bundles all your dependencies up as, like, little zip files - or something - that you commit. So, the next person doesn't even have to install them. It's just ready to rock.

Dave: Yeah.

Chris: Yeah. It's like a really weird way of doing stuff, but that's cool. It can especially be nice for something like CI where you don't even have to install because all the dependencies are just ready to use.

Dave: Yeah.

Chris: That's cool, I think. [Laughter]

Dave: I could see that. Yeah. No, I think Yarn got better. One cool thing Yarn does, too, is if you... You know how when you install Sass and it'll compile itself? Lib Sass used to do that but new Sass, Dart Sass doesn't. But it would compile and add a binding.

We did this with Puppeteer, like a browser would install. NPM will attach the architecture, the CPU architecture, to that binding, to that install and put it in the lock file. And so, when you go to a server (or another computer) that does not fit that, it has a full heart attack.

Chris: Hmm...

Dave: Yarn doesn't inject that information to its lock file, so it actually is better for cross-platform stuff. I think PNPM has that feature, too.

Chris: There's, yeah, a lot to think about here. I would say, as general advice, if you're listening to this show--we just talked about a lot of complicated stuff--what you should use is NPM because NPM is pretty good and it's really, really, really with the grain of Node and how things should operate. If you have a real strong reason or some legacy stuff to not use NPM and want to use Yarn or PNPM - I don't know - go ahead, I guess. There can be advantages. But it feels like next-level stuff that I would just hope that people don't have to worry about on a normal day-to-day basis. For the most part, packaged managers are pretty interoperable and do a good job. So, rock-n-roll.

Dave: Yeah. Generally, they do the same thing a little different way, so it tends to work.

Chris: Yeah.

Dave: All right. Well, hey, we're hitting the hard stop here, so we better power it down. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Send in more questions. We love them. We love questions!

Then join us over in the D-d-d-d-discord, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: Hmm... ShopTalkShow.com.