Holiday Snackluk

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS web development treats coming in hot. Here is Wes, Barracuda,

Boss, and Scott

ghee. Welcome to Syntax. On this Monday, hasty treat. We're gonna be doing a snack luck, a holiday snack luck.

What is the snack lock? Well, that is like a potluck, but in a tasty treat. So we're gonna be doing a shorter episode here, and it's kind of like a normal potluck, but just a little bit harder, little bit snacky. And this episode is sponsored by 2 amazing companies, Sanity and LogRocket. But before we talk about them, Let's introduce

Wes Balls. Hey, everybody. I'm Brady. I was just telling Scott how, like, 10 years ago when I actually lived in Toronto, we would get together with our friends, and we would have, different luxe.

Did you call it a snack luck? Yeah. We had a snack luck. We had a potluck. We had culture luck, which was one of my favorites. So, Toronto, everybody comes from a different country there, or everyone has a different heritage. So everybody brought a dish that was from their, their culture. So we had man, it was unreal. Just all the different, different foods that would come. So culture luck was a good one. Snack luck was good. I've always wanted to do a diplock where you only bring foods that are a dip, but I haven't had I haven't had 1 in, like, a long time just because, like, All of my friends have, like, 11 kids each right now, and nobody hangs out anymore. So I just sit on the couch and Have my own Diploq.

Diploq makes me think of Diplo, who's like a music producer. I hear Diplo.

One time, I I met Diplo at a, he He came into my office one time when I was working. Oh, man. Yeah. I was I was working at a record label, and he just showed up asking if the boss was here. And I didn't know who he was because I don't know what that guy looks like. And, he, like, came in and asked what the bosses are. I'm like, no. No. He's like, well, tell him Diplo's here. And, I was just like, oh, yeah. This is famous guy. You can tell just by it's funny. When famous people come in to wherever you're working, you can always kinda tell because they're dressed, like, very, very much fancier than everybody else. It's like they could be just wearing a t shirt, but, you know, that t shirt cost, like, $300 or something. So, yeah, it was very obvious he was wealthy. I had that with,

Who was it? Macklemore.

I was at some I was at some, like, secret a concert. They're like people. Someone invited me. They're like, we can't tell you what's happening, but just come. So I was like, alright. I'll come. And, I I was there's just this guy walking around with this huge hair and a big coat and stuff. I was like, wait. Who's this guy? Yeah. They just look fancier. Right? A couple more. Yeah.

You could just tell that there's somebody. Yeah. I don't know who this is, but it's somebody. We had that at at dinner once and ended up being the quarterback for the University of Michigan. So we're like, yeah. Oh my gosh. Hi, buddy. It's huge. Alright.

Let's talk about sponsors. We got Sanity and LogRocket. I'll talk to you about Sanity. Sanity is The unified content platform that powers better digital experiences.

What the heck does that mean? Well, they are, part CMS, part image resizer, part developer experience. Basically, if you have a website and you need a somewhere to put all of your data, That's what Sanity is. They, you create it. You can create an account. You create all of your schemas.

You relate all your content to each other. You can say this is an image.

You can hook it up with a bunch of different providers. You could hook it up with another one of our sponsors, Mux. Mhmm.

And you can have your video streaming from there. They have a really sweet, like, UI for editing the content which is, like, Honestly, one of the major draws because the marketing folks, the lawyers, pretty much everyone loves to use the, UI for editing and approving their content. It's called Sanity Studio. It's pretty sweet. Check it out. Sanity.i0forward/ syntax. That's gonna get you double the free usage tier.

Thank you, Sanity, for sponsoring. Well, while you're talking about experiences, let me tell you about LogRocket. Now that is an experience.

LogRocket is the perfect experience for your errors and exceptions because you actually get to experience them with a scrubbable video replay. As in straight up, you can see the user click on the thing that broke the thing that caused you so much pain. And instead of them having to email you saying, hey. Click thing and broke.

You can say, oh, I know you click thing and broke. I saw that ahead of time with LogRocket. So check it out on logrocket .comforward/syntax.

Sign up today and get 14 days for free. Thank you to Lock Rocket for being a sponsor.

Alright. Let's get on into it. We got a bunch of questions here. 1st one from Ashley.

Has packaged dash dash lock dot JSON ever saved your bacon? It's never helped me. In fact, deleting it lets us regenerate, has been the only way it's ever solved issues around for us. Why is there money? This is this is funny because there's a lot of stuff in software development where you're like, this is a pain in the butt. Yeah. Like, the same thing with peer dependencies.

For to me, peer dependences are always getting in the way when they're really there to stop, issues from happening with incompatible pieces of software.

So package lock dot JSON, will if you ever crack it open, it will detail down to the actual version.

Like, the NPM packages have used SemVer, semantic versioning, which is like 3.2.1.

And then Each of those point releases means that like a minor update, new features added, and then the the third one is a breaking change. It's it's a whole new version.

And the package lock will tell you to the closest point which version you used to develop that website so that when you deploy that sucker to your website and they npm install that on your host, you're getting the same package versions. And the whole idea with SemVer is that, like, If you develop with version 2.1.1 and then by the time you deploy that thing, 2.1.2 came out, Those are different pieces of software. And it's supposed to be that nothing broke because it's just a small little point release. But sometimes it does release and I've certainly had that issue with my, PayPal, years ago when I deployed my website for a launch.

I built it. And in between me building it and me deploying it the next day, they released a version that broke something, and it made all of my PayPal transactions decline. Oh. And and that was that was a day before package lock actually had been a thing. So, that's why it's there. And the reason why I do this in my tutorials whenever I Whenever I tell you to delete your node modules, I also tell you to delete your package lock dot JSON is because sometimes you get like a weird version or something non installing properly, and that's just a good way to just wipe it all out and start fresh. Yeah. And the lock file is nothing new. I mean, and if you use Rails or any of these other package based things. The lock file is definitely something that has been there for and I don't I I mean Ruby, not Rails specifically, but, the the pack pack,

block file is is definitely like a a convention that exists in many other languages. So It has saved my bacon before, but I think most of the time, it saves your bacon are or times that you look just flat out, won't notice it saving your bacon. You don't know? Right.

Because it is.

And unless the version got updated, which you wouldn't know, you wouldn't know that there is a problem with it. Sometimes that happens. Yeah. Yeah. It's it's kind of crazy that we rely on

moving software and just assume that it'll be fine, with when we're not using the log file. That was a big thing. When the log file came out, people were adding it to their git ignore because it just made huge diffs every time you NBM installed or updated anything. But you'd you need that thing in your, you need that in your back in your sorry. In your version control. Yeah. Alright. Next question is from

Emmanuel, and he says, why do you guys hardly say anything good about Angular? Is it obsolete or do you just not care? So the answer really is is that we just don't use Angular. Angular Has a big community.

A lot of people use Angular. There's a lot of very smart people working on it in Angular.

So, Angular is definitely not obsolete.

It's it's not bad. I I just don't use it. It's it's whole it's a whole thing. Right? And because it's kind of a little bit more all encompassing solution compared to some other things. You you end up getting a little bit less of that outside bleed from other communities into the Angular community because they are so kind of in their own world.

So that's really, really why. I don't think it's a bad choice. That that said, I haven't personally written anything in Angular in quite a while since Since they hit version 2, which is when I stopped paying attention to essentially what's going on in Angular. But, you know, I don't think that's a bad thing. There's there's a lot of really, you know, smart people just too much for me to pay attention to. Right? I already got too much other stuff. This is unrelated. I just went to the Angular website, and I was like, what the heck? The the,

the the footer still says copyright twenty twenty. And then I went to tell Scott about it, and then I refreshed the page and it was gone. And that must have been a service worker of being cached from the last time I visited the Angular website which is obviously last year or 2 years ago now if you're you're listening to this next year.

But then I refreshed it. It was gone. So that must have been just a service worker. That and that's how service workers work. They they serve up what's in the cache, and then They check the new version. And if the new version is updated, then the next time you refresh the page or you can also prompt the user or just literally window dot refresh, and I will get the new version. So yeah. It's it's just another thing is just too much good in the world, that I just can't I Okay. Literally can't use it all. And you wouldn't wanna take a course from me if I was the guy cranking out a React, an Angular, a Vue, a Svelte, and, like, 6 other framework courses because that means I obviously don't know the, like, the intricacies of every single framework. I could guarantee I could put out a course on all of these, But I'd much rather you take a course from somebody that's like, yeah. I actually built my course platform, and I've been using React for however long. And that's not to say I won't ever use other frameworks in my courses, but I'm not gonna dive into absolutely every single framework out there. It's just not enough time in the world. Yeah. I think we're both spread thin enough as it is. So Totally. And there's there's peep that people always ask us, like, who's the West boss or Scott Kalinski of Ruby or Angular or PHP or whatever. And they just need to, like there's people like us in every single tech. There's nobody learned from me, Waz. Well, there's no one like Scott, but there's plenty of me. Yeah.

You're extra special. I am.

Next question we have here from Kenny. Hello, gentlemen. I don't know if anyone has ever told you, but thank you, Mile, for the amazing content and the hard work you pour into the show. No one's ever told us that. Thank you, Kenny. See, Kenny understands that I'm special. So I listen even if the topic is irrelevant to my skill set. I'm looking at you, React. It's funny. People have said that a lot. I don't use React, but I still listen. But maybe that's good because Scott doesn't use React as much these days. So now we've got more diversified content.

Exactly.

My question is, how do you handle package updates? For example, I'm working on a full stack app for almost a year now, and I go to my package dependencies, and it usually breaks everything when I update it. I usually use npm outdated to see a list of outdated packages. Problem is, I never know whether to use npm install or npm update. After updating the version package, JSON, the worst is blah blah blah blah blah. Okay. I feel this pain myself.

I I get the gist of the question. Yes. I've I specifically use a third party package called, npm check updates. It's n c u. C u. I've just NPM's version of NPM update or whatever or NPM outdated. I've just never jived with it. I never maybe maybe I just don't understand or maybe I've been using NCU for so long. N c u is better. Yeah. N c n c u will show you what versions of your packages are available to update, and then You can update the ones that you want. There's another one I posted n c u, and someone's like, this one's even better because you can You can pass it a regex of which ones to update.

I would not. So if you I was YOLO it,

For dev but, like, what if you wanted to update all of your,

Gatsby plug ins? Gatsby dash, all of them. Then I would I would run NCU, and then I would only Select the Gatsby ones. That's not the best for me. Yeah. Oh, yeah. Well, whatever.

I use NCO as well. And what I usually do is I just look at it, and then I'll look for the ones that are a full version bump first. And usually that means there is a major breaking change. And then what I'll do is I'll go to the release notes for it, and check. Actually, what I'll really do is just update everything and pray that it works. And Sometimes that'll work or update everything, run it, run your test, and then start googling errors from from there on out.

But if it's something major, like a major bump in, like, Mongoose or a major bump in Gatsby, I'll go to the change log for that and just see, like, what changed here, and I'll scan through it. And usually you say, don't care. Don't care. Don't care. Don't care. Because, like, all of these, like, edge case things that you've never used before Is not not getting into you or it's like a they'll even have, what's it called? A code mod. Where where a code mod is on. You just run, and it will it'll it's a fancy find and replace on your entire code base. Code mod scare me. I wrote 1, and it was still it was very scary.

Yeah. Because you need to think about I I was writing, not a code mod, but just like a find and replace for my advanced react course. And the final replace was replacing the instructions in my final replace instructions.

You know what I mean? Like I know what you mean. Yeah.

I recently was doing, like, a lot of regex find and replace. And I was, like, please Stop replacing this thing. And then I was on the regex, one o ones, and all sorts of stuff. Yeah.

So that's how I do it. Yeah. Code mods, anything any major change like that. Scary. Scary. Scary. But, yeah, I do I do it very similar. I I use a p n p m tool that is very similar to all of these. It gives you an interactive select which ones you want.

Actually, I think the p npm one is built in. P npm update It's Pnpm up hyphen I. So that's the one. And then you can do hyphen capital l for latest.

Yarn. Yarn also has a really good built in one. So yarn and PNPM have really good built in ones, but if I'm using npm, I'm using, NCU.

And and all of those things, they they they work really well. Like I said, I don't need the regex because you can just select which ones you want to update and which ones you don't. But what I'll do, Similar to US is I will select all of the the patch updates first, and I will run all of the patch updates. Then I'll confirm that everything's working, And then I'll commit because the patch updates have been updated, and then I'll do the big big, big daddy updates 1 at a time. Like, if something did a major version update, I will only do those 1 at a time, make sure all that stuff works. But I like to stay on top of it. People have really asked about, like, how do you How do you really how do you stay on top of your updates? And it's really good to see that. Yeah. Yeah. I I I really try to run NCU or whatever my my thing at least once every other week, not because I'm obsessed with getting the latest and greatest, and there there are some downsides to that as well that you're gonna hit more bugs that way. But, I personally like to do that just so I I don't have a situation where I'm too far behind on it. Yeah. It doesn't get away from you. Running them. Yeah.

Yeah. Especially, like, I have, like, a version of, like, Next. Js 8 running on one of my things, and I'm just like, I don't wanna I it's too far upgraded now. Yeah. Like, I gotta spend, like, a day upgrading this thing now instead of, like, incrementally doing it. Yep. And then it's impossible to, like, search

And Next. Js 8. Like, how do you do this in Next. Js 8, you know? All that stuff is a big way big big time them too. You know what I mean? Yeah. I It's frustrating. Updated my site from sapper to SvelteKit, and I never even published the the Sapper version or the self kit version. And now that's on my old laptop, and I haven't, committed that yet. So I'm gonna have to do it a second time, I think.

I just I just found the, the tweet about n n n c u. I tweeted it in 2015. So it was almost 7 years ago I've been using this thing. And the the tips that people said was use the dash dash filter on NCU, and that will allow you to filter for Apollo GraphQL whatever.

And then somebody else said npm upgrade is another package that has interactive mode, which helps open change logs. So, like, you go 1 by 1, and it will try to pull in the change log for you. I'm gonna try that next time.

Next question is from Connor. How do you keep learning as a beginner as you progress in your career? I love the rapid progress I saw as a beginner, and I feel like I've plateaued since working full time for a few years. So he got those beginner games.

He he hit yep. He got those beginner games, and then Now I was wondering, well, where are those? The rest of those beginner games, and sometimes you gotta work for those. But I bet, Connor, I bet if you were to look at code that you've written 2 years ago that you would probably scoff at that code. Because when you work full time on stuff, you end up picking up different skills. You you you end up picking up these project management skills. These team skills, these code skills about building solid software that works, that chips, all those things. I would imagine That you are making some serious gains still that just are different than the ones you were doing before, which were like, oh, oh, now I can Do this interactive thing that opens up a a modal and whatever. Right? These new skills, I would imagine, have just taken a different shape.

So I would say you're probably still rapidly progressing.

And most of us, if you're working in code every day, it's honestly hard not to get better. Not that you're gonna be learning new things, but you'll be doing things more efficiently. You're gonna have a better understanding of things, especially if you're working as a full time dev. Now if you want to if you want to feel like you've not plateaued in some sort of way and you want to say like, alright. Let's Let's, let's feel excited about something.

I would suggest taking something that seems kind of wild to you and going for it. Like, for instance, there's a new, three d library that just came out for Svelte that Richardus did. So a Svelte I think it's Svelte cubed or something. And now I don't work a ton in 3 d. I've taken a a few 3 courses, but I did do a a 3 d course on on React. And let me tell you, that was, like, one of the most eye opening experiences for me when I did that 3 d three d course on React because it was like, oh, you can do all this wild stuff with the 3 d and react, and it's really easily.

And so maybe If for you, whether that is, you know, something like this Svelte cubed project or React 3 Fiber, these are just, you know, totally off the wall suggestions, but pick something that's kind of interesting and fun, and just go for it in, a little side project. And it doesn't have to be anything you're even gonna share or publish. Just make the repo and goof around.

Sometimes goofing around can make you feel like you're already picking up some stuff. I was just gonna say the exact same thing is, like, optimize for having fun. Like, do something that is is interesting.

And sometimes it's hard for people to find that because they're kind of burnt out on it. And they the last thing wanna they wanna do is like code more when they're they're done their day job. But, you often hear people like, oh, I picked up x, y, or z, and, I haven't it's reinvigorated my passion for programming. And, honestly, for me, that's always when I I do something fun. And then find find something that is fun to you, whether it's like we had so much response to that, The last podcast we did on, like, automation with JavaScript because that's just, like, not necessarily that everybody liked that, but it obviously hit a Hit a nerve with the type of person that wants to automate their life with JavaScript.

Totally. So find something fun. Next question we have here from

Joe from MN. That's Minnesota there, Scott. Yeah. It is that is for Minnesota. MN. Joe Joe from Minnesota. Land of a 1000 Lakes.

My wife and I recently took our 3 children on their first flight. The older kids did great with the built in screens and movie selections. Got me thinking, how does this work? Sort of some media server on the plane with all the content. How do you 2 go about implementing this? I recall from the Nas episode that you talk about implementing your own Google Photos on Netflix.

Thanks, and keep up the great work. This is kinda interesting question because this is exactly how my brain works is I sit in a taxi or a plane, and I go, how are they doing this, and how can I break this? So I'm I'm assuming.

I don't even know, but I I that has never stopped me from answering a question in the past.

I'm assuming you're right. They have some sort of, NAS on the plane That has huge hard drive full of tons and tons of content.

And there's probably Some person that just takes this new hard drive and slots it in with all the new content as well as the metadata.

Yeah. Yeah. I like, it's it's definitely not streaming. The airplane Wi Fi would not be able to support streaming 60 movies beaming beamed up from the ground when they can hardly load a text page. They offer Internet that you can subscribe to and then Have you ever done a speed test on that Internet. I've never paid the money for the Internet. So Oh, yeah. I always buy it when I'm on, and it's You do. Really slow. Oh, yeah.

I always what I do is I I head I I get the kids' tablets loaded up, and then I click download on a 1,000 things on Netflix, and

Let the kids sit on the tablets. But although my own personal coding stuff, I just ends up doesn't yeah. I never use Wi Fi, I guess. Oh, yeah. Yeah. I don't pay it for my kids. Like, it's The Internet on the plane is not for, yeah, for streaming stuff. No. It's it's just for, like, doing email and and whatever.

I haven't been on a plane in forever, though. I was just on a plane. Don't yeah. Don't go. Don't don't go. I was Yeah. I I think that's kinda interesting. And I actually just talked about this the other day.

Scott and I both have Synology disc stations, and we At least I run well, I'll let you talk about years after.

I run a NAS server, called m b e m b y. Mhmm.

And that holds all of our local video. So we have Disney Plus and Netflix and, yeah. I do. I you know? Because Me too. We had the streaming TV at some point and it recorded streaming TV, which is really cool. So you could, like, say, I record every instance of this one. And we've mostly switched over to just using, like, Disney Plus and Netflix. Like, we have enough of those that it covers it. But, like, one example is Bluey. Our kids' favorite show in the world is Bluey and Best show is Bluey. What what's your kid's favorite characters? Is it Bluey? Oh, I I don't know. I I should ask them. I just know that my kids go bananas for it. My my kids and it's very cute. Where Landon likes Bluey more and Brooklyn likes Bingo more because they're like they're the same age and the kids yeah. They're very cute.

If honestly, if if you are just like an adult with no kids, Go watch Blue. It's it's excellent. There's an episode where the the flat flat pack is the episode, and I think it, like, It will bring me to tears every single time I watch it. Because the entire thing, there, like, culminates into, like, the What's that Michelangelo painting on the 16th chapel? Like, it culminates to that where, like, they rapidly not only rapidly evolved from From fish to, yeah, to to human beings, and eventually, and by the end of it, their parents have gotten old, and the child is grown up, and it's like, It's all being done through metaphor of children playing in the front yard. But meanwhile, I'm over here just to be like, oh, so sad.

Yeah. That's good.

So I talking about Bluey. Bluey season 3 is only available in Australia.

So, I did what any good hacker will do, and I flipped on the VPN, and made it look like I was in Australia. And then I used some, YouTube DL to to download it from whatever Australian version of that is, and then I threw them on our our NAS.

And it's awesome because the kids have the MB app on the Ipads, and they could stream it from there. We have it on our TV.

We can I was at parents yesterday? And because MB lets you stream over the Internet, I streamed it from our disc station shoe thing and you can download the episodes on the iPad and it's awesome. So that's that's my Naz setup. Go go listen to the NAS episode.

Home server episode.

What what's your NAS setup for? Do you have any, like, local media files or is everything just streaming for you. I have MB,

and I have, like, maybe, like, 300 Shaw Brothers films on MB, But I'm the only one who uses MB. We have it set up through our TV so I can watch any of my Shaw Brothers films at any moment on the TV or any device, but I swear, like, I've I've probably talked about envy to the fam A couple of times, and just it hasn't caught on. Maybe because we don't have a ton of kids movies on there.

We yeah. That that's probably why. We just just basically have only violent kung fu movies on there. So I imagine that's probably why I'm the only confusing, and I'm just just hitting this realization that anybody else would fire it up and be like, oh, okay. There's nothing good on here. Yeah. The devil's mirror. Okay.

It's amazing. Like, I I look at the stuff that we have on MB, and it's all just because of you can't get it in Canada. And, like Yeah. It's It's been getting much better.

Like, my ideal is that, like, less and less because obviously you have to pull these episodes from somewhere. I've I've pulled a lot of,

Arthur off of YouTube as well because Arthur is the best show ever. Oh, yeah. Arthur is the best. And it's it's great because you can just have it offline or whatever. Yeah. Yeah. That I I gotta get more into this too because I was thinking about it the other day. I really wanted to watch the the Canadian Bake Off because we finished all the British Bake Offs, and it's like, well, there's 4 seasons of Canadian Bake Off. But net you know what? Netflix is tricky. I've I've actually actually gotten it to work with my VPN to get the Canadian Bake Off, and I can watch it on my phone. Then if I try to Chromecast it or if I try to do it on the TV, a plan. That doesn't work. Why aren't you using the app? Like, I'm not I know why I'm not using the app. Yeah. I'm not using the app because I can't VPN past it. Yeah. The Chromecast

Goes directly to the server Yep. Which is always frustrating for us because when we at our cottage, We had American Internet, and we could never watch any of the Canadian shows on the Chromecast because you would have to do, like, a VPN at the at the router level, and I just haven't had that that set up, you know? Yeah. And also, like, what's up with,

what's up with apps trying to block you on that stuff? Like, YouTube TV. I'm trying to watch the Detroit Lions. You know? Okay? It's a it's a mystery why anyone would wanna watch the Detroit Lions, but if I VPN to Detroit.

Just let me watch the lion. Say say, okay. We knew we know they're gonna lose anyways. So just Yeah. Here. You got it. That's what makes people

Go to piracy because when it is too hard to actually do the the the right thing. You know? Totally. Yeah.

I feel like it's gotten much better in in the past years. Like, I don't mind paying for a couple of these services. Just, like, don't make me have to jump through hoops and

And, like, use VPNs and all that stuff. Yep. Key in case in point is I think the NHL just signed a big deal with ESPN, And they're now on ESPN plus rather than their own one. And that's like a prime example of, like, instead of rolling your own crappy app, Which the NHL did for so long. It's like use somebody who has, like, a good app Who knows what they're doing. And it's way better. Yeah. Sweet. I think that's good for this episode. Should we wrap it up? Yeah. Let's wrap it up. I'm gonna, now spend some serious time on my MB Server. You got me, got me on MB Zone.

Awesome. Well, let me know if you need the the bluey plug. I'll show you how to do it. Need it.

Alright. Thanks for tuning in. Happy new year, and we'll see you next year.

Peace.

Peace.

Head have over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.