Placeholder Image

Subtitles section Play video

  • if you're anything like me the first time you opened up a Node Modules folder, you're probably amazed at how many libraries were inside of that single folder.

  • But that's not even a small percentage of the number of libraries that are available on NPM for you to install.

  • So in this video, I'm gonna take a look at the six by far most useful NPM libraries, in my opinion, and these are gonna be libraries like react or angular or viewer express that are more framework based.

  • I'm gonna talk about small libraries that take up a specific use case that'll be useful in any project that you create.

  • So let's get started now, Theo.

  • First library.

  • I want to talk about his date F N s also known as date functions.

  • And this is essentially a library that contains a collection of hundreds of different functions that make doing anything from adding days.

  • Two dates to subtracting days, comparing dates, formatting dates, locales for dates, literally anything you would ever want to do with dates.

  • It makes it incredibly easy, because by default, JavaScript dates are really not that easy to work with.

  • They don't really have that much functionality built into them, so date functions is a library that adds all of that function out that you need into it, and you may be hearing of something called Moment Js.

  • That's another date library that's out there.

  • But in my opinion, and the opinion of a lot of other people date functions is just a better version of moment Js because it allows you to import only the parts of it that you need.

  • As you can see here, they're importing only four functions from date functions, so it allows your bundle size to be incredibly small.

  • And it also allows you to use native JavaScript dates.

  • Moment requires you to wrap your date in a moment object, but with date F NS you could just use the normal JavaScript date object and do all of your operations on it that way.

  • Date F S is also entirely functional programming, so it's really easy to get started with cause all the functions appear.

  • There's no classes to worry about.

  • It's just really straightforward, helpful functions that will be used for any scenario.

  • Also, as I've mentioned, it has internationalization, which makes working with different locales incredibly easy on the front end.

  • If we actually go over and look at the documentation for this, you can see over here that there are absolutely an incredible amount of different functions that you can use in your dates.

  • And they're also incredibly useful because, like I said, JavaScript really doesn't have that many good date functions built into the standard library.

  • The next library I want to talk about is Dottie and V, and I use this in almost every single note project that I create.

  • Wouldn't let you do is that lets you create a local file called dotty Envy, and you can store all of your environment variables in here, for example, your database information.

  • And then you can pull that into your application by just calling required.

  • I envy dot com fig and a load all your environment variables into the process dot g and V variable in Know Js.

  • This is incredibly useful for when you're developing things locally and you want to be able to use environment variables.

  • Well, I haven't manually set these environment variables every single time you run Note.

  • Just having that file on Bill easily change things in that file and share that with other people may exist.

  • Library Incredibly useful.

  • Also, as you can see appear, it has zero dependencies, which means this library is going to be incredibly small.

  • And since you're only gonna be using in development, that's really nice, because you don't have to download a bunch of different note modules just to work with your application.

  • Next, moving on to a slightly larger library.

  • I want to talk about Socket Io, which makes doing Web socket real time communication between your server and all of the different clients.

  • Absolutely a breeze.

  • I have an entire two part series on creating a chat application using this library.

  • So if you're interested in figuring out more in depth about this library, make sure you check that out linked in the cards and the description below, but essentially what this library does.

  • If we go to the documentation here, you can see that all we need to do is set up a very basic server and then inside of that server.

  • What we can do is we can actually send information down.

  • If we scroll down a little ways here.

  • We could just use our Io to create functions essentially that we can call from our client on our server, and then that server can send information down to the client by essentially calling functions on our client.

  • This allows us to make really easy real time communication from our client up to our server and then back from our server, all of our different clients.

  • It's absolutely amazing how easy it is.

  • And you definitely have to check this library out next.

  • Moving on to another really straightforward library.

  • We have you you i d which, as you can see, get 16 million downloads a week.

  • So it is incredibly popular.

  • And essentially what this library lets you do is it allows you to create unique identify IRS U u I.

  • D s in your application with just single lines of codes and has all the different versions of you you I d that you could ever want to use.

  • For example, version 54321 It doesn't matter.

  • You can include whichever version works for your application.

  • This is incredibly useful.

  • When you're working with any form of client side application, we're even a service that application where you need to create unique identifies because you can use this in both knowed as well as front and JavaScript.

  • And let me tell you, I use this all the time of my applications because all the time you need to create unique identifiers, especially when working with react up.

  • Next, we have everybody's favorite fetch replacement Axios.

  • Essentially, what Axl's lets you do is to create Web Request very similarly to how fetch works.

  • But it's so much easier to use and gets around a lot of the got shoes that you have to deal with when you're doing Javascript and Jason related fetched requests.

  • It just does all that back end information for you behind the scenes, so you don't have to worry about it.

  • Also, access is incredibly small when you bundle it into your application.

  • So it really doesn't add much book for you.

  • And, most importantly, is it actually goes back very far for sport aging.

  • See, I eat 10 for example, are e 8.1, chrome seven edge 10.

  • It just has massive support, which fetched doesn't even come close to doing so.

  • If you want to support older browsers, access is a great way to do that.

  • And if we scroll down a little ways you can ceased just how easy the application is, just Axios dot get and you pass it, girl, and then you go.

  • You've already done and get requests, and it's a way easier than doing it with Fetch.

  • And it's all promised space so you can use a single weight if you want, which is incredibly useful with this library.

  • There are many other libraries out there that do some more things to Axios, but they may not be promised based, or they may be larger or not support as many features.

  • Axios Axios has a great balance of being incredibly easy to use, incredibly great on the client side, incredibly great on the server side and just all around.

  • Amazing for creating things that fetch makes difficult and finally onto our very final library.

  • This one is incredibly small and simple.

  • It's called class names, and what class names does is it allows you to really easily combine different class names together, conditionally or whatnot, to make one single class name for your different HTML elements.

  • It's really useful in libraries such as reactive, you angler.

  • Any live brother has a lot of front and manipulation.

  • But you most often see this in react and essentially, as you can see over here, you just call class names that used to single function, and you pass it in a array essentially of your class names.

  • So, for example, we have a class name here, food and bar on this first example, and it gives you the string through bar for your class names.

  • Also, here we can see that you can pass objects as well.

  • And if you have, true as the option that is going to return that class name and down here, As you can see, we have false for duck.

  • So duck does not show up and list down here.

  • That is really what super powerful about this class names function as you can really easily create list of class names based on different options and parameters.

  • True false that you're going tohave inside your application because otherwise you have to do a bunch of nested Terran Aires, which makes it really difficult to create these class names.

  • But this fat function right here, single function, super small takes care of all that for you, and it's just so great to work with short, sweet and to the point those air, my sixth favorite NPM libraries.

  • And if you want to see more videos for me, make sure to check out over here and also subscribe to the channel for more videos of me.

  • Simple.

  • Find the Web for you.

  • Thank you very much for watching and have a good day.

if you're anything like me the first time you opened up a Node Modules folder, you're probably amazed at how many libraries were inside of that single folder.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it