Skip to content
/ awesome Public

A curated list of awesome frontend development resources.

381 stars 42 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

trendmicro-frontend/awesome

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

288 Commits
README.md
README.md
 
 

Repository files navigation

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

AI

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.
  • minisearch - Tiny and powerful JavaScript full-text search engine for browser and Node.
  • 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).

About

A curated list of awesome frontend development resources.

Resources

Readme
Activity
Custom properties

Stars

381 stars

Watchers

31 watching

Forks

42 forks
Report repository

Releases

No releases published

Packages

No packages published