Skip to content

Instantly share code, notes, and snippets.

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

General resources

  • Devdocs.io - 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
  • Shields.io - 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

CSS

CSS-in-JS

  • 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

JavaScript

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: https://snyk.io/vuln/npm:{package} e.g. https://snyk.io/vuln/npm:react

Useful JS links

Framework agnostic packages

General utilities

Async

Node

Responsive

  • 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

Date

  • 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

Scrolling

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

Carousels

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

Animation

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.

Immutable

  • 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

Typography

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

Polyfills

React

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

Microservices/Serverless

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

Testing

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

APIs

HTML

SVG

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

Conversions and unicode

Tooling

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

Performance

  • 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

DevOps

Continuous integration

Hosting

Domains

Design

Typography

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
You can’t perform that action at this time.