dexteryy/spellbook-of-modern-webdev

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

repo name	dexteryy/spellbook-of-modern-webdev
repo link	https://github.com/dexteryy/spellbook-of-modern-webdev
homepage
language
size (curr.)	557 kB
stars (curr.)	11253
created	2017-06-10
license

• 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)
    • Input (Options/Arguments Parser, Interactive, Configuration…)
    • Output (Color / Style, Icon, Updating Log, Notice, Columns, Curses, Drawing…)
    • Delivery, OS, API, Parser…
  • 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

1. Open Web Platform
2. HTML5 / Web APIs
3. CSS Features
4. Modern CSS / Next-Gen CSS
5. Modern JS / Next-Gen 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
• Reference
  • MDN Web Docs
    • HTML, SVG, CSS, DOM, DOM Events, Web APIs
    • MDN content Roadmap
  • Google Developers
    • Web Fundamentals, Update, HTML5Rocks Archived Tutorials
  • Apple
    • WebKit JS
  • CSSDB
  • CSS-Tricks’s CSS Almanac, Codrops' CSS Reference
  • Mastering CSS Principles: A Comprehensive Guide
  • 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
    • Network resilience
    • Evolution of Script Loading, Browser script loading roundup
    • JavaScript Start-up Performance
    • Critical Rendering Path, CSS and the critical path
  • Offline
    • see HTML5 / Web APIs > Offline
  • Measure
    • Performance budgets 101
    • Measure Performance with the RAIL Model
    • Measuring Page Load Speed with Navigation Timing
    • Measuring network performance with Resource Timing API
    • User Timing API
    • Why Web Developers Need to Care about Interactivity
      • requestIdleCallback
      • PerformanceObserver
  • Optimization
    • Fast load times
    • Why Performance Matters
    • Performance audits
    • Lighthouse Audit References
• Security
  • Safe and secure
  • The Tangled Web: A Guide to Securing Modern Web Applications
  • HTML5 Security Cheatsheet
• Semantics
  • SEO
    • Let’s Talk about Semantics
    • Easily discoverable
    • SEO audits
    • SEO Tutorial For Beginners,
      Google’s Search Engine Optimization Starter Guide
  • Accessibility
    • Accessible to all
    • The A11Y Project, Using ARIA

>> Return to Table of Contents

HTML5 / Web APIs

• HTML / DOM
  • You Might Not Need jQuery,
    You Don’t Need jQuery,
    (Now More Than Ever) You Might Not 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
    • Abortable 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 UX Considerations
    • The offline cookbook
    • 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, PWA audits
    • 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
  • WebXR / Immersive Web
    • Welcome to the immersive web
    • Progressive WebXR
• Computing
  • Web Cryptography
  • Web Workers
  • WebAssembly
    • see WebAssembly

>> 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)
  • Houdini
    • Houdini: Demystifying CSS, Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of
• Responsive 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
    • CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout
    • A Complete Guide to Flexbox (CSS-Tricks) / Flexbox (Codrops)
      • Using Flexbox today
      • Solved by Flexbox, Flexbox Patterns
        • Centering Elements with Flexbox
        • Quantity Queries with Flexbox
    • A Complete Guide to Grid (CSS-Tricks) / A Complete Guide to CSS Grid (Codrops)
  • 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

Modern CSS / Next-Gen CSS

• Component-based CSS
  • Utility Class / Functional CSS / Utility-first CSS / Atomic CSS
    • The Case for Atomic / Utility-First CSS
      • CSS Utility Classes and “Separation of Concerns”
    • A Year of Utility Classes
    • So you need a CSS utility library?
    • see UI Toolkits
  • CSS Modules
    • The End of Global CSS
    • Tools - see Tooling > Toolchain > Builder / Bundler > Webpack
  • Styled-Components / Emotion
    • CSS in JS
      • A Unified Styling Language
      • A Brief History of CSS-in-JS: How We Got Here and Where We’re Going, The State of CSS
      • Comparison of CSS-in-JS solutions
    • Styled Components: Enforcing Best Practices In Component-Based Systems
    • Writing your styles in JS ≠ writing inline styles
    • Libraries
      • styled-system, system-components, grid-styled
      • styled-normalize / styled-sanitize
      • styled-components-breakpoint
      • styled-tools
• Preprocessor-based CSS
  • PostCSS
    • Intro
      • Meet PostCSS
      • PostCSS – A Comprehensive Introduction
      • PostCSS – Sass Killer or Preprocessing Pretender?
      • PostCSS Playground
    • Preset Env
      • It’s Time To Start Using CSS Custom Properties
      • Getting Started With CSS calc()
    • More Plugins - see Tooling > Toolchain > Compiler / Transpiler / Preprocessor > PostCSS
• Best Practices
  • Sanitize.css / Normalize.css / Reset.css
  • Methodology
    • BEM
      • BEM 101 / MindBEMding
    • OOCSS
      • An Introduction To Object Oriented CSS (OOCSS)
    • SMACSS
    • ITCSS, RSCSS, SOLID CSS
    • 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
  • 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
  • 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)
  • Design System
    • A comprehensive guide to design systems, Design Systems Handbook
    • Design Tokens
      • Tokens in Design Systems
      • How to manage your Design Tokens with Style Dictionary
      • What Are Design Tokens?
    • Style Guide
      • Style Guide Driven Development / Living Style Guides
      • Tools - see Tooling > Documentation > Style Guide
      • Examples
        • 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

Modern JS / Next-Gen 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
  • ESM (ECMAScript Modules)
    • Intro
      • The state of JavaScript modules
      • ECMAScript 6 modules: the final syntax
      • ES6 Modules in Depth
    • Browsers
      • ECMAScript modules in browsers
    • Node.js
      • Node.js, TC-39, and Modules
      • .mjs
        • Using ES modules natively in Node.js
      • esm
        • ES Modules in Node Today!
  • Dynamic Import (import())
  • Class Fields & Static Properties
  • Decorators
  • async/await, Promise, Promise Promote, Promises/A+
  • Observables
  • Static Typing
  • Concurrent JS / Parallel JavaScript
    • Concurrent JavaScript: It can work!
    • The Path to Parallel JavaScript
      • A Taste of JavaScript’s New Parallel Primitives
      • A cartoon intro to ArrayBuffers and SharedArrayBuffers
• 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
    • TypeScript Playground
    • DefinitelyTyped, TypeSearch
  • tcomb
  • JSDoc Tags
    • jsdoc-to-assert
• Concurrent JS / Parallel JavaScript
  • Napa.js
• Code Style
  • Airbnb JavaScript Style Guide
  • Node.js Style Guide
  • Clean Code JavaScript
  • JavaScript Clean Coding Best Practices

>> Return to Table of Contents

WebAssembly

• References
  • WebAssembly.org
  • MDN docs
• Concepts
  • WebAssembly High-Level Goals
  • Minimum Viable Product
  • WebAssembly concepts
  • An Abridged Cartoon Introduction To WebAssembly
• Features
  • Features to add after the MVP
  • WebAssembly proposals
• Workshop
  • Codelabs - An Introduction to Web Assembly
• Languages
  • Rust
    • Rust and WebAssembly
      • The Rust Wasm Book

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
• Node.js
  • Platform Releases
    • Node.js Release Working Group
• ECMAScript Support
  • ECMAScript compatibility table
  • Node.js ES2015+ Support
    • Node 10.x LTS - Supports ES modules natively (without --experimental-modules)
    • Node.8.5 - Supports ES modules natively (.mjs + --experimental-modules)
    • Node 8.3 - V8 6.0, 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 / TC39 Proposals
    • Inside
      • The TC39 Process / The TC39 process for ECMAScript features
  • Node.js TSC (Node.js Foundation Technical Steering Committee)
    • Meeting Notes
    • 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
  • SpiderMonkey
    • The monkeys in 2013
  • 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
    • 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
  • 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
  • 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
  • check-dependencies
  • 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
      • How to Write a Git Commit Message
    • 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
      • immutability-helper + redux-immutable-state-invariant / redux-freeze
      • icepick / seamless-immutable / dot-prop-immutable / object-path-immutable / timm / updeep
      • ImmutableJS
  • 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
      • 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
      • formik / Formsy React
    • Lightweight Alternative
      • Preact / Inferno
  • Angular
  • Vue.js
  • Cross-framework
    • vuera
• 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
    • Reduce Boilerplate
      • redux-cube (Author’s own project)
    • Connect
      • react-redux
      • reselect
    • Action Types, Action Creators, Reducer Switch
      • redux-actions
      • flux-standard-action
      • topologically-combine-reducers
    • Asnyc Actions
      • redux-thunk + redux-promise-middleware + redux-debounced
      • redux-observable
      • redux-saga
      • redux-api-middleware / redux-axios-middleware / redux-socket.io
      • redux-rest-resource / redux-json-api / redux-api
    • State
      • normalizr
      • Immutalbe - see Universal Utility Libraries > Standard Library Extensions > FP > Immutable
      • redux-immutable
      • redux-persist
      • redux-undo
      • redux-reset
    • UI Patterns
      • redux-form
      • react-block-ui / react-redux-loading-bar
      • react-notification-system-redux / react-redux-toastr
      • redux-optimistic-ui
    • App Behaviours
      • redux-auth-wrapper
      • react-intl-redux
      • Redux Search
    • 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
  • React Router
  • Connected React Router
  • React Helmet
• 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
  • 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
  • Skeleton.css
  • Tachyons
  • Bulma
  • Material Components for the web
  • WeUI
  • MJML / Foundation for Emails 2
• React
  • Reactstrap / React Bootstrap
  • Material-UI / React Toolbox
  • Ant Design / Ant Design Mobile
  • Rebass
  • Blueprint
  • Semantic UI React
  • React Foundation
  • 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 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
  • 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 / React Draggable
  • 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
      • 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
  • 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
  • REST API Error Codes 101
  • 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 / GraphQL vs. REST
    • 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
  • 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,
    How to securely hash passwords?
  • 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
          • 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
  • 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
  • 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
    • 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
  • 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
    • 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
• 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
      • Preset Env
        • Browserslist
      • Preset React
      • React Optimize
    • 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
      • Autoprefixer
      • CSSNext / postcss-preset-env
      • Will Change
      • Normalize
    • 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
    • webpack-howto
      • SurviveJS Webpack
      • webpack-blocks
    • Loaders
      • babel-loader, ts-loader / awesome-typescript-loader, vue-loader
        • imports-loader
          • Granular Shimming
        • exports-loader
          • Global Exports
      • css-loader, style-loader / isomorphic-style-loader
        • postcss-loader, scss-loader, less-loader
        • resolve-url-loader
      • workerize-loader / worker-loader
      • raw-loader
        • html-loader
          • markdown-loader / handlebars-loader
        • shader-loader / glslify-loader
      • image-webpack-loader / img-loader
      • svg-react-loader, react-markdown-loader
      • url-loader, svg-url-loader
      • file-loader
      • thread-loader, cache-loader, val-loader
    • Plugins
      • Extract Text Plugin, Webpack Manifest Plugin
      • Copy Webpack Plugin, Clean Webpack Plugin
      • HTML Webpack Plugin
        • HTML Webpack Template
        • Plugins
          • Favicons
          • Harddisk
          • Inline Source, Preload
          • Include Assets + Exclude Assets
          • Inline Chunk Manifest
      • Define Plugin / Environment Plugin
      • Provide Plugin
        • Shimming Global
      • Ignore Plugin, Watch Ignore Plugin
      • Module Concatenation Plugin, Lodash Plugin
      • UglifyJS Webpack Plugin / Babel Minify Webpack Plugin
      • Workbox Webpack Plugins, Offline Plugin
      • Bundle Analyzer
      • Fork TS Checker Webpack Plugin, HappyPack
  • Rollup
    • Webpack and Rollup: the same but different
• Formatter
  • ESLint with autofix feature - see Static Analysis
  • Prettier
    • prettier-eslint
  • Codemod - Effective JavaScript Codemods
    • jscodeshift
    • react-codemod
    • Recast
  • 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
    • doiuse
    • Colorguard
    • postcss-bem-linter
  • 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
    • gulp - The vision, history, and future of the project
    • Why you shouldn’t create a gulp plugin
    • Gulpfile API
    • Utilities
      • The Problem with 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-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
      • React DevTools / AngularJS Batarang / Augury / Vue.js DevTools
      • React Perf
      • Redux DevTools
      • Immutable DevTools, Immutable.js Object Formatter
      • Apollo Client Devtools, GraphQL Network
      • JWT Inspector
      • WebGL Insight, Three.js Editor Extension
    • Reactotron
    • Electron - Devtron
    • React Native Debugger
  • HTTP Inspector
    • Paw / Postman / HTTPie
  • Debugging Proxy
    • AnyProxy / Fiddler
    • Tamper Chrome
• Deployment
  • Publishing App
    • Server-side Rendering
      • Hypernova
      • 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
      • PM2 Plus
    • China
      • 阿里云-云监控 / 腾讯云-基础监控 BCM
  • APM (Application Performance Management)
    • Global
      • New Relic / AppDynamics / Datadog APM
      • Pingdom / SpeedCurve / AppNeta
      • Trace
    • China
      • OneAPM / 听云
      • 监控宝 / 百度云观测 / 360网站服务监控 / 腾讯云-云拨测 CAT
      • 阿里云 Node.js 性能平台

>> Return to Table of Contents

Command-line Environment (Mac)

• Intro
  • The Art of Command Line
  • The Bash Guide
  • Linux Shell Scripting Tutorial (LSST)
• 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
  • Git-it, TryGit Simulator
  • Become a git guru, Git Glossary
  • Pro Git - Index of Commands
  • commitizen
• 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

>> Return to Table of Contents

IDE / Editors

• VS Code Plugins
  • UI
    • vscode-icons
    • Indenticator
  • Operating
    • VSCodeVim
    • Search node_modules
    • Path Intellisense
    • npm Intellisense
    • Lorem ipsum / Chinese Lorem Ipsum
    • Snippets
      • JavaScript (ES6) code snippets
      • JavaScript Snippet Pack
      • Reactjs code snippets
      • React Redux ES6 Snippets
      • eslint-disable-snippets
      • HTML Snippets
      • SVG Icons
      • Icon Fonts
  • Formatting
    • ESLint
    • Prettier / stylefmt
    • EditorConfig
    • change-case
    • Align
  • Static Analysis
    • Flow Language Support
    • Stylelint
    • HTMLHint
    • Syntax
      • CSS Modules
      • vscode-styled-components
      • GraphQL for VSCode
      • Docker
  • Docs
    • Dash
    • Regex Previewer
    • Color Picker
    • Swagger Viewer
    • API Elements extension
  • Assistant
    • Settings Sync
    • Project Manager
    • Bookmarks
    • TODO Highlight
    • Quokka.js - Live Scratchpad for JavaScript
  • Integration
    • VCS
      • Git Lens
      • Git History
      • Open in GitHub
    • Share Code
    • Debug
      • Debugger for Chrome
      • Node Debug 2
      • Jest
    • React Native Tools
    • Cordova Tools
    • Write
      • Markdown Preview Enhanced
      • Mermaid Preview
• Atom Plugins
  • UI
    • fonts
    • file-icons
    • highlight-line, highlight-selected
    • indent-guide-improved, trailing-spaces
  • Operating
    • vim-mode-plus, jumpy
    • Sublime-Style-Column-Selection
    • Emmet
    • Snippets
      • turbo-javascript
  • Formatting
    • auto-detect-indentation, editorconfig
    • prettier-atom
    • atom-stylefmt / postcss-sorting / atom-beautify
    • aligner / atom-alignment
    • toggle-quotes
  • 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
  • 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 / CodeSandbox
    • CDN for npm - unpkg
  • RunKit
  • RequestBin
  • jsPerf
  • CSS in JS Playground
  • GraphQL Playground, Apollo Launchpad
  • GLSL Sandbox
  • ImmutableJS REPL
• 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 / Discord / IRC / Wechat / QQ
• Kanban
  • What is Kanban? - A, B
  • Getting Started With Trello
  • Github Project Boards
• Presentation
  • Markdown
    • Mastering Markdown
    • Markdown: Syntax
  • Diagram
    • Mermaid
      • Mermaid Live Editor
  • Slides
    • Remark
      • remarker
• Design
  • Sketch / Figma
  • InVision / Atomic / Proto.io
  • Zeplin / Sympli / Avocode
  • After Effects + Lottie / bodymovin / Inspector Spacetime + Sketch2AE

>> Return to Table of Contents