Updating Project Dependencies

as well, the newer version. So I sort of just, like, prepared myself for that upgrade that's coming in a couple weeks.

And then I'll leave the major ones, take it away. Yeah. I I just did a bunch because, like, I started off the year

Then I'll go through all of the minor updates, My course platform had a whole bunch of dependency updates MAU. You know what a MAU is, Scott? Meow.

I'll talk about that in just a second. Yeah. I do the same thing. I I do I do the exact same thing. Patch first, minor next. Yeah. Beautiful.

for, your application, React 20. They would totally remove it, once everyone's had enough time. And usually, you get at least, I will update groups at a time. So Interesting.

a new version of a package. Sometimes you'll have to regen a new set of API keys for that as well to go along with it.

to

we're on React 18 right now. React 19 would not remove useEffect, But it would start throwing warnings saying, hey. Pretty soon, this is gonna be removed. They're not they're not removing his effect, but that's just an example.

I have no problem yellowing

like, a year, 2 years to to catch up to those things before you actually have to to upgrading and and actually change how your code works. Yeah. And then honestly, it depends, like, what the repo is. Right? Because I I do know that, like, some things are more likely to break than others. For instance, like,

Mongoose is like a pretty mature package. If If it's going from a major version to another major version, you can probably guess there will be breaking changes there, especially because it's some very semantic versioning where You know that a major update is for breaking changes, but, like, if you have, like, ES Lint or something,

of the GitHub repo. If you've never if you've never seen it before, you go to any repo. You can look at the releases section. I think the link is just right there on the Just under the about, there's a releases. A lot of packages will say, here's the releases, and they'll typically have a change log or at least at least

a full version update of ESLint because it's, like, really low stakes. Right? So I do like to calculate the stakes. And also if there is, like, a high stake one before Totally.

an ability to look at some of the PRs to see what exactly went in there. And so major big packages, I'm definitely checking out that first. Yeah, that's exactly what I did. So it's funny you say Mongoose. That's the one that I just upgraded

if let's say React wanted to remove useEffect, with, to 2.1, What else? Test, test, test. So if you've got tests for your codebase. Obviously run those. Those are save your baking huge because you can automatically catch those things. If not, any other minor stuff that that hasn't been updated.

on Friday myself. They went from a major version to another major version, and we have to do some of them yet. Is it is it a bit is it a breaking? Is it a big thing? It was a little bit. There was no breaking changes at the end of the day, but I needed to also update the version of, Watch your error logging. Specifically,

I before I make any sort of change or modification to those packages, I will go straight up to their change logs and look in the releases section. Releases

Gatsby 3 to 4 was a big one. ESLint 6 to 7 or 7 to 8, atmagicbell.com.

A major version of Babble, feature of a lot of these immutable hosts is that you can Just roll back to a working version. Oh, yeah.

in a major version.

And then the next major version, they'll remove it. So, and I

major version of of React.

something might break here. This we have to really pay attention to this type of thing. So,

And that's specifically what I used to check if there are any updates.

And, let's see. It's p n p m up is the command. And if you pass it the hyphen I, lowercase I flag, It will give you an interactive version, which is just like one of those lists where you can hit space bar to fill in the dot and choose which ones you want to update. You passed in a, hyphen capital l, it will give you all latest versions of packages rather than just, like, I think, patch or or

npm check updates, n c u.

And if you're using a mono repo, I learned you can do dash dash deep, and it will go through every package JSON and tell you what updates are in there. And then use you just told me that there is something built into PNPM for this as well. Yeah. Yeah. I use PNPM, API keys. So a lot of times, Then that is a minor update, and that should not have any breaking changes, but it can have new functionality some of your stuff, which means that you just literally update it all And just hope for the best. And of 3.5.2.

This is this is more gonna be on like like tools or not sorry, not tools, but like more of methodology. Yes. Right. And in the past we've talked about,

format money function where you can you can do that in to a a certain point. But when you Should follow it. It's it's definitely not always the case. But in most cases, Come back to a project you haven't touched in 6 or 8 months. There often is of those for free.

run the thing, click around, these updates.

And then if you're going from 2.0 This is no longer a method or whatever that error ends up being. Yeah. Yeah. Or you're you're passing a string here. It's no longer supported to pass a string. You have to pass an object with a value prop inside of it. Something weird that, you know? And that's another huge up huge benefit for TypeScript.

a semantic versioning.

something broke or there's a bug in this, like, weird edge case. So we patched it,

unique You don't have to necessarily roll back a git commit. You can just Last thing I have here is is just pray.

patch updates, any

And that's those software in SemVer. That's what that's what Node. Js uses or npm uses, something happening in your application, whether that's some their product has shipped or, just kinda have it open. And and like, fairly large websites, so that, So, updates that needed to happen.

and it doesn't doesn't change any. It doesn't add functionality. It doesn't break any functionality. It just fixes how it should actually work.

functionality. Maybe they've changed how they've done something, email notifications,

the first point, if you're going from 1 point whatever to 2 point whatever, That's a major version, meaning that there's likely going to be breaking changes in that.

And we've said this before, but really quickly. The,

and they changed that to either dot estimate entries or dot count entries.

in your your course platform or not course in your code base You have to do some research on like, for example, I had to update a, an actual project called, have put together a sort of a process For for going through these things. And we've joked in the past and half joked and half real of just YOLO updating 4,

non index fields use this one, otherwise use this one. So you just got to kind of read through it, update your code base, make sure it still works, Shoot. When we released 2.2.0 their APIs And they're back for some more, and they've got looks like they got a whole bunch of really cool new features as well. So Magic Bell does, if you get one of those, with SemVer, 2.2.1.

and that allows you to sort of batch what I think, is a is a sane way to approach this type of thing. And I'm curious to see how how Scott does that as well.

And say, did I use this? Did I use this? Did I use this? And then when you hit something that you did use, it'll say, is a three point system. So 1.3.1.

And you just go through each of those bullet points, and you can almost always just search

notifications I'm going to update it was actually the other way around is that my host is updating the version of MongoDB that's running on the server. So I needed to update mongoose

the other parts, which is super super smart. They batch task. You can have preferences.

I don't know. Last year sometime.

little bell to your, But luckily, those were major version updates. And anybody who YOLO updated and didn't check green or red Or yellow.

in one part, then it's not gonna notify you about it in the other, It's Mau, monthly active users. That's that's what that means. So you can get a 100, in a minor update. And then there is a patch release.

Cool. Let's get into updating project

a notification only once a day or I want to, And or yellow. And those are associated Number 3 is update major dependencies. So these are things that have done a full version bump. Now you're getting into,

They have this really cool thing called smart notifications, in Mongoose, I was using dot count, if I've seen it in the app, then don't email them. It just gets very, very complicated. So if you need notifications in your app, check it out

This is one of those things that's, like, you think it's so simple to just add a notification little everything. So I, uses that tech website was on Gatsby 2. Now it needs to be on Gatsby 4. Personal website was on Gatsby 3, needed to be update updated to Gatsby 4.

somebody has followed them or whatever.

a couple You can you can kind of expect if you're, like, in an app let's say you're in an app and you get a notification about, like, Scott Tylinski has followed you. And you see that, then, like, I don't need an email that also tells me Scott Tylinski has followed me. But if I'm not in the app, Then I should. Or, like, do I need a push notification if I've already seen that? So Magic Bell has this thing called smart notifications, The syntax website was on Next. Js ten as well as a whole bunch of other things, and that was updated to Next. Js 12.

Check out all of their little demos and documentation videos. Give it a try. Pop it in your project. I know that we love and use it over here at level up tutorial. So check it out. And, Wes, do You want to talk about Magic Bell? Yeah. We had Magic Bell as a sponsor,

for your application. So if you need to notify your user about, and then you're you're good to go. As I'm doing this, I will be doing git commits for every like, upgrade Gatsby, upgrade Mongoose, upgrade ESLint, And you need to make sure that you're updating n c u. I'll see a huge list of everything, and it will tell you what needs to be updated and what versions are there. And it will usually color them, deprecate but not remove functionality but the API should still work or they're not gonna take away

for a full archive of all of our shows.

what has changed under the hood unless you read every single line of code down the 50 dependency tree lines you have to know. And There was an issue the other day where a

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

Kind of on you. Kind of on you. Yeah, totally. Yeah. All right. That's that's my tips that I have for updating a major ESLint and all of the ESLint plugins. I'll update all of those at once if they're

what happened in the major version update.

and broke a lot of stuff.

Peace.

major Node. Js project. Hopefully, those are helpful. Anything else to add there, Scott? No. It's funny. We have We've kinda independently came up with the the exact same general workflow for these things without you know, it's not like we sit here and discuss this beforehand. But No. I really end up doing all the same things you do in that. I think that's a good sign that what we're doing is is both practical and reasonable. So Totally. Yeah. Totally. Alright. Well, thanks for tuning in. Catch you on Wednesday. Peace.

just hope that everything thing goes because that's the one thing about using all these dependencies in Node. Js world is that You don't always know something something may break but it's not the end of the world. Right? So those are it's important to know if these are major or minor.

popular open source maintainer just kinda nuked his packages

Head on over to syntax.fm

dependencies. We all love dependencies.

dependencies. We depend on them Because they're the packages that we're using in our application. So that's what a dependency is.

they rely on other packages to to work. Right? If you're running a React package or React website, then React is going to be one of those packages. We call those

And, Wes,

So For for those of you who don't work a ton in JavaScript or maybe you're a new developer,

our projects,

Very clear to me that,

Sometimes something will break and you'll see it spike in your sentry and you can say, oh, okay.

I have Sentry in my front end and my back end, and I will which I love because, Gatsby and all of its Gatsby plug ins. I'll do it. You can do a dash dash filter on your NCU, and you can update anything that has Gatsby in the word, and that will update all the dependencies, that have been updated, and there's I'll just update that. That's probably fine. You know? Or at least backwards compatible in app notifications.

that was a that was a botched update and you can roll it back. That's a really nice

with, And if you use the coupon code syntax f m, you're gonna get 10% off for your 1st 12 months. Thank you, Magic Balve, for sponsoring. Nice.

a new gumption for life And I decided

key.

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,

Welcome to Syntax in this Monday. Hey, Steedreet. We're gonna be talking all about updating your project's dependencies

Excited to talk about And there was a little bit of like if you need to filter based on The free plan gives you a 100 but then you get into all of these little edge cases and all of, like, somebody wants You sometimes need to regen some And that's how most people which if they've seen it This kind of comes back to the Yolo update as,

updating dependencies.

Monday. Monday. Monday.

All of that fun stuff when it comes to your packages in your projects. My name is Scott Talinski. I'm a developer of Bender Colorado. And with me as always is Wes Bos.

And I'm excited to talk about 2 of our excellent sponsors today, LogRocket and

Magic Bell. The first of which is going to be LogRocket.

To the users they happen to. That's right. You actually get a video, a scrubbable video replay with console log, network request, and even your Redux store if you're using Redux.

Normal depth. You can have a hosted version or an on premise version. It's really pretty amazing. Check it out at logrocket.comforward/syntax.

LogRocket is the perfect place to see all of your errors and exceptions happen as they happen

I know I know Stripe does this. I know Sanity does this. A lot of, really good companies will version, a method that you're using I'll update all of those first, major versions we don't no longer use this. If you need to use this like, for an example, I was using,

some, those API keys at the same time that you're running a build or wherever it's being used.

API keys.

to associate like, oh, there's a new lodash, Then I'll go through and upgrade groups minor groups at the same time. So I won't update everything every single thing at once. That is a minor update.

I had to actually update my database version. So this is not a dependency, but it's what's actually running on my database side.

minor version updates. I'm not I'm not exactly sure. I always use the l just because I like to see what the newest stuff is even if I'm not going to update to it. But, yeah, I I love these interactive tools, whether it is the yarn version of this thing, p n p m version or n c u. All of them,

are are just this is the way I do it. There's also another strategy, which would be, like, there's plugins for Versus code that will tell you if there's a new version in your package dot JSON. And you can do it via package dot JSON. It seems like a little more tedious to me, but if you're the type of person who likes to work in that kind of environment rather than running a script or something. Yeah. You can have, like, a GUI. Yeah. That that seems like a viable option as well. So yeah. So those are the tools. Let's talk about approach. So the first thing I do when I do these is I'll run

Fix forward, I think, is the word that a lot of people do. They say, don't roll back, fix forward. And even better, you if you have TypeScript, you can have TypeScript deny the build On your your you need to go to build it. You can run TypeScript first and say, hey, Mark. Part of your your build pipeline.

Should anything go wrong, you can always roll back Boss, and Scott

commit in between each of those those runs. But oh, this is another area. I do wanna say that TypeScript can really save your bacon too. Because if there already major API changes and everything is fully typed, TypeScript is gonna yell at you. It's gonna say, hey.

that specific changes. Yeah. I always create a new branch for updates,

it worked with fifteen, 20 things that are all new versions. So, like, what is your process for even approaching that? So Make sure everything is good. Like Scott says, you have to, like, know, like, is this major or minor? Am I updating my database or my checkout flow? Those are major for me. Or am I updating a dev tool or like a tiny little Finally, after that, once I've done all those major dependencies. I'll upgrade any stand alone stuff.

usually obtuse APIs that nobody ever uses.

What are breaking changes, and they will almost always have a bulleted list of

all minor. And then finally, once I'm done that I'll go through

I've put together some steps as to So this I updated