How to Code: Opinionated TypeScript Stack + Tooling Choices Explained

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.

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.

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.

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,

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.

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.

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.

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

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.

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

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.

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.

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?

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.

Solid Scott.

still.

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

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

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.

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

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.

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

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.

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.

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?

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.

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

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.

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,

Have you heard of, Het Hetzner?

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

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.

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

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?

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.

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.

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.

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.

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.

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.

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

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.

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.