/awesome-1

A curated list of awesome frontend development resources.

Awesome Frontend Development Resources

A curated list of awesome frontend development resources

Trend Micro

CSS Styles

  • trendmicro-ui - CSS styles for creating a user interface according to Trend Micro UI style guides.

Linter

Component Generator

React Components

Ask Me Anything

Audio

  • Tone.js - A Web Audio framework for making interactive music in the browser.

Awesome

Algorithms

Animation

Authentication

  • passport - Simple, unobtrusive authentication for Node.js.
  • passport-saml - SAML 2.0 authentication with Passport.

Automation

  • chromeless - 🖥 Chrome automation made simple. Runs locally or headless on AWS Lambda.
  • headless-recorder - Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script.
  • playwright - Node.js library to automate Chromium, Firefox and WebKit with a single API. https://playwright.dev/
  • probot - 🤖 A framework for building GitHub Apps to automate and improve your workflow. https://probot.github.io
  • puppeteer - Headless Chrome Node API.
  • puppeteer-recorder - Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script.
  • robotjs - Node.js Desktop Automation. Control the mouse, keyboard, and read the screen.

Boilerplate

Books

Build Tools

Cheatsheet

Color

  • color - 🌈 Javascript color conversion and manipulation library
  • color-name - A JSON with color names.
  • colornames - Map color names to HEX color values.

Command-line & Terminal Utilities

  • blessed - A high-level terminal interface library for node.js.
  • chalk - Terminal string styling done right.
  • cli-table - Pretty unicode tables for the CLI with Node.js.
  • commander.js - Node.js command-line interfaces made easy.
  • Inquirer.js - A collection of common interactive command line user interfaces.
  • node-progress - Flexible ascii progress bar for nodejs.
  • playwright-cli - CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.
  • shelljs - Portable Unix shell commands for Node.js.
  • terminalizer - 🦄 Record your terminal and generate animated gif images.
  • xterm.js - Full xterm terminal, in your browser. http://xtermjs.org/

Compiler

Computer Vision

Control Flow

  • async - Async utilities for node and the browser.
  • co - The ultimate generator based flow-control goodness for nodejs (supports thunks, promises, etc).

CSS

CSS Preprocessor

  • Less - Leaner CSS.
  • Sass - Sass makes CSS fun again.
  • Stylus - Expressive, robust, feature-rich CSS language built for nodejs.

Data Visualization

Database

  • mongojs - Node.js module that implements the offical mongo api.

Date

  • moment - Parse, validate, manipulate, and display dates in javascript.
  • moment-timezone - Timezone support for moment.js.

Debugging

  • ndb - ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools.

Deep Learning

  • convnetjs - Deep Learning in Javascript. Train Convolutional Neural Networks (or ordinary ones) in your browser.

Documentation

  • apidoc - RESTful web API Documentation Generator.
  • documentation - Beautiful, flexible, powerful js docs.

DOM

  • class-list - A cross-browser class list.
  • component-delegate - Event delegation component.
  • delegate-dom - Event delegation library.
  • element-class - Like .addClass and .removeClass from jquery but without dependencies.
  • dom-classes - Cross-browser element class manipulation.
  • dom-events - DOM event binding and emitting.
  • dom-select - Select DOM.
  • dom-style - Library to manipulate CSS properties.
  • dom-value - Get / set form input values.
  • dom-to-image - Generates an image from a DOM node using HTML5 canvas.
  • in-view - Get notified when a DOM element enters or exits the viewport.
  • is-dom - Check if the given object is a dom node.
  • jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards, for use with Node.js.
  • offset - Get the xy offset of an element.
  • synthetic-dom-events - Create DOM events for builtin event types.

Electron

Feature Control - LaunchDarkly

  • featureflags - The guide to decoupling feature rollout from code deployment for feature flag-driven development. Feature flags give a software organization the power to reduce risk, iterate quicker, and get more control.
  • js-client-sdk - LaunchDarkly Client-side SDK for Browser JavaScript.
  • js-sdk-common - Code shared between all LaunchDarkly client-side JS-based SDKs.
  • node-server-sdk - LaunchDarkly Server-side SDK for Node.js.
  • node-client-sdk - LaunchDarkly Client-side SDK for Node.js.
  • react-client-sdk - LaunchDarkly Client-side SDK for React.js.

Frontend Performance

Game

Graphics

Grid

  • grid - Drag and drop library for two-dimensional, resizable and responsive lists.

HTTP

  • node-fetch - A light-weight module that brings window.fetch to node.js and io.js.
  • node-http-proxy - A full-featured http proxy for node.js
  • request - Simplified HTTP request client.
  • superagent - Ajax with less suck - (and node.js HTTP client to match).

I18n

  • i18next - An internationalization framework.
  • i18next-scanner - Scan your code, extract translation keys/values, and merge them into i18n resource files.

Icon Fonts

Image Processing

  • color-thief - Grabs the dominant color or a representative color palette from an image. Uses javascript and canvas.
  • cropper - A simple jQuery image cropping plugin.
  • cropperjs - JavaScript image cropper.
  • pixelmatch - The smallest, simplest and fastest JavaScript pixel-level image comparison library.
  • zooming - Image zoom that makes sense. http://desmonding.me/zooming/

Inversion of Control

  • awilix - Extremely powerful Inversion of Control (IoC) container for Node.JS.
  • awilix-express - Awilix helpers/middleware for Express.

IoT

  • cylon - JavaScript framework for robotics, drones, and the Internet of Things (IoT).
  • Espruino - The Espruino JavaScript interpreter.
  • johnny-five - JavaScript Robotics and IoT programming framework.
  • node-hid - Access USB HID devices through Node.JS.
  • node-red - A visual tool for wiring the Internet of Things
  • node-serialport - Node.js package to access serial ports for reading and writing OR Welcome your robotic JavaScript overlords.
  • node-usb - Improved USB library for NodeJS.

Job Scheduling and Queues

  • agenda - ightweight job scheduling for Node.js.
  • agendash - Agenda Dashboard.
  • agenda-rest - Scheduling as a Service.
  • bull - Premium Queue package for handling distributed jobs and messages in NodeJS.

Json Web Token (JWT)

  • express-jwt - connect/express middleware that validates a JsonWebToken (JWT) and set the req.user with the attributes.
  • node-jsonwebtoken - JsonWebToken implementation for node.js.
  • socketio-jwt - Authenticate socket.io incoming connections with JWTs.

Logging

Machine Learning

Markdown

Math

  • big - A small, fast JavaScript library for arbitrary-precision decimal arithmetic.
  • bignumber.js - A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic.
  • expr-eval - Mathematical expression evaluator in JavaScript.
  • frac - ➗ Rational approximation with bounded denominator. http://oss.sheetjs.com/frac/

Mail

  • nodemailer - Send e-mails with Node.JS – easy as cake!

Messaging Applications

Micro Frontend

Micro-generator Framework

  • plop - Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity.

Notifications

  • HTML5-Desktop-Notifications - Desktop notifications plugin for Chrome, Safari, Firefox and IE9.
  • notify.js - A handy wrapper for the Web Notifications API.
  • push.js - A compact, cross-browser solution for Javascript desktop notifications.

Object

  • deepmerge - A library for deep (recursive) merging of Javascript objects.
  • defaults-deep - Like extend but recursively copies only the missing properties/values to the target object.
  • flat - 🚂 Flatten/unflatten nested Javascript objects
  • merge-deep - Recursively merge values in a JavaScript object.
  • omit-deep - Recursively omit specified keys from an object.
  • pretty-format - ✨ Stringify any JavaScript value.
  • sort-object - Sort the keys in an object.
  • sortobject - Deeply sort an object by its keys without mangling any arrays inside of it.

P2P

  • p2p-graph - Real-time P2P network visualization with D3.
  • peerjs - Simple peer-to-peer with WebRTC.
  • webtorrent - ⚡ Streaming torrent client for the web.
  • discovery-channel - Search for a key across multiple discovery networks and find peers who answer.
  • discovery-server - A tcp/utp server that auto announces itself using discovery-channel.
  • discovery-swarm - A network swarm that uses discovery-channel to find peers.

Polyfill

  • babel-polyfill - Provides polyfills necessary for a full ES2015+ environment.
  • es5-shim - ECMAScript 5 compatibility shims for legacy (and modern) JavaScript engines.
  • es6-shim - ECMAScript 6 compatibility shims for legacy JavaScript engines.
  • es6-symbol - ECMAScript 6 Symbol polyfill.
  • es7-shim - ECMAScript 7 compatibility shims for legacy JavaScript engines.
  • fetch - A window.fetch JavaScript polyfill.
  • polyfill - JavaScript Polyfills, Shims and More.
  • polyfill-service - Automatic polyfill service. https://polyfill.io/v2/docs/
  • webvr-polyfill - Use WebVR today, without requiring a special browser build.

Presentation

Private NPM

  • verdaccio - A lightweight private npm proxy registry (sinopia fork).

Productivity

  • pre-commit - Automatically installs a git pre-commit script in your git repository which runs your npm test on pre-commit.
  • pre-push - Adiciona hook para pre-push do git.

Protocol Buffers

React

React Hooks

React Virtualization

  • react-tiny-virtual-list - A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, scrolling to index, and more!
  • react-virtualized - React components for efficiently rendering large lists and tabular data.
  • react-virtualized-auto-sizer - Standalone version of the AutoSizer component from react-virtualized.
  • react-window - React components for efficiently rendering large lists and tabular data.

React Native

Real-time

  • socket.io - Realtime application framework (Node.JS server).

Redux

  • redux - Predictable state container for JavaScript apps.
  • redux-auth - Complete token authentication system for react + redux that supports isomorphic rendering.
  • redux-connect - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React.
  • redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI.
  • redux-form - A Higher Order Component using react-redux to keep form state in a Redux store.

Regex

Security

  • csurf - CSRF token middleware.
  • helmet - Help secure Express apps with various HTTP headers.

Serverless

  • serverless - Serverless Framework – Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more!
  • examples - Serverless Examples – A collection of boilerplates and examples of serverless architectures built with the Serverless Framework on AWS Lambda, Microsoft Azure, Google Cloud Functions, and more. https://www.serverless.com/examples/

State Machine

Static Site Generator

Storage

  • keyv - Simple key-value storage with support for multiple backends.
  • store.js - Cross-browser storage for all use cases • Used across the web • See below for v2.0 news!

Talks

Terraform

Testing

Text Editor

Tools

  • arkit - JavaScript architecture diagrams and dependency graphs.
  • autocannon - fast HTTP/1.1 benchmarking tool written in Node.js.
  • bash-git-prompt - An informative and fancy bash prompt for Git users.
  • codemod - Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention.
  • concurrently - Run commands concurrently. Like npm run watch-js & npm run watch-less but better.
  • cz-cli - The commitizen command line utility.
  • fx - Command-line JSON processing tool 🔥.
  • gnomon - Utility to annotate console logging statements with timestamps and find slow processes.
  • httpie - CLI HTTP client, user-friendly curl replacement with intuitive UI, JSON support, syntax highlighting, wget-like downloads, extensions, etc.
  • http-server - A simple zero-configuration command-line http server.
  • imagemin - Minify images seamlessly.
  • js-code-to-svg-flowchart - A visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.
  • jscodeshift - A JavaScript codemod toolkit.
  • json-server - Get a full fake REST API with zero coding in less than 30 seconds (seriously).
  • node-mkdirp - Recursively mkdir, like mkdir -p, but in node.js.
  • node-prune - Remove unnecessary files from node_modules (.md, .ts, etc).
  • npm-check-updates - Find newer versions of package dependencies than what your package.json or bower.json allows.
  • nvm - Node Version Manager - Simple bash script to manage multiple active node.js versions.
  • ora - Elegant terminal spinner.
  • pageres - Capture website screenshots.
  • pageres-cli - Capture website screenshots.
  • prepack - Prepack is a partial evaluator for JavaScript. Prepack rewrites a JavaScript bundle, resulting in JavaScript code that executes more efficiently. https://prepack.io
  • pv - A node.js implementation of the Pipe Viewer utility, useful for inspecting a pipe's traffic.
  • release-it - CLI release tool for Git repos and npm packages.
  • shellcheck - ShellCheck, a static analysis tool for shell scripts. http://www.shellcheck.net
  • statsd - Daemon for easy but powerful stats aggregation.
  • visual-center - This is a tool that will find the visual center of your images.
  • yarn - 📦🐈 Fast, reliable, and secure dependency management.

Touch Screen

  • hammer.js - A javascript library for multi-touch gestures.
  • virtualjoystick - A virtual joystick library to emulate a joystick on touch screen in javascript.

Utilities

  • 30-seconds-of-code - Short JavaScript code snippets for all your development needs. https://www.30secondsofcode.org/
  • animateplus - A+ animation module for the modern web. http://animateplus.com/examples/getting-started
  • array-lru - A really fast LRU cache for array items (numeric keys).
  • binary-message-stream - Duplex stream that allows you to send messages, including binary messages.
  • chained-function - Chained function calls.
  • chokidar - A neat wrapper around node.js fs.watch / fs.watchFile / fsevents.
  • classnames - A simple javascript utility for conditionally joining classNames together.
  • console.js - A game console (video game cli) for browsers. https://amio.github.io/console.js/
  • cross-env - Cross platform setting of environment scripts.
  • csv-parser - Streaming csv parser inspired by binary-csv that aims to be faster than everyone else.
  • debug - Tiny node.js & browser debugging utility for your libraries and applications.
  • delay - Delay a promise a specified amount of time.
  • detect-browser - Unpack a browser type and version from the useragent string.
  • dragmove - A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes and no dependencies.
  • dumper.js - A better and pretty variable inspector for your Node.js applications.
  • element-ready - Detect when an element is ready in the DOM.
  • emergence.js - Detect element visibility in the browser.
  • escape-html - Escape string for use in HTML.
  • esprima - ECMAScript parsing infrastructure for multipurpose analysis.
  • faker.js - generate massive amounts of realistic fake data in Node.js and the browser. https://rawgit.com/Marak/faker.js/master/examples/browser/index.html
  • feature.js - Feature.js is a fast, simple and lightweight browser feature detection library in 1kb.
  • final-form - 🏁 Framework agnostic, high performance, subscription-based form state management.
  • find-imports - Find all imported modules in JavaScript files.
  • fingerprintjs - Browser fingerprinting library with the highest accuracy and stability.
  • fitty - Makes text fit perfectly.
  • flattree - Convert hierarchical tree structure to flat structure.
  • flow.js - A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API.
  • glob - glob functionality for node.js.
  • globby - Extends glob with support for multiple patterns.
  • hashlru - Simpler, faster LRU cache algorithm.
  • html5-tag - A simple utility for creating HTML5 tags.
  • iframe-resizer - Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames.
  • js-search - JS Search is an efficient, client-side search library for JavaScript and JSON objects. http://bvaughn.github.io/js-search/
  • json-server - Get a full fake REST API with zero coding in less than 30 seconds (seriously).
  • jsonplaceholder - A simple online fake REST API server. https://jsonplaceholder.typicode.com/
  • lodash - A modern JavaScript utility library delivering modularity, performance, & extras.
  • lowdb - ⚡️ lowdb is a small local JSON database powered by Lodash (supports Node, Electron and the browser).
  • memoize-one - A memoization library which only remembers the latest invocation.
  • moize - The consistently-fast, complete memoization solution for JS. https://planttheidea.github.io/moize/
  • mousetrap - Simple library for handling keyboard shortcuts in Javascript.
  • moveTo - A lightweight scroll animation javascript library without any dependency.
  • multiline-template - Multiline tagged templates using a pipe |, followed by a space, to signal line start, no more crazy indent hacks.
  • multimatch - Extends minimatch.match() with support for multiple patterns.
  • node-cbor - Encode and decode CBOR documents, with both easy mode, streaming mode, and SAX-style evented mode.
  • node-html-to-text - Advanced html to text converter.
  • node-lur-cache - A cache object that deletes the least-recently-used items.
  • node-schedule - A cron-like and not-cron-like job scheduler for Node.
  • node-semver - The semver parser for node (the one npm uses).
  • node-which - Like which(1) unix command. Find the first instance of an executable in the PATH.
  • on-change - Watch an object or array for changes.
  • PapaParse - Fast and powerful CSV (delimited text) parser that gracefully handles large files and malformed input. https://www.papaparse.com/demo
  • parse-json - Parse JSON with more helpful errors.
  • path-to-regexp - Express-style path to regexp.
  • perfect-arrows - A set of minimal functions for drawing perfect arrows between points and shapes.
  • platform.js - A platform detection library.
  • popper.js - A kickass library to manage your poppers. https://popper.js.org
  • PubSubJS - Dependency free publish/subscribe for JavaScript.
  • qs - A querystring parser with nesting support.
  • scroll-into-view-if-needed - Element.scrollIntoViewIfNeeded ponyfill that can animate the scrolling.
  • shine.js - A library for pretty shadows.
  • stacktrace.js - Framework-agnostic, micro-library for getting stack traces in all web browsers.
  • streamx - An iteration of the Node.js core streams with a series of improvements.
  • superstruct - A simple and composable way to validate data in Javascript.
  • table - Formats data into a string table.
  • text-spinners - Pure text, CSS only, font independent, inline loading indicators.
  • text-width - Measure the text width in browsers.
  • threads.js - Easy to use, yet powerful multi-threading library for node.js and the browser.
  • ua-parser-js - Lightweight JavaScript-based User-Agent string parser.
  • waypoints - Waypoints is a library that makes it easy to execute a function whenever you scroll to an element. imakewebthings.com/waypoints/
  • xregexp - Extended JavaScript regular expressions.
  • ytplayer - Simple, robust, blazing-fast YouTube Player API.

Validation

  • isemail - Validate an email address according to RFCs 5321, 5322, and others.

Verdaccio

Verdaccio Ecosystem

Docker Examples

Docker Custom Builds

Video

Virtualization

  • Clusterize.js - Tiny vanilla JS plugin to display large data sets easily.
  • virtualized-list - A tiny, Vanilla JS, dependency free, virtualization library.

Virtual Reality

  • aframe - Building Blocks for the VR Web.

Vue

  • vuera - 👀 React in Vue, Vue in React. Seamless integration of the two.

Web Builder

  • grapesjs - Free and Open source Web Builder Framework. Next generation tool for building templates without coding.

Web Component

Web Framework

  • express - Fast, unopinionated, minimalist web framework for node.
  • koa - Next generation web framework for Node.js.

Web Socket

  • localcast - A shared event emitter that works across multiple processes on the same machine, including the browser!

Web Worker

  • greenlet - 🦎 Move an async function into its own thread.
  • node-webworker-threads - Lightweight Web Worker API implementation with native threads.
  • worker-loader - Worker loader module for webpack.
  • workerize - 🏗️ Run a module in a Web Worker.
  • workerize-loader - 🏗️ Automatically move a module into a Web Worker (Webpack loader).