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
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
- 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
A Subset for Architecture and Infrastructure
Platforms and Languages
Open Web Platform
- Learning
- 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
- Security
- Semantics
>> Return to Table of Contents
HTML5 / Web APIs
- HTML / DOM
- Appearance
- Interaction
- Access
- Network
- Offline
- Media
- Graphics
- Computing
>> Return to Table of Contents
CSS Features
- Basics
- Responsive Web Design
- Layout
- Web Typography
- Text
- Animation
- Effects
>> Return to Table of Contents
Modern CSS / Next-Gen CSS
- Component-based CSS
- Preprocessor-based CSS
- Best Practices
- Know More about Web Design / UI Design / UX Design
>> Return to Table of Contents
Modern JS / Next-Gen JS
- ES6+ Features
- Intro to ES6+
- Re-intro to JS
- Articles
- MDN
- 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
- Other
- Books
- Eloquent JavaScript
- Speaking JavaScript
- You Don't Know JS (book series)
- Reference
- Important Proposals
- Functional Programming
- FRP (Functional Reactive Programming)
- Static Typing
- Concurrent JS / Parallel JavaScript
- Code Style
>> Return to Table of Contents
WebAssembly
- References
- Concepts
- Features
- Workshop
- Languages
Node.js
- Intro
- Workshop
- 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
- ECMAScript Support
- Proposal Status
- JS Engine
- Web Runtime / JS Runtime
- Device
>> Return to Table of Contents
Cross-browser / Polyfill Libraries
- Appearance
- Interaction
- Access
- Network
- Performance
- Offline
- Media
>> Return to Table of Contents
npm Ecosystem
- npm
- Finding Packages
- Dependency Management / Release / Maintenance
- Convention
>> Return to Table of Contents
Universal Utility Libraries
- Standard Library Extensions
- Hashing / Generating
- Parsing / Manipulating
- Logic
- Network
- Storage
- File Database
- JSON - Lowdb
- IndexedDB / WebSQL / localStorage / Memory
- MongoDB API - NeDB
- CouchDB API - PouchDB
- Realtime / P2P - Gun, ShareDB
- Computation
- NLP
- ML/DL
>> Return to Table of Contents
Universal Web Apps / Web Pages
GUI Framework
- View / ViewModel / ViewController
- React
- Learning
- Component Utilities
- Browser Utilities
- Use React Alone
- Lightweight Alternative
- Angular
- Vue.js
- Cross-framework
- vuera
- Model / App State
- Redux
- Learning
- Reduce Boilerplate
- Connect
- Action Types, Action Creators, Reducer Switch
- Asnyc Actions
- State
- UI Patterns
- App Behaviours
- Development
- MobX
- Baobab / Freezer
- API / Data Source
- Offline First
- Routing
- i18n
- Monitoring / Error Capture
- Debugging
- Server-side Rendering
- Static Web
- Scaffold / Boilerplate / Generator
- GUI Architectures
>> Return to Table of Contents
UI Toolkits
>> Return to Table of Contents
Standalone UI Components
- Layout
- Icon
- Progress
- Button
- Accordion
- Picker
- Input
- Form
- Overlay
- Content
- Editor
- Widget
>> Return to Table of Contents
Client Side
UX Libraries
- Drag & Drop
- Gesture
- Scrolling
- Zoom
- Crop
- Resize
- Tooltip
- Tour
- Accessiblity
>> Return to Table of Contents
Graphic Libraries
- Animation
- 2D
- 3D
- Data Visualization
- Game
>> Return to Table of Contents
Hybrid Libraries
>> Return to Table of Contents
Server Side
Network
>> Return to Table of Contents
Server-side Best Practices
- SaaS
- Restful API
- 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
- Authentication / Authorization
- Security
- Logging / Monitoring
- DevOps
>> Return to Table of Contents
Microservices / API Services (Node.js)
- Frameworks
- GraphQL
- DocGen + CodeGen
- Scaffold / Boilerplate / Generator
>> Return to Table of Contents
Server-side Libraries (Node.js)
- Configuration
- Debugging
- Protocols
- Network
- Crypto
- Auth
- Storage
- Jobs
- Scraping
- Images
- Parsing / Generating
- NLP
>> Return to Table of Contents
Cloud Services (Global)
- Compute
- Storage
- BaaS
- AIaaS / BDaaS
>> Return to Table of Contents
Cloud Services (China)
The evil twins inside the Great Firewall of China
- Compute
- Storage
- BaaS
- AIaaS / BDaaS
>> Return to Table of Contents
Tooling
Testing
>> Return to Table of Contents
Documentation
- JS
- API
- CLI
- Style Guide
- Writing
>> Return to Table of Contents
Toolchain
- Compiler / Transpiler / Preprocessor
- Loader / Builder / Bundler
- Formatter
- Static Analysis
- ESLint
- ESLint 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
- Flow
- flow-typed
- Flow Runtime
- StyleLint
- doiuse
- Colorguard
- postcss-bem-linter
- HTMLHint
- Minifier / Compressor / Optimizer
- Task Automation
>> Return to Table of Contents
Workflow
- Development
- Deployment
- Publishing App
- Server-side Rendering
- Static Web
- Dynamic Routing + CDN
- Superstatic
- Object Storage + CDN
- Global
- China
- Packaged App
- DevOps
- Process Supervisor
- Containers
- Container Clusters
- PaaS
- Monitoring
>> Return to Table of Contents
Command-line Environment (Mac)
>> Return to Table of Contents
Command-line Libraries (Node.js)
- Input
- Output
- Delivery
- Framework
- OS
- API
- Parser
>> Return to Table of Contents
IDE / Editors
- VS Code Plugins
- 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
- 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
- Markdown Preview Plus
- Out-of-the-box Atom IDE
- Other Electron-based IDE
- WebStorm
- Programming Fonts
>> Return to Table of Contents
Useful Apps
- Playground
- Visual Tools
- Viewer
- Docs
- Automation
>> Return to Table of Contents
Collaboration
- Version Control
- ChatOps
- Kanban
- Presentation
- Design
>> Return to Table of Contents