Spellbook of Modern Web Dev

A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development

• This document originated from a bunch of most commonly used links and learning resources I sent to every new web developer on our full-stack web development team.
• What I'm doing in this document now is trying to provide the complete view angle of modern web (app or page) development ruled by JavaScript, reflect technological advance and help developers to acquire APIs, libraries, tools, services, best practices and learning resource which are not outdated and most commonly used.
• I hope this document can help one developer to have more power to do much more and much better, just like a spellbook does in fantasy worlds.
• The JS/web technology is like an ocean of stuff you don’t know. Simply collecting more stuff or composing dozens of "awesome lists" into a single one will only exacerbate the Javascript Fatigue. So this document must stay lean and focus on the most frequent problems and the most commonly used stuff.
• So for each problem domain and each technology, I try my best to pick only one or a few links.
• Which link belongs to "not outdated and most commonly used stuff" is not only decided by clear trends, empirical observation, and working experience, also by public data and web scraping scripts.
• The npm package statistics (like download count) are given more weight than Github repo statistics (like starring data) because npm statistics can better reflect the actual usage and popularity.
• Prefer fine-grained classifications and deep hierarchies over featureless descriptions and distractive comments.
• Ideally, each line is a unique category. The " / " symbol between the links means they are replaceable. The ", " symbol between the links means they are complementary.
• I wish this document could be closer to a kind of knowledge graph or skill tree than a list or a collection.
• It currently contains 2000+ links (projects, tools, plugins, services, articles, books, sites, etc.)
• Feel free to submit the missing or better links in your opinion. Also, please provide the reason.
• Why not add a Europe (or other regions) section? Why not add your project? Why so many React-based projects? Why not Angular/Vue.js/XXX?

---

Table of Contents

• Platforms and Languages
  • Open Web Platform
    • Learning, Reference, Visual Tools
    • Performance, Security, Semantics / SEO / Accessibility
  • HTML5 Features
    • HTML/DOM, Appearance, Interaction, Access, Network, Media, Graphics, Computing...
  • CSS Features
    • RWD, Layout, Typography, Text, Animation, Effects...
  • Next Generation CSS
    • CSS Module, PostCSS, CSS in JS
    • Best Practices (Skeleton, Methodology, Code Style...)
    • Know More about Web Design / UI Design / UX Design (RWD, Atomic Design, Motion Design, Grid System, Typography, Style Guide...)
  • Next Generation JS
    • ES6+ Features, Intro to ES6+, Re-intro to JS, Important Proposals, Functional Programming, FRP, Static Typing, Code Style...
  • Node.js
    • Intro, Workshop, Best Practices...
  • Platform Compatibility and Proposal Status
    • Platform Status / Releases / Updates, ECMAScript Compatibility
    • Proposal Status (W3C WG, WICG, WHATWG, ECMA TC39, Node.js CTC)
    • JS Engine (V8, JSC, Chakra), Web/JS Runtime (Electron, Cordova, React Native...), Device...
  • Cross-browser / Polyfill Libraries
    • Appearance, Interaction, Access, Network, Performance, Offline, Media...
  • npm Ecosystem
    • Finding Packages (Search, Stats, Rank)
    • Dependency Management / Release / Maintenance (npm, yarn, lerna, ncp...)
    • Convention (Open Source, SemVer, package.json, Small modules, Isomorphic JS / Universal JS...)
  • Universal Utility Libraries
    • Standard Library Extensions (FP, OOP, Async...)
    • Hashing / Generating
    • Parsing / Manipulating (URL, Validator, i18n, Date, Numbers, Color, Text, Buffer / Blob...)
    • Logic, Network, Storage, NLP, ML...
• Universal Web Apps / Web Pages
  • GUI Framework
    • View / ViewModel / ViewController (React)
    • Model / App State (Redux)
    • API (GraphQL)
    • GUI Architectures (MVC, MVP, PM, MVVM, Flux, Redux, Elm, MVI, SAM...)
  • UI Toolkits
    • CSS, React...
  • Standalone UI Components
    • Layout, Icon, Button, Form, Overlay, Picker, Content, Editor...
• Client Side
  • UX Libraries
    • Drag & Drop, Gesture, Scrolling, Zoom, Tooltip, Tour...
  • Graphic Libraries
    • Animation (Effects, Loading, Scrolling, Parallax, Transition, Timeline, Motion / Curved Path...)
    • 2D (Canvas, SVG, Physics...), 3D (WebGL, Physics...)
    • Data Visualization, Game...
  • Hybrid Libraries
    • Electron, React Native
• Server Side
  • Network
    • HTTP (Intro, Same-origin policy, Performance, HTTPS, HTTP/2, gRPC...)
    • TCP, UDP...
  • Server-side Best Practices
    • Restful API, SaaS, Microservices (API Gateway, Serverless)
    • Cloud / Distributed, Web Hosting / Non-distributed
    • Authentication / Authorization, Security, Logging / Monitoring, DevOps...
  • Microservices / API Services (Node.js)
    • Frameworks (RESTful API, Microservices, Serverless, Bots...), GraphQL, DocGen + CodeGen...
  • Server-side Libraries (Node.js)
    • Configuration, Debugging, Protocols, Network, Crypto, Auth, Storage, Jobs, Scraping, Images, Parsing / Generating, NLP...
  • Cloud Services (Global)
    • Compute (FaaS / Serverless / WebHook, PaaS, CaaS)
    • Storage (Object Storage, DBaaS)
    • BaaS (CRUD, Auth, Search, Email, SMS...)
    • AIaaS / BDaaS (Natural Language, Computer Vision...)
  • Cloud Services (China)
    • The evil twins inside the Great Firewall of China
• Tooling
  • Testing
    • Unit Testing / Test Runner, Test Doubles
    • Web Testing (Integration Testing, Functional Testing, Visual testing, Monkey Testing, Headless Browsers)
    • Server-side Testing (Functional Testing, Load Testing)
    • Benchmark Testing
    • Analysis (Code Coverage, Node.js Security...)
  • Documentation
    • JS, API, CLI, CSS / Style Guide, Writing
  • Toolchain
    • Compiler / Transpiler / Preprocessor (Babel, PostCSS...)
    • Loader / Builder / Bundler (Webpack, Rollup...)
    • Minifier / Compressor / Optimizer (Prepack, Babili / Uglify, imagemin, cssnano / clean-css...)
    • Formatter (Prettier, Stylefmt...)
    • Static Analysis (ESLint, Flow, StyleLint...)
    • Task Automation (npm scripts, Gulp...)
  • Workflow
    • Development (Micro Generator, Live Reload / Watch / Preview, Dev Tools, HTTP Inspector, Debugging Proxy...)
    • Deployment (Process Supervisor, Containers, Container Clusters, PaaS)
    • Monitoring (Error Tracking, Logging, APM...)
  • Command-line Environment (Mac)
    • Terminal, Homebrew, Zsh, Vim, Git, Docker, dotfiles, Utilities...
  • Command-line Libraries (Node.js)
    • Input (Options/Arguments Parser, Interactive, Configuration...)
    • Output (Color / Style, Icon, Updating Log, Notice, Columns, Curses, Drawing...)
    • Delivery, OS, API, Parser...
  • IDE / Editors
    • Atom Plugins (UI, Formating, Operating, Static Analysis, Docs, Assistant, Integration...)
    • Out-of-the-box Atom IDE, Other Electron-based IDE, Programming Fonts...
  • Useful Apps
    • Playground, Visual Tools, Viewer, Docs, Automation...
  • Collaboration
    • Version Control, ChatOps, Kanban, Markdown, Design...

A Subset as a Learning Path

1. Open Web Platform
2. HTML5 Features
3. CSS Features
4. Next Generation CSS
5. Next Generation JS
6. Platform Compatibility and Proposal Status
7. Network
8. Node.js
9. npm Ecosystem
10. Command-line Environment (Mac)
11. IDE / Editors
12. GUI Framework
13. Microservices / API Services (Node.js)
14. Testing

A Subset for Finding Libraries

• Cross-browser / Polyfill Libraries
• Hybrid Libraries
• GUI Framework
• UI Toolkits
• Standalone UI Components
• UX Libraries
• Graphic Libraries
• Universal Utility Libraries
• Microservices / API Services (Node.js)
• Server-side Libraries (Node.js)
• Command-line Libraries (Node.js)

A Subset for Architecture and Infrastructure

• GUI Framework
• Toolchain
• Workflow
• Microservices / API Services (Node.js)
• Server-side Best Practices
• Cloud Services (Global) / Cloud Services (China)
• Documentation

---

Platforms and Languages

Open Web Platform

• Learning
  • What is the Internet, How does the Internet work
    • HTTP - see Server Side > Network
  • Evolution of the Web
    • Timeline of web browsers
    • Dive Into HTML5 - A Quite Biased History of HTML5
    • 20 Things I Learned About Browsers and the Web
  • MDN's Learn Web Development
  • Mastering CSS Principles: A Comprehensive Guide
• Reference
  • MDN Web Docs
    • HTML, SVG, CSS, DOM, DOM Events, Web APIs
  • Google Developers
    • Web Fundamentals, HTML5Rocks
  • Apple
    • WebKit JS, WebKit DOM Programming Topics
    • Safari Web Content Guide, Safari HTML Reference, Safari CSS Reference, Safari CSS Visual Effects Guide
  • Microsoft Edge Developer Guide
  • CSS-Tricks's CSS Almanac
  • HTML: The Living Standard (Web Developer Edition)
    • The Web platform: Browser technologies
  • W3Fools
    • W3Schools Responds to W3Fools
    • Why shouldn't I use W3Schools?, Why do people hate W3schools?, Does W3Schools really suck?
• Visual Tools
  • see Tooling > Useful Apps > Visual Tools
• Performance
  • Rendering
    • How Browsers Work: Behind the scenes of modern web browsers,
      How Browsers Lay Out Web Pages
    • Rendering Performance
    • GPU Animation: Doing It Right / An Introduction to Hardware Acceleration with CSS Animations
    • CSS will-change
      • Everything You Need to Know About the CSS will-change Property
    • CSS Containment in Chrome 52
  • Loading
    • How DNS works
    • PageSpeed Insights Rules
    • Critical Rendering Path, CSS and the critical path
    • Evolution of Script Loading, Browser script loading roundup
  • Offline
    • Offline UX Considerations
  • Measure
    • Measure Performance with the RAIL Model
    • Measuring Page Load Speed with Navigation Timing
    • Measuring network performance with Resource Timing API
    • User Timing API
• Security
  • The Tangled Web: A Guide to Securing Modern Web Applications
  • HTML5 Security Cheatsheet
• Semantics / SEO / Accessibility
  • Let’s Talk about Semantics
  • SEO Tutorial For Beginners in 2017,
    Google's Search Engine Optimization Starter Guide
  • The A11Y Project, Using ARIA

>> Return to Table of Contents

HTML5 Features

• HTML / DOM
  • You Might Not Need jQuery, You Don't Need jQuery
  • HEAD
  • favicon
  • Form pseudo-element
  • Native form elements
  • Detect DOM changes with Mutation Observers
• Appearance
  • Web Components
    • Shadow DOM v1, Custom Elements v1
  • Web Animations
    • Web Animation Past, Present, and Future
    • Let's talk about the Web Animations API
    • Status - Are we animated yet?
• Interaction
  • Desktop
    • MouseEvent, WheelEvent, KeyboardEvent
    • Drag and Drop, Pointer Lock
  • Mobile
    • TouchEvent
      • 300ms tap delay, gone away, More Responsive Tapping on iOS
    • DeviceOrientationEvent + DeviceMotionEvent
  • Hardware Agnostic
    • PointerEvent, Selection
    • Intersection Observer API (Intro)
    • Resize Observer API
  • Gamepad, Web Speech
• Access
  • URL, History, Navigator, Screen, Page Visibility, Clipboard, Performance, Console
  • Permissions, Geolocation
  • Web Notifications , Vibration
• Network
  • XMLHttpRequest2 / Fetch
    • Why I won’t be using Fetch API in my apps
  • WebSocket, Server-sent Event
  • WebRTC
    • Getting Started with WebRTC
    • WebRTC in the real world: STUN, TURN and signaling
    • WebRTC data channels
    • Workshop - Codelabs - Real time communication with WebRTC
• Offline
  • Overview
    • Offline First - HTML5 technologies for a faster, smarter, more engaging web
  • Web Storage, IndexedDB
  • FileReader, File, Blob
  • Service Worker
    • Service Workers Explained
    • Service Workers: an Introduction, The Service Worker Lifecycle
    • Instant Loading Web Apps with an Application Shell Architecture
    • Service Worker Cookbook
    • Status - Is ServiceWorker Ready?
  • Progressive Web Apps
    • Progressive Web App Checklist
    • Offline Storage for Progressive Web Apps
    • The PRPL pattern
    • Workshop - Codelabs - Your First Progressive Web App
• Media
  • <video>, <audio>
  • Web Audio API
    • Web Audio API Book
    • Workshop - Web Audio School
  • Media Streams
    • Capturing Audio & Video in HTML5
• Graphics
  • SVG
    • Styling And Animating SVGs With CSS
  • Canvas
    • HTML5 Canvas
  • WebGL
    • WebGL by example, WebGL tutorial, Learning WebGL
    • Primer: Shaders, An Introduction to Shaders
    • The Book of Shaders
    • Workshop -Shader School, WebGL Workshop, WebGL Academy
    • Learning Modern 3D Graphics Programming
  • WebVR
    • Status - WebVR Rocks
    • Workshop - Codelabs - Building for Virtual Reality on the Web
• Computing
  • Web Cryptography
  • Web Workers
  • WebAssembly
    • WebAssembly.org
    • An Abridged Cartoon Introduction To WebAssembly
    • Workshop - Codelabs - An Introduction to Web Assembly

>> Return to Table of Contents

CSS Features

• Basics
  • You Don't Need JavaScript
  • CSS Selectors from CSS4 till CSS1
    • CSS Diner - Where we feast on CSS Selectors!
  • An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements
  • @supports Rule (Feature Queries)
• Responsive Web Design
  • Intro - see Platforms and Languages > Next Generation CSS > Know More about Web Design
  • Media Queries
    • Media Queries for Standard Devices
  • Images
    • Responsive Images, Responsive Images in CSS
  • Units
    • Font Size Idea: px at the Root, rem for Components, em for Text Elements,
      Understanding and Using rem Units in CSS
    • Truly Fluid Typography With vh And vw Units
• Layout
  • Flexbox, CSS Grid Layout
    • Using Flexbox today
    • CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout
    • A Complete Guide to Flexbox
    • A Complete Guide to Grid
    • Solved by Flexbox, Flexbox Patterns
      • Centering Elements with Flexbox
      • Quantity Queries with Flexbox
  • Traditional
    • Learn CSS Layout
      • Learn CSS Layout - the pedantic way
    • CSS Floats 101, All About Floats, CSS Float Theory: Things You Should Know
    • CSS Positioning 101
      • CSS “position: sticky” – Introduction and Polyfills
    • The Z-Index CSS Property: A Comprehensive Look
    • Centering in CSS: A Complete Guide, Absolute Center an Image, How To Center in CSS
• Web Typography
  • Using @font-face
  • A Comprehensive Guide to Font Loading Strategies
• Text
  • Handling Long Words and URLs
  • writing-mode + text-orientation
• Animation
  • CSS Transition
    • Using CSS transitions
    • Intro to CSS 3D transforms
  • CSS Animation
    • The Guide To CSS Animation: Principles and Examples
    • Upgrading CSS Animation With Motion Curves
  • Motion Path
    • Animating Clipped Elements In SVG
    • Moving along a curved path in CSS with layered animation
    • Future Use: CSS Motion Paths
• Effects
  • CSS Image Effects
  • Web Image Effects Performance Showdown
    • Basics of CSS Blend Modes
    • CSS Blend Modes could be the next big thing in Web Design
    • Understanding CSS Filter Effects
  • Clipping and Masking in CSS
  • The State of CSS Reflections
  • CSS Shapes 101

>> Return to Table of Contents

Next Generation CSS

• CSS Modules
  • The End of Global CSS
  • Tools - see Tooling > Toolchain > Builder / Bundler > Webpack
• PostCSS
  • Intro
    • Meet PostCSS
    • PostCSS – A Comprehensive Introduction
    • PostCSS – Sass Killer or Preprocessing Pretender?
    • PostCSS Playground
  • CSSNext
    • It’s Time To Start Using CSS Custom Properties
    • Getting Started With CSS calc()
  • More Plugins - see Tooling > Toolchain > Compiler / Transpiler / Preprocessor > PostCSS
• CSS in JS
  • A Unified Styling Language
  • Styled-Components
    • Styled Components: Enforcing Best Practices In Component-Based Systems
    • Writing your styles in JS ≠ writing inline styles
  • Aphrodite
    • Inline CSS at Khan Academy: Aphrodite
  • JSS, Radium
• Best Practices
  • Skeleton.css / Normalize.css / Reset.css
  • Methodology
    • BEM
      • BEM 101 / MindBEMding
    • OOCSS
      • An Introduction To Object Oriented CSS (OOCSS)
    • SMACSS
    • RSCSS, SOLID CSS, ITCSS
    • CSS Guidelines, MaintainableCSS
  • Code Style
    • Idiomatic CSS
    • Airbnb CSS / Sass Styleguide
    • Airbnb CSS-in-JavaScript Style Guide
    • CSS + HTML
      • Isobar Front-end Code Standards
      • Code Guide by @mdo
• Know More about Web Design / UI Design / UX Design
  • Responsive/Adaptive Web Design
    • Responsive Web Design Basics /
      Responsive Web Design: What It Is And How To Use It
    • The Difference Between Responsive and Adaptive Design
    • The Current State of Adaptive Design
    • Responsivedesign.is - Design, Develop
    • Patterns
      • Responsive Web Design Patterns,
        Responsive Patterns,
        ResponsiveDesign.is Patterns
      • Responsive Data Table Roundup
  • Atomic Design (Book)
    • The Atomic Workflow — People, Process, And Making Design Systems Happen
    • The “Other” Interface: Atomic Design With Sass
    • Atomic Design – Your Ultimate Guide to Scalable & Modular CSS (Sass)
  • Motion Design
    • Creating Usability with Motion: The UX in Motion Manifesto
    • 10 principles for smooth web animations
  • Grid System - A Comprehensive Introduction to Grids in Web Design
    • calc() grid system - Lost Grid
    • flexbox grid system - Flexbox Grid
    • The 8-Point Grid
  • Typography
    • Typography.js
    • Gutenberg
    • The Equilateral Triangle of a Perfect Paragraph
    • The Elements of Typographic Style Applied to the Web
    • Why is Vertical Rhythm an Important Typography Practice?
      • CSS with vertical rhythm
    • More Meaningful Typography
      • Modular Scale
  • Style Guide
    • Style Guide Driven Development / Living Style Guides
    • Tools - see Tooling > Documentation > Style Guide
    • Reference
      • Apple's Human Interface Guidelines
      • Google's Material Design
      • Microsoft's Fluent Design System
      • Airbnb's new design system
      • Github's Primer
      • Atlassian's Design Guidelines
      • Salesforce's Lightning Design System
      • Yelp's Styleguide
      • IBM's Living Language
      • BBC's GEL Guidelines
      • A List Apart's pattern library
      • USA.gov's Web Design Standards
      • MailChimp's Email Design Guide

>> Return to Table of Contents

Next Generation JS

• ES6+ Features
  • Overview of ECMAScript 6 features
  • Babel REPL / ES6 New Features Comparison
• Intro to ES6+
  • Dr. Axel Rauschmayer's blog
    • Exploring ES6
    • Exploring ES2016 and ES2017
  • ES6 In Depth
  • Nicholas C. Zakas's Understanding ECMAScript 6
• Re-intro to JS
  • Articles
    • MDN
      • A re-introduction to JavaScript (JS tutorial)
      • Equality comparisons and sameness, Data types and data structures, Closures, Inheritance and the prototype chain
      • Concurrency model and Event Loop, Memory Management
    • Dmitry Soshnikov
      • JavaScript. The Core
      • ECMA-262-3 in detail
        • Execution Contexts, Variable object, This, Scope chain, Functions, Closures, Evaluation strategy
        • OOP: The general theory, ECMAScript implementation,
      • ECMA-262-5 in detail
        • Properties and Property Descriptors, Strict Mode
        • Lexical environments: Common Theory, ECMAScript implementation
      • Notes
        • Equality operators, Default values of parameters
    • Dmitri Pavlutin
      • equality operator, undefined
      • variables hoisting, variables lifecycle
      • declare functions, 'this' keyword
      • three dots
      • array creation, object literals
      • well-known symbols
      • small and plain functions
      • unicode
    • Other
      • The Evolution of JavaScript Modularity
      • About object-oriented design and the “class” & “extends” keywords in ES6
      • JavaScript Regular Expression Enlightenment
  • Books
    • Eloquent JavaScript
    • Speaking JavaScript
    • You Don't Know JS (book series)
• Reference
  • JavaScript Guide
  • JavaScript Reference
• Important Proposals
  • ES Modules in Browsers and Node.js
  • Class Fields & Static Properties
  • Decorators
  • async/await, Promise, Promise Promote, Promises/A+
  • Observables
  • Static Typing
• Functional Programming
  • Functional Programming for JavaScript People
  • Functional Programming Jargon
  • Composing Software
  • Books
    • Professor Frisby's Mostly Adequate Guide to Functional Programming
    • Functional-Light JavaScript
  • Lodash's FP Guide
  • Introduction to Immutable.js and Functional Programming Concepts
  • Why Ramda?
    • The Philosophy of Ramda
    • Favoring Curry
    • Thinking in Ramda
  • Fantasy Land
    • From Callback to Future -> Functor -> Monad
    • ADT (Algebraic Data Types)
    • JavaScript and Type Thinking
    • Functors, Applicatives, And Monads In Pictures
• FRP (Functional Reactive Programming)
  • The introduction to Reactive Programming you've been missing
  • How Is Reactive Different From Procedural Programming?
  • A General Theory of Reactivity
  • Learn RxJS
    • Rx Book
    • Functional Programming in JavaScript
    • RxMarbles
• Static Typing
  • Intro
    • Why use static types in JavaScript?
    • You Might Not Need TypeScript (or Static Types)
  • Flow
    • Flow Runtime
    • Flow Comments
  • TypeScript
    • DefinitelyTyped, TypeSearch
  • tcomb
  • JSDoc Tags
    • jsdoc-to-assert
• Code Style
  • Airbnb JavaScript Style Guide
  • Node.js Style Guide
  • Clean Code JavaScript
  • JavaScript Clean Coding Best Practices

>> Return to Table of Contents

Node.js

• Intro
  • The Art of Node
  • You Don’t Know Node
  • RisingStack's / NodeSource's Understanding the Node.js Event Loop
  • Node.js Garbage Collection Explained
  • Stream Handbook
    • A Brief History of Node Streams
    • Understanding Object Streams
  • Keeping the Node.js core small
  • Debugging Node.js with Google Chrome
    • Add v8_inspector supports
    • How to Debug Node.js with the Best Tools Available
• Workshop
  • NodeSchool
    • learnyounode
• Best Practices
  • The Node Way
  • Joyent's Production Practices - Design, Error Handling
  • Best Practices for Node.js Development
  • Node.js Best Practices

>> Return to Table of Contents

Platform Compatibility and Proposal Status

• Web
  • Platform Status
    • Can I Use
    • Chrome, WebKit, Firefox, Edge, TBS (China)
  • Platform Releases
    • Chrome, Safari (Webkit), Firefox, Edge
  • Platform Updates
    • Mozilla Hacks
    • Web Updates, Chromium Blog
    • Webkit Blog
    • Microsoft Edge Dev Blog
  • Writing forward-compatible websites
    • Polyfill - What is a Polyfill?
    • Feature Detection - Modernizr/feature-detects, feature.js
    • Browser/Device/Runtime Detection - see Platforms and Languages > Universal Utility Libraries > Parsing / Manipulating
    • Graded Browser Support - Grade components, not browsers
  • Email
    • CSS Support Guide for Email Clients / Email Client CSS Support
    • Email Design Reference + HTML Email Templates
• ECMAScript
  • ECMAScript compatibility table
  • Node.js ES2015 Support
    • Node 8.x - V8 5.9, Ignition + Turbofan launched
    • Node 8.0 LTS - V8 5.8, Five New Features You Need To Know
    • Node 7.6 - V8 5.5, Async functions
    • Node 6.0 LTS - V8 5.0, 93% of ES6 language features
  • Performance - Six Speed
• Proposal Status
  • W3C WG (World Wide Web Consortium Working Groups)
    • Web Platform Publication Status
      • JavaScript APIs, Mobile Web Applications, CSS
    • CSS current work
    • Current HTML5 Specifications
    • Inside
      • W3C TR (Technical Reports)
      • An Inside View of the CSS Working Group at W3C
  • WICG (Web Incubator Community Group)
    • Proposals
  • WHATWG (Web Hypertext Application Technology Working Group)
    • WHATWG Live Standards
    • Inside
      • W3C vs. WHATWG HTML5 Specs – The Differences Documented
  • ECMA TC39 (Ecma International Technical Committee 39)
    • Status, process, and documents for ECMA262
      • ECMAScript Proposals
    • Inside
      • The TC39 Process / The TC39 process for ECMAScript features
  • Node.js CTC (Node.js Core Technical Committee)
    • Meeting Notes
    • Node.js EPs (Enhancement Proposals)
    • Inside
      • How Node.js created a model open source community
      • Healthy Open Source
• JS Engine
  • A Guide to JavaScript Engines for Idiots
  • V8
    • How the V8 engine works?
    • Internal
      • v8: a tale of two compilers,
        A tour of V8: full compiler
      • A tour of V8: Garbage Collection
    • Next Generation
      • Ignition + TurboFan launch and Declarative JavaScript
        • Launching Ignition and TurboFan
        • A tale of TurboFan
      • Ignition + TurboFan and ES2015
  • JSC
    • JavaScriptCore, the WebKit JS implementation
    • Internal
      • Introducing the WebKit FTL JIT
    • Next Generation
      • JSC Love ES6
      • Introducing the B3 JIT Compiler
  • Chakra
    • Microsoft Edge’s JavaScript engine to go open-source
    • Architecture Overview
    • Node-ChakraCore and VM Neutrality in Node.js
    • Internal
      • JavaScript performance updates - 2015, 2016, 2017
    • Next Generation
      • Roadmap
  • Benchmarks
    • The truth about traditional JavaScript benchmarks
    • Browser Benchmarks
• Web Runtime / JS Runtime
  • Electron
    • Tutorials - Essential Electron
  • Cordova
    • Platform Support
    • Top Mistakes by Developers new to Cordova/Phonegap
    • Curated Plugins - Awesome Cordova Plugins, Telerik Verified Plugins
    • Finding Plugins - plugreg / Plugin Search
  • React Native / NativeScript / Weex
    • React Native Styling Cheat Sheet
    • Bridging in React Native - An in-depth look into React Native's core
    • Tutorials - React Native Express, React Native Workshop, React Native Training
    • Examples - 30 Days of React Native
• Device
  • The Ultimate Guide To iPhone Resolutions
  • Device Metrics / Screen Sizes

>> Return to Table of Contents

Cross-browser / Polyfill Libraries

• Appearance
  • Responsive Web Design
    • Media Queries - Enquire.js
    • Responsive Image - Picturefill
    • Viewport Units Buggyfill
  • Web Typography
    • @font-face - Font Face Observer
  • Web Animation API
    • Web Animations Polyfill
  • Web Components
    • webcomponents.js (v1 spec polyfills) / Polymer
• Interaction
  • Keyboard - Mousetrap
  • scroll-behavior: smooth; - Smoothscroll Polyfill
  • PointerEvent - PEP / React Pointable
  • ResizeObserver Polyfill
• Access
  • Web Notifications API - Push.js / Notify.js
  • Clipboard API - Clipboard.js / copy-to-clipboard
  • Fullscreen API - Screenfull
  • Page Visibility API - Visibility.js
  • <iframe> - iframe-resizer
• Network
  • XHR - window.fetch Polyfill
  • Server-Sent Events - EventSource Polyfill
  • WebSocket - Socket.IO-client / Engine.IO-client / SockJS-client
• Performance
  • document-write - PostScribe
  • User Timing API - marky
• Offline
  • Service Work - sw-toolbox
  • File / FileReader API
    • FileSaver.js
    • blob-util
  • IndexedDB
    • LocalStorage API - localForage
• Media
  • <video> - Video.js
  • <audio> - Howler.js
  • Web Audio API - Waud.js, Tone.js

>> Return to Table of Contents

npm Ecosystem

• npm
  • how many npm users are there?, Module Counts
  • Why not to use version control hosting for packages
  • npm and front-end packaging
  • changes to npm’s unpublish policy, kik, left-pad, and npm
  • Hello, Yarn!
• Finding Packages
  • Search
    • npms.io / node-modules.com / npmsearch.com
      • improved search in the npm CLI (and how we got here),
        Better search is here!
    • Github Search (sort by stars, for JS)
  • Stats
    • npm trends
    • NPMCompare
    • npm-stat
  • Rank
    • The State Of JavaScript,
      Stack Overflow Annual Developer Survey
    • npm's most depended-upon packages
• Dependency Management / Release / Maintenance
  • npm Developer Guide
    • npm's CLI
    • v5.0.0
    • npm’s lockfiles
  • Yarn
    • yarn's CLI
    • yarn.lock
  • Lerna
  • semantic-release / np, gh-release
  • npm-check-updates
  • changed-log
  • license-checker
• Convention
  • Open Source
    • README
      • Art of README, How To Write A Readme
      • Top ten reasons why I won't use your open source project
      • Readme Driven Development
      • Template - Common Readme / Standard Readme / Zalando's README Template
    • Changelog
      • Conventional Commits
      • Conventional Changelog
    • License
      • Choose an open source license
  • SemVer
    • SemVer (Semantic Versioning) / The semantic versioner for npm / Semver: A Primer
    • npm semver calculator
  • package.json
    • Specifics of npm's package.json
    • Specifics of yarn's package.json
    • What's the difference between dependencies, devDependencies and peerDependencies
  • Small Modules
    • Unix Philosophy and Node.js
    • module best practices
    • how I write modules
    • Hyper Modular / One-line Modules
      • Small focused modules
      • Hyper Modular Packages: A Crazy Cult or a Reasonable Practice?
      • In Defense of Hyper Modular JavaScript
  • Isomorphic JS / Universal JS
    • Isomorphic JavaScript: The Future of Web Apps
    • Universal JavaScript

>> Return to Table of Contents

Universal Utility Libraries

• Standard Library Extensions
  • Utilities
    • Lodash
    • is.js
  • FP
    • Ramda
      • ramda-fantasy
    • Immutable
      • Lightweight Alternative - object-path-immutable / dot-prop-immutable
  • OOP
    • core-decorators
    • Stampit
  • Async
    • Observable - RxJS
    • Promise - Bluebird
    • Generator - Co
    • Callback - Async
  • Syntax
    • XRegExp
  • Node.js API
    • node-libs-browser
    • EventEmitter3
  • Debugging
    • debug / pino
• Hashing / Generating
  • uuid
  • shortid / punycode / string-hash
  • base64-js / sha.js / spark-md5 / crypto-js / jsrsasign
• Parsing / Manipulating
  • URL
    • URL Parsing - qs, URI.js
    • IP Address Manipulation - ip
  • Environment
    • UA Sniffing - UAParser.js / useragent
    • Information - platform.js
    • Runtime Detection - is-electron-renderer / electron-is
  • Validator
    • String Validation - validator.js
    • Schema Validation - joi / Ajv
  • i18n
    • Intl.js + FormatJS / i18next
  • Date
    • Date Manipulation - Moment.js
  • Numbers
    • Number Manipulation - Numeral.js
    • Money - accounting.js
    • Computation - Math.js, Simple Statistics, ndarray
  • Color
    • Color Manipulation - Chroma.js, Chromatism, randomColor
    • Color Extraction - node-vibrant / Colorify.js
  • Text
    • Text Manipulation - Voca.js / string.js
    • Characters - string-width, string-length
    • HTML Entities - he
    • Human-readable Slug - speakingurl
    • XSS Sanitizer - DOMPurify / xss
    • HTTP - mime-types, content-type
    • JSON Superset - serialize-javascript, JSON5
    • Markdown - marked / markdown-it
    • Links Recognition - linkify-it
    • Language Detection - franc
    • Text Differencing - diff
    • Search - Fuse.js / fuzzysearch / Lunr.js / js-worker-search, regexgen / escape-string-regexp
    • DSL Paser - PEG.js / nearley
  • Buffer / Blob
    • Type Detection - file-type, image-type
    • Size Detection - probe-image-size
    • Image Manipulation - jimp
      • Image Crop - Smartcrop.js
    • QR Code / Barcode - qrcode / jsbarcode
• Logic
  • Rate Limiter - Bottleneck / Limiter
• Network
  • HTTP / XHR
    • Low-level - Isomorphic Fetch
    • High-level -Axios / Hifetch (author's own project)
    • GraphQL - lokka
  • TCP
    • MQTT
  • UDP / P2P
    • Simple Peer / JS SIP
    • WebTorrent
• Storage
  • File Database
    • JSON - Lowdb
  • IndexedDB / WebSQL / localStorage / Memory
    • MongoDB API - NeDB
    • CouchDB API - PouchDB
  • Realtime / P2P - Gun, ShareDB
• NLP
  • compromise / talisman
• ML
  • MLJS, Synaptic

>> Return to Table of Contents

Universal Web Apps / Web Pages

GUI Framework

• View / ViewModel / ViewController
  • React
    • Learning
      • Pete Hunt's react-howto
      • SurviveJS React
      • React Cheat Sheet
      • Best Practices
        • React Bits, React in patterns
        • Functional UI and Components as Higher Order Functions
      • Next Gen - React Fiber Architecture
    • Component Utilities
      • Recompose
      • React Display Name
      • React Side Effect
      • React Komposer
      • React Loadable
      • React CSS Themr
    • Browser Utilities
      • React Event Listener
      • React onClickOutside
      • React Responsive
      • React Sizeme / React Dimensions
      • React Portal / React Gateway
      • React Measure
      • React Copy to clipboard
      • React Cookie
    • Use React Alone
      • Redial / React Refetch
      • Formsy React / React Form
    • Lightweight Alternative
      • Preact / Inferno
  • Angular
  • Vue.js
• Model / App State
  • Redux
    • Learning
      • Notes of Dan Abramov's Redux course videos
      • A cartoon intro to Redux
      • Tic-Tac-Toe.js: redux pattern in plain JavaScript
    • Utilities
      • React Redux
      • Redux Form
      • Redux Auth Wrapper
      • Redux Search
    • Store
      • Reselect
      • Normalizr
      • Redux Persist
    • Actions
      • Redux Actions
      • Redux Thunk, Redux Promise Middleware
      • Redux Observable / Redux Saga
  • MobX
  • Baobab / Freezer
• API
  • GraphQL
    • Learning
      • Learn GraphQL
      • Queries and Mutations
      • Playground - GraphQLHub
    • React Apollo, Learn Apollo
• Offline First
  • Learning
    • Designing Offline-First Web Apps
    • Say Hello to Offline First,
      Offline First and the Circle Of Web, Part II: Breaking the Circle
• Routing
  • React Router, React Router Redux
  • React Helmet
• i18n
  • React Intl / React i18next
  • React Intl Redux
• Server-side Rendering
  • see Tooling > Workflow > Deployment > Publishing App
• Monitoring
  • React GA
  • Redux Raven Middleware
  • Redux Segment
  • Services - see Tooling > Workflow > Monitoring
• Debugging
  • why-did-you-update
• Scaffold / Boilerplate / Generator
  • create-react-app
  • react-starter-kit / react-boilerplate
  • angular-cli
  • vue-cli
  • JavaScript Stack from Scratch
• GUI Architectures
  • Comparison
    • Scaling Isomorphic JavaScript Code
    • Comparison of Architecture presentation patterns MVP(SC),MVP(PV),PM,MVVM and MVC
    • Unidirectional User Interface Architectures
    • Change And Its Detection In JavaScript Frameworks
    • Martin Fowler's eaaDev
  • Patterns For Large-Scale JavaScript Application Architecture
  • MVC - A, B, C
  • Understanding MVC And MVP (For JavaScript And Backbone Developers)
  • Understanding MVVM - A Guide For JavaScript Developers
  • Flux Concepts
    • Flux - In Depth Overview
  • Redux - Reinventing Flux - Interview with Dan Abramov
  • The Elm Architecture
  • MVI (Model-View-Intent) in Cycle.js
    • What Developers Need to Know about MVI (Model-View-Intent)
  • SAM (State-Action-Model)

>> Return to Table of Contents

UI Toolkits

• CSS
  • Bulma
  • Tachyons
  • Material Components for the web
  • WeUI
  • MJML / Foundation for Emails 2
• React
  • Material-UI / React Toolbox
  • Semantic UI React
  • Reactstrap / React Bootstrap
  • React Foundation
  • Ant Design / Ant Design Mobile
  • Blueprint
  • Grommet
  • Elemental UI
  • React WeUI
  • React Desktop
  • React Native Web

>> Return to Table of Contents

Standalone UI Components

• Layout
  • Grid - React FlexBox Grid
  • Masonry - React Masonry Component / masonry-layout / bricks.js / Justified Layout
  • Split - React Split Pane / Split.js
  • Dashboard - React Grid Layout
• Icon
  • React Icons / Material Design Icons / Bytesize Icons
• Progress
  • React Redux Loading Bar / NProgress
• Button
  • Buttons
  • Indicators - React Ladda / Ladda / React Progress Button
• Accordion
  • React Sanfona
  • React Collapse
• Picker
  • React Tabs
  • React Select
  • React Radio Group
  • RC Slider / React Slider / React Input Range
  • React Color
  • React Datepicker / React Datetime / React Day Picker / React Dates / Pikaday
• Input
  • React Toggle
  • React Input Autosize, React Textarea Autosize
  • React Tag Input
  • React Autosuggest
  • Auto-formatting - React MaskedInput / React Text Mask / Cleave.js
• Form
  • React JSON Schema Form
• Overlay
  • React Overlays
  • React Modal / vex / SweetAlert2
  • React Notification System / react-notification-system-redux /
    React Redux Toastr / React Notification / React sAlert / Notie
  • Drawer - React Burger Menu / React Sidebar / React Dock
  • React ContextMenu
  • React Block UI
• Content
  • Carousel - React Slick / Nuka Carousel
  • React Paginate
  • List / Table - React Virtualized / React Table / React List
  • Spreadsheet - React Data Grid / React Handsontable / React Datasheet
  • TreeView - React TreeView / React Treebeard
  • JSON Viewer - React JSON Tree
  • React QR Code
  • Email Table - Oy Vey
• Editor
  • Draft.js
    • Awesome Draft.js
  • React Quill / Quill
  • React Ace / React Codemirror
  • React Markdown
  • React Syntax Highlighter / Highlight.js
• Widget
  • React Music
  • React Big Calendar
  • React Image Gallery
  • React Google Maps / Google Map React / React Map GL
  • React Youtube / React Player
  • Searchkit
  • Redux Auth
  • SurveyJS

>> Return to Table of Contents

Client Side

UX Libraries

• Drag & Drop
  • React DnD / Dragula
  • React Sortable HOC / Sortable
  • React Dropzone / DropzoneJS
  • GSAP - Draggable
• Gesture
  • Hammer.js / Interact.js / ZingTouch / AlloyFinger
    • Gestures Patterns
    • React HammerJS
  • React Swipeable Views / React Swipeable / Swiper
• Scrolling
  • Viewport and Elements
    • React Waypoint / Waypoints,
      React ScrollMonitor / ScrollMonitor,
      React Visibility Sensor
    • React Sticky
    • React Headroom / Headroom.js
    • React Infinite Scroller / React Infinite
    • React Lazyload
  • React Pull to Refresh
  • Smooth Scrolling - React Scroll
  • Scrollable - React iScroll / iScroll / Zynga Scroller
  • Scrollable Container - React Custom Scrollbars / React Scroll Box / React Scrollbar / Overthrow
• Zoom
  • Image Loupe - Drift / React Image Magnify
  • Image Viewer - React Images / React Image Lightbox / LightGallery / SmartPhoto
• Crop
  • React Avatar Editor / React Image Crop / React Cropper
• Resize
  • React Resizable
  • React RnD
• Tooltip
  • Hint.css
  • React Tether / Tether.js / Popper.js,
    React Tooltip / Tether Tooltip / Tippy.js
• Tour
  • React Joyride / Intro.js / tether-shepherd / Chardin.js
• Accessiblity
  • React HotKeys
  • React A11y

>> Return to Table of Contents

Graphic Libraries

• Animation
  • Effects
    • Animate.css / Magic Animations / All Animation CSS3 / Motion CSS / Effeckt.css / CSS3 Animation Cheat Sheet
      • Animate Components / React Animations
    • Hover.css
    • Transformicons / Hamburgers
    • Loading
      • Loaders.css / SpinKit / Spin.js
      • React Spinkit / React Loaders / Halogen / React Spinjs
  • Easing
    • d3-ease / tween-functions
    • bezier-easing
  • Scrolling
    • ScrollReveal.js / ScrollMagic
  • Parallax
    • Scrolling - Rellax / React Springy Parallax
    • Orientation - Parallax
  • FLIP
    • React FLIP Move
  • Characters
    • React Typist
    • React CountUp / CountUp.js
  • Keyframe / Transition
    • Style
      • Velocity.js / Velocity React / Dynamics.js
      • React Overdrive
    • Anything
      • Anime.js / React Anime
      • Between Shapes - flubber
      • Lightweight Tweening Engine - shifty / tween.js
      • GSAP - TweenLite, GSAP - TweenMax
  • Keyframe + Timeline
    • Style
      • React Motion
        • React Motion UI Pack
        • React Router Transition
    • Anything
      • React Move
      • GSAP - TimelineLite, GSAP - TimelineMax
        • React GSAP Enhancer
  • Motion / Curved Path
    • Shape - mo-js
    • SVG - Vivus
    • Ant Motion
• 2D
  • Canvas
    • Pixi.js / Fabric.js / React Konva
    • Isometric - obelisk.js
    • Creative - p5.js
    • Fonts - opentype.js
  • SVG
    • Snap.svg / Raphaël
  • Physics
    • Matter.js
• 3D
  • WebGL
    • Three.js / React Three / React Three Renderer
    • Babylon.js
    • stackgl
    • aframe-react / A-Frame
    • React VR
  • Physics
    • cannon.js / ammo.js / oimo.js
• Data Visualization
  • React Sparklines / React Trend / vx
  • Recharts / Victory
  • ECharts / Highcharts (Commercial) / React Highcharts / Google Charts / React Google Charts
  • Plotly.js
  • AntV G2
  • Chart.js / React ChartJS / Chartist.js
  • Graph - Cytoscape.js, AntV G6
  • Timesheet.js, Canvas Gauges
  • GIS - Leaflet, Turf.js, OpenLayers, Cesium
  • D3.js
    • Word Cloud - d3-cloud
    • Constraint - d3-force / cola.js
    • Awesome D3
• Game
  • React GameKit
  • Phaser
  • voxel.js

>> Return to Table of Contents

Hybrid Libraries

• Electron
  • Persistence
    • Electron Settings
    • Auto Launch
    • Electron Window State
    • Electron LetsMove
  • UI
    • Electron Window
    • About Window
    • Electron Context Menu
    • Menubar
  • Interaction
    • Electron Localshortcut
  • Debug
    • Electron Log
    • Electron Debug
• React Native
  • UI Toolkits
    • NativeBase
    • React Native Elements
  • Standalone UI Components
    • Vector Icons
    • Loading Spinner Overlay / SpinKit
    • Progress
    • Button
    • Tabs
    • Drawer
    • Modalbox
    • DatePicker
    • Maps
  • UX
    • React Navigation / Navigation
    • Push Notification / OneSignal
    • Parsed Text
    • Swiper
    • TabView / Scrollable TabView
    • Invertible Scroll View, Gifted Chat
    • Keyboard Spacer
  • Access
    • Device Info
    • Permissions
    • Keychain
    • Config
    • Image Picker / Image Crop Picker
    • Filesystem
    • Communications
  • Graphic
    • SVG
    • Blur
    • Animatable
    • Lottie
  • Media
    • Video
    • Camera
    • Sound
  • Storage
    • Realm
    • Simple Store

>> Return to Table of Contents

Server Side

Network

• HTTP
  • Intro
    • An overview of HTTP,
      Introduction to HTTP
    • Evolution of HTTP
    • Identifying resources on the Web /
      Understanding URIs
    • Architecture of the World Wide Web: Identification
    • MIME types
    • HTTP Messages
    • Connection management in HTTP/1.x
    • Redirections in HTTP
  • Reference
    • HTTP headers
    • HTTP response status codes / httpstatuses.com
  • Same-origin policy
    • HTTP access control (CORS) / Using CORS
    • Content Security Policy (CSP) - Google / Mozilla
  • Performance
    • High Performance Browser Networking,
      Ideal HTTP Performance
    • HTTP Caching - Google, Mozilla
    • Compression in HTTP
  • HTTPS
    • Why HTTPS Matters
    • Is TLS Fast Yet? / HTTP vs HTTPS Test
    • HTTP Strict-Transport-Security (HSTS)
    • What Is Mixed Content?, Preventing Mixed Content
  • HTTP/2
    • http2 explained /
      Introduction to HTTP/2
    • HTTP/2 FAQ
    • A Comprehensive Guide To HTTP/2 Server Push
  • gRPC
    • What is gRPC?
    • Protocol Buffers
• TCP
  • Writing WebSocket servers
• UDP
  • QUIC

>> Return to Table of Contents

Server-side Best Practices

• SaaS
  • The Twelve-Factor App
• Restful API
  • Heroku's HTTP API Design Guide,
    Microsoft's API Design Best Practices, REST API Guidelines,
    Best Practices for Designing a Pragmatic RESTful API,
    Principles of good RESTful API Design
  • Introducing JSON
• Microservices
  • A pattern language for microservices
    • Microservice Architecture, Monolithic Architecture
    • Decompose by business capability, subdomain
    • Service instance per container, Service deployment platform
    • Externalized configuration, Microservice chassis
    • Service discovery (Server-side, Client-side), Service registry, Remote Procedure Invocation
    • Database per service, Shared database
  • Microservices: From Design to Deployment
  • Microservices Resource Guide
  • API Gateway
    • Pattern: API Gateway / Backend for Front-End
    • Why an API Gateway?
    • Moving from REST to GraphQL / From REST to GraphQL
    • Serverless and GraphQL: A Perfect Match for the New Cloud Paradigm
  • Serverless
    • Pattern: Serverless deployment
    • Microservices without the Servers
    • The Next Layer of Abstraction in Cloud Computing is Serverless
    • The essential guide to serverless technologies and architectures,
      An essential guide to the serverless ecosystem
    • Serverless Architecture: Five Design Patterns,
      Serverless Code Patterns
• Cloud / Distributed
  • Architecture
    • AWS Well-Architected
    • Azure's Cloud Fundamentals - Architecture styles, Pillars of software quality, Design principles
  • Static
    • Static Content Hosting, Valet Key, Content Delivery Network
    • Defining Static Web Apps
  • Queue / Jobs
    • Queue-Based Load Leveling, Competing Consumers, Priority Queue
    • Background jobs
  • Decompose
    • Federated Identity
    • Pipes and Filters
    • Compute Resource Consolidation
  • Configuration
    • External Configuration Store, Runtime Reconfiguration
  • Storage / Querying
    • Cache-Aside, Caching
    • CQRS, Event Sourcing
    • Index Table, Materialized View
    • Data partitioning, Sharding
  • Resiliency / Availability
    • Retry, Circuit Breaker, Transient fault handling
    • Compensating Transaction
    • Health Endpoint Monitoring, Leader Election, Scheduler Agent Supervisor
    • The Reactive Manifesto
  • Multitenant
    • Manage Identity in Multitenant Applications
• Old-fashioned Web Hosting / Non-distributed
  • Ultimate Guide to Web Hosting / Web Hosting Beginner Guide
• Authentication / Authorization
  • Cookies vs Tokens: The Definitive Guide,
    The Ins and Outs of Token Based Authentication
  • Introduction to JSON Web Tokens
  • An Introduction to OAuth 2, Understanding OAuth2
    • The OAuth Bible
  • Tokens used by Auth0
    • Understanding Refresh Tokens
  • How To Safely Store A Password
  • You Wouldn't Base64 a Password - Cryptography Decoded
  • Weak Signature Algorithm
• Security
  • Security Guide for Developers
    • Understanding CSRF, CSRF Demystified
    • Cross-site Scripting (XSS) Attack
  • OWASP Top Ten Cheat Sheet
  • WebAppSec/Secure Coding Guidelines
  • Node.js Security Checklist
  • Tools - see Tooling > Testing > Analysis
• Logging / Monitoring
  • Logging The Ultimate Guide
  • The Definitive Guide for Monitoring Node.js Applications
  • Monitoring and diagnostics
  • Tools - see Tooling > Workflow > Monitoring
• DevOps
  • Deployments Best Practices
  • Start your DevOps journey
  • The Practical DevOps Playbook
  • Tools - see Tooling > Workflow > Deployment > DevOps

>> Return to Table of Contents

Microservices / API Services (Node.js)

• Frameworks
  • RESTful API
    • Middleware Framework
      • Express / Koa
      • Express Middlewares
        • Logger
          • morgan, express-winston, errorhandler, response-time
        • HTTP Parser
          • body-parser, multer, raw-body, cookie-parser
        • HTTP Headers and Verbs
          • cors, method-override
        • Performance
          • compression , connect-timeout
        • Security
          • helmet, express-validator
        • Auth
          • express-jwt / passport.js
        • Proxy
          • http-proxy-middleware / rocky
          • graphql-server-express / express-graphql
    • Rich Framework
      • Configuration - Hapi
      • Realtime - Feathers
  • Microservices
    • Micro / Seneca / StdLib
  • Serverless
    • Serverless Framework
    • IronFunctions
  • Bots
    • Botkit
• GraphQL
  • Schemas and Types
    • GraphQL Schema Language Cheat Sheet
  • graphql-tools
  • graphql-anywhere
• DocGen + CodeGen
  • API Blueprint / Swagger / RAML
    • Parser - Protagonist / Drafter
      • Renderer - Aglio
    • Validator - Dredd
  • JSON Schema
    • Understanding JSON Schema
    • JSON Schema Based Editor
  • See Tooling > Documentation
• Scaffold / Boilerplate / Generator
  • nodecube (author's own project)
  • Nodal
  • Fuge
  • Botpress

>> Return to Table of Contents

Server-side Libraries (Node.js)

• Configuration
  • dotenv
  • jsonfile
• Debugging
  • winston
  • verror
  • longjohn, stackman
  • why-is-node-running
• Protocols
  • form-data, formidable
  • iconv-lite
• Network
  • WebSocket - ws / Socket.IO / Engine.IO / SockJS-node
  • Server-Sent Event - faye-websocket
  • HTTP/2 - spdy
  • gRPC - grpc
  • AMQP - amqplib
  • download
  • Email - Nodemailer
    • Email HTML - mailgen
• Crypto
  • hasha
  • md5
  • bcrypt
• Auth
  • JWT - jsonwebtoken
  • passwordless
  • oauth
  • OAuth Providers - hello.js / grant
• Storage
  • NOSQL
    • Redis Client - ioredis
    • MongoDB ORM - Mongooose
    • DynamoDB ORM - vogels
    • HBase Client - hbase
  • RDS
    • RDS ORM - Sequelize
    • SQL Builder - Knex.js
• Jobs
  • Parallel - webworker-threads
  • Queue - kue / bull
  • Scheduler - node-schedule
• Scraping
  • HTML Traversing - cheerio, jsdom
  • HTML Parsing - parse5 / htmlparser2
  • Extract Article - read-art / node-readability
  • Extract Metadata - url-unshort / embedza
  • Web Crawler - simplecrawler / x-ray / scrape-it
  • Headless Browsers - see Tooling > Testing > Web Testing > Headless Browsers
• Images
  • Canvas / WebGL API - node-canvas / gl
  • Image Manipulation - gm / sharp
  • Capture Screenshots - pageres
  • QR Code / Barcode - qr-image
  • Computer Vision - tracking.js / opencv
• Parsing / Generating
  • Text - unified
    • Markdown - remark
  • PDFKit
  • csv
  • xml2js
• NLP
  • natural / retext / NodeJieba

>> Return to Table of Contents

Cloud Services (Global)

• Compute
  • FaaS / Serverless / WebHook
    • AWS Lambda / Google Cloud Functions
    • webtask / hook.io
    • Graphcool Functions
    • Amazon API Gateway
  • PaaS
    • See Tooling > Workflow > Deployment > DevOps > PaaS
  • CaaS
    • Amazon ECS / Google Container Engine
• Storage
  • Object Storage
    • Amazon S3 / Google Cloud Storage
    • imgix
  • DBaaS
    • In-Memory Key-Value NoSQL - Amazon ElastiCache
      • Redis - Compose / Redise Cloud / Heroku Redis
    • Document NoSQL - Amazon DynamoDB / Google Cloud Datastore
      • MongoDB - Compose / mLab / MongoDB Atlas
      • CouchDB - Couchbase / Cloudant
    • Wide Column NoSQL - Google Bigtable
    • SQL - Amazon RDS / Google Cloud SQL
      • PostgreSQL - Compose / Heroku Postgres
      • MySQL - Compose
    • NewSQL - Google Cloud Spanner
    • Queue - Amazon SQS / Amazon Kinesis / Google Cloud Pub/Sub
      • Kafka - Heroku Kafka
      • RabbitMQ - Compose
    • Analytics - Amazon CloudSearch
      • Elasticsearch - Amazon Elasticsearch Service / Elastic Cloud / Bonsai
    • Warehouse - Amazon Redshift / Google BigQuery
• BaaS
  • CRUD
    • Realtime
      • Firebase Realtime Database
    • GraphQL
      • Graphcool / Scaphold
    • CMS
      • WordPress.com REST API / Contentful / DatoCMS / GraphCMS / Baasic
  • Auth
    • Auth0 / Amazon Cognito / Firebase Authentication
    • OAuth.io
    • CAPTCHA
      • reCAPTCHA
  • Search - Algolia
  • Email - SendGrid / Mailgun / Mandrill / Amazon SES
  • SMS - Nexmo / Twilio / Amazon SNS
  • Payment - Stripe
  • Maps - Mapbox
  • Customer Support - Intercom / Zendesk
  • IM - Discord
  • Form - Typeform.io / Form.io
• AIaaS / BDaaS
  • Natural Language
    • NLP - Google Natural Language API
    • Speech Recognition / Speech Synthesis
      • Amazon Lex / Google Cloud Speech API
      • Amazon Polly
    • Translation - Google Cloud Translation API
  • Computer Vision
    • Amazon Rekognition / Google Cloud Vision API
    • Google Cloud Video Intelligence API

>> Return to Table of Contents

Cloud Services (China)

The evil twins inside the Great Firewall of China

• Compute
  • FaaS / Serverless / WebHook
    • 阿里云-函数计算 / 腾讯云-无服务器云函数 SCF
    • 阿里云-API 网关
  • PaaS
    • See Tooling > Workflow > Deployment > DevOps > PaaS
  • CaaS
    • 阿里云-容器服务 / 腾讯云-容器服务 CCS / DaoCloud
• Storage
  • Object Storage
    • 阿里云-对象存储 OSS / 腾讯云-对象存储 COS
  • DBaaS
    • In-Memory Key-Value NoSQL
      • Redis - 阿里云-云数据库 Redis 版 / 腾讯云-云存储 Redis
    • Document NoSQL
      • MongoDB - 阿里云-云数据库 MongoDB版 / 腾讯云-文档数据库 MongoDB
    • Wide Column NoSQL - 阿里云-表格存储 OTS
      • HBase - 阿里云-云数据库 HBase 版 / 腾讯云-列式数据库 HBase
    • SQL
      • PostgreSQL - 阿里云-云数据库 PostgreSQL 版 / 腾讯云-云数据库 CDB for PostgreSQL
      • MySQL - 阿里云-云数据库 MySQL 版 / 腾讯云-云数据库 CDB for MySQL
    • Queue - 阿里云-消息服务 MNS / 腾讯云-消息服务 CMQ
      • Kafka - 腾讯云-消息服务 CKAFKA
    • Analytics - 阿里云-开放搜索 OpenSearch / 腾讯云搜 TCS
    • Warehouse - 阿里云-MaxCompute (ODPS) / 腾讯云-大数据处理套件TBDS
• BaaS
  • CRUD
    • LeanCloud-数据存储
    • Realtime
      • 野狗-实时通信引擎 / LeanCloud-实时通信
  • Auth
    • 野狗-身份认证
    • CAPTCHA
      • 极验 / 腾讯云-验证码服务 YY
  • Search -
  • Email - 阿里云-邮件推送 / SendCloud
  • SMS - 阿里云-短信服务 / 腾讯云-短信 SMS / 云片 / 野狗-短信
  • Payment - Ping++
  • Maps - 高德开放平台 / 百度地图开放平台
  • Customer Support - 美洽 / 微金小云客服
  • IM - 野狗-即时通讯 / 腾讯云-云通信 IM
  • Form - 金数据
• AIaaS / BDaaS
  • Natural Language
    • NLP
      • 腾讯云-文智自然语言处理 NLP
      • 阿里云-机器学习PAI-文本分析
    • Speech Recognition / Speech Synthesis
      • 阿里云-智能语音交互 / 腾讯云-智能语音服务 AAI
    • Translation - 腾讯云-机器翻译
  • Computer Vision
    • 腾讯云-万象优图 CI
    • 阿里云-印刷文字识别
  • Graphs / Networks / Clusters
    • 阿里云-推荐引擎 / 腾讯云-云推荐引擎 CRE
    • 阿里云-关系网络分析
    • 阿里云-机器学习PAI-网络分析
  • Persona
    • 阿里云-画像分析 / 腾讯云-智能推荐 IR

>> Return to Table of Contents

Tooling

Testing

• Unit Testing / Test Runner
  • Jest
  • AVA
  • Mocha + Chai
  • Karma
• Web Testing
  • Integration Testing
    • Enzyme
  • Functional Testing
    • Headless Browser Automation - Selenium WebDriverJS / WebDriverIO / Nightwatch.js / Nightmare / CasperJS
    • Cloud - BrowserStack Automate / Sauce Labs
  • Visual Testing
    • React Storybook / React Cosmos
    • BrowserStack
  • Monkey Testing
    • gremlins.js
  • Headless Browsers
    • Browsers
      • Chromium - Headless Chrome/Chromium
      • Chromium + Node.js - electron-prebuilt
      • WebKit - PhantomJS
      • Gecko - SlimerJS
    • In-memory X11 Display Server
      • xvfb - xvfb-run / headless
    • Docker
      • lighthouse-ci/builder/Dockerfile.headless
      • electron-headless
• Server-side Testing
  • Functional Testing
    • supertest
  • Load Testing
    • k6
    • loadtest
• Benchmark Testing
  • JS
    • Benchmark.js
    • Speedracer
    • stats.js
  • Network
    • wrk / httpstat
• Test Doubles (Fakes, Mocks, Stubs and Spies)
  • Fake Data
    • Faker.js / Chance.js
    • JSON Schema Faker
    • placeholder.com
  • HTTP Mocking - Nock
  • Monkey Patching - Mockery, babel-plugin-rewire
  • SinonJS / testdouble.js
    • Best Practices for Spies, Stubs and Mocks in Sinon.js
    • testdouble.js vs. sinon.js
• Analysis
  • Code Coverage
    • Istanbul
  • Software Complexity
    • escomplex / complexity-report
  • Node.js Security
    • nsp / snyk
      • NSP Advisories / Snyk - Vulnerability DB
  • Web Page
    • Lighthouse / pwmetrics
    • PageSpeed Insights
    • Varvy SEO tool

>> Return to Table of Contents

Documentation

• JS
  • JSDoc3
    • documentation.js
    • jsdox
    • dox
  • ESDoc
  • React DocGen
• API
  • apiDoc
  • GraphQL Voyager
• CLI
  • Ronn
  • Docopt
• CSS / Style Guide
  • KSS (Knyle Style Sheets)
    • kss-node
    • SC5 Style Guide Generator
  • React Styleguidist
• Writing
  • Static Web Generator - GitBook / ReadMe
  • Client-side Rendering - Docute / Docsify

>> Return to Table of Contents

Toolchain

• Compiler / Transpiler / Preprocessor
  • Babel
    • Setting up ES6
    • Babel User Handbook, Babel Plugin Handbook
    • Presets
      • Preset Env
        • Browserslist
      • Preset React
      • React Optimize
    • Plugins
      • Proposals
        • Shims - Runtime Transform / Polyfill
          • async/await - fast-async (NoDent)
        • Stage 3, Stage 2, Stage 1, Stage 0
          • Class properties
          • Object rest spread
          • Stage 2 Decorators / Legacy Decorator
      • Node.js
        • add-module-exports
        • Root Import / Webpack Alias
      • React
        • JSX Control Statements
        • React CSS Modules
      • Libraries
        • lodash, ramda
      • Optimization
        • transform-remove-console
  • TypeScript
    • TypeScript: the missing introduction
  • PostCSS
    • Standards
      • Autoprefixer, CSSNext
      • image-set Polyfill
      • Will Change
      • Normalize
    • Utilities
      • Utility Library, Rucksack
      • LostGrid
      • Quantity Queries, Initial
      • Pxtorem / Pixrem
      • Brand Colors / Nippon Color / Google Color
      • Contrast / Get Color
      • Easing Gradients
    • Assets
      • Assets
      • Inline SVG, SVGO
      • Font Magician
    • Syntax
      • PreCSS
      • SCSS Parser
      • JS
  • node-sass
  • PostHTML
• Loader / Builder / Bundler
  • Webpack
    • webpack-howto
      • SurviveJS Webpack
      • webpack-blocks
    • Loaders
      • babel-loader / awesome-typescript-loader / vue-loader
        • imports-loader
      • css-loader, style-loader / isomorphic-style-loader
        • postcss-loader, scss-loader
        • resolve-url-loader
      • svg-react-loader
      • worker-loader, wasm-loader
      • raw-loader
        • json-loader / json5-loader
        • handlebars-loader, html-loader
        • shader-loader / glslify-loader
      • image-webpack-loader / img-loader
      • url-loader, svg-url-loader
      • file-loader
    • Plugins
      • Extract Text Plugin, HTML Webpack Plugin, Copy Webpack Plugin
      • Offline Plugin, SW Precache Plugin
      • Define Plugin
      • Lodash Plugin
      • Bundle Analyzer
  • Rollup
    • Webpack and Rollup: the same but different
• Formatter
  • Prettier
    • prettier-eslint
  • Recast
    • jscodeshift
    • react-codemod
  • stylefmt
• Static Analysis
  • ESLint
    • ESLint Rules
      • eslint-index, eslint-find-rules
    • Plugins
      • babel, eslint-comments, unicorn, no-use-extend-native
      • compat
      • node, security
      • react, graphql
      • flowtype, jsdoc
      • ava, mocha, chai-expect
      • fp, lodash, lodash-fp, immutable
      • promise, optimize-regex
      • filenames
  • Flow
    • flow-typed
    • Flow Runtime
  • StyleLint
    • doiuse
    • Colorguard
    • postcss-bem-linter
  • HTMLHint
• Minifier / Compressor / Optimizer
  • Prepack
  • Babili / uglify-es / UglifyJS 3 / UglifyJS 2
  • cssnano / clean-css / CSSO
  • HTMLMinifier
  • Critical / Penthouse
  • imagemin
    • gifsicle
    • jpegtran / mozjpeg
    • optipng / pngquant
    • svgo
  • fontmin, font-spider
• Task Automation
  • npm-run-script, npm-scripts
    • task automation with npm run,
      How to Use npm as a Build Tool
      • Why I Left Gulp and Grunt for npm Scripts
    • Git Hooks - Husky
    • Environment Variables - env-cmd, cross-env
    • get-port, public-ip
  • Gulp
    • gulp - The vision, history, and future of the project
    • Why you shouldn’t create a gulp plugin
    • Gulpfile API
    • Utilities
      • gulp-util, through2, gulp-load-plugins
      • gulp-size, gulp-count, gulp-notify
      • gulp-debug
      • gulp-if, gulp-filter, merge-stream
      • gulp-changed / gulp-cached
      • gulp-exec, gulp-git
      • gulp-rename
      • gulp-replace / gulp-inject / gulp-useref, gulp-inline-source
      • gulp-sourcemaps

>> Return to Table of Contents

Workflow

• Development
  • Micro Generator
    • Plop
  • Live Reload / Watch / Preview
    • webpack Dev Server
      • webpack Dashboard
      • webpack Dev Middleware
    • React Hot Loader 3
    • Browsersync
    • Electron - Electron Connect
    • React Native - Expo
    • Node.js - nodemon
  • Dev Tools
    • Chrome DevTools
      • Console - Console API, Command Line API
    • Third-party Panels
      • React DevTools / AngularJS Batarang / Augury / Vue.js DevTools
      • React Perf
      • Redux DevTools
      • Immutable DevTools
      • Apollo Client Devtools, GraphQL Network
      • JWT Inspector
      • WebGL Insight, Three.js Editor Extension
    • Reactotron
    • Electron - Devtron
  • HTTP Inspector
    • Paw / Postman / HTTPie
  • Debugging Proxy
    • AnyProxy / Fiddler
    • Tamper Chrome
• Deployment
  • Publishing App
    • Server-side Rendering
      • Next.js
      • React Isomorphic Render
      • React Engine
      • Express React Views
    • Static Web
      • Dynamic Routing + CDN
        • Superstatic
      • Object Storage + CDN
        • Global
          • Amazon S3 + CloudFront - aws-sdk / awscli
          • Google Cloud Storage + Cloud CDN - google-cloud / gcloud
          • Firebase Hosting - firebase-tools
          • Netlify - netlify-cli
          • Surge - surge cli client
        • China
          • 阿里云 OSS + CDN - aliyun-sdk / oss-nodejs-sdk
          • 腾讯云 COS + CDN - cos-nodejs-sdk-v5
    • Packaged App
      • Electron Builder
        • Auto Update
      • CodePush
  • DevOps
    • Process Supervisor
      • pm2
        • pm2-docker
        • Process File
    • Containers
      • Docker
        • Learning
          • Play with docker classroom
          • Docker Curriculum
          • Docker Cheat Sheet / Docker Cheat Sheet
        • Dockerfile reference
        • Docker run reference
        • Docker Compose
      • Docker Images
        • node / risingstack/alpine / keymetrics/pm2-docker-alpine
        • docker-lambda
    • Container Clusters
      • Docker Engine in Swarm Mode
        • Compose file reference
        • wait-for-it.sh / dockerize
      • Kubernetes
        • Kubernetes Cheat Sheet
    • PaaS
      • Global
        • now
        • heroku - heroku-cli
      • China
        • LeanCloud-云引擎 (云函数, 网站托管) - lean-cli
• Monitoring
  • Error Tracking
    • Capturing client-side JavaScript errors, Front-End Error Handling
      • A Guide to Proper Error Handling in JavaScript
    • Services
      • TrackJS / Errorception
      • Sentry / Rollbar / Bugsnag / Airbrake / Raygun
  • Logging
    • Global
      • Amazon CloudWatch / Google Stackdriver
    • China
      • 阿里云-云监控 + 阿里云-日志服务 SLS / 腾讯云-基础监控 BCM
  • APM (Application Performance Management)
    • Global
      • New Relic / AppDynamics / Datadog APM
      • Pingdom, AppNeta
      • Trace
    • China
      • OneAPM / 听云
      • 腾讯云-云拨测 CAT / 百度云观测
      • alinode

>> Return to Table of Contents

Command-line Environment (Mac)

• Intro
  • The Art of Command Line
  • The Bash Guide
• Terminal
  • iTerm2
    • iTerm Color Schemes
  • Hyper
    • Awesome Hyper
• Package Manager
  • Homebrew
• Shell
  • Oh My Zsh
  • Zsh Plugins
    • zsh-better-npm-completion
    • Awesome Zsh Plugins
• Vim
  • Vimtutor
  • spf13-vim / YVim
• Git
  • Git-it
  • Become a git guru, Git Glossary
  • Pro Git - Index of Commands
  • commitizen
• Docker for Mac
• dotfiles
• Utilities
  • Analysis - cloc
  • Finding - ag (The Silver Searcher), peco, jq
  • Processes - glances / vtop, fkill
  • Help - tldr / howdoi

>> Return to Table of Contents

Command-line Libraries (Node.js)

• Input
  • Options/Arguments Parser - minimist / commander / yargs
  • Interactive - inquirer
  • Rapidly Building - cli / vorpal
  • Configuration - Liftoff
• Output
  • Color / Style - Chalk
  • Icon - log-symbols / figures
  • Updating Log
    • Low-level - log-update
    • Indicator - ora / progress / pace
    • Pretty Log - DraftLogs / listr
  • Notice - boxen, cfonts
  • Columns - cli-table / columnify
  • Curses-like - blessed
  • Drawing - drawille-canvas
  • Image - term-img
• Delivery
  • update-notifier
  • Reporting Usage - insight
  • Self-contained Executable - pkg
• Framework
  • Generator - Yeoman
• OS
  • Shell Commands - ShellJS
  • Filesystem
    • Filesystem API - fs-extra / fs-jetpack
    • Wildcard Matching - glob / globby, matcher
    • Virtual Filesystem - vinyl
    • Temporary File - tmp
    • File Locking - proper-lockfile
    • Finding - find-up, readdirp
    • Watch - chokidar / gaze
  • Local
    • network-address
    • clipboardy
• API
  • Git - simple-git / nodegit
  • Docker - dockerode
  • SSH - ssh2
• Parser
  • JS - Acorn / Babylon / Espree / Esprima

>> Return to Table of Contents

IDE / Editors

• Atom Plugins
  • UI
    • fonts
    • file-icons
    • highlight-line, highlight-selected
    • indent-guide-improved, trailing-spaces
  • Formating
    • auto-detect-indentation, editorconfig
    • prettier-atom
    • atom-stylefmt / postcss-sorting / atom-beautify
    • aligner / atom-alignment
    • toggle-quotes
  • Operating
    • vim-mode-plus, jumpy
    • Sublime-Style-Column-Selection
    • Emmet
    • Snippets
      • turbo-javascript
  • Static Analysis
    • file-types
    • language-babel, atom-ternjs
    • language-postcss
    • language-mjml
    • linter-eslint, linter-flow, linter-stylelint, linter-htmlhint, linter-mjml, linter-jsonlint, linter-js-yaml
  • Docs
    • dash
    • Hyperclick, js-hyperclick
    • keybinding-cheatsheet
  • Assistant
    • Project Manager
    • todo-show / imdone-atom
  • Integration
    • GitHub for Atom
    • Build
      • AtomBuild
    • Markdown Preview Plus
• Out-of-the-box Atom IDE
  • YAtom (author's own project)
  • Nuclide
  • Reactide
• Other Electron-based IDE
  • VS Code
    • Visual Studio Marketplace
  • Deco
• WebStorm
• Programming Fonts
  • Hack
  • Anonymous Pro
  • Source Code Pro
  • Fira Mono
  • Google Noto Mono
  • Droid Sans Mono
  • Space Mono
  • M+
  • Mononoki
  • Profont

>> Return to Table of Contents

Useful Apps

• Playground
  • CodePen / WebpackBin
    • CDN for npm - unpkg
  • RunKit
  • RequestBin
  • jsPerf
  • Apollo Launchpad
  • GLSL Sandbox
• Visual Tools
  • Performance
    • Cuzillion
    • Critical Path CSS Generator
  • CSS
    • cssreference.io
    • EnjoyCSS
    • Easing - cubic-bezier / Ceaser CSS Easing Animation Tool / Custom easing functions / Easing functions
    • Flexbox - Fibonacci Flexbox Composer / CSS Flexbox Please! / Flexy Boxes / Flexbox Playground / flexplorer
    • Animation - CSS3 Keyframes Animation Generator / Mantra / Bounce.js
    • Gradient - Ultimate CSS Gradient Generator
    • Quantity Queries Builder
    • Shapes - CSS triangle generator, Tridiv CSS 3D Editor
    • HTML Table Generator
  • JS
    • Keyboard Event Viewer
    • Web Audio Playground
    • Regex101 / Debuggex
• Viewer
  • JSON Viewer, XML Tree
  • JS Nice / JS Beautifier
  • GraphQL Voyager, GraphQL Docs, GraphQL Visualizer / graphqlviz / graphqlviz
  • AST Explorer
  • DevTools Timeline Viewer
  • Text Escaping and Unescaping in JavaScript
  • HTML Entity Lookup / HTML Arrows
• Docs
  • Dash / DevDocs / Velocity / Zeal
• Automation
  • RobotJS

>> Return to Table of Contents

Collaboration

• Version Control
  • Workflow
    • Comparing Workflows
    • Understanding the GitHub Flow
    • A successful Git branching model
  • GUI
    • SourceTree
  • Github
    • GitHub Cheat Sheet
    • Github Help
    • How we organize GitHub issues: A simple styleguide for tagging
    • Chrome Extensions
      • OctoLinker, Octotree, Code Climate
      • Awesome browser extensions for GitHub
• ChatOps
  • What is ChatOps? And How do I Get Started?,
    What is ChatOps? A guide to its evolution, adoption, and significance
  • Hubot
    • Adapters - Slack / HipChat / Discord / IRC / Wechat / QQ
• Kanban
  • What is Kanban? - A, B
  • Getting Started With Trello
  • Github Project Boards
• Markdown
  • Mastering Markdown
  • Markdown: Syntax
• Design
  • Sketch + Zeplin / Sympli / Avocode
  • After Effects + Lottie / bodymovin
  • Figma
  • InVision

>> Return to Table of Contents