Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
My go-to resources for working on the web.
Table of contents

General resources

  • - 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 - cheatsheets for many web technologies
  • Carbon - use this to share images of your code in presentations etc
  • - to your documentation/readmes
  • JSON generator - generate a lot of custom JSON for your app/site
  • JSON Editor Online - view/edit JSON in a better format



  • Emotion - CSS-in-JS library
  • styled-components - CSS-in-JS for React
    • yarn add styled-components / npm i -S styled-components
  • design-system-utils - Design system framework for modern front-end projects
    • yarn add design-system-utils / npm i -S design-system-utils
  • polished - A lightweight toolset for writing styles in JavaScript
  • styled-by Simple and powerful lib to handle styled props in your components


Use Bundlephobia to see the cost of any npm packages

Use Snyk to find any security vulnerabilities for any npm package. Search their database here:{package} e.g.

Useful JS links

Framework agnostic packages

General utilities




  • responsive-watch - Watch some media queries and react when they change
    • yarn add responsive-watch / npm i -S responsive-watch

Media and Images

  • images-loaded - Wait for images to load using promises. No dependencies.
    • yarn add images-loaded / npm i -S images-loaded
  • lazysizes - 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.
    • yarn add lazysizes / npm i -S lazysizes

Image services


  • dayjs - Fast 2KB immutable date library alternative to Moment.js with the same modern API
    • yarn add dayjs / npm i -S dayjs
  • date-fns - Modern JavaScript date utility library
    • yarn add date-fns / npm i -S date-fns
  • tinydate - A tiny (337B) reusable date formatter. Extremely fast!
  • tinytime - ⏰ A straightforward date and time formatter in <1kb


  • scroll-watcher
    • yarn add flickity / npm i -S flickity
  • scrolldir - Leverage Vertical Scroll Direction with CSS
    • yarn add scrolldir / npm i -S scrolldir


  • Flickity
    • yarn add flickity / npm i -S flickity
  • Swiper
    • yarn add swiper / npm i -S swiper


Web workers

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


  • immer - Create the next immutable state tree by simply modifying the current tree
    • yarn add immer / npm install -S immer
  • unchanged - A tiny, fast, unopinionated handler for updating JS objects and arrays immutably
    • yarn add unchanged / npm install -S unchanged
  • seamless-immutable - Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects
    • yarn add seamless-immutable / npm install -S seamless-immutable


  • fitty - Makes text fit perfectly
    • yarn add fitty / npm install -S fitty



React-specific libs:

State management

Server-rendered React

  • next.js - Framework for server-rendered or statically-exported React apps
    • yarn add next react react-dom / npm install -S next react react-dom
    • next-plugins
  • after.js - If Next.js and React Router had a baby...

Static site generators


Code bundlers

  • Webpack - script/asset bundler
  • Parcel - Blazing fast, zero configuration web application bundler
  • microbundle - Zero-configuration bundler for tiny modules
  • rollup.js - Rollup is a module bundler for JavaScript

Design Systems and documentation


Progressive Web Apps

Code Sandboxes

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




  • SVGOMG - SVGO's Missing GUI
  • flubber - Tools for smoother shape animations
    • yarn add flubber / npm i -S flubber

Conversions and unicode


Package management and publishing

  • np - A better npm publish
  • size-limit - Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error
  • bundlesize - Keep your bundle size in check
  • nps All the benefits of npm scripts without the cost of a bloated package.json and limits of json

Commit hooks

Code formatting and linting

Features and feature detection


  • Bundlephobia - find the cost of adding a npm package to your bundle

Performance testing and monitoring

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:

A11y Chrome extensions


Continuous integration





Programming fonts

Code colour schemes

Regular expressions

  • Regex101 Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment