awesome-web-dev-resources

👌 My collection of go-to web development resources
https://github.com/mrmartineau/awesome-web-dev-resources

Last synced: 2 days ago
JSON representation

Really useful tools
- Transform.tools - to-typescript) to convert JSON to TypeScript interfaces
- Epoch Convert
- CopyChar
- Whitespaces
- CSS2JS - in-JS](https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js)https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js
- Smooth Shadow
- Crontab.guru
- Key.js
- Glob tester
- HTML De-crapulator
- px-rem-em converter
- Squoosh
- Unicode code converter
- svgomg
- URL-encoder for SVG
- JSON Editor Online
- JSON Editor Online
- Tiny Helpers - purpose online tools for web developers...
📦 Finding and vetting npm packages
- CSS Tricks "Complete Guide to Flexbox"
- CSS Tricks "Complete Guide to Grid"
- CSS Triggers
- Fluid-responsive font-size calculator
- runpkg
- Browserhacks
- Shape Divider App
- Ceaser
- CSSFX - to-copy CSS effects
- CSSFX - to-copy CSS effects
- emma
- npmvet
- Bundlephobia
- npms
- pika
- Absolute centering
- runpkg
- pika
- Browserhacks
- modern-css-reset - bones CSS reset for modern web development
CSS-in-JS
- Stitches - in-JS with near-zero runtime
- vanilla-extract - runtime Stylesheets-in-TypeScript
- goober - in-js solution
- Polished
- Theme UI - based design principles
- Styled Components - in-JS for React
- Emotion - in-JS library
- Theme UI - based design principles
- linaria - runtime CSS in JS library
- Design System Utils - end projects (made by me!)
- styled-by
- xstyled - components 💅
Useful JS links
- JS module import/export syntax
- JavaScript Event KeyCodes
- JavaScript Visualizer
- Does it mutate?
- jsPerf
- HTML DOM
- HTML DOM
- JS module import/export syntax
- modern-js-cheatsheet
Framework agnostic packages
- General utilities
  - tradeoffs document
  - evt
  - words
  - action-outside
  - select-dom
  - left-pad
  - title
  - clack
  - clack-react
  - Just - free utilities that do just do one thing (like Lodash but smaller)
  - tiny-get - weight lodash.get equivalent utility
  - liteready
  - passport
  - get-size
  - length.js
  - memoizee
  - memoize-one
  - kind-of
  - iterare
  - eases-jsnext - bag of modular easing equations
  - normalizr
  - lazy-value
  - fast-equals
  - fast-copy
  - compute-scroll-into-view
  - arr
  - timedstorage
  - dont-go - side library with zero dependencies to change the title and/or favicon of the page when it is inactive
  - always-done - in replacement for async-done - pass 100% of its tests plus more
  - no-scroll
  - libphonenumber-js
  - text-mask
  - msk
  - focus-trap
  - tinykeys
  - js-humanize
  - pupa
  - sub-in - and-replace utility for strings in Javascript
  - color-hash
  - string-similarity
  - cuid - resistant ids optimized for horizontal scaling and performance
  - obj-str - in replacement for the classnames module
  - clsx - in replacement for the classnames module
  - xstate
  - tasktimer
  - rough-notation - drawn annotations on a web page
  - ouml
  - is
  - big.js - precision decimal arithmetic
  - js-proper-url-join
- Date
- Carousels
  - Flickity
  - Swiper
- Animation
  - Vanilla-tilt.js
  - ramjet
  - anime
  - GSAP
- Media and Images
  - IMGIX - time image processing and image CDN
  - images-loaded
  - lazysizes
  - sharp
- Async
  - axios
  - axios-retry
  - redaxios
  - cross-fetch
  - awaity
  - loadjs
  - await-to-js - catch
- Node
  - Express
  - helmet
  - reqresnext
  - lusca
  - cookie-session - based session middleware
  - nodebestpractices
  - http-terminator
  - uuid - compliant UUIDs in JavaScript
  - http-errors
  - boom - friendly error objects
  - deno
  - nanomatch
  - yn
  - ncp
  - pino
  - caterpillar
  - cabin
  - consola
- Responsive
- Scrolling
  - scroll-watcher
  - scrolldir
- Web workers
  - workerize
  - greenlet - function version of workerize.
- Immutable
  - immer
  - use-immer
  - unchanged
  - seamless-immutable - compatible with normal JS Arrays and Objectsseamless-immutable`
  - mutik
- Typography
  - fitty
- Polyfills
  - resize-observer-polyfill
⚛️ React
- React-specific libs:
  - useHooks
  - Reach Router
  - react-fns
  - Rooks
  - Hooks.Guide
  - react-fns
  - Hooks.Guide
  - formik
  - react-powerplug
  - react-router
  - react-portal
  - react-ideal-image
  - react-adopt
  - downshift
  - react-loadable
  - js-lingui: 🌍📖
  - react-mq
  - react-media
  - merge-props
  - react-uid - less container for generating UID for a11y, consistent react key, and any other good reason 🦄
  - react-axe
  - use-click-away
  - react-tiny-virtual-list
  - react-laag
  - react-dnd
  - beautiful-react-hooks - up your components and hooks development 🔥
  - react-adaptive-hooks
  - use-local-storage-state
- Server-rendered React
  - Next.js - Framework for server-rendered or statically-exported React apps
  - next-plugins
- State management
  - awesome-redux
  - jotai
  - redux
  - reselect
  - redux-saga
  - redux-saga-routines - saga
  - redux-thunk
  - parket - state-tree
  - unstated
  - mergeState
  - effector
  - Recoil
- Polyfills
  - reactjs.org
  - create-react-app
  - react-app-rewired - react-app webpack configs without ejecting
  - react-philosophies
  - react-bits
Static site generators
- Server-rendered React
  - Eleventy
  - Gatsby
TypeScript
- Server-rendered React
  - typescriptlang.org
  - What's new in TypeScript
  - TypeScript Deep Dive
  - TypeScript Evolution
  - JSON to Typescript Interface
  - Fish shell - friendly command line shell
  - Starship - Shell Prompt
  - TypeScript Evolution
  - JSON to Typescript Interface
  - TypeScript Deep Dive
  - TypeScript Evolution
  - react-typescript-cheatsheet
  - clean-code-typescript
  - type-fest
  - My fish_config
  - awesome-fish
  - tide
CLI apps
- Server-rendered React
  - awesome-cli-apps
  - serve
  - SpaceVim - driven modular vim distribution - The ultimate vim configuration
Code bundlers
- Server-rendered React
  - esbuild
  - Webpack
  - Parcel
  - rollup.js
  - swc - fast compiler written in rust; producing widely-supported javascript from modern standards and typescript
  - preconstruct
  - Webpack recipes
  - ifdef-loader
  - microbundle - configuration bundler for tiny modules
  - ncc - style.
  - fastpack
Package management and publishing
- Server-rendered React
  - npm-config
  - nps
  - np
  - size-limit
  - bundlesize
  - Dependabot - to-date
  - patch-package
  - madge
Commit hooks
- Server-rendered React
  - react-testing-library
  - Stryker Mutator
  - Cypress - to-end testing
  - cypress-testing-library
  - cypress-axe - core
  - react-testing-library
  - Stryker Mutator
  - lefthook
  - husky
  - lint-staged: 🚫💩
  - majestic
  - jest-chain
  - jest-extended
  - snapshot-diff
  - jest-date-mock
  - start-server-and-test
  - dom-testing-library
  - react-testing-library 🐐
  - react-testing-library
  - react-hooks-testing-library
  - Chance
  - faker.js
  - nock
  - given2
  - benny
  - benchmark.js
  - ui-testing-best-practices
Code formatting and linting
- Server-rendered React
Miscellaneous
- Server-rendered React
  - CodeSandbox
  - CodeShare
  - Glitch
  - jsonbin
  - test-cors.org
  - Reqres - API ready to respond to your AJAX requests
  - Mirage JS
  - Postwoman
  - Workbox
  - Codepen - React front-end demos and prototypes
  - MockAPI
  - npm-run-all - scripts in parallel or sequential
  - cross-port-killer
  - envinfo
  - mkcert - config tool to make locally trusted development certificates with any names you'd like
GraphQL
- Server-rendered React
  - GraphQL Playground
  - Apollo GraphQL
  - JSON generator
  - JSON Editor Online
  - MetaTags.io
  - HEY META
  - Rich Link Preview
  - A Practical Guide to SVGs on the web
  - Get Waves
  - Blobmaker
  - Hero Patterns
  - GraphQL Playground
  - GraphQL Playground
  - graphql-directives
  - urql
  - graphql-request
  - graphql-lodash
  - fx - line tool and terminal JSON viewer 🔥
  - github.com/joshbuchea/HEAD
  - flubber
Icons
- Server-rendered React
SVG/Image Media compression
- Server-rendered React
Performance testing and monitoring
- Server-rendered React
  - WebPageTest
  - Calibre
  - Website Speed Test Image Analysis Tool
  - Subtract Guides
  - Storybook
  - Docusaurus
  - Docute
  - Docute
  - Subtract Guides
  - Docute
  - Lighthouse
  - react-styleguidist - Isolated React component development environment with a living style guide
  - Docute
  - playroom
A11y tools and resources:
- Server-rendered React
- A11y Chrome extensions
  - Accessibility Insights for Web
  - Color Contrast Analyzer
  - NoCoffee - related issues
  - HTTP Status Codes
  - HTTP Status Codes
  - Color Contrast Analyzer
Continuous integration
- A11y Chrome extensions
  - Bitrise
  - Travis CI - source
Domains
- A11y Chrome extensions
  - iwantmyname
  - iwantmyname
Typography
- A11y Chrome extensions
  - Adaptive Modular Scale
  - Modular Scale
VS Code
- A11y Chrome extensions
Programming fonts
- A11y Chrome extensions
Code colour schemes
- A11y Chrome extensions
  - Monokai Pro
  - Ayu (Mirage)
  - Dracula
  - Oceanic Next Theme
  - Nord
  - VSCodeThemes
  - Regex101
  - Dracula
  - 🌌 Night Owl
  - themer
  - Web Skills
Uncategorized
- Uncategorized
  - DevHints
  - Badgen
  - Shields.io - flare-green.svg?style=flat-square) to your documentation/readmes
  - Git Flight Rules
  - browser-2020
Microservices/Serverless
- Server-rendered React
  - micro
  - awesome-micro
Creating CLI apps
- Server-rendered React
  - gluegun - powered CLIs
  - inquirer
  - commander - line interfaces made easy
  - sade - line interface (CLI) applications for Node.js that are fast, responsive, and helpful!
Docker
- A11y Chrome extensions
  - dockle - Practice Docker Image, Easy to start

Programming Languages

JavaScript 108 TypeScript 54 Shell 4 HTML 3 Go 3 Rust 2 Dockerfile 1 Vim Script 1 OCaml 1 Python 1

Categories

Framework agnostic packages 102 ⚛️ React 47 Commit hooks 27 A11y tools and resources: 22 GraphQL 20 📦 Finding and vetting npm packages 20 Really useful tools 18 TypeScript 17 Miscellaneous 15 Performance testing and monitoring 14 CSS-in-JS 12 Code bundlers 11 Code colour schemes 11 SVG/Image Media compression 9 Useful JS links 9 Icons 9 Package management and publishing 8 Programming fonts 6 Code formatting and linting 5 Uncategorized 5 Creating CLI apps 4 VS Code 3 CLI apps 3 Microservices/Serverless 2 Domains 2 Static site generators 2 Typography 2 Continuous integration 2 Docker 1

Sub Categories

Server-rendered React 164 General utilities 50 A11y Chrome extensions 33 React-specific libs: 28 Node 18 State management 12 Async 7 Polyfills 6 Immutable 5 Uncategorized 5 Media and Images 4 Animation 4 Responsive 3 Date 3 Carousels 2 Web workers 2 Scrolling 2 Typography 1

Keywords

javascript 38 react 34 nodejs 14 cli 11 typescript 8 css 6 redux 6 jest 6 reactjs 5 performance 5 testing 5 node 5 npm-package 5 npm 5 date 4 react-hooks 4 svg 4 react-native 4 awesome-list 4 awesome 4 best-practices 4 http 3 json 3 command-line 3 state 3 css-in-js 3 express 3 node-js 3 es6 3 middleware 3 webpack 3 cli-app 3 font 3 a11y 3 list 3 render-props 3 assertions 3 react-components 3 terminal 3 vscode 3 hooks 3 javascript-library 2 utilities 2 prompt 2 scrolling 2 styled-components 2 matchers 2 resize 2 string 2 chrome 2