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