849: How to Pick a JS Package

You’ve got a project, and you need the right tool—but how do you know if that JavaScript package is the one? Scott and Wes guide you through finding and validating packages, from checking NPM to scoping out social proof, so you can pick tools you can trust. Show Notes 00:00 Welcome to Syntax! 00:29 Brought to you by Sentry.io. Take The Pledge 01:44 How to find a JS package. 02:56 Searching via NPM. 03:28 Searching via Socket.dev. 06:02 Searching via Reddit. 06:24 Searching via Perplexity. 08:31 Searching via Google autocomplete. 09:25 Searching via Awesome repo. 09:51 Searching via social networks. 10:47 Searching via established projects. 11:19 Evaluating the quality of a package. 12:02 Validating via GitHub Issues. html2canvas. 13:58 Are there types? 15:16 Validating via Socket. 16:15 Validating via Bundlephobia. 17:15 Validating via the docs. 17:55 Validating via GitHub Search. 18:14 Validating via GitHub Insights. GitHub Network Dependents. 20:19 Validating via the package.json file. Syntax Episode 563. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax in This Monday Hasty Treat. We're gonna be picking packages. We're gonna be talking about how you can pick a JS package and how you should look, what you should look for in a package and what types of things you might be wanting to pay attention to before you go ahead and NPM install that thing and have the dump truck come up and just dump a whole lot of who knows what in your application. My name is Scott Tolinski. I'm a developer from Denver. With me as always is Wes Boss. What's up, Wes?

• 0:27Wes Bos?

  Hey, not too much. I do want to talk about the Open Source Pledge real quick, though. This is an initiative that Sentry is heading up. But what it is, is if you are a company that uses open source software, it's time for you to pay your share, right? And there's opensourcepledge.com and all these really cool companies are pledging per dev how much money they are going to give. So for example, Sentry give $500,000, which is $3,700 bucks per dev. And there's a huge list of different companies on here. Volt, GetButler, Valtown, Larevel is on here, Stackblitz. It's really cool to see.

• 1:11Wes Bos?

  And along with this, Sentry has put up some billboards, which with the CEO, the CFO and the CTO, we'll try to put some images up on the screen of it. But what do they call this? CEO is the Chief Excuse Officer.

• 1:27Scott Tolinski?

  Yes.

• 1:28Wes Bos?

  The CFO is the Chief Freeloading Officer and the CTO is the Chief Tightwad Officer. And these graphics are amazing. I kind of want a shirt with them on. I'm kind of hoping that they make some of those. But check it out, opensourcepledge.com. Tell your boss to take the pledge.

• 1:44Scott Tolinski?

  Okay, so let's talk about the scenario here. What's the scenario? The scenario is you need a library utility. You need to do something in your JavaScript. You need to tell if a number is even or odd, right? How are you gonna do that? That's just a joke, folks. But you need something in your application. How do you determine what is good enough to grace your codebase with? What can you add to your codebase and not have it potentially be one, out of date, two, bad practices, three, something unnecessary, et cetera? How do you pick a library or a package? Where do we even start for that type of thing? What's your strategy Wes? If you need something, what do you, what do you reach for first?

• 2:24Wes Bos?

  I go through this all the time, which is like, okay, I need a library. For example, the other day I needed a library that did a red X to get all emojis out of it. Right? Or you need a library that has a list of all of the countries and their country codes. And then you need a couple of methods for finding those countries based on their country code, or, or getting the emoji flag for that country code, right? That these little utilities I find myself needing all of the time. And when that happens, I usually, I go to NPM and I search for what I want. And I'm just like, I don't know, there's 20,000 of them on here. I don't know which ones are good. I don't know if they're secure. I don't know if they actually have the features that I want.

• 3:09Wes Bos?

  So I thought like, let's talk about our approach to both finding them and as well as evaluating it. Because finding them is, is half the problem, right? So first of all, yeah, yeah. Yeah. So what I'll do generally is I'll go to NPM and then realize, oh yeah, the NPM search sucks. And I'll go to socket.dev. So NPM, when you go to search for a package on NPM, like, let's do my country one. I'll just search country code on, on NPM. The first one is INTL tell input. And then it gives you these little bars, which is PQM. And I don't know what PQM is. I don't know if those bars are good.

• 3:54Wes Bos?

  What I do want to know is everything we're going to talk about today, to evaluate it. But like, I want to know, like, when was it? Uh, I guess they, they do show you when it was last updated, but I want to know, like, how many people, what's the most popular ones? You know, you can sort by popularity, I guess, but like, show me. Are these getting 100 downloads a month or 300,000 downloads a month? And on top of that, the search is just not very good. So I have switched to using socket.dev, which is for Ross, his company. He does a lot of dependency, security things. They'll analyze every single NPM dependency. And if you go and use their search, I find that their search is, is quite a bit better.

• 4:39Wes Bos?

  As well as it gives you the information about supply chain security. They have a quality metric that they calculate based on a few things. Has it been maintained? What does the license look like? And I just find it to be a little bit better. I still wish that it showed you how many downloads per month, because that's, that's a huge stat for me. But I kind of, I mean, I should, I'll message him.

• 5:04Scott Tolinski?

  Yeah, DLPM. I personally, I would use socket.dev as my second step. I would use socket.dev to, to evaluate, to help me evaluate. Because it does show you a lot of really good information from maintenance, quality, vulnerabilities, license, supply chain, security. Like, it gives you all that stuff. But like, for instance, I just typed in React State into this. And on the first page, zoo stand, then React stately util, mobx, and then five React stately packages, and then Joe tie, and then eight more React stately packages, actually 10 more React stately packages. So before we get to like, something like X state, React, and then 10 more React stately packages, React stately, why you got so many packages?

• 5:49Scott Tolinski?

  What's going on there? I've never, I don't know anything about React stately, but now I see that there's 10 billion React stately packages. That's wild to me. Either way, it, it kind of makes it a little hard to get to some things. So here, let me, let me give you a, an option that you might not consider or have considered before, that I've found to be very good for me. Well, at least I'll give you two options, one of which that's not as good. I'll go to Reddit and I'll search for stuff on Reddit. People have opinions, people post about it. You see something modern, people will give their direct experiences about it. It's, it's always hit or miss. But here's one that you may not have considered, perplexity. Perplexity.ai, we've talked about it before, but it's a, it's like a AI search engine.

• 6:33Scott Tolinski?

  They, they do their best to surface links, but also give you kind of a. LLM, you know, and the reason I like perplexity is tends to be very up to date and it's good at interpreting language in that sort of way. So for instance, I just said, I need a modern JavaScript library to parse and query a CSV. And then it says, here's Papa Parse. Papa Parse is actively maintained. It has browser and node support. It's fast. It's feature rich. And then, of course, I then went to, I went to socket.dev and I do the

• 7:09Scott Tolinski?

  same thing. Parse, uh, man, I keep, I want to say CVS, CSV. And Papa Parse is the second one there. So then I can take a second look at it. There's another one, CVS Parse. There's FastCV Parse, whatever. But either way, I found that the perplexity AI does a good job of finding the things that people are using because it is, it's kind of like an AI search engine. But it does a largely a good job of, of being able to understand what people are talking about and using.

• 7:40Wes Bos?

  Yeah, that's, that's a good point because I had kind of stopped asking like ChatGPT for these things because it's, it's still what, 202021? So a lot of the suggestions are kind of out of date. And I thought like, no, like, I want to know what's happened in the last year or two. What are people using in the last couple of years? So that's a good, because perplexity also takes search engines into account, right? And it's constantly updating itself.

• 8:10Scott Tolinski?

  They'll give you, uh,

• 8:11Wes Bos?

  Or it is a search engine.

• 8:13Scott Tolinski?

  It is a search engine. They'll give you links to back this stuff up. So it's not just like an LLM spitting out. It's giving you,

• 8:20Wes Bos?

  I like that.

• 8:21Scott Tolinski?

  Like, here's a blog post. Yeah. JavaScript CSV parser comparison. And so then you can click on that if you want to read more or something like that. So you, you can get where the LLM is getting its information from.

• 8:31Wes Bos?

  Yeah. You know what I'll also do when I want to find like maybe, oh, maybe there's a better, a newer alternative to something. I'll often just go into Google and just type like, for example, moment JS, right? You I'll just type Moment JS verse and then immediately you can say versus date functions, day JS, Luxon and date, right? So, oh, immediately have four other things to do a quick little research into. And then also you can just search that and you can often find like a Reddit thread or something where somebody is giving their two cents on the differences between X and Y.

• 9:09Scott Tolinski?

  Yeah, so I just actually, I went, just to also follow up on that, I went to perplexity and I said, what are Moment JS alternatives? And it says, day JS, data FNS, Luxon, uh, temporal API.

• 9:23Wes Bos?

  That's a good tip.

• 9:23Scott Tolinski?

  So it's good.

• 9:24Wes Bos?

  Yeah. I like that. I'll also often look for like an awesome list. So there's, if you're not aware of this, on GitHub, there's often just a GitHub repo full of awesome dash whatever. So awesome React state management, awesome Node JS queuing alternatives. And they'll list out all, everything in, in the world. And it's great to just kind of peruse really quickly, kind of see what the landscape looks like. So a big fan of that, as well as, I'm a big fan of just asking people, right? Go on Twitter, go on Discord, wherever is that people hang out. People love to give their two cents on, on what is, is good and what's not good.

• 10:05Wes Bos?

  And also people ping Scott and I all the time about like, hey, what should I use for local first? People ask Scott this all the time because he's had like eight episodes on it. What should I use for local first data management? And then Scott goes, well.

• 10:20Scott Tolinski?

  Yeah, well.

• 10:20Wes Bos?

  Cause he's tried them all, right? And he's, he loves to give his opinion on that.

• 10:24Scott Tolinski?

  I do. And it's actually so funny, I was just doing my, my conference talk at Svelte Summit, which was on that very thing. And Swix was in the chat and he was just like, I'm here to find out what the libraries are that I should be paying attention and, cause I'm going on and on about, you know, the, you know, the basics and intros. And then like as he types that, I go, well, now let's talk about the libraries. It's like perfect timing. I do love to talk about that stuff. You're totally right.

• 10:47Wes Bos?

  Look in established projects, package.json.

• 10:51Scott Tolinski?

  Yep.

• 10:52Wes Bos?

  Or go to. The like dependencies tab on GitHub and you'll be able to see what dependencies they are using, or often the opposite, which is if you are checking out a package and you say, is anybody using this? You can do the opposite, which is who is using this package? And you can, you can do a quick look at, oh, wow, some very big projects are using this. Or I actually want to see how they're using it. And you can dive into the code and see how that works.

• 11:20Scott Tolinski?

  All right, let's talk quality now.

• 11:22Wes Bos?

  Yeah.

• 11:22Scott Tolinski?

  How do we evaluate the quality of any sort of package? Where, where oftentimes, I know that people can recommend things or things get used for a long time, but how do, how do we know that one, that it's being maintained, or that people care about it, or that the community has vetted it or used it? I know that there's, at this very moment, there's like drama going on because some starter kit developer has been selling a ton of his starter kit and has like really bad security on it. So how do you know that you're not just like, you're pulling in stuff with really bad either security, or it's out of date, or other people aren't using it, it's been abandoned? A good place, and honestly, one, one thing that I always do with any, any package, before I install it into my application, no matter

• 12:07Scott Tolinski?

  what, is I go to the GitHub issues. It can save you so much time. For instance, you might see a package that looks really good, you install it, and then you hit a bug right away. Then you go to the GitHub issues, and sure enough, that's like the number one GitHub issue. There's 400 people saying same, same, plus one, you know? And you could have avoided that had you looked at that and said, okay, well, there's clearly something going on here. And the creator's not responding to any of these, they're not involved, it hasn't been updated in six months, and there's clearly an issue. There might just be a problem with this, you know?

• 12:40Wes Bos?

  I will almost always go to the GitHub issues and there'll be like, is this thing?

• 12:47Wes Bos?

  Dead or like, what's the status of the project? And if there's a million issues, and this is no shade to the authors of these packages because they owe you nothing. But when you're making your choice, it's, it's kind of important. So sometimes you'll find somebody who makes a post and says, hey, this thing hasn't been updated in three years. So for example, I use a package called HTML to Canvas. And what that allows you to do is to lay things out with HTML and then essentially take a screenshot and convert it to like a JPEG. And I use that for my video overlays. I have a couple of tools I've built on it and my background patterns for my videos. And I was hitting like an issue with it. So I went to the, went to the issues and then somebody, somebody had an issue that

• 13:32Wes Bos?

  says, what are you using instead of this package? And then there was a couple of really good suggestions, including one guy who forked it and was now fixing bugs and adding features to it. And so I was able to find a really good one, whereas like I would never have found that thing if it wasn't for the GitHub issues, because like, that's not going to come up in, in search. There's not going to be a dev.to article on the top HTML to Canvas libraries, you know?

• 13:58Scott Tolinski?

  Yeah. Here's another one, and this one always gets me a little bit annoyed, at least now I'm become that guy if a package doesn't have types installed and I have to do that, install them from directly typed or whatever. Man, that's just kind of annoying. Definitely directly. That, that to me is like something that is annoying, but as long as there's types that do exist for it, I will use it. Definitely type shows that people care about the package if it's not like from the, the creators directly. But if your package doesn't have types created for it, and then what do I gotta do? I gotta cast everything as any, or I have to, you know, make the whole package as any? That makes working with it a little frustrating.

• 14:38Wes Bos?

  Not having types is a major flag to me because it means, and not that the-

• 14:45Wes Bos?

  Author has to use TypeScript, but it means that nobody in the community has also needed types for it and stepped in and created a definitely typed repo for it. So every now and then, there's a kind of a, if it's so small that like, nobody has done it, almost always, you could just go to the GitHub, copy paste the actual utility yourself and put it in your own, uh, put it in a file yourself. You don't need to install it, create a dependency.

• 15:11Scott Tolinski?

  Yeah, sometimes I'll do that directly if it's a single, especially if it's a single function or anything.

• 15:16Wes Bos?

  So socket.dev gives you metrics on if it thinks it's a good package or not, and that will give you supply chain security. So its dependencies, what do those look like, right? And it'll give you a quality score. It gives you a maintenance score, which is not always amazing because some packages literally don't need to be maintained. They are so simple that they are, that's it. They're done, you know? But others, yeah, they need to be updated and whatnot. So they'll take, I'm sure they take GitHub issues and whatnot into, into account as well. And they'll also look into the license, which is kind of interesting because if you have lawyers at your company and you use a package and then, oh, shoot, there is no license

• 16:01Wes Bos?

  for this type of thing. I've had, I've had stuff in the past where I open sourced it and someone is like, hey Wes, like you need to put a license on this thing. Otherwise, I can't use it at my company. Oh, I forgot about that. So pop it in there.

• 16:14Scott Tolinski?

  Yeah, totally. Next one here is bundle phobia. If you haven't seen this site, it tells you a lot about a package's size. So like, for instance, I have a link to ZooStans version 5, and you can see that the current version of ZooStans is 1.2 kilobytes and then it's 588 bytes minified and G-zipped. And I love that they give you the minified and G-zipped value of that because that's really what you'll end up shipping at the end of the day, or at least you should. And then it tells you directly how long of a download it'll take on 3G. So this package, if you add this to your application, it is adding one millisecond of 4G download to your bundle. I also love that it shows how it's changed over time.

• 16:56Wes Bos?

  Yeah, that's cool.

• 16:57Scott Tolinski?

  You can see some packages literally bloat over time, but from version 4 to version 5. Zoo Stand was like a third. It was like

• 17:06Wes Bos?

  Wow.

• 17:06Scott Tolinski?

  A third. So it's like now a third of the size it once was. So you can tell that they're actively trying to make this thing better. And I do love that.

• 17:15Wes Bos?

  Another one is check if it does what you want before you get into it. I can't tell you how many times I've integrated a package into something and I realize, oh shoot, it doesn't cover this use case. And then you have that code throughout your code base. It's in your package JSON. You gotta uninstall it and it's that's a pain in the butt. So what I've ended up doing is read through the docs, make sure it actually covers your use cases that you can think of. And then also just run like a quick little quick like isolated example in just an HTML file, you know, link the thing in via esm.sh, try run a little example before you go ahead and spend the time to integrate it into your application because you could save yourself quite a bit of of time. And even another

• 17:57Wes Bos?

  tip I have is simply go to github.com forward slash search, search for that package's name and find examples that are already running that that use that and see if you can get it get it up and running really quickly because you can see where people are actually using it.

• 18:14Scott Tolinski?

  Do you know an easy way to do that, Wes?

• 18:16Wes Bos?

  How?

• 18:17Scott Tolinski?

  So let's say you have a package like Zoo Stand, right? I'm using Zoo Stand just because we were talking about it moments ago. And if you go to Insights, there's a tab in GitHub Insights.

• 18:32Wes Bos?

  Yes.

• 18:32Scott Tolinski?

  And from Insights, you can see, so you click on dependency graph, and then you can click on dependents, and you can see all of the repos that are using this package on GitHub. So sometimes if I'm having a package that has really bad docs, or I'm hitting an issue with it, I will go to the Insights dependency graph, dependents, and then I will check to see somebody else's code just to get through that bit. Yeah.

• 19:02Wes Bos?

  Yeah, I I have used that. That's how I kind of suss out are are people using it, right? 504,000 repositories on GitHub are using ZooStan, right? Passes, it checks out, you know?

• 19:15Scott Tolinski?

  Yeah.

• 19:15Wes Bos?

  But if you want to see how are people using this, you know, like, what does the code look like? I'll often use GitHub search just to I want to actually see the part of the code where they are using this.

• 19:26Scott Tolinski?

  What I would do is I would just click through the repo from the network dependence and then search from there. So then I like I know this.

• 19:34Wes Bos?

  But then you're doing it repo by repo. GitHub search, I can I can search from HTML to Canvas. And immediately I can see 20 different code on one page of people actually using it. And you can immediately see how are people actually using it. There's, yeah, there's two different ways to to do it. But it really depends on what you're looking. Yeah.

• 19:55Scott Tolinski?

  I think I should think your way is better.

• 19:56Wes Bos?

  One by one, searching for it, or my way, typing it in once and seeing 20 examples on one page.

• 20:04Scott Tolinski?

  Yeah, well, my way is better because I did it. Yeah, that's why.

• 20:09Wes Bos?

  No, but also my way is just like a fuzzy search, you know, yours is actual, like, using the dependency tree to look that up.

• 20:18Scott Tolinski?

  Yeah. Here's here's one more thing I would do. I would look at the packages, package.json file. Because, I mean, you can see the size on bundle phobia, and that might give you an idea about how big something is. But you got to know what the thing you're bringing into your code base is bringing into your code base. And sometimes that thing has a dependency, that thing has a dependency, whatever. I think you can suss a lot of this out just by looking at the bundle phobia and seeing how big it is. But there is something to be said about packages that rely on things that rely on less, less dependencies or whatever. I mean, granted, there there is an argument against that as well, but if if something is relying on something else, then

• 21:02Scott Tolinski?

  there's more likely something to break down the line, something's version gets updated and then the dependency doesn't get updated and then.

• 21:08Wes Bos?

  Yeah. Yeah, I mean, some, there's no option to pass, like, a option to the underlying package. Sometimes you just look at it, oh, I should just be using that dependency directly. And I can code this 100 lines myself, and that way I have full control over it. And it's it's one less dependency in your package JSON.

• 21:29Scott Tolinski?

  Word.

• 21:30Wes Bos?

  So that's, I think we've done a show on that before, you know, like when to buy versus when to build it yourself, or like when to install versus build it yourself. That's a, that's a whole decision you need to make as well as, is this worth bringing in an extra dependency? But that's not what we're talking about today. We're talking about you do need a package and how do you, how do you suss that out?

• 21:51Scott Tolinski?

  Word.

• 21:53Wes Bos?

  I think that's it. I think that's good info. Please tweet us at syntax FM with your thoughts as to how, how do you suss out of a package as good or not? We'd love to hear your thoughts.

• 22:04Scott Tolinski?

  Yes, absolutely.

• 22:06Wes Bos?

  Peace.