16: The Beauty of Remix, Falling for Tailwind, and Why NFTs Are a Scam with Kent C. Dodds

Robbie Wagner: [00:09] Hey, everybody, welcome to another Whiskey Web and Whatnot with myself, Robbie Wagner, and my co-host is always Charles W. Carpenter III. And today, we have a special guest Kent C. Dodds.

Kent C. Dodds: [00:22] Hello. Happy to be here.

Robbie Wagner: [00:25] Thanks for coming on. First question for you, unless you don’t want to answer. What does the “C” stand for?

Kent C. Dodds: [00:33] Oh, it’s Christopher.

Robbie Wagner: [00:35] Got you. All right, cool.

Chuck Carpenter: [00:37] I’m inspired by that. And I will now be going by Charles W. Carpenter in all forums.

Kent C. Dodds: [00:42] That’s great. I bought the domain kentcdodds.com years and years ago and when I was still in school, and I asked, or I changed my email address to Me@kentcdodds.com and told all my friends to use that, and then they started just calling me Kent C. Dodds because of my domain and one of them I worked with. And so then all my coworkers started calling me that, and then it just kind of stuck. So now, I’m a little persnickety about it now.

Chuck Carpenter: [01:15] I see.

Robbie Wagner: [01:16] Was Kent Dodds without the C already taken?

Kent C. Dodds: [01:19] No, actually, I don’t know. Why? Because I bought that later a couple of years ago. I was like, oh, that’s still, like, a thing.

Robbie Wagner: [01:26] Interesting.

Kent C. Dodds: [01:28] I don’t know of any other Kent Dodds is out there, so I don’t need it for a disambiguation thing. The C was just kind of fun, I guess.

Robbie Wagner: [01:37] Yeah, you just like it. Yeah, fair enough.

Chuck Carpenter: [01:40] Yeah. I mean, it’s worth leaning into. Why not? You committed to it, and I appreciate the tenacity of you sticking with it.

Kent C. Dodds: [01:47] Yeah.

Chuck Carpenter: [01:49] So normally, we do Whiskey Web and Whatnot as part of the name of the show, but today, in respect to Kent not drinking, we decided to do some eggnog. We don’t all have the same kind of eggnog, but, I mean, how different can it be, really? Mine is vanilla spice. Well, yeah, we’ll find out.

Robbie Wagner: [02:09] Yeah, mine’s almond milk, so arguably quite different.

Kent C. Dodds: [02:14] Yeah. And I’ve got myself some sprite spiked regular old eggnog.

Chuck Carpenter: [02:21] Sprite effervescence, that’s clever.

Kent C. Dodds: [02:23] Yeah, it’s kind of fun. And actually, the sprite was kind of old, so it’s a little bit flat.

Robbie Wagner: [02:30] Sounds delicious.

Chuck Carpenter: [02:31] So do not recommend. Would you repeat?

Kent C. Dodds: [02:34] Yeah, well, I’m actually not a huge eggnog person anyway, but it was just like it’s the season of eggnog, and so it’s pretty good.

Chuck Carpenter: [02:44] Yeah, it’s an interesting, like okay, well, it’s kind of like pumpkin pie. You don’t eat pumpkin pie all year long. At least, I don’t. I don’t know about Robbie.

Robbie Wagner: [02:53] I wish we did.

Kent C. Dodds: [02:54] I don’t even eat pumpkin pie when it’s Thanksgiving. I’m not a pumpkin pie per-. I’ll eat it if it’s the only option, but give me that chocolate pudding pie, and I’m happy.

Chuck Carpenter: [03:05] Interesting. I like to do an apple pie a la mode. That’s a good one.

Kent C. Dodds: [03:09] Apple pie is good. I’m a fan.

Chuck Carpenter: [03:12] Yeah. Chocolate pudding pie I don’t normally associate with Thanksgiving, but.

Kent C. Dodds: [03:16] Oh, really?

Chuck Carpenter: [03:16] Worth a try. Yeah.

Kent C. Dodds: [03:18] Maybe it’s just because of my love of chocolate pudding, and I always ask for it, and that’s why it’s always been a staple for me.

Chuck Carpenter: [03:27] It could be this is like a clever, Dodd’s invented tradition.

Kent C. Dodds: [03:32] Yeah.

Chuck Carpenter: [03:34] So, I’ve poured and tried my nog. It is reasonably thick and mildly vanilla spiced. As far as eggnogs we’ve reviewed, I give it eight tentacles.

Kent C. Dodds: [03:46] Okay.

Robbie Wagner: [03:47] We review on a tentacle scale. So it’s one to eight tentacles.

Kent C. Dodds: [03:51] Okay. Yeah. I guess mine. I’m going to give a five just because, well, I guess as far as eggnog is concerned, maybe it can be a seven or eight. I don’t really care too much for eggnog, so it’s as good as any eggnog I’ve had.

Robbie Wagner: [04:09] Fair enough. Yeah, mine’s not great. It’s not bad. We make lattes out of this because it’s, like, very eggnog tasting, but it’s not thick. It’s, like, really liquidy, so it’s better mixed in something else. But it’s good for almond milk eggnogs. It’s really good. I would give it, like, six or seven for almond milk eggnogs, but something like that.

Kent C. Dodds: [04:35] Cool. So I noticed on the email that we were doing you have, like, an octopus here or something in the signature. Is that your company?

Robbie Wagner: [04:47] Yeah. We also have our branded Christmas sweaters.

Kent C. Dodds: [04:51] Nice.

Robbie Wagner: [04:53] Yeah, that’s, like, the only thing I’ve ever designed myself that I’ve liked. Like, the one time, I did a little bit of design and made it the logo and everything else. We have a fancy designer that he makes all the stuff.

Kent C. Dodds: [05:08] Awesome. Yeah. Actually, Ryan Florence put through together the Remix design or for the Remix logo a year ago and ended up getting a designer to redesign it. And I actually kind of liked the original logo, but the new one looks really fancy. It’s glowing and stuff. So I think it was a good call for him to switch or to use the designer’s design for the logo. But yours looks pretty cool.

Robbie Wagner: [05:36] Thanks. You remixed the Remix logo a little bit.

Kent C. Dodds: [05:39] Yeah. There you go.

Robbie Wagner: [05:42] Yeah. I mean, I guess that brings us into another question. I have a bunch of questions. I was researching you for, like, the past hour or so, so I just wrote a bunch of questions.

Chuck Carpenter: [05:51] He gave you an entire hour of his life. It’s very

Kent C. Dodds: [05:54] Wow. That’s an honor. Thank you, Robbie.

Robbie Wagner: [05:57] Yeah, no problem. Obviously, I’ve seen you around on Twitter and been on blogs. You’ve done stuff when I’ve had issues with testing or various things. But, yeah, I was just learning more about you in general and realized that you actually are part of the Remix team, like, officially now.

Kent C. Dodds: [06:13] Yeah. I loved it so much that I joined the team.

Robbie Wagner: [06:17] Nice.

Kent C. Dodds: [06:19] Pretty much. I got to the point where all I wanted to do is teach people how to build Remix sites because my goal is to help people make the web better or make the world better through quality software. And so I was thinking about all the courses that I’ve got and stuff, and I need to update them or make new ones or something. And I just was pretty much like, well, if I just tell people use Remix, then that solves so many of the problems that my courses are teaching you how to avoid or solve or work around or whatever. And so if I just say use Remix, then I don’t have to teach you all of this other stuff that aren’t problems anymore. And so I pretty much just wanted to focus 100% on Remix, and Ryan and I are friends, and Michael and I are friends, and so we kind of talked about maybe collaborating or something, and eventually, it was just like, hey, it’d be a lot easier if you just worked here. And so I was like, yeah, and then I can do this level of quality stuff but make it free for everybody because we just want people to use it, and I’m getting a salary and ownership of the company and stuff. Then the other nice thing is I really can just focus on Remix. Rather than dividing my time across other things that I could be teaching people, I can just be like, no, I work for Remix, and that’s why Remix is all I do. So yeah, I’m happy with this change.

Chuck Carpenter: [07:48] And how recently did you join full-time?

Kent C. Dodds: [07:51] That was about a month ago. Yeah, it’s been a pretty wild month. I had, like a week before we actually released Remix officially, to get things ready for because I’m in charge of developer experience, and marketing falls under that. And so yeah, I had to very quickly get something ready for the big launch. So it’s been a wild ride so far, but it’s been awesome.

Chuck Carpenter: [08:23] Yeah, I’ve been hearing so much about it, so it does make me curious in comparison to some other react-based frameworks like Next.js, Redwood JS, some of that. In some ways, they lean into a particular vertical and say they’re sort of like the best for certain kinds of apps. Like Next has really gone into the e-commerce space. They’re doing all the serverless stuff. Redwood says they’re the framework for startups because it’s full stack, so it’s giving you the entire application in that way. Is there a particular niche that Remix is best suited for? Because it sounds like you’re saying that it’s great for any kind of web application, but just kind of wanted to.

Kent C. Dodds: [09:12] Yeah, the niche is anybody who wants to build an amazing user experience for the web, so it’s kind of broad. But the Next.js and Gatsby Netlify they’ve all leaned into, and Redwood, I think as well have all leaned into the Jamstack JavaScript APIs and Markup. And typically, that’s a static site-generated sort of thing. Though, depending on how you define it, Remix could also be a part of that. Remix is a server-side rendering-only framework as of right now. Eventually, we’re going to run in a service worker, and at that point, it’s like, what is it now? I don’t know. But right now, it’s all server-rendered. And we do that because we feel like that provides the best user experience. Well, it objectively provides the best user experience. It’s way better to just see your stuff than to see spinners while you’re waiting for your stuff. And so if you can just make it so fast that you don’t need spinners, then that’s a better user experience. And so the Jamstack is just very limited because it kind of calls for spinners. While your data is loading, you’re hitting those APIs, and you got to show the user something that is just not a good user experience. You end up with content layout shifts all over the place. So it’s better to just render the data on the server and then send it to HTML, and then you can rehydrate to make it interactive and whatnot. And so Remix we are soon, or we just did announcing this new stack that we call the red stack that is rendering edge data. And so there are a couple of platforms that support this sort of architecture. Cloudflare Workers is a really popular one where you can run your own JavaScript on the Edge, which is for those unfamiliar. That’s basically like you have your origin server, then you have the CDN, and then you have the user between your origin server and CDN. Cloudflare Workers operates between the user and the CDN. So before you even hit the cloud for worker CDN, you can actually run some code. So that’s what we mean by the Edge. It’s basically distributing your app in many regions throughout the world to give users a really fast experience. So Cloudflare workers is one. Amazon has some AWS thing, I can’t remember what it’s called, but they’ve got something like this, and then Fly.io also has something like this where they’re actually a full server, not a simplified environment, but you can deploy that same server to like 30 something regions throughout the world. Deno Deploy also does something similar to that with Deno. And so by making it so that you can respond to user requests within like 50 to 100 milliseconds, you can have maybe it’s possible that you could be even faster to render something to your users than even static site generation. I’ve seen some responses in 50 milliseconds with full server rendering and stuff. That’s huge. In any case, even if you do take another 50 milliseconds longer than static site generation, what your users are seeing is all of the content, no spinners in place, versus being able to show your user something useless a little faster. That’s basically what the status quo is. So anyway, yeah, that’s the red stack. And a requirement of this stack is that your data is just as close to your users as your server is. Otherwise, you don’t get that benefit as much because your user may not need to go hit those APIs to get the data, but your server does. And so that distance does make an impact on the speed. Yeah. So there are a bunch of platforms that support this, and Remix is well situated to sit in there, bringing it all the way back to your original question of how does this compare and what’s the niche? It comes down to pretty much any application could be benefited by using Remix with the red stack. Because, for one thing, Remix is just real well positioned to enable you to use this sort of stack. For example, like Next cannot run on CloudFare workers. And for another, because Remix does full server rendering, you give your users that better experience as well. Now Remix doesn’t do a whole lot for you right now. For like, if you’re building a game, and so you have no routes, you’re just like on the home page, there’s a game right there or something. Remix makes React easier to use in some ways. And so I still would build, like, if I had to build something like that, I would still build it with React or with Remix. But it’s not especially suited for that sort of thing any more than like Next or Gatsby or something, or something like that. But I do believe that you’d still end up with a better user experience using Remix. For example, when you’re going to a website, one of the first things that the browser does is it’s downloading the HTML. It sees, oh, you’ve got link tags for CSS and image tags and stuff. So now I’m going to go fetch those. And so we have this waterfall effect where you get the document, then you get the JavaScript and all the other stuff. Well, because Remix is your compiler, we can actually, and it’s also your server, or it’s not your server, it integrates with your server. And so it’s managing, handling the requests and response and stuff. We can actually add headers to the response, and we can stream the response, and so we can start streaming the response and add headers to that response that will tell the browser to start fetching those things right away and load those into the cache. And so the browser doesn’t have to wait for your document to have started rendering. Like when you hit the server, it’s going to need to say, okay, let’s go get all the data and whatever else we can actually start sending the response with headers that says, hey, I’m going to need you to download some of these assets before we even start sending the HTML over. And so that makes it very fast. There’s no longer this waterfall, and so even if you have a single page, you’re still going to be faster if you’re using Remix. And so that’s why I say I haven’t yet found a use case for building on the web that Remix isn’t really well suited for. Like I said, it doesn’t have a bunch of abstractions useful for somebody who’s going to build a game necessarily, but neither does like any other web framework like Remix. But yeah, it sure has a lot of useful things for you if you want to build an excellent user experience on the web. So that’s what it’s for.

Chuck Carpenter: [16:03] Sounds like there’s a lot of nice developer experience aspects to it as well.

Kent C. Dodds: [16:09] Yes, actually, it’s really awesome coming from anything that uses webpack because it builds in, like, half a second. You could take my site, which is around 30,000 lines of code, and that builds in half a second. That’s awesome.

Chuck Carpenter: [16:29] That is pretty awesome.

Kent C. Dodds: [16:30] Yeah, thank you, esbuild.

Chuck Carpenter: [16:30] I’m going to give you that one. Interesting.

Robbie Wagner: [16:35] Having never used Remix, or really, I’ve been trying to experiment with Astro recently. Are they somewhat similar in ideology there, where it’s like we want to ship the least stuff possible and do it all behind the scenes? Kind of.

Kent C. Dodds: [16:50] Yeah. So I haven’t actually used Astro either, but the big thing behind Astro is their JavaScript islands or like the little islands of interactivity. And that’s an interesting idea. I think the main motivation behind that is we just want it to load really fast. Right. The amount of data doesn’t matter nearly as much. If you’re worried about the amount of data you’re sending to users, then don’t send images and stuff, right? That’s way more than any JavaScript that you’re typically going to send. And so if that’s the camp that you’re in, then Remix can actually still help you with that. If you care that much about how much you’re sending over the wire, then you just build your app so that it works without JavaScript at all. And you can do that with Remix. In the Remix tutorial, we have two, and one of them is like build your own developer blog because that’s what everybody wants to do when they’re trying something new. And then the other one is like, let’s build a real app that has authentication and database and all that stuff. And in that one, you get to the last stuff on the app, and I say, oh, by the way, it might make sense for us to turn on JavaScript. And because we got through this whole thing all the way, like authentication with validation and everything, a really nice user experience without even adding JavaScript to the page yet. And so, yeah, if that was your camp and you’re like, oh, I just want to save on the bytes as much as possible, then yes, you can build amazing user experiences with Remix that don’t even use JavaScript. And so with Astro, though, that’s not what they’re going for. They don’t want you to have to build an entire site that doesn’t use JavaScript. They just want to reduce the amount of JavaScript so that users can start using it faster. Right. That’s primarily the goal. They don’t want to have to wait for the JavaScript to load. So here’s the cool thing about Remix. Because you can make the app work without JavaScript at all, that means that it works while the JavaScript is still loading. And so even if it takes you multiple seconds to load all of the JavaScript because we’re server rendering, and they can see it and everything, everything works. Like, the links are actual links, any mutations are actual forms. And so if the user starts using the app before the JavaScript is finished downloading, then they can start deleting tasks and marking things as complete and creating new things, and clicking on links and stuff. And all of that will work. It will work the way that it does if they didn’t have JavaScript running in the first place. And so Astro is neat and interesting, but we don’t have the problems that Astro solves when you’re using Remix. And so, because of the knowledge that we have as your compiler, we can trigger the browser to start downloading that JavaScript faster as well. So even in that situation, we may end up having a completely hydrated app sooner anyway. It’s interesting. And what they’re doing. Another one that is very interesting to me is Qwik by Misko Hevery, who created Angular, I was at a conference with him, and we went out to dinner, and he was explaining to me this new framework that he’s working on. And when the creator of Angular starts working on a new framework, it’s like, okay, what have you got now? And it’s very interesting. What his does is server renders, and it sends all the HTML, and it will not load any of the JavaScript until you actually start interacting with stuff. So when you click on a button, that’s when it will say, okay, let’s go get the JavaScript that’s necessary for executing the callback or the event handler for this button. And so even when it does start downloading JavaScript, it’s just like a teeny tiny amount of JavaScript that it needs to download. And so you end up downloading way less JavaScript again, except for a small subset of people who are trying to say, oh, I want to save on data. And so they want to ship as little as possible. That’s a very small number of people trying to build apps like that. Really, our entire goal is, how do we make it so that users can start using my app faster? And so I feel like Remix checks that box off. The only thing that you can’t do with Remix as it’s using React is if the thing that the user wants to do cannot work without JavaScript, then they do have to wait for the JavaScript to load. So maybe you’ve got a button that they press, and it pulls up a modal, and that’s not like server-rendered or something, that’s all client-side, or it’s like a drop-down or something like that. Then yes, you will need to wait for JavaScript to load for that, though I did see somebody do a multi-select UI that worked without JavaScript. So it is possible to make even some of those sorts of things work without JavaScript as well, which ends up being better. So if you rely on JavaScript, you’d be surprised how often the JavaScript fails to load. So there’s the waiting for it to load, but there’s also the time that takes to load in the first place or the fact that it sometimes doesn’t load at all. And so yeah, making a framework that it’s possible to work without JavaScript solves a lot of these sorts of problems that we’re trying to commonly solve with frameworks that are trying to send less JavaScript. That’s one solution to the problem of making things faster. But I feel like with Remix. We’ve found another way to make things faster without having to make all these trade-offs on different architectures, with having to completely change the framework that you’re using and stuff. Got you.

Robbie Wagner: [22:44] Yeah, it reminds me of kind of, like, over the past, I don’t know how many years, people have been really trying to get away from jQuery to make their apps smaller. And now you’re kind of saying it’s kind of a similar paradigm of, like, let’s get rid of as much JavaScript as possible, make our apps smaller, and maybe we won’t need any JavaScript at some point.

Kent C. Dodds: [23:04] Yeah, there are some things that you absolutely need to have JavaScript for, for accessibility purposes and that sort of thing. So we’re not saying that our goal is to make it, so you don’t have to have JavaScript on the client. The real thing is that we can give the users an excellent experience while they’re waiting for the JavaScript to load. And in the event that the JavaScript fails to load. And then what’s really cool is the types of experiences that we can give them once the JavaScript has loaded. And so with the APIs, the use Transition API in particular, that tells you what is going on with the router at that moment, you can deliver some awesome optimistic UI experiences. So you basically, for 99% of the cases, you don’t need a loading spinner at all. When was the last time you saw a loading spinner on Google Docs right? Like you’re typing around, and you don’t even think about it. You just assume that it’s saving as you’re typing. You never really think about it. And yeah, maybe sometimes it does fail. Like you get disconnected or something, and it will show you like, oh, I’m trying to save, but I can’t. You can build that sort of experience with Remix because of the APIs that we offer. And so the goal here is loading is not cool. Like showing, loading spinners is not cool. Let’s question the entire premise. Why do we have to show a loading spinner in the first place? Maybe we can avoid showing loading spinners, and primarily it comes down to well. My back end is really slow. Okay, well, let’s speed up the back end. Well, I can’t speed up the back end. Okay, well then, you can cache that back-end response and give the user something that might be out of date, but it’s better for them to see something that might be out of date than wait 5 seconds to get their response. And then, on the mutation side of things, how often do you expect your mutation to fail? Especially with Remix, where your server-side code is right next to the client side, like React components and stuff, you can take that validation logic and just move it out into the shared code space of the module, and then you can run the same validation on the client and the server. And so if it validates with those functions, then it’s probably going to work. We can assume that’s going to work, and we can be optimistic about that and show to the user what they’re going to see, assuming that that thing is going to work. And so, in that case, then you don’t need a loading spinner either. You just need a mechanism for falling back if it does end up failing. And because of the way that Remix is structured, you will get that it’s actually really cool. The way that it works is like if the user has submitted stuff, then let’s render the stuff they submitted. Otherwise, we’ll render the form or whatever. And so as soon as the user submits it, then we fall into this, render what they’re going to see. And if that fails, then it’ll just render the form again. And so you don’t even think about it. It just naturally works. And so, yeah, a big goal of Remix is to improve the user experience by eliminating loading states. And then we have a really awesome API for managing error states as well. And so, thinking about loading and error states, those are the two things that our designers never give us designs for. We just say forget or whatever. And so, as developers, we often forget to implement them, or if we do, they don’t work very well, or they don’t look very good. And Remix kind of encourages managing those in a nice and declarative way. And even if you forget about managing those error states, because of the way that our APIs work, they typically will be managed in a way that is better for the user. Anyway, I should have told you before we started, I am a rambler, so you can feel free to interrupt me as we go.

Chuck Carpenter: [27:03] No, I want you to be able to finish that train of thought. So I am definitely following it and ask the questions for particular reasons. It’s funny, I mean, it’s clear that you’re very passionate about Remix. I have a friend and former colleague who actually spoke after you at UtahJS.

Kent C. Dodds: [27:23] That was fun.

Chuck Carpenter: [27:24] Yeah. And he was telling me that you are also very passionate about Tailwind, which is a connection with Robbie, who also loves Tailwind.

Robbie Wagner: [27:31] I love Tailwind.

Kent C. Dodds: [27:33] Yeah.

Chuck Carpenter: [27:34] I don’t know if you remember him or not.

Kent C. Dodds: [27:36] But what’s your friend’s name?

Chuck Carpenter: [27:38] Cory Brown.

Kent C. Dodds: [27:39] Oh, yeah, I know Cory. Sure. Yeah. Cool. Yeah, Tailwind is awesome. I often tell people skip to the end, just use Tailwind. We spend all of this time dorking around with these other solutions. I contributed to many of these solutions. I created glamorous for CSS-in-JS with React, and it was awesome. And they’re just as good as they’ve always been, which is to say that they’re pretty good. But we can do better. We can do better for the user experience. If you look at the network tab for any of these solutions, that’ll tell you what type of user experience you’re offering your users, and we could make that better. And so Remix does a really great job of managing the CSS in a way that’s awesome for users, making it so that you can actually cache that CSS for one. But then Tailwind just comes in and makes it even better because you end up with way less CSS than you would alternatively have. At PayPal, oh my gosh. We had the app I was in charge of is Paypal.com/Transfer. So sending money to your friends and people, especially across borders, that was the team that I was on it when I started, and I was given a task of adding another variant to our AB testing. It was really like abcde F-G-H-I-J-K-L-M-N-O-P. Like, we had so many different variants of that homepage and that showed in our CSS. And so, like, we had so much copy-paste CSS over there that we ended up with 90% unused CSS. No matter what I did, I would click around. I would open modals, I would do everything I could possibly think of, and still, 90% of the CSS we sent to users was unused. And that was before CSS-in-JS, that was with our SaaS stuff. And so the big problem there is nobody wants to delete any CSS because they don’t know whether it is still in use. And that’s because the easiest way to get CSS on the page is to take the URL to the CSS file and stick it in a link tag. We were using webpack and so we’re importing CSS directly, and web pack makes that magically work. And we extracted the CSS. We weren’t doing the inline thing, whatever, where you create a style tag at Runtime, whatever, but it all ended up in a single giant bundle, and so you end up with just a crazy amount of CSS that’s unused. And so that’s when I switched to CSS-in-JS because when you are going with that approach, then it’s naturally code split, it code splits along with your JavaScript and stuff. So if. You’re code-splitting there. Then it happens automatically. And so that also means that you’re not going to be pulling stuff onto the page that isn’t there. And when you decide you don’t need this component anymore, then the CSS gets deleted right along with it. The problem is that you can’t cache that very well. It can’t be cached separate from the rest of your JavaScript modules, and that is only as good as your chunking mechanism, anyway. And pretty much anytime you deploy, you bust that cache as well. And for an app where users go on like once a week or once a month at a regular interval, you don’t really get a whole lot of benefit from the caching anyway. If you’re redeploying regularly. Yeah, so Tailwind solves this, and Remix solves this first. On the Remix side, you have to import a CSS file. And what you get is Remix will just copy that CSS file over to the build directory, to the public build, and it does nothing with it. There’s no transformation of any kind, just copies it over. And then what it gives you as part of that import, the default import is the URL to that resource that it copied over. And so you do the same thing with images and stuff, too, so anything that you want to have copied into your public directory. So what’s really cool about this, though, is when you get that URL to that CSS file, the Remix route module, API, or Convention says that you export a function called links. And how do you get CSS on the page? It’s by the link tag. And so, each route can specify the link tags that it wants on the page when that route is active. And so you say, I want a link that is rail style sheet. And href. Is this styles URL that I just imported? And what is really great about this is that it means that when I go to this route, then that link tag will be there. But when I leave that route, that link tag is gone. And when the link tag is removed from the page, then those styles are removed. This CSS may still exist in memory, or the browser may just leave it in its cache or whatever, but the CSS is no longer applied because this link tag is gone. And what that means is that you get this magical place where when you make a change to this CSS file, you know that it’s not going to impact any page that’s not importing it. So you can find every route that’s importing this CSS file and know every single page that’s going to be impacted by your changes. This is one of the big reasons why everybody use CSS-in-JS because I’m so tired of the cascade. I don’t know what’s going to change when I make a change in this file. And that’s why we end up with 90% unused CSS on Paypal.com/transfer. Remix eliminates this problem. Now if you’ve got components and stuff that are used on every page, then yeah, you’re going to need to put that on the route. And as you’re making changes to those, then it’s on the root. So it’s literally on every page. So I guess check every page. But for components, those are typically going to be namespaced really naturally anyway. You just naturally namespace those. So you don’t even need a convention for it. It’s just like, what else would you call this? So that’s that if you just wanted to roll your own vanilla CSS, you could totally do that with Remix, and it would work great, and you wouldn’t have cascade problems. You could actually embrace the cascade. It’s awesome. But then you throw Tailwind into the mix, and things get even better because, with Tailwind, you get this really awesome set of conventions or constraints that limit the amount of CSS that you’re typically going to use. So from a size standpoint, that’s nice because you have fewer variations, but also from the user experience standpoint, that’s nice too, because you have a lot of consistency around the padding, around different things. And the colors and everything else is all just kind of baked into the way that you use Tailwind, and you kind of solve the problem of having components. And now, oh man, I got to namespace this, I guess, because if you’re using Tailwind, then you don’t need to worry about CSS files. Like you just use these classes, and it’s awesome. I love it so much, and it makes me feel like I’m not a designer, but I can make things look pretty okay with Tailwind, and I just toss a bunch of classes at it. What I really, really love about it is that I don’t have to think of names for things. This is why when I was using CSS-in-JS, I was always a big fan of the CSS prop. It’s basically like the style prop, except you get all the niceties of CSS-in-JS, like media queries and stuff. And I like the CSS prop because I don’t need to come up with a name. Like, I’ve got this div, and it wraps this other div, which wraps this span that shows the price. So what do I call that first div? Is it my price wrapper? And then that second div, is that my price wrapper container or container, or what is it? And here’s my root. But then that’s wrapped by another thing. So is this my root wrapper? We’ve all used these names before, and they are so nonsensical. They just don’t make any sense. And people try to put these conventions around it. Wouldn’t it be cool if we didn’t need the convention in the first place? This is another thing I love about Tailwind is I don’t have to come up with stupid, pointless names for stuff. I can just say, oh, I need this thing to be flex and justify-content, and boom, now it is. And I don’t have to come up with some stupid name.

Chuck Carpenter: [36:10] Yeah, there you go. We know that. That and cache, right? Yeah. Well, there we go. Basically mechanisms for less thinking.

Kent C. Dodds: [36:23] Exactly.

Chuck Carpenter: [36:23] That’s what I’m about in life.

Kent C. Dodds: [36:25] And talk about next thinking. Sorry. Like I said, rambler. But I am really excited about this stuff, and I will be honest. I just want to make it clear. The enthusiasm for Remix came before the job. I’ve been building my website and Remix for about a year before I joined up with the Remix team. I got the job because I loved Remix, not because I don’t love Remix because I got the job.

Chuck Carpenter: [36:51] It’s nice when those things meet though.

Kent C. Dodds: [36:53] Yeah, exactly. So if we’re talking about making, you have to think about fewer things. One thing that I love about Remix is the mutations API. So for most people, especially like new developers joining up today when we’re talking about a login form or something, they say, okay, so here’s your form, and you’re going to need an on-submit handler. And in that on submit handler, you’re going to get this argument. We’ll call it E, and then we’ll say E dot prevent default. And they don’t have any idea what that means. They just know that’s what you do when you want to do some sort of form that prevent default is preventing something that is actually quite useful. And that is the browser will serialize the form for you. So what we normally have to do is we say, okay, let’s use state, here’s my email, use state, here’s my password, and then I’m going to manage a bunch of errors and stuff so I can show the user some error messages and whatever. And all of this is going into state updates on every keystroke or whatever. My on-submit handler is going to take all of those, and it’s going to call fetch. If the user submits twice in a row, then I have no way of managing race conditions there. So I guess I’ll put a disabled on the submit button or something. Or I learned the proper way to do this is in a use effect so that I can abort that fetch request. And so now I have this use effect. And so you’re just doing so much of this wiring. And then you have to either go to the repo where your back end is, or you’ve got your API routes with Next, or you’re talking to your back end engineers and say, okay, so this is what I’m going to be sending. And you’re marshaling all of that stuff. And then, oh, yeah, you also have to do validation on the server because it doesn’t matter if you do it on the client. That’s just for the user experience. The server is where you actually validate the data because people can just hit that directly. So with Remix, this is so much easier. So every route is an API route. That means that when you’ve got a form when the form is submitted, you actually are fine with the default behavior, because the default behavior will take all the form data, it will serialize it, and then by default, it does a get. But most of the time, we want to post. So we say method post, and it will post to the current URL. That’s the default behavior of the browser with all that serialized data. And so, in Remix, you can handle that by within the same route as your form. Just like above that, you have another export called the action. And the action will take the request, and you can get all the form data out of that, and you can validate it and do all the server stuff that you need to, even talk to the database or whatever you need to do. And then redirect the user where they need to go like they just made a new project. So redirect them to the project page, or they just logged in, redirect them to their profile or their timeline or whatever, or the form is incorrect. So let’s return some JSON from this call and say, hey, this is incorrect, and show some errors. So in none of that do you have to think about managing state for the fields or even like the state for the error messages because all of that is handled for you by Remix. You can build a very real-world Remix app without a single use effect or use state or any of that. You can build an entire real-world app without having to touch those things at all. Now, there are definitely some situations where those can be useful. Like you’re building your own animation library or something like that. You need to use effect for some of that stuff, but for the regular crud stuff that most of us are doing most of the time, you can just rely on the way that the web works with a regular form, and then you can enhance it even further by maybe animating in the error messages and stuff. But those error messages are also handled for you by Remix with the use action data. And so, yeah, you end up wiring a lot less, and it all can be type-safe as well, which is pretty stellar because typescript is just the bomb. The thing is, lots of frameworks are like, yeah, here’s how you get data. And then they drop you off at the mutations, and they’re like, well, we’ve got a couple of these abstractions and stuff that you can use, but you still end up having to do all this wiring and stuff. And Remix says, hey, let’s just make it so that we work the way that the web works, and then you don’t have to worry about doing all this wiring. I like that about Remix.

Robbie Wagner: [41:23] Yeah, speaking of wiring. Let’s devolve into some whatnot here. Looked at some of the different things on all of your various about pages and whatnot. Noticed you have some Teslas and some solar, like their solar stuff. And you’re a big fan of all their stuff? I actually just got their solar stuff installed at our house like a week ago.

Kent C. Dodds: [41:46] Nice.

Robbie Wagner: [41:47] Pretty excited about that. How has yours been working for you? How long have you had it?

Kent C. Dodds: [41:50] Dude, that’s awesome. Did you get the solar roof or just the panels?

Robbie Wagner: [41:54] Just panels. Because we have a metal roof, so we couldn’t really do the shingles.

Kent C. Dodds: [41:58] Yeah. Is that loud when it hails and stuff?

Robbie Wagner: [42:01] Oh, yeah. If it rains or anything rains, it’s loud everywhere.

Chuck Carpenter: [42:06] Birds lands on your roof. You hear it. Birds land on your roof. But I like the look of the metal.

Kent C. Dodds: [42:13] That’s cool. That’s interesting. Yeah. So we got the solar roof, and it has been phenomenal. I mean, it’s winter right now, so the sun is not up as much. It’s cloudy. And so because I do have two Teslas, they take a lot of power. And so if we really needed to, we could go completely off-grid and we would be okay. We’d probably have to charge the cars at a supercharger occasionally if we had like a week of no sun. But for the most part, we could go completely off grid. And that’s the reason we got it so that we don’t have to rely on the grid. And in the summertime, we’ll be sending the city or the power company like crazy amounts of energy just because I maxed out as much as I could on this thing. Because you don’t know what your future energy needs are going to be. Right now, I’ve got two cars, but maybe one day I’ll get a pool. And pool pumps are expensive to power and stuff, but yeah, it took forever, though. I started thinking about this in March of 2020, and I put in an order for panels, and I didn’t hear anything. And of course, that’s COVID, and everything got everything messed up. But by September, I was like, you know what, I don’t want panels. I want to do the roof March of 2020. I decided I want panels. Then I decided I want a solar roof in September of 2020. And so I switched it. And then it wasn’t until like June of this year, 2021, when we finally had the install over. And my goodness, they did an amazing job installing. I’ve never had somebody work on my home and feel so confident in their abilities, at least nothing that big. I’ve got an electrician that I love, and he’s awesome. He does such a great job. But for a giant project like that. I’ve had landscapers and stuff, and I’m always checking on them and whatever, but these guys were just. They were so good. And they’ll come to you, and they’re like, I’ve got this problem or whatever, I’m not sure what to do about this. And you’re like, Well, I don’t know, but these guys are like, yeah, we have this problem, but here are two or three options, and we think that this would be best. And they were so good. They totally knew what they were doing, and they made sure I knew what was going on. And then the power company in the city were really stupid and took forever to get things done. So we got it all installed, I think, by July. And then, after the install, our permit was rejected. It was weird. We already had it installed. Like, what are you going to do? It’s already been installed. I don’t need a permit anymore. It’s done.

Chuck Carpenter: [44:46] Yes, we’re past that phase.

Kent C. Dodds: [44:49] But yeah, we eventually got the permit approved and finally got things switched on in, like, October. And so we’ve been running with this, and we have generated way more energy than we’ve used. And that is just really satisfying because a big part of this was I want to be able to be independent of the grid. And then the other side of it was I want to send a ton of energy to the grid so that our grid is as green as possible.

Chuck Carpenter: [45:12] Yeah, absolutely. Did you get the battery backups too?

Kent C. Dodds: [45:15] Yeah, so I maxed out on the batteries. The city limits you on how much you can put on your roof and how much battery backup you get because Teslas are just enormous batteries. So one of my Teslas could deplete all five of my power walls if I went zero to 100. So if my power walls were 100% and the battery on my car was at zero, then I could take the whole thing just with the car. That’s not very common. Like, normally, I don’t charge from zero. Normally I’m charging just like the 50 miles I drove today or whatever. And so it’s normally just totally fine. But the cool thing about getting so much battery and so much power on the roof is that it means I can have my home doing just a ton of stuff with energy, pulling tons of kilowatts. And my roof and my power walls can handle it because they can serve that much power. It doesn’t matter how big your battery is. If it can only send a couple of kilowatts, then it can’t manage that load. And so, yeah, I can charge both Teslas at the same time while running my AC or my heating, while running the dishwasher and the dryer and the microwave and all that stuff. And that’s like the biggest reason that I maxed out. Everything was just like I just want to pretend like everything is normal and everything’s coming from the sun.

Chuck Carpenter: [46:42] Yeah, I was going to say, there you go. Your car runs on the sun. That’s the TLDR. My car runs on the sun.

Kent C. Dodds: [46:49] Yeah. I like driving down the road and singing I’m Driving on Sunshine.

Chuck Carpenter: [46:56] You’re definitely an optimist. So you don’t have any combustion engine cars anymore?

Kent C. Dodds: [47:01] Yeah, I’m totally 100%, and like, two years ago, I got rid of my gas mower and weed eater and stuff. So as soon as we got rid of our minivan for a model Y, I took the gas can, and I gave it to my neighbor, and I said, I don’t need this anymore.

Chuck Carpenter: [47:20] No more sludge for you.

Kent C. Dodds: [47:22] Yeah, no more dinosaur juice. We don’t need it anymore. So, yeah, there’s no dinosaur juice in this house. So the last thing that we need to work on is methane gas. So that’s how we heat, and that one’s tough. But eventually, we are going to do geothermal, and we’ll get an electric water heater. I was told I just barely got a new water heater that’s a tankless water heater. And I asked him. I was like, do they do like electric of these? And he was like, no, it takes too much energy, or it’s not efficient or something. I was like, oh, you’re the expert. And then, literally, a week later, I saw they do this. That’s like a totally a thing. I was so mad. You go see. I’m like, what the heck? So one of these days, we’ll swap out our brand new methane-powered heater or water heater for an electric one. But yeah, that’s totally a goal of mine is, and this is on my transparency page on my website. My goal is to be carbon negative and send more goodness into the world from an energy perspective than bad.

Chuck Carpenter: [48:33] Must mean you don’t buy a lot of crypto and NFTs then because a lot of complain about the.

Kent C. Dodds: [48:39] Yeah, I do have some crypto as like you’re hedging your bets and whatever, but yeah, I have concerns about that for sure. And actually, that was another reason subtly why I decided to max out on the batteries because it’s possible that maybe one day I’ll be mining my own stuff, and I may as well mine it with the power from the sun. I don’t know. That’s probably never going to happen, but.

Chuck Carpenter: [49:04] That would be pretty cool. What would you mine? If you were going to mine right now. What would you mind?

Kent C. Dodds: [49:10] I guess Bitcoin. That’s what everybody does. I don’t know.

Chuck Carpenter: [49:13] You’re not into those little Japanese dogs?

Kent C. Dodds: [49:16] Yeah, I guess I could do DogeCoin. That would be fun.

Chuck Carpenter: [49:20] Do you have any pets currently?

Kent C. Dodds: [49:21] I do, yeah. I have a dog. Her name is Gemma. She’s obnoxious, but we like her anyway. My wife loves her, and she loves my wife, and she loves me too. But boy, she’s annoying. Dogs bark.

Robbie Wagner: [49:36] The dog, not the wife.

Kent C. Dodds: [49:38] Yeah.

Chuck Carpenter: [49:39] Got to be clear about that.

Kent C. Dodds: [49:40] My wife is great. My wife is awesome. Definitely not annoying. The dog is super annoying.

Robbie Wagner: [49:46] Yeah. Dogs bark.

Kent C. Dodds: [49:47] Yeah, they do, and I hate that. We used to have her sleep in our room, but she started growling at the kids when they would come in. And I think she’s not going to hurt them or anything, but she just is like, hey, they’re sleeping, get out of here. And while I appreciate the gesture, yeah, I can’t have my dog growling at the kids. So she sleeps in the laundry room.

Chuck Carpenter: [50:11] It seems good. So, aside from your battle to make the Internet a better place and make your world as energy efficient as possible, do you have any other hobbies or interests?

Kent C. Dodds: [50:24] Yeah, I love my one-wheel. It’s this electric skateboard sort of thing. Except instead of the four wheels, it has one giant wheel in the middle. And my goodness, that thing is so fun. Yeah, I’ve gone almost 3000 miles on it. What I enjoy doing in the summertime is I will put my laptop in my backpack and the charger, and I’ll ride until I run out of battery and stop at a park or something and plug in or like a Starbucks or whatever. And I’ll work while it’s charging. Only takes about an hour to charge, and then I’ll do it again, and I just keep going all day. I just love that. That’s so fun. In the wintertime, when it gets too cold, sometimes I’ll actually put on my snowboard gear and still go on a ride. I’ll have my helmet with the goggles and everything because it’s cold, but yeah, I’ll still do that. And I’ve got these bright lights too, so when it gets dark, I’ll just put the lights on. But yeah, I also go snowboarding a lot with my kids, and I’ll go skiing sometimes too. And then my family, we go hiking together and stuff. It’s kind of what we do for fun. So I live right next to the mountains, so I’m like a 45 minutes drive from a really nice ski resort. And so yeah, we’ve had a late season, so I haven’t gone yet. But in the next couple of weeks, I plan on going a lot.

Chuck Carpenter: [51:47] I live in the bizarro version of your life. I live in the desert, so we don’t do a lot of well. I mean, you can drive 2 hours up north, and there’s actually some decent mountains for skiing and snowboarding and whatnot. But I’m also getting old with glass ankles, so I don’t do that anymore. We hike and mountain bike and things like that.

Kent C. Dodds: [52:09] So, where do you live?

Chuck Carpenter: [52:11] In Phoenix.

Kent C. Dodds: [52:12] Okay. Yeah, that’s hot in the summertime. My goodness. You were at like 120 this summer, weren’t you?

Chuck Carpenter: [52:18] I think we did hit that one day, but I think I was out of town when that happened. It was like a week where we were out of town. We decided to do we had the terrible idea to get an RV trailer and try and tow that cross country. So better or worse to miss the 120, but do this really difficult family trip. But everything is air-conditioned, and we all have pools. They come standard. As soon as you come into the state, they’re like, oh, are you going to live here? You’re going to need this.

Kent C. Dodds: [52:49] That’s wild.

Chuck Carpenter: [52:50] Yeah, so it’s not too terrible.

Kent C. Dodds: [52:51] But your wintertime is amazing right now. You’re in the 70s or something, right?

Chuck Carpenter: [52:57] Yeah. We’ve been like this week. We were in the high 60s, low 70s. I think it was like 72 today.

Kent C. Dodds: [53:03] Oh, my gosh, that’s awesome.

Chuck Carpenter: [53:05] It’s not so bad. Nine months out of the year. It’s pretty amazing.

Kent C. Dodds: [53:08] Yeah. My sister lives in Tempe, I think, or maybe yeah, Tempe. Summertime is not fun, but she’s like, visit us any other time because it’s amazing.

Chuck Carpenter: [53:21] Yeah, absolutely. Yeah. And then she can visit you in the summer, and then it kind of evens.

Kent C. Dodds: [53:27] Yeah, it works out.

Robbie Wagner: [53:29] Yeah. It has no idea what temperature it is here. It was 21 this morning, and then it was like almost 60 later in the day.

Kent C. Dodds: [53:37] Really?

Robbie Wagner: [53:37] Makes no sense.

Kent C. Dodds: [53:38] The sun comes out, and it’s like, I think I’m going to warm you up.

Robbie Wagner: [53:41] Yeah.

Chuck Carpenter: [53:42] You need to have a lot of layers so you can switch, like, complete seasons in terms of your wardrobe.

Kent C. Dodds: [53:49] Yeah. You mentioned NFTs earlier, and I didn’t get a chance to say I think that’s a giant scam. This is the thing that people say. They’re like, well, it’s like the deed to your house. Right. It’s just a paper. It doesn’t mean anything by itself, but it means that you own the house. Here’s why it’s nothing like a deed to your house. Because if my neighbor comes in and he walks in my door, and he’s like, hey, Kent, I own this house now. I say, no, you don’t. I’ve got this piece of paper that says it’s mine, and he’s like, I don’t care about that piece of paper. Well, then I can go to a court, to a judge, and be like, hey, I’ve got this piece of paper. You got to kick this neighbor out. And they’re like, yeah, okay, we’ll do that. But if I say, hey, I’ve got an NFT for this Koala picture of a Koala or something that says it’s mine, and then somebody else comes around and says, no, actually, that’s mine. You have no recourse. You say, But I’ve got this digital something or other. And people are like, yeah, but I don’t care about that. I will take that PNG and post it wherever I want.

Chuck Carpenter: [54:59] Right. Yeah. The enforcement aspect of it is interesting. Yeah. I think conceptually it has some potential, but it’s so early days, and then it just looks like money laundering at this point.

Kent C. Dodds: [55:09] Yeah.

Chuck Carpenter: [55:10] Some people attach experiential things to it or more like a ticket or whatever. Oh, you have this.

Kent C. Dodds: [55:19] Yeah, so then you can do this other thing.

Chuck Carpenter: [55:20] So Damien Hurst did NFTs, and you could trade in your NFT for the real art if you wanted.

Kent C. Dodds: [55:25] Okay, yeah.

Chuck Carpenter: [55:25] You could just, they call burn that for the real art or keep the NFT. So there are some legit things that aren’t just like ugly ape pictures for hundreds of thousands of dollars.

Kent C. Dodds: [55:39] Yeah, I can see that where it’s like, okay, so I’m in a game, and I get this NFT that gives me access to this other thing. But in my mind, you’re not buying an NFT, you’re just buying access to this thing. Like, why do we have to call it this NFT thing? I don’t know. So it can be web3 and blockchain.

Robbie Wagner: [55:56] Because it’s cool.

Chuck Carpenter: [55:56] Exactly. It can be blockchain and web. Three So, what does Remix do for the blockchain? If we can put it on the blockchain, I think we’d have something.

Kent C. Dodds: [56:04] Yeah, well, you could probably that’s the other thing with the Web3 thing is it’s interesting, but you can’t do any actual, real world, private data sort of thing, because if it goes on the blockchain, it’s public. You can encrypt it. Sure. You can totally encrypt it, and that’s great. That means if you want the user to be able to search or do any sort of indexing, they have to download the entire thing and decrypt it and then do all of your fancy stuff on the client, which I’m sure there are a handful of use cases that could support that, but not a lot. I mean, people used to laugh at the Wright brothers, and now we’re flying an airplane, so who knows what the future holds? But these are major problems that I don’t see a lot of people talking about. They’re just kind of glossing over like they don’t matter when they really kind of do.

Chuck Carpenter: [57:00] Right. Well, I mean, that’s where you’re kind of, like you said, hedging your bets on some things, though, skepticism, and let’s see how this all irons out. But the difference is maybe if you got in if you bought your Bitcoin 14 years ago, whatever it was, for cents on the dollar, and now you’re a billionaire. Right. I don’t know.

Kent C. Dodds: [57:22] Yeah, it’s interesting.

Chuck Carpenter: [57:24] There you go. I think that’s a way to tag it and get to be ambiguous as to your position, too. It’s interesting. That’s what I’m going to say. Interesting. Yeah, I’m interested. I don’t know.

Kent C. Dodds: [57:35] Something worth talking about.

Chuck Carpenter: [57:37] Exactly. It is. I think that’s valid.

Robbie Wagner: [57:39] Yeah. All right, well, we’re at time here. I had a few more questions, but we’ll save it for a follow-up.

Kent C. Dodds: [57:48] I ramble.

Robbie Wagner: [57:49] So, yeah, thanks for coming on, and really enjoyed chatting with you and everyone that listened. If you like this, please subscribe and hit us up on Twitter if you have questions, or Kent’s around if you want to ask him questions.

Kent C. Dodds: [58:01] Yeah.

Robbie Wagner: [58:01] And we’ll catch you guys next time.

Kent C. Dodds: [58:03] See ya.

Chuck Carpenter: [58:06] Thanks for listening to Whiskey Web and whatnot. This podcast is brought to you by Ship Shape and produced by Podcast Royale. If you like this episode, consider sharing it with a friend or two and leave us a rating, maybe a review, as long as it’s good.

Robbie Wagner: [58:21] You can subscribe to future episodes on Apple, Spotify, or wherever you get your podcasts. For more info about Ship Shape and this show, check out our website at shipshape.io.