How to Code: Opinionated TypeScript Stack + Tooling Choices Explained

Hey, folks, and welcome to syntax.

Try try a new little intro here.

This is a podcast about Wes development, and we are stoked to be here today. We are going to be answering a listener question about our opinionated stack choices. So I'll read the question real quickly just to sort of give you an idea about what this episode is about. They said summary, a 30,000 foot view of web development, soup to nuts of the main options by category with a brief elevator pitch as to why each player shines among its peers. I love the in-depth episodes a ton, but I would really benefit from a simplified rundown of all the tech tools, platforms, etcetera, currently by category. So this is kind of interesting. He he went on to say, like, I've got a bunch of old stuff that I need to migrate, and I'm not sure under each of these categories from like let's rattle through them, design tools, coding tools, CSS, languages, frameworks, meta frameworks, runtime, UI libraries, data, databases, image pipelines, hosting CDN, CDIs, and finishing touches. There's, like, so many choices. Mhmm. So we did do a show on like how to build a website where we sort of like detailed how we would actually do it. But this one's going to go more into like what are the major, major players in every single area? Why are they popular? Why why do people like these ones? And then Scott and I will sort of say, this is this is what we would like to pick. And I really like this idea, because when I'm learning a new thing, I'm really big on what I call surface area. I want to understand what are the pieces, what are the parts, what does this include so that I sort of I understand the parts.

And now I can go into each of the parts and sort of dig a little deeper. So

welcome, everybody. How are you doing today, Scott? Hey, I, I have been doing better. I had part 2 of 2 of my dental surgery at a gum graft.

If, you have kids out there, make sure they do not have a, get a tongue piercing. I I got my tongue pierced, and I had it pierced for about 8 years or so.

And everybody told me it was going to ruin my gums and my teeth, and it ruined my gums and my teeth. And then I had to have, multiple bouts of painful dental surgery. So do not get a tongue piercing.

If you know somebody who's getting a tongue piercing, warn them, it will ruin their gums. Even they might not listen to you, just like I did. That's where I'm going.

So if you hear me talking funny, I'm wearing a retainer.

I got a whole thing going on over here.

Quick shout out to Sentry. We are brought to you by Sentry. We're gonna talk about them a little later in the episode.

The question that was actually said, like, what are some of the finishing phishing touches such as Sentry? So we'll talk about how to do, like, application monitoring, when you are ready to deploy your application.

Alright. Let's get on into it. We're gonna start with design tools. When you're building a website, not always, but quite a bit of times, you want to do all or some of the initial layout design of your website in some sort of design tool.

The big ones out there right now, Figma JS probably the biggest one.

Adobe XD, very popular. Sketch, very popular.

And I'm sure Scott just added Illustrator. I'm pretty sure people probably still use like, we Wes to use Photoshop.

I'm sure people still use that. I'm telling you, man, The, the transition to moving into vector based tools was tough for a lot of designers who would always just use Photoshop. I used Photoshop for a long time personally.

I remember when that switch happened and agencies were like, Sketch? What is this tool? My 1st full job that used Sketch was Ford, and their designers were like, it's not Illustrator. It's so much better than Illustrator.

So if you're one of these people in 2024 still using Photoshop or illustrator to design your website, there are much better options out there for this particular genre. And so I would say don't use Illustrator or Photoshop.

Use Figma.

Use Adobe XD.

Use Sketch maybe. Figma is my opinion. You you wanna use a tool that will get you as close to what CSS can give you in the real world. Right? Because that's the classic like the designer made this thing in. There's no possible way for us to implement it reasonably in actual and access.

And for me, Figma is the closest you can get from. Like I use Sketch for for many, many years. About 3 years ago, I switched over to Figma because everybody was doing it. And it's way better. There's like reusable components inside of it. And you can make you can make flexible components and you can put a border on one side of a box.

Yeah. It's, it's just like so you can copy the CSS for most of the stuff too.

Yeah. And I gotta say, I've just pnpm myself on the back here. I have been using Figma since, like, 2015 before then. At at one point, I was the voice of Figma's YouTube channel. So Yeah. I've been a big fan of theirs for a long time. If I had to pick 1, I would pick Figma.

Big fan of it. And they tried to get bought by Adobe, and it got blocked for, like, Sanity competitive reasons, which I was very happy about.

The one thing I don't like about Figma is the, like, the plug in ecosystem is Yeah. Rough. It's great that there's plug ins, but, like, it's such a nightmare trying to find a good one. Like like, I wanted to remove a background before I realized that that's built into Mac OSX.

So I was like, I went through like 18 different plug ins and they're all like, buy a subscription, enter your API key. And like, I get that. But it's just it's like the Itunes App Store trying to find an app for your kid. You know, it's like, hey, try it for 6 seconds, but then we're gonna slam you with, like, a whole bunch of things that you must pay for.

And good luck with all the time you put into this.

It JS. It is absolutely a perfect analogy there.

Next up is code tooling. And code tooling is largely how you work with your code base, how you write your code, how do you manipulate your code, get it ready for deployment, those types of things.

And so this can be a text editor. Again, a text editor, when we talk about a text editor, it's a way to edit your text. You know, I think Node developers' experiences with modifying text on the Internet is probably, like, beyond, like, obviously, social media would be like a Google Docs or a Microsoft Word. These are not that. These are editing files that don't have formatting on them.

So there's no formatting. You're applying the the the code to do any sort of formatting or any of that stuff. Right? These aren't rich text editors. A text editor, there's a lot of options in this space. If you want something that's more of an app, you have Versus Code is the king in the space.

It's the best product out there in my mind in terms of this space. There's also a ton of other options, whether you have something like Zed JS a new open source one that's kind of bleeding edge if you wanna, deal with some of the pain of the bleeding edge. You have Sublime Text, which has been a workhorse for a long time, but maybe less full featured.

There's been a ton of change in this area, but Versus Code has kind of been the one that stuck around for the longest at this point. There's also terminal based text editors. You have things like Vim. You've heard of Vim, is an application that runs within your terminal, which allows you to manipulate files from your terminal.

There's Emacs, there's Neovim, there's ton of these different ones. Basically Yeah. You need a way to work with text. If you're new to this stuff,

Versus Node is the default. Use Versus Code. Yep. That's the one to go with. I had a video go pretty popular yesterday on, like, a new feature in Versus Code, and it's interesting to see, like, the replies of, like, what other editors because people are like, I want this for my editor. And it was overwhelmingly, ESLint, IntelliJ editors, which is PHPStorm and WebStorm. What are what are the other ones? WebStorm and Neovim.

That's those are, like, the 2 big ones that that kept popping up over and over. The zed one seems interesting. I'm really excited to see that it's the developers behind Atom, but they are basically rewriting the whole thing from scratch in Rust, I'm pretty sure. So it's another one to watch. But I don't know that those will ever Scott ever, but in the near future will ever displace Vercel code because a lot of the like cool editor startups right now are just using Versus Node and they're sticking it in the browser.

So you can do like get pod Node spaces, stacklets, Node Sanity. There's a million of them, which is instead of running Versus Node locally, you're running it in the browser and on some VM machine or so. You just have to all you need is a browser to do your work. Yeah.

And that's cool. I think that's, if you're out there wondering, I think that is kind of the future where things are going a little bit. I think we're gonna be getting into a world where we're doing more cloud text editors.

Yeah. I mean, we'll see. There's a lot of advantages there, I will say. Next step is a terminal. A terminal is an application that exists on most computers, by default. On Mac, it's just simply called terminal.

And terminal allows you to write commands to the terminal to execute things. Right? You move a file, you copy a file, you delete a file. Maybe you're editing a file.

A terminal is a power tool for people who know how to use it.

When you look at a text based interface like a terminal, you might think it's old fashioned, But it's extremely powerful to do a lot of, you know, complex operations at a system level faster, easier, more automated.

You can write scripts that do all these things for you. A terminal really unlocks you as a computer user to do some things that you couldn't necessarily do without it. So the options in this space, there's the built in terminal on your computer.

Windows has 1 too, and they have something called Windows subsystem Tolinski, allowing you to use a Linux based terminal, interface for Windows that is kind of a PIA to set up. But when you get it set up, it's fine. I will say it's not necessarily huge PIA. It's just not you open up the app and it works. Right? Yeah.

So Other People are gonna get mad that you called WSL a terminal Oh, yeah. Because and I get all the DMs from all the angry people.

Like Yeah. WSL is it's it's kind of a shell. It's not a shell either, but it's an Yarn actual application that allows you to peer into it.

And then the shell is like Bash or Fish or ZSH.

And then WSL allows you to have, like, the Mac and Linux y shell that you you would expect to work on Windows because trying to run web development stuff, npm install, it works on Windows, but it, it's no good. You Node? It tons of problems. Tons of problems. And I will say,

for those of you who are going to get angry at me for saying that, I, a Windows terminal is the app and it's kind of Versus Node like.

Honestly, it's a really nice terminal.

When I I asked people what's the best terminal for Windows at some ESLint, best terminal app, I I I got a whole bunch of different options, but the resounding answer from most Windows users was was the the new built in Windows terminal app Oh, interesting. The app to use. And I in my experience, which is largely pnpm Parallels, it was the best of the options. The other ones all felt kind of Windows y.

Yeah. So on a Mac, I'm using Warp. Big fan of Warp because it it sort of was like the the Versus Node for your terminal applications. It allows you to, like, select and multi selectors, and it has AI stuff built in it. We have a whole episode back on Warp. Highly recommend that. A lot of other people use Iterm 2 or just the the built in Node on Mac. Yeah. And I will say that Warp

feels more if if you're new to terminal, Warp will feel more comfortable to you. You just have to make an account for it, and people will get angry about that because they do. And it's Mac only right now or Linux.

Right.

But with all those things considered, you click on links and they work. You click on the thing and it moves the cursor to where the mouse is. You you do command arrow and it actually moves you to the start of the string instead of having to learn the very specific keyboard shortcut. I think it's what control a or something to do that. So warp functions much more like a normal tool on your computer, and I really appreciate that.

Oh, Wes we didn't mention that's, like, probably one of the most popular ones is the the Versus Node terminal. So if you ask Node has a terminal emulator built right in and probably last time I pulled Twitter, probably about half the people used the terminal built right into Vercel Node. The features of Warp are too good for me to to want to do that, to to use the built in one. And I used to hate that you couldn't detach it, but that has now a a feature in Versus Node. I don't like the the Versus Code one for I don't know why. I don't it bothers me for some reason. It's popping up. It's getting in the way. Get out of here. It's it's never where I want it to be. Yeah. And mine also,

I don't know how this happened, but my Versus Node terminal, the characters on it, we got itty bitty with massive line spacing between them. So you can't even read it anyway. I don't know how to fix it. And it's one of those things since I don't use it, I just ignore it.

But I I've even gone as far as executing commands that I would typically do in a terminal just in Versus Node from the command bar anyways, like installing packages and those types of things. But that's a bigger conversation outside of this. Let's

talk about build tools. So when you're building a JavaScript application, you are likely going to need something that will give you a few features. You need something that will, bundle your JavaScript together and and do something called tree shaking. We're not gonna get into what all these things do, Wes, essentially, you need something that runs on your system. It does live reloading. It usually fires up some sort of server that you can visit the URL in your browser and it does all the bundling, all the live reloading.

And the big players in that space are Vite, Parcel, Webpack.

And then there is a bunch of other tools that these things are built on top of. Rollup is a big one, which is Veeda's built on top of what's the Node what's the Rust webpack alternative that Vercel uses? There's RS pack. There is RS pack. Yeah. There's turbo pack,

which honestly, at this point, I have no idea what the difference between RS pack, turbo pack, Wes pack are in 2000 and Wes. I think that might be, something I need to research a bit.

So what what we'd use, I would say go v. It just works. It's so simple. Just you just type Vite and you have a server up and running. You can use you can link TypeScript, you can link new CSS directly from your HTML file. And I also like that Vite is like the the entry point to a Vite application is an HTML file.

And you just open the HTML in your browser and you're good to go. Yeah. I like that as well. And Vite Vite's my pick for my favorite of these tools.

And I think that is a good option if you're out there. Another Node would be browser and dev tools. You open up a website, you're gonna be needing to work with that website. If we're talking which browser has the best dev tools, I think it is Chrome still. I think Chrome has the best dev tools. I love a lot of their features. In general, I think it JS the best all arounder. Yeah. That said, Firefox has some interesting UIs for their CSS tools that are good as well. Chrome has cut up in many of those grid type of tools, but offers quite a bit more.

Safari is probably the worst in class of dev tools in terms of like, general features and usability.

But for the most part, you're gonna want to test in all of these browsers, but there's always gonna be 1 browser you have open that you're working in your application in. And usually I make that Chrome. Yeah, I agree. Firefox for a long time was the better dev tools and it's still what I use today, but especially

around a lot of the new CSS features.

What is this variable actually resolving to? Chrome is better, so I would probably pick a and now Node that's the question JS you pick a Chromium based browser, which of which there are many. There's Google Chrome. There is Microsoft Edge, Yarn, Brave.

What are the other ones out there? There's there's lots of them, and they all have too many similar dev tools, but they they often will skin them to look a little bit different, which is kind of nice when it's something you're staring at all day. Yeah.

I will say I am back on Arc as my default browser.

I did Firefox for a bit. I tried to do Safari for a bit. I just couldn't do it as much as Safari is nice for your battery.

I left Arc as my default browser.

And man, I really missed a lot of these features on this thing. This thing really ripped. So, I like having multiple profiles open, which is helpful as a developer tool. Maybe you're logged into some services somewhere. And then in another tab grouping, you're logged into a whole another set of services, which obviously you can do in all browsers at this point. But I found these features to be really useful specifically in working in development stuff. Yeah. Next is you're gonna need a formatter for your code and a linter, which are kind of go hand in hand.

But this, when we type code, it's not always pretty when you type it because that can be annoying to have to make sure everything is properly indented the way you expect it to be or the way that it looks nice. Or maybe there's things like semi colons that you can forget sometimes. And you hit save and you just want them to exist.

You want your code to look and feel a specific reproducible way, but typing it that way isn't always the most fun thing. So therefore, we get into this world of formatters. Formatter, typically, you hit save on your file or perhaps you upload your file to a repository somewhere. And this process runs. And with a set of rules, it snaps your code into the right spot. It it's like a a snap in place. You know, it snaps everything. It adds in those semicolons.

It gives you the proper spacing and it unifies this. That way, if I'm writing code and Wes is writing code and we're using the same formatter, that code looks the same, you know, beyond variable names and stuff like that. But formatting wise, it looks the same and that's great. That's a tool that you should have.

A linter is a tool that lets you know if you're doing bad things. Hey, you're doing this thing that could be considered a bad thing by some people. It could be actually a bad thing and it's going to cause problems.

But, usually, this is a an alert system. It's a tool that says, hey. You may have made a mistake here.

You should probably look at this. Yeah. So there's lots of options out there, in the sort of linting arena, there's ESLint JS a big one. You generally also have TypeScript errors on at the same time as well. You get those fed into your actual editor.

Prettier is the big formatter in the space right now. ESLint is a bit of a formatter, but it's more of a more of a linter. I use Prettier and ESLint together in most of my projects, although biome seems to be what everybody is talking about lately. So biome is the fork off of Rome. We won't talk about the whole story there, but it seems to be much faster.

And that's certainly something like, the the speed of getting your linting errors is something I'm starting to see specifically in the syntax code Bos is sometimes I have to hit save twice to get it to. I'm like, that's not wrong. And I hit save and then it updates itself again. And I think that there's like a like a lag between the saving and the actual running of the lint.

So I'm curious to try out Biome, both from the fact that it's just 1 tool. You don't have to fuss with getting ESLint and Prettier together

and also because it's it's gonna be much faster. Yeah. And and I think these tools, there there's definitely going to be some shifting in this landscape. If you're out there and you're a new person, this is a landscape that's kind of ripe for a disruption.

Pre year is fine, but what Node we're seeing with tools like Biome, people are being able to promise much faster speeds.

And so there's a chance that by the time that this episode is a year old, our suggestions being Prettier and ESLint to be kind of the defaults, that might change. But interesting world.

CSS.

CSS is, you know, how you style your websites, how your your websites have, bones. This is how you apply a hat and a t shirt to your website.

Then you got a skeleton wearing a t shirt.

There's a lot of different options for CSS.

People pick all kinds of different things.

My world view at this moment is that CSS today is fantastic just writing CSS.

Now, if if you're the type of person who wants faster, you know, more streamlined or different alternatives, there is a lot of different options for different CSS packages that give you a handful of different features.

If you're a new developer, CSS JS it is today JS so powerful that I would recommend sticking with vanilla CSS as long as possible.

You have scoping.

Well, sorry, you don't have scoping just yet. You have It's coming. It's in Chrome and, coming to Safari pretty soon. Yeah. So you will have scoping, but you have ESLint, you have variables, you have so many different selectors and features within CSS that you can accomplish so much with this thing. That why complicate what you're doing with additional layers if you don't have to? That said, if you're into complicating with the different additional layers and therefore, you know, exploring your options for how fast you're writing it or how you're writing it. There's something called utility based CSS, which is a bunch of predefined classes that you can apply to your CSS and have it just work away.

These are usually considered to be like smaller bits of CSS, micro classes, if you will. You add a whole bunch of them to do your styling. You're essentially taking the styling out of the CSS and moving it into the classes.

The biggest player in this world is Tailwind. This one is used. You'll see it very used frequently everywhere.

And I think this is because it offers scoping out of the Bos. It offers defaults.

It's very flexible to get as, unique as you want. You're not shipping a website that looks the same as everybody else.

But it is a shorthand, and it is a syntax all of its own. So it is something additional you should learn on top of CSS. Yeah.

Other ways to write CSS is BEM syntax was pretty pretty popular. I probably would not recommend that one. We have a whole episode on BEM from a couple years ago. And if you're curious if about what that looks like, you can go back and and listen to that. But it was invented to solve the problem of, like, of scoping. And now with a lot of the micro or meta frameworks that will just scope the CSS for you, you don't necessarily need all of that, anymore.

And there's so many other players in this space. Let me just rattle through them. Bos, you have Panda CSS.

Style X is a new one from Facebook. CSS and JS, there's emotion, stealth components, lots of stuff in this space. And I'll probably go with Scott on this one and just say I would go with whatever the meta framework is using and just write vanilla CSS in that regard. That's probably what I would recommend. Although every single project I do, I I sort of try to pick something new just to make sure I'm able to talk about it. Yeah. I think we are the exception to many of these rules because you and I are tinkerers,

and that is kind of our job. Right? It's our job to be able to know and compare these things. But typically, your job is going to be to ship stuff and that's not always a good thing to be trying out a whole bunch of crazy stuff while you're trying to ship. Maybe it is. Who knows?

Languages. I I we won't go too deep into this one, but you obviously have to a a programming language as well.

On the front end, on in the in the client, there's really only 1 option, which is JavaScript, which is not entirely true because with WASM you can run anything you possibly want. But, yeah, JavaScript gonna be the one that you run-in the in the client. And then on the back end, you can run whatever you want. Scott and I are both JavaScript developers as well. We both, on the front end, on the back end, would pick TypeScript, which is a additional layer to authoring your JavaScript that allows you to add what are called types. Wes won't go too much into that, but other popular languages in the space are Ruby, PHP, and Python, ASP.net, probably up there as well.

And, we're not gonna try to

put those all against each other and explain what they're what they all are in a a little episode here. Yeah. I I think my the biggest thing I have to say about programming languages is pick the one that you know the best. And if you don't know any of them the best, probably pick JavaScript.

Because if you don't know any of these languages and you pick JavaScript, then you get to use 1 language on the client and the server. You don't have to learn 2 sets of languages. I don't have to learn what PHP is doing and what JavaScript is doing. I only have to learn one of these. So it really depends on what you know. If you are a talented Python developer, by all means, write your back end in Python. There's tons of options there.

So again, if you can write a language Wes, you can probably find a web platform for that language.

Next up, we have a back end. So you then need to choose.

Do I want to go all in on a what's called a meta framework? These are really popular right now.

And what a meta framework allows you to do is is you can do your front end and your back end in a in a single repo, in a single framework.

You can write back end logic and in some files and and front end logic in other files, and you Scott of a one stop shop for everything. And that's really popular if you're starting a brand new, especially if you're a smaller team. That's a great way to go. Under meta frameworks, we have remix, next. Wes, SvelteKit, Astro. Those are probably the big ones right now. Any other ones that I'm missing, Scott?

Solid Scott.

Oh, yeah. Gatsby exists

still.

And this list could get out of hand very quickly, Wes, if you say, what about static site generators? Because there are

a massive amount of those as well. Which one are you picking out of this list? I'm it's hard to say for me. I'm I'm sort of a tie between Remix, Next, and SvelteKit right now. I

like SvelteKit the most and Astro the 2nd most, and then Remix the 3rd most.

I will put them in that order. I think SvelteKit makes working that ESLint side, server side talking works really well. Astro really, really awesome project there as well. The only reason I wouldn't take Astro personally is because I like Svelte as a UI layer.

And if I'm gonna be picking the UI layer as Svelte and they have a, you know, a finely crafted Svelte based meta framework, I'm gonna pick that one. So that's why I like SvelteKit the most. I I would also say one more thing is if you are new to programming

and you want, like, the easiest one, I think SvelteKit

wins by far in in that regard. Don't you think? It is the easiest, I think, to reason about. You have your a clear delineation between your back end and your front end. Svelte itself is is HTML like enough Wes you don't have to really become a JavaScript expert to write effective Svelte code. So Big fan.

So if you're not choosing a meta framework, you can obviously choose, a JavaScript framework on the front end if you want. So you've got React.

You can use Svelte by itself.

A lot of lot of times people refer to these as just like Vite apps now because you can just have an index dot HTML, link up React, and start going from there. You can bring your own router. TANstack routers are very popular in that space.

Alpine JS is JavaScript sprinkles, vanilla JavaScript in that regard. And then on the server, you can pick the popular one in the space. And if you look at any of the JavaScript surveys, everyone's using Express, but I would probably recommend that you look at one of the Scott of new expresses out there that are based on standards and a little bit more modern and are type safe. Hano JS is my favorite in that regard. And, Scott, you're using another one. I'll what's it called?

Yeah. I'm still getting, yeah, I'm still getting used to the the naming and spelling. It's e l y s I a, Elysa JS.

And this one is a BUN based backend server, which if you're new to this stuff, that might not mean anything to you. But if you listen to our next section where we talk about runtime, it will make more sense.

This is a BUN based, essentially express Deno alternative. And the reason why I like this one is that Express can do a 113 1,000 requests per second, where Eliza can do 2 400,000 requests

per second. Oh, yeah. I'm gonna need that.

Yeah. So if you're looking at those numbers, that's a lot more Wes. Brit. There's a whole there's a benchmark Scott and the bars are like the chart. It's more. There's more. It's better. I I I'll pick the one with the the bigger chart line. So I picked the 1 of the bigger chart line, and that's why I did this. It generates swagger dot.

Well, that's cool. Swagger.

Wes won't go into that. That's a whole another thing, but that's whole episode on this this, tool because I gotta say, man Yeah. I'm liking it.

And they got a cute Fox logo. Can it only be run

on bun, or is it just the tool itself JS bun power you can deploy it? I think it's bun only, but I don't know for sure, for certain. Cool.

Yeah. Wes, we should do a whole show on Hano and Eliza JS because they're pretty cool.

Pretty cool. There's not like a bazillion features in them, but if you just Node a quick thing up and running.

But we won't get into that too much. It's it's too tempting on these high level ones to just get into the weeds. Like the weeds. Yeah. Run times. We're gonna assume JavaScript here. If you want to deploy a JavaScript application, you need a JavaScript runtime.

By far the biggest one out there is Node JS. It's been the only one for many, many years. However, in the last couple of years, we've seen new JavaScript runtimes come out. The 2 big ones are Deno and Bun.

We had the creators of both of those on the podcast. You go back and listen to them and they are easier to use. They run TypeScript out of the box. They have a little some security features. So they do come with some gotchas in terms of like not everything just works. We're getting very close to everything just works in Deno and Bun in terms of like the packages have node libraries.

They just they can they can polyfill them and make them work in Deno and BUN. So if you're brand new to this, I would probably go Node.

But I would I would think very soon in the future, we'll be able to run our apps on any of these platforms. And ideally, it doesn't matter.

You know, ideally, you wouldn't have to choose it. And also the other 2 I forgot about was Cloudflare, Fastly.

Those are not like local development environments.

They're more just, like, services that you can deploy to, and run your thing. And I'm a big fan of Cloudflare myself. Yeah.

If if all this stuff if you wanna know how confusing Wes dev is, all the stuff we got. And all the stuff. Yeah.

But it all like you said, it it helps to learn this stuff if you can reason about all these individual pieces. Because it's not like they're all unnecessary. Right? You need all of this stuff or at least you need a big part part portion of this stuff. Let's talk about the user interface libraries there. You don't need a user interface library. If you're new and you wanna say, what's one of these things I can eliminate? You can eliminate a user interface library.

But it's harder to make a nice looking website without a user interface library.

User interface libraries can do a number of things. They can help you with functionality.

They can help you with the way something looks.

They can style your components and write CSS for you.

They can add essentially reusability and a layer of being able to interact with your code in a way that is less code on your part, but you're bringing in somebody else's code. There's a number of these things from what are called the headless to unstyled to styled to design systems.

And there's some that are just straight up functionality.

This is a wild world. So, Wes, do you wanna talk about these user interface libraries? Yeah. I was just, like I was trying to, like, categorize them in here, and then I ended up just making an entire show getting into this topic because it's it's a crazy world. But, like, I thought I'll just break down React ARIA as an example because React ARIA touches all 4 of these categories. So at the very basic, you have what's called headless UI libraries, and and headless UI libraries give you only the functions for things like what items should be highlighted or what happens when you click on this button? What happens when it's submitted, when somebody drags this? What do you do? And it's just functions and booleans of is dragging true and and whatnot. And they give you those. And it's to make it extremely accessible. But you have to bring the HTML and you have to bring the CSS. So how it's how it's structured and what it looks like is is what you bring. Then you have 1 step further, which is React ARIA components. They'll give you, like, a a select list and and the divs for the select list, or they'll give you the the divs for a date picker, something like that. So those are really handy.

So React ARIA is both headless, and React ARIA components are the head full, unstyled version of that? And then you want to go even 1 step further and you say, I want the functionality, I want the markup, and I want them to look nice out of the Bos. That's when you go for something that has access in it as well.

And React are your components starters.

There's 2 of them, vanilla and tailwind will give you the access for them as well.

And then finally, even Node step further is an entire design system that puts all of these things together into a cohesive look and feel. An example of that would be React Spectrum. That's from Adobe. They're the developers of React ARIA.

And to bookend all of that, these are all React libraries. Yes. So you have to use React.

So at this point, if you've chosen something else, all of these things have become unavailable to you. Another option here, if you want something that's more universally available JS shoelace.

Style. These are web components based.

These are components.

They work with anything because they're just JavaScript, and they are unstyled ish.

I'll say that. Yeah. That is probably that's the one thing about some of these, like, going all in on React for one of these things JS that a lot of the other ecosystems don't have these like bulletproof ones, but they have, they don't necessarily need to. That's that's kind of the weird thing about it. It's, like, why is there always a React version and then a works with everything else version? This is my,

my personal recommendation.

JS shoelace.

Well, I'm I'm saying if you don't use React, first, use HTML.

Do I need a JavaScript based component for the thing I'm trying to do? Or is there an HTML primitive that will do it for me? Good point. If you can't do it with HTML, then go do a web component based solution because that is going to work the most amount of places.

If there isn't something perfect there and you wanna go more niche, you can look into the framework that you've chosen, like a Svelte specific solution or React specific solution, whatever. Scott, we Yarn a Canadian podcast, and I can't have you pronouncing niche that way. How do you pronounce it? Niche. What did I say? Niche.

Oh, I you know what? Wesley's wearing a Node niche. Listen. I'm wearing a retainer. I had the roof of my mouth scraped off.

I cannot say some words.

That's true. At least they didn't say niche. I've been whistling when I've been saying my s's.

And you can imagine we just recorded an episode on HTMX, and that was like HTMX? Yeah. I was I was like, is this the right day to record this episode?

Oh, man. No.

Yeah. No hard consonants.

Let me rattle through a few more things here as well.

10 stack has a bunch of really good headless components.

Then you're also gonna get into this other world of ShadCien, RADIX UI, Tailwind, Tailwind UI, Tailwind Catalyst.

And then there's there's a 1,000,000 of them. So we'll do a whole show on it. But in general, if you're new to this stuff.

Skip the whole UI library. Yeah. Unlistively.

Yeah.

Mhmm. Wes. Yeah. Totally. Next step is data. The websites, 99% well, no. Okay.

Let me just dial back that 99%.

You have a whole host of websites where the data does not change. Right? This is just static data. It's the same place. It's a brochure.

That's a small portion of websites.

In 2024, most websites are sending and receiving data from a Vercel.

And to do that, you need to store your data somewhere.

So you need a database to store your data.

MySQL is the most popular database in the world.

Postgres is, you know, the very, very popular option these days. It's, like, often seen JS, like, a more modern version of MySQL.

MongoDB is a document based, database, which we don't need to get into that.

Chances are, if you're gonna pick 1 of these databases, you should pick MySQL or Postgres. They're harder to learn. They're harder to get started. They're more common.

There's also SQLite.

SQLite is a alternative to MySQL and Postgres that is actually probably the most used if you think about it, because it's, like, embedded in most native apps. There's also services as data. So you have things like Firebase, Pocketbase, Supabase, AppRite. These are all services that live somewhere else on the cloud that kind of take care of the database for you.

And they they take care of that database and they give you nice code to interact with that. Maybe potentially helpful features like user accounts, authentication, those types of things.

So there's a lot of options there. But again, if you wanna pick 1 that JS the most likely to be applicable in the job that you're going to get, Postgres or MySQL or SQLite are the good options.

Beautiful.

Yeah. I'm gonna just say same to everything you said there. I think that's a good way to to go about it. ORMs, object relational mapping.

We talked about that. We had a whole show, and you can go back and listen to what that JS, is episode 633. And then we also did a show on Drizzle recently as well, which was, really helpful for understanding both what the available databases Yarn, as well as how to Scott of interact with them.

Generally, at a very high level, an ORM is going to give you a way to both structure your data into a schema and as well as a JavaScript library to create queries that will give you the data into your application. So,

the big ones right now, Adrizzle and Prisma. What? Sorry. This is all under the context in which you've chosen JavaScript, for those of you who are following along. Many of these other tools, Laravel and PHP or even WordPress or any of these things, they they come with an ORM. Yes. Good point. So you if you're picking a language and a language based framework like Django or something like that, you get that out of the box with those. But with JavaScript world, you're often having to pick 1 up the shelf, which is Node you can zip back into your

listing. Beautiful.

2 other parts of data that we're not going to touch upon here is do you need an API? Is that API GraphQL, Wes API or like a t r p c, something like that? Again, it's too much in the weeds and you probably don't need to worry about it, especially if you're going with 1 of the better frameworks.

And then like also client side state management JS well as if you have an extremely complicated application, not necessarily extremely, but sometimes you need something past what these frameworks will give you for managing your state, just putting data in an object. So you might want to look at different state management libraries out there, but we'll go too deep into those.

Image pipelines.

This is probably something like do you think the syntax website itself doesn't have an image pipeline. But I think, like, probably most most apps have an image pipeline that will Do you need that? That's a good question.

I don't know. Maybe, like, even maybe you get into the CMS world. You could say those have an image pipeline. Right? Yeah. CMSs have an image pipeline.

But I don't know if most apps need that. Yeah. That that's true. Image pipeline, what what they do JS, they will take an image that you have and they will resize them. They will crop them. They will compress them and they will generate different versions of them for the browser. So like a JPEG JS good for some browsers. And Web JS extremely popular now in actually most browsers. I think I think all browsers support WebM.

Again, we won't go into the weeds, but these image pipelines will just do it for you. You don't have to worry about it, right? You know, you're not going to Photoshop and resizing images every single time you want to put it on there. There's a couple options out there. Next year has like an image component, and I absolutely hate it because it like it makes you give it the height and width, which is like, I don't know what the height and width is. I just let me set the width and they do that so you don't get like page jank when the image loads. But I don't really care that much and I don't want to have to figure out the height and width every single time. And it's hard to style them with CSF, so I would not recommend that. I am a big fan of using a platform as a service. Cloudinary has 1. CloudFlare has 1. Imajix has 1. There's lots of self hosted versions out there as well. You can just throw it up on Amazon or you throw a Docker container up somewhere.

Yeah. I'm gonna I'm gonna buck what you're saying and say you probably don't need an image pipeline unless you are getting into it.

You know, working with user images. Right? If you're working with user uploaded images, that makes sense. If you're working with just straight up curated assets, then you can do all that, prepare them outside of your application. But again, yeah, once you get into user user submitted assets, I think this becomes a bigger a bigger thing. And if you can't tell, Wes, I'm kinda going with a more minimalist divide lately.

I'm a CSS fundamentalist according to, Fireflies.

So, I've been going a little bit more minimal with my my general vibe. Okay. Next step is hosting CDN CI. These are all things encompassed within getting your website someplace that other people can use it. A hosting platform is where the website lives. A CDN distributes it globally in a faster way. A CI is a continuous integration process, and what that does is it runs some processes on your code before it gets pushed up to its host.

You don't always need a CI. A CI is a cool thing for, you know, a better workflow and a more modern application development flow.

But, you know, at the end of the day, you got a website, you can still put it up somewhere. You do need a host if you wanna distribute it. And just having a host does make it available globally.

A CDN is only needed if you want people to access your stuff fast across the world. Now I would say, that you don't need a CDN, but if you use a service like CloudFlare, it's easy and free. So you might as well just have it. Right? It's a it can help you out.

So, you know, I I would say you don't need a CDN, but these days,

it's a nominal ad if you've got everything else going. So you might as well Yeah. Yeah. Just you just slap it on. You don't even have to you change your DNS settings, you click on a little orange cloud and it basically proxies all of your requests and will do caching and, all that good stuff for you. So pretty nice hosting, episode 6/15. Go to syntax. Fmforward/615.

We compared what I think is all of the big hosts. The one that we explicitly forgot was Hostinger, and that seems to be extremely popular, especially with Europe and Britain. But all the other ones out there, we talked about the difference between serverless and servers and all that. So you can go and listen to that. A lot of those hosts will also include c I, meaning that it will do the build for you, so you don't have to, like, build it yourself and upload a zip file, something like that, or pay for some external CI service.

Have you heard of, Het Hetzner?

Yes.

Wait. What? Wes I saying a Hostinger?

Hostinger is a host. That is 1. I was talking about Hetzner.

You were talking about Hetzner. I was referring to Hetzner. Hostinger is they email me all the time trying to get me to sponsor

YouTube videos. That's why I had a rage tweet on Hetzner the other day because I gave them my full address, a valid credit card with my billing information.

I gave them just about everything except for my Social Security number, and then it was like, your account is suspicious, and you need to upload your passport.

I was like, I'm not gonna do that. Okay? I not not that I don't, you know, wanna upload, but I'm just like I just wanted to get a server up and running. And now you need your security team to look at my passport.

Like, what are we doing? Well, from a from the flip side, if I was a user, I'd be glad they're not letting any random spammer with a generated address into their system. That's probably why they did it. Can you call me Sanity spammer? Well, maybe a little bit.

But from, again, from the I think we're gonna do a whole show on, like, the cost of these cloud services just keeps going up, you Node? And like like, I'm at a point where I'm spending 1,000 of dollars a year on render. Render just jacked the prices on us again as well. And I got a snarky tweet from the CEO of it.

Yeah. What was my let? Yeah. I'm sure he's just frustrated with people. I'm sure he just yeah. People are sick of people. I'm sure he's got investors breathing down his neck being like, you Scott pay us back and you need to make money.

We'll have a a couple more shows on just, like, how to run your own server because I think that's becoming

more popular again. I'm I'm actually very into the space right now, and I've been working on a number of side projects.

So for me, I I'm gonna be trying to figure out a way to host a bunch of these things just for fun. You know what? That's the worst part. It's like I I hacked on this little thing just for fun. I just wanna get it online, and now you're telling me I gotta pay $14 a month to do that. Like, I I I don't want to do that.

So I would love to I would love to pay $40 a month to host all of my side projects, not just one of them or each of them. Last thing we have here is just finishing touches. What are what are the some of the things that you

you put into your website to finish it up? Shameless plug here for century.

You probably need application monitoring because you need to know when things go south, both on your front end. If your users are clicking something and it's not working or you have a syntax error or a bunch of people aren't being able to load the thing or you have a major performance problem and you want to know why is this page being so slow to Node? Century will give you great insights into that as well as on your back end. If if your server keeps crashing every at a random intervals or or at specific intervals, you will get very clear information to why that happened with Sentry. So we would highly recommend our biased opinion of installing Sentry, throwing it into your application because you're gonna have it set up before you need it. I would say it's not even a biased opinion because it was our opinion before

we were acquired by Century.

So but it is maybe more biased now, but I was a user for a long time before then. I was a user before they even sponsored the podcast.

Lucky. Yeah. Same.

I I will say, Sentry will also save you from a situation where in which the recording of this episode, Wes decided to try out our new, Zencastr set up by, I don't know. Were you pasting commands into the browser? What were you doing? You crashed the browser?

I I was like, I wrote a bunch of text and copy and pasted it and then copied that and then pasted it and pasted it and then copied that. So I was trying to, like, overflow whatever.

So I sent too big of a payload in the chat, and it froze the entire screen, and my upload stopped.

Like, I crashed a browser. I haven't crashed a browser in a long time. Yeah.

Well, Century will will if they had Century's replay feature, they would see some somebody attempting to overflow the chassis and know that it's not a problem they need to solve. There's also Captcha. Captcha is an obnoxious thing. There's reCAPTCHA, hCaptcha, a whole bunch of different Captchas that can be useful and helpful if you are having users submit data. They're still a very needed thing. They're kind of obnoxious.

You know, even with a CAPTCHA, my wife still gets spam in her website's, contact form. So CAPTCHAs are a necessary evil at this point, but don't use the Google one because I think the, the prompts there are awful, and they they make your users hate you. So hCaptcha is the one I typically use. I think that's by Cloudflare.

It's not.

I thought it was. I think Cloudflare just gives them hosting or something. HCaptcha is like an open,

Node. Okay. Is it? That's not right. Oh, turnstile JS the Cloudflare Captcha alternative. I have used turnstile. Yes. Mhmm. And you know what I like about Turnstile is that I think it does a better job of knowing that I'm a Vercel, where Google's capture is always like, you're not a person just because I'm using a VPN.

Oh, yeah. There's quite a few of them out there. And Cloudflare also has a lot of information about your visitors across the entire web because Cloudflare proxies, a good chunk of the web.

So a lot of times cloud platform is trying to go capture free. It just from the data they have on that person.

So, yeah, Cloudflare is really good at that. Yes. Agreed. Cool. Well,

there's also analytics. Google Analytics is the king here, but that requires a cookie banner.

There's other options like Plausible that I do believe you have to pay for.

Analytics or something.

If you Node to understand who's visiting your website, yeah, you gotta have analytics. But if you're not looking at your analytics, do you really need them? I don't know. Just a thought.

I do say plausible JS probably a good choice here. It's a more secure option or a more private option, I suppose, than than Google Analytics, which is kind of the behemoth in this space and the one that gives you the most amount of information, but it'll also request the most amount of information from your users. And you just gotta determine if that's something that you actually want.

Any final thoughts here, Wes? I don't think so. That's Node high level overview of our industry. It's it's actually crazy how many different pieces they are. Simply just picking a JavaScript framework is was 1 section Wes 1 subsection of a section of this Node, so there's quite a bit for a full stack dev to sort of know about, but

we got you. We got you. Yeah. Yeah. We have agonized over learning all the ins and outs of all these different areas over the course of our entire career to bring you an hour long of here's all the stuff.

Let's get into sick picks and shameless plugs. I have a sick pick. It's a great Scott Lab on YouTube. Have you seen this guy before, Wes? He's he's electronics guy? He's an electronics guy.

Yeah. Yeah. Isaac picked him on the, now when did I great Scott. He's awesome. He does all the, like, AliExpress.

He buys all this random stuff from AliExpress and tries to get it to work. I think I would. Him in the past. I I looked on our website, and I did the search functionality

for Great Sky. I didn't see it.

So, oh, you did. Okay. There it is. Okay. Node I see it. Episode 5, 94, you did sick pick grade Scott. Well, Wes, this infiltrated its way into my algorithm without me clicking on yours from this episode.

And it's a cool channel if you're into electronics. You probably heard Wes talk about it already at some ESLint. But he does these hidden gems of, AliExpress that are really good, where he buys a bunch of junk from AliExpress Wes then talks about if it's good or bad. It's all electronics.

He does a lot of little fun hacky projects.

He almost has 2,000,000 subscribers, so clearly a good channel there. And his I don't know if his name is Scott or what, but great Scott. Hey.

That's that's my name. I really like him, and I did one of his projects, over the holidays. And I'll make that my sick pick JS I had a old iPad 3, and iPad 3 has a very high resolution.

IPad 3 was the 1st Retina iPad. Mhmm. It has a super high resolution panel in it. It has a it's 15636 by 2048 Vercel, super high resolution.

And what I ended up doing is I gutted the iPad and I bought this board on AliExpress that he had recommended.

And it basically turns your old iPad into an external monitor. And I know people are going to say, oh, you can use sidecar and all these crappy apps. And my this iPad is so old, they will not run any of those apps.

I don't know. Probably 11, 12 years old. Sorry. That's like the comedy thing. You're just like, this app is old, and I say, how old is it? And you say it's Node, that it, you know, got its driver's license for a dinosaur. Oh, I see. That's hilarious.

But you can't run apps on it. It won't even start. There's no the battery's dead and it won't won't charge anymore. It uses the old iPad. So like it's not saying you can just add an app. So but it literally you buy a board and hook the LCD into this board and it gives you HDMI and USB power.

So you can you can run it. And I turned my old iPad into it and I have it right above my camera right Node, and I don't have it on yet. But my idea is that I'm gonna put Scott on that iPad and just have a dedicated Scott monitor above it. But for, like, $22, I turned it turned it into a high resolution little

portable monitor. I'm just gonna buy an iPad mini.

No. No. You gotta you gotta gut it and do the electronics.

It's it's fun.

I know. Actually, git GitHub, when I was a GitHub well, I am a GitHub star still. But one of the Yarn, they sent me a portable USB c Sanity, and I've been thinking about finding some way to rig that up to my camera a here, so I can just have a distant thing with, you know, you and Randy over there. So I am looking at you instead of looking at my laptop.

Beautiful. Alright. I'll I'll link up that at the, the iPad driver board as my sick pick because that was a very fun project

to do. Shameless plugs. I'm gonna shamelessly plug the Syntax YouTube channel.

That's right. This Node, along with every other episode from here on out, it's going to be on YouTube. Youtube.comforward/syntaxfm.

I'll post the link into the show notes.

This is we're gonna be posting all our episodes and more. We have like a a big announcement coming about another addition to the Syntax team. We'll we'll hold off. We'll give you a little teaser for that there.

But that addition of the Syntax team will be making their way onto the syntax YouTube channel, so big big stuff there. Beautiful.

Yeah. I will also shamelessly plug the syntax YouTube channel. Go hit the subscribe button. You probably Yarn subscribed already, but if you're not, please go and hit that subscribe button. Leave us a comment. That really helps. I appreciate all the support. Yep.

Pound it.

Alright.

Thanks, everybody.

Peace.

Peace.