Understanding Semantic Versioning with Real World Examples

[Music] hello and welcome to swashbuckling with code i'm jimmy cleveland and today's video is going to be on the topic of semantic versioning also known as semver there are many systems that use semantic versioning such as ruby since 2.1 and it's a standard for ruby gems if you're familiar with that but in this video i'm going to be covering it under the lens of npm but if you're not familiar with node or npm i still think following along will be useful because the main concepts that i cover are all the same throughout all semantic versioning systems now npm actually has a quick introduction video to semantic versioning and i'll link that in the notification description so if you want to check that out feel free what i'm trying to do is a little bit different i'm going to go into a little bit more depth and hopefully you'll walk away with a really sound understanding of semantic versioning and i'm going to be doing that in what i hope is a practical example by using two major packages in the mpm repository inquirer and chalk so hopefully this will give you a real world example of encountering situations where you want to update your package and how you might troubleshoot that or how you go about doing that so with that out of the way let's get into semantic versioning now i have some time stamps at the bottom of this video in case you want to jump ahead to the actual code segment this first segment is going to be me talking about what semantic versioning is and why you should learn it and kind of why it came about then i'm going to go into some actual code projects and we're going to show examples of installing different versions of packages what all the different symbols and numbers mean and all that and that'll wrap up the second part of the video so a common question that comes up with semantic versioning is why shorter answer of that is without some sort of specific versioning spec in place or a system that everyone complies to when they make packages that they're going to distribute and for people to install there's just going to be chaos and unreliability semantic versioning gives package maintainers and creators a way to communicate what is in each change that they put out some high level examples of that are going to be does this version update include a bug fix that i am safe to update to without changing my code at all even if i don't even have the bug does the new update have a feature that i may or may not use but won't affect the existing features or is it such a major change in the code base that previous users of the package are going to have to change their code otherwise they're going to risk things breaking when they use it these are the major points that a semantic versioning system is trying to address whenever you roll out a package there's three numbers and no more no less the numbers are major dot minor dot patch so a common example of that will be 7.2.0 in which seven is the major version two is the minor version and zero is the patch version if a new bug fix came out the patch version is the first thing to go up because it's just a bug fix and it's just going to fix some previous existing bug that you don't have to do anything about you just install the package and it'll fix it for you so that would be 7.2.1 in this example then maybe there's a new feature that you might want to access that would be 7.3.0 for example for the next bump even if it has multiple new features it'll still be the next number up for the second position which is the minor one finally there's the major version and that's called a breaking change when that updates so this the case would be 8.0.0 if any breaking change would exist in the code base so sometimes a new feature comes along with a breaking change and so that's where you'd have to jump from 7.3.0 to 8.0 because even though you're putting out a new feature it breaks the code so when you see a move from just a minor number just to be clear 7.2.0 for example to 7.3.0 well that two to three in the middle position is saying this is a new feature for you but it doesn't have any breaking changes that we know about you shouldn't you can opt into the feature if you want but you don't have to change your existing code at all to run this package i really think that learning how semantic versioning works will make you a better coder if the concepts are foreign to you at all because it helps you think about your code in a way that you can distribute it to users without breaking their functionality it really kind of opens up a new way of thinking if you're new to this concept where you think okay i shouldn't just you know change whatever i want to add a new feature or to fix a bug regardless if other people are going to use this i should really selectively think about when people use this how's it going to affect their code can i do it in such a way that they can just install it and it fixes their bugs and they don't have to do anything at all then i should probably opt for that path it's a sort of like least resistance here where you want to start with a bug fix if you have a miner okay cool uh you have a new feature that you want to show them and then kind of as a last resort should you do a breaking change you want to try to keep those to a minimum as much as possible because they're scary for people that are updating packages one more quick point on this is that if you do have some new way of doing your code that normally would cause a breaking change you can actually still make that a minor by including the old behavior and then putting a new way to handle the new feature such as a new value in an option config object or something like that then you can flag that as deprecated which means that it's not favorable to use that because we're going to be removing it in the future but it won't break it right now and then you can you know slowly migrate users away from that old behavior so you can get rid of that part in your code base so you can kind of see how thinking in semantic versions really helps you write more robust reliable and communicative code to sum up all those points semantic versioning promotes thinking about your users rather than yourself now a downside to semantic versioning is that it doesn't tell you how much code has changed or even how much code you'll have to change if you're the consumer of the package updating it there are definitely those that have drawn criticism to semantic versioning because of that but regardless it's still a widely adopted system and i don't know of any better ones that are being used in mainstream products currently but i thought that you'd like to know that you know it's not new unanimous there are critiques about it of course as with anything in software engineering so the last point that i want to hit on before i jump into the code and show the practical examples is these special little characters that you might see one is the carrot or sort of an upward chevron if you can call it that and the other one is a tilled character which is a little squiggly whenever you see that the most common default is that carat character in the front of your number so you'd see the carrot 720 for example what that's saying and this is the default in npm is that when you install that package if it ever updates for any reason whether it's through like some sort of npm update or you run npm install or you don't have a lock file or whatever there's various ways that this can happen it will never bump past that major version because that's a breaking change and so that could be dangerous to your code that's why it's the default so that's why you'll see that there if you were to leave that off and you ever see a package installed with just 7.2.0 no character in front of it that's saying this exact version never update it it's only going to be this one now the other one that you'll see which is a little less common is the tilt character and what that is saying is that we're going to be a little more restrictive instead of updating a patch or a minor we're only going to allow updates of patches or bug fixes so i don't even want new features maybe i don't want to risk it or whatever i only want bug fixes that's definitely not as common but you will see that from time to time there's a lot of other nuances of course to semantic versioning as with most things but i'm really trying to hit the major points so that you understand the big picture and so i think it's a good time to jump into the code and hammer that point home with some practical examples for this first example i'm going to walk through making a quick project setup just so you know everything that's going on but we're going to do it pretty quickly so don't worry so we're going to first do create a directory and i'm gonna name it sember example we're gonna cd into that example and then we're gonna do is uh npm init dash y it's just to say yes to everything now one thing that i wanna do here is install this package called inquirer now inquirer is a really popular package it is used to create cli command prompts to where you can in the terminal like give a user questions and they can answer it and then you can get feedback and act on that program it's a really really powerful tool and you're going to see it in action just a moment that's just a brief introduction now normally you would install a package by just typing the name and that's good right but what we're going to do is we're actually use the at symbol and pick a specific version in this case i'm going to pick seven to zero so that is major for the seven minor for the two and patch for the zero now i'm going to have an example of each of these so don't worry about that as we walk through this just to reiterate that's what it is major minor patch that's the thing that you want to ingrain in your brain so i'm going to install that real quick and then i'll show you it in action now if i jump over here to my browser i have npmjs opened up here and you can see that this is a very popular package 21 million and i've selected it for that reason because it's such a common package that it's a real world example that's commonly used and you'll be able to do this yourself and follow along and i imagine for the foreseeable future that's not going to change so hopefully that makes it pretty practical let's jump back over here and let's open our editor now in this we're going to have a package json and the thing about that it's interesting is even though we installed 720 you'll notice that it did that but it put this little carrot and what this is saying is that whenever you do an install or an update it will never go past the major version because that's breaking changes but it will go past the minor and patch so if you look at package lock json and this will be really similar to yarn lock we can actually do a quick search for this package we'll do enquirer and you'll notice that with inquirer here under node modules if you're using a older version of npm it might be a little bit different format here but this is pretty similar so it says we have 720 installed it's actually actual version installed i'll show an example where that's not the case but for now we'll just keep moving on with this example you'll notice that it also has these dependencies so it has its own dependencies and they'll have their own dependencies and that's how the whole thing works so it's snapshotting each of these versions and you'll notice that they're all using this really common default where it's saying hey i won't go above a major because that's a breaking change but i will auto update miners and patches so if the first time that you installed this you can see this is an exact version actually because it doesn't have that little character the first time you installed this let's say that uh low dash it had a lower version of low dash but there's a newer one out that is still four it'll actually update to the newer one so package locks are kind of their own beast and i can't really cover that in this video it's a little bit out of the scope of this if you really want me to i do have an older video um that i'll link in the notification that kind of covers package lock a little bit but if you want me to recover it or refresh it do some new stuff just let me know in the comments if you're really interested in that so going back to this this is one way that we can look up our version but we can also do a really cool command here where we can do npmls and that will actually list out all of our packages that we've manually installed not their dependencies unless you use a flag let me show you that real quick if you do dash dash depth you can do equals and you can pick the depth so in this case with depth of one will show all of the immediate dependencies and if we were to do depth of two it kind of gets a little crazy and so on and so forth dependencies of dependencies and all that so let's go back up to the root one now if you do npm ls you can see that and it's it's going to list out the actual version that you have installed not the one that you picked okay sometimes that's confusing to people and why it would differ is depending on if you use the care or the till which we're going to get into but for now you can also just really quick so you know there's an alias npm list if that makes it a little bit easier you can also do this though you can do npm view which is really interesting and if you pick a package you can do enquirer and this is one that's like let's say it's not even installed i'll show you that um it will list out a lot of interesting stuff about it so you'll notice that when we do this it says inquire eight one two that's typically gonna be the most current version so we're all the way back on seven two zero right now it'll give you some keywords and it will also like give you some information here i don't think i should go over that right now but the important part is that it will list out the dependencies which is really useful and the lovely maintainers who keep this project going of course thank you to all of them and then finally it'll have a tag and this is where at latest will come into play a little bit later on so keep that in mind for now so jumping back to our example that's how you can view a package and kind of see what the latest version is and all that stuff what i'm going to do is go into here and our project and do index.js just to create a quick little entry point so to save some time here i'm going to paste in some code that i've already done and i'm going to walk you through it really briefly but if you've never used inquirer before we're just going to import it here and of course this is a require syntax and not import syntax because i'm just trying to make it simple for this current version of node we you could do it the other way if you want we have an acquire we have a prompt command that you're going to chain onto it and essentially what that's going to do is prompt the user for something you're going to pass it this like array of objects of all the things to prompt them in order and there's a different way to do it but we're going to stick to this one and then the highlights are that you have the type of prompt that's going to be displayed as you have the name of it which you're just going to use to keep track of it the message that you'll show to the user which you'll see in a moment and then the choices which can be a few things we're going to do an array of strings so i'm asking them to choose their character class and then i'm going to give them this list of options and then after that i'm going to give them a checkbox version to choose exactly two proficiencies okay and then finally at the end it's a promise so you can chain on to it don't worry about this for now and you can log out the answers and you can catch an error okay if you don't quite follow all that that's perfectly fine you'll see an example i just thought you might want to know kind of a little bit about what's going on so what we'll do is we'll do node index.js to run the program and you'll see that the program has a nice little prompt for that little bit of code which is really cool and we can kind of arrow down through this and what i want you to pay attention to is that it's looping through all the lists and so this is pretty cool right off the bat um well let me get into that in a moment actually let's just pick the options now so i picked druid and then right now i can pick you know one option and press enter and it'll wait a couple of seconds in the code that's what i've programmed and then it's going to say please choose exactly two proficiencies and so i'll do sure i'll do two of them i'll just show you that if i do three it still won't allow that there you go so go back to that it takes a couple seconds and then it prints it out it's a really really simple program you could do whatever you want from there but that's not the purpose of this video what is the purpose is semantic versioning so remember how i mentioned that that program loops let's run it one more time and see that so the program loops through and if someone's not really familiar with this it might be confusing you might be going through and being like um wait did that loop did i already see this one sometimes it's kind of nice in some programs to for the list to just end so we've been wanting this for a while and then through a blog or a friend or however you figure this out we learn that inquirer has a new feature where you can pass a special little property that makes the list not loop that was hard to say now let me show you that in their docs real quick so if you go to inquire right now this is the latest version which is ahead of where we're at but if you type loop you'll see that there is this loop option so this is current but let's go back in time for just a moment here if you go over to the repository you can click this and what's cool about this is there is a releases section in github and this is up to the maintainer to you know keep this updated with information or whatnot but a lot of the big projects will have something like that so this is the current version let's scroll down and go to the next a couple of times to go back to back in time to where we are pretend that we're in current time and seven two o was the latest here we are at seven two oh and then also let's go back one and there's a seven three o out now remember that's a minor the three and they have a new loop boolean for list types this prevents the list from looping when reaching the top or bottom of the selection that sounds pretty interesting so let's upgrade to that so if we go to our terminal i can do npm i inquirer and i could do at and then i'll say that example exactly so seven three oh we did seven two o before another way that you could do it just so you know is you could go into your package json and you could like manually change this to a specific version but i usually prefer to use the command line i think it just does a little bit better job but that's up to you you can play around with however you like sometimes the versions are a little bit finicky and how they work but once you mess around with them a little bit you'll get the gist of it so i'm going to install 730 and just so you know as a quick little hint remember how when i installed 730 it automatically did this little up carrot that says it'll upgrade to whatever version uh as long as it's not a breaking change you can actually do dash dash save exact as a flag and check this out when i go back over to here it did not put that so if you really want to stick to one version i usually don't recommend that but there are times when you do want to do that then that's how you would accomplish that through the command line let's undo that let's just do this if we do mpmls just as kind of a habit you could see that that's the version that was installed so now we can go back into our code and we can add this little flag here because we got a new feature and we'll say list no loop not nice false i'm gonna do the same on both false and then what we'll do now that we've done that is let's just try to run the program and see if it worked so if i press up it doesn't go up which is good before it would but now if i press down oh that's interesting isn't it it gets to the very bottom but it still shows the rest of the list which i guess is okay um you know it doesn't let them move on but i feel like it's still a little bit confusing right so we'll say all right future works as intended let's check this next one out what happens here oh this one just like keeps looping so it didn't even work for the checkbox type so let's pick r2 you know close our program so what's interesting about this is whether this is real time or not what's kind of going on here is they have implemented this but they have a bug in it okay and this is super common so if they have a bug and they want to fix it but it's going to fix an existing feature but not create a new feature what should they do what should be the version well that's where a patch comes in right if we go over here to the previous step this is going you know ahead in the future we have a seven three one and a seven three two and you look at the seven three one for now it says fix the loop false option in the list prompt okay so here's what we could do this is where i'll show you the patch only version of installing something which is kind of interesting we can go over to here and install this program once again and just install this patch just to see now we install the patch and then we'll run the code again and we can't go up so that's still working fine but when we get to the bottom of the list look it doesn't show the rest of the stuff so that's a an effective patch it actually fixed it like that and then if we come back to here oh no it didn't actually work for this you know they only fixed it for the one thing unfortunately well let's go back to that because we did see that there was another patch after it and it says fix the loop false option in the check box prompt which we just so happen to have that problem in so let's bump one more time and in fact at this time i'm going to do a tiny bit different just to show you a different way if you use this tilled little squiggly character here and then you say i'll even do 730 what this is going to do you'll see is after installed if we do npm ls notice that we said i want 730 but it did 733 and if we look in our package json you'll see that that little tilt character is there so this is a special little character you won't see it too often but every now and then you will that means only update to the highest patch version don't update to a minor so at this point it's determined that of all the packages that exist right now in time for this that are not above a minor of three and not above a major of seven there is a seven three three is the highest version you notice it doesn't list it here that's the thing i mentioned that's kind of confusing to people sometimes because this is your target this is saying this is what i want roughly i'm okay if you give me any number here for this patch version and that's what we got was 733 okay so let's run the program again go down to the bottom cool see it starts at acrobatics oh look at that it actually fixed it cool boom boom boom wait a couple seconds which will matter in a moment and there you have it so that's an example of showing um we did a minor bump and what we could conclude from that if they did their job publishing the package properly you know bugs slip in sometimes so that's how it goes but with the minor bump uh it's just going to be a new feature so that's we did a minor bump so that we could get this access to this new property right and then we had two patch bumps that we needed to do in order to fix these bug fixes if we go back to this just one more time and we go previous there's going to be one more you'll see 733 before 800. okay so this is the highest patch and minor version that exists okay another way that you could do that without actually going to the repo though is you can do npm view and you can do shorthand for this it's v and then you could do enquirer oops and you can do versions so view versions and what that will do is print out all the versions so in case you wanted to see what ones exist you know just through the command line you can do that which is pretty neat so 733 is our latest you can also do the same thing and do json some people prefer this because it always prints out the full list and it's in this kind of single column list format but i usually do this since it's a little more truncated it just depends now how you actually discover these new features is sort of a pandora's box to a degree it really just depends um you might be subscribing to some sort of service or blogs or twitter or whatever it is that like you know kind of gives you some sort of notifications of new features or whatever you might just hear it or what happens commonly is you'll do some sort of package bump for some reason and you'll notice that it bumped up a version and then you might want to go read about why did it do that you know what's in the new version i don't really have a better way to keep on top of packages um so if anyone does have any suggestions go ahead and show it in the comments and we'll be grateful but i just wanted to show you that like what it means the patch and the minor and now we're going to move on to a breaking change example so if we go into this code here we'll notice that inquire 8 doesn't give us a ton of information on what happened but it does say that it drops support for node 10. now this is a really common reason to be a breaking change all right so i'm going to show you an example real quick of upgrading to 8 on an older node version to show that not working so right now i'm using nvm you might not be able to follow along here if you're only installing one node version and you don't have a version manager that's okay you can see it through here but if you wanted to follow along probably easiest to use a version manager like nvm or in so right now i'm currently on 14 15 1. all right now what i'm going to do is mvm use and i'm going to do 8.17.0 because i have that installed all right now i'm going to have to reinstall these packages at this point and it should run fine if i were to run this again because i haven't upgraded just yet just to show that okay so currently all my stuff is supported you notice that i don't get the syntax highlighting here which is kind of interesting so i wonder if they added that in a newer node version now why someone might you know do this right here which is drop support for a node version because when new features come out in node you know sometimes you'll keep deprecated which means you'll keep the functionality but you'll have to add some extra code for like background support while you upgrade and eventually what deprecated means is that you're going to stop supporting that at some time in the future so if you ever see that deprecated message that's what they're saying they're like this i'm going to drop support for this at some point in the future so if you update your package expect that you might lose that you probably want to get ready for that sooner rather than later now because note 10 would have a bunch of new stuff from the old node version they might want to just use that stuff natively and eventually you know everyone kind of needs to stay current so that's why they might do that just a real quick summation so let's update to eight okay so npm i inquirer at let's actually just do latest okay so you can see that tag so you can actually do at latest and that will do if you remember now that installed if you do mpmv oops npmv uh inquirer why can't type ever you'll see this disk tag latest this is really common way to just install whatever they have flagged as the latest version so this will give us eight one two okay and if we do npm ls it'll list them all out oh i wonder if an older version of node it doesn't actually truncate those that was kind of interesting well either way let's try to run our program nodeindex.js and you'll notice that we immediately just get some sort of error when we try to do it okay looks like they're using this catch block here and it says unexpected token this brace so we probably didn't have that type of functionality we can guess from an older version of node so what we need to do is upgrade our node in my case i can just switch to 14 15 1 right i'll install once again and then i'll do node index.js and my program works just fine right now what's cool about that is did you see that little loader wasn't that neat so this is kind of an interesting example i should have explained this a little bit beforehand but i think this showcase it fine um showcases it fine so if i pick you know druid i want to be druid and let's say of course uh as a druid i want to be proficient in animal handling and acrobatics why not so i'm going to pick these two options and look what happens when i press enter you see that little loading spinner we didn't used to have that feedback and so this is sort of an example of at some point let's find that if you go back now displays a loading spinner while asynchronously filtering over validating data cool so this is an example where you want to upgrade to a major version because there's a new functionality we really want that loading spinner that's awesome but it's a breaking change right and so we would have to kind of figure out all right well what is you know what's the breaking change here so the best way to do that is to look for where the actual major bump happened and then this case is it's going to be the first time after seven since we're on seven something we moved that that first number up to eight and so that's where they're gonna just list any breaking changes if they're maintaining the package properly and documenting it sometimes there'll be other ways that they document how to deal with a breaking change if it's a major version it might be in a post of theirs if you just search it up it might be in the readme if it's brand new but a lot of times if i don't find it really easily this is where i'll look and again that's if you go to just the plain old repository from npm or whatever there's a releases tab here on the right it might be different in the future but usually just look for releases and then you can go find that specific release so that's one example of a breaking change it's a really common example where the node version updates but really all you had to do was update your node right node version let me show you one more example of a breaking change that actually forces you to change your code okay so fast forward through time real quick and i've created a quick project here just to speed things up that's very simple and it's using this package chalk a lot of you will be familiar with it it's a console.log printing solution that will color your logs with different awesome little colors okay if you look at my package json i only have that one installed and i'm starting at 113 right so i'm going to show you this program but to briefly walk through it i have a print method that i'm using and really all this program is doing is you can normally do chalk.magenta to print out a magenta text which you'll see in a moment and then i also have one that just prints out this like generic thing so let's say i'm like logging a bunch of stuff or whatever it is and i want to be able to color things differently with chalk what this print thing does is it uses this chalk has color method to see if the text is colored and in if it is uh if it does have a color it will just print it out the way that it is else it'll make it green that's it so let's go back to the terminal here and in this project you'll see that in the first example i print out purple magenta and then the second one i print out green and that's exactly what i expect when i look at the code here so i decided there was a color keep the color otherwise if i didn't give you a color make it green it's pointless but it'll illustrate the point so now let's actually go and look at the chalk npm package chalk we can go to this package we'll go to the repository for this point go to releases they're already all the way up to four one two so we're really behind at this point but releases i clicked on four one two i actually need to click release sorry all of them this is a really awesome project they document it super well just so you know so this is i wanted to show this because not only the code version of a breaking change but just the the maintainers of this are awesome okay so um what we'll actually do is we'll go back to one more sorry and we'll find two so here's a major change they have this awesome gif and everything and this is the really awesome moment where chalk introduced true color support which is really really fantastic you'll see i'll give you a quick little demo of it but the point of it is that one we want this new feature we want this like tons and tons of color range and all that type of stuff and i'll show you that in a moment but what they do is they list breaking changes here i love this and so with this breaking change you can look through and it requires no js4 so pretty common what we just experienced but also they removed chalk dot has color and we were using that and that's really unfortunate for us right so let's show you that breaking our code real quick so we're going to bump this up here we're going to say npm i i'm going to install chalk and but we're going to do that at 2.0.0 let's say and we really could just you know do whatever range in fact let me show you this there's one more command that you want to know so you actually can use um this little chevron here to say um how about go ahead and grab me anything as long as it's not above three for a major version when i install it okay this isn't going to work for me just so you can see this is a common problem with zsh and some other terminal shells where it's like thinking that it's some sort of matcher here so what we're going to do is we're going to escape that character if you ever have that problem that's all you have to do and that'll work so now when we do mpmls you'll notice that we didn't install 200 like we normally would have if we left that off we'll actually install two four two so we're saying hey i want the latest version as long as it's not higher than two cool so now let's run that program again it breaks right so chalk has color is not a function sad okay well let's go back to the docs so they did tell us that so um let's kind of like simulate that we're in the real world we heard there's true color support and we're like yes give me that now and so you go and you install that and then you get this error so what i would do is i would go and first i'd try to like search up the error real quickly if i don't find anything fast i would go right to the repository and look at the versions and be like okay so i've got like two version two or whatever i'm gonna immediately go to where the breaking change happened because that's where the break should be not promising it always is but it's where it should be and it's the fastest place to look and then here you know if they're nice they listed it out oh cool use the has ansi package directly instead i love it okay so i'll click that they even give us a link how cool are they and when you come into here there's this package and i'll be like all right well i guess it looks like i can just call this now so let's try it so i'm going to do npm install has ansi i'm going to go over to my code and i'm going to import that so const has and c equals require as antsy and then i'm going to switch out this chalk as color because that's the thing that's broken for just has antsy and see if it works this is really how i develop things um sorry if it's disappointing to you but that's my mood okay that didn't work unfortunately must use import to load an es module oh that's really unfortunate so we're using cjs right now and then they have this as import so it looks like their current version is actually only supporting es modules which leads you down in a whole nother rapid hole so let's see what version that we got installed for them let's do a real world thing here so mpmls we have 500 okay so let's go to their versions and see okay require node.js 12. this package is now pure esm while we got lucky there right so maybe if we go back to four we'll be fine right so let's do this um npmi has ansi at and then i'll i'll let it be anything four so four oh oh four and up is fine with me npm ls yeah we're good um let's try it now and it worked look at that that was real world that wasn't planned but pretty cool so you can kind of see that in action it's like oh well things are crazy and obviously i had a little bit of knowledge about the es modules thing so i kind of knew where to look but the point is that i can look at what version that i'm at currently with this mpm ls i can be like oh i've got 5-0 let's see what the breaking changes and that will lead you down the you know trail of breadcrumbs to find what your problem is it works for me a lot of times sometimes it doesn't but you know you got to have a lot of tools in your belt to solve these kind of problems so this fixed our problem and that shows a breaking change that you know we wanted a new feature let's actually add that new feature real quick because you know what's the point of doing the the bump let me show you this so i'm going to do an extra thing here and i'm doing some crazy stuff but really what i'm trying to show here is that they have this like level that they added for different levels of color support so in this case it's like no colors this is a 16 colors which is what they had before this version 200 and then this is 256 color support which is kind of common and this is true support true color support which is like 16 million it's some crazy stuff now you're going to see the actual difference because notice that i'm logging the exact same color in all of them just to kind of show this watch this is cool check this out so this is true color right this is the actual color if we were to like hex it and you know take that color and put it in you know the browser that's what it would look like but you can see that it kind of like tries to pick the nearest one that it supports when it's only 256 colors and then when it's 16 colors it's not really even close unfortunately so this is the strides that they've made just to kind of showcase that this is the new feature that we wanted so we wanted this feature and we had to install a breaking change to get it and then it broke our code and so we had to go and look and see okay at least they documented that has colors not supported anymore how can i find that out and they were nice enough to give us a link to that it has its color package or has ansi package that's what it is so now you've seen a breaking change that's a simple node version bump which is really really common and also a breaking change which is a code change now as you've been seeing all of this i hope that in the back of your mind you're kind of starting to see how to actually develop software in a cool way like notice how nice it was for us to know and be notified that hey when you want to get this feature you're going to actually have some breaking changes make sure that you check and see if you have to update your code sometimes you won't and a lot of times you will but they should have some documentation around that and so now when you're developing software throughout your career i hope you'll think about that pattern there are other patterns out there of course but this is at least a nice one that has some sort of structure that says when you write code when you make a change you have to think about your users am i going to break their stuff i probably shouldn't do that right away you know let's make this a patch if we can let's make this a minor if it's a new feature and not put any breaking changes or if we really have to if we feel like it's just too much work for us or we want some new functionality or whatever it is there's a lot of reasons for it we'll make a breaking change but at least they'll know that it's that and we should document it we should be the cool developers that let them know hey if you want this new feature just so you know you might run into these things we broke these things it is a breaking change which means that your code might have to update or you need a new node version or something like that really this just helps you become a better more robust software developer by just learning how this thing works semantic versioning and incorporating that in how you write code especially if other people are using your code and consuming packages and all that but even if you're not using packages i think it's still a good way to deliver code in general you know you can document it however you want but the point is you selectively always think when you make code updates that anyone's going to use you know what kind of change is this is it just a little bug fix is it a new feature or does it actually break some existing code if people use it and we should notify them i believe that will sum up this video i hope that this practical example of some larger used packages that you know are used by tons and tons of developers every day was a useful tool in seeing exactly how they distribute their packages and how you can go about troubleshooting breaking changes when you encounter them but maybe even more importantly while you're here you get the gist of semantic versioning and what those little numbers mean and the couple little special symbols in front of them thanks for watching and i hope to see you in the next one

Channel: Swashbuckling with Code

Views: 506

Rating: 5 out of 5

Keywords:

Id: 1zBzkT7QCmA

Length: 41min 16sec (2476 seconds)

Published: Mon Aug 09 2021