{"id":13404679,"url":"https://github.com/dexteryy/spellbook-of-modern-webdev","last_synced_at":"2025-10-05T20:30:49.098Z","repository":{"id":37318504,"uuid":"93956851","full_name":"dexteryy/spellbook-of-modern-webdev","owner":"dexteryy","description":"A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development","archived":false,"fork":false,"pushed_at":"2023-12-18T07:53:58.000Z","size":557,"stargazers_count":17283,"open_issues_count":23,"forks_count":1281,"subscribers_count":506,"default_branch":"master","last_synced_at":"2025-01-22T20:51:51.023Z","etag":null,"topics":["awesome","css3","html5","isomorphic-javascript","javascript","learning","libraries","nodejs","universal-javascript","webapp","webplatform"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dexteryy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-06-10T18:03:21.000Z","updated_at":"2025-01-22T17:23:44.000Z","dependencies_parsed_at":"2024-02-05T23:46:04.097Z","dependency_job_id":"1cd54cbc-737e-45d3-9e6e-275a75a1bc77","html_url":"https://github.com/dexteryy/spellbook-of-modern-webdev","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dexteryy%2Fspellbook-of-modern-webdev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dexteryy%2Fspellbook-of-modern-webdev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dexteryy%2Fspellbook-of-modern-webdev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dexteryy%2Fspellbook-of-modern-webdev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dexteryy","download_url":"https://codeload.github.com/dexteryy/spellbook-of-modern-webdev/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235440460,"owners_count":18990708,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","css3","html5","isomorphic-javascript","javascript","learning","libraries","nodejs","universal-javascript","webapp","webplatform"],"created_at":"2024-07-30T19:01:49.403Z","updated_at":"2025-10-05T20:30:43.746Z","avatar_url":"https://github.com/dexteryy.png","language":null,"readme":"\n\u003ch1 align=\"center\"\u003e\n  Spellbook of Modern Web Dev\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cem\u003eA Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development\u003c/em\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/cover.png\" alt=\"Spellbook of Modern Web Dev\" width=\"256\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n* 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.\n* 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__.\n* 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__.\n* The JS/web technology is like [an ocean of stuff you don’t know](https://medium.com/javascript-scene/why-im-thankful-for-js-fatigue-i-know-you-re-sick-of-those-words-but-this-is-different-296fae0c888f). Simply collecting more stuff or composing dozens of \"awesome lists\" into a single one will only exacerbate the [Javascript Fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4). So this document must __stay lean__ and focus on __the most frequent problems__ and __the most commonly used stuff__.\n* So for each problem domain and each technology, I try my best to pick only __one or a few__ links.\n* 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__.\n* __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.\n* Prefer __fine-grained classifications and deep hierarchies__ over __featureless descriptions and distractive comments__.\n* 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.\n* I wish this document could be closer to a kind of __knowledge graph__ or __skill tree__ than a list or a collection.\n* It currently contains __2000+__\u003c!-- \\[[^\\]]+\\] --\u003e links (projects, tools, plugins, services, articles, books, sites, etc.)\n* Feel free to submit the __missing__ or __better__ links in your opinion. Also, please provide the __reason__.\n* [Why not add a Europe (or other regions) section](https://github.com/dexteryy/spellbook-of-modern-webdev/pull/4#issuecomment-308073026)? [Why not add your project](https://github.com/dexteryy/spellbook-of-modern-webdev/pull/5)? [Why so many React-based projects? Why not Angular/Vue.js/XXX](http://www.npmtrends.com/rxjs-vs-mobx-vs-redux-vs-vue-vs-react-vs-@angular/core-vs-@cycle/dom-vs-backbone-vs-jquery-vs-vuex)?\n\n#### Understanding Modern Web Development\n\n* In English: coming soon...\n* In Chinese: [slides](https://speakerdeck.com/dexteryy/understanding-modern-web-development-at-jsconf-china-2017-zhong-wen) @ [JSConf CN 2017](http://2017.jsconf.cn/#schedule)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/showme.jpg\" width=\"\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n---\n\n## Table of Contents\n\n\n- [Platforms and Languages](#platforms-and-languages)\n  - [Open Web Platform](#open-web-platform)\n    - Learning, Reference, Visual Tools\n    - Performance, Security, Semantics / SEO / Accessibility\n  - [HTML5 / Web APIs](#html5--web-apis)\n    - HTML/DOM, Appearance, Interaction, Access, Network, Media, Graphics, Computing...\n  - [CSS Features](#css-features)\n    - RWD, Layout, Typography, Text, Animation, Effects...\n  - [Modern CSS / Next-Gen CSS](#modern-css--next-gen-css)\n    - CSS Module, PostCSS, CSS in JS\n    - Best Practices (Skeleton, Methodology, Code Style...)\n    - Know More about Web Design / UI Design / UX Design (RWD, Atomic Design, Motion Design, Grid System, Typography, Style Guide...)\n  - [Modern JS / Next-Gen JS](#modern-js--next-gen-js)\n    - ES6+ Features, Intro to ES6+, Re-intro to JS, Important Proposals, Functional Programming, FRP, Static Typing, Code Style...\n  - [WebAssembly](#webassembly)\n    - Concepts, Features, Rust, ...\n  - [Node.js](#nodejs)\n    - Intro, Workshop, Best Practices...\n  - [Platform Compatibility and Proposal Status](#platform-compatibility-and-proposal-status)\n    - Platform Status / Releases / Updates, ECMAScript Compatibility\n    - Proposal Status (W3C WG, WICG, WHATWG, ECMA TC39, Node.js CTC)\n    - JS Engine (V8, JSC, Chakra), Web/JS Runtime (Electron, Cordova, React Native...), Device...\n  - [Cross-browser / Polyfill Libraries](#cross-browser--polyfill-libraries)\n    - Appearance, Interaction, Access, Network, Performance, Offline, Media...\n  - [npm Ecosystem](#npm-ecosystem)\n    - Finding Packages (Search, Stats, Rank)\n    - Dependency Management / Release / Maintenance (npm, yarn, lerna, ncp...)\n    - Convention (Open Source, SemVer, package.json, Small modules, Isomorphic JS / Universal JS...)\n  - [Universal Utility Libraries](#universal-utility-libraries)\n    - Standard Library Extensions (FP, OOP, Async...)\n    - Hashing / Generating\n    - Parsing / Manipulating (URL, Validator, i18n, Date, Numbers, Color, Text, Buffer / Blob...)\n    - Logic, Network, Storage, NLP, ML...\n- [Universal Web Apps / Web Pages](#universal-web-apps--web-pages)\n  - [GUI Framework](#gui-framework)\n    - View / ViewModel / ViewController (React)\n    - Model / App State (Redux)\n    - API (GraphQL)\n    - GUI Architectures (MVC, MVP, PM, MVVM, Flux, Redux, Elm, MVI, SAM...)\n  - [UI Toolkits](#ui-toolkits)\n    - CSS, React...\n  - [Standalone UI Components](#standalone-ui-components)\n    - Layout, Icon, Button, Form, Overlay, Picker, Content, Editor...\n- [Client Side](#client-side)\n  - [UX Libraries](#ux-libraries)\n    - Drag \u0026 Drop, Gesture, Scrolling, Zoom, Tooltip, Tour...\n  - [Graphic Libraries](#graphic-libraries)\n    - Animation (Effects, Loading, Scrolling, Parallax, Transition, Timeline, Motion / Curved Path...)\n    - 2D (Canvas, SVG, Physics...), 3D (WebGL, Physics...)\n    - Data Visualization, Game...\n  - [Hybrid Libraries](#hybrid-libraries)\n    - Electron, React Native\n- [Server Side](#server-side)\n  - [Network](#network)\n    - HTTP (Intro, Same-origin policy, Performance, HTTPS, HTTP/2, gRPC...)\n    - TCP, UDP...\n  - [Server-side Best Practices](#server-side-best-practices)\n    - Restful API, SaaS, Microservices (API Gateway, Serverless)\n    - Cloud / Distributed, Web Hosting / Non-distributed\n    - Authentication / Authorization, Security, Logging / Monitoring, DevOps...\n  - [Microservices / API Services (Node.js)](#microservices--api-services-nodejs)\n    - Frameworks (RESTful API, Microservices, Serverless, Bots...), GraphQL, DocGen + CodeGen...\n  - [Server-side Libraries (Node.js)](#server-side-libraries-nodejs)\n    - Configuration, Debugging, Protocols, Network, Crypto, Auth, Storage, Jobs, Scraping, Images, Parsing / Generating, NLP...\n  - [Cloud Services (Global)](#cloud-services-global)\n    - Compute (FaaS / Serverless / WebHook, PaaS, CaaS)\n    - Storage (Object Storage, DBaaS)\n    - BaaS (CRUD, Auth, Search, Email, SMS...)\n    - AIaaS / BDaaS (Natural Language, Computer Vision...)\n  - [Cloud Services (China)](#cloud-services-china)\n    - The evil twins inside [the Great Firewall of China](https://github.com/dexteryy/spellbook-of-modern-webdev/pull/4)\n- [Tooling](#tooling)\n  - [Testing](#testing)\n    - Unit Testing / Test Runner, Test Doubles\n    - Web Testing (Integration Testing, Functional/E2E Testing, Visual testing, Monkey Testing, Headless Browsers)\n    - Server-side Testing (Functional Testing, Load Testing)\n    - Benchmark Testing\n    - Analysis (Code Coverage, Node.js Security...)\n  - [Documentation](#documentation)\n    - JS, API, CLI, CSS / Style Guide, Writing\n  - [Toolchain](#toolchain)\n    - Compiler / Transpiler / Preprocessor (Babel, PostCSS...)\n    - Loader / Builder / Bundler (Webpack, Rollup...)\n    - Minifier / Compressor / Optimizer (Prepack, Babili / Uglify, imagemin, cssnano / clean-css...)\n    - Formatter (Prettier, Stylefmt...)\n    - Static Analysis (ESLint, Flow, StyleLint...)\n    - Task Automation (npm scripts, Gulp...)\n  - [Workflow](#workflow)\n    - Development (Micro Generator, Live Reload / Watch / Preview, Dev Tools, HTTP Inspector, Debugging Proxy...)\n    - Deployment (Process Supervisor, Containers, Container Clusters, PaaS)\n    - Monitoring (Error Tracking, Logging, APM...)\n  - [Command-line Environment (Mac)](#command-line-environment-mac)\n    - Terminal, Homebrew, Zsh, Vim, Git, Docker, dotfiles, Utilities...\n  - [Command-line Libraries (Node.js)](#command-line-libraries-nodejs)\n    - Input (Options/Arguments Parser, Interactive, Configuration...)\n    - Output (Color / Style, Icon, Updating Log, Notice, Columns, Curses, Drawing...)\n    - Delivery, OS, API, Parser...\n  - [IDE / Editors](#ide--editors)\n    - VSCode Plugins (UI, Formatting, Operating, Static Analysis, Docs, Assistant, Integration...)\n    - Atom Plugins (UI, Formatting, Operating, Static Analysis, Docs, Assistant, Integration...)\n    - Out-of-the-box Atom IDE, Other Electron-based IDE, Programming Fonts...\n  - [Useful Apps](#useful-apps)\n    - Playground, Visual Tools, Viewer, Docs, Automation...\n  - [Collaboration](#collaboration)\n    - Version Control, ChatOps, Kanban, Markdown, Design...\n\nA Subset as a __Learning Path__\n\n1. [Open Web Platform](#open-web-platform)\n2. [HTML5 / Web APIs](#html5--web-apis)\n3. [CSS Features](#css-features)\n4. [Modern CSS / Next-Gen CSS](#modern-css--next-gen-css)\n5. [Modern JS / Next-Gen JS](#modern-js--next-gen-js)\n6. [Platform Compatibility and Proposal Status](#platform-compatibility-and-proposal-status)\n7. [Network](#network)\n8. [Node.js](#nodejs)\n9. [npm Ecosystem](#npm-ecosystem)\n10. [Command-line Environment (Mac)](#command-line-environment-mac)\n11. [IDE / Editors](#ide--editors)\n12. [GUI Framework](#gui-framework)\n13. [Microservices / API Services (Node.js)](#microservices--api-services-nodejs)\n15. [Testing](#testing)\n\nA Subset for __Finding Libraries__\n\n- [Cross-browser / Polyfill Libraries](#cross-browser--polyfill-libraries)\n- [Hybrid Libraries](#hybrid-libraries)\n- [GUI Framework](#gui-framework)\n- [UI Toolkits](#ui-toolkits)\n- [Standalone UI Components](#standalone-ui-components)\n- [UX Libraries](#ux-libraries)\n- [Graphic Libraries](#graphic-libraries)\n- [Universal Utility Libraries](#universal-utility-libraries)\n- [Microservices / API Services (Node.js)](#microservices--api-services-nodejs)\n- [Server-side Libraries (Node.js)](#server-side-libraries-nodejs)\n- [Command-line Libraries (Node.js)](#command-line-libraries-nodejs)\n\nA Subset for __Architecture and Infrastructure__\n\n- [GUI Framework](#gui-framework)\n- [Toolchain](#toolchain)\n- [Workflow](#workflow)\n- [Microservices / API Services (Node.js)](#microservices--api-services-nodejs)\n- [Server-side Best Practices](#server-side-best-practices)\n- [Cloud Services (Global)](#cloud-services-global) / [Cloud Services (China)](#cloud-services-china)\n- [Documentation](#documentation)\n\n---\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"assets/merlins_spell_book.jpg\" width=\"\"\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Platforms and Languages\n\n### Open Web Platform\n\n* Learning\n  * [What is the Internet](http://www.20thingsilearned.com/en-US/what-is-the-internet/), [How does the Internet work](https://www.w3.org/wiki/How_does_the_Internet_work)\n    * HTTP - see _[Server Side \u003e Network](#network)_\n  * [Evolution of the Web](http://www.evolutionoftheweb.com/)\n    * [Timeline of web browsers](https://en.wikipedia.org/wiki/Timeline_of_web_browsers)\n    * [Dive Into HTML5 - A Quite Biased History of HTML5](http://diveintohtml5.info/past.html)\n    * [20 Things I Learned About Browsers and the Web](http://www.20thingsilearned.com/)\n  * MDN's [Learn Web Development](https://developer.mozilla.org/en-US/docs/Learn)\n* Reference\n  * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web)\n    * [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference), [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG), [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference), [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model), [DOM Events](https://developer.mozilla.org/en-US/docs/Web/Events), [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)\n    * [MDN content Roadmap](https://trello.com/b/LFl3umOX/mdn-content-roadmap)\n  * [Google Developers](https://developers.google.com/web/)\n    * [Web Fundamentals](https://developers.google.com/web/fundamentals/), [Update](https://developers.google.com/web/updates/), [HTML5Rocks Archived Tutorials](https://www.html5rocks.com/en/tutorials/)\n  * Apple\n    * [WebKit JS](https://developer.apple.com/reference/webkitjs/)\n  * [CSSDB](https://cssdb.org/)\n  * CSS-Tricks's [CSS Almanac](https://css-tricks.com/almanac/), [Codrops' CSS Reference](https://tympanus.net/codrops/css_reference/)\n  * [Mastering CSS Principles: A Comprehensive Guide](https://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/)\n  * [HTML: The Living Standard (Web Developer Edition)](https://developers.whatwg.org/)\n    * [The Web platform: Browser technologies](https://platform.html5.org/)\n  * [W3Fools](http://www.w3fools.com/)\n    * [W3Schools Responds to W3Fools](https://readwrite.com/2011/01/17/w3schools-responds-to-w3fools/)\n    * [Why shouldn't I use W3Schools?](https://codereview.meta.stackexchange.com/questions/4975/why-shouldnt-i-use-w3schools-as-reference), [Why do people hate W3schools?](https://www.quora.com/Why-do-people-hate-W3schools-com), [Does W3Schools really suck?](https://www.quora.com/Does-W3Schools-really-suck)\n  * Visual Tools\n    * see _[Tooling \u003e Useful Apps](#useful-apps) \u003e Visual Tools_\n* Performance\n  * Rendering\n    * [How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/), \\\n      [How Browsers Lay Out Web Pages](https://dbaron.org/talks/2012-03-11-sxsw/master.xhtml)\n    * [Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering/)\n    * [GPU Animation: Doing It Right](https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/) / [An Introduction to Hardware Acceleration with CSS Animations](https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/)\n    * [CSS will-change](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)\n      * [Everything You Need to Know About the CSS will-change Property](https://dev.opera.com/articles/css-will-change-property/)\n    * [CSS Containment in Chrome 52](https://developers.google.com/web/updates/2016/06/css-containment)\n  * Loading\n    * [How DNS works](https://howdns.works/)\n    * [Network resilience](https://web.dev/reliable)\n    * [Evolution of Script Loading](https://www.stevesouders.com/blog/2010/12/06/evolution-of-script-loading/), [Browser script loading roundup](https://www.stevesouders.com/blog/2010/02/07/browser-script-loading-roundup/)\n    * [JavaScript Start-up Performance](https://medium.com/reloading/javascript-start-up-performance-69200f43b201)\n    * [Critical Rendering Path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/),\n       [CSS and the critical path](http://www.phpied.com/css-and-the-critical-path/)\n  * Offline\n    * see _[HTML5 / Web APIs](#html5--web-apis) \u003e Offline_\n  * Measure\n    * [Performance budgets 101](https://web.dev/performance-budgets-101/)\n    * [Measure Performance with the RAIL Model](https://developers.google.com/web/fundamentals/performance/rail)\n    * [Measuring Page Load Speed with Navigation Timing](https://www.html5rocks.com/en/tutorials/webperformance/basics/)\n    * [Measuring network performance with Resource Timing API](https://developers.googleblog.com/2013/12/measuring-network-performance-with.html)\n    * [User Timing API](https://www.html5rocks.com/en/tutorials/webperformance/usertiming/)\n    * [Why Web Developers Need to Care about Interactivity](https://philipwalton.com/articles/why-web-developers-need-to-care-about-interactivity/)\n      * [requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)\n      * [PerformanceObserver](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)\n  * Optimization\n    * [Fast load times](https://web.dev/fast)\n    * [Why Performance Matters](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)\n    * [Performance audits](https://web.dev/lighthouse-performance)\n    * [Lighthouse Audit References](https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains)\n* Security\n  * [Safe and secure](https://web.dev/secure)\n  * [The Tangled Web: A Guide to Securing Modern Web Applications](http://lcamtuf.coredump.cx/tangled/)\n  * [HTML5 Security Cheatsheet](https://html5sec.org/)\n* Semantics\n  * SEO\n    * [Let’s Talk about Semantics](http://html5doctor.com/lets-talk-about-semantics/)\n    * [Easily discoverable](https://web.dev/discoverable)\n    * [SEO audits](https://web.dev/lighthouse-seo)\n    * [SEO Tutorial For Beginners](https://www.hobo-web.co.uk/seo-tutorial/), \\\n      Google's [Search Engine Optimization Starter Guide](http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf)\n  * Accessibility\n    * [Accessible to all](https://web.dev/accessible)\n    * [The A11Y Project](http://a11yproject.com/), [Using ARIA](https://w3c.github.io/using-aria/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### HTML5 / Web APIs\n\n* HTML / DOM\n  * [You Might Not Need jQuery](http://youmightnotneedjquery.com/), \\\n    [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery), \\\n    [(Now More Than Ever) You Might Not Need jQuery](https://css-tricks.com/now-ever-might-not-need-jquery/)\n  * [HEAD](https://github.com/joshbuchea/HEAD/)\n  * [favicon](https://github.com/audreyr/favicon-cheat-sheet)\n  * [Form pseudo-element](https://gist.github.com/webtobesocial/aefd6e25064c08e0cc9a)\n  * [Native form elements](http://nativeformelements.com/)\n  * [Detect DOM changes with Mutation Observers](https://developers.google.com/web/updates/2012/02/Detect-DOM-changes-with-Mutation-Observers)\n* Appearance\n  * [Web Components](https://developers.google.com/web/updates/2017/01/webcomponents-org)\n    * [Shadow DOM v1](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom), [Custom Elements v1](https://developers.google.com/web/fundamentals/getting-started/primers/customelements)\n  * [Web Animations](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)\n    * [Web Animation Past, Present, and Future](https://alistapart.com/article/web-animation-past-present-and-future)\n    * [Let's talk about the Web Animations API](http://danielcwilson.com/blog/2015/07/animations-intro/)\n    * Status - [Are we animated yet?](https://birtles.github.io/areweanimatedyet/)\n* Interaction\n  * Desktop\n    * [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent), [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent), [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)\n    * [Drag and Drop](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API), [Pointer Lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)\n  * Mobile\n    * [TouchEvent](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent)\n      * [300ms tap delay, gone away](https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away), [More Responsive Tapping on iOS](https://webkit.org/blog/5610/more-responsive-tapping-on-ios/)\n    * [DeviceOrientationEvent + DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation)\n  * Hardware Agnostic\n    * [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent), [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection)\n    * [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) ([Intro](https://developers.google.com/web/updates/2016/04/intersectionobserver))\n    * [Resize Observer API](https://developers.google.com/web/updates/2016/10/resizeobserver)\n  * [Gamepad](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API), [Web Speech](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)\n* Access\n  * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL), [History](https://developer.mozilla.org/en-US/docs/Web/API/History), [Navigator](https://developer.mozilla.org/en-US/docs/Web/API/Navigator), [Screen](https://developer.mozilla.org/en-US/docs/Web/API/Screen), [Page Visibility](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API), [Clipboard](https://developer.mozilla.org/en-US/docs/tag/Clipboard%20API), [Performance](https://developer.mozilla.org/en-US/docs/Web/API/Performance), [Console](https://developer.mozilla.org/en-US/docs/Web/API/Console)\n  * [Permissions](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API), [Geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation)\n  * [Web Notifications](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API) , [Vibration](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)\n* Network\n  * [XMLHttpRequest2](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)\n  * [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)\n    * [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch)\n    * [Why I won’t be using Fetch API in my apps](https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78)\n  * [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket), [Server-sent Event](https://developer.mozilla.org/en-US/docs/Web/API/EventSource)\n  * [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)\n    * [Getting Started with WebRTC](https://www.html5rocks.com/en/tutorials/webrtc/basics/)\n    * [WebRTC in the real world: STUN, TURN and signaling](https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/)\n    * [WebRTC data channels](https://www.html5rocks.com/en/tutorials/webrtc/datachannels/)\n    * Workshop - [Codelabs - Real time communication with WebRTC](https://codelabs.developers.google.com/codelabs/webrtc-web/)\n* Offline\n  * Overview\n    * [Offline UX Considerations](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux)\n    * [The offline cookbook](https://jakearchibald.com/2014/offline-cookbook/)\n    * [Offline First - HTML5 technologies for a faster, smarter, more engaging web](http://www.webdirections.org/offlineworkshop/ibooksDraft.pdf)\n  * [Web Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API), [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API#database_connection)\n  * [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader), [File](https://developer.mozilla.org/en-US/docs/Web/API/File), [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob)\n  * [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)\n    * [Service Workers Explained](https://github.com/w3c/ServiceWorker/blob/master/explainer.md)\n    * [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers), [The Service Worker Lifecycle](https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle)\n    * [Instant Loading Web Apps with an Application Shell Architecture](https://developers.google.com/web/updates/2015/11/app-shell)\n    * [Service Worker Cookbook](https://serviceworke.rs/)\n    * Status - [Is ServiceWorker Ready?](https://jakearchibald.github.io/isserviceworkerready/)\n  * [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)\n    * [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist), [PWA audits](https://web.dev/lighthouse-pwa)\n    * [Offline Storage for Progressive Web Apps](https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa)\n    * [The PRPL pattern](https://developers.google.com/web/fundamentals/performance/prpl-pattern/)\n    * Workshop - [Codelabs - Your First Progressive Web App](https://codelabs.developers.google.com/codelabs/your-first-pwapp/)\n* Media\n  * [\\\u003cvideo\\\u003e](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), [\\\u003caudio\\\u003e](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)\n  * [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\n    * [Web Audio API Book](http://chimera.labs.oreilly.com/books/1234000001552/index.html)\n    * Workshop - [Web Audio School](https://github.com/mmckegg/web-audio-school)\n  * [Media Streams](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API)\n    * [Capturing Audio \u0026 Video in HTML5](https://www.html5rocks.com/en/tutorials/getusermedia/intro/)\n* Graphics\n  * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)\n    * [Styling And Animating SVGs With CSS](https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/)\n  * [Canvas](https://developer.mozilla.org/en-US/docs/HTML/Canvas)\n    * [HTML5 Canvas](http://chimera.labs.oreilly.com/books/1234000001654/index.html)\n  * [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)\n    * [WebGL by example](https://developer.mozilla.org/en-US/docs/Learn/WebGL/By_example), [WebGL tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial), [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217)\n    * [Primer: Shaders](https://notes.underscorediscovery.com/shaders-a-primer/), [An Introduction to Shaders](https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/)\n    * [The Book of Shaders](http://thebookofshaders.com/)\n    * Workshop -[Shader School](https://github.com/stackgl/shader-school), [WebGL Workshop](https://github.com/stackgl/webgl-workshop), [WebGL Academy](http://www.webglacademy.com/)\n    * [Learning Modern 3D Graphics Programming](https://paroj.github.io/gltut/)\n  * [WebXR / Immersive Web](https://github.com/immersive-web/webxr)\n    * [Welcome to the immersive web](https://developers.google.com/web/updates/2018/05/welcome-to-immersive)\n    * [Progressive WebXR](https://blog.mozvr.com/progressive-webxr-ar-store/)\n* Computing\n  * [Web Cryptography](https://developer.mozilla.org/en-US/docs/Web/API/Crypto)\n  * [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)\n  * WebAssembly\n    * see _[WebAssembly](#webassembly)_\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### CSS Features\n\n* Basics\n  * [You Don't Need JavaScript](https://github.com/you-dont-need/You-Dont-Need-JavaScript)\n  * [CSS Selectors from CSS4 till CSS1](http://css4-selectors.com/selectors/)\n    * [CSS Diner - Where we feast on CSS Selectors!](http://flukeout.github.io/)\n  * [An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements](https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/)\n  * [@supports Rule (Feature Queries)](https://www.sitepoint.com/an-introduction-to-css-supports-rule-feature-queries/)\n  * [Houdini](https://github.com/w3c/css-houdini-drafts/wiki)\n    * [Houdini: Demystifying CSS](https://developers.google.com/web/updates/2016/05/houdini), [Houdini: Maybe The Most Exciting Development In CSS You've Never Heard Of](https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/)\n* Responsive Web Design\n  * Media Queries\n    * [Media Queries for Standard Devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)\n  * Images\n    * [Responsive Images](https://developers.google.com/web/fundamentals/design-and-ui/responsive/images), [Responsive Images in CSS](https://css-tricks.com/responsive-images-css/)\n  * Units\n    * [Font Size Idea: px at the Root, rem for Components, em for Text Elements](https://css-tricks.com/rems-ems/), \\\n      [Understanding and Using rem Units in CSS](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)\n    * [Truly Fluid Typography With vh And vw Units](https://www.smashingmagazine.com/2016/05/fluid-typography/)\n* [Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)\n  * Flexbox, CSS Grid Layout\n    * [CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/)\n    * [A Complete Guide to Flexbox (CSS-Tricks)](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) / [Flexbox (Codrops)](https://tympanus.net/codrops/css_reference/flexbox/)\n      * [Using Flexbox today](https://chriswrightdesign.com/experiments/using-flexbox-today/)\n      * [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/), [Flexbox Patterns](http://www.flexboxpatterns.com/home)\n        * [Centering Elements with Flexbox](https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/)\n        * [Quantity Queries with Flexbox](https://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/)\n    * [A Complete Guide to Grid (CSS-Tricks)](https://css-tricks.com/snippets/css/complete-guide-grid/) / [A Complete Guide to CSS Grid (Codrops)](https://tympanus.net/codrops/css_reference/grid/)\n  * Traditional\n    * [Learn CSS Layout](http://learnlayout.com/)\n      * [Learn CSS Layout - the pedantic way](http://book.mixu.net/css/)\n    * [CSS Floats 101](https://alistapart.com/article/css-floats-101), [All About Floats](https://css-tricks.com/all-about-floats/), [CSS Float Theory: Things You Should Know](https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/)\n    * [CSS Positioning 101](https://alistapart.com/article/css-positioning-101)\n      * [CSS “position: sticky” – Introduction and Polyfills](https://www.sitepoint.com/css-position-sticky-introduction-polyfills/)\n    * [The Z-Index CSS Property: A Comprehensive Look](https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/)\n    * [Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/), [Absolute Center an Image](https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/), [How To Center in CSS](http://howtocenterincss.com/)\n* Web Typography\n  * [Using @font-face](https://css-tricks.com/snippets/css/using-font-face/)\n  * [A Comprehensive Guide to Font Loading Strategies](https://www.zachleat.com/web/comprehensive-webfonts/)\n* Text\n  * [Handling Long Words and URLs](https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/)\n  * [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) + [text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation)\n* Animation\n  * CSS Transition\n    * [Using CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)\n    * [Intro to CSS 3D transforms](http://desandro.github.io/3dtransforms/)\n  * CSS Animation\n    * [The Guide To CSS Animation: Principles and Examples](https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/)\n    * [Upgrading CSS Animation With Motion Curves](https://www.smashingmagazine.com/2016/08/css-animations-motion-curves/)\n  * Motion Path\n    * [Animating Clipped Elements In SVG](https://www.smashingmagazine.com/2015/12/animating-clipped-elements-svg/)\n    * [Moving along a curved path in CSS with layered animation](http://tobiasahlin.com/blog/curved-path-animations-in-css/)\n    * [Future Use: CSS Motion Paths](https://codepen.io/danwilson/post/css-motion-paths)\n* Effects\n  * [CSS Image Effects](https://una.im/vintage-washout/)\n  * [Web Image Effects Performance Showdown](https://www.smashingmagazine.com/2016/05/web-image-effects-performance-showdown/)\n    * [Basics of CSS Blend Modes](https://css-tricks.com/basics-css-blend-modes/)\n    * [CSS Blend Modes could be the next big thing in Web Design](https://medium.com/@bennettfeely/css-blend-modes-could-be-the-next-big-thing-in-web-design-6b51bf53743a)\n    * [Understanding CSS Filter Effects](https://www.html5rocks.com/en/tutorials/filters/understanding-css/)\n  * [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)\n  * [The State of CSS Reflections](https://css-tricks.com/state-css-reflections/)\n  * [CSS Shapes 101](https://alistapart.com/article/css-shapes-101)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Modern CSS / Next-Gen CSS\n\n* Component-based CSS\n  * Utility Class / Functional CSS / Utility-first CSS / Atomic CSS\n    * [The Case for Atomic / Utility-First CSS](https://johnpolacek.github.io/the-case-for-atomic-css/)\n      * [CSS Utility Classes and \"Separation of Concerns\"](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)\n    * [A Year of Utility Classes](https://css-irl.info/a-year-of-utility-classes/)\n    * [So you need a CSS utility library?](https://css-tricks.com/need-css-utility-library/)\n    * see _[UI Toolkits](#ui-toolkits)_\n  * [CSS Modules](https://github.com/css-modules/css-modules)\n    * [The End of Global CSS](https://medium.com/seek-blog/the-end-of-global-css-90d2a4a06284)\n    * Tools - see _[Tooling \u003e Toolchain](#toolchain) \u003e Builder / Bundler \u003e Webpack_\n  * [Styled-Components](https://github.com/styled-components/styled-components) / [Emotion](https://emotion.sh/)\n    * [CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js)\n      * [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)\n      * [A Brief History of CSS-in-JS: How We Got Here and Where We’re Going](https://levelup.gitconnected.com/a-brief-history-of-css-in-js-how-we-got-here-and-where-were-going-ea6261c19f04), [The State of CSS](http://ryanogles.by/css/javascript/2017/05/25/the-state-of-css.html)\n      * [Comparison of CSS-in-JS solutions](http://michelebertoli.github.io/css-in-js/)\n    * [Styled Components: Enforcing Best Practices In Component-Based Systems](https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/)\n    * [Writing your styles in JS ≠ writing inline styles](http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js/)\n    * Libraries\n      * [styled-system](https://github.com/jxnblk/styled-system), [system-components](https://github.com/jxnblk/styled-system/tree/master/system-components), [grid-styled](https://jxnblk.com/grid-styled/)\n      * [styled-normalize](https://github.com/sergeysova/styled-normalize) / [styled-sanitize](https://www.npmjs.com/package/styled-sanitize)\n      * [styled-components-breakpoint](https://github.com/jameslnewell/styled-components-breakpoint)\n      * [styled-tools](https://github.com/diegohaz/styled-tools)\n* Preprocessor-based CSS\n  * [PostCSS](http://postcss.org/)\n    * Intro\n      * [Meet PostCSS](http://www.meetpostcss.com/)\n      * [PostCSS – A Comprehensive Introduction](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)\n      * [PostCSS – Sass Killer or Preprocessing Pretender?](https://ashleynolan.co.uk/blog/postcss-a-review)\n      * [PostCSS Playground](https://sneakertack.github.io/postcss-playground/)\n    * [Preset Env](https://preset-env.cssdb.org/features)\n      * [It’s Time To Start Using CSS Custom Properties](https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/)\n      * [Getting Started With CSS calc()](https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/)\n    * More Plugins - see _[Tooling \u003e Toolchain](#toolchain) \u003e Compiler / Transpiler / Preprocessor \u003e PostCSS_\n* Best Practices\n  * [Sanitize.css](https://github.com/csstools/sanitize.css) / [Normalize.css](http://nicolasgallagher.com/about-normalize-css/) / [Reset.css](http://meyerweb.com/eric/tools/css/reset/)\n  * Methodology\n    * [BEM](https://en.bem.info/methodology/)\n      * [BEM 101](https://css-tricks.com/bem-101/) / [MindBEMding](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)\n    * [OOCSS](https://github.com/stubbornella/oocss/wiki)\n      * [An Introduction To Object Oriented CSS (OOCSS)](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)\n    * [SMACSS](https://smacss.com/)\n    * [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), [RSCSS](http://rscss.io/), [SOLID CSS](http://blog.millermedeiros.com/solid-css/)\n    * [CSS Guidelines](https://cssguidelin.es/), [MaintainableCSS](https://maintainablecss.com/)\n  * Code Style\n    * [Idiomatic CSS](https://github.com/necolas/idiomatic-css)\n    * [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css)\n    * [Airbnb CSS-in-JavaScript Style Guide](https://github.com/airbnb/javascript/tree/master/css-in-javascript)\n    * CSS + HTML\n      * [Isobar Front-end Code Standards](http://isobar-idev.github.io/code-standards/)\n      * [Code Guide by @mdo](http://codeguide.co/)\n* Know More about Web Design / [UI Design / UX Design](https://medium.com/@Mockplus/ux-vs-ui-vs-ia-vs-ixd-4-confusing-digital-design-terms-defined-ebd679f53f2)\n  * Responsive/Adaptive Web Design\n    * [Responsive Web Design Basics](https://developers.google.com/web/fundamentals/design-and-ui/responsive/) /\\\n      [Responsive Web Design: What It Is And How To Use It](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)\n    * [The Difference Between Responsive and Adaptive Design](https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/)\n    * [The Current State of Adaptive Design](https://medium.com/swlh/the-current-state-of-adaptive-design-6b2b89b258c4)\n    * Responsivedesign.is - [Design](https://responsivedesign.is/design/), [Develop](https://responsivedesign.is/develop/)\n    * Patterns\n      * [Responsive Web Design Patterns](https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns), \\\n        [Responsive Patterns](http://bradfrost.github.io/this-is-responsive/patterns.html), \\\n        [ResponsiveDesign.is Patterns](https://responsivedesign.is/patterns/)\n      * [Responsive Data Table Roundup](https://css-tricks.com/responsive-data-table-roundup/)\n  * Motion Design\n    * [Creating Usability with Motion: The UX in Motion Manifesto](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc)\n    * [10 principles for smooth web animations](https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29)\n  * Grid System - [A Comprehensive Introduction to Grids in Web Design](https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521)\n    * calc() grid system - [Lost Grid](http://lostgrid.org/)\n    * flexbox grid system - [Flexbox Grid](http://flexboxgrid.com/)\n    * [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)\n  * Typography\n    * [Typography.js](https://www.npmjs.com/package/typography)\n    * [Gutenberg](http://matejlatin.github.io/Gutenberg/)\n    * [The Equilateral Triangle of a Perfect Paragraph](https://betterwebtype.com/triangle)\n    * [The Elements of Typographic Style Applied to the Web](http://webtypography.net/toc/)\n    * [Why is Vertical Rhythm an Important Typography Practice?](https://zellwk.com/blog/why-vertical-rhythms/)\n      * [CSS with vertical rhythm](https://drewish.com/tools/vertical-rhythm/)\n    * [More Meaningful Typography](https://alistapart.com/article/more-meaningful-typography)\n      * [Modular Scale](http://www.modularscale.com/)\n  * [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) ([Book](http://atomicdesign.bradfrost.com/table-of-contents/))\n    * [The Atomic Workflow — People, Process, And Making Design Systems Happen](https://www.smashingmagazine.com/atomic-design-workflow/)\n    * [The “Other” Interface: Atomic Design With Sass](https://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/)\n    * [Atomic Design – Your Ultimate Guide to Scalable \u0026 Modular CSS (Sass)](https://blog.alexdevero.com/atomic-design-scalable-modular-css-sass/)\n  * Design System\n    * [A comprehensive guide to design systems](https://www.invisionapp.com/blog/guide-to-design-systems/), [Design Systems Handbook](https://www.designbetter.co/design-systems-handbook/introducing-design-systems)\n    * Design Tokens\n      * [Tokens in Design Systems](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421)\n      * [How to manage your Design Tokens with Style Dictionary](https://medium.com/@didoo/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa)\n      * [What Are Design Tokens?](https://css-tricks.com/what-are-design-tokens/)\n    * Style Guide\n      * [Style Guide Driven Development / Living Style Guides](http://styleguides.io/)\n      * Tools - see _[Tooling \u003e Documentation](#documentation) \u003e Style Guide_\n      * Examples\n        * Apple's [Human Interface Guidelines](https://developer.apple.com/design/)\n        * Google's [Material Design](https://material.io/)\n        * Microsoft's [Fluent Design System](http://fluent.microsoft.com/)\n        * Airbnb's [new design system](https://airbnb.design/building-a-visual-language/)\n        * Github's [Primer](http://primercss.io/)\n        * Atlassian's [Design Guidelines](https://atlassian.design/guidelines/product/overview)\n        * Salesforce's [Lightning Design System](https://www.lightningdesignsystem.com/)\n        * Yelp's [Styleguide](https://www.yelp.com/styleguide)\n        * IBM's [Living Language](https://www.ibm.com/design/language/)\n        * BBC's [GEL Guidelines](http://www.bbc.co.uk/gel/guidelines/)\n        * A List Apart's [pattern library](http://patterns.alistapart.com/)\n        * \u003cspan\u003eUSA\u003c/span\u003e.gov's [Web Design Standards](https://standards.usa.gov/)\n        * MailChimp's [Email Design Guide](https://mailchimp.com/email-design-guide/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Modern JS / Next-Gen JS\n\n* ES6+ Features\n  * [Overview of ECMAScript 6 features](https://github.com/lukehoban/es6features)\n  * [Babel REPL](http://babeljs.io/repl/) / [ES6 New Features Comparison](http://es6-features.org/)\n* Intro to ES6+\n  * [Dr. Axel Rauschmayer's blog](http://2ality.com/)\n    * [Exploring ES6](http://exploringjs.com/es6/)\n    * [Exploring ES2016 and ES2017](http://exploringjs.com/es2016-es2017/)\n  * [ES6 In Depth](https://hacks.mozilla.org/category/es6-in-depth/)\n  * Nicholas C. Zakas's [Understanding ECMAScript 6](https://leanpub.com/understandinges6)\n* Re-intro to JS\n  * Articles\n    * MDN\n      * [A re-introduction to JavaScript (JS tutorial)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)\n      * [Equality comparisons and sameness](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness), [Data types and data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures), [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), [Inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)\n      * [Concurrency model and Event Loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop), [Memory Management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management)\n    * Dmitry Soshnikov\n      * [JavaScript. The Core](http://dmitrysoshnikov.com/ecmascript/javascript-the-core/)\n      * ECMA-262-3 in detail\n        * [Execution Contexts](http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/), [Variable object](http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/), [This](http://dmitrysoshnikov.com/ecmascript/chapter-3-this/), [Scope chain](http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/), [Functions](http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/), [Closures](http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/), [Evaluation strategy](http://dmitrysoshnikov.com/ecmascript/chapter-8-evaluation-strategy/)\n        * OOP: [The general theory](http://dmitrysoshnikov.com/ecmascript/chapter-7-1-oop-general-theory/), [ECMAScript implementation](http://dmitrysoshnikov.com/ecmascript/chapter-7-2-oop-ecmascript-implementation/),\n      * ECMA-262-5 in detail\n        * [Properties and Property Descriptors](http://dmitrysoshnikov.com/ecmascript/es5-chapter-1-properties-and-property-descriptors/), [Strict Mode](http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/)\n        * Lexical environments: [Common Theory](http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-1-lexical-environments-common-theory/), [ECMAScript implementation](http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-2-lexical-environments-ecmascript-implementation/)\n      * Notes\n        * [Equality operators](http://dmitrysoshnikov.com/notes/note-2-ecmascript-equality-operators/), [Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/)\n    * Dmitri Pavlutin\n      * [equality operator](https://dmitripavlutin.com/the-legend-of-javascript-equality-operator/), [undefined](https://dmitripavlutin.com/7-tips-to-handle-undefined-in-javascript/)\n      * [variables hoisting](https://dmitripavlutin.com/javascript-hoisting-in-details/), [variables lifecycle](https://dmitripavlutin.com/variables-lifecycle-and-why-let-is-not-hoisted/)\n      * [declare functions](https://dmitripavlutin.com/6-ways-to-declare-javascript-functions/), ['this' keyword](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/)\n      * [three dots](https://dmitripavlutin.com/how-three-dots-changed-javascript/)\n      * [array creation](https://dmitripavlutin.com/power-up-the-array-creation-in-javascript/), [object literals](https://dmitripavlutin.com/why-object-literals-in-javascript-are-cool/)\n      * [well-known symbols](https://dmitripavlutin.com/detailed-overview-of-well-known-symbols/)\n      * [small and plain functions](https://dmitripavlutin.com/the-art-of-writing-small-and-plain-functions/)\n      * [unicode](https://dmitripavlutin.com/what-every-javascript-developer-should-know-about-unicode/)\n    * Other\n      * [The Evolution of JavaScript Modularity](https://github.com/myshov/history-of-javascript/tree/master/4_evolution_of_js_modularity)\n      * [About object-oriented design and the “class” \u0026 “extends” keywords in ES6](http://blog.wolksoftware.com/about-classes-inheritance-and-object-oriented-design-in-typescript-and-es6)\n      * [JavaScript Regular Expression Enlightenment](http://codylindley.com/techpro/2013_05_14__javascript-regular-expression-/)\n  * Books\n    * [Eloquent JavaScript](http://eloquentjavascript.net/)\n    * [Speaking JavaScript](http://speakingjs.com/es5/)\n    * [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS)\n* Reference\n  * [JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)\n  * [JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)\n* Important Proposals\n  * ESM (ECMAScript Modules)\n    * Intro\n      * [The state of JavaScript modules](https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358)\n      * [ECMAScript 6 modules: the final syntax](http://2ality.com/2014/09/es6-modules-final.html)\n      * [ES6 Modules in Depth](https://ponyfoo.com/articles/es6-modules-in-depth#the-es6-module-system)\n    * Browsers\n      * [ECMAScript modules in browsers](https://jakearchibald.com/2017/es-modules-in-browsers/)\n    * Node.js\n      * [Node.js, TC-39, and Modules](https://hackernoon.com/node-js-tc-39-and-modules-a1118aecf95e)\n      * [.mjs](https://nodejs.org/api/esm.html)\n        * [Using ES modules natively in Node.js](http://2ality.com/2017/09/native-esm-node.html)\n      * [esm](https://www.npmjs.com/package/esm)\n        * [ES Modules in Node Today!](https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b)\n  * [Dynamic Import (`import()`)](https://github.com/tc39/proposal-dynamic-import)\n  * [Class Fields \u0026 Static Properties](https://github.com/tc39/proposal-class-public-fields/issues/46#issuecomment-239031422)\n  * [Decorators](https://github.com/wycats/javascript-decorators)\n  * [async/await](https://github.com/yortus/asyncawait), [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise), [Promise Promote](https://www.promisejs.org/), [Promises/A+](https://promisesaplus.com/implementations)\n  * [Observables](https://github.com/tc39/proposal-observable)\n  * [Static Typing](https://ecmascript-daily.github.io/pages/status-of-static-typing-in-ecmascript/)\n  * Concurrent JS / Parallel JavaScript\n    * [Concurrent JavaScript: It can work!](https://webkit.org/blog/7846/concurrent-javascript-it-can-work/)\n    * [The Path to Parallel JavaScript](https://blog.mozilla.org/javascript/2015/02/26/the-path-to-parallel-javascript/)\n      * [A Taste of JavaScript’s New Parallel Primitives](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/)\n      * [A cartoon intro to ArrayBuffers and SharedArrayBuffers](https://hacks.mozilla.org/2017/06/a-cartoon-intro-to-arraybuffers-and-sharedarraybuffers/)\n* Functional Programming\n  * [Functional Programming for JavaScript People](https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504)\n  * [Functional Programming Jargon](https://github.com/hemanth/functional-programming-jargon)\n  * [Composing Software](https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c)\n  * Books\n    * [Professor Frisby's Mostly Adequate Guide to Functional Programming](https://drboolean.gitbooks.io/mostly-adequate-guide)\n    * [Functional-Light JavaScript](https://github.com/getify/functional-light-js)\n  * [Lodash's FP Guide](https://github.com/lodash/lodash/wiki/FP-Guide)\n  * [Introduction to Immutable.js and Functional Programming Concepts](https://auth0.com/blog/intro-to-immutable-js/)\n  * [Why Ramda?](http://fr.umio.us/why-ramda/)\n    * [The Philosophy of Ramda](http://fr.umio.us/the-philosophy-of-ramda/)\n    * [Favoring Curry](http://fr.umio.us/favoring-curry/)\n    * [Thinking in Ramda](http://randycoulman.com/blog/2016/05/24/thinking-in-ramda-getting-started/)\n  * [Fantasy Land](https://github.com/fantasyland/fantasy-land)\n    * [From Callback to Future -\u003e Functor -\u003e Monad](https://hackernoon.com/from-callback-to-future-functor-monad-6c86d9c16cb5)\n    * [ADT (Algebraic Data Types)](http://blog.jenkster.com/2016/06/functional-mumbo-jumbo-adts.html)\n    * [JavaScript and Type Thinking](https://medium.com/@yelouafi/javascript-and-type-thinking-735edddc388d)\n    * [Functors, Applicatives, And Monads In Pictures](http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html)\n* FRP (Functional Reactive Programming)\n  * [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)\n  * [How Is Reactive Different From Procedural Programming?](http://insights.dice.com/2014/01/13/how-is-reactive-different-from-procedural-programming/)\n  * [A General Theory of Reactivity](https://github.com/kriskowal/gtor)\n  * [Learn RxJS](https://www.learnrxjs.io/)\n    * [Rx Book](http://xgrommx.github.io/rx-book/index.html)\n    * [Functional Programming in JavaScript](http://reactivex.io/learnrx/)\n    * [RxMarbles](http://rxmarbles.com/)\n* Static Typing\n  * Intro\n    * [Why use static types in JavaScript?](https://medium.freecodecamp.com/why-use-static-types-in-javascript-part-1-8382da1e0adb)\n    * [You Might Not Need TypeScript (or Static Types)](https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b)\n  * [Flow](https://flow.org/en/docs/)\n    * [Flow Runtime](https://codemix.github.io/flow-runtime/)\n    * [Flow Comments](https://flow.org/blog/2015/02/20/Flow-Comments/)\n  * [TypeScript](http://www.typescriptlang.org/)\n    * [TypeScript Playground](https://www.typescriptlang.org/play/)\n    * [DefinitelyTyped](http://definitelytyped.org/), [TypeSearch](http://microsoft.github.io/TypeSearch/)\n  * [tcomb](https://www.npmjs.com/package/tcomb)\n  * [JSDoc Tags](https://github.com/google/closure-compiler/wiki/Annotating-JavaScript-for-the-Closure-Compiler)\n    * [jsdoc-to-assert](https://github.com/azu/jsdoc-to-assert)\n* Concurrent JS / Parallel JavaScript\n  * [Napa.js](https://github.com/Microsoft/napajs/)\n* Code Style\n  * [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)\n  * [Node.js Style Guide](https://github.com/felixge/node-style-guide)\n  * [Clean Code JavaScript](https://github.com/ryanmcdermott/clean-code-javascript)\n  * [JavaScript Clean Coding Best Practices](https://blog.risingstack.com/javascript-clean-coding-best-practices-node-js-at-scale/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### WebAssembly\n\n* References\n  * [WebAssembly.org](http://webassembly.org/)\n  * [MDN docs](https://developer.mozilla.org/en-US/docs/WebAssembly)\n* Concepts\n  * [WebAssembly High-Level Goals](https://github.com/WebAssembly/design/blob/master/HighLevelGoals.md)\n  * [Minimum Viable Product](https://github.com/WebAssembly/design/blob/master/MVP.md)\n  * [WebAssembly concepts](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)\n  * [An Abridged Cartoon Introduction To WebAssembly](https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/)\n* Features\n  * [Features to add after the MVP](https://github.com/WebAssembly/design/blob/master/FutureFeatures.md)\n  * [WebAssembly proposals](https://github.com/WebAssembly/proposals)\n* Workshop\n  * [Codelabs - An Introduction to Web Assembly](https://codelabs.developers.google.com/codelabs/web-assembly-intro/)\n* Languages\n  * [Rust](https://www.rust-lang.org)\n    * [Rust and WebAssembly](https://rustwasm.github.io/docs.html)\n      * [The Rust Wasm Book](https://rustwasm.github.io/docs/book/)\n\n### Node.js\n\n* Intro\n  * [The Art of Node](https://github.com/maxogden/art-of-node)\n  * [You Don’t Know Node](https://webapplog.com/you-dont-know-node/)\n  * [RisingStack's](https://blog.risingstack.com/node-js-at-scale-understanding-node-js-event-loop/) / [NodeSource's](https://nodesource.com/blog/understanding-the-nodejs-event-loop/) Understanding the Node.js Event Loop\n  * [Node.js Garbage Collection Explained](https://blog.risingstack.com/node-js-at-scale-node-js-garbage-collection/)\n  * [Stream Handbook](https://github.com/substack/stream-handbook)\n    * [A Brief History of Node Streams](https://medium.com/the-node-js-collection/a-brief-history-of-node-streams-pt-1-3401db451f21)\n    * [Understanding Object Streams](https://nodesource.com/blog/understanding-object-streams/)\n  * [Keeping the Node.js core small](https://developer.ibm.com/node/2017/04/20/keeping-node-js-core-small/)\n  * [Debugging Node.js with Google Chrome](https://medium.com/the-node-js-collection/debugging-node-js-with-google-chrome-4965b5f910f4)\n    * [Add v8_inspector supports](https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27)\n    * [How to Debug Node.js with the Best Tools Available](https://blog.risingstack.com/how-to-debug-nodej-js-with-the-best-tools-available/)\n* Workshop\n  * [NodeSchool](https://nodeschool.io/)\n    * [learnyounode](https://www.npmjs.com/package/learnyounode)\n* Best Practices\n  * [The Node Way](http://thenodeway.io/introduction/)\n  * [Joyent's Production Practices - Design](https://www.joyent.com/node-js/production/design/), [Error Handling](https://www.joyent.com/node-js/production/design/errors)\n  * [Best Practices for Node.js Development](https://devcenter.heroku.com/articles/node-best-practices)\n  * [Node.js Best Practices](https://github.com/alanjames1987/Node.js-Best-Practices)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Platform Compatibility and Proposal Status\n\n* Web\n  * Platform Status\n    * [Can I Use](http://caniuse.com/)\n    * [Chrome](https://www.chromestatus.com/features), [WebKit](https://webkit.org/status/), [Firefox](https://platform-status.mozilla.org/), [Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/status/), [TBS (China)](http://x5.tencent.com/tbs/guide/w3c.html)\n  * Platform Releases\n    * [Chrome](https://chromereleases.googleblog.com/), [Safari](https://developer.apple.com/safari/whats-new/) ([Webkit](https://trac.webkit.org/)), [Firefox](https://www.mozilla.org/en-US/firefox/releases/), [Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/)\n  * Platform Updates\n    * [Mozilla Hacks](https://hacks.mozilla.org/)\n    * [Web Updates](https://developers.google.com/web/updates/), [Chromium Blog](https://blog.chromium.org/)\n    * [Webkit Blog](https://webkit.org/blog/)\n    * [Microsoft Edge Dev Blog](https://developer.microsoft.com/en-us/microsoft-edge/community/)\n  * [Writing forward-compatible websites](https://developer.mozilla.org/en-US/docs/Web/Guide/Writing_forward-compatible_websites)\n    * Polyfill - [What is a Polyfill?](https://remysharp.com/2010/10/08/what-is-a-polyfill)\n    * Feature Detection - [Modernizr/feature-detects](https://github.com/Modernizr/Modernizr/tree/master/feature-detects), [feature.js](https://github.com/viljamis/feature.js/blob/master/feature.js)\n    * Browser/Device/Runtime Detection - see _[Platforms and Languages \u003e Universal Utility Libraries](#universal-utility-libraries) \u003e Parsing / Manipulating_\n    * [Graded Browser Support](https://github.com/yui/yui3/wiki/Graded-Browser-Support) - [Grade components, not browsers](https://www.filamentgroup.com/lab/grade-the-components.html)\n  * Email\n    * [CSS Support Guide for Email Clients](https://www.campaignmonitor.com/css/) / [Email Client CSS Support](https://templates.mailchimp.com/resources/email-client-css-support/)\n    * [Email Design Reference](https://templates.mailchimp.com/) + [HTML Email Templates](https://github.com/mailchimp/Email-Blueprints)\n* Node.js\n  * Platform Releases\n    * [Node.js Release Working Group](https://github.com/nodejs/Release)\n* ECMAScript Support\n  * [ECMAScript compatibility table](http://kangax.github.io/compat-table/es6/)\n  * [Node.js ES2015+ Support](http://node.green/)\n    * Node 10.x LTS - Supports ES modules natively (without `--experimental-modules`)\n    * [Node.8.5](https://nodejs.org/en/blog/release/v8.5.0/) - Supports ES modules natively (`.mjs` + `--experimental-modules`)\n    * [Node 8.3](https://nodejs.org/en/blog/release/v8.3.0/) - [V8 6.0](https://v8project.blogspot.hk/2017/04/v8-release-59.html), [Ignition + Turbofan launched](https://v8project.blogspot.hk/2017/05/launching-ignition-and-turbofan.html)\n    * [Node 8.0 LTS](https://nodejs.org/en/blog/release/v8.0.0/) - [V8 5.8](https://v8project.blogspot.hk/2017/03/v8-release-58.html), [Five New Features You Need To Know](http://codingsans.com/blog/node-8)\n    * [Node 7.6](https://nodejs.org/en/blog/release/v7.6.0/) - [V8 5.5](https://v8project.blogspot.hk/2016/10/v8-release-55.html), Async functions\n    * [Node 6.0 LTS](https://nodejs.org/en/blog/release/v6.0.0/) - [V8 5.0](https://v8project.blogspot.hk/2016/03/v8-release-50.html), 93% of ES6 language features\n  * Performance - [Six Speed](https://kpdecker.github.io/six-speed/)\n* Proposal Status\n  * [W3C WG](https://www.w3.org/Consortium/activities#Working) (World Wide Web Consortium Working Groups)\n    * [Web Platform Publication Status](https://www.w3.org/WebPlatform/WG/PubStatus)\n      * [JavaScript APIs](https://www.w3.org/standards/techs/js), [Mobile Web Applications](https://www.w3.org/standards/techs/mobileapp), [CSS](https://www.w3.org/standards/techs/css)\n    * [CSS current work](https://www.w3.org/Style/CSS/current-work)\n    * [Current HTML5 Specifications](http://html5-overview.net/current)\n    * Inside\n      * [W3C TR (Technical Reports)](https://www.w3.org/2014/Process-20140801/#rec-advance)\n      * [An Inside View of the CSS Working Group at W3C](http://fantasai.inkedblade.net/weblog/2011/inside-csswg/)\n  * [WICG](https://wicg.github.io/admin/charter.html) (Web Incubator Community Group)\n    * [Proposals](https://github.com/WICG)\n  * [WHATWG](https://whatwg.org/faq) (Web Hypertext Application Technology Working Group)\n    * [WHATWG Live Standards](https://spec.whatwg.org/)\n    * Inside\n      * [W3C vs. WHATWG HTML5 Specs – The Differences Documented](http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/)\n  * [ECMA TC39](http://ecma-international.org/memento/TC39.htm) (Ecma International Technical Committee 39)\n    * [Status, process, and documents for ECMA262](https://github.com/tc39/ecma262)\n      * [ECMAScript Proposals](https://github.com/tc39/proposals) / [TC39 Proposals](https://prop-tc39.now.sh/)\n    * Inside\n      * [The TC39 Process](http://tc39.github.io/process-document/) / [The TC39 process for ECMAScript features](http://2ality.com/2015/11/tc39-process.html)\n  * [Node.js TSC](https://github.com/nodejs/TSC) (Node.js Foundation Technical Steering Committee)\n    * [Meeting Notes](https://github.com/nodejs/TSC/tree/master/meetings)\n    * Inside\n      * [How Node.js created a model open source community](https://readwrite.com/2016/04/15/how-node-js-model-open-source-community-pl1/)\n      * [Healthy Open Source](https://medium.com/the-node-js-collection/healthy-open-source-967fa8be7951)\n* JS Engine\n  * [A Guide to JavaScript Engines for Idiots](http://developer.telerik.com/featured/a-guide-to-javascript-engines-for-idiots/)\n  * [V8](https://developers.google.com/v8/)\n    * [How the V8 engine works?](http://thibaultlaurens.github.io/javascript/2013/04/29/how-the-v8-engine-works/)\n    * Internal\n      * [v8: a tale of two compilers](https://wingolog.org/archives/2011/07/05/v8-a-tale-of-two-compilers), \\\n        [A tour of V8: full compiler](http://jayconrod.com/posts/51/a-tour-of-v8-full-compiler)\n      * [A tour of V8: Garbage Collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection)\n    * Next Generation\n      * [Ignition + TurboFan launch and Declarative JavaScript](http://benediktmeurer.de/2017/04/03/v8-behind-the-scenes-march-edition/)\n        * [Launching Ignition and TurboFan](https://v8project.blogspot.hk/2017/05/launching-ignition-and-turbofan.html)\n        * [A tale of TurboFan](http://benediktmeurer.de/2017/03/01/v8-behind-the-scenes-february-edition/)\n      * [Ignition + TurboFan and ES2015](http://benediktmeurer.de/2016/11/25/v8-behind-the-scenes-november-edition/)\n  * [JSC](https://trac.webkit.org/wiki/JavaScriptCore)\n    * [JavaScriptCore, the WebKit JS implementation](https://wingolog.org/archives/2011/10/28/javascriptcore-the-webkit-js-implementation)\n    * Internal\n      * [Introducing the WebKit FTL JIT](https://webkit.org/blog/3362/introducing-the-webkit-ftl-jit/)\n    * Next Generation\n      * [JSC Love ES6](https://webkit.org/blog/7536/jsc-loves-es6/)\n      * [Introducing the B3 JIT Compiler](https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/)\n  * [Chakra](https://github.com/Microsoft/ChakraCore)\n    * [Microsoft Edge’s JavaScript engine to go open-source](https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/)\n    * [Architecture Overview](https://github.com/Microsoft/ChakraCore/wiki/Architecture-Overview)\n    * [Node-ChakraCore and VM Neutrality in Node.js](https://blogs.windows.com/msedgedev/2016/11/29/node-chakracore-vm-neutrality/)\n    * Internal\n      * JavaScript performance updates - [2015](https://blogs.windows.com/msedgedev/2015/05/20/delivering-fast-javascript-performance-in-microsoft-edge), [2016](https://blogs.windows.com/msedgedev/2016/06/22/javascript-performance-updates-anniversary-update/), [2017](https://blogs.windows.com/msedgedev/2017/04/20/improved-javascript-performance-webassembly-shared-memory/)\n    * Next Generation\n      * [Roadmap](https://github.com/Microsoft/ChakraCore/wiki/Roadmap)\n  * [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey)\n    * [The monkeys in 2013](https://blog.mozilla.org/javascript/2014/01/23/the-monkeys-in-2013/)\n  * Benchmarks\n    * [The truth about traditional JavaScript benchmarks](http://benediktmeurer.de/2016/12/16/the-truth-about-traditional-javascript-benchmarks/)\n    * [Browser Benchmarks](http://browserbench.org/)\n* Web Runtime / JS Runtime\n  * [Electron](https://electron.atom.io/)\n    * Tutorials - [Essential Electron](http://jlord.us/essential-electron/)\n  * [Cordova](https://cordova.apache.org/)\n    * [Platform Support](https://cordova.apache.org/docs/en/latest/guide/support/index.html)\n    * [Top Mistakes by Developers new to Cordova/Phonegap](https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md)\n    * Curated Plugins - [Awesome Cordova Plugins](https://github.com/rdn87/awesome-cordova-plugins#list-plugins)\n    * Finding Plugins - [plugreg](http://www.plugreg.com/) / [Plugin Search](https://cordova.apache.org/plugins/)\n  * [React Native](http://facebook.github.io/react-native/) / [NativeScript](https://www.nativescript.org/) / [Weex](https://weex-project.io/)\n    * [React Native Styling Cheat Sheet](https://github.com/vhpoet/react-native-styling-cheat-sheet)\n    * [Bridging in React Native - An in-depth look into React Native's core](https://tadeuzagallo.com/blog/react-native-bridge/)\n    * Tutorials - [React Native Express](http://www.reactnativeexpress.com/), [React Native Workshop](https://rangle-io.gitbooks.io/react-native-workshop/), [React Native Training](https://unbug.gitbooks.io/react-native-training/content/)\n    * Examples - [30 Days of React Native](https://github.com/fangwei716/30-days-of-react-native)\n* Device\n  * [The Ultimate Guide To iPhone Resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions)\n  * [Device Metrics](https://material.io/devices/) / [Screen Sizes](http://screensiz.es/monitor)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Cross-browser / Polyfill Libraries\n\n* Appearance\n  * Responsive Web Design\n    * Media Queries - [Enquire.js](https://www.npmjs.com/package/enquire.js)\n    * Responsive Image - [Picturefill](https://www.npmjs.com/package/picturefill)\n    * [Viewport Units Buggyfill](https://www.npmjs.com/package/viewport-units-buggyfill)\n  * Web Typography\n    * `@font-face` - [Font Face Observer](https://www.npmjs.com/package/fontfaceobserver)\n  * Web Animation API\n    * [Web Animations Polyfill](https://www.npmjs.com/package/web-animations-js)\n  * Web Components\n    * [webcomponents.js (v1 spec polyfills)](https://github.com/webcomponents/webcomponentsjs) / [Polymer](https://www.polymer-project.org/)\n* Interaction\n  * Keyboard - [Mousetrap](https://craig.is/killing/mice)\n  * `scroll-behavior: smooth;` - [Smoothscroll Polyfill](https://www.npmjs.com/package/smoothscroll-polyfill)\n  * PointerEvent - [PEP](https://www.npmjs.com/package/pepjs) / [React Pointable](https://www.npmjs.com/package/react-pointable)\n  * [ResizeObserver Polyfill](https://github.com/que-etc/resize-observer-polyfill)\n* Access\n  * Web Notifications API - [Push.js](https://www.npmjs.com/package/push.js) / [Notify.js](https://www.npmjs.com/package/notifyjs)\n  * Clipboard API - [Clipboard.js](https://www.npmjs.com/package/clipboard) / [copy-to-clipboard](https://www.npmjs.com/package/copy-to-clipboard)\n  * Fullscreen API - [Screenfull](https://www.npmjs.com/package/screenfull)\n  * Page Visibility API - [Visibility.js](https://www.npmjs.com/package/visibilityjs)\n  * `\u003ciframe\u003e` - [iframe-resizer](https://www.npmjs.com/package/iframe-resizer)\n* Network\n  * XHR - [window.fetch Polyfill](https://github.com/github/fetch)\n  * Server-Sent Events - [EventSource Polyfill](https://github.com/amvtek/EventSource)\n  * WebSocket - [Socket.IO-client](https://www.npmjs.com/package/socket.io-client) / [Engine.IO-client](https://www.npmjs.com/package/engine.io-client) / [SockJS-client](https://www.npmjs.com/package/sockjs-client)\n* Performance\n  * Web Worker - [Greenlet](https://github.com/developit/greenlet) / [Workerize](https://github.com/developit/workerize)\n  * `document-write` - [PostScribe](https://www.npmjs.com/package/postscribe)\n  * User Timing API - [marky](https://www.npmjs.com/package/marky)\n* Offline\n  * Service Work - [Workbox](https://developers.google.com/web/tools/workbox/)\n  * File / FileReader API\n    * [FileSaver.js](https://www.npmjs.com/package/file-saver) / [StreamSaver.js](https://github.com/jimmywarting/StreamSaver.js)\n    * [blob-util](https://www.npmjs.com/package/blob-util)\n  * IndexedDB\n    * LocalStorage API - [localForage](https://www.npmjs.com/package/localforage)\n* Media\n  * `\u003cvideo\u003e` - [Video.js](http://videojs.com/)\n  * `\u003caudio\u003e` - [Howler.js](https://howlerjs.com/)\n  * Web Audio API - [Waud.js](http://www.waudjs.com/), [Tone.js](https://tonejs.github.io/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### npm Ecosystem\n\n* [npm](https://www.npmjs.com/)\n  * [how many npm users are there?](http://blog.npmjs.org/post/143451680695/how-many-npm-users-are-there), [Module Counts](http://www.modulecounts.com/)\n  * [Why not to use version control hosting for packages](http://blog.npmjs.org/post/154387331670/the-right-tool-for-the-job-why-not-to-use-version)\n  * [npm and front-end packaging](http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging)\n  * [changes to npm’s unpublish policy](http://blog.npmjs.org/post/141905368000/changes-to-npms-unpublish-policy), [kik, left-pad, and npm](http://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm)\n  * [Hello, Yarn!](http://blog.npmjs.org/post/151660845210/hello-yarn)\n* Finding Packages\n  * Search\n    * [npms.io](https://npms.io/) / [node-modules.com](http://node-modules.com/) / [npmsearch.com](http://npmsearch.com/)\n      * [improved search in the npm CLI (and how we got here)](http://blog.npmjs.org/post/156076312840/search-update), \\\n        [Better search is here!](http://blog.npmjs.org/post/154912817335/better-search-is-here)\n    * [Github Search (sort by stars, for JS)](https://github.com/search?l=JavaScript\u0026q=stars%3A%3E1\u0026s=stars\u0026type=Repositories)\n  * Stats\n    * [npm trends](http://www.npmtrends.com/)\n    * [NPMCompare](https://npmcompare.com/)\n    * [npm-stat](https://npm-stat.com/)\n  * Rank\n    * [The State Of JavaScript](http://stateofjs.com/), \\\n      [Stack Overflow Annual Developer Survey](https://insights.stackoverflow.com/survey)\n    * npm's [most depended-upon packages](https://www.npmjs.com/browse/depended)\n* Dependency Management / Release / Maintenance\n  * [npm Developer Guide](https://docs.npmjs.com/misc/developers)\n    * [npm's CLI](https://docs.npmjs.com/#cli)\n    * [v5.0.0](http://blog.npmjs.org/post/161081169345/v500)\n    * [npm’s lockfiles](http://blog.npmjs.org/post/161627993435/learn-more-about-npms-lockfiles)\n  * [Yarn](https://yarnpkg.com/)\n    * [yarn's CLI](https://yarnpkg.com/en/docs/cli/)\n    * [yarn.lock](https://yarnpkg.com/en/docs/yarn-lock)\n  * [Lerna](https://lernajs.io/)\n  * [semantic-release](https://www.npmjs.com/package/semantic-release) / [np](https://www.npmjs.com/package/np), [gh-release](https://www.npmjs.com/package/gh-release)\n  * [npm-check-updates](https://www.npmjs.com/package/npm-check-updates)\n  * [check-dependencies](https://www.npmjs.com/package/check-dependencies)\n  * [changed-log](https://www.npmjs.com/package/changed-log)\n  * [license-checker](https://www.npmjs.com/package/license-checker)\n* Convention\n  * Open Source\n    * README\n      * [Art of README](https://github.com/noffle/art-of-readme), [How To Write A Readme](http://jfhbrook.github.io/2011/11/09/readmes.html)\n      * [Top ten reasons why I won't use your open source project](https://changelog.com/posts/top-ten-reasons-why-i-wont-use-your-open-source-project)\n      * [Readme Driven Development](http://tom.preston-werner.com/2010/08/23/readme-driven-development.html)\n      * Template - [Common Readme](https://github.com/noffle/common-readme) / [Standard Readme](https://github.com/RichardLitt/standard-readme) / [Zalando's README Template](https://github.com/zalando/zalando-howto-open-source/blob/master/READMEtemplate.md)\n    * Changelog\n      * [Conventional Commits](https://conventionalcommits.org/)\n      * [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog)\n      * [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/)\n    * License\n      * [Choose an open source license](https://choosealicense.com/)\n  * SemVer\n    * [SemVer (Semantic Versioning)](http://semver.org/) / [The semantic versioner for npm](https://docs.npmjs.com/misc/semver) / [Semver: A Primer](https://nodesource.com/blog/semver-a-primer/)\n    * [npm semver calculator](https://semver.npmjs.com/)\n  * package.json\n    * [Specifics of npm's package.json](https://docs.npmjs.com/files/package.json)\n    * [Specifics of yarn's package.json](https://yarnpkg.com/en/docs/package-json)\n    * [What's the difference between dependencies, devDependencies and peerDependencies](http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies)\n  * Small Modules\n    * [Unix Philosophy and Node.js](http://blog.izs.me/post/48281998870/unix-philosophy-and-nodejs)\n    * [module best practices](https://github.com/mattdesl/module-best-practices)\n    * [how I write modules](http://substack.net/how_I_write_modules)\n    * Hyper Modular / One-line Modules\n      * [Small focused modules](https://github.com/sindresorhus/ama/issues/10#issuecomment-117766328)\n      * [Hyper Modular Packages: A Crazy Cult or a Reasonable Practice?](http://thefullstack.xyz/hyper-modular-packages-a-crazy-cult-or-a-reasonable-practice/)\n      * [In Defense of Hyper Modular JavaScript](https://medium.freecodecamp.com/in-defense-of-hyper-modular-javascript-33934c79e113)\n  * Isomorphic JS / Universal JS\n    * [Isomorphic JavaScript: The Future of Web Apps](https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc)\n    * [Universal JavaScript](https://medium.com/@mjackson/universal-javascript-4761051b7ae9)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Universal Utility Libraries\n\n* Standard Library Extensions\n  * Utilities\n    * [Lodash](https://lodash.com)\n    * [is.js](http://is.js.org/)\n  * FP\n    * [Ramda](http://ramdajs.com/)\n      * [ramda-fantasy](https://www.npmjs.com/package/ramda-fantasy)\n    * Immutable\n      * [immutability-helper](https://www.npmjs.com/package/immutability-helper) + [redux-immutable-state-invariant](https://www.npmjs.com/package/redux-immutable-state-invariant) / [redux-freeze](https://www.npmjs.com/package/redux-freeze)\n      * [icepick](https://www.npmjs.com/package/icepick) / [seamless-immutable](https://www.npmjs.com/package/seamless-immutable) / [dot-prop-immutable](https://www.npmjs.com/package/dot-prop-immutable) / [object-path-immutable](https://www.npmjs.com/package/object-path-immutable) / [timm](https://www.npmjs.com/package/timm) / [updeep](https://www.npmjs.com/package/updeep)\n      * [ImmutableJS](http://facebook.github.io/immutable-js/)\n  * OOP\n    * [lodash-decorators](https://www.npmjs.com/package/lodash-decorators)\n    * [Stampit](https://www.npmjs.com/package/stampit)\n  * Async\n    * Observable - [RxJS](https://www.npmjs.com/package/rxjs)\n    * Promise - [es6-promisify](https://www.npmjs.com/package/es6-promisify), [Bluebird](http://bluebirdjs.com/docs/features.html)\n    * Generator - [Co](https://www.npmjs.com/package/co)\n    * Callback - [Async](http://caolan.github.io/async/)\n  \u003c!-- * Concurrent / Parallel --\u003e\n  * Syntax\n    * [XRegExp](https://www.npmjs.com/package/xregexp)\n  * Node.js API\n    * [node-libs-browser](https://www.npmjs.com/package/node-libs-browser)\n    * [EventEmitter3](https://www.npmjs.com/package/eventemitter3)\n  * Debugging\n    * [debug](https://www.npmjs.com/package/debug) / [pino](https://www.npmjs.com/package/pino)\n* Hashing / Generating\n  * [uuid](https://www.npmjs.com/package/uuid) / [cuid](http://usecuid.org)\n  * [shortid](https://www.npmjs.com/package/shortid) / [punycode](https://www.npmjs.com/package/punycode) / [string-hash](https://www.npmjs.com/package/string-hash)\n  * [base64-js](https://www.npmjs.com/package/base64-js) / [sha.js](https://www.npmjs.com/package/sha.js) / [spark-md5](https://www.npmjs.com/package/spark-md5) / [crypto-js](https://www.npmjs.com/package/crypto-js) / [jsrsasign](https://www.npmjs.com/package/jsrsasign)\n* Parsing / Manipulating\n  * URL\n    * URL Parsing - [qs](https://www.npmjs.com/package/qs), [URI.js](https://github.com/medialize/URI.js)\n    * IP Address Manipulation - [ip](https://www.npmjs.com/package/ip)\n  * Environment\n    * UA Sniffing - [UAParser.js](https://github.com/faisalman/ua-parser-js) / [useragent](https://www.npmjs.com/package/useragent)\n    * Information - [platform.js](https://www.npmjs.com/package/platform)\n    * Runtime Detection - [is-electron-renderer](https://www.npmjs.com/package/is-electron-renderer) / [electron-is](https://www.npmjs.com/package/electron-is)\n  * Validator\n    * String Validation - [validator.js](https://github.com/chriso/validator.js)\n    * Schema Validation - [joi](https://www.npmjs.com/package/joi) / [Ajv](http://epoberezkin.github.io/ajv/)\n  * i18n\n    * [Intl.js](https://www.npmjs.com/package/intl) + [FormatJS](https://formatjs.io/guides/) / [i18next](https://www.i18next.com/)\n  * Date\n    * Date Manipulation - [Moment.js](http://momentjs.com)\n  * Numbers\n    * Number Manipulation - [Numeral.js](http://numeraljs.com/)\n    * Money - [accounting.js](http://openexchangerates.github.io/accounting.js/)\n  * Color\n    * Color Manipulation - [Chroma.js](http://gka.github.io/chroma.js/), [Chromatism](https://www.npmjs.com/package/chromatism), [randomColor](https://www.npmjs.com/package/randomcolor)\n    * Color Extraction - [node-vibrant](https://www.npmjs.com/package/node-vibrant) / [Colorify.js](http://colorify.rocks/)\n  * Text\n    * Text Manipulation - [Voca.js](https://vocajs.com) / [string.js](https://github.com/jprichardson/string.js)\n    * Characters - [string-width](https://www.npmjs.com/package/string-width), [string-length](https://www.npmjs.com/package/string-length)\n    * HTML Entities - [he](https://www.npmjs.com/package/he)\n    * Human-readable Slug - [speakingurl](https://www.npmjs.com/package/speakingurl)\n    * XSS Sanitizer - [DOMPurify](https://www.npmjs.com/package/dompurify) / [xss](https://www.npmjs.com/package/xss)\n    * HTTP - [mime-types](https://www.npmjs.com/package/mime-types), [content-type](https://www.npmjs.com/package/content-type)\n    * JSON Superset - [serialize-javascript](https://www.npmjs.com/package/serialize-javascript), [JSON5](https://www.npmjs.com/package/json5)\n    * Markdown - [marked](https://www.npmjs.com/package/marked) / [markdown-it](https://www.npmjs.com/package/markdown-it)\n      * [CommonMark](http://commonmark.org/), [A formal spec for GitHub Flavored Markdown](https://githubengineering.com/a-formal-spec-for-github-markdown/)\n    * Links Recognition - [linkify-it](https://www.npmjs.com/package/linkify-it)\n    * Language Detection - [franc](https://www.npmjs.com/package/franc)\n    * Text Differencing - [diff](https://www.npmjs.com/package/diff)\n    * JSON Differencing - [deep-diff](https://www.npmjs.com/package/deep-diff)\n    * Search - [Fuse.js](http://fusejs.io/) / [fuzzysearch](https://www.npmjs.com/package/fuzzysearch) / [Lunr.js](https://lunrjs.com) / [js-worker-search](https://www.npmjs.com/package/js-worker-search), [regexgen](https://www.npmjs.com/package/regexgen) / [escape-string-regexp](https://www.npmjs.com/package/escape-string-regexp)\n    * DSL Parser - [PEG.js](https://pegjs.org/) / [nearley](http://nearley.js.org/)\n  * Buffer / Blob\n    * Type Detection - [file-type](https://www.npmjs.com/package/file-type), [image-type](https://www.npmjs.com/package/image-type)\n    * Size Detection - [probe-image-size](https://www.npmjs.com/package/probe-image-size)\n    * Image Manipulation - [jimp](https://www.npmjs.com/package/jimp)\n      * Image Crop - [Smartcrop.js](https://www.npmjs.com/package/smartcrop)\n    * QR Code / Barcode - [qrcode](https://www.npmjs.com/package/qrcode) / [jsbarcode](https://www.npmjs.com/package/jsbarcode)\n* Logic\n  * Rate Limiter - [Bottleneck](https://www.npmjs.com/package/bottleneck) / [Limiter](https://www.npmjs.com/package/limiter)\n* Network\n  * HTTP / XHR\n    * Low-level - [Isomorphic Fetch](https://github.com/matthew-andrews/isomorphic-fetch)\n    * High-level\n      * Based on XHR - [Axios](https://www.npmjs.com/package/axios)\n      * Based on Fetch API - [hifetch](https://github.com/dexteryy/Project-WebCube/blob/master/packages/hifetch)\n    * GraphQL - [lokka](https://github.com/kadirahq/lokka)\n  * TCP\n    * [MQTT](https://www.npmjs.com/package/mqtt)\n  * UDP / P2P\n    * [Simple Peer](https://www.npmjs.com/package/simple-peer) / [JS SIP](https://www.npmjs.com/package/jssip)\n    * [WebTorrent](https://www.npmjs.com/package/webtorrent)\n* Storage\n  * File Database\n    * JSON - [Lowdb](https://www.npmjs.com/package/lowdb)\n  * IndexedDB / WebSQL / localStorage / Memory\n    * MongoDB API - [NeDB](https://www.npmjs.com/package/nedb)\n    * CouchDB API - [PouchDB](https://pouchdb.com)\n  * Realtime / P2P - [Gun](https://www.npmjs.com/package/gun), [ShareDB](https://www.npmjs.com/package/sharedb)\n* Computation\n  * [Math.js](http://mathjs.org/), [Simple Statistics](https://simplestatistics.org/), [ndarray](https://www.npmjs.com/package/ndarray), [bignumber.js](http://mikemcl.github.io/bignumber.js/)\n* NLP\n  * [compromise](https://github.com/nlp-compromise/compromise) / [talisman](http://yomguithereal.github.io/talisman/)\n* ML/DL\n  * [TensorFlow.js](https://js.tensorflow.org/)\n  * [MLJS](https://www.npmjs.com/package/ml), [Synaptic](https://www.npmjs.com/package/synaptic)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n## Universal Web Apps / Web Pages\n\n### GUI Framework\n\n* View / ViewModel / ViewController\n  * [React](https://facebook.github.io/react/)\n    * Learning\n      * Pete Hunt's [react-howto](https://github.com/petehunt/react-howto)\n      * [React - Basic Theoretical Concepts](https://github.com/reactjs/react-basic)\n      * [Under the hood: ReactJS](https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/)\n      * [SurviveJS React](https://survivejs.com/react/introduction/) / [React Express](http://www.react.express/)\n      * [React Cheat Sheet](https://reactcheatsheet.com/)\n      * Best Practices\n        * [React Bits](https://github.com/vasanthk/react-bits), [React in patterns](https://github.com/krasimir/react-in-patterns)\n        * [Functional UI and Components as Higher Order Functions](https://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/)\n      * Next Gen - [What is React Fiber?](https://gist.github.com/duivvv/2ba00d413b8ff7bc1fa5a2e51c61ba43), [React 16](https://github.com/facebook/react/issues/10294)\n    * Component Utilities\n      * [Recompose](https://github.com/acdlite/recompose)\n      * [React Display Name](https://www.npmjs.com/package/react-display-name)\n      * [React Side Effect](https://www.npmjs.com/package/react-side-effect)\n      * [React Komposer](https://www.npmjs.com/package/react-komposer)\n      * [React Loadable](https://www.npmjs.com/package/react-loadable)\n      * [React CSS Themr](https://www.npmjs.com/package/react-css-themr)\n    * Browser Utilities\n      * [React Event Listener](https://www.npmjs.com/package/react-event-listener)\n      * [React onClickOutside](https://www.npmjs.com/package/react-onclickoutside)\n      * [React Responsive](https://www.npmjs.com/package/react-responsive)\n      * [React Sizeme](https://www.npmjs.com/package/react-sizeme) / [React Dimensions](https://www.npmjs.com/package/react-dimensions)\n      * [React Portal](https://www.npmjs.com/package/react-portal) / [React Gateway](https://www.npmjs.com/package/react-gateway)\n      * [React Measure](https://www.npmjs.com/package/react-measure)\n      * [React Copy to clipboard](https://www.npmjs.com/package/react-copy-to-clipboard)\n      * [React Cookie](https://www.npmjs.com/package/react-cookie)\n    * Use React Alone\n      * [Redial](https://www.npmjs.com/package/redial) / [React Refetch](https://www.npmjs.com/package/react-refetch)\n      * [formik](https://www.npmjs.com/package/formik) / [Formsy React](https://www.npmjs.com/package/formsy-react)\n    * Lightweight Alternative\n      * [Preact](https://preactjs.com/) / [Inferno](https://infernojs.org/)\n  * [Angular](https://angular.io/)\n  * [Vue.js](https://vuejs.org/)\n  * Cross-framework\n    * [vuera](https://github.com/akxcv/vuera)\n* Model / App State\n  * [Redux](http://redux.js.org/)\n    * Learning\n      * [Notes of Dan Abramov's Redux course videos](https://github.com/tayiorbeii/egghead.io_redux_course_notes)\n      * [A cartoon intro to Redux](https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6)\n      * [Tic-Tac-Toe.js: redux pattern in plain JavaScript](http://ramonvictor.github.io/tic-tac-toe-js/)\n    * Reduce Boilerplate\n      * [redux-cube](https://github.com/dexteryy/Project-WebCube/tree/master/packages/redux-cube) (Author's own project)\n    * Connect\n      * [react-redux](https://www.npmjs.com/package/react-redux)\n      * [reselect](https://www.npmjs.com/package/reselect)\n    * Action Types, Action Creators, Reducer Switch\n      * [redux-actions](https://www.npmjs.com/package/redux-actions)\n      * [flux-standard-action](https://www.npmjs.com/package/flux-standard-action)\n      * [topologically-combine-reducers](https://www.npmjs.com/package/topologically-combine-reducers)\n    * Asnyc Actions\n      * [redux-thunk](https://www.npmjs.com/package/redux-thunk) + [redux-promise-middleware](https://www.npmjs.com/package/redux-promise-middleware) + [redux-debounced](https://www.npmjs.com/package/redux-debounced)\n      * [redux-observable](https://www.npmjs.com/package/redux-observable)\n      * [redux-saga](https://github.com/redux-saga/redux-saga)\n      * [redux-api-middleware](https://www.npmjs.com/package/redux-api-middleware) / [redux-axios-middleware](https://www.npmjs.com/package/redux-axios-middleware) / [redux-socket.io](http://npmjs.com/redux-socket.io)\n      * [redux-rest-resource](https://www.npmjs.com/package/redux-rest-resource)  / [redux-json-api](https://www.npmjs.com/package/redux-json-api) / [redux-api](https://www.npmjs.com/package/redux-api)\n    * State\n      * [normalizr](https://www.npmjs.com/package/normalizr)\n      * Immutalbe - see _[Universal Utility Libraries](#universal-utility-libraries) \u003e Standard Library Extensions \u003e FP \u003e Immutable_\n      * [redux-immutable](https://www.npmjs.com/package/redux-immutable)\n      * [redux-persist](https://www.npmjs.com/package/redux-persist)\n      * [redux-undo](https://www.npmjs.com/package/redux-undo)\n      * [redux-reset](https://www.npmjs.com/package/redux-reset)\n    * UI Patterns\n      * [redux-form](https://redux-form.com/)\n      * [react-block-ui](https://www.npmjs.com/package/react-block-ui) / [react-redux-loading-bar](https://www.npmjs.com/package/react-redux-loading-bar)\n      * [react-notification-system-redux](https://www.npmjs.com/package/react-notification-system-redux) / [react-redux-toastr](https://www.npmjs.com/package/react-redux-toastr)\n      * [redux-optimistic-ui](https://www.npmjs.com/package/redux-optimistic-ui)\n    * App Behaviours\n      * [redux-auth-wrapper](https://www.npmjs.com/package/redux-auth-wrapper)\n      * [react-intl-redux](https://www.npmjs.com/package/react-intl-redux)\n      * [Redux Search](https://www.npmjs.com/package/redux-search)\n    * Development\n      * [redux-devtools-extension](https://www.npmjs.com/package/redux-devtools-extension)\n      * [redux-logger](https://www.npmjs.com/package/redux-logger)\n      * Testing - see _[Testing](#testing) \u003e Web Testing \u003e Integration Testing_\n  * [MobX](https://mobx.js.org)\n  * [Baobab](https://www.npmjs.com/package/baobab) / [Freezer](https://www.npmjs.com/package/freezer-js)\n* API / Data Source\n  * [GraphQL](http://graphql.org/)\n    * Learning\n      * [Queries and Mutations](http://graphql.org/learn/queries/)\n      * Playground - [GraphQLHub](https://www.graphqlhub.com/), [Explore GraphQL](https://www.graphql.com/tutorials/)\n    * State Management\n      * [Apollo Client](https://www.apollographql.com/client/)\n      * [redux-source](https://github.com/dexteryy/Project-WebCube/tree/master/packages/redux-source) (Author's own project)\n    * [graphql-anywhere](https://www.npmjs.com/package/graphql-anywhere)\n    * [graphql-tools](http://dev.apollodata.com/tools/graphql-tools/index.html)\n* Offline First\n  * Learning\n    * [Designing Offline-First Web Apps](https://alistapart.com/article/offline-first)\n    * [Say Hello to Offline First](http://hood.ie/blog/say-hello-to-offline-first.html), \\\n      [Offline First and the Circle Of Web](http://hood.ie/blog/offline-first-and-the-circle-of-web.html), [Part II: Breaking the Circle](http://hood.ie/blog/offline-first-and-the-circle-of-web-part-ii-breaking-the-circle.html)\n* Routing\n  * [React Router](https://reacttraining.com/react-router/)\n  * [Connected React Router](https://github.com/supasate/connected-react-router)\n  * [React Helmet](https://www.npmjs.com/package/react-helmet)\n* i18n\n  * [React Intl](https://github.com/yahoo/react-intl) / [React i18next](https://react.i18next.com)\n  * [React Intl Redux](https://www.npmjs.com/package/react-intl-redux)\n* Monitoring / Error Capture\n  * [react-ga](https://www.npmjs.com/package/react-ga)\n  * [redux-segment](https://www.npmjs.com/package/redux-segment)\n  * [redux-raven-middleware](https://www.npmjs.com/package/redux-raven-middleware) / [raven-for-redux](https://www.npmjs.com/package/raven-for-redux)\n  * [redux-catch](https://www.npmjs.com/package/redux-catch)\n  * [redux-beacon](https://www.npmjs.com/package/redux-beacon)\n  * Services - see _[Tooling \u003e Workflow](#workflow) \u003e Monitoring_\n* Debugging\n  * [why-did-you-update](https://www.npmjs.com/package/why-did-you-update)\n* Server-side Rendering\n  * see _[Tooling \u003e Workflow](#workflow) \u003e Deployment \u003e Publishing App_\n* Static Web\n  * [JAMstack](https://jamstack.org/)\n  * see _[Tooling \u003e Workflow](#workflow) \u003e Deployment \u003e Publishing App_\n* Scaffold / Boilerplate / Generator\n  * [create-react-app](https://github.com/facebookincubator/create-react-app) / [angular-cli](https://cli.angular.io/) / [vue-cli](https://www.npmjs.com/package/vue-cli)\n  * [Next.js](https://github.com/zeit/next.js)\n  * [webcube](https://github.com/dexteryy/Project-WebCube) (Author's own project)\n  * [Starter Kits Recommended by the React Team](https://reactjs.org/community/starter-kits.html)\n  * [JavaScript Stack from Scratch](https://github.com/verekia/js-stack-from-scratch)\n  * Static Site Generator - [Gatsby](https://www.gatsbyjs.org/) / [Metalsmith](http://www.metalsmith.io/) / [Hexo](https://hexo.io/) / [Assemble](http://assemble.io/)\n* GUI Architectures\n  * Comparison\n    * [Scaling Isomorphic JavaScript Code](https://blog.nodejitsu.com/scaling-isomorphic-javascript-code/)\n    * [Comparison of Architecture presentation patterns MVP(SC),MVP(PV),PM,MVVM and MVC](https://www.codeproject.com/Articles/66585/Comparison-of-Architecture-presentation-patterns-M)\n    * [Unidirectional User Interface Architectures](https://staltz.com/unidirectional-user-interface-architectures.html)\n    * [Change And Its Detection In JavaScript Frameworks](http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html)\n    * [Martin Fowler's eaaDev](https://martinfowler.com/eaaDev/)\n  * [Patterns For Large-Scale JavaScript Application Architecture](https://addyosmani.com/largescalejavascript/)\n  * MVC - [A](https://alexatnet.com/model-view-controller-mvc-in-javascript/), [B](https://developer.mozilla.org/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture), [C](https://developer.chrome.com/apps/app_frameworks)\n  * [Understanding MVC And MVP (For JavaScript And Backbone Developers)](https://addyosmani.com/blog/understanding-mvc-and-mvp-for-javascript-and-backbone-developers/)\n  * [Understanding MVVM - A Guide For JavaScript Developers](https://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/)\n  * [Flux Concepts](https://github.com/facebook/flux/tree/master/examples/flux-concepts)\n    * [Flux - In Depth Overview](http://facebook.github.io/flux/docs/in-depth-overview.html)\n  * [Redux - Reinventing Flux - Interview with Dan Abramov](https://survivejs.com/blog/redux-interview/)\n  * [The Elm Architecture](https://guide.elm-lang.org/architecture/)\n  * [MVI (Model-View-Intent) in Cycle.js](https://cycle.js.org/model-view-intent.html)\n    * [What Developers Need to Know about MVI (Model-View-Intent)](https://thenewstack.io/developers-need-know-mvi-model-view-intent/)\n  * [SAM (State-Action-Model)](http://sam.js.org/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### UI Toolkits\n\n* CSS\n  * [Skeleton.css](http://getskeleton.com/)\n  * [Tachyons](http://tachyons.io/)\n  * [Bulma](http://bulma.io/)\n  * [Material Components for the web](https://github.com/material-components/material-components-web)\n  * [WeUI](https://github.com/weui/weui)\n  * [MJML](https://mjml.io/) / [Foundation for Emails 2](http://foundation.zurb.com/emails.html)\n* React\n  * [Reactstrap](https://reactstrap.github.io/) / [React Bootstrap](https://www.npmjs.com/package/react-bootstrap)\n  * [Material-UI](http://www.material-ui.com) / [React Toolbox](http://react-toolbox.com/)\n  * [Ant Design](https://ant.design/) / [Ant Design Mobile](https://mobile.ant.design/)\n  * [Rebass](http://jxnblk.com/rebass/)\n  * [Blueprint](http://blueprintjs.com/)\n  * [Semantic UI React](https://react.semantic-ui.com)\n  * [React Foundation](https://react.foundation/)\n  * [React WeUI](https://weui.github.io/react-weui/docs/)\n  * [React Desktop](http://reactdesktop.js.org/)\n  * [React Native Web](https://www.npmjs.com/package/react-native-web)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Standalone UI Components\n\n* Layout\n  * Grid - [React FlexBox Grid](http://roylee0704.github.io/react-flexbox-grid/)\n  * Masonry - [React Masonry Component](https://www.npmjs.com/package/react-masonry-component) / [masonry-layout](https://www.npmjs.com/package/masonry-layout) / [bricks.js](https://www.npmjs.com/package/bricks.js) / [Justified Layout](http://flickr.github.io/justified-layout/)\n  * Split - [React Split Pane](https://www.npmjs.com/package/react-split-pane) / [Split.js](http://nathancahill.github.io/Split.js/)\n  * Dashboard - [React Grid Layout](https://www.npmjs.com/package/react-grid-layout)\n* Icon\n  * [React Icons](https://www.npmjs.com/package/react-icons) / [Material Design Icons](http://google.github.io/material-design-icons/) / [Bytesize Icons](https://www.npmjs.com/package/bytesize-icons)\n* Progress\n  * [React Redux Loading Bar](https://www.npmjs.com/package/react-redux-loading-bar) / [NProgress](https://www.npmjs.com/package/nprogress)\n* Button\n  * [Buttons](http://unicorn-ui.com/buttons/)\n  * Indicators - [React Ladda](https://www.npmjs.com/package/react-ladda) / [Ladda](http://lab.hakim.se/ladda/) / [React Progress Button](https://www.npmjs.com/package/react-progress-button)\n* Accordion\n  * [React Collapse](https://www.npmjs.com/package/react-collapse) / [React Sanfona](https://www.npmjs.com/package/react-sanfona)\n* Picker\n  * [React Tabs](https://www.npmjs.com/package/react-tabs)\n  * [React Select](http://jedwatson.github.io/react-select/)\n  * [React Radio Group](https://www.npmjs.com/package/react-radio-group)\n  * [RC Slider](https://www.npmjs.com/package/rc-slider) / [React Slider](https://www.npmjs.com/package/react-slider) / [React Input Range](https://www.npmjs.com/package/react-input-range)\n  * [React Color](http://casesandberg.github.io/react-color/)\n  * [React Dates](https://www.npmjs.com/package/react-dates) / [React Datepicker](https://hacker0x01.github.io/react-datepicker/) / [React Day Picker](http://react-day-picker.js.org/) / [Pikaday](https://www.npmjs.com/package/pikaday) / [React Datetime](https://www.npmjs.com/package/react-datetime)\n* Input\n  * [React Toggle](https://www.npmjs.com/package/react-toggle)\n  * [React Input Autosize](https://www.npmjs.com/package/react-input-autosize), [React Textarea Autosize](https://www.npmjs.com/package/react-textarea-autosize)\n  * [React Tag Input](https://www.npmjs.com/package/react-tagsinput)\n  * [React Autosuggest](https://www.npmjs.com/package/react-autosuggest)\n  * Auto-formatting - [React MaskedInput](https://www.npmjs.com/package/react-maskedinput) / [React Text Mask](https://www.npmjs.com/package/react-text-mask) / [Cleave.js](https://www.npmjs.com/package/cleave.js)\n* Form\n  * [React JSON Schema Form](https://www.npmjs.com/package/react-jsonschema-form)\n* Overlay\n  * [React Modal](https://www.npmjs.com/package/react-modal) / [SweetAlert2](https://www.npmjs.com/package/sweetalert2) / [vex](https://www.npmjs.com/package/vex-js)\n  * [React Overlays](https://www.npmjs.com/package/react-overlays)\n  * [React Notification System](https://github.com/igorprado/react-notification-system) / [react-notification-system-redux](https://www.npmjs.com/package/react-notification-system-redux) /\\\n    [React Redux Toastr](https://www.npmjs.com/package/react-redux-toastr) / [React Notification](https://www.npmjs.com/package/react-notification) / [React sAlert](https://www.npmjs.com/package/react-s-alert) / [Notie](https://www.npmjs.com/package/notie)\n  * Drawer - [React Burger Menu](http://negomi.github.io/react-burger-menu/) / [React Sidebar](https://www.npmjs.com/package/react-sidebar) / [React Dock](https://www.npmjs.com/package/react-dock)\n  * [React ContextMenu](https://www.npmjs.com/package/react-contextmenu)\n  * [React Block UI](https://availity.github.io/react-block-ui/)\n* Content\n  * Carousel - [React Slick](https://www.npmjs.com/package/react-slick) / [Nuka Carousel](https://www.npmjs.com/package/nuka-carousel)\n  * [React Paginate](https://www.npmjs.com/package/react-paginate)\n  * [React Rating](https://www.npmjs.com/package/react-rating)\n  * List / Table - [React Virtualized](https://www.npmjs.com/package/react-virtualized) / [React Table](https://www.npmjs.com/package/react-table) / [React List](https://www.npmjs.com/package/react-list)\n  * Spreadsheet - [React Data Grid](http://adazzle.github.io/react-data-grid/) / [React Handsontable](https://www.npmjs.com/package/react-handsontable) / [React Datasheet](https://nadbm.github.io/react-datasheet/)\n  * TreeView - [React Treebeard](https://www.npmjs.com/package/react-treebeard) / [React TreeView](https://www.npmjs.com/package/react-treeview)\n  * JSON Viewer - [React JSON Tree](https://www.npmjs.com/package/react-json-tree)\n  * [React QR Code](https://www.npmjs.com/package/qrcode.react)\n  * Email Table - [Oy Vey](https://www.npmjs.com/package/oy-vey)\n* Editor\n  * [Draft.js](https://draftjs.org/)\n    * [Awesome Draft.js](https://github.com/nikgraf/awesome-draft-js)\n  * [Slate](https://github.com/ianstormtaylor/slate)\n  * [React Quill](https://www.npmjs.com/package/react-quill) / [Quill](https://quilljs.com/)\n  * [React Monaco Editor](https://www.npmjs.com/package/react-monaco-editor) / [React Ace](https://www.npmjs.com/package/react-ace) / [React Codemirror](https://www.npmjs.com/package/react-codemirror)\n    * [Monaco Editor](https://microsoft.github.io/monaco-editor/) / [Ace](https://ace.c9.io/) / [CodeMirror](https://codemirror.net/)\n  * [React Markdown](https://www.npmjs.com/package/react-markdown)\n  * [React Syntax Highlighter](https://www.npmjs.com/package/react-syntax-highlighter) / [Highlight.js](https://www.npmjs.com/package/highlight.js)\n* Widget\n  * [React Music](https://github.com/FormidableLabs/react-music)\n  * [React Big Calendar](https://www.npmjs.com/package/react-big-calendar)\n  * [React Image Gallery](https://www.npmjs.com/package/react-image-gallery)\n  * [React Google Maps](https://www.npmjs.com/package/react-google-maps) / [Google Map React](https://www.npmjs.com/package/google-map-react) / [React Map GL](https://www.npmjs.com/package/react-map-gl)\n  * [React Youtube](https://www.npmjs.com/package/react-youtube) / [React Player](https://www.npmjs.com/package/react-player)\n  * [Searchkit](http://www.searchkit.co/)\n  * [Redux Auth](https://github.com/lynndylanhurley/redux-auth)\n  * [SurveyJS](http://surveyjs.org/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n## Client Side\n\n### UX Libraries\n\n* Drag \u0026 Drop\n  * [React DnD](https://react-dnd.github.io/react-dnd) / [React Draggable](https://www.npmjs.com/package/react-draggable)\n  * [React Sortable HOC ](https://www.npmjs.com/package/react-sortable-hoc) / [Sortable](https://github.com/RubaXa/Sortable)\n  * [React Dropzone](https://www.npmjs.com/package/react-dropzone) / [DropzoneJS](http://www.dropzonejs.com/)\n  * [GSAP - Draggable](https://greensock.com/draggable)\n* Gesture\n  * [Hammer.js](http://hammerjs.github.io/) / [Interact.js](http://interactjs.io/) / [ZingTouch](https://zingchart.github.io/zingtouch/) / [AlloyFinger](https://github.com/AlloyTeam/AlloyFinger)\n    * [Gestures Patterns](https://material.io/guidelines/patterns/gestures.html)\n    * [React HammerJS](https://www.npmjs.com/package/react-hammerjs)\n  * [React Swipeable Views](https://github.com/oliviertassinari/react-swipeable-views) / [React Swipeable](https://www.npmjs.com/package/react-swipeable) / [Swiper](http://idangero.us/swiper)\n* Scrolling\n  * Viewport and Elements\n    * [React Waypoint](https://www.npmjs.com/package/react-waypoint) / [Waypoints](https://www.npmjs.com/package/waypoints), \\\n      [React ScrollMonitor](https://www.npmjs.com/package/scrollmonitor-react) / [ScrollMonitor](https://www.npmjs.com/package/scrollmonitor), \\\n      [React Visibility Sensor](https://www.npmjs.com/package/react-visibility-sensor)\n    * [React Sticky](https://www.npmjs.com/package/react-sticky)\n    * [React Headroom](https://www.npmjs.com/package/react-headroom) / [Headroom.js](https://www.npmjs.com/package/headroom.js)\n    * [React Infinite Scroller](https://www.npmjs.com/package/react-infinite-scroller) / [React Infinite](https://www.npmjs.com/package/react-infinite)\n    * [React Lazyload](https://www.npmjs.com/package/react-lazyload)\n  * [React Pull to Refresh](https://www.npmjs.com/package/react-pull-to-refresh)\n  * Smooth Scrolling - [React Scroll](https://www.npmjs.com/package/react-scroll)\n  * Scrollable - [React iScroll](https://www.npmjs.com/package/react-iscroll) / [iScroll](http://iscrolljs.com/) / [Zynga Scroller](http://zynga.github.io/scroller/)\n  * Scrollable Container - [React Custom Scrollbars](https://www.npmjs.com/package/react-custom-scrollbars) / [React Scroll Box](https://www.npmjs.com/package/react-scroll-box) / [React Scrollbar](https://www.npmjs.com/package/react-scrollbar) / [Overthrow](https://www.npmjs.com/package/fg-overthrow)\n* Zoom\n  * Image Loupe - [Drift](https://www.npmjs.com/package/drift-zoom) / [React Image Magnify](https://www.npmjs.com/package/react-image-magnify)\n  * Image Viewer - [React Images](https://www.npmjs.com/package/react-images) / [React Image Lightbox](https://www.npmjs.com/package/react-image-lightbox) / [LightGallery](https://www.npmjs.com/package/lightgallery.js) / [SmartPhoto](https://www.npmjs.com/package/smartphoto)\n* Crop\n  * [React Avatar Editor](https://www.npmjs.com/package/react-avatar-editor) / [React Image Crop](https://www.npmjs.com/package/react-image-crop) / [React Cropper](https://www.npmjs.com/package/react-cropper)\n* Resize\n  * [React Resizable](https://www.npmjs.com/package/react-resizable)\n  * [React RnD](https://www.npmjs.com/package/react-rnd)\n* Tooltip\n  * [Hint.css](http://kushagragour.in/lab/hint/)\n  * [React Tether](https://www.npmjs.com/package/react-tether) / [Tether.js](http://tether.io/) / [Popper.js](https://popper.js.org/), \\\n    [React Tooltip](https://www.npmjs.com/package/react-tooltip) / [Tether Tooltip](http://github.hubspot.com/tooltip/docs/welcome/) / [Tippy.js](https://atomiks.github.io/tippyjs/)\n* Tour\n  * [React Joyride](https://www.npmjs.com/package/react-joyride) / [Intro.js](http://introjs.com/) / [tether-shepherd](https://www.npmjs.com/package/tether-shepherd) / [Chardin.js](https://www.npmjs.com/package/chardin.js)\n* Accessiblity\n  * [React HotKeys](https://www.npmjs.com/package/react-hotkeys)\n  * [React A11y](https://www.npmjs.com/package/react-a11y)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Graphic Libraries\n\n* Animation\n  * Effects\n    * [Animate.css](https://daneden.github.io/animate.css/) / [Magic Animations](https://minimamente.com/example/magic_animations/) / [All Animation CSS3](http://all-animation.github.io/) / [Motion CSS](http://pavlyukpetr.com/awesome/) / [Effeckt.css](http://h5bp.github.io/Effeckt.css/) / [CSS3 Animation Cheat Sheet](http://justinaguilar.com/animations/index.html)\n      * [React Animations](https://www.npmjs.com/package/react-animations) / [Animate Components](https://www.npmjs.com/package/animate-components) / [rc-animate](https://www.npmjs.com/package/rc-animate)\n    * [Hover.css](http://ianlunn.github.io/Hover/)\n    * [Transformicons](http://www.transformicons.com/) / [Hamburgers](https://www.npmjs.com/package/hamburgers)\n    * Loading\n      * [Loaders.css](https://connoratherton.com/loaders) / [SpinKit](https://github.com/tobiasahlin/SpinKit) / [Spin.js](http://spin.js.org/)\n      * [React Spinkit](https://www.npmjs.com/package/react-spinkit) / [React Loaders](https://www.npmjs.com/package/react-loaders) / [Halogen](http://madscript.com/halogen/) / [React Spinjs](https://www.npmjs.com/package/react-spinjs)\n    * Queue\n      * [React FLIP Move](https://www.npmjs.com/package/react-flip-move) / [rc-queue-anim](https://www.npmjs.com/package/rc-queue-anim)\n    * Characters\n      * [React Typist](https://www.npmjs.com/package/react-typist) / [rc-texty](https://www.npmjs.com/package/rc-texty)\n      * [React CountUp](https://www.npmjs.com/package/react-countup) / [CountUp.js](https://www.npmjs.com/package/countup.js)\n  * Parallax / Scrolling\n    * [ScrollReveal.js](https://www.npmjs.com/package/scrollreveal) / [ScrollMagic](http://scrollmagic.io/) / [Rellax](https://www.npmjs.com/package/rellax)\n    * [rc-scroll-anim](https://www.npmjs.com/package/rc-scroll-anim) / [React Springy Parallax](https://www.npmjs.com/package/react-springy-parallax)\n    * Orientation - [Parallax](https://www.npmjs.com/package/parallax-js)\n  * Easing\n    * [d3-ease](https://www.npmjs.com/package/d3-ease) / [tween-functions](https://www.npmjs.com/package/tween-functions)\n    * [bezier-easing](https://www.npmjs.com/package/bezier-easing)\n  * Keyframe / Transition\n    * Style\n      * [Velocity.js](http://velocityjs.org/) / [Velocity React](https://www.npmjs.com/package/velocity-react) / [Dynamics.js](http://dynamicsjs.com/)\n      * [React Overdrive](https://www.npmjs.com/package/react-overdrive)\n    * Anything\n      * [Anime.js](http://anime-js.com/documentation/)  /  [React Anime](https://www.npmjs.com/package/react-anime)\n      * Between Shapes - [flubber](https://www.npmjs.com/package/flubber)\n      * Lightweight Tweening Engine - [shifty](https://www.npmjs.com/package/shifty) / [tween.js](https://github.com/tweenjs/tween.js/)\n      * [GSAP - TweenLite](https://greensock.com/tweenlite), [GSAP - TweenMax](https://greensock.com/tweenmax)\n  * Keyframe + Timeline\n    * Style\n      * [React Motion](https://www.npmjs.com/package/react-motion)\n        * [React Motion UI Pack](https://www.npmjs.com/package/react-motion-ui-pack)\n        * [React Router Transition](https://www.npmjs.com/package/react-router-transition)\n    * Anything\n      * [React Move](https://react-move.js.org)\n      * [GSAP - TimelineLite](https://greensock.com/timelinelite), [GSAP - TimelineMax](https://greensock.com/timelinemax)\n        * [React GSAP Enhancer](https://www.npmjs.com/package/react-gsap-enhancer)\n  * Motion / Curved Path\n    * SVG - [Vivus](http://maxwellito.github.io/vivus/)\n    * Shape - [mo-js](http://mojs.io/)\n    * [rc-tween-one](https://www.npmjs.com/package/rc-tween-one)\n* 2D\n  * Canvas\n    * [Pixi.js](http://www.pixijs.com/) / [Fabric.js](https://github.com/kangax/fabric.js)\n    * [React Pixi](https://reactpixi.org/) / [ReactPixiFiber](https://github.com/michalochman/react-pixi-fiber) / [React Konva](https://www.npmjs.com/package/react-konva)\n    * Isometric - [obelisk.js](https://www.npmjs.com/package/obelisk.js)\n    * Creative - [p5.js](https://www.npmjs.com/package/p5)\n    * Fonts - [opentype.js](https://opentype.js.org/)\n  * SVG\n    * [Snap.svg](http://snapsvg.io/) / [Raphaël](http://dmitrybaranovskiy.github.io/raphael/)\n  * Physics\n    * [Matter.js](http://brm.io/matter-js/)\n* 3D\n  * WebGL\n    * [Three.js](https://threejs.org/) / [React Three](https://github.com/Izzimach/react-three) / [React Three Renderer](https://github.com/toxicFork/react-three-renderer)\n    * [Babylon.js](http://www.babylonjs.com/)\n    * [stackgl](https://github.com/stackgl)\n    * [aframe-react](https://www.npmjs.com/package/aframe-react) / [A-Frame](https://aframe.io/)\n    * [React 360](https://facebook.github.io/react-360/)\n  * Physics\n    * [cannon.js](https://github.com/schteppe/cannon.js) / [ammo.js](https://github.com/kripken/ammo.js) / [oimo.js](https://github.com/lo-th/Oimo.js/)\n* Data Visualization\n  * [React Sparklines](https://borisyankov.github.io/react-sparklines/) / [React Trend](https://www.npmjs.com/package/react-trend) / [vx](https://vx-demo.now.sh/)\n  * [Recharts](http://recharts.org/) / [Victory](http://formidable.com/open-source/victory/)\n  * [ECharts](http://echarts.baidu.com) / [Highcharts (Commercial)](https://www.highcharts.com) / [React Highcharts](https://www.npmjs.com/package/react-highcharts) / [Google Charts](https://developers.google.com/chart/) / [React Google Charts](https://www.npmjs.com/package/react-google-charts)\n  * [Plotly.js](https://plot.ly/javascript/)\n  * [AntV G2](https://antv.alipay.com)\n  * [Chart.js](http://www.chartjs.org/) / [React ChartJS](https://www.npmjs.com/package/react-chartjs) / [Chartist.js](http://gionkunz.github.io/chartist-js)\n  * Graph - [Cytoscape.js](http://js.cytoscape.org/), [AntV G6](https://antv.alipay.com/g6/doc/index.html)\n  * [Timesheet.js](https://sbstjn.com/timesheet.js/), [Canvas Gauges](https://canvas-gauges.com)\n  * GIS - [Leaflet](http://leafletjs.com/), [Turf.js](http://turfjs.org/), [OpenLayers](https://openlayers.org/), [Cesium](https://www.npmjs.com/package/cesium)\n  * [D3.js](https://d3js.org/)\n    * Word Cloud - [d3-cloud](https://www.npmjs.com/package/d3-cloud)\n    * Constraint - [d3-force](https://www.npmjs.com/package/d3-force) / [cola.js](https://www.npmjs.com/package/webcola)\n    * [Awesome D3](https://github.com/wbkd/awesome-d3)\n* Game\n  * [React GameKit](https://www.npmjs.com/package/react-game-kit)\n  * [Phaser](https://www.npmjs.com/package/phaser)\n  * [voxel.js](http://voxeljs.com/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Hybrid Libraries\n\n* Electron\n  * Persistence\n    * [Electron Settings](https://www.npmjs.com/package/electron-settings)\n    * [Auto Launch](https://www.npmjs.com/package/auto-launch)\n    * [Electron Window State](https://www.npmjs.com/package/electron-window-state)\n    * [Electron LetsMove](https://www.npmjs.com/package/electron-lets-move)\n  * UI\n    * [Electron Window](https://www.npmjs.com/package/electron-window)\n    * [About Window](https://www.npmjs.com/package/about-window)\n    * [Electron Context Menu](https://www.npmjs.com/package/electron-context-menu)\n    * [Menubar](https://www.npmjs.com/package/menubar)\n  * Interaction\n    * [Electron Localshortcut](https://www.npmjs.com/package/electron-localshortcut)\n  * Debug\n    * [Electron Log](https://www.npmjs.com/package/electron-log)\n    * [Electron Debug](https://www.npmjs.com/package/electron-debug)\n* React Native\n  * UI Toolkits\n    * [NativeBase](https://www.npmjs.com/package/native-base)\n    * [React Native Elements](https://www.npmjs.com/package/react-native-elements)\n  * Standalone UI Components\n    * [Vector Icons](https://www.npmjs.com/package/react-native-vector-icons)\n    * [Loading Spinner Overlay](https://www.npmjs.com/package/react-native-loading-spinner-overlay) / [SpinKit](https://www.npmjs.com/package/react-native-spinkit)\n    * [Progress](https://www.npmjs.com/package/react-native-progress)\n    * [Button](https://www.npmjs.com/package/react-native-button)\n    * [Tabs](https://www.npmjs.com/package/react-native-tabs)\n    * [Drawer](https://www.npmjs.com/package/react-native-drawer)\n    * [Modalbox](https://www.npmjs.com/package/react-native-modalbox)\n    * [DatePicker](https://www.npmjs.com/package/react-native-datepicker)\n    * [Maps](https://www.npmjs.com/package/react-native-maps)\n  * UX\n    * [React Navigation](https://www.npmjs.com/package/react-navigation) / [Navigation](https://www.npmjs.com/package/react-native-navigation)\n    * [Push Notification](https://www.npmjs.com/package/react-native-push-notification) / [OneSignal](https://www.npmjs.com/package/react-native-onesignal)\n    * [Parsed Text](https://www.npmjs.com/package/react-native-parsed-text)\n    * [Swiper](https://www.npmjs.com/package/react-native-swiper)\n    * [TabView](https://www.npmjs.com/package/react-native-tab-view) / [Scrollable TabView](https://www.npmjs.com/package/react-native-scrollable-tab-view)\n    * [Invertible Scroll View](https://www.npmjs.com/package/react-native-invertible-scroll-view), [Gifted Chat](https://www.npmjs.com/package/react-native-gifted-chat)\n    * [Keyboard Spacer](https://www.npmjs.com/package/react-native-keyboard-spacer)\n  * Access\n    * [Device Info](https://www.npmjs.com/package/react-native-device-info)\n    * [Permissions](https://www.npmjs.com/package/react-native-permissions)\n    * [Keychain](https://www.npmjs.com/package/react-native-keychain)\n    * [Config](https://www.npmjs.com/package/react-native-config)\n    * [Image Picker](https://www.npmjs.com/package/react-native-image-picker) / [Image Crop Picker](https://www.npmjs.com/package/react-native-image-crop-picker)\n    * [Filesystem](http://npmjs.com/react-native-fs)\n    * [Communications](https://www.npmjs.com/package/react-native-communications)\n  * Graphic\n    * [SVG](https://www.npmjs.com/package/react-native-svg)\n    * [Blur](https://www.npmjs.com/package/react-native-blur)\n    * [Animatable](https://www.npmjs.com/package/react-native-animatable)\n    * [Lottie](https://www.npmjs.com/package/lottie-react-native)\n  * Media\n    * [Video](https://www.npmjs.com/package/react-native-video)\n    * [Camera](https://www.npmjs.com/package/react-native-camera)\n    * [Sound](http://npmjs.com/react-native-sound)\n  * Storage\n    * [Realm](https://www.npmjs.com/package/realm)\n    * [Simple Store](https://www.npmjs.com/package/react-native-simple-store)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n## Server Side\n\n### Network\n\n* HTTP\n  * Intro\n    * [An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview), \\\n      [Introduction to HTTP](https://launchschool.com/books/http)\n    * [Evolution of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)\n    * [Identifying resources on the Web](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web) / \\\n      [Understanding URIs](http://medialize.github.io/URI.js/about-uris.html)\n    * [Architecture of the World Wide Web: Identification](https://www.w3.org/TR/webarch/#identification)\n    * [MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_Types)\n    * [HTTP Messages](https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages)\n    * [Connection management in HTTP/1.x](https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x)\n    * [Redirections in HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections)\n  * Reference\n    * [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)\n    * [HTTP response status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) / [httpstatuses.com](https://httpstatuses.com/)\n  * [Same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)\n    * [HTTP access control (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) / [Using CORS](https://www.html5rocks.com/en/tutorials/cors/)\n    * Content Security Policy (CSP) - [Google](https://developers.google.com/web/fundamentals/security/csp/) / [Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)\n  * Performance\n    * [High Performance Browser Networking](https://hpbn.co/), \\\n      [Ideal HTTP Performance](https://www.mnot.net/blog/2016/04/22/ideal-http)\n    * HTTP Caching - [Google](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching), [Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching)\n    * [Compression in HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Compression)\n  * HTTPS\n    * [Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)\n    * [Is TLS Fast Yet?](https://istlsfastyet.com/) / [HTTP vs HTTPS Test](https://www.httpvshttps.com/)\n    * [HTTP Strict-Transport-Security (HSTS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)\n    * [What Is Mixed Content?](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content), [Preventing Mixed Content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content)\n  * HTTP/2\n    * [http2 explained](https://www.gitbook.com/book/bagder/http2-explained/details) / \\\n      [Introduction to HTTP/2](https://developers.google.com/web/fundamentals/performance/http2/)\n    * [HTTP/2 FAQ](https://http2.github.io/faq/)\n    * [A Comprehensive Guide To HTTP/2 Server Push](https://www.smashingmagazine.com/2017/04/guide-http2-server-push/)\n  * [gRPC](http://www.grpc.io/docs/quickstart/node.html)\n    * [What is gRPC?](http://www.grpc.io/docs/guides/)\n    * [Protocol Buffers](https://developers.google.com/protocol-buffers/)\n* TCP\n  * [Writing WebSocket servers](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers)\n* UDP\n  * [QUIC](https://www.chromium.org/quic)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Server-side Best Practices\n\n* SaaS\n  * [The Twelve-Factor App](https://12factor.net/)\n* Restful API\n  * Heroku's [HTTP API Design Guide](https://geemus.gitbooks.io/http-api-design/content/en/), \\\n    Microsoft's [API Design Best Practices](https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design), [REST API Guidelines](https://github.com/Microsoft/api-guidelines/blob/master/Guidelines.md), \\\n    [Best Practices for Designing a Pragmatic RESTful API](http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api), \\\n    [Principles of good RESTful API Design](https://codeplanet.io/principles-good-restful-api-design/)\n  * [REST API Error Codes 101](http://blog.restcase.com/rest-api-error-codes-101/)\n  * [Introducing JSON](http://json.org/)\n* Microservices\n  * [A pattern language for microservices](http://microservices.io/patterns/index.html)\n    * [Microservice Architecture](http://microservices.io/patterns/microservices.html), [Monolithic Architecture](http://microservices.io/patterns/monolithic.html)\n    * Decompose by [business capability](http://microservices.io/patterns/decomposition/decompose-by-business-capability.html), [subdomain](http://microservices.io/patterns/decomposition/decompose-by-subdomain.html)\n    * [Service instance per container](http://microservices.io/patterns/deployment/service-per-container.html), [Service deployment platform](http://microservices.io/patterns/deployment/service-deployment-platform.html)\n    * [Externalized configuration](http://microservices.io/patterns/externalized-configuration.html), [Microservice chassis](http://microservices.io/patterns/microservice-chassis.html)\n    * Service discovery ([Server-side](http://microservices.io/patterns/server-side-discovery.html), [Client-side](http://microservices.io/patterns/client-side-discovery.html)), [Service registry](http://microservices.io/patterns/service-registry.html), [Remote Procedure Invocation](http://microservices.io/patterns/communication-style/rpi.html)\n    * [Database per service](http://microservices.io/patterns/data/database-per-service.html), [Shared database](http://microservices.io/patterns/data/shared-database.html)\n  * [Microservices: From Design to Deployment](https://www.nginx.com/blog/introduction-to-microservices/)\n  * [Microservices Resource Guide](https://martinfowler.com/microservices/)\n  * API Gateway\n    * [Pattern: API Gateway / Backend for Front-End](http://microservices.io/patterns/apigateway.html)\n    * [Why an API Gateway?](https://www.nginx.com/blog/microservices-api-gateways-part-1-why-an-api-gateway/)\n    * [Moving from REST to GraphQL](https://medium.com/@frikille/moving-from-rest-to-graphql-e3650b6f5247) / [From REST to GraphQL](https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b) / [GraphQL vs. REST](https://dev-blog.apollodata.com/graphql-vs-rest-5d425123e34b)\n    * [Serverless and GraphQL: A Perfect Match for the New Cloud Paradigm](https://thenewstack.io/serverless-graphql-perfect-match-new-cloud-paradigm/)\n  * Serverless\n    * [Pattern: Serverless deployment](http://microservices.io/patterns/deployment/serverless-deployment.html)\n    * [Microservices without the Servers](https://aws.amazon.com/blogs/compute/microservices-without-the-servers/)\n    * [The Next Layer of Abstraction in Cloud Computing is Serverless](https://read.acloud.guru/iaas-paas-serverless-the-next-big-deal-in-cloud-computing-34b8198c98a2)\n    * [The essential guide to serverless technologies and architectures](https://techbeacon.com/essential-guide-serverless-technologies-architectures), \\\n      [An essential guide to the serverless ecosystem](https://techbeacon.com/essential-guide-serverless-ecosystem)\n    * [Serverless Architecture: Five Design Patterns](https://thenewstack.io/serverless-architecture-five-design-patterns/), \\\n      [Serverless Code Patterns](https://serverless.com/blog/serverless-architecture-code-patterns/)\n* Cloud / Distributed\n  * Architecture\n    * [AWS Well-Architected](https://aws.amazon.com/architecture/well-architected/)\n    * Azure's Cloud Fundamentals - [Architecture styles](https://docs.microsoft.com/en-us/azure/architecture/guide/architecture-styles/), [Pillars of software quality](https://docs.microsoft.com/en-us/azure/architecture/guide/pillars), [Design principles](https://docs.microsoft.com/en-us/azure/architecture/guide/design-principles/index)\n  * Static\n    * [Static Content Hosting](https://docs.microsoft.com/en-us/azure/architecture/patterns/static-content-hosting), [Valet Key](https://docs.microsoft.com/en-us/azure/architecture/patterns/valet-key), [Content Delivery Network](https://docs.microsoft.com/en-us/azure/architecture/best-practices/cdn)\n  * Queue / Jobs\n    * [Queue-Based Load Leveling](https://docs.microsoft.com/en-us/azure/architecture/patterns/queue-based-load-leveling), [Competing Consumers](https://docs.microsoft.com/en-us/azure/architecture/patterns/competing-consumers), [Priority Queue](https://docs.microsoft.com/en-us/azure/architecture/patterns/priority-queue)\n    * [Background jobs](https://docs.microsoft.com/en-us/azure/architecture/best-practices/background-jobs)\n  * Decompose\n    * [Federated Identity](https://docs.microsoft.com/en-us/azure/architecture/patterns/federated-identity)\n    * [Pipes and Filters](https://docs.microsoft.com/en-us/azure/architecture/patterns/pipes-and-filters)\n    * [Compute Resource Consolidation](https://docs.microsoft.com/en-us/azure/architecture/patterns/compute-resource-consolidation)\n  * Configuration\n    * [External Configuration Store](https://docs.microsoft.com/en-us/azure/architecture/patterns/external-configuration-store), [Runtime Reconfiguration](https://docs.microsoft.com/en-us/azure/architecture/patterns/runtime-reconfiguration)\n  * Storage / Querying\n    * [Cache-Aside](https://docs.microsoft.com/en-us/azure/architecture/patterns/cache-aside), [Caching](https://docs.microsoft.com/en-us/azure/architecture/best-practices/caching)\n    * [CQRS](https://docs.microsoft.com/en-us/azure/architecture/patterns/cqrs), [Event Sourcing](https://docs.microsoft.com/en-us/azure/architecture/patterns/event-sourcing)\n    * [Index Table](https://docs.microsoft.com/en-us/azure/architecture/patterns/index-table), [Materialized View](https://docs.microsoft.com/en-us/azure/architecture/patterns/materialized-view)\n    * [Data partitioning](https://docs.microsoft.com/en-us/azure/architecture/best-practices/data-partitioning), [Sharding](https://docs.microsoft.com/en-us/azure/architecture/patterns/sharding)\n  * [Resiliency](https://docs.microsoft.com/en-us/azure/architecture/resiliency/) / [Availability](https://docs.microsoft.com/en-us/azure/architecture/checklist/availability)\n    * [Retry](https://docs.microsoft.com/en-us/azure/architecture/patterns/retry), [Circuit Breaker](https://docs.microsoft.com/en-us/azure/architecture/patterns/circuit-breaker), [Transient fault handling](https://docs.microsoft.com/en-us/azure/architecture/best-practices/transient-faults)\n    * [Compensating Transaction](https://docs.microsoft.com/en-us/azure/architecture/patterns/compensating-transaction)\n    * [Health Endpoint Monitoring](https://docs.microsoft.com/en-us/azure/architecture/patterns/health-endpoint-monitoring), [Leader Election](https://docs.microsoft.com/en-us/azure/architecture/patterns/leader-election), [Scheduler Agent Supervisor](https://docs.microsoft.com/en-us/azure/architecture/patterns/scheduler-agent-supervisor)\n    * [The Reactive Manifesto](http://www.reactivemanifesto.org/)\n  * Multitenant\n    * [Manage Identity in Multitenant Applications](https://docs.microsoft.com/en-us/azure/architecture/multitenant-identity/)\n* Old-fashioned Web Hosting / Non-distributed\n  * [Ultimate Guide to Web Hosting](http://www.whoishostingthis.com/resources/web-hosting/) / [Web Hosting Beginner Guide](http://www.webhostingsecretrevealed.net/web-hosting-beginner-guide/)\n* Authentication / Authorization\n  * [Cookies vs Tokens: The Definitive Guide](https://auth0.com/blog/cookies-vs-tokens-definitive-guide/), \\\n    [The Ins and Outs of Token Based Authentication](https://scotch.io/tutorials/the-ins-and-outs-of-token-based-authentication)\n  * [Introduction to JSON Web Tokens](https://jwt.io/introduction/)\n  * [An Introduction to OAuth 2](https://www.digitalocean.com/community/tutorials/an-introduction-to-oauth-2), [Understanding OAuth2](http://www.bubblecode.net/en/2016/01/22/understanding-oauth2/)\n    * [The OAuth Bible](http://oauthbible.com/)\n  * [Tokens used by Auth0](https://auth0.com/docs/tokens)\n    * [Understanding Refresh Tokens](https://auth0.com/learn/refresh-tokens/)\n  * [How To Safely Store A Password](https://codahale.com/how-to-safely-store-a-password/), \\\n    [You Wouldn't Base64 a Password - Cryptography Decoded](https://paragonie.com/blog/2015/08/you-wouldnt-base64-a-password-cryptography-decoded), \\\n    [How to securely hash passwords?](https://security.stackexchange.com/a/31846)\n  * [Weak Signature Algorithm](https://developer.mozilla.org/en-US/docs/Web/Security/Weak_Signature_Algorithm)\n* Security\n  * [Security Guide for Developers](https://github.com/FallibleInc/security-guide-for-developers)\n    * [Understanding CSRF](https://github.com/pillarjs/understanding-csrf), [CSRF Demystified](http://www.gnucitizen.org/blog/csrf-demystified/)\n    * [Cross-site Scripting (XSS) Attack](https://www.acunetix.com/websitesecurity/cross-site-scripting/)\n  * [OWASP Top Ten Cheat Sheet](https://www.owasp.org/index.php/OWASP_Top_Ten_Cheat_Sheet)\n  * [WebAppSec/Secure Coding Guidelines](https://wiki.mozilla.org/WebAppSec/Secure_Coding_Guidelines)\n  * [Node.js Security Checklist](https://blog.risingstack.com/node-js-security-checklist/)\n  * Tools - see _[Tooling \u003e Testing](#testing) \u003e Analysis_\n* Logging / Monitoring\n  * [Logging The Ultimate Guide](https://www.loggly.com/ultimate-guide/category/node/)\n  * [The Definitive Guide for Monitoring Node.js Applications](https://blog.risingstack.com/monitoring-nodejs-applications-nodejs-at-scale/)\n  * [Monitoring and diagnostics](https://docs.microsoft.com/en-us/azure/architecture/best-practices/monitoring)\n  * Tools - see _[Tooling \u003e Workflow](#workflow) \u003e Monitoring_\n* DevOps\n  * [Deployments Best Practices](http://guides.beanstalkapp.com/deployments/best-practices.html)\n  * [Start your DevOps journey](https://www.atlassian.com/devops/start-your-journey)\n  * [The Practical DevOps Playbook](https://www.shippable.com/devops-playbook.html)\n  * Tools - see _[Tooling \u003e Workflow](#workflow) \u003e Deployment \u003e DevOps_\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Microservices / API Services (Node.js)\n\n* Frameworks\n  * RESTful API\n    * Middleware Framework\n      * [Express](http://expressjs.com/) / [Koa](http://koajs.com/)\n      * Express Middlewares\n        * Logger\n          * [morgan](https://www.npmjs.com/package/morgan), [express-winston](https://www.npmjs.com/package/express-winston), [errorhandler](https://www.npmjs.com/package/errorhandler), [response-time](https://www.npmjs.com/package/response-time)\n        * HTTP Parser\n          * [body-parser](https://www.npmjs.com/package/body-parser), [multer](https://www.npmjs.com/package/multer), [raw-body](https://www.npmjs.com/package/raw-body), [cookie-parser](https://www.npmjs.com/package/cookie-parser)\n        * HTTP Headers and Verbs\n          * [cors](https://www.npmjs.com/package/cors), [method-override](https://www.npmjs.com/package/method-override)\n        * Performance\n          * [compression](https://www.npmjs.com/package/compression) , [connect-timeout](https://www.npmjs.com/package/connect-timeout)\n        * Security\n          * [helmet](https://www.npmjs.com/package/helmet), [express-validator](https://www.npmjs.com/package/express-validator)\n        * Auth\n          * [express-jwt](https://www.npmjs.com/package/express-jwt) / [passport.js](http://passportjs.org/)\n        * Proxy\n          * [http-proxy-middleware](https://www.npmjs.com/package/http-proxy-middleware) / [rocky](https://www.npmjs.com/package/rocky)\n        * GraphQL\n          * [apollo-server-express](https://www.apollographql.com/docs/apollo-server/servers/express.html) / [express-graphql](https://www.npmjs.com/package/express-graphql)\n    * Rich Framework\n      * Configuration - [Hapi](https://hapijs.com/)\n      * Realtime - [Feathers](https://feathersjs.com/)\n  * Microservices\n    * [Micro](https://www.npmjs.com/package/micro) / [Seneca](http://senecajs.org/) / [StdLib](https://stdlib.com/)\n  * Serverless\n    * [Serverless Framework](https://github.com/serverless/serverless)\n    * [IronFunctions](https://github.com/iron-io/functions)\n  * Bots\n    * [Botkit](https://www.npmjs.com/package/botkit)\n* GraphQL\n  * [Schemas and Types](http://graphql.org/learn/schema/)\n    * [GraphQL Schema Language Cheat Sheet](https://wehavefaces.net/graphql-shorthand-notation-cheatsheet-17cd715861b6)\n  * [The Fullstack Tutorial for GraphQL](https://www.howtographql.com/)\n  * Server\n    * [Apollo Server](https://www.apollographql.com/docs/apollo-server/)\n    * [graphql-tools](http://dev.apollodata.com/tools/graphql-tools/index.html)\n  * Resolvers\n    * [graphql-resolvers](https://github.com/lucasconstantino/graphql-resolvers)\n* DocGen + CodeGen\n  * [API Blueprint](https://apiblueprint.org/) / [Swagger](http://swagger.io/) / [RAML](http://raml.org/)\n    * Parser - [Protagonist](https://www.npmjs.com/package/protagonist) / [Drafter](https://www.npmjs.com/package/drafter)\n      * Renderer - [Aglio](https://www.npmjs.com/package/aglio)\n    * Validator - [Dredd](https://www.npmjs.com/package/dredd)\n  * [JSON Schema](http://json-schema.org/)\n    * [Understanding JSON Schema](https://spacetelescope.github.io/understanding-json-schema/)\n    * [JSON Schema Based Editor](https://github.com/jdorn/json-editor)\n  * See _[Tooling \u003e Documentation](#documentation)_\n* Scaffold / Boilerplate / Generator\n  * [Nodal](https://github.com/keithwhor/nodal)\n  * [Fuge](http://fuge.io/)\n  * [Botpress](https://github.com/botpress/botpress)\n  * [nodecube](https://github.com/dexteryy/Project-WebCube) (Author's own project)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Server-side Libraries (Node.js)\n\n* Configuration\n  * [dotenv](https://www.npmjs.com/package/dotenv)\n  * [jsonfile](https://www.npmjs.com/package/jsonfile)\n* Debugging\n  * [winston](https://www.npmjs.com/package/winston)\n  * [verror](https://www.npmjs.com/package/verror)\n  * [longjohn](https://www.npmjs.com/package/longjohn), [stackman](https://www.npmjs.com/package/stackman)\n  * [why-is-node-running](https://www.npmjs.com/package/why-is-node-running)\n* Protocols\n  * [form-data](https://www.npmjs.com/package/form-data), [formidable](https://www.npmjs.com/package/formidable)\n  * [iconv-lite](https://www.npmjs.com/package/iconv-lite)\n* Network\n  * WebSocket - [ws](https://www.npmjs.com/package/ws) / [Socket.IO](https://www.npmjs.com/package/socket.io) / [Engine.IO](https://www.npmjs.com/package/engine.io) / [SockJS-node](https://www.npmjs.com/package/sockjs)\n  * Server-Sent Event - [faye-websocket](https://www.npmjs.com/package/faye-websocket)\n  * HTTP/2 - [spdy](https://www.npmjs.com/package/spdy)\n  * gRPC - [grpc](https://www.npmjs.com/package/grpc)\n  * AMQP - [amqplib](https://www.npmjs.com/package/amqplib)\n  * [download](https://www.npmjs.com/package/download)\n  * Email - [Nodemailer](https://nodemailer.com/)\n    * Email HTML - [mailgen](https://www.npmjs.com/package/mailgen)\n* Crypto\n  * [hasha](https://www.npmjs.com/package/hasha)\n  * [md5](https://www.npmjs.com/package/md5)\n  * [bcrypt](https://www.npmjs.com/package/bcrypt)\n* Auth\n  * JWT - [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)\n  * [passwordless](https://passwordless.net/)\n  * [oauth](https://www.npmjs.com/package/oauth)\n  * OAuth Providers - [hello.js](http://adodson.com/hello.js/) / [grant](https://www.npmjs.com/package/grant)\n  * [svg-captcha](https://github.com/lemonce/svg-captcha)\n* Storage\n  * NOSQL\n    * Redis Client - [ioredis](https://github.com/luin/ioredis)\n    * MongoDB ORM - [Mongooose](http://mongoosejs.com/)\n    * DynamoDB ORM - [vogels](https://www.npmjs.com/package/vogels)\n    * HBase Client - [hbase](https://www.npmjs.com/package/hbase)\n  * RDS\n    * RDS ORM - [Sequelize](http://docs.sequelizejs.com/)\n    * SQL Builder - [Knex.js](http://knexjs.org/)\n* Jobs\n  * Parallel - [webworker-threads](https://www.npmjs.com/package/webworker-threads)\n  * Queue - [kue](https://www.npmjs.com/package/kue) / [bull](https://www.npmjs.com/package/bull)\n  * Scheduler - [node-schedule](https://www.npmjs.com/package/node-schedule)\n* Scraping\n  * HTML Traversing - [cheerio](https://www.npmjs.com/package/cheerio), [jsdom](https://www.npmjs.com/package/jsdom)\n  * HTML Parsing - [parse5](http://inikulin.github.io/parse5/index.html) / [htmlparser2](https://www.npmjs.com/package/htmlparser2)\n  * Extract Article - [read-art](https://www.npmjs.com/package/read-art) / [node-readability](https://www.npmjs.com/package/node-readability)\n  * Extract Metadata - [url-unshort](https://www.npmjs.com/package/url-unshort) / [embedza](https://www.npmjs.com/package/embedza)\n  * Web Crawler - [simplecrawler](https://www.npmjs.com/package/simplecrawler) / [x-ray](https://www.npmjs.com/package/x-ray) / [scrape-it](https://www.npmjs.com/package/scrape-it) / [Headless Chrome Crawler](https://github.com/yujiosaka/headless-chrome-crawler)\n  * Headless Browsers Automation - see _[Tooling \u003e Testing](#testing) \u003e Web Testing \u003e Functional Testing \u003e Headless Browser Automation_\n* Images\n  * Canvas / WebGL API - [node-canvas](https://www.npmjs.com/package/canvas) / [gl](https://www.npmjs.com/package/gl)\n  * Image Manipulation - [gm](https://www.npmjs.com/package/gm) / [sharp](http://sharp.dimens.io/)\n  * Capture Screenshots - [pageres](https://github.com/sindresorhus/pageres)\n  * QR Code / Barcode - [qr-image](https://www.npmjs.com/package/qr-image)\n  * Computer Vision - [tracking.js](https://trackingjs.com) / [opencv](https://www.npmjs.com/package/opencv)\n* Parsing / Generating\n  * Text - [unified](https://www.npmjs.com/package/unified)\n    * Markdown - [remark](http://remark.js.org/)\n  * [PDFKit](https://www.npmjs.com/package/pdfkit)\n  * [csv](https://www.npmjs.com/package/csv)\n  * [xml2js](https://www.npmjs.com/package/xml2js)\n* NLP\n  * [natural](https://github.com/NaturalNode/natural) / [retext](https://github.com/wooorm/retext) / [NodeJieba](https://github.com/yanyiwu/nodejieba)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Cloud Services (Global)\n\n* Compute\n  * FaaS / Serverless / WebHook\n    * [AWS Lambda](https://aws.amazon.com/lambda/) / [Google Cloud Functions](https://cloud.google.com/functions/)\n    * [webtask](https://webtask.io/) / [hook.io](https://hook.io/)\n    * [Graphcool Functions](https://www.graph.cool/docs/reference/functions/overview-boo6uteemo/)\n    * [Amazon API Gateway](https://aws.amazon.com/api-gateway/)\n  * PaaS\n    * See _[Tooling \u003e Workflow](#workflow) \u003e Deployment \u003e DevOps \u003e PaaS_\n  * CaaS\n    * [Amazon ECS](https://aws.amazon.com/ecs/) / [Google Container Engine](https://cloud.google.com/container-engine/)\n* Storage\n  * Object Storage\n    * [Amazon S3](https://aws.amazon.com/s3/) / [Google Cloud Storage](https://cloud.google.com/storage/)\n    * [imgix](https://www.imgix.com)\n  * DBaaS\n    * In-Memory Key-Value NoSQL - [Amazon ElastiCache](https://aws.amazon.com/elasticache/)\n      * Redis - [Compose](https://www.compose.com/redis) / [Redise Cloud](https://redislabs.com/products/redis-cloud/) / [Heroku Redis](https://www.heroku.com/redis)\n    * Document NoSQL - [Amazon DynamoDB](https://aws.amazon.com/dynamodb/) / [Google Cloud Datastore](https://cloud.google.com/datastore/)\n      * MongoDB - [Compose](https://www.compose.com/mongodb) / [mLab](https://mlab.com/) / [MongoDB Atlas](https://www.mongodb.com/cloud/atlas)\n      * CouchDB - [Couchbase](https://www.couchbase.com/products/server) / [Cloudant](https://www.ibm.com/analytics/us/en/technology/cloud-data-services/cloudant/)\n    * Wide Column NoSQL - [Google Bigtable](https://cloud.google.com/bigtable/)\n    * SQL - [Amazon RDS](https://aws.amazon.com/rds/) / [Google Cloud SQL](https://cloud.google.com/sql/)\n      * PostgreSQL - [Compose](https://www.compose.com/postgresql) / [Heroku Postgres](https://www.heroku.com/postgres)\n      * MySQL - [Compose](https://www.compose.com/mysql)\n    * NewSQL - [Google Cloud Spanner](https://cloud.google.com/spanner/)\n    * Queue - [Amazon SQS](https://aws.amazon.com/sqs/) / [Amazon Kinesis](https://aws.amazon.com/kinesis/) / [Google Cloud Pub/Sub](https://cloud.google.com/pubsub/)\n      * Kafka - [Heroku Kafka](https://www.heroku.com/kafka)\n      * RabbitMQ - [Compose](https://www.compose.com/rabbitmq)\n    * Analytics - [Amazon CloudSearch](https://aws.amazon.com/cloudsearch/)\n      * Elasticsearch - [Amazon Elasticsearch Service](https://aws.amazon.com/elasticsearch-service/) / [Elastic Cloud](https://www.elastic.co/cloud) / [Bonsai](https://bonsai.io/)\n    * Warehouse - [Amazon Redshift](https://aws.amazon.com/redshift/) / [Google BigQuery](https://cloud.google.com/bigquery/)\n* BaaS\n  * CRUD\n    * Realtime\n      * [Firebase Realtime Database](https://firebase.google.com/products/database/)\n    * GraphQL\n      * [Graphcool](https://www.graph.cool/) / [Scaphold](https://scaphold.io/)\n    * CMS\n      * [WordPress.com REST API](https://developer.wordpress.com/docs/api/) / [Contentful](https://www.contentful.com/) / [DatoCMS](https://www.datocms.com/) / [GraphCMS](https://graphcms.com/) / [Baasic](http://www.baasic.com/)\n  * Auth\n    * [Auth0](https://auth0.com/) / [Amazon Cognito](https://aws.amazon.com/cognito/) / [Firebase Authentication](https://firebase.google.com/products/auth/)\n    * [OAuth.io](https://oauth.io/)\n    * CAPTCHA\n      * [reCAPTCHA](https://www.google.com/recaptcha/)\n  * Search - [Algolia](https://www.algolia.com/)\n  * Email - [SendGrid](https://sendgrid.com/) / [Mailgun](https://www.mailgun.com/) / [Mandrill](http://www.mandrill.com/) / [Amazon SES](https://aws.amazon.com/ses/)\n  * SMS - [Nexmo](https://www.nexmo.com/) / [Twilio](https://www.twilio.com/) / [Amazon SNS](https://aws.amazon.com/sns/)\n  * Payment - [Stripe](https://stripe.com/)\n  * Maps - [Mapbox](https://www.mapbox.com/)\n  * Customer Support - [Intercom](https://developers.intercom.com/) / [Zendesk](https://developer.zendesk.com/)\n  * IM - [Discord](https://discordapp.com/developers/)\n  * Form - [Typeform.io](http://docs.typeform.io/) / [Form.io](https://form.io/)\n* AIaaS / BDaaS\n  * Natural Language\n    * NLP - [Google Natural Language API](https://cloud.google.com/natural-language/)\n    * Speech Recognition / Speech Synthesis\n      * [Amazon Lex](https://aws.amazon.com/lex/) / [Google Cloud Speech API](https://cloud.google.com/speech/)\n      * [Amazon Polly](https://aws.amazon.com/polly/)\n    * Translation - [Google Cloud Translation API](https://cloud.google.com/translate/)\n  * Computer Vision\n    * [Amazon Rekognition](https://aws.amazon.com/rekognition/) / [Google Cloud Vision API](https://cloud.google.com/vision/)\n    * [Google Cloud Video Intelligence API](https://cloud.google.com/video-intelligence/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Cloud Services (China)\n\n\u003e The evil twins inside [the Great Firewall of China](https://github.com/dexteryy/spellbook-of-modern-webdev/pull/4)\n\n* Compute\n  * FaaS / Serverless / WebHook\n    * [阿里云-函数计算](https://www.aliyun.com/product/fc) / [腾讯云-无服务器云函数 SCF](https://www.qcloud.com/product/scf)\n    * [阿里云-API 网关](https://www.aliyun.com/product/apigateway)\n  * PaaS\n    * See _[Tooling \u003e Workflow](#workflow) \u003e Deployment \u003e DevOps \u003e PaaS_\n  * CaaS\n    * [阿里云-容器服务](https://www.aliyun.com/product/containerservice) / [腾讯云-容器服务 CCS](https://www.qcloud.com/product/ccs) / [DaoCloud](https://www.daocloud.io/dcs)\n* Storage\n  * Object Storage\n    * [阿里云-对象存储 OSS](https://www.aliyun.com/product/oss) / [腾讯云-对象存储 COS](https://www.qcloud.com/product/cos)\n  * DBaaS\n    * In-Memory Key-Value NoSQL\n      * Redis - [阿里云-云数据库 Redis 版](https://www.aliyun.com/product/kvstore) / [腾讯云-云存储 Redis](https://www.qcloud.com/product/crs)\n    * Document NoSQL\n      * MongoDB - [阿里云-云数据库 MongoDB版](https://www.aliyun.com/product/mongodb) / [腾讯云-文档数据库 MongoDB](https://www.qcloud.com/product/mongodb)\n    * Wide Column NoSQL - [阿里云-表格存储 OTS](https://www.aliyun.com/product/ots)\n      * HBase - [阿里云-云数据库 HBase 版](https://cn.aliyun.com/product/hbase) / [腾讯云-列式数据库 HBase](https://www.qcloud.com/product/HBase)\n    * SQL\n      * PostgreSQL - [阿里云-云数据库 PostgreSQL 版](https://www.aliyun.com/product/rds/postgresql) / [腾讯云-云数据库 CDB for PostgreSQL](https://www.qcloud.com/product/postgresql)\n      * MySQL - [阿里云-云数据库 MySQL 版](https://www.aliyun.com/product/rds/mysql) / [腾讯云-云数据库 CDB for MySQL](https://www.qcloud.com/product/cdb)\n    * Queue - [阿里云-消息服务 MNS](https://www.aliyun.com/product/mns) / [腾讯云-消息服务 CMQ](https://www.qcloud.com/product/cmq)\n      * Kafka - [腾讯云-消息服务 CKAFKA](https://www.qcloud.com/product/CKafka)\n    * Analytics - [阿里云-开放搜索 OpenSearch](https://www.aliyun.com/product/opensearch) / [腾讯云搜 TCS](https://www.qcloud.com/product/tcs)\n    * Warehouse - [阿里云-MaxCompute (ODPS)](https://www.aliyun.com/product/odps) / [腾讯云-大数据处理套件TBDS](https://www.qcloud.com/product/tbds)\n* BaaS\n  * CRUD\n    * [LeanCloud-数据存储](https://leancloud.cn/docs/storage_overview.html)\n    * Realtime\n      * [野狗-实时通信引擎](https://www.wilddog.com/product/sync-overview) / [LeanCloud-实时通信](https://leancloud.cn/docs/realtime_v2.html)\n  * Auth\n    * [野狗-身份认证](https://www.wilddog.com/product/auth-overview)\n    * CAPTCHA\n      * [极验](http://www.geetest.com/) / [腾讯云-验证码服务 YY](https://www.qcloud.com/product/yy)\n  * Search -\n  * Email - [阿里云-邮件推送](https://www.aliyun.com/product/directmail) / [SendCloud](http://sendcloud.sohu.com/)\n  * SMS - [阿里云-短信服务](https://www.aliyun.com/product/sms) / [腾讯云-短信 SMS](https://www.qcloud.com/product/sms) / [云片](https://www.yunpian.com/) / [野狗-短信](https://www.wilddog.com/product/message-overview)\n  * Payment - [Ping++](https://www.pingxx.com/products)\n  * Maps - [高德开放平台](https://lbs.amap.com/getting-started/map/) / [百度地图开放平台](http://lbsyun.baidu.com/)\n  * Customer Support - [美洽](https://meiqia.com/) / [微金小云客服](https://www.qcloud.com/product/ICS)\n  * IM - [野狗-即时通讯](https://www.wilddog.com/product/im-overview) / [腾讯云-云通信 IM](https://www.qcloud.com/product/im)\n  * Form - [金数据](https://help.jinshuju.net/articles/api-intro)\n* AIaaS / BDaaS\n  * Natural Language\n    * NLP\n      * [腾讯云-文智自然语言处理 NLP](https://www.qcloud.com/product/nlp)\n      * [阿里云-机器学习PAI-文本分析](https://help.aliyun.com/document_detail/42747.html)\n    * Speech Recognition / Speech Synthesis\n      * [阿里云-智能语音交互](https://data.aliyun.com/product/nls) / [腾讯云-智能语音服务 AAI](https://www.qcloud.com/product/aai)\n    * Translation - [腾讯云-机器翻译](https://www.qcloud.com/product/tmt)\n  * Computer Vision\n    * [腾讯云-万象优图 CI](https://www.qcloud.com/product/ci)\n    * [阿里云-印刷文字识别](https://data.aliyun.com/product/ocr)\n  * Graphs / Networks / Clusters\n    * [阿里云-推荐引擎](https://data.aliyun.com/product/re) / [腾讯云-云推荐引擎 CRE](https://www.qcloud.com/product/cre)\n    * [阿里云-关系网络分析](https://data.aliyun.com/product/graphanalytics)\n    * [阿里云-机器学习PAI-网络分析](https://help.aliyun.com/document_detail/42750.html)\n  * Persona\n    * [阿里云-画像分析](https://data.aliyun.com/product/porana) / [腾讯云-智能推荐 IR](https://www.qcloud.com/product/ir)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n## Tooling\n\n### Testing\n\n* Unit Testing / Test Runner\n  * [Jest](https://facebook.github.io/jest/)\n  * [AVA](https://github.com/avajs/ava)\n  * [Mocha](https://mochajs.org/) + [Chai](http://chaijs.com/)\n  * [Cypress](https://www.cypress.io/)\n  * [Karma](https://karma-runner.github.io)\n* Web Testing\n  * Integration Testing\n    * Components - [Enzyme](http://airbnb.io/enzyme/)\n    * Reducers\n      * [redux-test-utils](https://www.npmjs.com/package/redux-test-utils) + [enzyme-redux](https://www.npmjs.com/package/enzyme-redux)\n      * [redux-testkit](https://www.npmjs.com/package/redux-testkit)\n  * Functional Testing / E2E Testing\n    * Headless Browser Automation\n      * DevTools API\n        * Headless Chrome - [Puppeteer](https://github.com/GoogleChrome/puppeteer) / [Chromy](https://www.npmjs.com/package/chromy)\n          * [End-to-end Tests that Don’t Suck with Puppeteer](https://ropig.com/blog/end-end-tests-dont-suck-puppeteer/)\n          * AWS Lambda - [Chromeless](https://www.npmjs.com/package/chromeless)\n        * electron-prebuilt - [Nightmare](https://github.com/segmentio/nightmare)\n      * WebDriver API - [Selenium WebDriverJS](https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs) / [WebDriverIO](http://webdriver.io/) / [Nightwatch.js](http://nightwatchjs.org/) / [CasperJS](http://casperjs.org/) / [Protractor](http://www.protractortest.org/)\n          * AWS Lambda - [Lambdium](https://github.com/smithclay/lambdium)\n    * Cloud - [BrowserStack Automate](https://www.browserstack.com/automate) / [Sauce Labs](https://saucelabs.com/open-source#automated-testing-platform)\n  * Visual Testing\n    * [React Storybook](https://storybooks.js.org/) / [React Cosmos](https://github.com/react-cosmos/react-cosmos)\n    * [BrowserStack](https://www.browserstack.com/)\n  * Monkey Testing\n    * [gremlins.js](https://www.npmjs.com/package/gremlins.js)\n  * Headless Browsers\n    * Browsers\n      * Chromium - [Headless Chrome/Chromium](https://developers.google.com/web/updates/2017/04/headless-chrome)\n      * Chromium + Node.js - [electron-prebuilt](https://www.npmjs.com/package/electron)\n      * WebKit - [PhantomJS](http://phantomjs.org/)\n        * [Why you should stop using PhantomJS](https://blog.phantombuster.com/why-you-should-stop-using-phantomjs-f5c5f2717209)\n      * Gecko - [SlimerJS](https://slimerjs.org/)\n    * In-memory X11 Display Server\n      * [xvfb](https://en.wikipedia.org/wiki/Xvfb) - [xvfb-run](http://manpages.ubuntu.com/manpages/trusty/man1/xvfb-run.1.html) / [headless](https://www.npmjs.com/package/headless)\n    * Docker\n      * [lighthouse-ci/builder/Dockerfile.headless](https://github.com/ebidel/lighthouse-ci/blob/master/builder/Dockerfile.headless#L16)\n      * [electron-headless](https://hub.docker.com/r/dannysu/electron-headless/~/dockerfile/)\n* Server-side Testing\n  * Functional Testing\n    * [supertest](https://www.npmjs.com/package/supertest)\n  * Load Testing\n    * [k6](https://k6.io/)\n    * [loadtest](https://www.npmjs.com/package/loadtest)\n* Benchmark Testing\n  * JS\n    * [Benchmark.js](https://benchmarkjs.com/)\n    * [Speedracer](https://github.com/ngryman/speedracer)\n    * [stats.js](https://github.com/mrdoob/stats.js)\n  * Network\n    * [wrk](https://github.com/wg/wrk) / [httpstat](https://github.com/reorx/httpstat)\n* [Test Doubles](https://martinfowler.com/bliki/TestDouble.html) ([Fakes, Mocks, Stubs](https://dev.to/milipski/test-doubles---fakes-mocks-and-stubs) and Spies)\n  * Fake Data\n    * [Faker.js](https://github.com/Marak/Faker.js) / [Chance.js](http://chancejs.com/)\n    * [JSON Schema Faker](https://www.npmjs.com/package/json-schema-faker)\n    * [placeholder.com](https://placeholder.com/)\n  * HTTP Mocking - [Nock](https://www.npmjs.com/package/nock)\n  * Monkey Patching - [Mockery](https://www.npmjs.com/package/mockery), [babel-plugin-rewire](https://www.npmjs.com/package/babel-plugin-rewire)\n  * [SinonJS](http://sinonjs.org/) / [testdouble.js](https://www.npmjs.com/package/testdouble)\n    * [Best Practices for Spies, Stubs and Mocks in Sinon.js](https://semaphoreci.com/community/tutorials/best-practices-for-spies-stubs-and-mocks-in-sinon-js)\n    * [testdouble.js vs. sinon.js](http://blog.testdouble.com/posts/2016-03-13-testdouble-vs-sinon.html)\n* Analysis\n  * Code Coverage\n    * [Istanbul](https://istanbul.js.org/)\n  * Software Complexity\n    * [escomplex](https://www.npmjs.com/package/escomplex) / [complexity-report](https://www.npmjs.com/package/complexity-report)\n  * Node.js Security\n    * [nsp](https://www.npmjs.com/package/nsp) / [snyk](https://www.npmjs.com/package/snyk)\n      * [NSP Advisories](https://nodesecurity.io/advisories/) / [Snyk - Vulnerability DB](https://snyk.io/vuln/)\n  * Web Page\n    * [Lighthouse](https://developers.google.com/web/tools/lighthouse/) / [pwmetrics](https://github.com/paulirish/pwmetrics)\n    * [PageSpeed Insights](https://developers.google.com/speed/pagespeed/)\n    * [Varvy SEO tool](https://varvy.com/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Documentation\n\n* JS\n  * [JSDoc3](http://usejsdoc.org/) + [documentation.js](http://documentation.js.org/) / [jsdox](http://jsdox.org/) / [dox](https://www.npmjs.com/package/dox)\n  * [ESDoc](https://esdoc.org/)\n  * [React DocGen](https://www.npmjs.com/package/react-docgen)\n* API\n  * [apiDoc](http://apidocjs.com/)\n  * [GraphQL Voyager](https://github.com/APIs-guru/graphql-voyager)\n* CLI\n  * [Ronn](http://rtomayko.github.io/ronn/)\n  * [Docopt](http://docopt.org/)\n* Style Guide\n  * Markdown + JSX - [docz](https://www.docz.site/)\n  * JS - [Storybook](https://storybook.js.org/)\n  * JS comments - [React Styleguidist](https://react-styleguidist.js.org/)\n  * CSS comments - [KSS (Knyle Style Sheets)](http://warpspire.com/kss/)\n    * [kss-node](http://kss-node.github.io/kss-node/)\n    * [SC5 Style Guide Generator](http://styleguide.sc5.io/)\n* Writing\n  * Static Web Generator - [GitBook](https://www.npmjs.com/package/gitbook) / [ReadMe](https://readme.io/)\n  * Client-side Rendering - [Docute](https://docute.js.org) / [Docsify](https://docsify.js.org)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Toolchain\n\n* Compiler / Transpiler / Preprocessor\n  * [Babel](https://babeljs.io)\n    * [Setting up ES6](https://leanpub.com/setting-up-es6/read)\n    * [Babel User Handbook](https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/user-handbook.md), [Babel Plugin Handbook](https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/plugin-handbook.md)\n    * Presets\n      * [Preset Env](https://babeljs.io/docs/en/next/babel-preset-env.html)\n        * [Browserslist](https://github.com/ai/browserslist)\n      * [Preset React](http://babeljs.io/docs/plugins/preset-react/)\n      * [React Optimize](https://github.com/thejameskyle/babel-react-optimize)\n    * Plugins\n      * Proposals\n        * [Babel progress on ECMAScript proposals](https://github.com/babel/proposals)\n        * Shims - [@babel/polyfill](https://github.com/babel/babel/tree/master/packages/babel-polyfill) ([useBuiltIns](https://babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins)) / [core-js](https://github.com/zloirock/core-js)\n          * async/await - [fast-async](https://github.com/MatAtBread/fast-async) ([NoDent](https://www.npmjs.com/package/nodent))\n        * [Stage 3](http://babeljs.io/docs/plugins/preset-stage-3/), [Stage 2](http://babeljs.io/docs/plugins/preset-stage-2/), [Stage 1](http://babeljs.io/docs/plugins/preset-stage-1/), [Stage 0](http://babeljs.io/docs/plugins/preset-stage-0/)\n          * [Class properties](http://babeljs.io/docs/plugins/transform-class-properties/)\n          * [Object rest spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/)\n          * [Legacy Decorator](https://www.npmjs.com/package/babel-plugin-transform-decorators-legacy) / [Stage 2 Decorators](http://babeljs.io/docs/plugins/transform-decorators/)\n          * Dynamic Import- [Syntax](https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import),  [For Node.js](https://www.npmjs.com/package/babel-plugin-dynamic-import-node)\n          * [Optional Chaining Operator](https://www.npmjs.com/package/babel-plugin-transform-optional-chaining)\n      * Node.js\n        * [add-module-exports](https://github.com/59naga/babel-plugin-add-module-exports)\n        * [Root Import](https://github.com/entwicklerstube/babel-plugin-root-import) / [Webpack Alias](https://www.npmjs.com/package/babel-plugin-webpack-alias)\n      * React\n        * [JSX Control Statements](https://www.npmjs.com/package/jsx-control-statements)\n        * [React CSS Modules](https://github.com/gajus/babel-plugin-react-css-modules)\n      * Libraries\n        * [lodash](https://www.npmjs.com/package/babel-plugin-lodash), [ramda](https://www.npmjs.com/package/babel-plugin-ramda)\n      * Optimization\n        * [transform-remove-console](https://www.npmjs.com/package/babel-plugin-transform-remove-console)\n  * [TypeScript](http://www.typescriptlang.org/)\n    * [TypeScript: the missing introduction](https://jameshenry.blog/typescript-the-missing-introduction/)\n  * [PostCSS](https://github.com/postcss/postcss)\n    * Standards\n      * [Autoprefixer](https://github.com/postcss/autoprefixer)\n      * [CSSNext](http://cssnext.io/) / [postcss-preset-env](https://preset-env.cssdb.org/)\n      * [Will Change](https://www.npmjs.com/package/postcss-will-change)\n      * [Normalize](https://www.npmjs.com/package/postcss-normalize)\n    * Utilities\n      * [Utility Library](https://www.npmjs.com/package/postcss-utilities), [Rucksack](http://simplaio.github.io/)\n      * [LostGrid](http://lostgrid.org/)\n      * [Quantity Queries](https://github.com/pascalduez/postcss-quantity-queries)\n      * [Easing Gradients](https://www.npmjs.com/package/postcss-easing-gradients)\n      * [Pxtorem](https://www.npmjs.com/package/postcss-pxtorem)\n      * [Brand Colors](https://www.npmjs.com/package/postcss-brand-colors) / [Nippon Color](https://www.npmjs.com/package/postcss-nippon-color) / [Google Color](https://www.npmjs.com/package/postcss-google-color)\n      * [Contrast](https://www.npmjs.com/package/postcss-contrast) / [Get Color](https://www.npmjs.com/package/postcss-get-color)\n    * Assets\n      * [Assets](https://www.npmjs.com/package/postcss-assets)\n      * [Inline SVG](https://www.npmjs.com/package/postcss-inline-svg), [SVGO](https://www.npmjs.com/package/postcss-svgo)\n      * [Font Magician](https://www.npmjs.com/package/postcss-font-magician)\n    * Syntax\n      * [PreCSS](https://www.npmjs.com/package/precss)\n      * [SCSS Parser](https://www.npmjs.com/package/postcss-scss)\n      * [JS](https://www.npmjs.com/package/postcss-js)\n  * [node-sass](https://www.npmjs.com/package/node-sass)\n  * [PostHTML](https://www.npmjs.com/package/posthtml)\n* Loader / Builder / Bundler\n  * [Webpack](https://webpack.js.org/concepts/)\n    * [webpack-howto](https://github.com/petehunt/webpack-howto)\n      * [SurviveJS Webpack](https://survivejs.com/webpack/what-is-webpack/)\n      * [webpack-blocks](https://github.com/andywer/webpack-blocks)\n    * Loaders\n      * [babel-loader](https://www.npmjs.com/package/babel-loader), [ts-loader](https://www.npmjs.com/package/ts-loader) / [awesome-typescript-loader](https://www.npmjs.com/package/awesome-typescript-loader), [vue-loader](https://www.npmjs.com/package/vue-loader)\n        * [imports-loader](https://www.npmjs.com/package/imports-loader)\n          * [Granular Shimming](https://webpack.js.org/guides/shimming/#granular-shimming)\n        * [exports-loader](https://webpack.js.org/loaders/exports-loader/)\n          * [Global Exports](https://webpack.js.org/guides/shimming/#global-exports)\n      * [css-loader](https://www.npmjs.com/package/css-loader), [style-loader](https://www.npmjs.com/package/style-loader) / [isomorphic-style-loader](https://www.npmjs.com/package/isomorphic-style-loader)\n        * [postcss-loader](https://www.npmjs.com/package/postcss-loader), [scss-loader](https://www.npmjs.com/package/sass-loader), [less-loader](https://www.npmjs.com/package/less-loader)\n        * [resolve-url-loader](https://www.npmjs.com/package/resolve-url-loader)\n      * [workerize-loader](https://www.npmjs.com/package/workerize-loader) / [worker-loader](https://www.npmjs.com/package/worker-loader)\n      * [raw-loader](https://www.npmjs.com/package/raw-loader)\n        * [html-loader](https://www.npmjs.com/package/html-loader)\n          * [markdown-loader](https://www.npmjs.com/package/markdown-loader) / [handlebars-loader](https://www.npmjs.com/package/handlebars-loader)\n        * [shader-loader](https://www.npmjs.com/package/shader-loader) / [glslify-loader](https://www.npmjs.com/package/glslify-loader)\n      * [image-webpack-loader](https://www.npmjs.com/package/image-webpack-loader) / [img-loader](https://www.npmjs.com/package/img-loader)\n      * [svg-react-loader](https://www.npmjs.com/package/svg-react-loader), [react-markdown-loader](https://www.npmjs.com/package/react-markdown-loader)\n      * [url-loader](https://www.npmjs.com/package/url-loader), [svg-url-loader](https://www.npmjs.com/package/svg-url-loader)\n      * [file-loader](https://www.npmjs.com/package/file-loader)\n      * [thread-loader](https://www.npmjs.com/package/thread-loader), [cache-loader](https://www.npmjs.com/package/cache-loader), [val-loader](https://www.npmjs.com/package/val-loader)\n    * Plugins\n      * [Extract Text Plugin](https://www.npmjs.com/package/extract-text-webpack-plugin), [Webpack Manifest Plugin](https://www.npmjs.com/package/webpack-manifest-plugin)\n      * [Copy Webpack Plugin](https://github.com/kevlened/copy-webpack-plugin), [Clean Webpack Plugin](https://www.npmjs.com/package/clean-webpack-plugin)\n      * [HTML Webpack Plugin](https://www.npmjs.com/package/html-webpack-plugin)\n        * [HTML Webpack Template](https://github.com/jaketrent/html-webpack-template)\n        * Plugins\n          * [Favicons](https://www.npmjs.com/package/favicons-webpack-plugin)\n          * [Harddisk](https://www.npmjs.com/package/html-webpack-harddisk-plugin)\n          * [Inline Source](https://www.npmjs.com/package/html-webpack-inline-source-plugin), [Preload](https://www.npmjs.com/package/preload-webpack-plugin)\n          * [Include Assets](https://www.npmjs.com/package/html-webpack-include-assets-plugin) + [Exclude Assets](https://www.npmjs.com/package/html-webpack-exclude-assets-plugin)\n          * [Inline Chunk Manifest](https://www.npmjs.com/package/inline-chunk-manifest-html-webpack-plugin)\n      * [Define Plugin](https://webpack.js.org/plugins/define-plugin/) / [Environment Plugin](https://webpack.js.org/plugins/environment-plugin/)\n      * [Provide Plugin](https://webpack.js.org/plugins/provide-plugin/)\n        * [Shimming Global](https://webpack.js.org/guides/shimming/)\n      * [Ignore Plugin](https://webpack.js.org/plugins/ignore-plugin/), [Watch Ignore Plugin](https://webpack.js.org/plugins/watch-ignore-plugin/)\n      * [Module Concatenation Plugin](https://webpack.js.org/plugins/module-concatenation-plugin/), [Lodash Plugin](https://www.npmjs.com/package/lodash-webpack-plugin)\n      * [UglifyJS Webpack Plugin](https://www.npmjs.com/package/uglifyjs-webpack-plugin) / [Babel Minify Webpack Plugin](https://www.npmjs.com/package/babel-minify-webpack-plugin)\n      * [Workbox Webpack Plugins](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin), [Offline Plugin](https://www.npmjs.com/package/offline-plugin)\n      * [Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)\n      * [Fork TS Checker Webpack Plugin](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin), [HappyPack](https://www.npmjs.com/package/happypack)\n  * [Rollup](https://rollupjs.org/)\n    * [Webpack and Rollup: the same but different](https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c)\n* Formatter\n  * ESLint with autofix feature - see Static Analysis\n  * [Prettier](https://www.npmjs.com/package/prettier)\n    * [prettier-eslint](https://www.npmjs.com/package/prettier-eslint)\n  * Codemod - [Effective JavaScript Codemods](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb)\n    * [jscodeshift](https://www.npmjs.com/package/jscodeshift)\n    * [react-codemod](https://www.npmjs.com/package/react-codemod)\n    * [Recast](https://www.npmjs.com/package/recast)\n  * [stylefmt](https://www.npmjs.com/package/stylefmt)\n* Static Analysis\n  * [ESLint](http://eslint.org/)\n    * [ESLint Rules](http://eslint.org/docs/rules/)\n      * [eslint-index](https://www.npmjs.com/package/eslint-index), [eslint-find-rules](https://www.npmjs.com/package/eslint-find-rules)\n    * Plugins\n      * [prettier](https://www.npmjs.com/package/eslint-plugin-prettier)\n      * [babel](https://www.npmjs.com/package/babel-eslint), [import](https://www.npmjs.com/package/eslint-plugin-import), [eslint-comments](https://www.npmjs.com/package/eslint-plugin-eslint-comments), [unicorn](https://www.npmjs.com/package/eslint-plugin-unicorn), [no-use-extend-native](https://www.npmjs.com/package/eslint-plugin-no-use-extend-native)\n      * [filenames](https://www.npmjs.com/package/eslint-plugin-filenames)\n        * [eslint-import-resolver-webpack](https://www.npmjs.com/package/eslint-import-resolver-webpack)\n      * [compat](https://www.npmjs.com/package/eslint-plugin-compat)\n      * [node](https://www.npmjs.com/package/eslint-plugin-node), [security](https://www.npmjs.com/package/eslint-plugin-security)\n      * [react](https://www.npmjs.com/package/eslint-plugin-react), [jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y), [graphql](https://www.npmjs.com/package/eslint-plugin-graphql), [mongodb](https://www.npmjs.com/package/eslint-plugin-mongodb)\n      * [jsdoc](https://www.npmjs.com/package/eslint-plugin-jsdoc), [flowtype](https://github.com/gajus/eslint-plugin-flowtype)\n      * [jest](https://www.npmjs.com/package/eslint-plugin-jest), [ava](https://www.npmjs.com/package/eslint-plugin-ava), [mocha](https://www.npmjs.com/package/eslint-plugin-mocha), [chai-expect](https://www.npmjs.com/package/eslint-plugin-chai-expect)\n      * [fp](https://www.npmjs.com/package/eslint-plugin-fp), [lodash](https://www.npmjs.com/package/eslint-plugin-lodash), [lodash-fp](https://www.npmjs.com/package/eslint-plugin-lodash-fp), [immutable](https://www.npmjs.com/package/eslint-plugin-immutable)\n      * [promise](https://www.npmjs.com/package/eslint-plugin-promise), [optimize-regex](https://www.npmjs.com/package/eslint-plugin-optimize-regex)\n    * Presets\n      * [eslint-config-webcube](./packages/eslint-config-webcube/) (Author's own project)\n      * [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)\n      * [eslint-config-react-app](https://github.com/facebookincubator/create-react-app/tree/master/packages/eslint-config-react-app)\n  * [Flow](https://flow.org)\n    * [flow-typed](https://github.com/flowtype/flow-typed)\n    * [Flow Runtime](https://www.npmjs.com/package/babel-plugin-flow-runtime)\n  * [StyleLint](http://stylelint.io/)\n    * [doiuse](https://www.npmjs.com/package/doiuse)\n    * [Colorguard](https://www.npmjs.com/package/colorguard)\n    * [postcss-bem-linter](https://www.npmjs.com/package/postcss-bem-linter)\n  * [HTMLHint](https://github.com/yaniswang/HTMLHint)\n* Minifier / Compressor / Optimizer\n  * [Prepack](https://prepack.io/)\n  * [babel-minify](https://github.com/babel/minify) / [uglify-es](https://github.com/mishoo/UglifyJS2/tree/harmony) / [UglifyJS 3](https://github.com/mishoo/UglifyJS2) / [UglifyJS 2](https://github.com/mishoo/UglifyJS2/tree/v2.x)\n  * [cssnano](http://cssnano.co/) / [clean-css](https://www.npmjs.com/package/clean-css) / [CSSO](https://www.npmjs.com/package/csso)\n  * [HTMLMinifier](https://github.com/kangax/html-minifier)\n  * [Critical](https://www.npmjs.com/package/critical) / [Penthouse](https://www.npmjs.com/package/penthouse)\n  * [imagemin](https://www.npmjs.com/package/imagemin)\n    * [gifsicle](https://github.com/kevva/imagemin-gifsicle)\n    * [jpegtran](https://www.npmjs.com/package/imagemin-jpegtran) / [mozjpeg](https://github.com/imagemin/imagemin-mozjpeg)\n    * [optipng](https://github.com/kevva/imagemin-optipng) / [pngquant](https://www.npmjs.com/package/imagemin-pngquant)\n    * [svgo](https://github.com/kevva/imagemin-svgo)\n    * [webp](https://www.npmjs.com/package/imagemin-webp)\n  * [fontmin](https://www.npmjs.com/package/fontmin), [font-spider](https://www.npmjs.com/package/font-spider)\n* Task Automation\n  * [npm-run-script](https://docs.npmjs.com/cli/run-script), [npm-scripts](https://docs.npmjs.com/misc/scripts)\n    * [task automation with npm run](http://substack.net/task_automation_with_npm_run), \\\n      [How to Use npm as a Build Tool](https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/)\n      * [Why I Left Gulp and Grunt for npm Scripts](https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8)\n    * Git Hooks\n      * [Husky](https://github.com/typicode/husky)\n      * [lint-staged](https://www.npmjs.com/package/lint-staged)\n        * [Make linting great again!](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8)\n    * Environment Variables - [env-cmd](https://www.npmjs.com/package/env-cmd), [cross-env](https://www.npmjs.com/package/cross-env)\n    * [get-port](https://www.npmjs.com/package/get-port), [public-ip](https://www.npmjs.com/package/public-ip)\n  * [Gulp](http://gulpjs.com/)\n    * [gulp - The vision, history, and future of the project](https://medium.com/@contrahacks/gulp-3828e8126466)\n    * [Why you shouldn’t create a gulp plugin](http://blog.overzealous.com/post/74121048393/why-you-shouldnt-create-a-gulp-plugin-or-how-to)\n    * [Gulpfile API](https://github.com/gulpjs/gulp/blob/master/docs/API.md)\n    * Utilities\n      * [The Problem with gulp-util](https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5)\n      * [through2](https://www.npmjs.com/package/through2), [gulp-load-plugins](https://www.npmjs.com/package/gulp-load-plugins)\n      * [gulp-size](https://www.npmjs.com/package/gulp-size), [gulp-count](https://www.npmjs.com/package/gulp-count), [gulp-notify](https://www.npmjs.com/package/gulp-notify)\n      * [gulp-debug](https://www.npmjs.com/package/gulp-debug)\n      * [gulp-if](https://www.npmjs.com/package/gulp-if), [gulp-filter](https://www.npmjs.com/package/gulp-filter), [merge-stream](https://www.npmjs.com/package/merge-stream)\n      * [gulp-changed](https://www.npmjs.com/package/gulp-changed) / [gulp-cached](https://www.npmjs.com/package/gulp-cached)\n      * [gulp-exec](https://www.npmjs.com/package/gulp-exec), [gulp-git](https://www.npmjs.com/package/gulp-git)\n      * [gulp-rename](https://www.npmjs.com/package/gulp-rename)\n      * [gulp-replace](https://www.npmjs.com/package/gulp-replace/) / [gulp-inject](https://www.npmjs.com/package/gulp-inject) / [gulp-useref](https://www.npmjs.com/package/gulp-useref), [gulp-inline-source](https://www.npmjs.com/package/gulp-inline-source/)\n      * [gulp-sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Workflow\n\n* Development\n  * Micro Generator\n    * [Plop](https://plopjs.com)\n  * Live Reload / Watch / Preview\n    * [webpack-serve](https://github.com/webpack-contrib/webpack-serve)\n    * [webpack-dev-server](https://www.npmjs.com/package/webpack-dev-server)\n      * [webpack-dashboard](https://www.npmjs.com/package/webpack-dashboard)\n      * [webpack-dev-middleware](https://www.npmjs.com/package/webpack-dev-middleware)\n    * [Hot Module Replacement](https://webpack.js.org/guides/hot-module-replacement/) / [React Hot Loader](http://gaearon.github.io/react-hot-loader/)\n    * [Browsersync](https://www.npmjs.com/package/browser-sync)\n    * Electron - [Electron Connect](https://www.npmjs.com/package/electron-connect)\n    * React Native - [Expo](https://expo.io/)\n    * Node.js - [nodemon](https://www.npmjs.com/package/nodemon)\n  * Dev Tools\n    * [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/) / [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) / [Safari Web Inspector](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/) / [Microsoft Edge F12 Dev Tools](https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide)\n      * Console - [Console API](https://developers.google.com/web/tools/chrome-devtools/console/console-reference), [Command Line API](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference)\n    * Third-party Panels\n      * [React DevTools](https://github.com/facebook/react-devtools) / [AngularJS Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk) / [Augury](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd) / [Vue.js DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)\n      * [React Perf](https://chrome.google.com/webstore/detail/react-perf/hacmcodfllhbnekmghgdlplbdnahmhmm)\n      * [Redux DevTools](https://github.com/gaearon/redux-devtools)\n      * [Immutable DevTools](https://github.com/andrewdavey/immutable-devtools), [Immutable.js Object Formatter](https://chrome.google.com/webstore/detail/immutablejs-object-format/hgldghadipiblonfkkicmgcbbijnpeog)\n      * [Apollo Client Devtools](https://github.com/apollographql/apollo-client-devtools), [GraphQL Network](https://github.com/Ghirro/graphql-network)\n      * [JWT Inspector](https://jwtinspector.io/)\n      * [WebGL Insight](https://github.com/3Dparallax/insight/), [Three.js Editor Extension](https://chrome.google.com/webstore/detail/threejs-editor-extension/fbgbekpggeldiacgjkacbkkcbjhmakea)\n    * [Reactotron](https://github.com/infinitered/reactotron)\n    * Electron - [Devtron](https://github.com/electron/devtron)\n    * [React Native Debugger](https://github.com/jhen0409/react-native-debugger)\n  * HTTP Inspector\n    * [Paw](https://paw.cloud/) / [Postman](https://www.getpostman.com/) / [HTTPie](https://github.com/jakubroztocil/httpie)\n  * Debugging Proxy\n    * [AnyProxy](http://anyproxy.io/en.html) / [Fiddler](http://www.telerik.com/fiddler)\n    * [Tamper Chrome](https://github.com/google/tamperchrome)\n* Deployment\n  * Publishing App\n    * Server-side Rendering\n      * [Hypernova](https://github.com/airbnb/hypernova)\n      * [React Isomorphic Render](https://www.npmjs.com/package/react-isomorphic-render)\n      * [React Engine](https://www.npmjs.com/package/react-engine)\n      * [Express React Views](https://www.npmjs.com/package/express-react-views)\n    * Static Web\n      * Dynamic Routing + CDN\n        * [Superstatic](https://www.npmjs.com/package/superstatic)\n      * Object Storage + CDN\n        * Global\n          * [Amazon S3 + CloudFront](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html) - [aws-sdk](https://www.npmjs.com/package/aws-sdk) / [awscli](https://github.com/aws/aws-cli)\n          * [Google Cloud Storage + Cloud CDN](https://cloud.google.com/storage/docs/hosting-static-website) - [google-cloud](https://www.npmjs.com/package/google-cloud) / [gcloud](https://cloud.google.com/sdk/gcloud/)\n          * [Firebase Hosting](https://firebase.google.com/products/hosting/) - [firebase-tools](https://www.npmjs.com/package/firebase-tools)\n          * [Netlify](https://www.netlify.com/) - [netlify-cli](https://www.npmjs.com/package/netlify-cli)\n          * [Surge](https://surge.sh/) - [surge cli client](https://www.npmjs.com/package/surge)\n        * China\n          * [阿里云 OSS + CDN](https://help.aliyun.com/document_detail/31872.html) - [aliyun-sdk](https://www.npmjs.com/package/aliyun-sdk) / [oss-nodejs-sdk](https://www.npmjs.com/package/ali-oss)\n          * [腾讯云 COS + CDN](https://www.qcloud.com/document/product/436/9512) - [cos-nodejs-sdk-v5](https://www.npmjs.com/package/cos-nodejs-sdk-v5)\n    * Packaged App\n      * [Electron Builder](https://www.npmjs.com/package/electron-builder)\n        * [Auto Update](https://github.com/electron-userland/electron-builder/wiki/Auto-Update)\n      * [CodePush](https://www.npmjs.com/package/react-native-code-push)\n  * DevOps\n    * Process Supervisor\n      * [pm2](http://pm2.keymetrics.io/)\n        * [pm2-docker](http://pm2.keymetrics.io/docs/usage/docker-pm2-nodejs/)\n        * [Process File](http://pm2.keymetrics.io/docs/usage/application-declaration/)\n    * Containers\n      * [Docker](https://docs.docker.com/engine/reference/builder/)\n        * Learning\n          * [Play with docker classroom](http://training.play-with-docker.com/)\n          * [Docker Curriculum](https://github.com/prakhar1989/docker-curriculum)\n          * [Docker Cheat Sheet](https://github.com/wsargent/docker-cheat-sheet) / [Docker Cheat Sheet](http://docker.jens-piegsa.com/)\n        * [Dockerfile reference](https://docs.docker.com/engine/reference/builder/)\n        * [Docker run reference](https://docs.docker.com/engine/reference/run/)\n        * [Docker Compose](https://docs.docker.com/compose/overview/)\n      * Docker Images\n        * [node](https://github.com/nodejs/docker-node) / [risingstack/alpine](https://hub.docker.com/r/risingstack/alpine/) / [keymetrics/pm2-docker-alpine](https://hub.docker.com/r/keymetrics/pm2-docker-alpine/)\n        * [docker-lambda](https://github.com/lambci/docker-lambda)\n    * Container Clusters\n      * [Docker Engine in Swarm Mode](https://docs.docker.com/engine/swarm/)\n        * [Compose file reference](https://docs.docker.com/compose/compose-file/)\n        * [wait-for-it.sh](https://github.com/vishnubob/wait-for-it) / [dockerize](https://github.com/jwilder/dockerize)\n      * [Kubernetes](https://kubernetes.io/)\n        * [Kubernetes Cheat Sheet](http://k8s.info/cs.html)\n    * PaaS\n      * Global\n        * [now](https://zeit.co/now)\n        * [heroku](heroku.com) - [heroku-cli](https://devcenter.heroku.com/articles/heroku-cli#getting-started)\n      * China\n        * [LeanCloud-云引擎](https://leancloud.cn/docs/leanengine_overview.html) ([云函数](https://leancloud.cn/docs/leanengine_cloudfunction_guide-node.html), [网站托管](https://leancloud.cn/docs/leanengine_webhosting_guide-node.html)) - [lean-cli](https://leancloud.cn/docs/leanengine_cli.html)\n* Monitoring\n  * Error Tracking\n    * [Capturing client-side JavaScript errors](https://www.thoughtworks.com/radar/techniques/capturing-client-side-javascript-errors), [Front-End Error Handling](https://staticapps.org/articles/front-end-error-handling/)\n      * [A Guide to Proper Error Handling in JavaScript](https://www.sitepoint.com/proper-error-handling-javascript/)\n    * Services\n      * [TrackJS](https://trackjs.com/) / [Errorception](https://errorception.com/)\n      * [Sentry](https://sentry.io/for/javascript/) / [Rollbar](https://rollbar.com/docs/notifier/rollbar.js/) / [Bugsnag](https://docs.bugsnag.com/platforms/browsers/) / [Airbrake](https://airbrake.io/languages/javascript_exception_handler) / [Raygun](https://raygun.com/)\n  * Logging\n    * Global\n      * [Amazon CloudWatch](https://aws.amazon.com/cloudwatch/) / [Google Stackdriver](https://cloud.google.com/stackdriver/)\n      * [PM2 Plus](https://pm2.io/plus/)\n    * China\n      * [阿里云-云监控](https://www.aliyun.com/product/jiankong) / [腾讯云-基础监控 BCM](https://www.qcloud.com/product/bcm)\n  * APM (Application Performance Management)\n    * Global\n      * [New Relic](https://newrelic.com/) / [AppDynamics](https://www.appdynamics.com/) / [Datadog APM](https://www.datadoghq.com/apm/)\n      * [Pingdom](https://www.pingdom.com/) / [SpeedCurve](https://speedcurve.com/) / [AppNeta](https://www.appneta.com/)\n      * [Trace](https://trace.risingstack.com)\n    * China\n      * [OneAPM](https://www.oneapm.com/) / [听云](http://www.tingyun.com/)\n      * [监控宝](https://www.jiankongbao.com/) / [百度云观测](http://ce.baidu.com/) / [360网站服务监控](http://jk.cloud.360.cn/) / [腾讯云-云拨测 CAT](https://www.qcloud.com/product/cat)\n      * [阿里云 Node.js 性能平台](https://www.aliyun.com/product/nodejs)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Command-line Environment (Mac)\n\n* Intro\n  * [The Art of Command Line](https://github.com/jlevy/the-art-of-command-line)\n  * [The Bash Guide](http://guide.bash.academy/)\n  * [Linux Shell Scripting Tutorial (LSST)](https://bash.cyberciti.biz/guide/Main_Page)\n* Terminal\n  * [iTerm2](https://www.iterm2.com/)\n    * [iTerm Color Schemes](https://github.com/mbadolato/iTerm2-Color-Schemes)\n  * [Hyper](https://hyper.is/)\n    * [Awesome Hyper](https://github.com/bnb/awesome-hyper)\n* Package Manager\n  * [Homebrew](https://brew.sh/)\n* Shell\n  * [Oh My Zsh](https://github.com/robbyrussell/oh-my-zsh)\n  * [Spaceship ZSH Theme](https://github.com/denysdovhan/spaceship-zsh-theme)\n  * Zsh Plugins\n    * [zsh-better-npm-completion](https://github.com/lukechilds/zsh-better-npm-completion)\n    * [Awesome Zsh Plugins](https://github.com/unixorn/awesome-zsh-plugins)\n* Vim\n  * [Vimtutor](http://linuxcommand.org/man_pages/vimtutor1.html)\n  * [spf13-vim](https://github.com/spf13/spf13-vim) / [YVim](https://github.com/dexteryy/YVim)\n* Git\n  * [Git-it](https://github.com/jlord/git-it-electron), [TryGit Simulator](https://try.github.io/)\n  * [Become a git guru](https://www.atlassian.com/git/tutorials), [Git Glossary](https://www.atlassian.com/git/glossary)\n  * [Pro Git - Index of Commands](https://git-scm.com/book/commands)\n  * [commitizen](https://github.com/commitizen/cz-cli)\n* [Docker for Mac](https://docs.docker.com/docker-for-mac/)\n* [dotfiles](https://dotfiles.github.io/)\n* Utilities\n  * Analysis - [cloc](https://github.com/AlDanial/cloc/)\n  * Finding - [rg (ripgrep)](https://github.com/BurntSushi/ripgrep) / [ag (The Silver Searcher)](https://github.com/ggreer/the_silver_searcher), [peco](https://github.com/peco/peco), [jq](https://stedolan.github.io/jq), [fzf](https://github.com/junegunn/fzf)\n  * Processes - [glances](https://github.com/nicolargo/glances) / [vtop](https://www.npmjs.com/package/vtop), [fkill](https://www.npmjs.com/package/fkill-cli)\n  * Help - [tldr](https://github.com/tldr-pages/tldr) / [howdoi](https://github.com/gleitz/howdoi)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Command-line Libraries (Node.js)\n\n* Input\n  * Options/Arguments Parser - [minimist](https://www.npmjs.com/package/minimist) / [commander](https://www.npmjs.com/package/commander) / [yargs](https://www.npmjs.com/package/yargs)\n  * Interactive - [inquirer](https://www.npmjs.com/package/inquirer)\n  * Rapidly Building - [vorpal](https://www.npmjs.com/package/vorpal) / [cli](https://www.npmjs.com/package/cli)\n  * Configuration - [Liftoff](https://www.npmjs.com/package/liftoff)\n* Output\n  * Color / Style - [Chalk](https://www.npmjs.com/package/chalk)\n  * Icon - [log-symbols](https://www.npmjs.com/package/log-symbols) / [figures](https://www.npmjs.com/package/figures)\n  * Updating Log\n    * Low-level - [log-update](https://www.npmjs.com/package/log-update)\n    * Indicator - [ora](https://www.npmjs.com/package/ora) / [progress](https://www.npmjs.com/package/progress) / [pace](https://www.npmjs.com/package/pace)\n    * Pretty Log - [DraftLogs](https://www.npmjs.com/package/draftlog) / [listr](https://www.npmjs.com/package/listr)\n  * Notice - [boxen](https://www.npmjs.com/package/boxen), [cfonts](https://www.npmjs.com/package/cfonts)\n  * Columns - [cli-table](https://www.npmjs.com/package/cli-table) / [columnify](https://www.npmjs.com/package/columnify)\n  * Curses-like - [blessed](https://www.npmjs.com/package/blessed)\n  * Drawing - [drawille-canvas](https://www.npmjs.com/package/drawille-canvas)\n  * Image - [term-img](https://www.npmjs.com/package/term-img)\n* Delivery\n  * [update-notifier](https://www.npmjs.com/package/update-notifier)\n  * Reporting Usage - [insight](https://www.npmjs.com/package/insight)\n  * Self-contained Executable - [pkg](https://www.npmjs.com/package/pkg)\n* Framework\n  * Generator - [Yeoman](http://yeoman.io/authoring/)\n* OS\n  * Shell Commands - [ShellJS](https://www.npmjs.com/package/shelljs)\n  * Filesystem\n    * Filesystem API - [fs-extra](https://www.npmjs.com/package/fs-extra) / [fs-jetpack](https://www.npmjs.com/package/fs-jetpack)\n    * Wildcard Matching - [glob](https://www.npmjs.com/package/glob) / [globby](https://www.npmjs.com/package/globby), [matcher](https://www.npmjs.com/package/matcher)\n    * Virtual Filesystem - [vinyl](https://www.npmjs.com/package/vinyl-fs)\n    * Temporary File - [tmp](https://www.npmjs.com/package/tmp)\n    * File Locking - [proper-lockfile](https://www.npmjs.com/package/proper-lockfile)\n    * Finding - [find-up](https://www.npmjs.com/package/find-up), [readdirp](https://www.npmjs.com/package/readdirp)\n    * Watch - [chokidar](https://www.npmjs.com/package/chokidar) / [gaze](https://www.npmjs.com/package/gaze)\n  * Local\n    * [network-address](https://www.npmjs.com/package/network-address)\n    * [clipboardy](https://www.npmjs.com/package/clipboardy)\n* API\n  * Git - [simple-git](https://www.npmjs.com/package/simple-git) / [nodegit](https://www.npmjs.com/package/nodegit)\n  * Docker - [dockerode](https://www.npmjs.com/package/dockerode)\n  * SSH - [ssh2](https://www.npmjs.com/package/ssh2)\n* Parser\n  * JS - [Acorn](https://www.npmjs.com/package/acorn) / [Babylon](https://www.npmjs.com/package/babylon) / [Espree](https://www.npmjs.com/package/espree) / [Esprima](https://www.npmjs.com/package/esprima)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### IDE / Editors\n\n* [VS Code](https://code.visualstudio.com/) Plugins\n  * UI\n    * [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)\n    * [Indenticator](https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator)\n  * Operating\n    * [VSCodeVim](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)\n    * [Search node_modules](https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules)\n    * [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)\n    * [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)\n    * [Lorem ipsum](https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum) / [Chinese Lorem Ipsum](https://marketplace.visualstudio.com/items?itemName=galend.vsc-lorem-cn)\n    * Snippets\n      * [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)\n      * [JavaScript Snippet Pack](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-javascript-snippet-pack)\n      * [Reactjs code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)\n      * [React Redux ES6 Snippets](https://marketplace.visualstudio.com/items?itemName=timothymclane.react-redux-es6-snippets)\n      * [eslint-disable-snippets](https://marketplace.visualstudio.com/items?itemName=drKnoxy.eslint-disable-snippets)\n      * [HTML Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)\n      * [SVG Icons](https://marketplace.visualstudio.com/items?itemName=idleberg.svg-icons)\n      * [Icon Fonts](https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts)\n  * Formatting\n    * [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n    * [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) / [stylefmt](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-stylefmt)\n    * [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)\n    * [change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)\n    * [Align](https://marketplace.visualstudio.com/items?itemName=steve8708.Align)\n  * Static Analysis\n    * [Flow Language Support](https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode)\n    * [Stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)\n    * [HTMLHint](https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint)\n    * Syntax\n      * [CSS Modules](https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules)\n      * [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)\n      * [GraphQL for VSCode](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode)\n      * [Docker](https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker)\n  * Docs\n    * [Dash](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash)\n    * [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)\n    * [Color Picker](https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color)\n    * [Swagger Viewer](https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer)\n    * [API Elements extension](https://marketplace.visualstudio.com/items?itemName=vncz.vscode-apielements)\n  * Assistant\n    * [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)\n    * [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)\n    * [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)\n    * [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)\n    * [Quokka.js - Live Scratchpad for JavaScript](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)\n  * Integration\n    * VCS\n      * [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)\n      * [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)\n      * [Open in GitHub](https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github)\n    * [Share Code](https://marketplace.visualstudio.com/items?itemName=RolandGreim.sharecode)\n    * Debug\n      * [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)\n      * [Node Debug 2](https://marketplace.visualstudio.com/items?itemName=ms-vscode.node-debug2)\n      * [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)\n    * [React Native Tools](https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native)\n    * [Cordova Tools](https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools)\n    * Write\n      * [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)\n      * [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)\n* [Atom](https://atom.io/) Plugins\n  * UI\n    * [fonts](https://atom.io/packages/fonts)\n    * [file-icons](https://atom.io/packages/file-icons)\n    * [highlight-line](https://atom.io/packages/highlight-line), [highlight-selected](https://atom.io/packages/highlight-selected)\n    * [indent-guide-improved](https://atom.io/packages/indent-guide-improved), [trailing-spaces](https://atom.io/packages/trailing-spaces)\n  * Operating\n    * [vim-mode-plus](https://atom.io/packages/vim-mode-plus), [jumpy](https://atom.io/packages/jumpy)\n    * [Sublime-Style-Column-Selection](https://atom.io/packages/Sublime-Style-Column-Selection)\n    * [Emmet](https://atom.io/packages/emmet)\n    * Snippets\n      * [turbo-javascript](https://atom.io/packages/turbo-javascript)\n  * Formatting\n    * [auto-detect-indentation](https://atom.io/packages/auto-detect-indentation), [editorconfig](https://atom.io/packages/editorconfig)\n    * [prettier-atom](https://atom.io/packages/prettier-atom)\n    * [atom-stylefmt](https://atom.io/packages/stylefmt) / [postcss-sorting](https://atom.io/packages/postcss-sorting) / [atom-beautify](https://atom.io/packages/atom-beautify)\n    * [aligner](https://atom.io/packages/aligner) / [atom-alignment](https://atom.io/packages/atom-alignment)\n    * [toggle-quotes](https://atom.io/packages/toggle-quotes)\n  * Static Analysis\n    * [file-types](https://atom.io/packages/file-types)\n    * [language-babel](https://atom.io/packages/language-babel), [atom-ternjs](https://atom.io/packages/atom-ternjs)\n    * [language-postcss](https://atom.io/packages/language-postcss)\n    * [language-mjml](https://atom.io/packages/language-mjml)\n    * [linter-eslint](https://atom.io/packages/linter-eslint), [linter-flow](https://atom.io/packages/linter-flow), [linter-stylelint](https://atom.io/packages/linter-stylelint), [linter-htmlhint](https://atom.io/packages/linter-htmlhint), [linter-mjml](https://atom.io/packages/linter-mjml), [linter-jsonlint](https://atom.io/packages/linter-jsonlint), [linter-js-yaml](https://atom.io/packages/linter-js-yaml)\n  * Docs\n    * [dash](https://atom.io/packages/dash)\n    * [Hyperclick](https://atom.io/packages/hyperclick), [js-hyperclick](https://atom.io/packages/js-hyperclick)\n    * [keybinding-cheatsheet](https://atom.io/packages/keybinding-cheatsheet)\n  * Assistant\n    * [Project Manager](https://atom.io/packages/project-manager)\n    * [todo-show](https://atom.io/packages/todo-show) / [imdone-atom](https://atom.io/packages/imdone-atom)\n  * Integration\n    * [GitHub for Atom](https://github.atom.io/)\n    * [Build](https://atom.io/packages/build)\n      * [AtomBuild](https://atombuild.github.io/)\n    * [Markdown Preview Plus](https://atom.io/packages/markdown-preview-plus)\n* Out-of-the-box Atom IDE\n  * [YAtom](https://github.com/dexteryy/YAtom) (author's own project)\n  * [Nuclide](https://nuclide.io/)\n  * [Reactide](http://reactide.io/)\n* Other Electron-based IDE\n  * [Deco](https://www.decoide.org/)\n* [WebStorm](https://www.jetbrains.com/webstorm/)\n* Programming Fonts\n  * [Hack](http://sourcefoundry.org/hack/)\n  * [Anonymous Pro](https://www.marksimonson.com/fonts/view/anonymous-pro)\n  * [Source Code Pro](http://adobe-fonts.github.io/source-code-pro/)\n  * [Fira Mono](http://mozilla.github.io/Fira/)\n  * [Google Noto Mono](https://www.google.com/get/noto/)\n  * [Droid Sans Mono](https://fonts.google.com/specimen/Droid+Sans+Mono)\n  * [Space Mono](https://fonts.google.com/specimen/Space%20Mono)\n  * [M+](http://mplus-fonts.osdn.jp/about-en.html)\n  * [Mononoki](http://madmalik.github.io/mononoki/)\n  * [Profont](http://tobiasjung.name/profont/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Useful Apps\n\n* Playground\n  * [CodePen](http://codepen.io/) / [CodeSandbox](https://codesandbox.io/)\n    * CDN for npm - [unpkg](https://unpkg.com/)\n  * [RunKit](https://runkit.com)\n  * [RequestBin](https://requestbin.com/)\n  * [jsPerf](https://jsperf.com/)\n  * [CSS in JS Playground](https://css-in-js-playground.com/)\n  * [GraphQL Playground](https://github.com/graphcool/graphql-playground), [Apollo Launchpad](https://launchpad.graphql.com)\n  * [GLSL Sandbox](http://glslsandbox.com/)\n  * [ImmutableJS REPL](http://neilff.github.io/immutable-repl/?)\n* Visual Tools\n  * Performance\n    * [Cuzillion](http://stevesouders.com/cuzillion/)\n    * [Critical Path CSS Generator](https://jonassebastianohlsson.com/criticalpathcssgenerator/)\n  * CSS\n    * [cssreference.io](http://cssreference.io/)\n    * [EnjoyCSS](http://enjoycss.com/)\n    * Easing - [cubic-bezier](http://cubic-bezier.com/) / [Ceaser CSS Easing Animation Tool](https://matthewlein.com/ceaser/) / [Custom easing functions](http://www.joelambert.co.uk/morf/) / [Easing functions](http://easings.net/)\n    * Flexbox - [Fibonacci Flexbox Composer](http://maxsteenbergen.com/fibonacci/) / [CSS Flexbox Please!](https://demo.agektmr.com/flexbox/) / [Flexy Boxes](http://the-echoplex.net/flexyboxes/) / [Flexbox Playground](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/) / [flexplorer](http://bennettfeely.com/flexplorer/)\n    * Animation - [CSS3 Keyframes Animation Generator](http://cssanimate.com/) / [Mantra](http://jeremyckahn.github.io/mantra/) / [Bounce.js](http://bouncejs.com/)\n    * Gradient - [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/)\n    * [Quantity Queries Builder](http://quantityqueries.com/)\n    * Shapes - [CSS triangle generator](http://apps.eky.hk/css-triangle-generator/),  [Tridiv CSS 3D Editor](http://tridiv.com/)\n    * [HTML Table Generator](http://www.tablesgenerator.com/html_tables)\n  * JS\n    * [Keyboard Event Viewer](https://w3c.github.io/uievents/tools/key-event-viewer.html)\n    * [Web Audio Playground](http://webaudioplayground.appspot.com/)\n    * [Regex101](https://regex101.com/) / [Debuggex](https://www.debuggex.com/)\n* Viewer\n  * [JSON Viewer](https://github.com/tulios/json-viewer), [XML Tree](https://chrome.google.com/webstore/detail/xml-tree/gbammbheopgpmaagmckhpjbfgdfkpadb)\n  * [JS Nice](http://www.jsnice.org/) / [JS Beautifier](http://jsbeautifier.org/)\n  * [GraphQL Voyager](https://apis.guru/graphql-voyager/), [GraphQL Docs](https://graphql-docs.com/), [GraphQL Visualizer / graphqlviz](http://nathanrandal.com/graphql-visualizer/) / [graphqlviz](https://github.com/sheerun/graphqlviz)\n  * [AST Explorer](http://astexplorer.net/)\n  * [DevTools Timeline Viewer](https://chromedevtools.github.io/timeline-viewer/)\n  * [Text Escaping and Unescaping in JavaScript](http://0xcc.net/jsescape/)\n  * [HTML Entity Lookup](http://entity-lookup.leftlogic.com/) / [HTML Arrows](https://www.toptal.com/designers/htmlarrows/)\n* Docs\n  * [Dash](https://kapeli.com/dash) / [DevDocs](http://devdocs.io/) / [Velocity](https://velocity.silverlakesoftware.com/) / [Zeal](https://zealdocs.org/)\n* Automation\n  * [RobotJS](https://robotjs.io/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n\n### Collaboration\n\n* Version Control\n  * Workflow\n    * [Comparing Workflows](https://www.atlassian.com/git/tutorials/comparing-workflows)\n    * [Understanding the GitHub Flow](https://guides.github.com/introduction/flow/)\n    * [A successful Git branching model](http://nvie.com/posts/a-successful-git-branching-model/)\n  * GUI\n    * [SourceTree](https://www.sourcetreeapp.com/)\n  * Github\n    * [GitHub Cheat Sheet](https://github.com/tiimgreen/github-cheat-sheet)\n    * [Github Help](https://help.github.com/)\n    * [How we organize GitHub issues: A simple styleguide for tagging](https://robinpowered.com/blog/best-practice-system-for-organizing-and-tagging-github-issues/)\n    * Chrome Extensions\n      * [OctoLinker](https://octolinker.github.io/), [Octotree](https://github.com/buunguyen/octotree), [Code Climate](https://codeclimate.com/browser-extension/)\n      * [Awesome browser extensions for GitHub](https://github.com/stefanbuck/awesome-browser-extensions-for-github)\n* ChatOps\n  * [What is ChatOps? And How do I Get Started?](https://www.pagerduty.com/blog/what-is-chatops/), \\\n    [What is ChatOps? A guide to its evolution, adoption, and significance](https://www.atlassian.com/blog/software-teams/what-is-chatops-adoption-guide)\n  * [Hubot](https://hubot.github.com/)\n    * Adapters - [Slack](https://github.com/slackapi/hubot-slack) / [Discord](http://npmjs.com/package/hubot-discord) / [IRC](https://www.npmjs.com/package/hubot-irc) / [Wechat](https://www.npmjs.com/package/hubot-weixin) / [QQ](https://www.npmjs.com/package/hubot-qq)\n* Kanban\n  * What is Kanban? - [A](https://leankit.com/learn/kanban/what-is-kanban/), [B](http://kanbanblog.com/explained/)\n  * [Getting Started With Trello](https://trello.com/guide)\n  * [Github Project Boards](https://help.github.com/articles/tracking-the-progress-of-your-work-with-project-boards/)\n* Presentation\n  * Markdown\n    * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/)\n    * [Markdown: Syntax](https://daringfireball.net/projects/markdown/syntax)\n  * Diagram\n    * [Mermaid](https://mermaidjs.github.io/)\n      * [Mermaid Live Editor](https://mermaidjs.github.io/mermaid-live-editor/)\n  * Slides\n    * [Remark](https://github.com/gnab/remark)\n      * [remarker](https://github.com/kt3k/remarker)\n* Design\n  * [Sketch](https://www.sketchapp.com/learn/) / [Figma](https://www.figma.com/)\n  * [InVision](https://www.invisionapp.com/) / [Atomic](https://atomic.io/) / [Proto.io](https://proto.io/)\n  * [Zeplin](https://zeplin.io/) / [Sympli](https://sympli.io/) / [Avocode](https://avocode.com/)\n  * [After Effects](http://www.adobe.com/products/aftereffects.html) + [Lottie](https://airbnb.design/lottie/) / [bodymovin](https://github.com/bodymovin/bodymovin) / [Inspector Spacetime](https://google.github.io/inspectorspacetime/) + [Sketch2AE](https://google.github.io/sketch2ae/)\n\n\\\u003e\\\u003e Return to [Table of Contents](#table-of-contents)\n","funding_links":[],"categories":["Others","miscellaneous","Awesome Github Repositorys","Learning Paths","Learning Resources","Web Development","CS自学和前端自学提问互助、资源共享和交流QQ群（非闲聊群）","前端开发框架及项目","Dev","HarmonyOS","awesome","Web development ##"],"sub_categories":["不错的网站","其他_文本生成、文本对话","Collections","Windows Manager","Study Plan ###"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdexteryy%2Fspellbook-of-modern-webdev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdexteryy%2Fspellbook-of-modern-webdev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdexteryy%2Fspellbook-of-modern-webdev/lists"}