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?

Understanding Modern Web Development

In English: coming soon...
In Chinese: slides @ JSConf CN 2017

Table of Contents

Platforms and Languages
- Open Web Platform
  - Learning, Reference, Visual Tools
  - Performance, Security, Semantics / SEO / Accessibility
- HTML5 / Web APIs
  - HTML/DOM, Appearance, Interaction, Access, Network, Media, Graphics, Computing...
- CSS Features
  - RWD, Layout, Typography, Text, Animation, Effects...
- Modern CSS / Next-Gen 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...)
- Modern JS / Next-Gen JS
  - ES6+ Features, Intro to ES6+, Re-intro to JS, Important Proposals, Functional Programming, FRP, Static Typing, Code Style...
- WebAssembly
  - Concepts, Features, Rust, ...
- 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/E2E 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)
- IDE / Editors
  - VSCode Plugins (UI, Formatting, Operating, Static Analysis, Docs, Assistant, Integration...)
  - Atom Plugins (UI, Formatting, 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

Open Web Platform
HTML5 / Web APIs
CSS Features
Modern CSS / Next-Gen CSS
Modern JS / Next-Gen JS
Platform Compatibility and Proposal Status
Network
Node.js
npm Ecosystem
Command-line Environment (Mac)
IDE / Editors
GUI Framework
Microservices / API Services (Node.js)
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

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
- Web Worker - Greenlet / Workerize
- document-write - PostScribe
- User Timing API - marky
Offline
- Service Work - Workbox
- File / FileReader API
  - FileSaver.js / StreamSaver.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
Finding Packages
Dependency Management / Release / Maintenance
Convention
- Open Source
  - README
  - Changelog
  - License
    - Choose an open source license
- SemVer
  - SemVer (Semantic Versioning) / The semantic versioner for npm / Semver: A Primer
  - npm semver calculator
- package.json
- Small Modules
  - Unix Philosophy and Node.js
  - module best practices
  - how I write modules
  - Hyper Modular / One-line Modules
- 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
- OOP
  - lodash-decorators
  - Stampit
- Async
  - Observable - RxJS
  - Promise - es6-promisify, Bluebird
  - Generator - Co
  - Callback - Async
- Syntax
  - XRegExp
- Node.js API
  - node-libs-browser
  - EventEmitter3
- Debugging
  - debug / pino
Hashing / Generating
- uuid / cuid
- 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
- 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
    - CommonMark, A formal spec for GitHub Flavored Markdown
  - Links Recognition - linkify-it
  - Language Detection - franc
  - Text Differencing - diff
  - JSON Differencing - deep-diff
  - Search - Fuse.js / fuzzysearch / Lunr.js / js-worker-search, regexgen / escape-string-regexp
  - DSL Parser - 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
    - Based on XHR - Axios
    - Based on Fetch API - hifetch
  - 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
Computation
- Math.js, Simple Statistics, ndarray, bignumber.js
NLP
- compromise / talisman
ML/DL
- TensorFlow.js
- MLJS, Synaptic

>> Return to Table of Contents

Universal Web Apps / Web Pages

GUI Framework

View / ViewModel / ViewController
- React
  - Learning
    - Pete Hunt's react-howto
    - React - Basic Theoretical Concepts
    - Under the hood: ReactJS
    - SurviveJS React / React Express
    - React Cheat Sheet
    - Best Practices
      - React Bits, React in patterns
      - Functional UI and Components as Higher Order Functions
    - Next Gen - What is React Fiber?, React 16
  - Component Utilities
  - Browser Utilities
  - Use React Alone
    - Redial / React Refetch
    - formik / Formsy React
  - Lightweight Alternative
    - Preact / Inferno
- Angular
- Vue.js
- Cross-framework
  - vuera
Model / App State
- Redux
  - Learning
  - Reduce Boilerplate
    - redux-cube (Author's own project)
  - Connect
    - react-redux
    - reselect
  - Action Types, Action Creators, Reducer Switch
  - Asnyc Actions
  - State
    - normalizr
    - Immutalbe - see Universal Utility Libraries > Standard Library Extensions > FP > Immutable
    - redux-immutable
    - redux-persist
    - redux-undo
    - redux-reset
  - UI Patterns
  - App Behaviours
  - Development
    - redux-devtools-extension
    - redux-logger
    - Testing - see Testing > Web Testing > Integration Testing
- MobX
- Baobab / Freezer
API / Data Source
- GraphQL
  - Learning
    - Queries and Mutations
    - Playground - GraphQLHub, Explore GraphQL
  - State Management
    - Apollo Client
    - redux-source (Author's own project)
  - graphql-anywhere
  - graphql-tools
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
i18n
- React Intl / React i18next
- React Intl Redux
Monitoring / Error Capture
- react-ga
- redux-segment
- redux-raven-middleware / raven-for-redux
- redux-catch
- redux-beacon
- Services - see Tooling > Workflow > Monitoring
Debugging
- why-did-you-update
Server-side Rendering
- see Tooling > Workflow > Deployment > Publishing App
Static Web
- JAMstack
- see Tooling > Workflow > Deployment > Publishing App
Scaffold / Boilerplate / Generator
- create-react-app / angular-cli / vue-cli
- Next.js
- webcube (Author's own project)
- Starter Kits Recommended by the React Team
- JavaScript Stack from Scratch
- Static Site Generator - Gatsby / Metalsmith / Hexo / Assemble
GUI Architectures

>> Return to Table of Contents

UI Toolkits

CSS
React

>> 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 Collapse / React Sanfona
Picker
- React Tabs
- React Select
- React Radio Group
- RC Slider / React Slider / React Input Range
- React Color
- React Dates / React Datepicker / React Day Picker / Pikaday / React Datetime
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 Modal / SweetAlert2 / vex
- React Overlays
- 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
- React Rating
- List / Table - React Virtualized / React Table / React List
- Spreadsheet - React Data Grid / React Handsontable / React Datasheet
- TreeView - React Treebeard / React TreeView
- JSON Viewer - React JSON Tree
- React QR Code
- Email Table - Oy Vey
Editor
- Draft.js
  - Awesome Draft.js
- Slate
- React Quill / Quill
- React Monaco Editor / React Ace / React Codemirror
  - Monaco Editor / Ace / CodeMirror
- React Markdown
- React Syntax Highlighter / Highlight.js
Widget

>> Return to Table of Contents

Client Side

UX Libraries

Drag & Drop
Gesture
- Hammer.js / Interact.js / ZingTouch / AlloyFinger
  - Gestures Patterns
  - React HammerJS
- React Swipeable Views / React Swipeable / Swiper
Scrolling
- Viewport and Elements
- 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
    - React Animations / Animate Components / rc-animate
  - Hover.css
  - Transformicons / Hamburgers
  - Loading
    - Loaders.css / SpinKit / Spin.js
    - React Spinkit / React Loaders / Halogen / React Spinjs
  - Queue
    - React FLIP Move / rc-queue-anim
  - Characters
    - React Typist / rc-texty
    - React CountUp / CountUp.js
- Parallax / Scrolling
  - ScrollReveal.js / ScrollMagic / Rellax
  - rc-scroll-anim / React Springy Parallax
  - Orientation - Parallax
- Easing
  - d3-ease / tween-functions
  - bezier-easing
- 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
  - SVG - Vivus
  - Shape - mo-js
  - rc-tween-one
2D
- Canvas
  - Pixi.js / Fabric.js
  - React Pixi / ReactPixiFiber / 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 360
- 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

>> Return to Table of Contents

Hybrid Libraries

Electron
- Persistence
- UI
- 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
- Access
- Graphic
  - SVG
  - Blur
  - Animatable
  - Lottie
- Media
  - Video
  - Camera
  - Sound
- Storage
  - Realm
  - Simple Store

>> Return to Table of Contents

Server Side

Network

HTTP
- Intro
- 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
- HTTP/2
- 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
Microservices
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
- Queue / Jobs
  - Queue-Based Load Leveling, Competing Consumers, Priority Queue
  - Background jobs
- Decompose
- Configuration
  - External Configuration Store, Runtime Reconfiguration
- Storage / Querying
- Resiliency / Availability
- Multitenant
  - Manage Identity in Multitenant Applications
Old-fashioned Web Hosting / Non-distributed
- Ultimate Guide to Web Hosting / Web Hosting Beginner Guide
Authentication / Authorization
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
        
        apollo-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
- The Fullstack Tutorial for GraphQL
- Server
  - Apollo Server
  - graphql-tools
- Resolvers
  - graphql-resolvers
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
- Nodal
- Fuge
- Botpress
- nodecube (Author's own project)

>> Return to Table of Contents

Server-side Libraries (Node.js)

Configuration
- dotenv
- jsonfile
Debugging
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
- svg-captcha
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 Chrome Crawler
- Headless Browsers Automation - see Tooling > Testing > Web Testing > Functional Testing > Headless Browser Automation
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
- 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
- Persona
  - 阿里云-画像分析 / 腾讯云-智能推荐 IR

>> Return to Table of Contents

Tooling

Testing

Unit Testing / Test Runner
- Jest
- AVA
- Mocha + Chai
- Cypress
- Karma
Web Testing
- Integration Testing
  - Components - Enzyme
  - Reducers
    - redux-test-utils + enzyme-redux
    - redux-testkit
- Functional Testing / E2E Testing
  - Headless Browser Automation
    - DevTools API
      - Headless Chrome - Puppeteer / Chromy
        
        End-to-end Tests that Don’t Suck with Puppeteer
        
        AWS Lambda - Chromeless
      - electron-prebuilt - Nightmare
    - WebDriver API - Selenium WebDriverJS / WebDriverIO / Nightwatch.js / CasperJS / Protractor
      - AWS Lambda - Lambdium
  - 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
      - Why you should stop using 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
- Network
  - wrk / httpstat
Test Doubles (Fakes, Mocks, Stubs and Spies)
- Fake Data
- 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

>> Return to Table of Contents

Documentation

JS
- JSDoc3 + documentation.js / jsdox / dox
- ESDoc
- React DocGen
API
- apiDoc
- GraphQL Voyager
CLI
- Ronn
- Docopt
Style Guide
- Markdown + JSX - docz
- JS - Storybook
- JS comments - React Styleguidist
- CSS comments - KSS (Knyle Style Sheets)
  - kss-node
  - SC5 Style Guide Generator
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
  - Plugins
    - Proposals
      - Babel progress on ECMAScript proposals
      - Shims - @babel/polyfill (useBuiltIns) / core-js
        
        async/await - fast-async (NoDent)
      - Stage 3, Stage 2, Stage 1, Stage 0
        
        Class properties
        
        Object rest spread
        
        Legacy Decorator / Stage 2 Decorators
        
        Dynamic Import- Syntax, For Node.js
        
        Optional Chaining Operator
    - 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
  - Utilities
    - Utility Library, Rucksack
    - LostGrid
    - Quantity Queries
    - Easing Gradients
    - Pxtorem
    - Brand Colors / Nippon Color / Google Color
    - Contrast / Get Color
  - Assets
    - Assets
    - Inline SVG, SVGO
    - Font Magician
  - Syntax
    - PreCSS
    - SCSS Parser
    - JS
- node-sass
- PostHTML
Loader / Builder / Bundler
- Webpack
- Rollup
  - Webpack and Rollup: the same but different
Formatter
- ESLint with autofix feature - see Static Analysis
- Prettier
  - prettier-eslint
- Codemod - Effective JavaScript Codemods
- stylefmt
Static Analysis
- ESLint
  - ESLint Rules
    - eslint-index, eslint-find-rules
  - Plugins
    - prettier
    - babel, import, eslint-comments, unicorn, no-use-extend-native
    - filenames
      - eslint-import-resolver-webpack
    - compat
    - node, security
    - react, jsx-a11y, graphql, mongodb
    - jsdoc, flowtype
    - jest, ava, mocha, chai-expect
    - fp, lodash, lodash-fp, immutable
    - promise, optimize-regex
  - Presets
    - eslint-config-webcube (Author's own project)
    - eslint-config-airbnb
    - eslint-config-react-app
- Flow
  - flow-typed
  - Flow Runtime
- StyleLint
- HTMLHint
Minifier / Compressor / Optimizer
- Prepack
- babel-minify / uglify-es / UglifyJS 3 / UglifyJS 2
- cssnano / clean-css / CSSO
- HTMLMinifier
- Critical / Penthouse
- imagemin
  - gifsicle
  - jpegtran / mozjpeg
  - optipng / pngquant
  - svgo
  - webp
- 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
    - lint-staged
      - Make linting great again!
  - Environment Variables - env-cmd, cross-env
  - get-port, public-ip
- Gulp

>> Return to Table of Contents

Workflow

Development
- Micro Generator
  - Plop
- Live Reload / Watch / Preview
  - webpack-serve
  - webpack-dev-server
    - webpack-dashboard
    - webpack-dev-middleware
  - Hot Module Replacement / React Hot Loader
  - Browsersync
  - Electron - Electron Connect
  - React Native - Expo
  - Node.js - nodemon
- Dev Tools
  - Chrome DevTools / Firefox Developer Tools / Safari Web Inspector / Microsoft Edge F12 Dev Tools
    - Console - Console API, Command Line API
  - Third-party Panels
  - Reactotron
  - Electron - Devtron
  - React Native Debugger
- HTTP Inspector
  - Paw / Postman / HTTPie
- Debugging Proxy
  - AnyProxy / Fiddler
  - Tamper Chrome
Deployment
- Publishing App
  - Server-side Rendering
  - 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
    - 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
    - PM2 Plus
  - China
    - 阿里云-云监控 / 腾讯云-基础监控 BCM
- APM (Application Performance Management)
  - Global
    - New Relic / AppDynamics / Datadog APM
    - Pingdom / SpeedCurve / AppNeta
    - Trace
  - China

>> Return to Table of Contents

Command-line Environment (Mac)

Intro
Terminal
- iTerm2
  - iTerm Color Schemes
- Hyper
  - Awesome Hyper
Package Manager
- Homebrew
Shell
- Oh My Zsh
- Spaceship ZSH Theme
- Zsh Plugins
  - zsh-better-npm-completion
  - Awesome Zsh Plugins
Vim
- Vimtutor
- spf13-vim / YVim
Git
Docker for Mac
dotfiles
Utilities
- Analysis - cloc
- Finding - rg (ripgrep) / ag (The Silver Searcher), peco, jq, fzf
- 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 - vorpal / cli
- 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