Skip to content

cyrilbois/awesome-web-dev-resources

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits

README.md

README.md

 
 

Repository files navigation

👌
Awesome Web Development Resources

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
  • Badgen
  • Shields.io - to your documentation/readmes
  • Git Flight Rules - A guide for astronauts (now, programmers using Git) about what to do when things go wrong.

📦 Finding and vetting npm packages

  • pika - A searchable catalog of modern "module" packages on npm
  • npms - A better and open source search for node packages
  • emma - 📦 Terminal assistant to find and install node packages
  • npmvet - A simple CLI tool for vetting npm package versions
  • Bundlephobia - See the "cost" of any npm package
  • Snyk - 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
  • runpkg - Explore, learn about and perform static analysis on npm packages in the browser

🎨 CSS

CSS-in-JS

  • CSS-in-JS libraries
  • Design System Utils - Design system framework for modern front-end projects (made by me!)
  • Polished - A lightweight toolset for writing styles in JavaScript
  • styled-by Simple and powerful lib to handle styled props in your components
  • xstyled - Consistent theme based CSS for styled-components 💅

JavaScript

Useful JS links

Framework agnostic packages

General utilities

  • Lodash - A modern JavaScript utility library delivering modularity, performance & extras.
  • Just - A library of dependency-free utilities that do just do one thing (like Lodash but smaller)
  • tiny-get - A minimal-weight lodash.get equivalent utility
  • auto-bind - Automatically bind methods to their class instance
  • liteready - A lightweight DOM ready.
  • passport - Simple, unobtrusive authentication for Node.js
  • attach.js - Attach.js removes dependancy on messy CSS selectors when attaching JavaScript to the page. Very useful for non-React/Angular/SPA projects
  • gator - Gator is a Javascript event delegation library
  • get-size - Get the size of elements
  • length.js - Library for length units conversion
  • action-outside - Invoke a callback function when clicked or tabbed outside one or multiple DOM elements
  • select-dom - Lightweight querySelector/All wrapper that outputs an Array
  • memoizee - Complete memoize/cache solution for JavaScript
  • memoize-one A memoization library which only remembers the latest invocation
  • kind-of - Get the native JavaScript type of a value, fast.
  • iterare - Array methods + ES6 Iterators =
  • 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
  • timedstorage A library for storing and expiring objects in window.localstorage
  • left-pad - String left pad
  • dont-go - A small client-side library with zero dependencies to change the title and/or favicon of the page when it is inactive
  • always-done - 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
  • words - Linguistic javascript modules
  • no-scroll - Disable scrolling on an element that would otherwise scroll
  • libphonenumber-js - A simpler (and smaller) rewrite of Google Android's libphonenumber library
  • msk - Small library to mask strings
  • focus-trap - Trap focus within a DOM node
  • pino - 🌲 super fast, all natural json logger 🌲

Async

  • axios - Promise based HTTP client for the browser and node.js
  • cross-fetch - Universal WHATWG Fetch API for Node, Browsers and React Native
  • awaity - A functional, lightweight alternative to bluebird.js, built with async / await in mind
  • loadjs A tiny async loader / dependency manager for modern browsers (789 bytes)

Node

  • 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

  • responsive-watch - Watch some media queries and react when they change
  • tornisTornis helps you watch and respond to changes in your browser's viewport 🌲
  • actual - Determine actual CSS media query breakpoints via JavaScript

Media and Images

  • images-loaded - Wait for images to load using promises. No dependencies.
  • 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.

Image services

  • 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

Date

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

Scrolling

Carousels

Animation

  • Popmotion Simple animation libraries for delightful user interfaces
  • 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
  • Vanilla-tilt.js - A smooth 3D tilt javascript library forked from Tilt.js

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
  • unchanged - A tiny, fast, unopinionated handler for updating JS objects and arrays immutably
  • seamless-immutable - Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objectsseamless-immutable`

Typography

  • fitty - Makes text fit perfectly

Polyfills

⚛️ React

reactjs.org

React-specific libs:

  • react-powerplug - Renderless Containers
  • formik - Build forms in React, without the tears 😭
  • react-router Declarative routing for React
  • Reach Router
  • react-fns - React Components for common Web APIs
  • react-portal - React component for transportation of modals, lightboxes, loading bars... to document.body
  • react-ideal-image 🖼️ An Almost Ideal React Image Component
  • react-adopt Compose render props components like a pro
  • downshift
  • 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
  • js-lingui: 🌍📖 - A readable, automated, and optimized (5 kb) internationalization (Intl / i18n) for JavaScript
  • react-mq - Barebones CSS media query component for React, ~560 bytes
  • react-media - CSS media queries for React. This is SSR compatible as well.

React patterns

  • Hooks.Guide - Collection of React hooks curated by the community
  • useHooks - Easy to understand React Hook recipes

State management

  • redux Predictable state container for JavaScript apps
  • parket - A library to manage application state, heavily inspired by mobx-state-tree
  • unstated State so simple, it goes without saying
  • mergeState How to Stop Worrying and Use Nested Object/Array in React/Redux States

Server-rendered React

Static site generators

Microservices/Serverless

TypeScript

typescriptlang.org

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
  • ncc - Node.js Compiler Collection. Simple CLI for compiling a Node.js module into a single file, together with all its dependencies, gcc-style.

Command Line, Terminal and shells

Fish shell - The user-friendly command line shell

Creating CLI apps

  • gluegun - A delightful toolkit for building Node-powered CLIs
  • inquirer - A collection of common interactive command line user interfaces
  • commander - node.js command-line interfaces made easy
  • sade - 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

  • hub - hub is an extension to command-line git that helps you do everyday GitHub tasks without ever leaving the terminal
  • serve - Static file serving and directory listing
  • awesome-cli-apps - A curated list of command line apps
  • SpaceVim - A community-driven modular vim distribution - The ultimate vim configuration

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
  • Dependabot - Dependabot creates pull requests to keep your dependencies secure and up-to-date
  • npm-config (docs) - More than you probably want to know about npm configuration
  • patch-package - Fix broken node modules with no fuss 📦👌

Commit hooks

Testing

Code formatting and linting

Progressive Web Apps

  • Workbox & (repo) - JavaScript libraries for 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

JSON

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

HTML

SVG/Image Media compression

SVG

  • flubber - Tools for smoother shape animations

Conversions and unicode

Features and feature detection

Performance

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

Performance testing and monitoring

Design

Design Systems and documentation

  • 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
  • Docute - The fastest way to create a documentation site for your project
  • playroom - 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:

A11y Chrome extensions

DevOps

HTTP Status Codes

Continuous integration

Hosting

Domains

Design

Typography

IDEs and Text Editors

themer - 🎨 themer takes a set of colors and generates themes for your apps (editors, terminals, wallpapers, and more)

VSCode

Programming fonts

Code colour schemes

Regular expressions

  • Regex101 Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript

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

About

👌 My collection of go-to web development resources

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published