DEV Community

Avi Goldman
Avi Goldman

Posted on

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.

Table of contents

  • 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.

Discussion (0)