What's the tech stack Paravel's using to build their app? A conversation on AdonisJS, NuxtJS on Vite, side projects in Vue, checking out Bun.sh, Slinkity and Eleventy, and working on quantity to get to quality.
Time Jump Links
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about front-end Web design and development. I'm Dave--beat up by a surgeon--Rupert, and with me is Chris Coyier.
Chris Coyier: Oh, man! Dude. At least you're thinking of your long-term health, right?
Dave: Well, yeah. You know. You can get your nose cut on an audio podcast. You can have a doctor [laughter] remove a side of your nose. You can do that and still do an audio podcast.
Chris: Oh, yeah. Yeah, you can't tell, listeners at home.
Chris: That's just regular old Dave there. He just happens to weigh 99.99% what he did before.
Dave: What I did before, so there you go. Anyway, yeah. Been addressing some health stuff, so it's good to get through all that.
Dave: Now, I'm back at work. I literally, just before this call (or yesterday), made a new feature in the app I'm working on, which is fun.
Chris: Oh, congratulations. Yeah, does it feel pretty greenfield-y? You can just do stuff?
Dave: I can just do stuff. There's stuff I need to do and that's not as fun, but yeah. I can do stuff. It's kind of like limits of your imagination and time.
Chris: And taste, yeah, and coworkers.
Dave: And taste and coworkers.
Chris: What is it in? You announced it publicly, so if you can say it.
Dave: Yeah. It's called Luro, luroapp.com. It's kind of still in private alpha sort of stuff, which is good because we've demoed it to y'all at CodePen--
Dave: --just because it was like, hey, you guys work on an application. We're software for an application. [Laughter] But the goal is, basically, we only want to have a small group of people, like five or ten customers to start.
Dave: Then we can maybe open up the doors later. But we just need feedback and people working on it and using it.
Chris: Tell me about it, man. Feedback loop, that's the best. I have all kinds of things to say about that. I'm curious, though, what your stack is because you got to pick whatever you wanted. So, what'd you pick?
Dave: Yeah, greenfield. It's been changing. Can I say that, too?
Dave: Like your first guess is kind of the wrong guess, and so now it's changing. The first idea was we'll just deploy this to Netlify. We'll use serverless functions. Then we'll save it to a Postgres database somewhere.
Tried getting GraphQL up, but it was all this work for me to do all the back-end stuff and then write all the resolvers and all that. I went with Prisma, which I really liked.
Dave: Which is an ORM.
Dave: It's kind of a first-class, first-party plugin inside Redwood.
Chris: Oh, my god! Does this mean Dave is writing React?
Dave: No, not at all. [Laughter] Actually, it's in Nuxt. And so, it's a full-featured Nuxt app, which I like writing Vue. Then only the parts inside the serverless functions or slowly that's moving over to an entire Node app.
Dave: Inside the functions, am I using this Prisma to save data.
Chris: Oh, so does that mean Netlify is out, too, just because it's a little too hard to pull off, or can you--?
Dave: Netlify is out. I'm obviously a fan. Maybe it would show up again some other day. But the problem was we had a back-end API because we're doing some kind of long tasks that don't fit on a--
Dave: --whatever, serverless function. And so, we had to build a back-end API. That went out to DigitalOcean. Right?
Dave: Then we have a Postgres, right?
Chris: Okay. Cool deal, boss. Yeah.
Dave: Then along the way, we're--
Chris: You're going to keep the Postgres on DO, too, right?
Dave: Yep, Postgres is on DO, and then storage, S3 bucket, that's on DO as well.
Dave: But then for the back-end API, we are sucking down a bunch of JSON from an API. Just to get it done, basically, we went with Mongo, which was an okay choice if you're storing reams of JSON, right?
But as I've looked at the architecture, I have Netlify with serverless functions and then I have Postgres, Node, Mongo, and an S3 bucket. I just want to simplify that. I want to streamline that. Part of that is going to be just melting all that down into one basically classic server-side monolith.
Dave: That has all this stuff. And we'll get off Mongo eventually and just use Postgres's JSON fields, which is pretty powerful.
Chris: Mm-hmm. Right.
Dave: We'll simplify that entirely. Then there's also been work to just pop that into Docker so that we can just--
Dave: So, you don't have to know how to install Postgres and stuff to work locally, but also if we're spinning up instances for people, which we hope to do soon here, but we don't have to--
Chris: Oh! You want people to run this on their own infrastructure. Yeah, why not if they're enterprise clients? They probably want to.
Dave: Yeah, and that's kind of the idea is, for enterprise clients, the first thing they ask is, "This has to go behind our firewall," and so you're like, "Whoof!"
Chris: Fine. Docker it up.
Dave: Yeah. If we can just be like, "Here. Run this Docker," then that should be pretty cool.
Chris: Hmm. You should probably pick the minimum amount of services that you can then, so it's not too whacky. Hmm.
Dave: Yeah, that's what we're thinking. We're going to maybe roll it down into very small services. I don't actually know how you do an S3 storage. I guess they have storage volumes.
Chris: Yeah. I'm curious about that. Are you actually using S3. DO has that spaces or whatever that's S3 compatible.
Dave: Yeah. DO spaces. I think, yeah, it's either S3 compatible or just literally a proxy over--
Chris: Oh! You think that's what it might actually be under the hood?
Dave: I think it is. Yeah.
Dave: Yeah, yeah. Anyway, it's an S3 compatible, so if the client is like, "Oh, this has to go on our S3 machine," or whatever, it's like, "Cool. Well, we support that. We just need the keys."
Or if somebody is like, "Oh, this goes on Azure storage," that shouldn't be a problem because we just need keys. We just need - you know.
Chris: Yeah. Yeah, probably not.
Dave: I assume Azure has some S3 compatible API.
Chris: Sure. Cloudflare does, too. Everybody.
Dave: Right, so Cloudflare would be awesome. It's sort of like Teams because, you know. You've seen enterprise people. They come up with their own rules. [Laughter]
One client I had just was like, "We do Google Cloud platform now," and everything is on Google. You're like, "I have a Jekyll site." [Laughter]
They're like, "Google Cloud platform." You're like, "Oh, no!"
Chris: My experience, the most funny one is when I have to be on calls where -- I don't deal with enterprise very much. But in the last year, I have a couple of times. It was a lot of calls where there'd be a whole team just for provisioning, which kind of made sense, actually. Somebody's job is just to document processes. Then they're like, "Oh, Sue doesn't work here anymore." Then that becomes that team's problem where they're removing Sue from internal apps as well as external.
Chris: If you're using CodePen, this big company needs to know that they need to remove Sue from the CodePen team, too. Right?
Chris: Which kind of makes sense, right?
Chris: It's like taking care of your software in a really grown-up way, not just like, "Oh, she hasn't worked here for three years. I don't even know who that is." They just can't be sloppy like that.
Dave: Right. Yeah. We know one of our clients -- they're not on Luro yet, but they are big Active Directory, single sign-on, Office 365, Teams, all that stuff, and it's all connected.
From their standpoint, if they fire somebody, they just remove them from Active Directory and they're gone from the system entirely. Even probably their little badge to get into the office is connected to the Active Directory.
Chris: Yeah. Interesting.
Dave: I'm not saying that that's "cool," but it's definitely--
Chris: It makes sense at scale, certainly.
Dave: It's a real-world issue. Yeah, you wouldn't want somebody having access. Anyway, that's all stuff I have to think about and it's kind of a bummer because that's not the fun part of Web development.
Dave: But that all stuff that falls on my--
Chris: I even hate to be drilling you about all the stack stuff because it's interesting to me, a little bit, but obviously what's interesting about the product is what the product is. But you know we're a tech nerd show, so we like to talk about stacks.
Dave: Yeah. Nuxt is -- I like Vue. We needed a little bit of reactivity. It's actually paying off.
Dave: Then Prisma is kind of the wildcard. Postgres is very stable. Prisma is kind of the wildcard. And working in a serverless function and all that stuff is a little weird at times. But what I like about Prisma is it has the concept of migrations.
Just yesterday, I added a field to the database. I said NPM run DB Migrate, and I ran a migration, created a migration, ran it, and it added the field to the database. All I did was edit a schema file, just like a React schema file.
That's so powerful to me because I can just express. I declaratively say what I want and it imperatively figures out or it figures out how to add that to the database safely without destroying data. It'll warn me if it's actually going to tank my database.
Chris: Wipe something? Nice.
Dave: That's cool. It's not me just writing raw SQL, you know?
Chris: Yeah. If your migration is "drop this table," it will be real clear?
Dave: If you've used Rails, it's frustrating, but it's also so powerful because if I install this on box number two or somebody pulls down their work, all they have to do is run this command and it upgrades their whole database adapter to the new stuff. Anyway, I'm getting a lot of value out of it. I think I will--
Dave: Who was it the other day in the D-d-d-d-discord? Was it Joel Yoder? I forget. He mentioned AdonisJS. They're like, "Why don't you talk about this?" It was a fair question. [Laughter] I'd never seen it. You and I had never seen it.
Chris: No. I think we've even mentioned on the show before, like, "Why is there no Rails for Node?" Of course, there is actually answers to that. This one looking like maybe the best one.
Dave: I saw it, and I'm not going to refactor my whole Rails app to be on this, but it was very, like, "Ah-ha! I like this." It's very--
Chris: Yeah. A-d-o-n-i-s.
Dave: There are a lot of conventions.
Chris: Yeah. It's got a router built-in kind of thing and then, crucially, controllers, which is kind of like the missing thing, I feel like, on a lot of things like this. It's like build your own or something, but this has the controller thing going on, which is what you need.
Dave: Yeah. It handles file uploads, sessions, cookies, assets. That's the stuff, dude. That's what apps do.
Chris: It's trying to be a little ecosystem, so there are little plugins, like, "Oh, do you need something else? That's not part of core, but you can have it right here." Do you need to put stuff in S3 like Dave does? There is a drive S3 plugin for Adonis.
Sorry. Don't get stars in your eyes, Dave. You're not rewriting again.
Dave: I'm not going to rewrite.
Dave: Well, you know I'm working with a friend, and they kind of brought it up. They were like, "Hey, just having looked at this and played with it, have you considered rewriting it in Rails?" I had a -- panic attack is the wrong word. What's the mild panic emoji? [Laughter] I would probably be very far if I was in Rails, but I would be the only one who could operate on it.
Chris: I need to author in that way. Rails just has none help for that.
Dave: Well, and I think that was one of the limitations of Adonis. I don't know if I'd want to write all my templates in Adonis. It's very elegant templating language, but I think it seems to require the templates, maybe.
Chris: Does it, really?!
Dave: Possibly. Possibly.
Dave: I'm not sure. I'm not sure.
Chris: --useless to me.
Dave: I don't want to over-speak.
Fetch is such a powerful tool. Then from Fetch, I can just - boom - drop that in an object and then have Vue loop over that object. I can prototype things really, really quickly. I think that you miss out on that if you don't have that.
I draft the component. I include the component. Then I just start writing in the component file and things start showing up. That's really powerful.
Dave: All hot module reloads. I didn't have to do nothing.
Chris: Need it. Yeah. Are you on the Nuxt that's Vite or no?
Dave: No... But I want to be. I may actually hire a Vue person to just do that work; get us up to the new goods.
But there's this thing, Nuxt 2 to Nuxt 3. There's a little plugin called -- module, they call them -- called Nuxt Bridge. It basically adds Vite and all this stuff. It's like a stepping stone to Nuxt 3.
Chris: Oh, just bite the bullet and do it.
Chris: You don't want to be on a weird stepping stone thing.
Dave: Apparently, there's some stuff that just straight up doesn't work right now.
Dave: And so, actually, the compat with Nuxt Bridge is kind of better, just a smidge better.
Chris: Hmm. Well, maybe.
Dave: I think that's all at modules.nuxtjs.com. They should pay me. They should hire me to be an ambassador. [Laughter]
Chris: Yeah. I think they should.
Dave: Yeah, the PWA module -- here's a good example -- is not Nuxt 3 ready. Right?
Dave: Me building an application that people could probably use on their desktop, I think I want the PWA. I think Nuxt Bridge would be -- it works on Nuxt Bridge, so that's awesome.
Another one that doesn't work, though, is .env. That sucks. [Laughter] I probably need .env because I'm using it to extreme. ESLint, I'm using. Some of these aren't compatible yet.
Nuxt Bridge is a really good, like, "Hey, take one step into this realm and see if you can--"
You know I just rolled out Century and stuff like that, so I don't know. That's kind of-- We'll see. We'll see.
Chris: Yeah. Yeah. Yeah.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Netlify. One of the many things that you can say about Netlify is that they are built to scale. Anything that you put on Netlify, it's instantly ready to scale.
There's no amount of traffic that's going to land on your Netlify site and have Netlify fall over. It's not happening. It's on this massive CDN that's absolutely ready for that. It's kind of cool to think about, that you just don't have to worry about it, even if you start layering on more dynamic stuff like your cloud functions.
Those are going to scale, too, because they're Lambdas, because Lambdas are super designed to scale. Now, there's cost involved, but Lambdas are notorious for scaling well cost-wise as well, which is so cool. Right? But they're built for not only scaling just the load on your website, necessarily, even though that's an important part of scaling, but they scale up to the size of your business as well.
If you are an enterprise company and you want to use Netlify, they are super ready for that. They've got all the certs and stuff that are required for your enterprise thing to handle. They have really fine-grain team control stuff built into Netlify, so that's going to work for you.
You're probably in Jira land. Well, guess what. Jira works great with their deploy previews. Imagine a place where there's lots of - I don't know - red tape kind of stuff or, "Is this ready to go live?" These five people need to see it, kind of thing. Well, their deploy previews are great for that and they can leave feedback, which is linked directly to Jira and that kind of thing.
Logging is important in enterprise land and they have all kinds of good solutions for that. Netlify enterprise is even in the AWS marketplace, which is kind of like a bar, I think, for some enterprise places to be like, "This stuff is AWS approved. Well, then, okay. Then we're going to do that."
Really, truly built to scale not only for your website, affordable, fast, stable, awesome, but built for any size of business as well from clearly they've nailed it for the solo-developer, but they nailed it for little teams, too - I use it for that. All the way up to big giant teams.
Netlify is there for you. Thanks for the support.
[Banjo music stops]
Chris: For the first time, I'm working on a thing in Vue.
Dave: Mm-hmm. Mm-hmm.
Chris: A little side project thing.
Dave: Yes, I know.
Chris: Yeah. It looks good. It started as a Pen and then moved to some Vue. I'm trying to look at it right now, what we've managed to get it in, and it's Vite for sure. It's been fun to work in that because it really is just like blow your brains out fast.
Chris: There's none waiting for anything ever. Starting it up, running it, build, whatever, it's just incredible.
But it looks like it's not Nuxt. But then I'm like, what is doing the routing then, or is it actually Nuxt and I'm just being dumb?
Dave: Let me see.
Chris: Have you seen it?
Dave: I haven't seen it.
Chris: The package.json does not include Nuxt. It's just straight-up Vite build, Vite preview. Maybe Vite has some role basic routing in it all by itself. I don't know.
Dave: Oh, yeah. Maybe Vite has -- oh, yeah, pages, page-based routing.
Chris: Vite has page-based routing just as part of the deal?! Oh, that's so cool.
Dave: Let's see here. Unless there's--
It looks like we're using maybe Vue router. Yeah.
Chris: Oh, Vue router.
Dave: Yeah, so in main JS of this file that no one on the audio podcast can see.
Dave: We have routes defined, and so basically you're saying, "When you go here, pull the homepage component."
Chris: I see.
Dave: "If you go here, pull the settings component."
Chris: Which is straight up Vue router, which is nice because it's the canonical way to do it in Vue.
Dave: Yeah. That's honestly what powers Nuxt. It's Vue router, but they call it Nuxt Link. They add a component for it.
Chris: Yeah. It's so that you don't have to do this routing. You just dump this crap in pages and it just works without having to write literally any code. Right?
Dave: Right. Yeah, so it just grabs stuff.
Chris: Yeah, that's cool. Maybe we could use Nuxt, but it's nice that we didn't have to here because now we can be on Vite and just not worry about it. It's pretty minimally powered, so that's been fun to work on.
I've never worked in Vue before, but it has been effortless, partially because Vite just works. It's very easy. Partially because I just know how to write CSS and, at the moment, my few contributions have been just styling work, pretty much. That's just been easy.
Chris: I love that. I love that there's still this type of work that you can do. Just design semantics, HTML, accessibility, CSS. There are a lot of those people out there that identify like that and are very good at that work that this project -- I know Dave and I are here, "Blah-blah-blah Vue, Prisma, and blah-blah-blah."
Chris: Stuff that you maybe don't care about. I don't have to care about any of that on this project. I'm still contributing to it, but just in this easy kind of CSS way, and it's been great.
I'm not worried about it either if I have to jump in and write some code, too. I'm familiar enough with the concepts of Web development that I'll get my click handlers going on there. No, I'm not worried about it.
Dave: Yeah. That's what I think I like about Vue. We, the other day, were talking about one of your Astro projects. You just moved your serverless site over.
Chris: That's where I was trying to go with this is that I got a thing in Nuxt. I've got stuff I'm working on in Next, and I've got this Astro project that you brought up. I'm jumping all around the different framework worlds.
Chris: And having no trouble with that.
Dave: Well, I was going to say Nuxt or Vue and Astro are very HTML forward. I think I like that. You don't have to cruise through a bunch of JS soup.
Dave: But the programming model is all the same, right? Maybe that's what's cool is, "Hey, guess what. It has components. Those live in a components folder, and you use the components." [Laughter]
Chris: Yeah, and you import them when you want to use them and pass props around and stuff. And they have scope styles attached to them and what have you.
Yeah, you're right. That's a good way to say it. The programming model is the same.
Dave: And so maybe that's kind of cool. Maybe that's one benefit [laughter] that's come out of - whatever - ten years of framework wars is everything is kind of similar.
Chris: Well, and it's interesting in Astro. That's what I saw in it early on was, like, "Oh, this is very modern, this way." I can even stay in React if I want to and know that I'm not paying any costs for doing it.
Chris: You can pile it on if you need to after that.
The site you're talking about, this has been up for years: serverless.css-tricks.com. I made it on purpose. It was just a fun, little side project to build. I put it on a static site generator on purpose because what I wanted to do was have the content of the site in Markdown files.
Chris: Which is classic. You've been blogging like that forever. That's a very normal way to work with a static site generator. It's not the only way, but it's kind of cool.
When that's the case, that means if somebody else wants to contribute a piece of content, they can just do a PR against the repo and there it is. I've had success with that over the years, that kind of user-contributed model of content. I like that, so I was trying to keep that.
I wrote it in Gatsby, at first, which I didn't hate - or whatever - but it really is a complicated beast. I was showing you some of the crap I had to do to be like, "Okay. Here's a page. What I want to do is pull all the files, the Markdown files, in this folder and then just loop through them and spit out a component." It's like you have to do that in GraphQL - or whatever - in Gatsby because it's so GraphQL forward.
In this case, I could care less about GraphQL. I'm a GraphQL liker, but I don't want to have to do that to query for some Markdown files. The technical debt there was whack-a-doo, if you ask me.
Chris: Then I had people opening bugs saying that they couldn't install Sharp. I'm like, "Why are you using Sharp? I don't care about Sharp." That node image processor is just part of Gatsby that was hard to install. It registers a service worker that probably did interesting stuff, but I don't know what and I don't know why, and I just had no control over it.
There was just a lot. I'm sure I was versions behind on Gatsby, but I just was not into it. You know?
Dave: [Laughter] Yeah, well, right. Gatsby was very cool, and still is cool, but I think you're like, "Oh, great. I can just write components," which is what I want to do. For a time, that was the only way to do it.
It did a good job of that, and it produced a static version.
Chris: Yeah, it did. It did.
Anyway, so I make the choice. This was a low-impact project, but I've talked a lot about Astro. I'm in the Astro Discord, which is a cool developer feedback loop thing. You should probably have a Discord for Luro, by the way. That's a great way to get feedback.
Dave: Oh, yeah. No, I should. All right. Okay. Okay. Yeah.
Chris: Anyway, I like that. It seems like the strongest place for quick developer feedback loop stuff. I'm in the Cloudflare one.
I see this new thing launch called Bun. Did you see that?
Dave: [Laughter] Yeah.
Dave: We were talking about it in the Discord.
Chris: Bunning it up?
Dave: This week, there's a lot of #hotdrama - ka-chunk - about, like, "You're not a real developer if you don't know these things."
We were all just groansville. But then somebody posted, "The new wave of tooling is making everything faster. ESBuild is changing Webpack," and stuff like that.
Chris: Right. Then what's the next 12 launched with SWC, which is some super-fast thing, and everybody wants to use Go and Rust, which are super-fast. Then Bun is in Zig.
Dave: Yeah. We were all just like, "Lord Almighty, what the heck is Zig?!" [Laughter] What's Bun and what's Zig?
Chris: I have never heard of--
Dave: I felt--
Chris: I've never heard of it.
Dave: I felt so old when I saw these words I didn't know, but I don't know Bun. It's what, a new AS Build?
Chris: It says, "Bun is post-CSS, Babel, Node, and Webpack in a tool that's 100 times faster," I don't know what it's comparing against, but whatever, "for building modern front-ends."
It's like Vite. It looks Vite-like, but it looks like first generation here. It's for Next and Create React App and stuff. It's just using the tools that a lot of devs like these days, like it or not. Right? It looks fine. You know?
I hopped into their Discord, too, just to see what's going on. I like to keep an eye on this stuff, especially as CodePen is in the market of doing online processing for stuff, and we're evolving. We're working hard on what the next-gen CodePen can be and do. You know?
Chris: When tools come out that are 100 times faster than previous tools, we need to be on that train. Not like, "How can we micro optimize what we're doing now?" It's like, no, what's next-gen. You know?
Dave: Yeah. Well, the neat thing about Bun -- I'm not saying we're all switching to Bun tomorrow. [Laughter]
Dave: The neat thing about Bun was they said a dev server with 60 FPS hot module reloading. They kind of explain it later. They say from save to browser in under four milliseconds.
Dave: That's what you need. You need to be four milliseconds to hit 60 FPS.
Dave: If you do the math, there's a frame on your--
Chris: It is a weird way of putting that, you've got to say.
Dave: Yeah. A frame on your computer paints every four-ish milliseconds. Every four milliseconds, you get a new paint. That's really kind of intense to think about, right?
Chris: Yeah. I don't know what Vite does, but I was demoing it to someone yesterday, but I'll get back to this Astro project originally. Astro is on Vite now, too.
Dave: Mm-hmm. Mm-hmm.
Chris: Right? It says something. It makes you worry about the future of Snowpack, so that's probably dead. Huh?
Chris: I don't know. Maybe.
Dave: Well, yeah, but Skypack is so good. Anyway. Yeah. Yeah.
Chris: Well, they better not kill Skypack. Oh, my god. I would be so mad. That's necessary. But Snowpack is a whole different thing.
Dave: Yeah. yeah. Yeah.
Chris: It's like a local dev thing. If they were like, "No, Vite is the way to go," then that probably is the way to go.
But I was doing this thing where I was showing, you know, like, "Oh, let me go change some CSS quick and look at the hot module reloading on it," which is yet another thing I've got to admit -- sorry if I'm the worst person in the world -- I demand it (working on projects). I need it. It's so good. It makes me a better programmer to have that instant feedback loop.
Chris: That's what Bun is talking about here, how good that is. Vite is very fast, too. I wonder if this is trying to say it's even faster than Vite. It doesn't seem like it could be possible.
I had this feeling when I was hitting save on the projects and watching the browser update that it was like, did it somehow guess that I was going to hit Command-S and do this? It felt like negative four seconds.
Chris: [Laughter] It felt like it happened faster than--
Dave: You hit Command it's like, "Yep, I got it. I did it." Yeah.
Chris: Which is just nuts how fast it is, and it's a very satisfying thing. I get that there's drama of people pushing back and being like, "That's all anybody cares about now, but what about the users?" kind of thing.
Dave: Right. Yeah, I think it was Devin Govett from Parcel who was just kind of commenting on these new brand of tools, saying they are heavily tuned to focusing on hot module reload speeds - or whatever.
I think everyone agrees; faster CSS compilation is better. But his argument or his nuance he was adding was that--
Chris: There's no bundler in it.
Dave: There's no bundler, so it has to go out to a user. And if you send 70 files out to a user, that's no good for them.
Vite does have Vite Build and stuff like that, so I think it is different.
Dave: But I think I agree. It is about what goes to the end-user. But I think our tools are so heavy right now, I think at least I used Vite for the first time earlier this year in 2021, and it felt surreal. I don't sit around thinking, "Oh, my tools are so slow all the time." But once you used Vite, you're like, "Man!"
Dave: This Webpack-y thing is slow, and I would give anything to be off of it. Nuxt is on Webpack and I literally want to switch it to Vite and use this Nuxt Bridge purely for the error reporting because I don't get error on line 692 of bundle.12345js.
Chris: Oh, man.
Dave: I get--
Chris: Yeah. The error reporting in Next and anything in Vite is so beautiful. This beautiful dialog pops up in your browser with a little stack track, some syntax highlighting of what the error was. It's great.
Dave: And it just says, "Your problem is on line 5 of - whatever - settings JSX," or whatever - .vue
Chris: The actual file.
Dave: Gosh. Isn't that--? That's what you want.
Chris: Yeah. It's awesome.
Dave: You want to be directed to the place when the machine goes bad.
Chris: True, and I will never ever say I don't care what the user gets on a website. Of course, I care.
Chris: That's a given that I care - to some degree. But that story does change and stuff. I do think DX is important, too.
Dave: Well, with Astro, you're kind of saying you got both, switching from Gatsby to Astro. You know? You got a better DX and a better--
Chris: Kind of, and you could make an argument that says, "Oh, that service worker, that did some cool stuff." You know? Post load performance, that's a thing too. Maybe you're giving that up. You can make some arguments, but to me, it was about maintainability and stuff, too.
I started to get a little afraid to get into dev, the project. I was like, "Oh, this is just heavy," and I kind of forget how it all works.
Chris: Astro just felt like a fresh thing to do. But this is like, I couldn't go wrong. Dave, I could have picked anything--
Chris: --to rebuild the site and I would have had a good experience. You have a different thing with Luro. You're making big decisions, long-term maintenance, multiple people working on the thing, reliability concerns. My little sites I've been working on -- I've got another one I'm trying to do.
I've been taking photos of breakfast burritos. I want to rate the local breakfast burritos and make a little site, just because I'm interested in these new techs. It's dramatic how much you learn when you build something for real, even if it's a dumb burrito rating site.
Chris: I've looked at Astro. I've installed Astro. I made little baby Astro projects. But when I actually converted a site to Astro, I learned 20 times more about the experience and, frankly, found plenty of rough edges.
Dave: Yeah. Yeah.
Chris: This is not something -- like, just to be clear, folks. It's pre-1.0. If you're asking my honest opinion, "Should I use Astro?" I would maybe wait for 1.0, if you want my real opinion.
Dave: Yeah, okay. Yeah. Yeah. Get real. Get real.
Chris: I just found lots of gnarly things, and there was a lot of hopping into the Discord to ask, and sometimes just being like, "Oh, I guess I'll just do it some other way then. This is weird."
Some of it was just growing pains and learning how it does certain things.
Chris: Some of it was just like, "That's actually way broken, and this is totally undocumented. And why is this so weird? And why is this magic thing work this magical way? How would I ever know that that was magical? There's no information to tell me that."
Lots of stuff like that, and they know that. They're just actively working on it.
Chris: There are like ten pushes a day. It's a cruising project. It's just pre-1.0, so--
Dave: Yeah. I did a talk on Web components. I made a bunch of demos. I put them up on a repo. Going to ship them out to Netlify. Locally, I was using Vite as the dev server. Vite plus Web components, it was going good.
But guess what. Those aren't online, Chris, because the dev server just exploded. I couldn't get the deployment to work because of just how the HTML crunched - or whatever.
Dave: I didn't have time to figure it out, so I think they're in a repo somewhere. But I just was like, "Man! I had these big, grand plans to have a demo site," but then it was just like, "Well, shoot! I can't get this to deploy." [Laughter]
I wasn't doing anything outrageous. Just HTML files in a folder. But that was too difficult for me to figure out. Yeah, in a crunch timeframe.
Dave: That's all to say these new tools are cool, but you might hit an edge. That's what you're saying.
Chris: Yeah. Yeah, totally. Then when the 1.0 does come out, then what? 11ty feels almost like a stable SSG, you know?
Chris: But it's not even 1.0 yet. Guess what. In their 1.0, there's a plugin for converting because there's a bunch of-- I don't know if it's a bunch, but there are some APIs that changed and stuff. There's going to be 1.0 growing pains for 11ty, too, even though it's been around for many years.
Dave: Mm-hmm. Yeah. No, I think 1.0 is out, but they still even have some newish tech in the form of these serverless--
Chris: Is it out-out? It's not beta anymore?
Dave: I think they announced it. There's a big 1.0 on the homepage. But I don't know if they're advocating for it. It looks like the docs are still--
Chris: Like if you NPM install 11ty, is it--?
Dave: Where are the docs on this site? Okay. I just got it.
Chris: [Loud laughter]
Chris: You didn't do that.
Dave: I'm just kidding.
Chris: That's amazing.
Dave: Oh, so good. All the docs still say V0.12.1, so maybe they're updating that. I wonder.
Dave: Maybe if you NPX 11ty or NPM 11ty - or whatever - it'll--
Chris: I should get around to this. I'll update my crap to the new 1.0. Why not? See if it goes.
Dave: Well, yeah. No, I need to do that, too. There you go.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Hashnode. Hashnode is a free developer blogging platform. Go over there. Sign up. It's free. It's easy. Boom! Now you've got a blog.
It's filled with features that are good for developer blogs. It's a community of developer blogs, so syntax highlighting and all those features you need for a developer blog they have. It's running on NextJS and Vercel. Near perfect Lighthouse score, so nobody is going to accuse your blog of not being super-fast and performant. That's great.
But then publishing on Hashnode ensures that your content can be discovered by millions of users, meaning that you have the blog. It's your blog. In fact, you can map it to your own domain name, so it's totally yours. But it's plugged into the full community there, so it's a fun place to just have an account and go explore anyway because there are loads of developer blogs there.
It's this hive of developer writing, so that's fun. Best of both worlds. You own what you create there without the hassle of having to build everything from scratch. It plugs into your content into the massive global dev community.
Markdown support. Code syntax highlighting support. GitHub backups. No ads. No paywalls ever.
Thanks for the support, Hashnode.
[Banjo music stops]
Chris: Lots of new school dev tooling. I wonder what they -- I mean 11ty has got its own compiler, right? I think it's a little irrelevant to the world of Vite.
Chris: If it ever decided to get into Sass processing or something, I would imagine it would pick something like Vite, but it doesn't process the stuff that Vite processes.
Chris: 11ty is all about HTML processors, and I don't think Vite plays like that. You know?
Dave: Well, you know old Slinkity.
Dave: Which is Ben--
Chris: That's probably Vite, right?
Dave: Ben Holmes' kind of layer on top of 11ty. Yeah, it's on Vite, and then it's kind of built for taking these React components or JSX files. It can do anything, I think, or whatever Vite can do. Then spits them out or pre-compiles it for your site.
Chris: That's what I should do. I should move to Slinkity and 11ty 1.0. That would be interesting because I do think it's--
In a perfect world -- and I don't know the nuances of all this -- that Slinkity and 11ty would just kind of get together. I think 11ty needs to have a component syntax.
Dave: Yeah. I think there was--
I've seen tweets that kind of hinted at maybe there's going to be some deeper collaboration there. Hopefully, something soon. But I have no idea. That's all gossip.
Chris: No. I have no idea either.
Dave: That can always break down or decide it's better as an external thing. I still think about, oh, if I need to just crunch files into templates, or I want templated files, man, 11ty is still going to be up on my list.
Chris: Oh, for sure.
Dave: It crunches, eats it for breakfast.
Chris: Yeah. It's all about producing HTML. 11ty and HTML kind of go together, and it supports all these zillion languages. It starts to feel pretty natural. Hasn't Zach himself made a Vue, does Vue stuff that gets smashed into 11ty? But I don't think .vue ships with 11ty. I don't know what it is, a plugin or what.
Dave: Oh, yeah. I guess. Well, yeah. There was an 11ty plugin Vue or something like that that supports Vue on the server-side.
Chris: But then it's like if you got Slinkity around, just let them do it. [Laughter]
Dave: Maybe Slinkity. Yeah. Maybe Slinkity does.
Chris: I think it does.
Dave: It does?
Chris: I think so.
Dave: Yeah. Anyway, we could get them on the show and talk about it.
Chris: Isn't that a new thing, though? That's the vibe of all these new frameworks. Not all of them, but a lot of them, right? That they support multiple syntaxes.
The Isles one I looked at the other day is kind of a Vue-based SSG. It's like the Vue version of Astro, right?
Chris: Kind of cool, but it can do other stuff, too. Astro famously does that, right? You can just keep your JSX. You can keep your Vue files. You can keep your Svelte files. It doesn't care.
Chris: It has its own little syntax, which has some niceties, but it has some weaknesses too, I think.
Chris: So, it's kind of cool. Isn't that neat to see this next-gen SSG? Which I guess 11ty was kind of the OG, like, "We don't prescribe one particular format. We support all kinds of different ones."
Dave: Yeah. I wonder if that's kind of a new class of SSG here is they support multiple--
Dave: --programmatic expressions - whatever you want to call them. But they have a component system, which technically 11ty doesn't have. But you can--
Chris: Fuck. Why not?
Dave: Yeah, and it is server-side first, basically. I think that's the other thing, too. Even with Nuxt. It's like server-side, you can do, but it's almost like, "Are you sure?" [Laughter] It feels like after-the-fact, sort of like how react.render to string was sort of like an after-the-fact feeling. You know?
Dave: People were like, "You can statically render React. Just render to string." You're like, "Well..."
Chris: That's not a first-class citizen in any way.
Chris: Mm-hmm. Mm-hmm. I've got one for you, Dave. Are you ready?
Dave: Hit me.
Chris: What are some of the classic Web dev books that aren't about Web dev, like Understanding Comics, that's one that you bring up - classics like that.
Dave: Oh, the best book on Web development ever, Understanding Comics.
Chris: What's the one where the guy with the handles on the teapots with the design affordances?
Dave: Oh, um -- oh, yeah. Hold on. This is--
Chris: It's like a classic--
Dave: The Design of Everyday Objects.
Chris: Yeah! There you go. Which has nothing to do with Web, but of course it does because it talks heavily about the concept of affordances, which is now burned into all of our brains as a thing that is important.
Dave: Is it? Is that what it is? Design of Everyday Things.
Chris: I think it's The Design of Things, yes.
Dave: Objects is a totally different one by Don Norman who created the idea of a "Norman Door," which is where the door says "Pull," but it looks like a push, and you look like an idiot at the door. [Laughter] That's a "Norman Door."
Chris: Yeah. You look like the School for Geniuses Far Side.
Dave: Yeah. [Laughter] Far Side. Yeah.
Chris: [Laughter] One of the great comics of all time, yeah.
Chris: Here's another one in that category. It's called Art and Fear.
Dave: Oh, yeah. Okay.
Chris: Observations on the perils and rewards of art-making. It's a tremendous book. I read it ages ago, but I'm just ordering another copy because I'm remembering how powerful it is.
There was an anecdote in Austin Kleon's blog. Do you got Austin Kleon on your RSS? He's the best.
Dave: Oh, yeah.
Chris: I fricken' love this guy.
Dave: I know Austin personally. Yeah.
Chris: Oh, you do?!
Dave: He's in Austin or was. Did he move?
Dave: Yeah. Yeah.
Chris: Oh, he's very famous to me.
Dave: He's famous. He's cool, though. Yeah.
Chris: Anyway, his blogging ability is almost better than his authorship. I mean whatever. His books are great, but I just think he keeps one of the best blogs around.
But he published a little excerpt that stuck with me the other day from on his blog. Basically, the title is, "Quantity Leads to Quality," and I thought of us, Dave, because you know our theme song for this show, "Just Build Websites," right? Hell yeah.
The point of that is kind of this. It's kind of quantity leads to quality because you have to do the work to get better at the work. That's what we're trying to say with that. I'll say it forever because it's the only way I've ever gotten good at anything. You put in the hours.
Chris: You build the stuff and you get better at it. I was thinking about, in this episode, because I'm like, "Dude! I got my Astro project cooking. I'm going to do another one. Maybe I'm going to pick another SSG," which I feel like I should almost outsource.
I want to make this burrito site. You write into the show and tell me what I should build it with, audience. I'll pick whatever the most popular one is. I don't know. But it's got to be weird. Don't tell me Astro because I already did Astro. I want to pick something else.
Dave: I'd love to see a Svelte Kit. Can I put in a--?
Chris: Oh, Svelte Kit! That's what I should do! Okay. Well--
Dave: I just -- not to ruin everyone's vote, but I hear good things and I'm not using it, so I'd like to live vicariously through you. [Laughter]
Chris: Yeah. I'm big on, if you build something for real, you learn ten times more than if you just Hello, World it and closed it.
Chris: You have to have a little stake in the game. You've got to buy a domain name or something. Then it's real. Then you're really going to find those rough edges and learn what you actually need to learn about the technology. Cool. That's the quantity thing. I'm actually doing it. I've all these sites in the fire and I'm leveling up as a developer because I'm doing this work.
Here's the anecdote, though, from Art and Fear. I'll just read it because I think it's interesting.
Chris: "A ceramics teacher announced on the opening day of the class that they're going to take the class and split it into two, dividing the class into two groups. All those on the left side of the studio said that they would be graded on the quantity of work they produced - how much work they do. And those on the right solely on the quality of the work," so that's the idea is that the quality people then all they have to do is produce one thing. Those being graded on quality need to produce one pot in ceramics, a perfect one. Then you get an A.
Dave: Wow. Wow.
Chris: Right? So then comes grading time and this is what went down. "The works of the highest quality were all produced by the group graded for quantity."
Chris: "It seems that while the quantity group was busily churning out piles of work, learning from their mistakes, the quality group had sat theorizing about perfection and had little more to show from their efforts than the grandiose theories and a pile of dead clay."
That's heavy, yeah? You've got to do the work and then you get good at it.
Dave: I think that's it. This is part of the reason I'm such an advocate for play and work and stuff like that. Prototypes. You've probably heard me talk about it on the show before. [Laughter]
Dave: Because I'm just like, if you could just build it, but outside of the big machine, and you can figure out how it works and get a vibe for what this would be, and then you can maybe start to connect the dots on how much work it would actually be to redo the big thing in the new thing. There's so much.
You learn so much. You get so much out of that, and I think it's about playing. It's about doing. It's about building quantity.
If you just say, "We're going to re-platform the whole damn thing in Adonis tomorrow," which again looks like a legit choice, but if we just do that, we're probably not going to learn because we're just going to feel under the gun to work hard. But if we're playing our way into that world, and it's like, "Hey, I built this little micro-site in Adonis and it's actually pretty rad and it solves these five problems we were having with the big site," man, you maybe have a compelling argument. And you can win people over to say, "Here, go play in this thing, man. Check it out." Anyway--
Chris: Yeah. Yeah. Yeah.
Dave: I'm a big fan.
Chris: There's so much to think about.
Dave: I ran a blog in pre-career time, post-college or whatever. I was big into the quantity over quality. I had to tell myself that. I like to produce quality. That's the goal, always. But I just was like, I kind of realized I have to write ten crappy songs and record them and release them before I can write one good song.
That's how I feel. Right now, I'm kind of doing that in my brain with video games. I still want to make video games. I'm 41 years old, and I still want to make video games. I just feel like I've got to carve out ten weekends and make ten crappy games, and then maybe I can start thinking about making one big, cool game. You know?
Dave: It's that thing. I don't know. You've got to start small. You've just got to do stuff. You've got to make quantity. Then eventually you'll build up to quality.
Chris: Right. You've got to know that because some things in the world don't point you in that direction. They hide this fact from you in really sneaky ways that I think is bad news. For example, famous musicians.
Chris: You talked about music and then you had the right attitude, so you've beaten this. But there's Fiona Apple released Fetch the Bolt Cutters in 2020. You're like, "Dang! Yo! That's her first record in eight years, which makes it seem like she writes one song a year or something.
Dave: Yeah. Yeah. Yeah.
Chris: Then even before that, it's like even really good bands, it's every three years, five years, something. You know? That's not accurate, though. You know? Surely they write 200 songs and 8 make the record, or whatever.
They're constantly working. It's just that it probably happens that they probably work so freaking much that they know that by the end of that long span of time, like the very best of it can be crafted into stone on an album. But from the outside, it looks like they just sit around and do nothing and then, every eight years, get struck by lightning and have this amazing record arrive at their fingertips.
Dave: Yeah. Zeitgeist here. The Beatles documentary came out from the "Get Back" sessions or whatever.
Dave: I don't know if you've watched any of that but there's a clip going around. It's really good, but there's a clip going around about how the Beatles are sitting there waiting around for John to show up because John and Yoko are late.
Dave: Paul is just noodling on his base. He's like, "De-da, de-da, de-da," you know?
Dave: But in 45 seconds, or something like that, he creates the hook for "Get Back," like this epic Beatles song, and it's just a banger. It's like the lights come on. It's a really magical moment. He kind of like gets this chorus in. Then immediately, George -- you see Ringo kind of drumming on his legs. Then George is like, "Ah, hell yeah. This is it. Okay. I'm in."
Dave: You see him, like, "I can do something with this now. He kind of starts adding his, "Che-chay," you know, like -- I think he does this hammer on thing.
It's cool. It's amazing. It's awesome. But guess what. The Beatles can do that because they spent five years in Germany when they were teenagers playing eight hours a night. That's how they got to the point where they can just sit around and write "Get Back" in 45 seconds, or "Let It Be" in a few minutes, or whatever like that.
That's how it happens is they did quantity in the early part of their career big time and wrote hundreds of songs while they were just playing all these little rock-n-roll gigs in, I think it was, a strip club in Berlin or something like that. [Laughter] It was some sort of rowdy bar place in Berlin.
I don't know. They learned how to do it, man.
Chris: Yeah. Put in more hours than we have left in our lives to put in, so--
Dave: Yeah. Basically. They just played every night for like eight hours, big sessions. That's how they got good. You know what I mean? There's something to be said about quantity. It's maybe touching into 10,000 hours territory here, but just make websites, just build websites and you'll learn how to produce good websites and bad websites, and you'll learn what levers you personally can pull.
Like if I use Tailwind, I get a B site. But if I contract this designer who I work with really well, I can actually produce a AAA site. I'm just picking technologies, but you can really learn what you're good at, what other people are good at when you're working together, and you just can dial-up. You learn the levers you have in your life to pull to create cool and interesting work given a timeframe - or whatever.
Chris: Heck yeah. I love that. Anyway, It's a real thing and it's cool that when you see actual life things that happened in the real world that verify it. We're not just like, "This seems right." No, it's been literally proven with grades and bands and humans.
Chris: It just is the truth - period.
Dave: That class is just phenomenal, that a professor was like, "I'm going to do this." [Laughter]
Chris: Yeah. There are more anecdotes in that book, too. I sent it to my buddy who is an actual ceramics professor in college now and has been for a long time.
Chris: He's like, "Oh, yeah. Dude." He had some more nuance to it in addition to that because that just makes a really clean anecdote. He's saying that kind of works, but another caveat is that you have to really give a s-h-i-t. You know?
Dave: Mm-hmm. Mm-hmm.
Chris: You can't take a class of a bunch of apathetic people and split them in the same way. You'll just get all of the same results because everybody is lazy and nobody cares.
The prerequisite is that you care already. That you're trying to get good. That you're there on purpose because you have this actual desire to get better. That's kind of a prerequisite.
But it's also kind of a prerequisite for people who buy that book because you're caring about your craft. You know what I mean?
Dave: I'm going to buy a whole book of art. Yeah.
Chris: You're probably already there if you're listening to this show, too. You care so much about building websites that you listen to recreational podcasts about building websites. I'd say you're on the way there to caring about your craft. [Laughter]
Dave: Yeah. You maybe have a leg up on some other folks in the office.
Chris: He likes the book so much, again Art and Fear, that he keeps copies of it, so I think there are moments in which he can identify somebody who is doing really good who might be having a little early crisis and that he can just grab one of his literal extra copies of this book and be like, "Here. Read this."
Dave: That's cool.
Dave: That's really cool.
Dave: It's impressive. Well, cool. Well, we should wrap up. I just want to say to a couple of people -- a lot of people reached out and said Slide Dev, which we talked about on the last show, was really cool. And so, I just wanted to thank everybody for chiming in because apparently, it's really cool. I just wanted to say that.
Some people said our crypto episode was not sufficient, so we need to bring in an expert.
Dave: Well, we'll see about that. And anyway, that's going to wrap this up.
Dave: Hey. I just want to be accountable to Twitter. You know what I mean?
Chris: That's cool.
Dave: That's my goal in life.
Chris: And they're right, of course.
Dave: Twitter is always right. But yeah, but anyway, that's cool. Slide Dev got glaring reviews from a lot of different people, so that's cool.
Anyway, yeah, thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.
Follow us on Twitter, @ShopTalkShow, for tons of tweets a month. Join us over in the Discord, patreon.com/shoptalkshow. It's fun. Discord is fun.
Then Chris, do you got anything else you'd like to say?
Chris: Uh, no. Just [sung in a lovely melody] ShopTalkShow.com.