Potluck: Migrating to Typescript, Semver Explained, Accurate Timers and Countdowns

Welcome to Syntax.

In this Wednesday I was trying to do the Wes voice. In this Wednesday, we're gonna be doing a potluck, and we're gonna be doing it a little bit differently today because Wes is out of the office, o o t o. So we have CJ filling in for Wes, and we're gonna be doing a pollock for y'all. We have a ton of great questions.

We're gonna be diving into all kinds of things, like what kind of books we like, what kind of podcasts we like. But not only that, we're getting into technical stuff. We're gonna be talking about, you know, perhaps, Vue JS.

We're gonna be talking about skills for basic developers, like, what are the base level foundational skills you should be learning and stuff about your home office. So,

with me as not always, but for the the the first time in a regular episode is CJ. CJ, what's up, dude? Hello. Not much. I'm doing alright. I've got some big Canadian shoes to fill today, so, I'm gonna I'm gonna do my best, a.

Yeah. A. Yeah. I love it. I know. This is a Canadian podcast after all JS Wes Well, I mean, today, Rocky Mountain podcast is a success. Mountain pot yes. This is a mile high podcast, which I gotta say, man, this we've been getting a Scott. I mean, we get a lot of sun in Denver. 300 plus days of sun a Yarn. Not to brag, but it is sunny. It's been sunny and lovely here. So Yeah.

Fill in the vibes. And if you're feeling the vibes, you might not be hitting the the bugs and errors that you might be having in your code. But sometimes, it's Node Scott always how it goes, and your your code is a little cloudy. And if your code is cloudy, then you're gonna wanna have something like Sanity to have your back because that's truly what it does. It has your back. It helps you solve errors. It helps you solve performance issues. It helps you solve all kinds of things. It found slow database queries for us. It man, it's done so much for us. So if if you wanna check out Sanity, head on up for century.ioforward/syntax.

Sign up and get 2 months for free.

CJ, I once had a client of mine tell me that the design that I had designed felt cloudy, and that he needed it to feel more sunny.

That Wes, like, that was great. I have no idea what the hell that means. So Okay.

Yeah. Me neither.

Yeah. No idea.

Classic client stuff. Right? Right. So let's go to the 1st question. 1st question here from Robbie, what book changed your life? Do you have any books that you you've really enjoyed, CJ?

This is probably the worst question for me. I I left it on there because I think you have some good answers, but I actually don't read a lot of books.

And I think, like, my answer for this is if I can't get past the 1st chapter, I just stop reading it. So, like, there's stuff there hasn't really been anything that hasn't changed my life. But I do I listen to, like, a lot of, like, science fiction on, like, audiobooks and stuff like that. Right now, I'm actually listening to, The 3 Body Problem. Oh, cool. Yeah. Yeah. Haven't finished it yet, but it JS it is fascinating. But yeah. I'm interested in that. That's my main thing is yeah. If if if I'm not interested, I'm not gonna read the whole thing. I don't know. Yeah. Yeah. I feel that.

I I don't get into too much fiction as much as I I when I do, I like it. Like, I I I don't read anything. I just listen. I listen to The Martian, and I really like that.

Or or stuff like that, you Node, I can get into it. What was it? The, there warp some fantasy books by a really prolific author, Stormlight Chronicles or something. I think that's Scott it's called. I got into those really, really a lot for a little bit. But for the most part, I stick to nonfiction stuff.

And books that I actually did read are, like, kind of picture y books because I'm a child apparently.

There's these 2, whatever you think, think the opposite. And it's not how good you are. It's how good you want to be.

These are like really thought provoking books. They're very graphical.

So like big graphic text to illustrate a point on each page.

And they're brilliant books like, you know, you know, the they're just like micro points in them. Like, everybody had done the high jump one way until 1 guy decided to do it this really weird way. And now that's how everybody does it. You know, just but illustrated in a fun way to just kinda get your brain into, like, different headspace. And those are 2 books. I think my dad bought me one of them, Whatever You Think Think the Opposite I Think JS a like a Christmas gift 1 year, and I just like, holy cow, this is great.

A book that Ben Vinegar recommended to me when I started Syntax was crucial conversations, and it's kind of a cliche book, but it has really changed how I approach heavy or not even heavy, but like important conversations in my life. So, whether that is conversations with, you know, family or conversations with coworkers or whatever, I got a lot of value out of this book. And there's a lot of like stories from, you know, influential people who have, like, been in meetings with Tim Cook. And it's like, Oh, okay.

That is a whole world. So, yeah, really interesting books.

Nice. Yeah. So this next one comes from Electric Eli. And their question is, what are the fundamental web app development principles that beginners should know about when starting web app development. And they have in their ESLint authentication, test driven development, deployment.

Honestly, I don't think any of those things are at the top of my list for beginners. There's actually a whole lot more. Yeah. And, one of the things I think is most important is, like, really understanding the client server model. I come across so many beginners that just, like, don't really understand the difference between the client side and the server Node. And, being able to differentiate those, even if you don't do a lot of back end development, is huge, especially if you're working on a team that has back end developers, because you can at least better understand what their piece of the puzzle is. And then along those same lines is understanding that that same security model of back end versus front end. Because when you're working in front end code, that code gets shipped to the browser. So there's only certain things you you should do within that code because, at the end of the day, end users can technically look at the source code and see what's happening in there. So, really, understanding what's happening where I think is one of the most important things. Yeah. I have that as a big one too.

Understanding the client and the server.

But not not like how you don't necessarily have to even write client or server side code. Right? Because that can be a whole can of worms in itself. But just like simply understanding its role, like you said, JS like, a big deal. Right?

Yeah. And then another one I have is CLI basics. So, I I know there there are, like, GUI tools for, like, Git and stuff like that, but, especially in more modern front end web development, you're gonna come across a lot of build tools and scripts and things you have to run. So just being somewhat comfortable with the command line, I think, is pretty important. So just, like, basic commands like cd and ls and those kinds of things because you're gonna be running Node and Npm scripts and, like, maybe, like, a Vite build process or something like that. So, yeah, that's definitely at the top of my list as well. Yeah. If you wanna learn some of that, Wes has a, I believe, a free course, Command Line Power User. There's also I did a course a long time ago on the well, it's Wes LevelUp Tutorials at the time, but there it's on the, YouTube channel if you're watching on YouTube. So And another one I have that almost has, like, kind of, like, nothing to do with, like, writing code itself JS really just working on your your workflow and and how you work. So I'm a big proponent of, like, keyboard shortcuts, and just, like, working efficiently.

I think that's definitely something you should look at, like, especially if you're trying to mix things up when you're a beginner and you're learning is, like, you don't wanna just be writing code all the time. You can focus on your setup, focus on memorizing keyboard shortcuts, also, like, work on your, like, your work habits of, like, actually working for a little bit, taking breaks. Maybe you can try Pomodoros, those kinds of things.

Yeah.

Yeah. I I agree with all that stuff.

And, in fact, like, the only things that I would add on on top of there, I think you'd you mentioned, like, CLI tools to use, like, Git.

But I do I do think, you know, Git is one of those things that, like, I remember, like, seeing Git commands for the 1st time and being like, holy cow. I know Randy can probably relate to this because he had to learn Git stuff kind of as a Node developer. I was a developer. I'd be working as a developer and Git still confused the hell out of me. So, yeah, Git and GitHub, understanding, like, how to host stuff, you'd prefer, like, the most basic. I remember dragging and dropping stuff on an FTP and then realizing, okay, if you know an index that HTML files loaded from this directory, how does that all work? And obviously the app development has changed substantially since then, but yeah. Totally. Yeah. I I totally agree on all that stuff. Also, CSS, HTML.

Yeah, you can you can get a long way just by learning CSS and HTML. Obviously, JavaScript and JavaScript frameworks become a big thing in our industry nowadays.

But, hey, you you can't beat learning CSS and HTML, especially nowadays.

Next question here is from 7 Steven.

Pronunciation, actually the way it looks. Just not Steven. My wife hates that. Steven, you told us to say Steven, and I know you did that on purpose.

Next one the question here is, what are your thoughts on Chris Coyer's post on his sale of CSS tricks and what has happened. Yeah. I got a lot of thoughts here.

You know, I I have a little personal story. There was an acquisition attempt to level up I what happened here. Because for a little while, I was like, was that right of me to turn that down? You Node? My as you're seeing maybe, the pandemic happened, subscriber numbers are like a roller coaster. You're really stressed out 1 week to the next week, whatever. You're like, man, was that the right idea? Should I have just taken some cash and run? But seeing JS how this, how this all played out. I am thankful that I chose not to do that at that time, especially given the relationship that we have with Sanity through that acquisition. Right? So my thoughts are, man, it sucks. I love CSS Tricks. CSS Tricks JS, like, my favorite thing forever and ever and ever. Chris was, you know, Node huge inspiration of mine for, you know, getting started. And when I first got to meet him, it was like, oh, man, Chris is the man. So I was really bummed out to read that.

And I was I I feel like, you know, the DigitalOcean folks are now saying that they're going to work with Chris. That's like the new update to this since this has come out. So Chris wrote this blog post. We'll have it in the show notes. I highly encourage you to read it. But they've since come out and did said, you know, we're working with Chris to get CSS tricks back up to some capacity.

I just wish it would have never happened in the 1st place. And I used to be a fan of DigitalOcean, and the way that they handled this, I Node. No thanks, man. I you know, even if they bring CSS tricks back, I'll support CSS tricks, but I'm I'm not about to give DigitalOcean

a ton of support. So, that's kinda how I feel about it. I'm a little salty about it. Yeah. I don't have much insight more than really just, like, reading the blog post recently and kind of, like, seeing Chris' perspective on everything. But that's kinda my take on it. It was like, this just sucks because, like, CSS Tricks was awesome. Like, it Wes the definitive resource for, like, so many things. Like, anytime I wanted to know about Flexbox or CSS Grid, like, I would go to CSS Tricks for that. So it's it's really sad to, hear the story of of of DigitalOcean kind of taking over and not really doing much with it. Yeah. And it was really hard for us too when we announced

that syntax was getting acquired by Century. I think rightfully people were concerned.

They were very concerned that this was going to be another CSS tricks, which obviously it hasn't been. But I think Century was cognizant of that. They were like, we need to make sure that we Yarn assuring people that this is not that. We we're going to take the thing that you like and make it way better, by adding CJ and Randy.

So yeah.

And video, and all the the cool stuff that they've allowed us to do. So, you know, yeah, it stinks all around. Not a whole lot there to it. Yeah.

Alright. This next question comes from Mike, and it is, what advice would you give to someone finally looking to migrate an existing React project over to TypeScript? Any gotchas to keep an eye out for? Any linting tools to take advantage of? Should the work be done in a feature branch solely dedicated to the migration, or can it be done pnpm a more piecemeal manner? Any other advice? Thanks.

So I'll give my perspective on it first. And I think it depends on the size of the project and also, like, the number of people on the project. I would say if it's, like, a really big project that you can't just kind of, like, do all in Node go, one of the easiest things to do is just start 1 file at a time. So, one of the cool things about, like, even, like, working inside of Versus Code is you can get TypeScript support even inside of JavaScript files. So one of the first things you could do is just put a a slash slash t s dash check at the top of any JavaScript file, and then you're gonna start to get some type hints inside of that file. And then from there, you can start to change the file. So, like, go 1 file at a time. And you can basically make it so that, like, if you're working on a specific feature, now JS the time to also convert it over to TypeScript. Kind of, like, make it your process of any new feature. Also, make sure that you're shipping TypeScript code with it. So swap a JS file to a TS file or a JSX file to a TSX file, and then gradually fix the errors within that 1 feature within that 1 file. And I would also say that when you're early on in this process, keep your TS config settings, like, way less strict. So you should actually allow the any type and allow things like TS ignore and TS expect error, because you're gonna have an easier time of converting. Now, obviously, you wanna get to a point where you have, like, a stricter configuration and, like, you're really, like, writing the best TypeScript you can. But early on, you definitely want to be a little bit less strict so that you can make bigger strides in terms of, like, converting your code base. Yeah. I totally agree with all that. I

I did this. I I converted a code base. Believe it or not, I converted the code base. That's something I unfortunately have done way too many times in my life. I converted a a code base from Meteor to this the same code base from Meteor to React, from React class components to React function components with hooks to then, Svelte. Same code base. And at some point in there, I converted it from React to React via TypeScript.

So I I've had a lot of, experience converting a big code base, which is I probably could have been way more productive than doing that. But, TypeScript, for me, make a branch and go for it. Right? Dedicate. You can you can like, depending on how big your code base Bos. The level of code base was big. But you can make a substantial move there in the course of a week, depending on how many people are working on it. Even if it's just 1 Vercel, If you grind on it, you can grind on it and make some real progress.

You can do things piecemeal. Like you said, CJ, you don't have to have a 100% TS completion.

Like, for for instance, I don't think LevelUp tutorials, even after we converted to TypeScript, I don't think it had a 100% TS free errors, for even like a year after that. Because for the large part, like, TypeScript is there to help you. And if you can see that, okay, I have these following TypeScript errors, and instead of just tossing it any on it and letting it go, I'm just gonna leave those errors and still build the site without passing it through like, TypeScript. I I'm gonna use TypeScript essentially as a linter. Right? Yeah. And it will find issues on any new components you make, and it's gonna do this kind of things. Now the advice I can give on actually, doing the conversion beyond just doing it piecemeal is that start at the root.

Start at the data.

Because if you start at the leaf, so if you start at the end, by the time you get to the roots where you have the data loading, you're gonna be just having a mish mash of types and everything. But if you get your types all set up from the root where the data starts, and then branch out from there, that is how I found it to be the most effective. Start with how the data JS being loaded, what that data structure looks like, and then as you go, that will help you get further in ESLint your your leaf components. It also makes it easier to kind of reason about. Right? You can start at your main layouts and stuff. But there will be a time when there's a lot of red squigglies. Like, I I I I just have, like, you know, 1,000 TypeScript errors and you're just like, alright. Great. Let's go. You know? And many of those can be chomped down with 1 fell swoop. You add 1 type in, you know, stuff really propagates.

But be prepared for some tiers. Go for it. And, yeah. Don't don't if your application works, don't stress about that TypeScript error number being 0.

Definitely. I completely agree with I mean, like, so many people can get too too caught up in, like, fixing all of the errors and too caught up of in, like, trying to make, like like, the perfect TypeScript code base. But like you said, it really is, at its core, kind of just a linter. Like, it's gonna help you with a lot of problems. And I completely agree with Data First, because, honestly, that's where you're gonna get most of the benefit. Right? If you start describing your types and your objects, that's gonna flow through your code base. And and now you have a bunch of different places where you can, like, catch little errors, like, oh, well, you made a typo on a property Node, or, oh, this object is actually missing properties that were required. So, yeah, I I completely agree. Data first is a great approach, and, yeah, just go for it. Yeah. You know, it's funny because we Wes talked a little bit about this. I had, like, a TikTok. It was from a clip from one of the episodes of Syntax where it was like, we launched with TypeScript errors for the new Syntax site. And that was like,

I don't know if people Tolinski you can't do that, but we did that. And it's fine. It's like we tested the website. You know, just because TypeScript says that there's a problem doesn't mean that there's a problem.

But then there was a lot of comments that were like, man, you gotta be a noob to not be able to get all the types, you know, if you can't fix up. But that's not how it works, man. Sometimes TypeScript if you haven't, like, used TypeScript in a complex project, sometimes there are just types that are really hard to wrangle in.

You know, it's not all the time, but there there are sometimes, like, for instance, we had a a caching mechanism that was like pretty custom where what it was doing, it was accepting the query parameters for a Prisma query. It was accepting what type of query that Wes. So we're doing like a find mini or whatever. And then it's accepting, like, a cache time sort of seal. And then what it would do is it would do, like, a stale while revalidate essentially in Redis for us. And I wrote this by hand, and the big problem is is Prisma didn't expose the right types that we needed to really get a good handle on this. So that, let's say, if I passed a find many arguments into this thing and a find many, or I've passed in a find Node arguments and a find one, like, some of those types are just really complex, and annoying. Just straight up annoying to write. So, hey, I know the caching mechanism works. I can, toss it any on that or I can just leave it as an error for now and come back to it later.

If I want to spend a day writing these types, like, sometimes that happens. Even if, you know, I'm experienced. Wes is a very experienced in in TypeScript. Let me tell you, Wes is so experienced in TypeScript that he's writing a really detailed course on it. We just did an episode of Stumped, where we were quizzing each other on TypeScript stuff. The man knows this stuff. And I'll tell you what, if you do a command find in the syntax code Bos in fact, I'm gonna do this right this second.

I bet I could find

some casting or some any or something. And I don't know if he wrote it. Maybe I wrote it. You can't blame it. Yeah. Yeah. I'll be able to find something where you could say this is like a patch on top of something, you know, just because that's just the way it is working in TypeScript sometimes. Yeah. Yeah. And I can just add to that, like, one of the experiences I had actually starting from scratch is just doing, like, a slow port. So I have several code bases that it's kinda just a mess of, like, copy pasted code. Like, it it works for what I need to, but I was trying to, like, more modernize that code base. And one thing I'm doing is just converting it to a monorepo 1 project at a time and, in the process, converting it to TypeScript, like 1 project and 1 file at a time. So I'll, add a new package to the monorepo.

I'll start to port over the Node, but anytime it's, like, not using TypeScript or it didn't have the exact right types, I'll spend the time making it work and and making it nice and pretty and using all the types that I can. I realized that not everyone has that luxury. Right? You can't always start from scratch. You can't always just, like, port everything over piecemeal, but it's it's a personal project. So I think it it depends on the size of the project. It depends on your scenario, but there's definitely a lot of ways to approach it.

Yeah. Absolutely. I it's it is one of those things. You kinda just gotta go for it, and you will learn lessons along the way. And if you ever have to do it again, you're you're gonna be way better at it. Yeah. Definitely. Yeah. How many times you get that opportunity? Okay.

Next question here from Tim Wrinkle.

Tim says, I am working on a couple of countdown apps. 1 is a single timer, the other is multiple timers with a common start and different end times.

One scenario is short term like 15 minutes. The other is a countdown to Christmas sort of thing. My question is of performance and accuracy.

Assuming that timers update once per second using set interval, is it better to establish the base time using new date or whatever, and just keep subtracting Node second from that or do a new date every second.

This is a a fun problem.

Once you get ESLint Scott interval and set time out, sometimes it can it can feel like a little rough.

I have done some timers and stuff, but I'm interested to hear what you have to say, CJ. Sure. Yeah. So I I I've, the way that I've approached it and, again, this is just my approach. I think the other thing about this is, like, what Tim has described, it'll probably work. I think it, when it comes down to accuracy, that's might where might be where there there are some kind of, like, holes in the plan. But let me tell you, I guess, how I would implement it and in some things about set interval and set time out, because what you may not realize is that with set interval and set time out, let's say you pass in 500 milliseconds.

That's only a minimum guarantee of when the the function will be called again. It's not that this function will be called in exactly 500 milliseconds.

So that's where you lose that accuracy. If you're saying set interval with with a 1000 milliseconds, it's at a minimum a 1000 milliseconds, but it might be 1,100 milliseconds or something like that. It all depends on, like, what's happening in your in your JavaScript codes. So that's important to note if you're using something like setInterval or setTimeout.

And so my advice is don't actually use either of those things. Basically, the the state or the source of truth here is potentially the start and end time of each of your timers. Right? So you might have a a start time or that you set as, like, the date when that specific timer started, and then you maybe have another property that's, like, duration total duration in milliseconds. And so that's, like, kind of, like, your source of truth. And then now that's it's completely accurate because no no matter how often a set interval or a set time out runs, you can always do the maths to figure out when should that timer actually end. So, yeah, keep your state that way. Like, have a start time or an end time or a timer duration in milliseconds.

And then you also just have a single tick function. So the the idea with this is it gets called once every 100 milliseconds or once every 200 milliseconds, and that looks at the state of all of your timers. The other idea with implementing it this way is you have way less things to manage. Right? So let's say you have, like, 10 timers and they were all using set Vercel. Now you have 10 different functions that are all potentially firing off at different times. But if you have a single tick function that kind of, like, looks through your state of timers and determines, alright, when did that timer start, when is it supposed to end, and then, like, update your store state accordingly, it's gonna be much easier to manage. And the other thought with that JS, actually, don't use a set interval for that. Just use a set time out. So you set time out in 200 milliseconds. Your tick function runs. It looks through your state to determine which timers are done, how much time does each timer have left, and then it calls itself in 200 milliseconds with a set time out.

Yeah. It's funny. As as we were talking, I I went and looked up. The last time I wrote a stopwatch was for a dance application I so I I I've worked on an application to help me practice dancing. And one of the things I had was that every 30 seconds, club air horn would sound. And the reason that is is because typically, break dancers, when we do our our our routines or our sets, they're like 30:30 seconds to 40 seconds.

And that feels like a lot of time when you're doing it because it's really high. So the way that I would train was, like, every 30 seconds, I would know there's an air horn. So I would do 30 seconds on, 30 seconds off. 30 seconds on, 30 seconds off as a way of training my endurance. So I wrote this code, and I'm looking at this this Scott, and I'll tell you, this is how you know how old this is.

It JS, Node, it's using an auto bind decorator.

Its export default class extends PureComponent.

So it used PureComponent from React, which way back in the day, that's what we had to do. And a component will unmount, and I haven't seen this style of React code in a little while.

I kinda miss it.

Yeah. I don't I don't have too much to add there. I Wes, pleasantly surprised to see that the approach I took that long ago was exactly what you were talking about. I have a tick function, yeah, doing the same stuff. So hey. Nice, CJ.

This next question comes from LA Drinker, and, their question is, are you listening to podcasts? Which ones? So first up, Syntax. I listen to Syntax. K. Yeah. Me too. Listen to Syntax before I worked here and and now that I do as well. But I I like some of the podcasts that come from WNYC. So there's This American Life and RadioLab.

I'll almost always just download some of those episodes if I'm going on, like, a flight or, like, a long drive or something like that. This American Life is literally just, like, slice of life stories.

Radiolav, also kind of like slice of life, but they do a lot of audio production. So there's, like, really interesting, like, music they'll add that kind of, like, it adds to the audio storytelling element.

And then, I like a podcast called, Darknet Diaries. Have you ever listened?

Yeah. In fact, Jack, Jack Reciter did a one of our spooky stories a couple of Halloweens ago for us. I miss that one. Yeah. So we're we're we're kinda we're kinda tight.

Nice. Oh, he's featured on the syntax one, so we're we're tight. But, yeah, that that one's so if you haven't heard of it, it's all about, like, hacking and everything involved with hacking. Not not not only, like, cybersecurity, but also, like, physical penetration testing. And so he'll get guests Jack will get guests on there that will kind of, like, describe and talk about their their stories and exploits of, like, breaking into buildings, like, legally because they were hired to do so, and then also just general, like, hacking stories. So, yeah, that one's super entertaining. I also listened to Song Exploder. I haven't listened more recently, but this one's cool because they will get the actual musicians and producers for songs and then kind of break down what actually happened, in the song. And there was actually a a Netflix series that launched that was, like, a a companion to the audio podcast, but the audio podcast is really cool.

And then a couple more.

I listened to a podcast called Ear Biscuits. It's from, Rhett and Link, some of, like, the OG YouTubers.

And their tagline is 2 lifelong friends talk about life for a long time. So it's literally just them talking about random things, but I'm a big fan of the, Good Mythical Morning, so I enjoy that. And then the last 1 is WTF with Marc Maron. So I started listening a long time ago, and I also, like, watched Marc's TV show. But he's a comedian, and he just interviews people. I think it started off with just interviewing comedians.

I think one of the episodes that really sold me on it was his interview with Tim Heidecker from the Tim and Eric comedy duo. And it the reason that one yeah. That that one resonated because, like, Tim is almost always in character. Like, no matter what he's doing, it's like, you can't tell, like, is he pacing serious? Is he not? But that specific episode on Marc Maron, like, I actually saw him as a real person. Like, he gave, like, a real a really good interview to, like, really, yeah, just, like, who is Tim and stuff like that. So, yeah, those are some of my favorites.

Nice. Yeah. You know, it's funny. I don't listen to too many of those, but I have. You know, I listened to Radiolab for a long time. Darknet Diaries, I do listen to.

Every time I listen to Song Exploder, I really like it. But I it's like one of those ones that I I didn't it's not part of my regular flow, but I I just really enjoy it. I listen to a lot of podcasts. I'm gonna list some of them.

A lot of the I'm gonna put a word of warning. My comedy podcasts are fairly crass. If you are not into, juvenile crass humor, do not listen to these.

Action Boys is Node. It's a, 3 comedians are talking about action movies from the eighties nineties.

Big fan of that. They are very funny. The the episodes typically last a long time.

E one e one is a comedy podcast where every single episode is the 1st episode of a podcast.

So they'll be like Science Guys, The Science Guys podcast. And then they're they're essentially they're improving on these characters that they make as being like, here's, you know, 3 scientists who have started a podcast. And Nice. They get absurd. They're very funny.

Your Kickstarter sucks is extremely crass. Do not listen to that one with your kids in the cars. It's about Kickstarters, who are bad Kickstarters really. But it's it's much more than that. They probably spend 30 minutes of each episode just making rude humor jokes.

Fitness podcasts, I listen to Stronger by Science and Data Driven Strength. They basically are in-depth, very scientific podcasts about working out, just going over journals and all sorts of stuff from actual trained scientists.

Film podcasts, I was there too. Pure Cinema Video Archives, You Must Remember This is really good.

History and Crime. I'm listening right now to The Spy Who, and it's about a guy who debatably was the inspiration for James Bond. This podcast is trying to, like, claim that he was the inspiration, but the the that that connection is tenuous. Either way, it's interesting podcast for spy stories.

DNA ID is all about how they're using DNA modernly to solve crimes. It's little gruesome.

Swindled is up in the the range of like Darknet Diaries. Swindles JS really good one. It's about hucksters and all sorts of stuff. Very Darknet Diaries esque. Nice. Tech podcast, The Automators.

Local First. Fm is a new podcast I listened to about Local First Software, The Privacy Files, music podcasts I listened to. What had happened was it's like interviews of rap musicians careers over the course of their careers.

Past guests have been Prince Paul, LP, Questlove, truly good.

Miscellaneous tales of taboo, I've sick picked that one before. It's a woman reading anonymous stories from people who have, you Node, I worked as a housekeeper for wealthy people and stuff like that. So, like, just interesting stories. ADHD rewired, it's good for me. I learn a lot. And then search engine for kind of generic stories. One of the ones I recently list due to, Wes did all the cockroaches go? And I was talking about how in the eighties seventies, there was cockroaches everywhere. Like, what happened to that? Wes, where did that, you know, where did that go? Wes it's pretty interesting. So, yeah, that was long winded. There's a lot of podcasts I like in there. You might be able to find something that you enjoy. I've sick picked a massive amount of these in the past. So

Yeah. Didn't you have, like, your Spotify rap was it your Spotify rap? Or, like, didn't like, you listened to an insane number of hours last Yarn. Disgusting.

Wes.

It's it's actually embarrassing. Yes. It's very embarrassing. Okay. I'm sorry about that. And the majority of those were actually podcasts I did not even list on this list because they're hockey podcast. So I I spared you all my hockey podcast list, of which I'm I'm currently angry because my my team is doing poorly. So next question from Tim Smith.

With AI on the rise, do you think free tier plans will become a thing of the past? Or do you feel that GPU compute will get cheap enough for free tiers? It says to remail, but I and I don't know if that's the correct word that he's trying to say.

I think TypeScript killed the free plans a long time ago. You know, when was the last time you saw, like, a free node plan somewhere, you Node? Yeah. I I don't I don't think they're coming back, the free plans, you know. I think that was a time and a place. It was my favorite way to learn Meteor Wes that Meteor had, like, Meteor up or I think it's Meteor up. Either way, Meteor deploy or something. So that was like, you could try it out and deploy it right away. I can't imagine anybody doing that nowadays given how you could just load up a a crypto miner or something like that. That those those folks are ravenous. I had, like, one minor security thing in my AWS account that I wasn't even using, and somebody spun up, like, a 100 servers overnight and charged me, you know, $24,000.

So, I didn't have to pay it. AWS came through. I shut it down in a timely manner, and AWS, removed the charge. But Nice. Man, though yeah. The I I think they're gone.

Yeah. I think anytime you give away something for free, people are gonna take advantage of it. And I think, like, that's like, it kinda started I guess Wes was last year or end of end of year before that Wes Heroku removed their free free plan. And one of the biggest things they talked about was just spammers spinning up servers for, like, phishing schemes and stuff like that. And, yeah, if you if you offer things for free, people are definitely gonna take advantage of it. So I I think you're probably gonna see a shift into some more of the free tiers with sites like render and fly. Io. They they offer, like, a a base of, like, $5 free per month, but you still need a credit card to sign up. And you can, like, set alerts so that if you go over that specific amount of, limit, then they won't charge you or they will charge you. But, ultimately, they're just trying to make sure that, like, you're a real human with a credit card and not just trying to, like, use their services for free. Yeah. And I'm gonna plug a syntax Node, the host your own,

platform as a service because we recently dove into some of this. And you can host a ton of things on your own servers. I mean, not not necessarily your, like, own your own virtual private server that you can rent from anywhere.

And Tascoolify on there JS a self hosting platform similar to Heroku or Netlify or Vercel. Right? Doesn't do the serverless kind of stuff. But you can connect to GitHub repo, get a site online with an SSL certificate, and you can do that for, you know, a ton of side projects on a small server if they're not getting hit. So instead of having to pay per application that you're deploying something like render, you can do a whole bunch of stuff on 1 virtual private server. And actually, CJ, I have in about 2 hours a Mac mini arriving, that I'm going to be using to host things out of my office. So I'm getting into actual self hosting here from a Mac mini. So I'll have to do an episode to update us all on that. Yeah, that'd be great. I started,

like a whole little like a home lab. Yeah. Like I bought like, I mean, I researched, like, actually putting servers in your house, but anyone considering doing this, do the research because you can watch YouTube videos of how loud they are. You do not want a server, like, sitting in your office because it'll just be spinning fans all the time.

That's why I went Mac mini route or Yarn. So what I'm doing is is I have mini I have a few Raspberry Pis, and I have a, a Mac Mini. So I'm going all ARM here, and I'm not doing the classic Node lab Linux server deal. I I'm Yeah. Yeah. Yeah. I have I've done some of that research, but, yeah, it's a it's a wild world, the homeliner stuff.

In fact, let me show you this.

Yeah. Nice. My my rack mounted power strip just arrived yesterday for my my, Yarn home lamp. So Sweet.

Yeah. I couldn't get that excited about a rack mounted power strip. Alright. This next question comes from Spike,

And the question is, what is SemVer Anyways? Which is short for semantic version versioning. And, they, they had a really long story. I'm gonna summarize.

And, honestly, the story might even be good for, like, one of the the spooky Halloween episodes because it's about upgrading when they shouldn't have. But the TLDR is they wanted to use jQuery version 3 features, so they just upgraded without realizing that some downstream site was actually dependent on jQuery v two.

Clients got really mad. They started reaching out. Why is everything broke? And then they just downgraded back to to v 2. So I'll dive in really quick just to talk about what Simver is. If you wanna learn more, simver.org has a great explanation of of what this is, but you've probably seen it before. So if you're installing a package from NPM, it's always gonna have a three dot number. So that's the major number Scott the minor number dot the patch number. The current version of React is 18.2.0.

And so 18 is the major version, 2 is the minor version, and 0 is the patch number. And if a project is following semantic versioning, like the React library is, that major number, that 18, if that ever goes up, that means there are breaking changes. So that's why we see the jump from, like, 16 to 17 to 18. React has introduced backwards incompatible changes, and they're letting you know via the the version number the major version number.

The minor version number is for added functionality, so, like, new features that don't break things. So the next version here of React adds new features would be 18.3 instead of 18.2.

And then that last number is for patches and bug fixes. So if there's maybe not a new feature, but they fixed a bug, they would bump that to 18.2.1.

And there's other stuff to learn about this, like prerelease and, like, alpha and and different things like that. But when you see a version number like that, it's very likely that the project is using semantic versioning.

You should note, though, that any version number below version 1, there are no guarantees.

So you can expect breaking changes at any time. And I have experience with that more recently with Auth JS. So that's the project from the Next Auth team to make an auth library that will work with a lot of different back end libraries, not just Next JS. And it's still experimental, and they clearly label that on their website. Mhmm. So they are version 0.28.0.

So they're not even version 1 yet, but each each new feature, a lot of times, actually is a breaking change, and next time it'll be, like, 0.3 or 0.4.

So you can't always guarantee that they're they're following semantic versioning, but you should definitely, like, look at their the look at the library and and and see what they say in their docs. And then another interesting one is TypeScript. So TypeScript actually doesn't follow semantic versioning at all. Yeah. Yeah. Yeah. Yeah. And they they have a I'll ESLint in the show notes. There's an article that describes what exactly they do. I'll give you the short version here. So a new minor version is released every 3 months with new features, and then a new major version is released if the minor version would have exceeded nine. So if they if if they're going from 4.9 to if to 4.10, they actually just bump the whole version to 5. So they're they're actually you'll find that in TypeScript, a lot of times you can upgrade from 4 to 5, and there actually aren't breaking changes, and that's because they're not actually following semantic versioning.

Yeah. Well, it's it's I really like that explanation about everything.

What's funny is that I've always said I don't know. I could not tell you why this is. I've always said Semvar and and, like, now that you're saying SemVer, saying it like that, I'm, like, obviously, it's SemVer. I don't know why I would have ever said SemVer in the 1st place. I pronounced a lot of things wrong, so maybe. I don't know. No. It's semantic versioning, sembar. That makes so much more sense than sembar. I have no idea why I possibly would and now I'm feeling embarrassed, because I know I've said that on the podcast a whole bunch.

In a general rule too, if you're updating packages, typically, you can update a patch version. But always test your code, make sure it works.

I pretty much always YOLO update patch versions for stuff, and then just make sure everything's working afterwards. I'll update, you know, 10 or so different it's a bad practice, but I'll update, like, 10 or so different packages to their patch versions at once. Typically, because it doesn't break anything, but you know. Yeah, you never can be sure. You always gotta test it. Next question here from Adam Marsala.

I have a question about your Node office environment. Do you have any general specific recommendations of how to create a productive, but also relaxed workspace for thinking clearly and staying comfortable and focused? I've been working from home as a web developer for 2 years now, and I'm still using a room in our house that was once used for a kid's room. Judging by the cloud wallpaper. Oh, that's straight out of Toy Story. Cloud wallpaper.

It has never felt like my own space.

Instead, it just feels like a space I am borrowing for the time being. It's full of clutter, as well as my partner and I are sharing the office for storage, which doesn't help. I'm wondering if either of you have any experience or ever come across any interior design related tips to make a home office feel more like a home office that keeps you productive and happy? A funny, but embarrassing side note, I was in a meeting the other day, and someone saw the cloud wallpaper in my background, and they said that or they they thought I was just really into Salesforce.

Classic.

What makes your home office feel good to you? For me, clean air, clean desk, no junk, lights and headphones is is a big one for me. I have a air purifier over here just to, you know, cycle through the air, but I also open the windows as much as possible. If you got windows, that's a good thing to do. Get some fresh air in there.

You know, if you have the opportunity to put windows or lights or whatever, Wes, do that.

You know, some some whiter bulbs rather than oranger bulbs will definitely give you more of a a work feel. It will keep you more focused and less relaxed than necessarily.

Though those are some just kind of general things, but, you know, I think the big things are is that you have, like, a a clean workspace.

More so than, like, yeah. Sure. I have my my kung fu movie posters over here, and I have, some art over there that I did and stuff like that. And, like, those things, absolutely. Paint. If you if you can get rid of that cloud wallpaper, man, do it. Like, just spend the weekend and do it. Paint it how you want it to look, throw some art up on the wall. But the things that are most important to me is that my desk is at least clean at the beginning of the week. As the week goes on, it's it's Tuesday. My desk is already not clean, but Monday, it was clean. I'll tell you that.

Those are some big things for me. As long as I'm not knocking stuff over when I'm trying to to sit here and be productive or I can stand and move around, you have that space.

But, also, you can pull yourself into a more enclosed environment by putting on headphones and by, doing those types of things that can get you more connected to what you're working on. But those are those are for me. What do you what do you think, CJ?

Yeah. I mean, I completely agree. I I try to keep my workspace clean. That's probably the thing I'm worst about, but I always Node, like, I'm way less productive when I'm, like, tripping over stuff or, like, when things are super cluttered. So I always at least Node once once a week, I'll spend some time just like tidying up. I recommend calming decorations, you know, like, you can do greenery, plants, anything that, I mean, makes your your space feel more comfortable and relaxing.

I completely agree with lighting. So, like, if you have a window and you can do natural lighting, that's probably the best way to go because of our circadian rhythm and, like, actually seeing real sunlight when you're working during the day. But if you can't, you should look into lights that allow you to adjust the color temperature. So I actually have 2 lights here, and they can go all the way from, like, a really low, like, 2,000 k all the way up to, like, 65 100 k. And, daylight is, like, a a much higher k value. And so if you can find adjustable lights, that's that's another cool thing. Yeah. And then I would recommend if you can't paint or you can't do wallpaper, just use curtains. You there's actually, like, a little behind the scenes. There's no wall behind those yellow curtains there. No way.

They're just, and for the for the audio listeners, I have yellow curtains, like, way behind me behind all my stuff that I hung up. But I'm in, like, a big basement space, so I kind of, like, section things off with curtains, basically.

So, yeah, it's it's, it's super easy. It's not permanent.

And, if you want it to be permanent, you can, like, attach a curtain rod to the wall or to the ceiling or whatever else. But you can also look into photography backdrop stands. So, like, a lot of what people in, like, film and and TV do with, like, set design is they literally will just put up a stand and make it appear like there's a a window behind some curtains or something like that. And then I think to your point of, like, being a little bit embarrassed about the cloud background, honestly, I guess you could be a little bit vain about it and, like, kinda just focus on your back if especially if you're on camera camera a lot, focus on what people can see in your background. Because if for you, people if you feel like you're getting, I guess, better vibes or better impressions from people that are you're you're with on video chat a lot, that might also help with your own ideas of your of your workspace. So, yeah, like, try to make an interesting backdrop or at least a calm one. It's a lot better than just, like, a beige wall or, like, a stack of boxes or something like that.

Yeah. And my my, to go off of that, my office here, like you're saying, it looks nice behind me.

But if I were to turn this camera around, Node of my one of my pictures fell off the wall.

I got a monitor on the floor. I got lights over here. And, like, yeah, I I pick up. You know, I do it once a week.

But, yeah, I worry about the stuff behind me more than the stuff in front of me. That's very nice. Yeah.

And then I have a couple of notes because I think at the I read at the beginning of their question, they were kind of I I kind of interpreted it as, like, trying to find a workspace space at home. But mainly they're talking about, like, interior design. But I will say for anybody that is new to working from home, definitely have a dedicated space for that. So, like, when the when the pandemic hit and I was working from home more often, I did all my work from the couch. And that was not good. Like, I it it was very hard to, like, shut off my my work brain at 5 pm.

Also, I developed wrist issues because I was using the trackpad on the couch all the time. Yeah. So if you have the luxury of separate spaces, use them. So, like, I actually have a separate home office from my my, like, work office. So, like, end of the day here, I can walk, and then it's almost like a mental thing to, like, go into a different room and, like, now you're you're not working anymore and working on side projects and stuff like that. Or, like, if you're in the living room, it shouldn't feel like you're you're at work.

Yeah. Separating those environments is is key. When we we bought our our most recent house here, it has the an office attached to the garage. Because in in Denver, you often have, like, garages in the alley. And so when we were looking at houses, I don't know if they the guy who owned this house before warp, like, an accountant or something. So he finished this space that was attached to the garage. And then when I saw it, I was like, this is the perfect work from home environment because, specifically, yeah, you can really say, I got a door. I can walk out that door and go to my house. It feels like I'm truly going to work. I know that's obviously a luxury for me here, but, like, yeah, just separating those spaces is is so key. And you Node about the couch, check this out. I'm gonna get off mic here for a second and just move my camera around. Cool.

A little behind the scenes.

I got a dog and a cow. Nice. Yeah. Yeah. There's some mess over here.

Yeah.

Sorry, y'all, if that was, sorry if that was, nauseating.

But I I put a a couch in my office. And let me tell you, it does not fit in here well. It's a cheap old IKEA couch that we've had for, like, 15 years at this ESLint. And my wife Wes, like, let's get rid of this thing. And I was like, not so fast. I'm going to shove it in my tiny little office here, so that way I can, have a couch if I need to lay down and think. Nice.

Yep. Next question comes from mister JavaScript.

And he says, hey, Scott and Wes. But, actually, hey, Scott and CJ. Do you ever stop to consider Vue. Js in 2024? Why or why not? Do you like movies with gladiators? On the gladiator point, I I guess I don't watch a lot of gladiator movies.

But, I I I've been use actually, been using Vue. Js for a very long time.

And I exclusively like, really before Svelte really took off, I would almost always choose Vue. Js for side projects.

And I also ran the Denver Vue. Js meetup here. So, yeah, I I have a a long love for Vue.

But these days, I I am reaching for Svelte more because I think one of the reasons that I liked Vue so much is that it Scott rid of a lot of the the boilerplate of React. It made it so easy to, like, build things without a bunch of boilerplate.

You can mutate state, which, actually, I'm a really big fan of instead of, like, having to work with mutable state. But, these days, like, I would say in 2024, if I were to choose you, it probably would be because of Nuxt, because Nuxt is also doing some really cool things, and that's the competitor or the compare you can compare it to, like, SvelteKit or Next. Js, but but for Vue.

But their dev experience is pretty awesome. I tried it about a year ago, like, right when version 3 was released, and it was still early days just because v three had just come out, but it's it's about the time I should I should try it again because it's the ecosystem has definitely matured a lot more. And then on the last point, Vue is also still doing cool things.

So Vue 3 Vapor was announced, like, a few months back, but I think it might have been released more recently.

It is basically like a compiler for for your Vue components. So there's definitely been a push in the web development world and front end to have, like, more performant front end Node, and vapor mode basically allows you to opt in so that you can get components that aren't actually using the virtual DOM, and have basically been optimized ahead of time. And so that's a cool thing they're doing that kind of gets them in line with the the cool stuff that, like, Svelte is doing or even, like, SolidJS.

Yeah. Yeah. You know what? I'm in the Vue. Js documentary with the honeypot one, so I definitely have a history with Vue. And, you know, I really like working in Vue. I, very similarly to you, I I picked up Vue because, you know, it was it was a a step in the more comfortable direction for me away from React. I worked in React for a long time, but I you Node before that, I came from Blaze, which is what Meteor's framework is. In Blaze, Evan actually worked on Blaze for a little bit. So it was very similar to Vue in a lot of ways. And so when Vue came out, I was like, this is feels way more at home for me compared to what I was dealing in React. But very similar to you, Svelte to me took that the next step. And because Svelte took it in the next step, it's like I didn't need that middle ground option, and I am opting for Svelte just about a 100% of the time nowadays. So for me, I'm in the Svelte world, and React is like on the one end of it can do a lot, but you have to do a lot. And Vue is in the other end of it can do a lot, but you have to do little. And Vue is kinda right there in the middle, and for me, like, that's why I'm not picking it. It's great. If you're a Vue developer, awesome. It's great platform. And and people often ask why we don't talk about it on the show. I think it's mostly just because we're not working in it frequently. But I I I really do love Vue.

Have you checked out unjs.io, CJ?

I have. So most of what I know about it is it's what's powering Nuxt.

And I gave it a try when I was, like, looking at various, like, back end frameworks because, like, it it can kinda do similar stuff to, like, Node and stuff like that. Yeah.

Yes. You're you're dead on with all of that, and I did the exact same thing. I I looked at it, and I was like, And I I gave it a try. It's fine. There there's some cool stuff. They just announced some interesting, you know, easy to add WebSockets, all kinds of little things in their Nitro platform.

There's a lot of stuff here. And when you go to this on JS website, you're like, if you haven't used this before, you might be thinking, holy cow. There's a lot of stuff here, and there really is. It does a lot for you. So definitely something to to check out.

Anything else on the view view subject while we're here, CJ, or do you wanna get into sick pics and shameless plugs?

I think that's all I got. Let's jump into sick picks. Cool. I have,

I have a sick pick today. I actually have Node ready.

It's a yogurt.

I'm bringing yogurt to the show. There JS and I'm gonna preface this with this is a a bougie ass yogurt. This is expensive, but my wife has been getting it from Whole Foods lately, and it's El Node. I think that's how you say it, and it's some Seattle based yogurt.

And my gosh, it is the best. It's so good. And I I did not know it was expensive, and I told told Courtney, I said, please only buy El Node and buy tons of it. And she's like, that'll bankrupt us. That's not gonna happen. So, it's a little treat. It's lovely. But if you want if you like if you're a yogurt person, give it a try. And it's a it's Greek yogurt.

So high protein, all that good stuff, fruit in the bottom. Very, very good. Super yummy. You can find it at Whole Foods. I I've I'm thinking about calling up my local Costco and telling them, what do we have to do to get this in bulk here? Nice.

For me, I also am picking a food, and I have I have a visual Vercel guide. So Nice. I like I like spicy food, and I recently discovered pepper flakes from Flat Iron, Pepperco.

And, yeah. So the the thing about this is, like, I never thought that pepper flakes could, like, actually have flavor for me. It was also always, like, add some pepper flakes, make it a little more spicy. Yep. But this changed everything. Like so I especially like the the green, the Hatch, Hatch Valley Green pepper flakes. That's very Colorado of you. Hatch Valley. Yeah. Well, the it's it's Flat Iron pnpm Pepperco, so they're they're a Colorado company.

But you can find it, like, on Amazon. I think they're in a lot of, like, major grocery stores too. But, yeah, if you like spicy foods, it's super awesome. Especially, like, for me, I was using hot sauce on a lot of things, but it's fun to to switch it up every now and then use and use some pepper flakes instead.

I'm gonna check this out. I, you know, I was actually just I was making a little spicy oil yesterday, and the pepper flakes we had, not a huge fan. Didn't really love it. And I was thinking, I gotta get some new pepper flakes. So this is really timely for me, CJ.

Yeah. My wife got me the, the 3 the 3 pack for Christmas. So they have, like, a smoky one, like a traditional red, and then, like, a green one too. Yeah. Did she get it from the Savory Spice Shop? I don't know. Have you ever been to the Savory Spice Shop? I haven't. Okay. There JS a, a savory,

spice shop which this the savory that's the name of it, is the savory spice shop. And they have these in a few cities. I know they're they're across, but I one of the the big stores is in Denver, and it's right by, man, it's by the the bridge that goes from the Highlands to Node. Okay. That little bridge.

And what else is over there? The REI flagship store is right over there. So it's, like, right across the street from that.

That place rules. If you're into spices here in the Denver area Yeah. Check out the Savory Spice Shoppe. Shout out, to them. They're they're fantastic. I think there's 1 in Chicago and stuff too. So yeah.

Shameless plugs. I'm going to plug the Syntax YouTube channel. And I'm I gotta say, CJ just released a couple of videos, and they're fantastic. So if you've been liking CJ on the show, head on over to at syntaxfm on YouTube.

We'll have a link in the show notes. We're posting the podcast in visual Sanity there. If you wanna see me tilt my camera and show my dog on the couch, that's on there.

So, yeah, check it out. Syntax on YouTube. We're doing a lot of fun stuff, and it's only gonna get better over there.

Nice. I'm just gonna pick the same. Is it okay if we shameless plug the same thing? It's it's more than okay. Great. Yeah. YouTube YouTube YouTube YouTube. Youtube.com/atsyntaxfm.

Subscribe, please.

And check out my videos because it's it's been fun making them.

And, yeah. Check out YouTube.

Yeah. Absolutely. Check out YouTube.

Cool. Well, this has been awesome.

I hope you had a lot of fun, CJ. And Yeah. Yeah.

That's all I got.

Peace.