Transcript

[Banjo music]

MANTRA: Just Build Websites!

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

Chris Coyier: I'm doing super good, good. Got a good--

We reached into the cookie jar. Tell me. Tell me. Have I what?

Dave: Have you ever watched the Nickelodeon classic Sam and Cat featuring Ariana Grande?

Chris: No.

Dave: Ariana Grande talks like this. It's really weird. I don't know why she did that for four seasons. It's bizarre.

It's weird. Anyway, that's all I have to share. My daughter started watching it, and I'm like, it's cool except why did she talk like that? [Laughter] Anyway...

Chris: Isn't she like a famous singer too?

Dave: Yeah, she's famous. She's very famous.

Chris: And definitely doesn't talk like that in real life.

Dave: Definitely does not talk like somebody - I don't know - who got--

Chris: This is from 2013, which is not that long ago. Why doesn't Nickelodeon have its own? Do they not have enough IP to make their own streaming thing that you have to subscribe to separately?

Dave: Oh, they do. They do. It's on the Paramount+, I think. They're part of the Paramount family with CBS.

Chris: Yeah, except for this Sam and Cat show is on Netflix.

Dave: Yeah.

Chris: So, maybe they--

Dave: I think they offload a few to as advertising almost [laughter] to get you to--

Or Ariana Grande does a Netflix deal and that comes with it or something. I don't know. There are all kinds of -- who knows.

Chris: It's complicated.

Dave: And she talks like this... All right. That was a really--

Chris: [Laughter]

Dave: Welcome to a Web design show. I know we just did a whole Ariana Grande segment, but you know. There we go.

Chris: Hmm. Hmm. Yeah. Well, that's what you're going to get.

Dave: She talks like this.

00:02:07

Chris: [Laughter] Elon William Kalkman writes in, "I built a website for a customer." Hey! We've all been there. Right?

Dave: Yeah.

Chris: You more than me.

"WordPress site over the last -- worked for him for years," which is great. I hope you're billing him monthly. "They add a bunch of features. Not a big deal. Total custom theme. Minimal bloat. But, over the years, it's getting a little more bloaty."

Okay. Yeah. Fair enough.

"Now, the latest round of changes, this is what they want to do to the WordPress site that's already getting a little more bloat. They're requesting a bunch of cool landing pages."

Dave: Mm-hmm.

Chris: "And these landing pages have new, flashy designs that deviate from what's going on (on the rest of the site)," so one-offs.

Dave: Hmm.

Chris: Kind of, right?

Dave: Mm-hmm. Mm-hmm.

Chris: Elon is like, "What do we do? Do we go SSG and just make a one-off totally outside of the realm of whatever else is going on there, and then just use the same scripts?" He says, "Use the same GTM," which means Google Tag Manager, which means then it's tracking the analytics and all the crap the same way, which is no problem, right?

Dave: Yeah. Yeah.

Chris: You just put that one script and share the same script across, too.

But he's like, "Well, then that creates two code bases. Is that the way to go, or not, or should I just, I guess, continue doing it in WordPress?"

Dave: Um... I'd be curious to your answer, Chris.

Chris: I would do it in WordPress because it's an assumption that everything WordPress has to come along for the ride when you make a page. But it's totally not true. If you make a page in WordPress and you call it page-xxx - or whatever - then you publish a page called xxx, you don't even have to write any code. It will just use that template and that template could have the word "fart" in it and "fart" will come to your browser.

Dave: Mm-hmm.

Chris: No WordPress anything comes along for the ride. WordPress stuff comes along for the ride when you start calling get header and get footer and stuff.

Dave: WP Content. Yeah.

Chris: Yeah, so just don't do that.

Now, you haven't totally avoided WordPress because it's still going to end up making one query and stuff by default. But assuming you have some caching in front of it, maybe you have Cloudflare in front of it anyway, it's irrelevant what WordPress is doing behind the scenes. It's super-lightweight. That's your entry point then for something else.

Now, why would you need an SSG? An SSG implies you need a build thing and you're going to have multiple pages that need to be built. I'd say you definitely don't need the SSG. You need a one-pager. Just handcraft some HTML from the doc type on down in that custom page template, named specially .php. You can use a little WordPress stuff if you want to, but you don't have to use a single thing. Just handcraft these landing pages (with your GTM at the bottom if you absolutely have to - if you must use that piece of crap).

Dave: Probably for landing pages. Right? Yeah.

Chris: Yeah, you definitely need a little track-y, track-y on there. Yeah, just don't leave WordPress, but just make a custom one-page site in there. It sounds like there's a bunch of them, so just do it individually each time. It seems fine to me.

00:05:21

Dave: Yeah, I was going to say you could just hand-author the page. You could put in - whatever - about.html in the root of your WordPress project. I don't think they recommend that, but you totally can.

Chris: Oh, and it'll serve that? Yeah, it will.

Dave: And it'll serve that. You may have to hack around with -- whatchamacallit--

Chris: The HT access to get it to--

Dave: The HT access because I think it tries to route everything right through index.php.

Chris: Yeah.

Dave: But the page-about or whatever -- let's come up with a clear landing page /productledgrowth.

Chris: Yeah.

Dave: There it is. That's it. That's the cool term, page/productledgrowth, and people land there at the product-led growth slug, and there you go. You have it. You have that.

I would totally code in there. Then if it's a handful, figure it out. But you could kind of go one more next level. Are you ready?

Chris: Okay.

Dave: Go one more next level and come up with a set of marketing components or something that are like a design system. Convert them to blocks. Just build the pages in Gutenberg.

Chris: Oh, yeah. Sure.

Dave: Give it its own blank template. I do this for my blog sometimes. I have a blank template, and if I really just want to go wild, I could just--

Chris: The blank template! There needs to be a blog post and some research on it. We could do a whole show on that. Everybody in the history of time, eventually a CMS has a blank template.

00:06:55

Dave: Blank template, man. Literally, for Luro, we were talking about it the other day.

Chris: Yeah.

Dave: Because we have a flow, right? You start here and end here. You have to complete it. If you don't, if you just start clicking around mid-flow, you kind of mess up the flow, right? We have to kind of lock you into this flow.

I just went through -- we use Gusto. Have you heard of Gusto?

Chris: Yeah.

Dave: I'm going to put a link with a referral code because I get--

Chris: The payment thing? Yeah.

Dave: --Gusto credits. It's basically HR, like HR software. Robin Rendle used to work there.

Chris: It's HR that's amazing and is like $20 a month. I have no idea how they get away with that. If Gusto 10x'd their prices, they would lose 2 customers because it's so useful.

Dave: Don't. Please don't tell them that. But yes, you're right.

[Laughter]

Dave: Because too, we're a four-person company, a five-person company, and we need an HR department. You know what I mean?

Chris: Yeah.

Dave: That just tells you all the crap - all it takes. And so, anyway, Gusto has a really good onboarding, but you log into Gusto and it doesn't let you do anything until you finish filling out your profile, filling out all your junk.

Chris: Yeah.

Dave: Then it's like, "Do you want to do this or do you want to skip and do it later?" They have a blank template somewhere in there. Or the other option is to do it in a modal that you can't close - like whatever.

Chris: [Laughter]

Dave: The blank template. The blank template is a power template, a powerful template. It's basically just your CSS file and maybe some social metadata.

Chris: Yeah.

Dave: A way to put some stuff in the head.

Chris: It can grow, too. I used to have a blank, and then I had blank with sidebar.

Dave: Blank with sidebar, yeah.

Chris: Blank with header - or whatever - that would use some of the site but otherwise be white.

Dave: People don't talk about the blank template.

Chris: No, they don't. That would be an awesome blog post: the blank template.

Dave: All right. Maybe. You'll do it before I do because you're better at blogging. You're good at blogging. [Laughter]

Chris: The problem is I have these good ideas and then I half-ass them.

Dave: Well, no. You do it--

Chris: I hit the publish button, but--

Dave: You hit the publish button. You are good at doing it, but you're appropriate amount of assing. I am over-assing.

[Laughter]

Dave: I sit there, and I'm like, "Let me write a grand ... upon which I shall pontificate the wonderous glories of the blank template. Yes, let me research time and history." It's just not worth it.

00:09:34

Chris: It happened to me this morning, though, because I had this idea. I was annoyed at Facebook because there are six tabs across the bottom of your mobile Facebook app. I'm sure most of you have deleted Facebook. That's fine. I haven't yet, but it's not because I like Facebook - yadda-yadda. I'm not going to explain my whole life to you.

The problem is, you open Facebook, even if you do it once in a while, there's this watch tab in the bottom. You click that, and it's just dumb click-bait videos that you swipe through forever because everybody is scared of Tik-Tok, so you've got to have that.

Dave: Mm-hmm. You've got to put Tik-Tok.

Chris: But they'll force you to click on it almost because it'll have a little red dot on it. It's like, "You have an unwatched video," even though these videos aren't from people you follow or anything. They're just from the global world of watchable videos.

I started to get annoyed by that because even I'll get sucked into it, and it'll be like four minutes of some guy making a food contraption or something. It doesn't even have a satisfying ending or something, and all the comments are like, "Four minutes wasted of my life," and I'm like, yeah. I actually kind of agree with you.

Dave: Mm-hmm.

Chris: Why did I waste my life watching it? Then there's marketplace, too. I click on marketplace, and it's like, "Does somebody want a dirty cigar box?" or something. I'm like, no! Why did I click that?

Dave: Mm-hmm.

Chris: Why did I click any of this?! You know?

Dave: Mm-hmm.

Chris: Anyway, I long press on there thinking maybe just maybe they built something to customize this, and you can! It just pops right up, and it says, "Hide this," or "Remove this from the shortcuts bar," they call it. I'm like, "Oh, okay." And then I did for marketplace too. Now, my Facebook is really nicely cleaned up. I'm like, "That's good! Good job! Thank you!"

Dave: Yeah.

Dave: You know?

Dave: You can use the parts of Facebook you care about. You don't have to use all of Facebook, or you're not confronted with all of Facebook. You just get the parts you care about.

Chris: No, you don't, and it just seemed nice. Turns out Twitter has it, too, in Twitter Blue, which is $5 a month. If you want that, then you can - whatever.

At first, I didn't think you could. Then it was actually our very podcast editor who reminded me -- thanks, Chris -- that you could do that. I popped into the Twitter Blue settings, and I turned off Spaces. I don't hate Spaces as a product, but every time there's a fricken' Space, it's about crypto (on my thing). And every time, I'm like, "Who is it?" and I unfollow anybody because I just feel like I'm just not ready. Whatever. I'm trying to be a little middle ground on it, but--

Dave: It's either crypto or it's Kelsey Hightower and Angie Jones talking about back-end stuff I don't understand. [Laughter]

Chris: That would be nice. Yeah.

Dave: Well, it's cool, but I've hung out there for about exactly five minutes, and then I'm like, "I'm so out of my league here."

Chris: Right.

Dave: Yeah.

Chris: I get some entrepreneurial, like, "Pitch your stuff," stuff.

Dave: Ooh... ooh... startup pitches?

Chris: Never anything just casual or interesting, good.

Dave: Yeah.

Chris: Yeah. Yeah, maybe that's your ballgame. But anyway, I hide Spaces. I don't need that.

Dave: Yeah.

Chris: And I hid something else, too. I can't even remember. I think it was my communities because I'm in a couple, but I'm not active in any of them, and they're useless to me.

Dave: Communities, I kind of skipped, but I don't know. Maybe I want to be in some, but it also just seems like another list I needed to pay attention to.

Chris: They seem deadsville. I haven't been in any that -- I have been in one with lots of people in it and nobody is saying anything other than, once in a while, it'll be like, "Does anybody need a job?" You know, kind of thing.

Dave: [Laughter] All right.

Chris: [Laughter] Which is like, it's....

Dave: Maybe we do a ShopTalk Community. A ShopTalk Community, there we go, man. That's it.

Chris: Maybe. We have one in Discord that's pretty hot. Pretty hot, I'd say.

Dave: Yeah. Yeah, it would be competing with the Discord.

00:13:03

Chris: It would. So, I hide it, right? Then I put in -- between Twitter Blue gives you top articles, which is pretty cool, actually. You know it's just to guarantee you're not going to miss any hot news. You know?

I pop mine open and it's like, ooh, everybody is talking about WP Engine buying Delicious Brains, which just bought ACF, so Advanced Custom Fields has transferred hands twice now in, what, six months or less.

Dave: Yeah, I mean that's -- I don't know. I know people are concerned, I should say, right? Whenever your favorite thing gets acquired by, like, DigitalOcean or something -- you know.

Chris: Hmm.

Dave: [Laughter] No. Whenever something gets acquired, I think people naturally kind of say, "What's going on?" or "How is this going to affect me?"

I don't know. I know it's also hard to run a small company and do all the support tickets, requests, and stuff like that because you don't have that infrastructure when you're selling WordPress plugins.

Chris: Yeah.

Dave: You know, like one at a time. And so, how do you do that?

Chris: What's one that's really gone bad lately? I feel like, in my world, acquisitions have mostly gone okay lately, starting with--

I think it's funny that I worked for Wufoo. It gets acquired, and it's pretty much the same today as it was the day it sold.

Dave: The same product as it was. Yeah.

Chris: Certainly, CSS-Tricks is at the moment.

Dave: Like Vine is the number one, probably, for me.

Chris: Oh, that just gets trashed. Gone. Literally, shut off.

Dave: Then prematurely, kind of, you know, was kind of at a good hype cycle, and then they're just like, "We're not doing it anymore."

Chris: Yeah.

Dave: I think they were having some community problems and stuff like that, or Vine stars wanted to be paid because they were driving a bunch of traffic. [Laughter] Who'd have thunk?

Chris: I always thought Flywheel was such a cool company. When I needed a new host at CSS-Tricks, I think I ended up reaching out to them or some kind of serendipity happened because I was such a big fan of their WordPress hosting and their local product for spinning up WordPress sites. Still incredible. They're doing a great job. They were bought by WP Engine and, to my eyes, is nothing but better.

Dave: Mm-hmm.

Chris: When I see this one, I'm like, I don't know. All you've done is good by me, as far as I can tell, WP Engine.

In a weird way, as much as I love Brad and Delicious Brains and all that -- make great products for WordPress -- they don't have the firepower that WP Engine has. To me, it almost makes it feel like ACF is safer.

Dave: Mm-hmm. Yeah. Yeah, well, there's another one. Modules, did you ever see that? It was kind of like a website builder with components or something? They got acquired by somebody.

Chris: Was it WordPress related?

Dave: It was kind of just like a React page builder kind of thing.

Chris: Hmm.

Dave: But I think it got bought by an email company, like Constant Contact kind of company.

Chris: Oh, interesting.

Dave: But anyway, acquisitions are definitely kind of in the air, I feel like, so I don't know.

Chris: Especially in WordPress land. It's been the story of WordPress the last year or two is just an absolutely incredible amount of acquisitions fueled me with a little jealousy for a little while, but I'm over it.

Dave: Well, man. I'm also on team, like, when somebody comes knocking, just say yes, like sell, you know?

[Laughter]

Dave: That's not the total thing but take it very seriously. Don't be like, "No, man. We're going to change the world and shoot the moon," and all that. [Laughter] You're just trying to get through it. Whatever makes your life easier, and that's the stuff we don't--

Chris: I agree. Life is fun, too. There's so much crap to do in the world. That's your ticket. You got a free ticket to go do a new thing, which is so--

Dave: You've been working on Advanced Custom Fields for like 15 years or WP Migrate.

Chris: Yeah.

Dave: I still don't know what it's called -- WP DB Migrate Pro. Did I get it the first try?

Chris: Yeah.

Dave: Thanks for sponsoring the podcast. [Laughter]

Chris: I wonder how excited they were about owning that versus ACF? Certainly, they were both interesting, but I bet they mostly wanted ACF. I hate to say that, but ACF is so big.

Dave: Yeah. Yeah. Oh, it's just almost indispensable to WordPress.

Chris: Yeah.

Dave: It really changes the quality of the CMS.

Chris: It almost seemed like, "Oh, we didn't know that was for sale. Is it still for sale?"

Dave: Right. Well, it's like you've been working on that problem for a long time. What people don't get, too, is personal stuff. Especially with these small acquisitions. Man, what if somebody's partner got sick or a kid got sick and they're like, "Dude, I just need to not think about this, and have healthcare, and a steady paycheck"?

That's number one, two, three, four, and five priorities, taking care of my family. We don't know that. You know what I mean?

Or maybe they're great at doing WordPress plugins but they're not great at company building, and so the other option is it just goes away down the toilet because they rage quit. You know? We don't know that.

Chris: Hmm.

Dave: That stuff doesn't get into the press release.

Chris: No!

Dave: I'm not speaking from experience like I know something, but we don't see those factors in the press release. You know?

00:18:55

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by another podcast, another podcast that just so happens to be even a little bit older than ShopTalk Show, and we've been here for ten years.

For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer and how the art and practice of software programming is changing our world. From COBOL to containers, from Rails to React, the Stack Overflow podcast is the best place to learn what's happening in the world of software development.

Each week, you'll hear from working developers and leaders from top technology companies hosted by Ben Popper, Cassidy Williams, Matt Kiernander, and Ceora Ford. The Stack Overflow podcast is your home for all things code. New episodes twice a week wherever you get your podcasts.

Thanks for the support.

[Banjo music stops]

00:20:01

Chris: There's a lot under the scenes. There wasn't actually that much in mine that goes unreported, other than big stuff like what the total dollar amount was and stuff. But there was not a lot of secret stories to it, I don't think. [Laughter] But I know for sure that if you knew every detail of every acquisition, it would be shocking. [Laughter] That would be - I don't know - good if there was some kind of publication that could show you the fly-on-the-wall stuff of how the talks actually went down and what the details were. It would be shocking, I think.

Dave: And I wish we used real estate terms like, "It was a short sale," which means it was going out of business and they just had to offload it. You know? Investors wanted to offload it or whatever.

Chris: Yeah.

Dave: Or "It was a bank sale," like the bank actually -- the investors repossessed the property and they sold it for a penny just to get the money back. I wish there were clearer terms, too.

Chris: Yeah.

Dave: Or "This was purely a talent acquisition," acqui-hire kind of thing.

Chris: Mostly, I'm interested in who is happy and who ain't. [Laughter]

Dave: Who's happy and who's not? Or was it beneficial or was it -- is it a sad story or is it a nice story?

I guess it's probably always a nice story when somebody gets something they want. Yeah, I guess not always, right?

Chris: It depends on who you are. Are you the front-end developer they hired four months ago or are you the first investor? Are you the CEO?

Dave: True. True. There are a lot of different parties, right? But it would be neat to--

Chris: It can be complicated. Maybe you're happy because you got some money, but you got five-year handcuffs. Are you really happy?

Dave: [Laughter] Possibly, yeah. No, it's tough when your favorite stuff disappears or now the future is uncertain and different.

00:21:56

Chris: All right. Ricardo G. writes in, "JavaScript testing; where to start."

[Laughter]

Dave: Yes.

Chris: Yeah. "What are some high-level concepts I should understand? What libraries should I be using? What types of tests do I need to consider? I'm getting started with testing, and I'm a bit overwhelmed. Thanks."

You know we've talked about it on this show that I still believe this pretty strongly that one integration test goes a hell of a long way. You write a test that goes to your homepage and tests for some H1 on your homepage and returns true or false (whether it found it or not). There's a hell of a lot of stuff going right if that test passes, so that's pretty cool.

That's an integration test that really doesn't have a lot to do with JavaScript. It might feel pretty JavaScript-y if your site is JavaScript rendered.

Dave: Mm-hmm.

Chris: That kind of is actually a JavaScript test if that's the case. You know it's hard to even know what you mean by JavaScript testing. There are very definitely JavaScript that you can write that really doesn't have anything to do with the UI or the rendering of the site.

Let's say you have a JavaScript function that finds some particular part of a URL that's important to you. Let's say your website is dave.com/users/xyz/first -- or something. You need XYZ out of that. Chances are you're going to have to write some logic. Congratulations. You're a JavaScript developer.

You're going to write logic that parses that URL. You're probably going to use some native functions to extract the host and remove it and find the path and split the path on the slashes and find the second match in the path and make sure that you write the RegEx correctly and that it matches dashes too because dashes are okay in URLs. All this stuff, right?

You write a function, and it's called get-user-id. You should test that function, and you should write the test that throws at it a bunch of weird stuff -- malformed URLs, really long usernames, usernames with emojis in them - who knows what -- that you expect to happen. That's something like Jest territory. There are competitors to it, but Jest is pretty darn popular.

You call. You write a Jest test as a separate JavaScript file. It's probably called something like get-slug.test.js. It has its own little scaffolding where you import your exported function from get-slug, which means, wow, surprise, you had to write get-slug method in an exportable way.

If you didn't, and it was just kind of baked into some other logic, you have to go, "Ah-ha! I shall extract the get-slug logic into its own function to make it testable."

You're not doing that just for the test, by the way. It's actually improved your code, too. So, congratulations.

Dave: Mm-hmm. Yep. Yep.

Chris: You've done that. Then at the command line or something (in CI or whatever), you call, you run the test, which is some kind of jest-run-X -- or whatever. Then it will throw all that weird stuff -- your emoji test, your dash test, and all that stuff -- at that function, and it'll tell you if it passes or not.

That's great to do once while you're working on it, but then you wire it up so that it runs before any get commits happen. It runs after the commit happened, once it has arrived up at your GitHub repository with your GitHub action or whatever.

You run those tests as often as you possibly can because they're just going to protect you for the rest of your life. If it ever breaks, you have this great moment where you're like, "Yes! I'm actually glad that test failed because it means I screwed something up and it's preventing that screwup from making it to production."

That's my whole spiel there, I guess.

00:25:49

Dave: Yeah. I agree. Jest: I'll say I think Jest has problems but you don't find out about those until a bit later in the journey. Jest is really great. The test, that's the Vite-based test framework, is super very nice.

Chris: Yeah.

Dave: I would definitely use it, or I tried to use it.

Chris: They tell you literally not to use it, don't they? [Laughter] Or is it past that point?

Dave: Well, they say, "Don't use this in production." Yeah, I think it says, "This is still a work in progress." Actually, they're not. They took down the big warning sign, didn't they?

Chris: Oh, look! Hey! Vite test then, and also this new history and the new storybook. Everything has got to be Vite powered, all right. that's the new startup is a thing that already exists but with Vite!

Dave: Yeah, X plus Vite is the new dev tool startup.

Chris: Yeah. [Laughter]

Dave: Yeah, for sure. Yeah, I think the test has a bit more ergonomics and it works better with modern JavaScript. That's what I'd say there, just the distinction.

Chris: Yeah. Do you remember? See how effortlessly I said, "Oh, just export your get-slug function and import it in the test"? Oh, surprise! Actually--

Dave: Jest sort of hates that, so-- [Laughter]

Chris: Yeah. [Laughter] Sorry. I think they're kind of coming around on it now, but yeah. That's not actually a thing.

Dave: But there are ways.

Chris: Yeah, there is. There is, for sure.

Dave: I think Jest is really great for, like, a lot of my tests in my Nuxt app are like, "Okay. I'm going to mount," and that's like a Vue test utils thing, but "I'm going to mount this component," like my action header component.

"Does it exist?" That's just the test, basically. It's like, did it even load up on the page?

Yes, it did. Awesome. Great. We win.

It's small, but stupid, but it makes a big difference if you just know if this shows up on the page, it's going to show up, and then I can get more granular about is the functionality actually working. Does it have a button? Can it optionally have a button?

Then you throw code at it to try to make it break.

I had a big one where if you're adding related posts to a post - or whatever - just making sure they all showed up, they're all in order, and they all made sense, that was a hard little solve, but I got it solved. That's something to think about, too, is how do you get it to all relate together. But I use testing to work on that and then make sure I don't break it as I'm working on it.

But I would be curious. What would you use for that integration test? You, Chris Coyier, if you were like, "Does page exist?" or "Does H1 exist?" would you use Cypress or something like that? What would you use?

00:28:58

Chris: I'm kind of excited about dipping my toes back into Cypress because it's honestly been a couple of maybe even years, and they've been hard at work making Cypress better. Not that it was bad before, but I had a few rough edgy cases that I'm less worried about now, so I'm kind of excited about writing a bunch of Cypress the next time I have a good opportunity to do so because I think it's a really great product. But in those couple of years, they have more competitors now, too.

I just heard from one that reached out. Maybe they'll sponsor the show, but they haven't yet. Reflect.run looks super very similar to Cypress.

Dave: Okay.

Chris: Cypress notably wrote their own language, kind of, which would be a little hard. Part of me is like, do I like that or do I not like that? All their APIs were like cy.dosomething. I'm like, why did you do that?

Dave: Yeah. Maybe. I don't know.

Chris: There's some level of buy-in.

Dave: Yeah, Reflect looks pretty good, too. But what's neat about those tools is you can pull that down, and they give you almost like a browser. You go through and just click the stuff you want to test and say, "Yes, make sure it exists," or "Make sure this clicks," or whatever.

Chris: Yeah. You don't have to do that. It's nice to open the door for people that don't necessarily write a bunch of JavaScript - or whatever.

Dave: Right. That would be a good place to start. I'm kind of spoiling Kent C. Dodds' course. [Laughter] But one place he starts is static testing, which is a different kind of testing, but Linting and getting Prettier and JSLint and stuff like that set up on your local computer and then in your build processes and stuff like that. That's another form of testing that can just kind of open the door to, like, "Oh, isn't this nice? We don't actually need to think about formatting because I hit 'Save' and the document formats itself correctly."

Chris and I don't have to argue about spaces after--

Chris: Yeah.

Dave: Spaces between class names and brackets. It's solved by the Linter. If we didn't solve it, then it doesn't matter, so there you go. [Laughter] Code reviews are better now.

Chris: Yeah, I think that stuff is pretty huge. I'm glad you mentioned that, that we all agree on what Linters we're using. Right? We all agree on what formatters we're using, right? That stuff can cause -- you're never going to miss a semicolon ever again because it's just going to be fixed.

Dave: Well, even my Linter is in Viter or the Nuxt one. It doesn't require. It prefers no semicolons. It's kind of the extreme one. I'm like, "Whatever. Fine. That's great. Let's do that."

Chris: Yeah. Right.

Dave: Yeah.

Chris: As long as we all agree because that's the tricky part sometimes.

Dave: Yeah, so--

00:32:11

Chris: Pretty cool. Let's see. There's another question, isn't there?

Dave: Yeah, we've got another one from Josh Pullin, who writes in, "I have been on the Nuxt.js train for a while because I love the front-end DX it provides. But I have another site running Django, and I love that Django gives me a built-in admin dashboard that I can use and manage users and user generated content."

Chris: Yeah.

Dave: "Are there any tools like this in JS land? It seems like Sanity can manage website content, but what about the users and their data?"

Chris: Dude. Yeah. This is a classic thing. Yeah, are there some stuff? Strappy, Keystone. Yeah, there are, but maybe not as just as popular for who knows what reason. They probably deserve to be - if you ask me.

Dave: The difference -- I just went through all this, right?

Chris: Yeah.

Dave: Comparing Rails and Nuxt, the thing about Node is, for better or for worse, it's all BYO crap. Anything you want to bring, it's BYO. Right? Bring your own admin stuff, admin tooling. Whereas like Rails and Django are just like, "Oh, you get it out-of-the-box," or it's one gem away and it's the first party, or it's like a first-party gem, and everybody uses this gem anyway. There are zero Google results for any other gem. It's just this one, so use this one. Right?

But in JavaScript land, I think it's because we like to reinvent a lot. It's like, "Ah, use this new thing that no one has ever done before." Yeah, so Strappy is cool. Keystone is cool.

Chris: Yeah. You already mentioned Sanity, but Sanity is not built into either of those two. It's just like, "We'll host your CMS over here, and then you hit those APIs with whatever you want." It tends to resonate with Node-y people, I think, more so than other languages - for whatever reason. But it's not necessarily required, I'd say.

Here's the thing, though. The world of CMS stuff is just way better in PHP land. They're just way ahead as far as great CMSs are concerned. And way behind as far as DX is concerned. Node (JavaScript land) is way ahead as far as site building and DX is concerned and way behind as far as CMSs are concerned. It's just a weird place on planet Earth right now.

Dave: Mm-hmm. Yeah. I would super-agree. There's all this tooling. There's tooling everywhere, but some of it is very accessible and out-of-the-box, and then some of it is kind of hidden somewhere. You have to build it, integrate it, and do all this stuff.

00:35:32

Chris: There are always some extra assumptions, too. I said just PHP, but PHP got away with being, like, "Oh, but you need a database, right?" They're like, "Oh, yeah. Definitely MySQL, though, too." [Laughter]

Dave: Right. Right. Right.

Chris: Whereas now they're in JavaScript land. Now that we've questioned the language that we're writing our CMS in at all, the data source tends to be questioned too. There's not a lot of Node plus MySQL. Not none, but people are much more likely to be like, "Oh, this is Node but plus Mongo," or plus whatever.

Dave: Dude, for a long time it was the mean stack, right? Like Mongo, Express, Angular, and whatever N is -- Node. [Laughter]

Chris: Right.

Dave: And so you're just like, we had a whole world where that was the stack. You know?

Chris: Yeah. I'm sure Mongo is still extremely popular, but I think the rough edges of its migrations and such have tempered its growth, perhaps.

Dave: Yeah. Put people -- yeah. I remember being very excited about it, but then I heard a few stories. But you know that's not to say it's bad. You hear a story and you think about it a lot. You know?

Chris: Yeah. At the moment, I'm feeling pretty off the, like, "Just put JSON somewhere."

Dave: Mm-hmm.

Chris: No... [Laughter] Whatever. There are reasons. I'm not an expert in that world, anyway, so don't listen to me.

00:37:02

Dave: Yeah, I don't know. I think there are ways to do it. I think you just kind of have to, unfortunately, bring your own. That's maybe one criticism for me.

I've also seen -- I will say -- some no-code tools. There was this one. I think it was called retool.com.

Chris: Oh, yeah. They've sponsored the show before, too.

Dave: Have they? Oh, awesome. Well, thanks for sponsoring the show.

It'll connect to your code base, and then you drag and drop some components to build your own admin interface.

Chris: It's pretty genius because they're like, "We built a bootstrap," but then they're like, "Oh, but what if we just also built some data integrations around the bootstrap and made drag and drop (put these components on a page)." It turns out, yeah, that was a really good idea. [Laughter]

Dave: Oh, because we kind of went down this process with Luro, like, are we going to rebuild it in Rails just because there's stuff like admin tooling and Redis queues and just stuff like that all built-in. Right?

It was like, "Oh, man. Are we going to go down this path, or are we going to stay on Node and keep doing what we're doing?" That's what we decided to do, but we gave up this admin tooling like user management. Even a button to force send a password reset or something over a phone, which is probably a security loophole, but stuff like that. How do we do that?

But then I was like, "Oh, well, maybe these tools like Retool might be a really good way to build a customer database or something. Kind of get a survey, a high-level look at what's happening in the app as a whole just with zero lines of code, basically."

Chris: Yeah. Yeah, and that's their marketing pitch, too, is that kind of, "Why would you build your own admin? You have better work to do here," which is true. You do, so maybe use this instead.

We have our own custom admin, and it feels kind of good now. But we're ten years in, so we had a little time to do it. But it's because we have this internal GraphQL API, and it feels good to use it with the goal of the site using the same API.

Then guess what it was built from. The same UI components that build the site, so we have all these pretty robust bricks that we've used, so use the bricks. You know?

Dave: Use the same bricks. Yeah. Yeah. Well, and that's it, too. We could totally reuse bricks - or whatever. But this will be something we have to do. But yeah, I don't know. This is interesting to me from a, like, I could probably just kind of build out my own thing in an afternoon or something, kind of very loosely get started and figure out. It has tables, lists, charts. That's almost all I need. [Laughter] Forms.

Chris: Then you click into the thing. You're like, "Oh, where are all my users? Oh, here they are in the table with all their things." Then, "Oh, I need to change somebody's email address. I can just click into that." It becomes editable. Change it. Hit the return key, and it sends it back to the database.

I am curious about where that code goes. How do you tell it how your API works? Where does that code go? I don't know that.

Dave: Right, well, and it may just hotlink into the database. I don't know. I've been using--

Chris: Maybe not. You might not have to write any.

Dave: Yeah.

Chris: Yeah.

00:40:51

Dave: It has a PostgreSQL connection, I assume. But what's interesting is I'm using Prisma -- I've talked about it before -- in our database, cool database backend energy show. But it has a Prisma Studio thing, NPX Prisma Studio, which pulls up basically a database visualizer, and you can view your tables and edit things and save it automatically and stuff like that. Commit the change. It's super cool because it's--

Chris: It just assumes absolutely God permissions to all that data?

Dave: Yeah. Yeah.

Chris: That's too....

Dave: It's kind of got God spot, so--

Chris: [Laughter]

Dave: But what's neat is I can, in theory, use this to get a loose collection. What do I care about it? It's like how many widgets have people used. I don't want to sus out everybody's data, but how many users do we have, and can I update a user if I need one or force a password reset on everybody? Can I do that? If I can, awesome. Those are the things I care about.

Chris: Mm-hmm.

Dave: Then a chart and a graph to see, do we have more users over time? By the created at stamp, can we do that? Do we see users go up or users go down? That's all I care about, maybe. I don't know.

Chris: Yeah. You need some -- you've got to build your OKR charts.

Dave: Yeah. What are my OKRs? Then can I make this chart -- trick it to show exactly what I want? Yeah, that's great.

Chris: Maybe. That stuff can get tricky because if it's like, "I want to email subscribers," but your email subscribers is a bullion in your database. Bullion doesn't have a created at. You've got to save that piece of data over time. It's tricky.

Dave: Yeah, you have to be -- yeah, how do you get--? You didn't save the time stamp when they added the checkbox.

00:42:59

Chris: Yeah. just to prove that this is in the water, there is a question from Jordan Vanhee. I know you have a hard stop, Dave.

Dave: Oh, yes.

Chris: He wants to know about Remix versus Rails and Laravel. Sometimes, I feel weird talking about these technologies all the time. I've never even spun up a Remix site, but I'm more and more compelled by it. It really seems like they're doing a lot of great work and using the platform on that, allowing you static generation, but leaning into servers and everything that just seems like a really good idea at the moment. [Laughter]

But it is pretty similar to Laravel. The difference being that Remix can generate absolutely static HTML that you could deploy in an absolutely static CDN-backed kind of way whereas Laravel just can't do that. It hits PHP to do what it's doing, so you're in PHP town and stuff.

The value, I think, is pretty similar-ish, although I don't know. I think Laravel probably has more database-specific helper stuff to build something app-like whereas Remix is helping you render pages of a website.

They do have fancy data adapter stuff, but it's not like database method helpers. It's like, "What is it like to get the data once I know how to retrieve it?" and put it in state and such.

Dave: I would use Remix when a data source already exists and I'm building something on top of that.

Chris: There you go.

Dave: But it's not the main thing. I would absolutely.

You think of like a health services company. We're just doing the COVID-19 appointment scheduler. It's got to be up. It's got to be good. We want to use React components and stuff like that. Remix is probably a really good choice just because it's going to be sturdy, reliable, and delivered fast, and as fast as possible. Right?

But you're not fully tied into the entire health services company dashboard or CRM or scheduling tool. You're just hitting some API calls.

I know Remix can do more, but that's a really good place for it. You're tying into something that exists.

I think Laravel is really good for when you're building the thing, when you're building the health services platform. That's a great place for Laravel.

Chris: That's a great answer, I think. Right? You're kind of scaffolding that data for the first time, probably.

Dave: Yeah. Then you maybe don't want your COVID shot registration page to be on the main Laravel site because you might just tank the whole site because thousands of people are going to show up at one time, right?

Chris: Yeah.

Dave: Unless you have a caching strategy all up to snuff, you maybe want--

Chris: You could say Remix in the front, Laravel in the back? That's crazy.

Dave: Just for these high traffic bits. You know what I mean?

Chris: Yeah, sure.

Dave: Just so you don't tank yourself. The worst thing that could happen is you go down in a critical situation like a pandemic. I think the best thing you can do is try to think about it in those resilient terms. But you could spin up another Laravel site - and whatever - it does something. But what I think I'm getting at is I think, if you're building on top of something or integrating with something, or a few things, Laravel or Remix could both work. But I think there's a little bit of nuance there.

Then I do hope -- like the question asked -- do you think JS frameworks will offer similar value? I do hope they become more CMS or more back-end server. I hope they become more server-y. That's my hope for JavaScript in 2022 here.

Chris: Fantastic! Thanks so much for your insights, Dave, and for everyone who wrote in with fancy questions and stuff for us.

Dave: Thank you, all. Thanks, Chris. 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. I'm Ariana Grande on that weird TV show. [Laughter]

Chris: [Laughter]

Dave: I brought this joke back. Hey, look at me.

Follow us on patreon.com/shoptalkshow. Join the D-d-d-d-discord.

[Laughter] I can't do it anymore.

I'm sure there's other stuff y'all remember. Chris, do you got anything else you'd like to say?

Chris: It sounds so low, you know? Like instead of vocal fry, it's vocal guy, or something?

Dave: Yeah, it's kind of like a vocal guy. Yeah.

Chris: [Laughter] I don't know. The director is like, "Just sound weird. What's your weird voice?" Hi...

Dave: Hi.

Chris: K-bye.