Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: [Using his Dracula voice] Hey there, Shop-o-maniacs. You're listening to a one-week-late spooky episode of the ShopTalk Show.

Chris Coyier: Hey. Hey.

Dave: I didn't get to do my cool Dracula on the actual Halloween, so I thought I'd bring it back.

Chris: Yeah. A week late.

Dave: Yeah.

Chris: It's kind of how we roll. We also wore lederhosen a week late to Octoberfest, so it's kind of our thing.

Dave: Kind of good. Yeah. We like to hang on. We're closers at the party. We're the dudes who stand around way too late after the party is way over. [Laughter] And we're just hanging out.

Chris: [Laughter]

Dave: Crackin' another beer when everyone is leaving. [Laughter]

Chris: "Where y'all goin'?"

Dave: "Hey, where y'all going? Hey, what kind of TV is this? Can I watch a Netflix show?" [Laughter]

Chris: [Laughter]

Dave: Oh... boy. People.

Chris: Well, it's just me and you. Just me and you here.

00:01:13

Dave: Hey, Chris. You like music, right?

Chris: I do like music. Sure.

Dave: Have you heard of that new band, 1023MB?

Chris: Never heard of it.

Dave: They're good, but they haven't gotten a gig yet.

[ba dum tss!]

Dave: They're good, but they haven't gotten a gig yet.

[ba dum tss!]

Chris: [Laughter]

Dave: [Laughter]

Chris: Because it's 1023, not 1024?

Dave: Yeah.

Chris: Is that what I'm meant to understand here? God, I'm glad my brain is firing on all cylinders.

Dave: Yes. Anyway...

Chris: [Laughter] It sounds like a joke that would be in the bottom of Cassidy's newsletter.

Dave: Yeah. Cassidy, if you're listening, you can--

Chris: You can have that one.

Dave: You can steel that one. Yeah, go ahead.

Chris: Episode 9 million.

Dave: ...Cassidy's newsletter. That's fine. Actually, I don't understand how she's so good at, just every week, got a nice quote, got a nice joke. It's impressive.

Chris: God dang. Yeah, it's a good newsletter.

00:02:15

Chris: Well, we're recording this a little ahead of time. So, by the time you've heard this, this isn't exactly news anymore. It was a big week.

There's a lot of hype around Turbopack. It was Vercel's little Next.js conf thing. I shouldn't say little because it was pretty big. I'm sure--

Dave: I think it was like 10,000 people online or something.

Chris: Yeah. That's wild. It was even a little -- maybe it was just my home Internet, but it was a little jerky almost. I was like, "Oh, maybe they're streaming to too many people or something."

Dave: They're struggling, yeah.

Chris: I think YouTube probably was not at fault for that one. Pretty rad, though. I don't know. Next.js 13 launched.

I updated two sites hours after the thing to Next 13. It only took me about an hour. There were a couple of weirdnesses, but nothing too bad.

I think you still have to use a flag if you want to use Turbopack. I didn't do that.

Dave: Okay.

Chris: I'm not on Turbopack yet, but I did kick up to Next 13.

Dave: So, Next 13 feels all right? I mean it is like--?

Chris: It doesn't. I also didn't take... I didn't do anything that was particularly Next 13-y. Next 13 has some data fetching interestingness that look pretty cool.

Then, I think, credit to them, a smart move is you can also use this new directory called App, I guess, rather than Pages. They're both kind of routed folders. But when you use App, you get a bunch of new superpowers, including all this data-fetching stuff, which means incremental adoption. I think, when a library ships a big, new way of doing things and gives you an incremental adoption path, that's smart. That's a good idea.

Dave: That is it, man. We've been looking at Turbopack. You know Turbopack? You're maybe using Turbopack. No? Not yet.

00:04:12

Chris: Turbopack is the very, very brand new thing that's the Webpack successor in Rust. What do you mean, Turborepo?

Dave: I'm thinking of Turborepo. That's what I'm thinking, Turborepo.

Chris: Yeah!

Dave: Okay.

Chris: Right.

Dave: We were looking at Turborepo just because we have Luro up. It's great. It's working.

Chris: Yeah, okay.

Dave: Everything is working.

Chris: Monorepo or not?

Dave: It's a monolith right now, so everything is in one repo, but it's basically a big monolith and the API is running inside Nuxt. Nuxt is server middleware.

Chris: Okay. So, you wouldn't call it a monorepo just because there's really only one thing.

Dave: I call it more like a monolith, just like Rails or something.

Chris: Okay. Sure.

Dave: But technically, I guess it could be a monorepo. It's just the Node process is spun up by Nuxt. But we're looking at pulling some stuff out, right? We do some kind of background tasks, and occasionally, they fail. Wouldn't it be better if that was on its own?

Chris: A queue or something?

Dave: Yeah, on a Reddis queue. We have a PostgreSQL-based queue, but we found out if it fills up, it just falls over, so that was cool to learn. [Laughter] It just silently dies.

Chris: Oh, no! We're just rolling out a PostgreSQL queue no.

Dave: Is it a graph file worker? Do you know?

Chris: Uh, no. It's kind of hand-rolled just because we're crazy like that.

Dave: Well, careful. A graph file worker is greater but, yeah, we found out if it fills up with too many farts, it just gives up.

Chris: Uh... giving up is not what queues are supposed to do.

Dave: That's not what you want.

Chris: [Laughter]

Dave: It just locked, and so we found that out a little late.

Chris: Okay. Okay.

Dave: But no one's thing broke, but it just was like--

00:05:50

Chris: Well, here's a thing in Luro. I don't mean to give away the farm here, but for example, you could ask Luro to pull in all your stuff from Figma, and it's probably--

Dave: Right.

Chris: --nice to wait for that. But I could see that being a thing that could be like, "Yeah, this might take a while." So, instead of just doing it in the browser in one request, we'll throw it on the queue, so it kind of gets done no matter what. You could even close the browser tab and it'll get done.

Dave: Yeah, exactly. That's kind of what we're looking at is these jobs for record generation or even if it's like, "Hey, we're going to go grab your whole entire Figma." For most sites, that's easy. It's like hundreds of components. But for like Shopify's thing, it's like 1,800 components or something like that. It's massive, right? That's megs and megs and megs of data inside Figma.

Chris: Right.

Dave: If we can just go and do that in an isolated kind of clean environment where it's just making that request, getting that request. But other things you can do with the queue is just update, like, "Hey, we're fetching this. It should be about five more minutes," or something. Whatever you think it's going to be. But you can update messaging and stuff like that.

Anyway, we're looking at Turborepo to pull in a little bit different architecture, split out some services.

Chris: Okay.

00:07:17

Dave: And I'm tying this all the way back to Vercel, I swear.

Chris: To the idea of incremental adoption?

Dave: Right. Right. What we're staring at right now is how do we do this a little bit. I think Turborepo does a pretty good job at it. You kind of maybe just build out one part. But it's hard to buy into these whole things when the path to incremental improvement isn't clear.

Chris: Yeah.

Dave: I think about some things are just like, "Hey, you've got to do this at the beginning or else it doesn't work." How do I incrementally get it better?

Chris: Yeah. Yeah.

Dave: It's cool that Vercel is thinking about that in terms of - you know.

Chris: Yeah. They seem to always kind of make the right move. Pretty smart of them. There was plenty of pushback on all this.

Dave: Mm-hmm.

Chris: But I think probably because they're so big, and it's easier. It feels like punching up, almost--

Dave: The dominant React thing.

Chris: --when your 13th release of your software looks like an Apple keynote. You know? It feels safe to punch up now.

Dave: Yeah. When 10,000 people tune into your blog announcement and you hype it up for weeks, you're maybe big.

Chris: Yeah, and it was a pretty big release, and I think it was worthy of all that. I mean I don't know. You can do whatever you want. They're doing great.

Dave: Mm-hmm.

Chris: It was fun to watch, I thought. Some of the pushback being Next 13's bundle size for Hello, World is 275 kilobytes or something. It's a juicy piece of JavaScript for what you could argue is literally nothing.

Dave: Mm-hmm.

Chris: On that particular page it says, "Welcome to Next." You need none JavaScript. That's how much JavaScript is required on that particular page.

Dave: Yeah.

Chris: But it's just kind of setting you up for the future. It's setting you up to have SPA-like behavior, ready to rock, and such.

I don't necessarily want to be its defender, but I do think working in Next is relatively pleasurable and it does a pretty great job at what it does. I think, in a lot of people's minds, it's almost interchangeable with React. It's become - Next is React. You know?

00:09:48

Dave: I mean I don't know. Longtime listeners will not be surprised. I'm not the biggest fan of React.

Chris: Yeah, right.

Dave: But I would not use it without something like Next. I couldn't dream of it. I don't want to figure out stuff the hard way. I want to just use what is good and stable.

But is part of the release the server components, or was that already there? Is that the new--?

Chris: It was. It is because that's part of--

Dave: React 18?

Chris: --React 18. Right. And React 18 is still so new that that's why there were some quotes that, again, were a little hot.

Dave: Yeah.

Chris: Which is that, like, "Next 13 is the React 18 release," kind of thing.

Dave: Ooh... Hot drama. Yeah.

Chris: React kind of saying, "Hey, I get what you're trying to say there, but if Next was the only thing in the world that ever used these, that would kind of be a fail for React."

Dave: Mm-hmm.

Chris: I think that has not shaken out. I don't think there's any bad blood or anything, but it is interesting to see who is responsible for what here and who is benefiting from what here, et cetera, shakes out. I think there's going to be some ruffled feathers before it's all over.

Dave: Yeah. I read some stuff, and people were like, "Oh, they landed a commit so they could get a release." It's like, who else can do that? Not everyone can do that.

Yeah, but as I read into it, they've been working on landing this commit for like two years, and it just worked and coincided with something they need. They're obviously a large consumer of React. So, React probably is treating them like a large customer.

But it does sort of get into this. I guess it's good that the needle has moved from, "This is Facebook's thing," to "This is now Next's or Vercel's thing." That's a good needle move maybe.

Chris: Right.

Dave: But what I think is interesting is not everyone has the ability to land their feature in React to get their product rolled out, and so I think there is something kind of like, "Well, is it only big dogs that can get what they need?"

Chris: Right.

Dave: And does that build competitive advantages? Did Netlify get notice about this cool new feature so they could build off of it? How does it shake down?

00:12:31

Chris: Yeah, it is interesting. Netlify almost needs a Next, but they've got 11ty. [Laughter]

Dave: They've got 11ty.

Chris: Shut up, Jack... or Zach.

Dave: WebC.

Chris: Yeah, which is super cool. We have scheduled that, so that's going to happen soon.

Dave: Mm-hmm.

Chris: Having Zach on to talk about WebC and just life in general. I like it when guests come on and they're really just our co-host for the week. But we'll talk about that for sure.

But yeah, it just so happens that the relationship is just symbiotic enough that it's cool.

Dave: Mm-hmm.

Chris: But that's just not always the dynamic, is what I'm getting at. I think of how WordPress is created and its open source, too. But rather than it being Facebook who creates WordPress, who is literally just the Scrooge McDuck money pit of just unlimited cash, essentially.

Dave: Mm-hmm.

Chris: I'm sure that's not true, but that's how it feels. You know?

Dave: Mm-hmm.

Chris: In fact, it probably is true. There are not a lot of companies with more money than Facebook and are more proud and invested in the fact that they've invented this technology that the world is - you know - largely beloved. If not beloved, at least dominant.

Dave: Mm-hmm. Mm-hmm.

Chris: Pretty good. Instead, WordPress is just entirely open-source, heavily subsidized perhaps by Automattic. That's always a strange relationship. But still, Automattic is not Facebook.

Dave: Mm-hmm. mm-hmm.

Chris: Very different. Very big company but, in the grand scheme of things, much, much, much smaller. Are not pleased sometimes when other companies make a lot of money or at least just benefit highly from using open-source WordPress without contributing back to it. They are notably upset at GoDaddy's usage of WordPress and how they offer hosting of it and yadda-yadda, and highly benefit from WordPress without being a terribly big contributor to it.

Dave: Yeah. they're like selling a free product without giving back, right?

Chris: Right.

Dave: Yeah.

Chris: Those two things are comparable situations.

Dave: Yeah.

Chris: One of them being contentious, the other not. They could flip easily.

Dave: [Laughter] It's like NFTs. I'm selling this JPEG, but I'm not contributing to the Dow. You know?

Chris: [Laughter] Yeah, I don't know.

Dave: Yeah. No. Yeah, and I guess you compare that situation to a Next React Facebook situation. They're not the same thing. I don't know.

Chris: Yeah.

Dave: I think if I had a concern, it sounds like it was all above board. But you do worry about kingmakers and stuff like that. Insider trading or almost from an open-source level, that's kind of weird, but it's just like, "Oh, hey. Did you know - whatever - Go is getting a new florp API, Chris? I'm about to ship it, and now CodePen can use florps." Boom. CodePen is the best.

You know? I don't know. It's cool if that happens ... ride that wave, but it does feel like kingmaking in that sense.

00:15:57

Chris: Yeah. Yeah. It's interesting how everything has to add, add, add to grow.

Dave: Mm-hmm.

Chris: It was on my mind with Figma the other day. I feel like either we talked about this before or somebody articulated this point, but it stuck in my mind that it can never, almost never get less complicated.

Dave: Mm-hmm.

Chris: And that's probably true of React and WordPress and Next and all these things, too, is just the way that these things are structured is they need to grow. There always needs to be growth happening. Grow or die, in a way.

Dave: Yeah. Weird, right?

Chris: And the only way that growth happens is by adding stuff to make some new segment of the world happy or usable for your thing.

There's never going to be a moment where, for example, Figma is just like, "Oh, you know, we're going to rip out the radial gradient tool," or something. [Laughter] You know?

Dave: Yeah. Yeah.

Chris: Just something, or that one that stretches componentry, or anything that's trying to replicate what the Web can do. We're just going to pull that out. That'll never happen. There'll never be less features on that piece of software ever.

When you're talking about time scales of software, if it's around another five, ten-plus years, by the end of that time, because of this desire and demand for growth, it will be very complicated. And it will be disrupted then by something that comes along and is simpler.

Is there any way out of that cycle? [Laughter]

Dave: No, I don't know. A guy at Microsoft once said, "We are in an always upgrade era of computing where you close your phone at night and it upgrades overnight." The website updated, upgraded while you were sleeping or while you're using it. Everything is upgrading all the time now. You don't buy the CD-ROM and that's your version of Photoshop anymore. You know?

Chris: Mm-hmm.

Dave: Everything is always upgrading.

Chris: Upgrade, upgrade, upgrade.

Dave: Features are always getting added. Yeah, it's weird. There also feels like this convergence, right? Everything needs to have Slack built inside of it, or everything is becoming Notion.

It's just funny. You know it's like there's a Notion for Microsoft. There's a Notion--

Everyone is just like, "I'm going to make Notion," or "I'm going to make Google Docs."

Chris: Yeah.

Dave: Dropbox Paper is probably the perfect example of, like, "Why does this exist?" [Laughter] You know?

Chris: [Laughter]

Dave: It's very good. I like it, but--

Chris: I used to live in that thing. How is Dropbox Paper doing lately?

Dave: I don't know. Let's go check in with our old friend Dropbox Paper. [Laughter]

Chris: Yeah. It looks like the URL is new. It used to be a subdomain, didn't it? Oh, no. It still is. Oh, yeah. That's funny.

Dave: Oh, hey, guys. It's me, Dropbox Paper. You want to ask me a question?"

Chris: [Laughter] It used to have bugs once in a while, but I wonder if they just--

Dave: I don't have bugs no more. Get out of here, man. I'm perfect.

Chris: [Laughter] Yeah, right.

Dave: I even have commenting built right into the Paper.

00:19:17

[Banjo music starts]

Dave: This podcast is brought to you buy Split, the feature management and experimentation platform.

What if a release was exactly how it sounds, a moment of relief, an escape from slow, painful deployments that hold back product engineers? Free your teams and your features with Split.

By attaching insightful data to feature flags, Split helps you quickly deploy, measure, and learn the impact of every feature you release, which means you can turn up what works and turn off what doesn't, and give software innovation the room to run wild.

Now you can safely deliver features up to 50 times faster and exhale. Split feature management and experimentation, what a release.

Reimagine software delivery. Start your free trial and create your first feature flag at split.io/shoptalk.

[Banjo music stops]

00:20:19

Chris: I think of my own experience at CodePen. Of course, we want to grow and add features and stuff too. We're not any different, really.

Dave: Mm-hmm.

Chris: But it's been such a long time since we've had a big, new feature release that it almost feels like we've decided, "Nah, this is just what CodePen is." I wouldn't blame anybody if that's what they thought was happening at CodePen, and it's not the end of the world.

Dave: Yeah.

Chris: We still grow. We still attract people.

Dave: Yeah.

Chris: In a way, it has some benefits in that what people think of as CodePen's set of capabilities, they're probably right. And they can trust it, and it's there, and it works how they think it's going to work.

Dave: Yeah.

Chris: Nobody is moving anybody's cheese because there it is. It does the thing that it says it's going to do. If you need the pro features, you buy them. It's worked out kind of fine.

Now, I'm not promising it's going to be that way forever, but it makes me think once in a while about software that's just kind of done.

I almost think of Netlify too. They are in the same kind of category as Vercel is. We just talked to Sam last week, and she was talking about all of the stuff they're working on and how often they ship and all that stuff, so they're very much not resting on their laurel.

But I feel almost some kindship because you're like, "Name it." You know, like, "What's the last major thing that you can think of that Netlify did?" I don't know. Scheduled functions, maybe.

Dave: Biller functions. Yeah, scheduled functions. Yeah, yeah. There are a few. There are a few.

Chris: Yeah, it's stuff. But generally, you think of Netlify as that thing. I have a pretty strong understanding in my brain of what Netlify does, and they don't tend to disrupt that. I wonder if that's just fine.

Dave: Right.

Chris: They don't need to be.

Dave: The ultimate CDN file deployer. You know?

Chris: Yeah. Hell, yeah.

Dave: It's just the ultimate static website machine company.

Chris: Yeah.

Dave: Yeah. There's sort of a tangential conversation. Astro has taken money. Gatsby has taken money. Frameworks, like these static site generators are taking money. They're all having to become like hosting companies.

Chris: Right.

Dave: To pay off the investors or whatever.

Chris: It's fascinating if you think about Gatsby. They were the ones that it was the most unclear what they were going to do with all that money, and it seemed like a strength of theirs was not hosting because it was like, "We're the glue. You can host this thing anywhere." [Laughter]

But then it seemed like, "Yeah, but you should probably be a host because that's where the money is."

Dave: That's where the money is.

Chris: There'd be a clear path toward success if you became your own host. Then they kind of did and kind of didn't, right?

Dave: Mm-hmm.

Chris: I don't really know. I don't think they're going to end up as being one of the great success stories of this era, unfortunately.

Dave: Well, but then Next, right? They're like, "Let's build a good host product and then make a framework that works with it." I don't know which happened first. Yeah.

00:23:27

Chris: Yeah. What came first, Next or Vercel? At the time, it was something else. I can't even remember.

Dave: Oh, what was it?

Chris: [Laughter]

Dave: It had to--

Chris: I said this on Twitter a while back, but it was one of the most successful rebrands of all time because you just woke up one morning and they replaced it everywhere. Anywhere you could think of.

Dave: Zite.

Chris: Zite. Sure. What came first, Zite or Next?

Dave: I don't know. That's a good question. I think Zite, right? I think that was the--

Chris: Probably. That would be pretty weird to--

Dave: Netlify-ish company.

Chris: Yeah.

Dave: I think it was specialized in React hosting or whatever.

Chris: Yeah.

Dave: React App deployment. But anyway, that's interesting, right, just the different paths of things. But everything always gets more features, and then everyone has to become -- every open-source project has to become a software hosting company. Then every software hosting company has to also become a Microsoft Word competitor. You know? I don't know. It's just funny.

It deals a lot with the hype of the day. I'm sure now that Figma got $20 million or $20 billion - or whatever - from Adobe--

Chris: Oh, gosh. Yeah.

Dave: --there are a lot of people like, "Oh, we need a Figma," or "We need Figma features."

Chris: Hmm... What are those? What would you say if you were in one of those meetings? They're like, "Let's just--"

Dave: You know what would be--?

Chris: Even if it was shameless. Let's just do whatever Figma does. What would they say that they need to do? Network effects?

Dave: Network effects. You need social. You need--

I think you see it in pricing models too. A lot of places have viewer, an editor sort of pricing models.

Chris: Mm-hmm.

Dave: I think people are copying them. But if I was to do something, I don't know, man. I still think there's room for an SVG tool that's as easy as Figma. You just draw, and it produces SVGs. You could put a raster in there too if you want, but it produces SVGs.

Illustrator and Figma were my only two ways--

Chris: Would it be better at SVG than Figma is? Figma does SVG just fine, right?

Dave: It does, but it's in a product design space. It's not in a "make a vector du-dad" space.

Chris: Oh, yeah. Mm-hmm.

Dave: Like filter effects and stuff.

Chris: Well, it was just for data purposes here. Zite was 2015 and Next was 2016, so you were right. Zite came first. Really shortly after, they kicked Next out.

Dave: But I think it was all--

Chris: It was part of a master plan?

Dave: It must have ... Create React App as like the first gen.

Chris: Yeah.

Dave: Then it was like, "We'll do our own Create React App," or something.

Chris: Yeah.

Dave: Man.

Chris: I also noted because weren't they behind that or something? I always thought that was strange.

Dave: Yeah, maybe.

Chris: The new version of Create React App, which still exists, right? It's just a way to use React that's not Next.

Dave: Mm-hmm. Yeah.

Chris: Which is fine, right? Presumably, slightly smaller bundle size. We'll see. I wonder if that's using Turbo, too, now - or whatever - because it was famously Webpack forever. I doubt it. It probably will be at some point, but is now by default TypeScript, which is very interesting to me.

00:27:00

Dave: Create React App is TypeScript or Next?

Chris: Is TypeScript by default.

Dave: Oh, wow. Wow.

Chris: Wow indeed. I still am struggling through my feelings of TypeScript. [Laughter] It's been a ten-year journey - or whatever - of being like, "What the hell is this?"

I'll tell you. I've fixed a lot of bugs in my life and the percentage of them that were "this is a problem with the type of a variable being wrong" was not very many of them.

Dave: Yeah.

Chris: So, it was always so strange to me that that was the biggest problem to solve. Add an absolute haystack of tooling to your app just for type problems. That is not totally fair, I understand now.

Dave: Yeah. You start writing all the code to make types happen, and you're like, "Are we sure? Are we sure we're doing this?" and nothing is working because everyone is mad.

We may do TypeScript for our API.

Chris: Oh, yeah.

Dave: Here's my sell on it.

Chris: Okay. I'm ready.

Dave: In an API, it really matters what you're passing around, like I have a user, and I want to add the role to the user or something. I have a list of roles, so I'm always going to make sure my user is an actual user and my roles are an actual role, list of roles, or something, and smash that together to produce a user with a role.

I'm making stuff up now, but I like the idea of contracts, sort of like this guy expects this very specific shape of data, and it is going to give you out this specific shape of data.

Chris: Yeah. There's something that just feels good about that. That is exactly, exactly right. Think of it through the whole flow, data flow, of your application.

That's how I'm starting to see it is that our database is typed. It has to be. It's PostgreSQL.

Dave: Yeah.

Chris: That's just how databases work, kids - if you use a good one. [Laughter]

Dave: Varcar, yeah.

Chris: Yeah.

Dave: Yeah, and GraphQL is typed, which is what we've chosen to use and has been pretty good to us as far as an API is concerned. Multiple thoughts on that, but okay. That's typed. It has to be.

Dave: Mm-hmm.

Chris: We use Go to power that API. Go is typed, so typed, typed, typed. Then it feels almost a little weird at the very last end to just go untyped.

But then the truth is, we didn't really leave it untyped because, in our React code base, we use prop types.

Dave: Hmm...

Chris: We, through linting, enforced that all of our componentry has proper prop types. Types, prop types, that's typed. So, if you have mistakes, it would yell at your four times.

Dave: Prop types popping props in passing parents.

[Laughter]

Chris: Their run time, which is kind of nice, which means that when we're dev'ing out the site and using the browser to do so, if you screwed up types, it would tell you in the console that there are problems.

Dave: Mm-hmm.

00:30:05

Chris: TypeScript is not runtime. It is only in VS Code. Guaranteed - you know, TypeScript is a Microsoft invention, so it VS Code. They work together really good. So, if you're one of the many, many, many developers who choose VS Code as your authoring tool, I think part of TypeScript's success is that VS Code rules at TypeScript.

Dave: Yeah.

Chris: It's very good at it. If everybody was still using Sublime Text, I don't think TypeScript would be as popular.

Dave: Maybe. Yeah.

Chris: You're not quite getting the same experience. You don't really have to configure much for TypeScript to be kind of nice in VS Code. It's doing TypeScript fancy things for you without any configuration or much at all.

Dave: Yeah.

Chris: It's all that cool hovering and squiggles and fancy crap that TypeScript does.

Dave: Yeah. It's almost already interpolating a lot of it.

Chris: It sure is.

Dave: But it can only get more powerful or more exact. I would say, thought, in your situation where every other link in the chain is typed, you almost maybe don't need types on the front end--

[Laughter]

Dave: --because you have security.

Chris: We're so heavily typed anyway.

Dave: You have guards everywhere else. But to each their own. I wonder how that whole Microsoft TypeScript proposal is because they kind of proposed new language features to JavaScript that would enable you to write in a TypeScript-ish syntax in native JavaScript - optionally. I would wonder how that's going because I would love to know.

I don't know. I kind of avoided TypeScript because I don't need it. Like you were saying, once in a blue moon I have that problem. But it would be neat to know the code I'm writing today would not be completely--

Chris: Sometimes, I've picked up--

Dave: The code I write tomorrow wouldn't be erased or obsolete in like six months or something.

Chris: Yeah. I'm compelled in some part through community. How many people I know and respect have said, "I felt X way. Then I did a bunch of TypeScript work, and now I feel differently, and now I like it more."

Dave: Mm-hmm.

Chris: There are so many people that have said that that that alone is compelling to me to at least give it more of a try. The fact that I never really had anything that I really, really worked on that was TypeScript made it feel like my opinion wasn't so useful. So, we did that.

And speaking of Next, it has helped me do the toe-dipping that I needed to do. We have some components in Next. This is what we needed to do to switch to typescript. [Laughter] You change the .js on a file to .tsx because it's TypeScript with JSX together, which is a slightly different beast, and it just works.

Remember how it used to be a talking point of Sass is that CSS is valid as CSS.

Dave: Rename the file. Yeah. Yeah.

Chris: Right. You can kind of just rename the file and it's fine. Then I can start.

It was tempting to pull out the prop types, but we've decided to leave them in there because their runtime and TypeScript isn't and whatever. They can kind of work together. Our thinking is that once we're 90% TypeScript, we can pull all that stuff out because all the benefit happens at basically the editor level instead.

Dave: Right. Right.

Chris: In the compilation level. Anyway, it was really quick to do toe-dipping. You don't have to convert your entire code base. You can just kind of do a component at a time.

The problem is you start... Really isolated components, you can do that. But once they start importing each other and stuff, it gets a little hairier. It's going to be a little hard to baby step it forever. At some point, you've kind of got to bite the bullet and do it.

I'm learning. I'm literally taking courses online.

Dave: Okay. Yeah.

Chris: Doing the little things, and that's kind of satisfying in a way.

00:34:10

Dave: In the D-d-d-d-discord... We have a hard stop here, so I do need to respect that.

Chris: Okay.

Dave: But over in the D-d-d-d-discord, Josh Collinsworth, Triple Threat Josh Collinsworth, brought up--

[Laughter]

Dave: --my own Dave Rupert, @daverupert, why are you a hypocrite? [Laughter] And he was saying, you know, I think it was in the lederhosen episode. We were just like, you know, Svelte is okay if you can get over the compiler thing.

He's like, "What's the difference between using a compiler in Svelte and using Vue or Nuxt or something, which a Vue single file component gets compiled?" It was a great point. I do think I apply a double standard to code transformation.

Chris: Right.

Dave: For me, I was kind of trying to reason. There's some nuance here, and I probably need to blog through it.

In Vue, my single file component turns into the--

Chris: Yeah?

Dave: It basically rolls up my Vue component into a Vue object, a Vue component object that gets passed to a Vue.component function.

Chris: Right.

Dave: Whereas if you write something in Svelte, it kind of goes through a whole world of different transformation, like a global variable gets created. Quite a bit of stuff. Optimization happens on that run. So, the input and output are very different in Svelte, I feel like.

Chris: Really?

Dave: And the input and output are very similar in a Vue template compile.

Chris: I can see why you could be accused of being hypocritical about that, though, because they're both compilers. You know?

Dave: Right. At the surface level, a computer changes the file.

Chris: Yeah.

Dave: Ta-da! We all agree. But it's this weird subtlety that I maybe overthinking, and that's probably me just experiences using compilers in the past like .NET and stuff like that and Java and stuff like that. But I think, at the surface, it is very much the same.

I think TypeScript falls into this too. It's like I don't want to do all this mumbo-jumbo. I want the input and the output to be radically different. But it does feel like TypeScript is almost like I write extra and I get out very similar to my same code but it's just a little bit more bulletproof, I guess, as I've been writing it.

Chris: Yeah. Right.

Dave: It's almost like a write time only, not a runtime or a compile-time only. It does take compile time to strip that stuff out, but--

00:37:06

Chris: Very little, though. I think this is a very interesting distinction about TypeScript is that something like, for example, esbuild can compile your TypeScript, and it does so incredibly fast.

Dave: Mm-hmm.

Chris: Just amazing. But you know what it doesn't do? Give any shits at all about your types. It just strips it all out and makes it JavaScript.

Dave: Yeah.

Chris: So, you didn't benefit from TypeScript at all in that way. Then where do you benefit from TypeScript then? Well, guess what. You benefit from it because VS Code supports it really well. You benefit at that level.

Dave: Yeah.

Chris: But you can ship busted ass TypeScript code. It's fine. It'll just all get stripped out and compiled really quickly.

Then I think it's funny that tools then brag about how fast they are at compiling it. You're like, "Well, it's not doing the type thing."

Dave: Yeah. It's basically compiling TypeScript means removing all type enforcements. Right? [Laughter] You basically--

Chris: Yeah. Absolutely entirely, just strip them gone.

Dave: Just deleting code. It deletes code so fast.

Chris: But it's one of those shift left kind of concepts is that we're trusting our editor tools so much to be the place where it actually matters. Now, I don't know. There are probably all kinds of different ways you could set this up.

You could make it so your GitHub action - or whatever - your pipeline does type-checking somewhere and fails if there's a problem.

Dave: Mm-hmm. Yeah.

Chris: But the local builds don't do it - or something. There's nuance to all this. I'm not trying to globally crap on this whole system, but it is kind of interesting.

Dave: Yeah. Well, but I think, too, it's that authoring. It's like if I am in my API and I'm like, "Cool, I'm going to send a response object," I just want it to look like a response object.

We tell TypeScript, "Here's what we expect responses to look like," and it makes sure it sends a response that looks like a response. You know?

Chris: Yeah.

Dave: That's cool to me. That seems cool. Anyway, I think we'll probably do that, but kind of bite that technical debt or just - whatever - that extra process, but purely just for the back-end. I think it'll be a while before I do front-end.

Vue enforces types, too, kind of natively without prop types.

Chris: Right. There is something to be said about looking... Oh, it does. Interesting. Really?

Dave: Yeah.

Chris: Oh, I didn't know that.

Dave: It's a built-in feature. Yeah.

00:39:40

Chris: That's kind of nice because certainly you could just write TypeScript too with Vue if you wanted to. To me, visually, it still looks horrible. I'm not over it. But remember for a long time I thought the same of lots of different technologies over the years, and I'm sure that--

I don't get that sense from people that write a lot of TypeScript that they think it looks gross.

Dave: Yeah.

Chris: That's not a talking point I hear.

Dave: Yeah.

Chris: But to me, it very much does.

Dave: I agree.

Chris: It looks like a lot of noise in there, and I'm sensitive to noise in componentry because I think a lot of times I have to sit down and reason about components. That is something that is very much a part of my job and I spend time thinking about and doing. If there's noise in the way, I worry about that a little bit.

It's part of (but not entirely) the reason I don't always love Tailwind. Sorry. Not trying to set the world on fire here. I always feel like I have to tiptoe around Tailwind stuff.

Dave: Oh, way to go. Way to go, dude.

Chris: I know. I know.

Dave: One star review now.

Chris: "Use apply, you idiot."

Dave: Yeah. "Don't use apply, idiots."

[Laughter]

Dave: Anyway...

Chris: Anyway... In anything, though. To keep burning the world, be like, well, having collocated styles in the same file as a component, I don't love because it feels like noise. Why not just split it into a different file? Big deal.

Or, like, "Oh, put the state machine at the top of your component." Maybe that one is actually helpful because it does help me reason about the component in a way. But it is an awful lot of noise for a single component.

Dave: Yeah. Yeah.

Chris: I don't know.

Dave: No, I think, yeah, the same feelings. It's noise.

But back to the thing, it's like, if you're passing a prop called - I don't know - pizza=

Chris: Yeah.

Dave: At least you'd have some confidence that pizza prop somewhere in the chain (if it's all in TypeScript) was an actual pizza being passed down.

Chris: Yep.

Dave: That's maybe helpful.

Chris: That's pretty rad, right?

Dave: Yeah.

Chris: Because that's not too much noise because then your type is probably somewhere else in your code base.

Dave: Mm-hmm.

Chris: You have your own little @luro/types somewhere.

Dave: Mm-hmm.

Chris: Part of your monorepo, probably.

Dave: Oh, yeah. Yeah. Yeah.

Chris: Then when you make a pizza type, you just type :pizza.

Dave: Yeah.

Chris: You're not defining the type right as you're using it kind of thing, which is less noisy and sounds pretty good. Although, I'm hesitant to talk too much more about it because I feel a little ignorant about all this and I know you've got a hard stop. So, any final words?

Dave: Hard stop edition. No, no, if you're having success with TypeScript, send it in. We'll talk about it next time.

Chris: Yeah.

Dave: It's always good to kind of get people's perspective, so we'll try to talk about that. Yeah. I don't know. Maybe we need to do the TypeScript challenge.

All right, well, we'll wrap this up. Thank you for listening to another hard-stop edition of the ShopTalk Show. Follow us on Twitter, @ShopTalkShow, for six tweets a month. Join us over in the D-d-d-d-discord, patreon.com/shoptalkshow.

I forgot one of them, but we'll... Oh, like and subscribe, star, heart, favorite it up. That's how people find out about the show.

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

Chris: [Laughter] No, but always a pleasure, Dave. We'll talk soon. ShopTalkShow.com.

Dave: Good talking...