JavaScript is hard: here are some of my go-to packages

I've been programming for a little while now. I'm not the best, I don't have much formal training, but my code runs and it does the job :)

I started out programming in Java. Then dabbled in python. Then did PHP for a couple of years. And finally committed to the JavaScript game back in 2015.

JavaScript is so versatile and so overloaded that it can be hard to find your way. And once you do get your bearings you can build pretty much anything. We've all read (or at least seen the titles) of articles bashing JavaScript or praising it. This isn't one of those. This is more for documenting which packages I always end up going back to, partly for myself since I forget, and partly for everyone else.

Isomorphic utilities – fancy words for "it works everywhere"
Servers – someone else's computer that usually does database work
Databases - the thing that stores your data
Frontend – your user's computer that displays data and talks to servers
Scraping – grabbing data from a website when they don't give you an API
Email – most people won't care about this but I spent a lot of my time in here

Isomorphic utilities

Category	Name	Creator	Description
Generic utilties	lodash	John-David Dalton	A utility library with a ton of useful functions for manipulating strings, objects, arrays, and basically anything else. I don't think I've ever made a project without it. Oh, and it's the most depended upon NPM package.
Debugging	debug	Debug.js	A debugging library. Add logs. Filter them out. Colors for easy visual parsing. Another top 10 package.
Data fetching	axios	Axios	A super comprehensive library for making HTTP requests. Works in the browser and node.js. Another one that is in almost all of my projects.
Data validation	yup	Jason Quense	My favorite way to validate an object. It can be as simple or complex as you need. Super portable. Casts values. I use it to validate API requests and form values in formik.
ID generation	uuid	UUID	Generates universally unique identifiers (UUIDs). I love UUIDs for IDs of things that aren't user facing. Better than sequential IDs.
ID generation	nanoid	Andrey Sitnik	Generates unique identifiers. I like it for when UUIDs are too long. Think YouTube video IDs.
ID generation	slugify	Simeon Velichkov	Takes a string and returns a "slugified" version. i.e. "Hello World" becomes "hello-world". Great for IDs that don't need to be globally unique or need to be memorable to the user.
Dates	date-fns	date-fns	You can't go without this one. If you need to deal with dates, this is the tool for you. Formatting, math, comparing, sorting, filtering – it does it all.
Promises	delay	Sindre Sorhus	Sleep for some time. Great for testing delays or for writing flaky code ;)
Promises	p-map	Sindre Sorhus	Maps an array into promises.
Promises	p-timeout	Sindre Sorhus	Timeout a promise after some time.
Promises	p-retry	Sindre Sorhus	Retries an async function on failure.
Promises	p-cancelable	Sindre Sorhus	For creating promises you might want to cancel before they complete.
Promises	p-progress	Sindre Sorhus	For creating promises you want to report progress as the work is done.
Promises	p-any	Sindre Sorhus	Resolve after any of the promises finish.
Promises	p-some	Sindre Sorhus	Resolve when a specific number of promises finish.
Promises	p-all	Sindre Sorhus	Resolve when all the promises finish.
URLs	is-absolute-url	Sindre Sorhus	Checks if a string is an absolute URL.
URLs	is-relative-url	Sindre Sorhus	Checks if a string is a relative URL.

Servers

Category	Name	Creator	Description
Server	Express	Express.js	The industry standard for running a node server. If you don't have a strong opinion about a tool, use this.
Middleware	body-parser	Express.js	A must have middleware for parsing the body.
Middleware	cookie-parser	Express.js	A must have middleware for parsing cookies.
Middleware	helmet	Express.js	A must have middleware for securing your server.
Middleware	cors	Express.js	A must have middleware for setting good cors headers.
Middleware	express-ws	Express.js	A middleware for setting up web socket things. Not a must have ;)

Databases

I almost always reach for PostgreSQL. I've been using it for years, and it's been a great tool. If I need something real-time I use Firebase. If I need something for caching or queuing I use Redis.

Category	Name	Creator	Description
Database connector	pg-promise	Vitaly Tomilov	An promise library for PostgreSQL. Low level and lovely.
Database connector	ioredis	Zihua Li	A client for Redis. No real opinions. Which is a good sign in-itself.
ORM	prisma	Prisma	An ORM with migrations and type-safety. My go-to for any new projects.
Queues	bullmq	TaskForce	My favorite way to build queues.

Frontend

Category	Name	Creator	Description
Framework	React	React	A JS library for building user interfaces.
Metaframework	Next.js	Vercel	A React Framework - I wouldn't use React without something like this.
Styling	styled-components	styled-components	A CSS library for React. Only for when I want 100% control.
Styling	tailwindcss	Tailwind Labs	The utility-first CSS framework. When I don't care about 100% control, I use Tailwind.
Data fetching	SWR	Vercel	The best way to fetch data in React (that I know of)
Forms	Formik	Jared Palmer	The best way to build forms in React (that I know of)
Utilities	clipboard-copy	Feross Aboukhadijeh	Copies something to the user's clipboard. That's it.
Utilities	file-saver	Eli Grey	Makes it super easy to save files to the user's computer.
Utilities	react-outside-click-handler	AirBnb	"When the user clicks outside this element, do XYZ"
Utilities	@reach/auto-id	Reach - the accessible foundation for React	Auto generate IDs. Useful for connecting labels and inputs without needing to manually set the id.
Utilities	@reach/rect	Reach - the accessible foundation for React	React hook and higher order component to get the exact size of the DOM element.
Utilities	react-intersection-observer	Daniel Schmidt	Track when a DOM element enters the viewport. "When the user scrolls to this element, do XYZ".
Utilities	react-focus-lock	Anton Korzunov	"Don't let the user leave this element"
Utilities	react-error-boundary	Brian Vaughn	"When something breaks, display XYZ"
Components	Reach UI	Reach - the accessible foundation for React	A ton of accessible React components I turn to all of the team
Components	dnd kit	Claudéric Demers	Wanna make sortable lists, drag and drop builders, or anything else that the user can move? This is the tool for you.
Components	downshift	Kent C. Dodds	Accessible comboboxes.
Components	react-toastify	Fadi Khadra	Easy way to show toast notifications (Those notifications that pop up in the corner.)
Components	react-contexify	Fadi Khadra	Easy scalable way to add context menus. (What you get when you right click.)
Components	Split.js	Nathan Cahill	Super flexible utilities for resizable panes.
Components	kbar	Tim Chang	A customizable command palette.
Components	react-monaco-editor	react-monaco-editor	A nice React wrapper around Monaco Editor
Components	react-chartjs-2	reactchartjs	A nice React wrapper around chart.js

Scraping

Category	Name	Creator	Description
Headless browser	Playwright	Microsoft	A headless browser for testing and prototyping. Supports all major browsers and has great utils for waiting for the DOM to be ready.
Extraction	Metascraper	microlink.io	A library for extracting metadata from web pages.
Extraction	html-get	microlink.io	A library for getting the HTML from any webpage, even if it uses JavaScript for rendering.
DOM navigation / manipulation	cheerio	Cheerio	A jQuery-like library for navigating and manipulating the DOM. Couldn't live without it.

Email

Ok so I work in email. I spent a lot of time thinking about email creation, validation, testing, etc. This section probably won't be interesting to most folks but I figured I'd add it anyways.

Email address validation

Category	Name	Creator	Description
Domains	disposable-email-domains	Ilya Volodarsky	A list of domains associated with disposable email services. You'll never catch em all but this is pretty damn good.
Domains	free-email-domains	Kiko Beats	A list of domains associated with free email providers.
Domains	email-providers	Jannis R	A list of domains associated with email providers.
Localparts	role-based-email-addresses	Mixmax	A list of localparts (the part before the `@` sign) that refer to a role and not a person (i.e. "sales" or "admin")
Email address	email-misspelled	Julien Amblard	A library that will suggest an correction if the given email address probably has a typo.
Email address	email-addresses	Jack Bearheart	A library for validating email addresses.

String / HTML / CSS manipulation

I a email creation platform and it requires a fair bit of DOM and string manipulation.

Category	Name	Creator	Description
Email parser	mailparser	Node Mailer	A library for parsing emails. I'm a fan but it's a bit heavy compared with letterparser and is node.js only.
Email parser	letterparser	Mat Sz	A full isomorphic library for parsing emails. Oh and it has AMP support which is a big plus. My go-to now-a-days.
CSS inliner	juice	Automattic	The industry standard CSS inliner. It's hard to beat.
CSS navigation / manipulation	postcss	PostCSS	A library for transforming CSS. Super powerful but a bit too dependent on perfect code for my liking.
HTML navigation / manipulation	Cheerio	Cheerio	A jQuery-like library for navigating and manipulating the DOM. Couldn't live without it.
HTML navigation	simple-html-tokenizer	Tilde	A library for tokenizing HTML. I use it for finding the source information for HTML attributes.
HTML manipulation	sanitize-html	Apostrophe CMS	A library for sanitizing HTML.
HTML manipulation	escape-html	Component	A library for escaping HTML.
HTML manipulation	html-to-text	html-to-text	A library for converting HTML to text. Not perfect but a great base to work off of.
HTML information	is-self-closing	Jon Schlinkert	A library for checking if a tag is self-closing.
HTML information	html-tags	Sindre Sorhus	A list of all HTML tags.
HTML information	caniemail	parcel.io	The data powering caniemail.com - the best source of support data for email.
String manipulation	ranges-apply	Codsen	A library for manipulating strings. When you need to do non-parsing HTML/CSS manipulation there is literally no better way than this.