Awesome
<h1 align="center"> Spellbook of Modern Web Dev </h1> <div align="center"> <em>A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development</em> </div> <br> <br> <br> <br> <div align="center"> <img src="assets/cover.png" alt="Spellbook of Modern Web Dev" width="256"> </div> <br> <br> <br> <br>- 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...
- Open Web Platform
- 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...
- GUI Framework
- 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
- UX Libraries
- 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
- Network
- 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...
- Testing
A Subset as a Learning Path
- Open Web Platform
- HTML5 / Web APIs
- CSS Features
- Modern CSS / Next-Gen CSS
- Modern JS / Next-Gen JS
- Platform Compatibility and Proposal Status
- Network
- Node.js
- npm Ecosystem
- Command-line Environment (Mac)
- IDE / Editors
- GUI Framework
- Microservices / API Services (Node.js)
- Testing
A Subset for Finding Libraries
- Cross-browser / Polyfill Libraries
- Hybrid Libraries
- GUI Framework
- UI Toolkits
- Standalone UI Components
- UX Libraries
- Graphic Libraries
- Universal Utility Libraries
- Microservices / API Services (Node.js)
- Server-side Libraries (Node.js)
- Command-line Libraries (Node.js)
A Subset for Architecture and Infrastructure
- GUI Framework
- Toolchain
- Workflow
- Microservices / API Services (Node.js)
- Server-side Best Practices
- Cloud Services (Global) / Cloud Services (China)
- Documentation
<br> <br> <div align="center"> <img src="assets/merlins_spell_book.jpg" width=""> </div> <br> <br>
Platforms and Languages
Open Web Platform
- Learning
- Reference
- MDN Web Docs
- Google Developers
- Apple
- CSSDB
- CSS-Tricks's CSS Almanac, Codrops' CSS Reference
- Mastering CSS Principles: A Comprehensive Guide
- HTML: The Living Standard (Web Developer Edition)
- W3Fools
- Visual Tools
- see Tooling > Useful Apps > Visual Tools
- Performance
- Rendering
- Loading
- Offline
- see HTML5 / Web APIs > Offline
- Measure
- Optimization
- Security
- Semantics
>> Return to Table of Contents
HTML5 / Web APIs
- HTML / DOM
- Appearance
- Interaction
- Desktop
- Mobile
- Hardware Agnostic
- Gamepad, Web Speech
- Access
- Network
- Offline
- Overview
- Web Storage, IndexedDB
- FileReader, File, Blob
- Service Worker
- Progressive Web Apps
- Media
- Graphics
- Computing
- Web Cryptography
- Web Workers
- WebAssembly
- see WebAssembly
>> Return to Table of Contents
CSS Features
- Basics
- Responsive Web Design
- Layout
- Flexbox, CSS Grid Layout
- Traditional
- Web Typography
- Text
- Animation
- CSS Transition
- CSS Animation
- Motion Path
- Effects
>> Return to Table of Contents
Modern CSS / Next-Gen CSS
- Component-based CSS
- Utility Class / Functional CSS / Utility-first CSS / Atomic CSS
- CSS Modules
- The End of Global CSS
- Tools - see Tooling > Toolchain > Builder / Bundler > Webpack
- Styled-Components / Emotion
- Preprocessor-based CSS
- PostCSS
- Intro
- Preset Env
- More Plugins - see Tooling > Toolchain > Compiler / Transpiler / Preprocessor > PostCSS
- PostCSS
- Best Practices
- Sanitize.css / Normalize.css / Reset.css
- Methodology
- Code Style
- Know More about Web Design / UI Design / UX Design
- Responsive/Adaptive Web Design
- Motion Design
- 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
- Atomic Design (Book)
- Design System
- A comprehensive guide to design systems, Design Systems Handbook
- 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
- <span>USA</span>.gov's Web Design Standards
- MailChimp's Email Design Guide
>> 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
- ECMA-262-5 in detail
- Properties and Property Descriptors, Strict Mode
- Lexical environments: Common Theory, ECMAScript implementation
- Notes
- Dmitri Pavlutin
- Other
- Books
- Articles
- Reference
- Important Proposals
- ESM (ECMAScript Modules)
- Dynamic Import (
import()) - Class Fields & Static Properties
- Decorators
- async/await, Promise, Promise Promote, Promises/A+
- Observables
- Static Typing
- Concurrent JS / Parallel JavaScript
- 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
- 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
- Keeping the Node.js core small
- Debugging Node.js with Google Chrome
- Workshop
- Best Practices
>> Return to Table of Contents
Platform Compatibility and Proposal Status
- Web
- Platform Status
- Platform Releases
- Platform Updates
- 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
- Node.js
- Platform Releases
- 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
- Node 10.x LTS - Supports ES modules natively (without
- Performance - Six Speed
- Proposal Status
- W3C WG (World Wide Web Consortium Working Groups)
- WICG (Web Incubator Community Group)
- WHATWG (Web Hypertext Application Technology Working Group)
- ECMA TC39 (Ecma International Technical Committee 39)
- Node.js TSC (Node.js Foundation Technical Steering Committee)
- JS Engine
- 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
- Electron
- Device
>> 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 Components
- Responsive Web Design
- 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
- IndexedDB
- LocalStorage API - localForage
- Media
>> Return to Table of Contents
npm Ecosystem
- npm
- Finding Packages
- Search
- Stats
- Rank
- Dependency Management / Release / Maintenance
- Convention
- Open Source
- README
- Changelog
- License
- SemVer
- package.json
- Small Modules
- Isomorphic JS / Universal JS
- Open Source
>> Return to Table of Contents
Universal Utility Libraries
- Standard Library Extensions
- Utilities
- FP
- OOP
- Async
- Observable - RxJS
- Promise - es6-promisify, Bluebird
- Generator - Co
- Callback - Async
- Syntax
- Node.js API
- Debugging
- Hashing / Generating
- Parsing / Manipulating
- URL
- 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
- 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
- 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
- GraphQL - lokka
- TCP
- UDP / P2P
- HTTP / XHR
- Storage
- Computation
- NLP
- ML/DL
>> Return to Table of Contents
Universal Web Apps / Web Pages
GUI Framework
- View / ViewModel / ViewController
- Model / App State
- Redux
- Learning
- Reduce Boilerplate
- redux-cube (Author's own project)
- Connect
- Action Types, Action Creators, Reducer Switch
- Asnyc Actions
- State
- normalizr
- Immutalbe - see Universal Utility Libraries > Standard Library Extensions > FP > Immutable
- redux-immutable
- redux-persist
- redux-undo
- redux-reset
- UI Patterns
- App Behaviours
- Development
- redux-devtools-extension
- redux-logger
- Testing - see Testing > Web Testing > Integration Testing
- MobX
- Baobab / Freezer
- Redux
- 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
- Learning
- GraphQL
- Offline First
- Routing
- i18n
- Monitoring / Error Capture
- react-ga
- redux-segment
- redux-raven-middleware / raven-for-redux
- redux-catch
- redux-beacon
- Services - see Tooling > Workflow > Monitoring
- Debugging
- 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
- 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
- Redux - Reinventing Flux - Interview with Dan Abramov
- The Elm Architecture
- MVI (Model-View-Intent) in Cycle.js
- SAM (State-Action-Model)
>> Return to Table of Contents
UI Toolkits
- CSS
- React
>> Return to Table of Contents
Standalone UI Components
- Layout
- Grid - React FlexBox Grid
- Masonry - React Masonry Component / masonry-layout / bricks.js / Justified Layout
- Split - React Split Pane / Split.js
- Dashboard - React Grid Layout
- Icon
- Progress
- Button
- Buttons
- Indicators - React Ladda / Ladda / React Progress Button
- Accordion
- Picker
- Input
- Form
- Overlay
- 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
- Widget
>> Return to Table of Contents
Client Side
UX Libraries
- Drag & Drop
- Gesture
- Scrolling
- Viewport and Elements
- React Pull to Refresh
- Smooth Scrolling - React Scroll
- Scrollable - React iScroll / iScroll / Zynga Scroller
- Scrollable Container - React Custom Scrollbars / React Scroll Box / React Scrollbar / Overthrow
- Zoom
- Image Loupe - Drift / React Image Magnify
- Image Viewer - React Images / React Image Lightbox / LightGallery / SmartPhoto
- Crop
- Resize
- Tooltip
- Tour
- Accessiblity
>> Return to Table of Contents
Graphic Libraries
- Animation
- Effects
- Animate.css / Magic Animations / All Animation CSS3 / Motion CSS / Effeckt.css / CSS3 Animation Cheat Sheet
- Hover.css
- Transformicons / Hamburgers
- Loading
- Queue
- Characters
- Parallax / Scrolling
- ScrollReveal.js / ScrollMagic / Rellax
- rc-scroll-anim / React Springy Parallax
- Orientation - Parallax
- Easing
- Keyframe / Transition
- Style
- Anything
- Anime.js / React Anime
- Between Shapes - flubber
- Lightweight Tweening Engine - shifty / tween.js
- GSAP - TweenLite, GSAP - TweenMax
- Keyframe + Timeline
- Motion / Curved Path
- SVG - Vivus
- Shape - mo-js
- rc-tween-one
- Effects
- 2D
- Canvas
- Pixi.js / Fabric.js
- React Pixi / ReactPixiFiber / React Konva
- Isometric - obelisk.js
- Creative - p5.js
- Fonts - opentype.js
- SVG
- Physics
- Canvas
- 3D
- WebGL
- Physics
- Data Visualization
- React Sparklines / React Trend / vx
- Recharts / Victory
- ECharts / Highcharts (Commercial) / React Highcharts / Google Charts / React Google Charts
- Plotly.js
- AntV G2
- Chart.js / React ChartJS / Chartist.js
- Graph - Cytoscape.js, AntV G6
- Timesheet.js, Canvas Gauges
- GIS - Leaflet, Turf.js, OpenLayers, Cesium
- D3.js
- Word Cloud - d3-cloud
- Constraint - d3-force / cola.js
- Awesome D3
- Game
>> Return to Table of Contents
Hybrid Libraries
- Electron
- Persistence
- UI
- Interaction
- Debug
- React Native
- UI Toolkits
- Standalone UI Components
- UX
- Access
- Graphic
- Media
- Storage
>> Return to Table of Contents
Server Side
Network
- HTTP
- Intro
- Reference
- Same-origin policy
- HTTP access control (CORS) / Using CORS
- Content Security Policy (CSP) - Google / Mozilla
- Performance
- HTTPS
- HTTP/2
- gRPC
- TCP
- UDP
>> 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
- 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
- A pattern language for microservices
- Cloud / Distributed
- Architecture
- AWS Well-Architected
- Azure's Cloud Fundamentals - Architecture styles, Pillars of software quality, Design principles
- Static
- Queue / Jobs
- Decompose
- Configuration
- Storage / Querying
- Resiliency / Availability
- Multitenant
- Architecture
- Old-fashioned Web Hosting / Non-distributed
- 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
- Tokens used by Auth0
- How To Safely Store A Password,
You Wouldn't Base64 a Password - Cryptography Decoded,
How to securely hash passwords? - Weak Signature Algorithm
- Cookies vs Tokens: The Definitive Guide,
- Security
- Logging / 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
- GraphQL
- DocGen + CodeGen
- API Blueprint / Swagger / RAML
- Parser - Protagonist / Drafter
- Renderer - Aglio
- Validator - Dredd
- Parser - Protagonist / Drafter
- JSON Schema
- See Tooling > Documentation
- API Blueprint / Swagger / RAML
- Scaffold / Boilerplate / Generator
>> Return to Table of Contents
Server-side Libraries (Node.js)
- Configuration
- Debugging
- Protocols
- 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
- Auth
- JWT - jsonwebtoken
- passwordless
- oauth
- OAuth Providers - hello.js / grant
- svg-captcha
- Storage
- 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
- NLP
>> Return to Table of Contents
Cloud Services (Global)
- Compute
- FaaS / Serverless / WebHook
- PaaS
- See Tooling > Workflow > Deployment > DevOps > PaaS
- CaaS
- Storage
- Object Storage
- 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
- In-Memory Key-Value NoSQL - Amazon ElastiCache
- BaaS
- CRUD
- Realtime
- GraphQL
- CMS
- Auth
- Auth0 / Amazon Cognito / Firebase Authentication
- OAuth.io
- CAPTCHA
- 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
- CRUD
- AIaaS / BDaaS
- Natural Language
- NLP - Google Natural Language API
- Speech Recognition / Speech Synthesis
- Translation - Google Cloud Translation API
- Computer Vision
- Natural Language
>> Return to Table of Contents
Cloud Services (China)
The evil twins inside the Great Firewall of China
- Compute
- FaaS / Serverless / WebHook
- PaaS
- See Tooling > Workflow > Deployment > DevOps > PaaS
- CaaS
- Storage
- Object Storage
- 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
- In-Memory Key-Value NoSQL
- BaaS
- AIaaS / BDaaS
- Natural Language
- NLP
- Speech Recognition / Speech Synthesis
- Translation - 腾讯云-机器翻译
- Computer Vision
- Graphs / Networks / Clusters
- Persona
- Natural Language
>> Return to Table of Contents
Tooling
Testing
- Unit Testing / Test Runner
- Web Testing
- Integration Testing
- Components - Enzyme
- Reducers
- Functional Testing / E2E Testing
- Headless Browser Automation
- DevTools API
- WebDriver API - Selenium WebDriverJS / WebDriverIO / Nightwatch.js / CasperJS / Protractor
- AWS Lambda - Lambdium
- Cloud - BrowserStack Automate / Sauce Labs
- Headless Browser Automation
- Visual Testing
- Monkey Testing
- Headless Browsers
- Browsers
- Chromium - Headless Chrome/Chromium
- Chromium + Node.js - electron-prebuilt
- WebKit - PhantomJS
- Gecko - SlimerJS
- In-memory X11 Display Server
- Docker
- Browsers
- Integration Testing
- Server-side Testing
- Benchmark Testing
- JS
- Network
- Test Doubles (Fakes, Mocks, Stubs and Spies)
- Fake Data
- HTTP Mocking - Nock
- Monkey Patching - Mockery, babel-plugin-rewire
- SinonJS / testdouble.js
- Analysis
- Code Coverage
- Software Complexity
- Node.js Security
- Web Page
>> Return to Table of Contents
Documentation
- JS
- API
- CLI
- Style Guide
- Markdown + JSX - docz
- JS - Storybook
- JS comments - React Styleguidist
- CSS comments - KSS (Knyle Style Sheets)
- Writing
>> Return to Table of Contents
Toolchain
- Compiler / Transpiler / Preprocessor
- Babel
- Setting up ES6
- Babel User Handbook, Babel Plugin Handbook
- Presets
- Plugins
- Proposals
- Babel progress on ECMAScript proposals
- Shims - @babel/polyfill (useBuiltIns) / core-js
- async/await - fast-async (NoDent)
- Stage 3, Stage 2, Stage 1, Stage 0
- Node.js
- React
- Libraries
- Optimization
- Proposals
- TypeScript
- PostCSS
- Standards
- Utilities
- Assets
- Syntax
- node-sass
- PostHTML
- Babel
- Loader / Builder / Bundler
- Webpack
- webpack-howto
- Loaders
- babel-loader, ts-loader / awesome-typescript-loader, vue-loader
- css-loader, style-loader / isomorphic-style-loader
- workerize-loader / worker-loader
- raw-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
- Define Plugin / Environment Plugin
- Provide Plugin
- 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
- Formatter
- ESLint with autofix feature - see Static Analysis
- Prettier
- Codemod - Effective JavaScript Codemods
- stylefmt
- Static Analysis
- ESLint
- ESLint Rules
- Plugins
- Presets
- eslint-config-webcube (Author's own project)
- eslint-config-airbnb
- eslint-config-react-app
- Flow
- StyleLint
- HTMLHint
- ESLint
- Minifier / Compressor / Optimizer
- Task Automation
- npm-run-script, npm-scripts
- task automation with npm run,
How to Use npm as a Build Tool - Git Hooks
- Environment Variables - env-cmd, cross-env
- get-port, public-ip
- task automation with npm run,
- Gulp
- npm-run-script, npm-scripts
>> Return to Table of Contents
Workflow
- Development
- Micro Generator
- Live Reload / Watch / Preview
- webpack-serve
- webpack-dev-server
- Hot Module Replacement / React Hot Loader
- Browsersync
- Electron - Electron Connect
- React Native - Expo
- Node.js - nodemon
- Dev Tools
- Chrome DevTools / Firefox Developer Tools / Safari Web Inspector / Microsoft Edge F12 Dev Tools
- Console - Console API, Command Line API
- Third-party Panels
- Reactotron
- Electron - Devtron
- React Native Debugger
- Chrome DevTools / Firefox Developer Tools / Safari Web Inspector / Microsoft Edge F12 Dev Tools
- HTTP Inspector
- Debugging Proxy
- Deployment
- Publishing App
- Server-side Rendering
- Static Web
- Dynamic Routing + CDN
- Object Storage + CDN
- Packaged App
- DevOps
- Process Supervisor
- Containers
- Container Clusters
- PaaS
- Global
- China
- LeanCloud-云引擎 (云函数, 网站托管) - lean-cli
- Publishing App
- Monitoring
- Error Tracking
- Logging
- Global
- China
- APM (Application Performance Management)
- Global
- China
- OneAPM / 听云
- 监控宝 / 百度云观测 / 360网站服务监控 / 腾讯云-云拨测 CAT
- 阿里云 Node.js 性能平台
>> Return to Table of Contents
Command-line Environment (Mac)
- Intro
- Terminal
- Package Manager
- Shell
- Vim
- Git
- Docker for Mac
- dotfiles
- Utilities
>> Return to Table of Contents
Command-line Libraries (Node.js)
- Input
- Output
- Delivery
- update-notifier
- Reporting Usage - insight
- Self-contained Executable - pkg
- Framework
- Generator - Yeoman
- OS
- Shell Commands - ShellJS
- Filesystem
- Local
- API
- Git - simple-git / nodegit
- Docker - dockerode
- SSH - ssh2
- Parser
>> Return to Table of Contents
IDE / Editors
- VS Code Plugins
- UI
- Operating
- Formatting
- Static Analysis
- Docs
- Assistant
- Integration
- Atom Plugins
- UI
- Operating
- Formatting
- Static Analysis
- Docs
- Assistant
- Integration
- Out-of-the-box Atom IDE
- Other Electron-based IDE
- WebStorm
- Programming Fonts
>> Return to Table of Contents
Useful Apps
- Playground
- Visual Tools
- Performance
- 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
- Viewer
- Docs
- Automation
>> Return to Table of Contents
Collaboration
- Version Control
- ChatOps
- Kanban
- What is Kanban? - A, B
- Getting Started With Trello
- Github Project Boards
- Presentation
- Markdown
- Diagram
- Slides
- Design
>> Return to Table of Contents