Table of contents
- 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 Tricks "Complete Guide to Flexbox"
- CSS Tricks "Complete Guide to Grid"
- Cubic bezier curve creator
- Ceaser - Cubic bezier curve generator
- CSS Triggers - find out what CSS properties trigger Paint/Layout/Composite renders
- Fluid-responsive font-size calculator - To scale typography smoothly across viewport widths.
- Browserhacks - Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs
- Absolute centering - useful techniques for absolute centering in CSS
- 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: https://snyk.io/vuln/npm:{package} e.g. https://snyk.io/vuln/npm:react
- Lodash - A modern JavaScript utility library delivering modularity, performance & extras.
yarn add lodash/npm i -S lodash
- Just - A library of dependency-free utilities that do just do one thing (like Lodash but smaller)
- Install each util independently
- Read the tradeoffs document to see if Lodash is better
- auto-bind - Automatically bind methods to their class instance
yarn add auto-bind/npm i -S auto-bind
- object-get - Access nested property values at any depth with a simple expression
yarn add object-get/npm i -S object-get
- liteready - A lightweight DOM ready.
yarn add lite-ready/npm i -S lite-ready
- passport - Simple, unobtrusive authentication for Node.js
yarn add passport/npm i -S passport
- attach.js - Attach.js removes dependancy on messy CSS selectors when attaching JavaScript to the page. Very useful for non-React/Angular/SPA projects
yarn add attach.js/npm i -S attach.js
- gator - Gator is a Javascript event delegation library
yarn add gator/npm i -S gator
- get-size - Get the size of elements
yarn add get-size/npm i -S get-size
- length.js - Library for length units conversion
yarn add length.js/npm i -S length.js
- action-outside - Invoke a callback function when clicked or tabbed outside one or multiple DOM elements
yarn add action-outside/npm i -S action-outside
- select-dom - Lightweight
querySelector/Allwrapper that outputs an Arrayyarn add select-dom/npm i -S select-dom
- memoizee - Complete memoize/cache solution for JavaScript
yarn add memoizee/npm i -S memoizee
- memoize-one: A memoization library which only remembers the latest invocation
- kind-of - Get the native JavaScript type of a value, fast.
yarn add kind-of/npm i -S kind-of
- iterare: Array methods + ES6 Iterators =
yarn add iterare/npm i -S iterareyarn add mergestate/npm i -S mergestate
- eases: a grab-bag of modular easing equations
- normalizr: Normalizes nested JSON according to a schema
- lazy-value: Create a lazily evaluated value
- mitt: 🥊 Tiny 200 byte functional event emitter / pubsub.
- text-mask: Input mask for React, Angular, Ember, Vue, & plain JavaScript
- fast-equals: A blazing fast equality comparison, either shallow or deep
- fast-copy: A blazing fast deep object copier
- compute-scroll-into-view: Utility for calculating what should be scrolled, how it's scrolled is up to you
- arr: A collection of tiny, highly performant Array.prototype alternatives
- axios - Promise based HTTP client for the browser and node.js
yarn add axios/npm i -S axios
- cross-fetch - Universal WHATWG Fetch API for Node, Browsers and React Native
yarn add cross-fetch/npm i -S cross-fetch
- awaity - A functional, lightweight alternative to bluebird.js, built with
async/awaitin mindyarn add awaity/npm i -S awaity
- loadjs: A tiny async loader / dependency manager for modern browsers (789 bytes)
- Express
- nodebestpractices - The largest Node.JS best practices list. Curated from the top ranked articles and always updated
- dumper.js: A better and pretty variable inspector for your Node.js applications
- responsive-watch - Watch some media queries and react when they change
yarn add responsive-watch/npm i -S responsive-watch
- 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
- sharp: High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips library.
- IMGIX - Real-time image processing and image CDN
- 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
- Popmotion: Monorepo for Popmotion and Pose animation packages
- ramjet: Morph DOM elements from one state to another with smooth animations and transitions
- anime: JavaScript Animation Engine
- GSAP, the standard for JavaScript HTML5 animation | GreenSock
- 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
- create-react-app: Create React apps with no build configuration.
- react-bits: ✨ React patterns, techniques, tips and tricks ✨
- react-powerplug: Renderless Containers
- formik - Build forms in React, without the tears 😭
yarn add formik/npm i -S formik
- react-router: Declarative routing for React
- Reach Router
- react-fns - React Components for common Web APIs
yarn add react-fns/npm i -S react-fns
- react-portal - React component for transportation of modals, lightboxes, loading bars... to document.body
yarn add react-portal/npm i -S react-portal
- react-ideal-image: 🖼️ An Almost Ideal React Image Component
- react-adopt: Compose render props components like a pro
- downshift: 🏎 Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components
- react-loadable: A higher order component for loading components with promises.
- react-portal: React component for transportation of modals, lightboxes, loading bars... to document.body
- redux: Predictable state container for JavaScript apps
- parket - A library to manage application state, heavily inspired by mobx-state-tree
yarn add parket/npm i -S parket
- unstated: State so simple, it goes without saying
- mergeState: How to Stop Worrying and Use Nested Object/Array in React/Redux States
- 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...
- Webpack - script/asset bundler
- Webpack recipes
- ifdef-loader - Webpack loader for JavaScript/TypeScript conditional compilation
- Parcel - Blazing fast, zero configuration web application bundler
- microbundle - Zero-configuration bundler for tiny modules
- rollup.js - Rollup is a module bundler for JavaScript
- Storybook - UI dev environment you'll love to use
- react-styleguidist - Isolated React component development environment with a living style guide
- Docusaurus · Easy to Maintain Open Source Documentation Websites
- Docz
- design-system-utils - Design system framework for modern front-end projects
- Jest - Delightful JavaScript Testing
yarn add jest/npm i -S jest- majestic - Zero config UI for Jest
- Cypress - end-to-end testing
- dom-testing-library: 🐙 Simple and complete DOM testing utilities that encourage good testing practices.
- react-testing-library: 🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
- Chance - Random generator helper for JavaScript
- faker.js: generate massive amounts of fake data in Node.js and the browser
- nock HTTP server mocking and expectations library for Node.js
- 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
- Postman - used to develop, test and monitor APIs
- MockAPI - create a mock API
- jsonbin - A personal JSON store as a RESTful service
- test-cors.org
- github.com/joshbuchea/HEAD the definitive resource for everything that could go in the head of your document
- SVGOMG - SVGO's Missing GUI
- flubber - Tools for smoother shape animations
yarn add flubber/npm i -S flubber
- Transform All important transforms at one place
- svg2jsx
- JSON to JavaScript object literal | Online Tool
- Unminify JS, CSS and HTML Code
- Multi-Encoder
- Unicode code converter
- 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
- husky: Git hooks made easy
- precise-commits: Painlessly apply Prettier by only formatting lines you have modified anyway!
- lint-staged: 🚫💩 — Run linters on git staged files
- Can I Use... - Browser support tables for modern web technologies (HTML5, CSS3, JavaScript etc)
- JavaScript compatibility table
- Bundlephobia - find the cost of adding a npm package to your bundle
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.
- Interactive WCAG guidelines - cheatsheet for A, AA & AAA
- awesome-a11y - massive list of a11y-related resources & information
- tenon.io - a11y tester
- a11yproject.com/checklist.html - a11y checklist
- a11yproject.com - a11y resources
- w3.org/WAI/ER/tools/ - list of a11y tools from the W3C
- allyjs.io - JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler
- Four principles of Accessibility
- Aria landmarks example
- A11y Style-guide - markup examples and best practices
- Inclusive Components - A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
- Color contrast checker
- Accessible color palette builder - An prototype to help designers build accessible color palettes
- Practical ARIA Examples
- Color Contrast Analyzer
- NoCoffee - has options for testing color blindness and other sight-related issues
- Input: Fonts for Code
- IBM Plex Mono
- FiraCode: Monospaced font with programming ligatures
- fantasque-sans: A font family with a great monospaced variant for programmers.
- Dracula A dark theme for Visual Studio Code and 50+ apps
- Oceanic Next Theme
- 🌌 Night Owl A VS Code dark theme for contrast for nighttime coding
- Nord
- Regex101 Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript