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?

In English: coming soon...

In Chinese: slides @ JSConf CN 2017

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

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

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

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