Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

awesome_frontend_development_resources

A curated list of awesome frontend development resources.
https://github.com/drylikov/awesome_frontend_development_resources

Last synced: 13 days ago
JSON representation

AI

React Components

Algorithms

React Components

Animation

React Components

Audio

React Components

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

Authentication

React Components

  • passport - Simple, unobtrusive authentication for Node.js.

Automation

React Components

  • 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.

Awesome

React Components

Boilerplate

React Components

Books

React Components

Build Tools

React Components

  • eslint - A fully pluggable tool for identifying and reporting on patterns in JavaScript.
  • gulp - The streaming build system.
  • lodash-webpack-plugin - Smaller modular Lodash builds.
  • node-gyp - Node.js native addon build tool.
  • node-pre-gyp - Node.js tool for easy binary deployment of C++ addons.
  • parallel-webpack - Builds multi-config webpack projects in parallel.
  • rollup - Next-generation ES6 module bundler. http://rollupjs.org
  • size-limit - Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error.
  • webpack - A module bundler that bundles JavaScript and other assets for the browser.
  • webpack-blocks - 📦 Configure webpack using functional feature blocks.
  • webpack-dashboard - A CLI dashboard for webpack dev server.
  • extract-text-webpack-plugin - Extract text from bundle into a file.
  • browserify - Browser-side require() the node.js way.

Cheatsheet

React Components

Color

React Components

  • 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

React Components

  • 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.
  • 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.

Compiler

React Components

Computer Vision

React Components

Control Flow

React Components

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

CSS

React Components

CSS Preprocessor

React Components

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

Data Visualization

React Components

Date

React Components

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

Debugging

React Components

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

Deep Learning

React Components

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

Documentation

React Components

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

DOM

React Components

  • class-list - A cross-browser class list.
  • component-delegate - Event delegation component.
  • delegate-dom - Event delegation library.
  • 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.
  • offset - Get the xy offset of an element.
  • synthetic-dom-events - Create DOM events for builtin event types.
  • element-class - Like .addClass and .removeClass from jquery but without dependencies.
  • jsdom - A JavaScript implementation of the WHATWG DOM and HTML standards, for use with Node.js.

Electron

React Components

Feature Control - LaunchDarkly

React Components

  • 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

React Components

Game

React Components

Graphics

React Components

Grid

React Components

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

HTTP

React Components

  • 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

React Components

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

Icon Fonts

React Components

Image Processing

React Components

  • 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/
  • color-thief - Grabs the dominant color or a representative color palette from an image. Uses javascript and canvas.

Inversion of Control

React Components

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

IoT

React Components

  • 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-usb - Improved USB library for NodeJS.
  • cylon - JavaScript framework for robotics, drones, and the Internet of Things (IoT).
  • node-serialport - Node.js package to access serial ports for reading and writing OR Welcome your robotic JavaScript overlords.

Job Scheduling and Queues

React Components

  • 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)

React Components

  • 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

React Components

Machine Learning

React Components

Mail

React Components

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

Markdown

React Components

Math

React Components

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

Messaging Applications

React Components

Micro Frontend

React Components

Micro-generator Framework

React Components

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

Notifications

React Components

  • 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

React Components

  • 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.
  • sort-object - Sort the keys in an object.
  • sortobject - Deeply sort an object by its keys without mangling any arrays inside of it.
  • pretty-format - ✨ Stringify any JavaScript value.

P2P

React Components

  • p2p-graph - Real-time P2P network visualization with D3.
  • peerjs - Simple peer-to-peer with WebRTC.
  • 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

React Components

  • 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.
  • 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.
  • fetch - A window.fetch JavaScript polyfill.

Presentation

React Components

Private NPM

React Components

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

Productivity

React Components

  • pre-commit - Automatically installs a git pre-commit script in your git repository which runs your npm test on pre-commit.