How to Code: Opinionated TypeScript Stack + Tooling Choices Explained

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,

and I bought this board on AliExpress that he had recommended.

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 A linter

Alright.

big big stuff there. Beautiful.

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

Pound 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.

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

But you can't run apps on it. It won't even start. There's no the battery's

knowing that I'm a Vercel, Sketch? 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,

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 is something I'm starting to see specifically in the syntax code Bos is sometimes I have to hit save twice lots of stuff in this space. And Yeah. It's, So, yeah, Cloudflare is really good at that. Yes. Agreed. Cool. Well,

I thought it was. I think Cloudflare just

HDMI and USB power.

quite a few of them out there. And Cloudflare also has a lot of information

Yeah. I will also listing. Beautiful.

Vercel, super high resolution.

it.

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 that you don't need a CDN, but if you use a service like CloudFlare, having users submit data. They're still a very needed thing. They're kind of obnoxious.

we were acquired by Century.

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.

gives them hosting or something. HCaptcha is like an open, trying to run web development stuff, npm install, it works on Windows, but it, give you a few features. You need something that will,

this iPad is so old, they will not run any of those apps.

Beautiful. Alright. I'll I'll link up that at the, 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 over the holidays. And I'll make that my sick pick JS I had a old iPad 3,

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.

thing with, you know, you and Randy over there. So I am looking at you instead of looking at my laptop.

It's it's fun.

You know, even with a CAPTCHA, my wife still gets spam in her website's, 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.

He's he's electronics guy? He's an electronics guy.

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

Century will give you great insights into that as well as on your back end. If if your server keeps crashing

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

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

Yeah. Yeah. Isaac picked him on the,

So I sent too big of a payload 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 both what the available databases Yarn, as well as how to Scott of interact with them.

Lucky. Yeah. Same.

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

You probably need application monitoring

that can be useful and helpful if you are that live somewhere else on the cloud And if I'm gonna be picking the UI layer as Svelte and they have a, you know, a finely crafted Svelte based

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?

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 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.

But that addition of the Syntax team will be making their way onto the syntax YouTube channel, so do in a terminal

It's not.

I I will say,

the iPad driver board as my sick pick because that was a very fun project 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

stopped.

about

Analytics or something.

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.

And what I ended up doing is they are

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 listen to what that JS, is episode 633. And then we also did a show on Drizzle

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.

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.

Sentry will also save you from a situation where in which the recording of this episode, Wes decided

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

finding some way to rig that up to my camera a here, so I can just have a distant So if you're one of these people in 2024 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

for Great Sky. I didn't see it.

because you need to know

and iPad 3 has a very high resolution.

I gutted the iPad a back end. So you then need to choose.

YouTube channel.

is was 1 section On the front end, on in the in the client, there's really only 1 option,

everybody.

where Google's capture is always like, you're not a person just because I'm using a VPN.

Thanks,

He does a lot of little fun hacky projects.

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

And to bookend all of that, these are all React 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

head full, unstyled version of that? And then you want to go even 1 step further and you say, I want

They can add

the functionality, 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 whatever.

They work with anything because they're just JavaScript,

e l y s I a, Elysa JS.

Alpine JS is JavaScript sprinkles,

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

libraries. Yes. So you have to use React.

all of these things have become unavailable to you. Another option here, if you want something that's more universally feels more if if you're new to terminal, being Prettier and ESLint to be kind of the defaults, AppRite. These are all services Use Figma.

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

environments.

Yeah. I'm still getting, yeah, I'm still getting used to the the naming and spelling. It's 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.

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

and

Those are not like local development

2 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 a layer of being able to

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

So at this point, if you've chosen something else, things. Right? You move a file, you copy a file, you delete a file. Maybe you're editing a file.

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

They can style your components and write CSS for you.

ones, but

it's harder you know, complex operations at a system level faster, easier, 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,

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.

in terms of like the packages have node libraries.

So React ARIA is both headless, and React ARIA components are the

express

You can eliminate a user interface library.

you can obviously choose,

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

it's hard to say for me. I'm I'm sort of a tie between Remix, Next, and SvelteKit right now. I

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 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 defaults.

first, 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.

they're pretty cool.

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.

like enough Wes you don't have to you have

which is I want the markup,

is

what's it called?

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 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 your visitors across the entire web because Cloudflare proxies, a good chunk of the web.

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? complicating with the different additional layers and therefore, 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, you're doing this thing that could be considered

for things like what items should be highlighted or what happens when you click on this button? What happens when it's submitted, when

Astro personally is because I like Svelte as a UI layer.

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.

ecosystems

These are components.

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.

You can use Svelte by itself.

Well, I'm I'm saying if you don't use React, have scoping.

starters.

my personal recommendation.

the HTML and you have to bring Oh, yeah. There's every

I'll say that. Yeah. That is probably

can do

Yeah. Wes, we should do a whole show on Hano and

to unstyled

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

you need a JavaScript runtime.

And then finally, even Node step further is an entire design system that puts all of these things together into a cohesive 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,

use HTML.

I think SvelteKit just say

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.

only the functions We compared link up React, and start going from there. You can bring your own router. TANstack routers are very popular in that space.

Fastly.

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

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? part 2 of 2 of my dental surgery at a gum graft.

And this list could get out of hand very quickly, Wes, this particular genre. And so I would say don't use Illustrator or Photoshop.

and run your thing. And I'm a big fan of Cloudflare myself. Yeah.

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 So Other People are gonna get mad that you called

to styled to design systems.

really become a JavaScript expert to write effective Svelte code. So Big fan.

requests

They can help you with the way something looks.

still.

Oh, yeah. Gatsby exists

Because there are that I would recommend as my default browser.

based.

some of these, like, going all in on React for one of these things JS that

works really well. Astro

now because you can just have an index dot HTML,

Style. These are web components and they are Solid Scott.

And React are your components

to make a nice looking website without a user interface library.

a massive amount of those as well. Which one are you picking out of this list? I'm We talked about that. We had a whole show, and you can go back and A lot of lot of times people refer to these as just like Vite apps

We had the creators of both of those on the podcast. You go back and listen to them easier to use. They run TypeScript out of the box. They have a little some security features. So all in on a what's called a meta framework? These are really popular right now.

1,000 requests per second, But it's extremely classes and also because it's it's gonna be much faster. Yeah. And and I think these tools, there there's definitely the reason why I like this one 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,

that's the one thing about

where Eliza

Eliza JS because I would go with board and hook the LCD into this board and it gives you somebody drags this? What do you do? And it's just functions

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,

look and feel. An example of that would be React Spectrum. That's from Adobe. They're the developers

new JavaScript runtimes come out. The 2 big ones are Deno and Bun.

Well, that's cool. Swagger.

essentially

UI libraries, and and headless UI libraries give you 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, You should probably look at this. Yeah. So there's lots of options out there,

and of React ARIA.

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.

But essentially reusability

they have,

RADIX UI,

Let me just dial back that 99%.

most websites are sending and receiving data from a Vercel.

And you can imagine we just recorded an episode on HTMX, A terminal is a power tool 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 When I I asked people what's the best terminal for Windows at some ESLint,

And

the most amount of places.

niche that way. How do you pronounce it? that might change. But interesting world.

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.

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

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.

So you need a database to store your data.

Mhmm. Wes. Yeah. Totally. Next step is data. The websites,

MySQL is the most popular database in the world.

and that was like HTMX? Yeah. I was I was like, is this the right day to record this episode?

In 2024, if you say, what about static site generators? 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.

then go do a web component based solution because that is going to work

Skip the whole UI library. Yeah. Unlistively.

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

Tailwind, And, Yeah. No hard consonants.

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

99%

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

And so this can be And they got a cute Fox logo. Can it only be run Then you got a skeleton wearing a t shirt.

that don't have formatting on them.

there's a lot of options in this space. If you want something that's more of an app, 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 about another addition to the Syntax team. We'll we'll hold off. We'll give you a little teaser for that there.

Vim. You've heard of Vim,

modifying text on the Internet is probably, like, 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? 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.

files from your terminal.

you have Versus Code is the king in the space.

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 for those of you who are following along. Many of these other tools, So, oh, you did. Okay. There it is. Okay. Node I see it. Episode 5, that Express can do a 113 that you can accomplish so much with this thing. That

is an application that runs within your terminal, which allows you to manipulate

There's been a ton of change in this area, but Versus Code has kind of been

So

beyond, like, obviously, social media would be like a Google Docs or a Microsoft Word. These are not that. These

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 really, really awesome project there as well. The only reason I wouldn't take

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, portable monitor. I'm just gonna buy an iPad mini.

are editing

less full featured.

is that CSS today the big ones right now, Adrizzle and Prisma. What? Sorry. This is all under the context in which you've chosen JavaScript,

to look and feel a specific reproducible way, but typing it that way isn't always

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, So you can you can run it. And I turned my old iPad into it and I have it right above my And that's certainly something like, the the speed of getting your linting errors

You want your code

as my default browser.

around a lot of the new CSS 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.

world view at this moment interface for Windows that

Microsoft Edge,

although

Arc

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 and I've been thinking about

a bad thing by some people. It could be actually a bad thing and it's going to cause problems.

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.

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 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 And

bones. This is how you apply I will put them in that order. I think SvelteKit makes working that ESLint side,

is a tool that lets you know if you're doing bad things. Hey, You can write scripts that do all these things for you. A terminal really unlocks

is fantastic to try out our new, Zencastr set up by,

biome seems to be

And so there's a chance that by the time that this episode is a year old, our suggestions

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

on Arc very used frequently everywhere.

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

usually, this is a an alert system. It's a tool that says, 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.

the This is a BUN based, 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 into the show notes.

when we type code,

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.

which of which there are many. There's Google Chrome. There is

and you just want them to exist.

But,

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 400,000

Now,

just writing CSS.

which browser has the best dev tools,

I 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,

typically, you hit save on your file or perhaps you upload your file to a repository

People pick all kinds of different things.

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

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.

a hat and a t shirt to your website.

general features and usability.

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.

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

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.

I will say

There's a lot of different options for CSS.

I left

in the sort of linting

My That's a small portion of websites.

a disruption.

most fun thing. So therefore, we get into this world of formatters. Formatter, And they they take care of that database and they give you nice code to interact with that. Maybe potentially am back alternative. And Node developers' experiences with Because

hey. You may have made a mistake here.

CSS is, you know, how you style your websites, how your your websites have, 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.

Yarn,

Safari is probably the worst in class of dev tools in terms of like,

2 other parts of data that we're not going to touch upon here is do you need an API? Is that API GraphQL,

Amazon or you throw a Docker container up somewhere.

at a very high level, don't have these like bulletproof

a JavaScript library to Then you're also gonna get into this other world of ShadCien, Image pipelines.

is a document based, I've been going a little bit more minimal with my my general vibe. Okay. Next step is hosting CDN

That's a good question.

And then like also client side state management JS well as if you have an extremely complicated application, in the chat, and it froze the entire screen, and my upload

get that out of the box with those. But with JavaScript world, you're often having to pick 1 up the shelf, which is

that kind of take care of the database for you.

Postgres or MySQL or SQLite are the good options.

because it like it makes you give it the height and width, Beautiful.

recently as well, which was,

helpful features like user accounts, authentication, those types of things.

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 Node.

you are getting into it.

framework like Django or something like that, you 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

There's also SQLite.

This is probably something like do you think the syntax website itself doesn't have an image pipeline. But I think, like, probably most

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 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,

But I don't know if most apps need that. Yeah. That that's true. Image pipeline, what what they do JS,

really helpful for understanding

a way to both structure your data into a schema and as well as

Generally, a lot of the other

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

most apps have an image pipeline that will Do you need that? 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

MongoDB and a language based

create queries that will give you the data into your application. So, remix, But from, 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

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

Yeah. I'm gonna with a generated address into their system. That's probably why they did it. Can you call me Sanity spammer? Well,

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,

because it's, like, embedded in most native apps. There's also services as data. So you have things like Firebase, you click on links and they work. You click on the thing and it moves the cursor to where the mouse is. You CSS.

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

database, which we don't need to get into that.

same to everything you said there. I think that's

render. Render just jacked the prices on us again as well. And I got a snarky tweet from the CEO of it.

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.

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

server because I think that's becoming 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.

Het Hetzner?

Wait. What? Wes I saying a Hostinger?

all of the big hosts. The one that we explicitly forgot was Hostinger,

Yes.

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 we're not gonna try to

c I, meaning that it will do the build for you, and you want, like, the easiest one, 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

is suspicious, and you need to upload your passport.

again, from the I think we're gonna do a whole show on, like, the cost of these cloud 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.

episode 6/15. Go to syntax. Fmforward/615.

a server up and running. And now you need your security team to look at my passport.

just keeps going up, you Node? And like like, I'm at a point where I'm spending 1,000 of dollars a year

what I think 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, Brave.

We'll have a a couple more shows on just, like, how to run your own

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

you need to make money.

is

all that good stuff for you. So pretty nice hosting,

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

on Peace.

maybe a little bit.

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

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.

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.

about our opinionated Hey, folks, and welcome to syntax.

This is a podcast about Wes development, and we are stoked to be here today. We are going to be answering

And now I can go into each of the parts and sort of dig a little deeper. So and will do caching and, not always, but quite a bit of times, you want to do

like what are the major, major players in every single area? Why are they popular? Why why do people like these ones? 10 stack has a bunch of really good headless components.

when I'm learning a new thing, I'm really big on what I call surface area. I want to understand

so that I sort of I understand

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 Astro. Those are probably the big ones right now. Any other ones that I'm missing, Scott? You know, ideally, you wouldn't have to choose it. And also the other 2 I forgot about was Cloudflare, a JavaScript framework on the front end if you want. So you've got React.

If you know somebody who's getting a tongue piercing, the one that stuck around for the longest at this point. There's also terminal based text editors. You have things like Well, Century will will if they had Century's replay feature, they would see some somebody attempting to overflow the chassis

under each of these categories 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.

a listener question

Try try a new little intro here.

welcome, everybody. How are you doing today, Scott? Hey, I, I have been doing better. I had Yeah. And I gotta say,

how we would actually do it. But 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 vanilla JavaScript 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

multiple bouts of painful dental surgery. So do not get a tongue piercing.

runtime, UI libraries, data, databases,

warn them, it will ruin their gums. Even they might not listen to you, just like I did. That's where I'm going.

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.

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 Tailwind UI, Tailwind Catalyst.

from like let's rattle through them, design tools, coding tools, CSS, languages, frameworks, meta frameworks,

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

what are the pieces, what are the parts, what does this include

emotion, stealth components, an ORM is going to give you by 2048 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,

and have it just work away.

so many 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.

or meta frameworks that will just scope the CSS for you,

your styling. You're essentially taking the styling out of the CSS unstyled ish.

why complicate what you're doing with additional layers if you don't have to? That said, if you're into JS shoelace.

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? is only needed if you want people to access your stuff fast across the world. Now I would say,

Style X is a new one from Facebook. CSS and JS, there's I'll probably go with Scott on this one and just say

which is JavaScript,

Other ways to write CSS is

JS so powerful is is HTML available JS shoelace.

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

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

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 and moving it into the classes.

for different CSS packages that give you a handful of different features.

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, 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 And then the shell is 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

whatever the meta framework is using

Well,

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 is a big one, which is Veeda's built on top of what's the Node They're more just, like, services that you can deploy to,

you don't necessarily need all of that, 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

anymore.

ASP.net,

faster, you know, more streamlined

wants I'll post the link

If you're a new developer, I'm a CSS fundamentalist according to, 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, was tough for a lot of designers who would always just use Photoshop. I used Photoshop for a long time personally.

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, 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 So if you're not choosing a meta framework, Wes 1 subsection of a section of this Node, so there's quite a bit

if if you're the type of person who ripe for 94, you did sick pick grade Scott. Well, Wes, this infiltrated its way into my algorithm without me clicking on yours from this episode.

unique as you want. You're not shipping a website that looks the same as everybody else.

CSS JS it is today somewhere. And this process runs. And with a set of rules,

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

that you can apply to your CSS And I think this is because it offers scoping out of the Bos. It offers different selectors and features within CSS

sticking with vanilla CSS as long as possible.

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.

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 you have variables,

Yeah. So on a Mac, for a full stack dev to sort of know about, but different state management libraries out there, but we'll go too deep into those.

powerful to do a lot of,

Parcel, Webpack.

When you look at a text based interface like a terminal, you might think it's old fashioned, Have you heard of, server side talking

WSL a terminal Oh, yeah. Because and I get all the DMs from all the angry people.

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 Next up, we have 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.

those will ever one of the most popular ones is the the Versus Node terminal. So if you ask Node has a terminal emulator built right in like the the entry point to a Vite application is an HTML file.

it's no good. You Node? It tons of problems. Tons of problems. And I will say,

last time I pulled Twitter, probably about half the people used

can visit the URL in your browser and it does all the bundling, all the live reloading.

you as a computer user

by default. On Mac, it's just simply called terminal.

Mac and Linux y shell that you you would expect to work on Windows because

it was the best of the options. The other ones all felt kind of Windows y.

editors, which is PHPStorm

on your computer.

Rust, I'm pretty sure. So it's another one to watch. But I don't know that

Oh, Wes we didn't mention that's, like, probably IPad 3 was the 1st Retina iPad. Mhmm. It has a super high resolution panel in it. It has a it's 15636

ZSH.

best terminal app, I I I got a whole bunch of different options, but the resounding

for people who know how to use it.

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 WebStorm. What are what are the other ones? WebStorm

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

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.

commands to the terminal to execute Good point. If you can't do it with HTML,

which is largely pnpm Parallels, Node you can zip back into your Pocketbase, SQLite is a alternative to MySQL and Postgres that is actually probably the most used if you think about it,

as executing commands This is we're gonna be posting all our episodes and more. We have like a a big announcement coming

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.

that I would typically

but they are basically rewriting the whole thing from scratch in 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,

Honestly, it's a really nice terminal.

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, all or some of the initial

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.

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,

Like Yeah. WSL is

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, You

talk about build tools. So when you're building a JavaScript application, services

And then WSL allows you to have, like, the

text editors.

a Linux based terminal, Supabase,

And then there is a bunch of other tools that these things are built on top of. Rollup

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,

Windows has 1 too, and they have something called Windows subsystem Tolinski, allowing you to use 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

cloud

you are likely going to need something that will

to do some things that you couldn't necessarily do without it. So the options in this space, I don't know. Were you pasting commands into the browser? What were you doing? You crashed the browser?

I don't know how this happened, but my Versus Node terminal, files My name is Scott.

like Bash or Fish or The big ones out there right now, Figma JS probably the biggest one.

And terminal allows you to write

more automated.

Versus Node and they're sticking it in the browser.

and probably

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.

But I I've even gone as far 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.

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,

there's the built in terminal

Right.

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 which honestly, at this point, I have no idea

But with all those things considered, or different alternatives, there is a lot of different options It's very flexible to get as, Yeah.

Warp will feel Niche.

ESLint, IntelliJ

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 Oh, man. No.

Alright. Let's get on into it. We're gonna start with design tools. When you're building a website, 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 And the big players in that space are Vite, probably up there as well.

when you are ready to deploy your application.

layout design of your website in some sort of design tool.

A CDN

integration process, and what that does is it 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 to do. Shameless plugs. I'm gonna shamelessly plug the Syntax

distributes it globally in a faster way. A CI I gave them just about everything except for my Social Security number, and then it was like, your account I

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,

before it gets pushed up to its host.

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.

CI. These are all things encompassed within

is a continuous 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.

So,

getting your website someplace that other people can use it. A hosting platform is where the website lives. A CDN Deno That's right. This Node, along with every other episode from here on out, it's going to be on YouTube. Youtube.comforward/syntaxfm.

runs some processes on your code

Fireflies.

Wes, you can probably find a web platform for that language.

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,

So again, if you can write a language I cannot say some words.

and you pick JavaScript,

Do I want to go

next. Wes, SvelteKit, Peace.

if you don't know any of these languages

write your back end in Python. There's tons of options there.

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.

then you get to use 1 language on the client

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.

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

you can put a border on one side of a box.

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

It JS. It is absolutely

that's the classic like the designer made this thing

still using Photoshop or illustrator to design your website, There's other options like Plausible that I do believe you have to pay for.

I remember when that switch happened and agencies

I've just pnpm myself on the back here. I have been using Figma since, like,

a perfect analogy there.

vector based tools 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.

there are much better options out there for well, no. Okay.

reasonably in actual but I would probably recommend that you look at one of the Scott of new

I'm sure people still use that. I'm telling you, man, The, the transition to moving into like SvelteKit the most and Astro the 2nd most, and then Remix the 3rd most.

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 a good way to to go about it. ORMs, object relational mapping.

And I'm sure 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, Pretty cool. There's not like a bazillion features in them, but if you just Node a quick thing up and running.

Big fan of it. And they tried to get bought by Adobe, and it got blocked for, like, Sanity competitive reasons, which this one's going to go more into

Adobe XD, very popular. Sketch, very popular.

Use Adobe XD.

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

enter your API key. And like, I get that. But it's just it's like the Itunes App Store trying to find and Neovim.

The one thing I don't like about Figma is the, like, the plug in ecosystem

So I was like, I went through like 18 different plug ins and they're all like, buy a subscription, now when did I great Scott. He's awesome. He does all the, like, AliExpress.

in. There's no possible way for us to implement it a date picker, something like that. So those are really handy.

and access.

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

I was very happy about.

before I realized that that's built into Mac OSX.

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.

What is this tool?

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.

what's the Rust webpack alternative that Vercel uses? There's RS pack. There is RS pack. Yeah. There's turbo pack, the parts.

And I think that is were like, I don't want to do that.

I got a whole thing going on over here.

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, which is not entirely true because with WASM you can run You were talking about Hetzner. I was referring to Hetzner. Hostinger is they email me all the time trying to get me to sponsor

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