General resources

• Devdocs.io (external site): Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++…
• DevHints (external site): cheatsheets for many web technologies
• Carbon (external site): use this to share images of your code in presentations etc
• Badgen (external site):
• Shields.io (external site): to your documentation/readmes
• Git Flight Rules (external site): A guide for astronauts (now, programmers using Git) about what to do when things go wrong.
• browser-2020 (external site): Things you can do with a browser in 2020 ☕️

Really useful tools

These are tools that I use often and that I find useful.

• Bundlephobia (external site): Size of npm dependencies
• Transform.tools (external site): Transform your code with a few clicks. I most commonly use this tool (external site) to convert JSON to TypeScript interfaces
• Unicode code converter (external site)
• svgomg (external site): SVGO’s Missing GUI
• JSON Editor Online (external site): view, edit and format JSON online
• Squoosh (external site): image compressor
• Epoch Convert (external site): Online Unix Timestamp Converter
• CopyChar (external site): Copy special characters to your clipboard
• URL-encoder for SVG (external site)
• Tiny Helpers (external site): A collection of free single-purpose online tools for web developers…
• Whitespaces (external site) and zero width ​characters with buttons for copying to clipboard, short mnemonics and usage comments
• CSS2JS (external site): Convert CSS to JS object. There’s also a good VS Code extension for this as well: CSS-in-JS (external site)https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js (external site)
• Smooth Shadow (external site): Make a smooth shadow
• Crontab.guru (external site): The cron schedule expression editor
• Key.js (external site): JavaScript keyboard event key codes & key identifiers
• Glob tester (external site): tool for testing glob patterns
• HTML De-crapulator (external site)
• px-rem-em converter (external site) by me

📦 Finding and vetting npm packages

• npms (external site): A better and open source search for node packages
• pika (external site): A searchable catalog of modern “module” packages on npm
• emma (external site): 📦 Terminal assistant to find and install node packages
• npmvet (external site): A simple CLI tool for vetting npm package versions
• Bundlephobia (external site): See the “cost” of any npm package
• Snyk (external site): Find any security vulnerabilities for any npm package. Search their database here: https://snyk.io/vuln/npm:{package} e.g. https://snyk.io/vuln/npm:react (external site)
• runpkg (external site): Explore, learn about and perform static analysis on npm packages in the browser

🎨 CSS

• CSS Tricks “Complete Guide to Flexbox” (external site)
• CSS Tricks “Complete Guide to Grid” (external site)
• Cubic bezier curve creator (external site)
• Ceaser (external site): Cubic bezier curve generator
• CSS Triggers (external site): find out what CSS properties trigger Paint/Layout/Composite renders
• Fluid-responsive font-size calculator (external site): To scale typography smoothly across viewport widths.
• Browserhacks (external site): Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs
• Absolute centering (external site): useful techniques for absolute centering in CSS
• modern-css-reset (external site): A bare-bones CSS reset for modern web development
• CSSFX (external site): Beautifully simple click-to-copy CSS effects
• Shape Divider App (external site)

CSS-in-JS

• CSS-in-JS libraries
  • Stitches (external site) — CSS-in-JS with near-zero runtime
  • vanilla-extract (external site): Zero-runtime Stylesheets-in-TypeScript
  • Styled Components (external site): CSS-in-JS for React
  • Emotion (external site): CSS-in-JS library
  • linaria (external site): Zero-runtime CSS in JS library
  • goober (external site): A less than 1KB css-in-js solution
• Design System Utils (external site): Design system framework for modern front-end projects (made by me!)
• Polished (external site): A lightweight toolset for writing styles in JavaScript
• styled-by (external site): Simple and powerful lib to handle styled props in your components
• xstyled (external site): Consistent theme based CSS for styled-components 💅
• Theme UI (external site): Build consistent, themeable React apps based on constraint-based design principles

JavaScript

Useful JS links

• JS module import/export syntax (external site)
• JavaScript Event KeyCodes (external site)
• JavaScript Visualizer (external site)
• Does it mutate? (external site)
• jsPerf (external site): JavaScript performance playground
• modern-js-cheatsheet (external site)
• HTML DOM (external site): Common tasks of managing HTML DOM with vanilla JavaScript

Framework agnostic packages

General utilities

• Lodash (external site): A modern JavaScript utility library delivering modularity, performance & extras.
• Just (external site): A library of dependency-free utilities that do just do one thing (like Lodash but smaller)
  • Install each util independently
  • Read the tradeoffs document (external site) to see if Lodash is better
• tiny-get (external site): A minimal-weight lodash.get equivalent utility
• evt (external site): A type safe replacement for node’s EventEmitter
• liteready (external site): A lightweight DOM ready.
• passport (external site): Simple, unobtrusive authentication for Node.js
• get-size (external site): Get the size of elements
• length.js (external site): Library for length units conversion
• action-outside (external site): Invoke a callback function when clicked or tabbed outside one or multiple DOM elements
• select-dom (external site): Lightweight querySelector/All wrapper that outputs an Array
• memoizee (external site): Complete memoize/cache solution for JavaScript
• memoize-one (external site): A memoization library which only remembers the latest invocation
• kind-of (external site): Get the native JavaScript type of a value, fast.
• iterare (external site): Array methods + ES6 Iterators =
• eases-jsnext (external site): A grab-bag of modular easing equations
• normalizr (external site): Normalizes nested JSON according to a schema
• lazy-value (external site): Create a lazily evaluated value
• fast-equals (external site): A blazing fast equality comparison, either shallow or deep
• fast-copy (external site): A blazing fast deep object copier
• compute-scroll-into-view (external site): Utility for calculating what should be scrolled, how it’s scrolled is up to you
• arr (external site): A collection of tiny, highly performant Array.prototype alternatives
• timedstorage (external site): A library for storing and expiring objects in window.localstorage
• left-pad (external site): String left pad
• dont-go (external site): A small client-side library with zero dependencies to change the title and/or favicon of the page when it is inactive
• always-done (external site): Handle completion and errors with elegance! Support for async/await, promises, callbacks, streams and observables. A drop-in replacement for async-done - pass 100% of its tests plus more
• title (external site): A service for capitalizing your title properly
• words (external site): Linguistic javascript modules
• no-scroll (external site): Disable scrolling on an element that would otherwise scroll
• libphonenumber-js (external site): A simpler (and smaller) rewrite of Google Android’s libphonenumber library
• text-mask (external site): Input mask for React, Angular, Ember, Vue, & plain JavaScript
• msk (external site): Small library to mask strings
• focus-trap (external site): Trap focus within a DOM node
• tinykeys (external site): A tiny (~400 B) & modern library for keybindings
• clack (external site): A modern keyboard shortcut library written in Typescript
  • clack-react (external site): React support for @reasonink/clack
• js-humanize (external site): Humanize large numbers
• pupa (external site): Simple micro templating
• sub-in (external site): 🥙 A tiny (115B) find-and-replace utility for strings in Javascript
• color-hash (external site): Generate color based on the given string (using HSL color space and BKDRHash)
• string-similarity (external site): Finds degree of similarity between two strings, based on Dice’s Coefficient, which is mostly better than Levenshtein distance
• cuid (external site): Collision-resistant ids optimized for horizontal scaling and performance
• obj-str (external site): A tiny (96B) library for serializing Object values to Strings. Also serves as a faster & smaller drop-in replacement for the classnames module
• clsx (external site): A tiny (223B) utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module
• xstate (external site): State machines and statecharts for the modern web
• tasktimer (external site): An accurate timer utility for running periodic tasks on the given interval ticks or dates. (Node and Browser)
• rough-notation (external site): Create and animate hand-drawn annotations on a web page
• ouml (external site): ö.js is a small collection of useful stuff
• is (external site): Type check values
• big.js (external site): A small, fast JavaScript library for arbitrary-precision decimal arithmetic
• js-proper-url-join (external site): Like path.join but for a URL

Async

• axios (external site): Promise based HTTP client for the browser and node.js
  • axios-retry (external site): Axios plugin that intercepts failed requests and retries them whenever possible
• redaxios (external site): The Axios API, as an 800 byte Fetch wrapper
• cross-fetch (external site): Universal WHATWG Fetch API for Node, Browsers and React Native
• awaity (external site): A functional, lightweight alternative to bluebird.js, built with async / await in mind
• loadjs (external site): A tiny async loader / dependency manager for modern browsers (789 bytes)
• await-to-js (external site): Async await wrapper for easy error handling without try-catch

Node

• Fastify (external site): Fast and low overhead web framework, for Node.js
• Express (external site)
  • helmet (external site): Help secure Express apps with various HTTP headers
  • reqresnext (external site): Tiny helper for express middleware testing
  • lusca (external site): Application security for express apps
  • cookie-session (external site): Simple cookie-based session middleware
• nodebestpractices (external site): The largest Node.JS best practices list. Curated from the top ranked articles and always updated
• dumper.js (external site): A better and pretty variable inspector for your Node.js applications
• http-terminator (external site): Gracefully terminates HTTP(S) server
• uuid (external site): Generate RFC-compliant UUIDs in JavaScript
• http-errors (external site): Create HTTP Errors
• boom (external site): HTTP-friendly error objects
• deno (external site): A secure JavaScript and TypeScript runtime
• nanomatch (external site): Fast, minimal glob matcher for node.js. Similar to micromatch, minimatch and multimatch, but without support for extended globs (extglobs), posix brackets or braces, and with complete Bash 4.3 wildcard support: (”*”, ”**”, and ”?”)
• yn (external site): Parse yes/no like values
• ncp (external site): Asynchronous recursive file copying with Node.js

Logging

• pino (external site): 🌲 super fast, all natural json logger 🌲
• caterpillar (external site): Caterpillar is the ultimate logging system for Deno, Node.js, and Web Browsers
• cabin (external site): Cabin is the best JavaScript and Node.js logging service and logging npm package
• consola (external site): Elegant Console Logger for Node.js and Browser 🐨

Responsive

• responsive-watch (external site): Watch some media queries and react when they change
• tornis (external site): Tornis helps you watch and respond to changes in your browser’s viewport 🌲
• actual (external site): Determine actual CSS media query breakpoints via JavaScript

Media and Images

• images-loaded (external site): Wait for images to load using promises. No dependencies.
• lazysizes (external site): High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

Image services

• sharp (external site): High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips library.
• IMGIX (external site): Real-time image processing and image CDN

Date

• date-fns (external site): Modern JavaScript date utility library
• tinydate (external site): A tiny (337B) reusable date formatter. Extremely fast!
• tinytime (external site): ⏰ A straightforward date and time formatter in <1kb

Scrolling

• scroll-watcher (external site)
• scrolldir (external site): Leverage Vertical Scroll Direction with CSS

Carousels

• Flickity (external site)
• Swiper (external site)

Animation

• ramjet (external site): Morph DOM elements from one state to another with smooth animations and transitions
• anime (external site): JavaScript Animation Engine
• GSAP (external site):the standard for JavaScript HTML5 animation | GreenSock
• Vanilla-tilt.js (external site): A smooth 3D tilt javascript library forked from Tilt.js

Web workers

• workerize (external site): Run a module in a Web Worker
• greenlet (external site): Move an async function into its own thread. A simplified single-function version of workerize.

Immutable

• immer (external site): Create the next immutable state tree by simply modifying the current tree
  • use-immer (external site): Use immer to drive state with a React hooks
• unchanged (external site): A tiny, fast, unopinionated handler for updating JS objects and arrays immutably
• seamless-immutable (external site): Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objectsseamless-immutable`
• mutik (external site): A tiny (495B) immutable state management library based on Immer

Typography

• fitty (external site): Makes text fit perfectly

Polyfills

• resize-observer-polyfill (external site):A polyfill for the Resize Observer API

⚛️ React

reactjs.org (external site)

• create-react-app (external site): Create React apps with no build configuration
  • react-app-rewired (external site): Override create-react-app webpack configs without ejecting
• react-philosophies (external site): Things I think about when I write React code
• react-bits (external site): ✨ React patterns, techniques, tips and tricks ✨

React-specific libs:

• react-powerplug (external site): Renderless Containers
• formik (external site): Build forms in React, without the tears 😭
• react-router (external site): Declarative routing for React
• Reach Router (external site)
• react-fns (external site): React Components for common Web APIs
• react-portal (external site): React component for transportation of modals, lightboxes, loading bars… to document.body
• react-ideal-image (external site): 🖼️ An Almost Ideal React Image Component
• react-adopt (external site): Compose render props components like a pro
• downshift (external site)
• react-loadable (external site): A higher order component for loading components with promises
• react-portal (external site): React component for transportation of modals, lightboxes, loading bars… to document.body
• js-lingui: 🌍📖 (external site): A readable, automated, and optimized (5 kb) internationalization (Intl / i18n) for JavaScript
• react-mq (external site): Barebones CSS media query component for React, ~560 bytes
• react-media (external site): CSS media queries for React. This is SSR compatible as well.
• merge-props (external site): Merges className, style, and event handler props for React elements
• react-uid (external site): Render-less container for generating UID for a11y, consistent react key, and any other good reason 🦄
• clsx (external site): A tiny (229B) utility for constructing className strings conditionally
• Framer Motion (external site): An open source React library to power production-ready animations. Design fluid animations for the web, across desktop and mobile
• react-axe (external site): Accessibility auditing for React.js applications
• use-click-away (external site): React hook to detect click or touch events outside an element
• react-tiny-virtual-list (external site): A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!
• react-laag (external site): Primitives to build things like tooltips, dropdown menu’s and popovers in React
• react-dnd (external site): Drag and Drop for React

React Hooks

• swr (external site): React Hooks library for remote data fetching
• Hooks.Guide (external site): Collection of React hooks curated by the community
• useHooks (external site): Easy to understand React Hook recipes
• beautiful-react-hooks (external site): 🔥A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥
• react-adaptive-hooks (external site): Deliver experiences best suited to a user’s device and network constraints
• use-local-storage-state (external site): React hook that persists data in localStorage
• Rooks (external site): Collection of React hooks ⚓ for everyone

State management

• jotai (external site): 👻 Primitive and flexible state management for React
• zustand (external site): 🐻 Bear necessities for state management in React
• redux (external site): Predictable state container for JavaScript apps
  • reselect (external site): Selector library for Redux
  • redux-saga (external site): An alternative side effect model for Redux apps
    • redux-saga-routines (external site): Routines for redux-saga
  • redux-thunk (external site): Thunk middleware for Redux
  • awesome-redux (external site): Catalog of Redux Libraries & Learning Material
• parket (external site): A library to manage application state, heavily inspired by mobx-state-tree
• unstated (external site): State so simple, it goes without saying
• mergeState (external site): How to Stop Worrying and Use Nested Object/Array in React/Redux States
• effector (external site): The state manager ☄️
• Recoil (external site): Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Server-rendered React

• Next.js (external site) (repo (external site)): - Framework for server-rendered or statically-exported React apps
  • next-plugins (external site)

Static site generators

• Gatsby (external site): Blazing fast static site generator for React
• Eleventy (external site): A simpler static site generator

Microservices/Serverless

• micro (external site)
  • awesome-micro (external site)

TypeScript

typescriptlang.org (external site)

• What’s new in TypeScript (external site): Microsoft/TypeScript Wiki
• TypeScript Deep Dive (external site)
• TypeScript Evolution (external site)
• JSON to Typescript Interface (external site)
• react-typescript-cheatsheet (external site): a cheatsheet for react users using typescript with react for the first (or nth!) time
• clean-code-typescript (external site): Clean Code concepts adapted for TypeScript
• type-fest (external site): A collection of essential TypeScript types

Command Line, Terminal and shells

Fish shell (external site): The user-friendly command line shell

• My fish_config (external site)
• awesome-fish (external site): A curated list of packages, prompts, and resources for the amazing fish shell
• Starship (external site): Cross-Shell Prompt
• tide (external site): 🌊 A modern prompt manager for the Fish shell

Creating CLI apps

• gluegun (external site): A delightful toolkit for building Node-powered CLIs
• inquirer (external site): A collection of common interactive command line user interfaces
• commander (external site): node.js command-line interfaces made easy
• sade (external site): Sade is a small but powerful tool for building command-line interface (CLI) applications for Node.js that are fast, responsive, and helpful!

CLI apps

• serve (external site): Static file serving and directory listing
• awesome-cli-apps (external site): A curated list of command line apps
• SpaceVim (external site): A community-driven modular vim distribution - The ultimate vim configuration

Tooling

Code bundlers

• Vite (external site): Next Generation Frontend Tooling
• esbuild (external site): An extremely fast JavaScript bundler
• swc (external site): swc is a super-fast compiler written in rust; producing widely-supported javascript from modern standards and typescript
• preconstruct (external site): 🎁 Dev and build your code painlessly in monorepos
• Webpack (external site): script/asset bundler
  • Webpack recipes (external site)
  • ifdef-loader (external site): Webpack loader for JavaScript/TypeScript conditional compilation
• Parcel (external site): Blazing fast, zero configuration web application bundler
• microbundle (external site): Zero-configuration bundler for tiny modules
• rollup.js (external site): Rollup is a module bundler for JavaScript
• ncc (external site): Node.js Compiler Collection. Simple CLI for compiling a Node.js module into a single file, together with all its dependencies, gcc-style.
• fastpack (external site): Pack JS code into a single bundle fast & easy

Package management and publishing

• np (external site): A better npm publish
• size-limit (external site): Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error
• bundlesize (external site): Keep your bundle size in check
• nps (external site): All the benefits of npm scripts without the cost of a bloated package.json and limits of json
• Dependabot (external site): Dependabot creates pull requests to keep your dependencies secure and up-to-date
• npm-config (external site) (docs): More than you probably want to know about npm configuration
• patch-package (external site): Fix broken node modules with no fuss 📦👌
• madge (external site): Create graphs from your CommonJS, AMD or ES6 module dependencies

Commit hooks

• lefthook (external site): Fast and powerful Git hooks manager for any type of projects
• husky (external site): Git hooks made easy
• lint-staged: 🚫💩 (external site): Run linters on git staged files
• lefthook (external site): Fast and powerful Git hooks manager for any type of projects

Testing

• Jest (external site): Delightful JavaScript Testing

  • majestic (external site): Zero config UI for Jest
  • jest-chain (external site): Chain Jest matchers together to create one powerful assertion 🃏⛓
  • jest-extended (external site): Additional Jest matchers 🃏💪
  • snapshot-diff (external site): Diffing snapshot utility for Jest
  • jest-date-mock (external site): 🌗 Mock Date when run unit test cases with jest. Make tests of Date easier

• Cypress (external site): end-to-end testing

  • cypress-testing-library (external site): 🐅 Simple and complete custom Cypress commands and utilities that encourage good testing practices
  • cypress-axe (external site): Custom commands for Cypress to run a11y checks with axe-core
  • start-server-and-test (external site): Starts server, waits for URL, then runs test command; when the tests end, shuts down server

• dom-testing-library (external site): 🐙 Simple and complete DOM testing utilities that encourage good testing practices

• react-testing-library 🐐 (external site): Simple and complete React DOM testing utilities that encourage good testing practices

  • react-testing-library (external site): React Testing Examples
  • react-hooks-testing-library (external site): 🐏 Simple and complete React hooks testing utilities that encourage good testing practices

• Chance (external site): Random generator helper for JavaScript

• faker.js (external site): generate massive amounts of fake data in Node.js and the browser

• nock (external site): HTTP server mocking and expectations library for Node.js

• Stryker Mutator (external site)

• given2 (external site): Lazy variable evaluation for Jasmine, Mocha, Jest specs, inspired by Ruby and Rspec 💎

• benny (external site): A dead simple benchmarking framework for JS/TS libs

• benchmark.js (external site): A benchmarking library. As used on jsPerf.com

• ui-testing-best-practices (external site): The largest UI testing best practices list (lat update: April 2020) (work in progress)

Code formatting and linting

• Prettier (external site)
  • precise-commits (external site): Painlessly apply Prettier by only formatting lines you have modified anyway!
  • pretty-quick (external site): Runs Prettier on your changed files
• Eslint (external site)
  • eslint-plugin-prettier (external site): ESLint plugin for prettier formatting
  • eslint-config-prettier (external site): Turns off all rules that are unnecessary or might conflict with Prettier
  • eslint-plugin-react (external site): React specific linting rules for ESLint

Miscellaneous

• npm-run-all (external site): A CLI tool to run multiple npm-scripts in parallel or sequential
• cross-port-killer (external site): Kill the process running on a given TCP port on Windows, Linux and Mac
• envinfo (external site): Generate a report about your development environment for debugging and issue reporting
• mkcert (external site): A simple zero-config tool to make locally trusted development certificates with any names you’d like

Progressive Web Apps

• Workbox (external site) & (repo (external site)): JavaScript libraries for Progressive Web Apps

Code Sandboxes

• CodeSandbox (external site): CodeSandbox is perfect for React demo apps
• Codepen (external site): Codepen is perfect for non-React front-end demos and prototypes
• CodeShare (external site): Codeshare is useful for collaborating on a single file if devs are not in the same room
• Glitch (external site)

APIs

• Postman (external site): used to develop, test and monitor APIs
• MockAPI (external site): create a mock API
• jsonbin (external site): A personal JSON store as a RESTful service
• test-cors.org (external site)
• Reqres (external site): A hosted REST-API ready to respond to your AJAX requests
• Mirage JS (external site): An API mocking library for frontend developers
• Postwoman (external site): API request builder

GraphQL

• GraphQL Playground (external site)
• Apollo GraphQL (external site): Apollo Data Graph Platform— unify APIs, microservices, and databases into a data graph that you can query with GraphQL
  • Apollo Client (React) (external site): Apollo React GraphQL Docs
  • graphql-directives (external site): 🧭 A collection of custom GraphQL Schema Directives for use with Apollo Server
• urql (external site): The highly customizable and versatile GraphQL client
• graphql-request (external site): Minimal GraphQL client supporting Node and browsers for scripts or simple apps
• graphql-lodash (external site): 🛠 Data manipulation for GraphQL queries with lodash syntax

JSON

• JSON generator (external site): generate a lot of custom JSON for your app/site
• JSON Editor Online (external site): view/edit JSON in a better format
• fx (external site): Command-line tool and terminal JSON viewer 🔥

HTML

• github.com/joshbuchea/HEAD (external site): the definitive resource for everything that could go in the head of your document
• MetaTags.io (external site): Preview, Edit and Generate
• HEY META (external site): Website Meta Tag Check
• Rich Link Preview (external site)

SVG

• A Practical Guide to SVGs on the web (external site)
• Get Waves (external site): Create SVG waves for your next design
• Blobmaker (external site): Make organic SVG shapes for your next design
• flubber (external site): Tools for smoother shape animations
• Hero Patterns (external site): Free repeatable SVG background patterns for your web projects

Icons

• ICONSVG (external site): Quick customizable SVG icons for your project
• Simple Icons (external site)
• React Icons (external site)
• Evil Icons (external site)
• Icon Font & SVG Icon Sets ❍ IcoMoon (external site)
• SVG PORN (external site)
• Feather (external site): Simply beautiful open source icons
  • react-feather (external site): React component for Feather icons
• System UIcons (external site)

SVG/Image Media compression

• Squoosh (external site)
• SVGOMG (external site): SVGO’s Missing GUI

Conversions and unicode

• Transform (external site): All important transforms at one place ⭐️⭐️⭐️ this is so useful
• SVGR (external site): The SVG to JSX transformer
• svg2jsx (external site)
• JSON to JavaScript object literal (external site)
• Unminify JS, CSS and HTML Code (external site)
• Multi-Encoder (external site)
• Unicode code converter (external site)

Features and feature detection

• Can I Use… (external site): Browser support tables for modern web technologies (HTML5, CSS3, JavaScript etc)
• Kangax JavaScript compatibility table (external site)

Performance

• Bundlephobia (external site): find the cost of adding a npm package to your bundle

Performance testing and monitoring

• WebPageTest (external site)
• Lighthouse (external site)
• Calibre (external site)
• Website Speed Test Image Analysis Tool (external site) by Cloudinary

Design

• Subtract Guides (external site): Simple Rules for Designing Web & Mobile Forms

Design Systems and documentation

• Storybook (external site): UI dev environment you’ll love to use
• react-styleguidist (external site): - Isolated React component development environment with a living style guide
• Docusaurus (external site): Easy to Maintain Open Source Documentation Websites
• Docz (external site)
• design-system-utils (external site): - Design system framework for modern front-end projects
• Docute (external site): The fastest way to create a documentation site for your project
• playroom (external site): Design with JSX, powered by your own component library

Accessibility (A11y)

Accessibility is an extremely important part of any web project. While the SOW, functional spec or user-stories might not directly mention a11y, it is up to each developer to ensure that best efforts are made to make our websites as accessible as possible.

A11y tools and resources:

• Interactive WCAG (external site): guidelines/cheatsheet for A, AA & AAA
• awesome-a11y (external site): massive list of a11y-related resources & information
• tenon.io (external site): a11y tester
• a11yproject.com/checklist.html (external site): a11y checklist
• a11yproject.com (external site): a11y resources
• w3.org/WAI/ER/tools/ (external site): list of a11y tools from the W3C
• allyjs.io (external site): JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler
• Four principles of Accessibility (external site)
• Aria landmarks example (external site)
• A11y Style-guide (external site): markup examples and best practices
• Inclusive Components (external site): A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
• Color contrast checker (external site)
• Accessible color palette builder (external site): An prototype to help designers build accessible color palettes
• Practical ARIA Examples (external site)
• Nutrition Cards for Accessible Components A11Y Expectations (external site)
• Web Accessibility Tutorials (external site): Guidance on how to create websites that meet WCAG

A11y Chrome extensions

• Accessibility Insights for Web (external site)
• Color Contrast Analyzer (external site)
• NoCoffee (external site): has options for testing color blindness and other sight-related issues

DevOps

HTTP Status Codes (external site)

Continuous integration

• CircleCI (external site): Paid.
• Bitrise (external site): Paid. For iOS/Android apps
• Travis CI (external site): Free for open-source

Docker

• dockle (external site): Container Image Linter for Security, Helping build the Best-Practice Docker Image, Easy to start

Hosting

• Vercel (external site)
• Netlify (external site)

Domains

• iwantmyname (external site)

Design

Typography

• Modular Scale (external site)
• Adaptive Modular Scale (external site)
• Type Scale - A Visual Calculator (external site)

IDEs and Text Editors

VS Code

• My VS Code extensions (external site)
• My preferences (external site)
• awesome-vscode (external site): 🎨 A curated list of delightful VS Code packages and resources

Programming fonts

• IBM Plex Mono (external site)
• iA-Fonts (external site)
• Input: Fonts for Code (external site)
• FiraCode (external site)
• fantasque-sans (external site)
• Jet Brains Mono (external site)

Code colour schemes

• Monokai Pro (external site)
• Ayu (Mirage) (external site)
• Dracula (external site): A dark theme for Visual Studio Code and 50+ apps
• Oceanic Next Theme (external site)
• 🌌 Night Owl (external site): A VS Code dark theme for contrast for nighttime coding
• Nord (external site)
• VSCodeThemes (external site)
• themer (external site): 🎨 themer takes a set of colors and generates themes for your apps (editors, terminals, wallpapers, and more)

Regular expressions

• Regex101 (external site): Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript

Learning resources

• Web Skills (external site): A visual overview of useful skills to learn as a web developer

---

If you think there are better alternatives, or that there should be something added to the list, please create an issue (external site) or create a pull request (external site)