Giters

javierdc / awesome-1

A curated list of awesome frontend development resources.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Awesome Frontend Development Resources

A curated list of awesome frontend development resources

Trend Micro

Styles

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

Linter

Generator

React Components

Ask Me Anything

Audio

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

Awesome

Algorithms

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

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/

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.

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!

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.
  • 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 - 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 Component (https://github.com/react-component)

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

Serverless

  • serverless - Serverless Framework – Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more!

Static Site Generator

Store

  • store.js - Cross-browser storage for all use cases • Used across the web • See below for v2.0 news!

Talks

Testing

  • BackstopJS - Automates CSS regression testing of your responsive web UI by comparing DOM screenshots at various viewport sizes.
  • enzyme - JavaScript Testing utilities for React.
  • istanbul - Yet another JS code coverage tool.
  • jest - Painless JavaScript Unit Testing.
  • leakage - 🐛 Memory leak testing for node.
  • mocha - A simple, flexible, fun JavaScript test framework for node.js and the browser.
  • nightmare - A high-level browser automation library. http://nightmarejs.org
  • node-tap - Test Anything Protocol tools for node.
  • nyc - A code coverage tool that works well with subprocesses.

Text Editor

Tools

  • 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.
  • fx - Command-line JSON processing tool 🔥.
  • 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.
  • 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 - Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.
  • 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).
  • 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.
  • 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.
  • 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.
  • 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).
  • 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-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.
  • platform.js - A platform detection library.
  • 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.
  • 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.
  • xregexp - Extended JavaScript regular expressions.

Virtualization

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

Validation

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

Video

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 Frameworks

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

Web Sockets

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

About

A curated list of awesome frontend development resources.