2252 lines
165 KiB
Markdown
2252 lines
165 KiB
Markdown
|
||
<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.
|
||
* For each problem domain and each technology, I try my best to pick only __one or a few__ links that are __most important, typical, common or popular__ and __not outdated__, base on the __clear trends__, __public data__ and __empirical observation__.
|
||
* 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.
|
||
|
||
<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 Features](#html5-features)
|
||
- HTML/DOM, Appearance, Interaction, Access, Network, Media, Graphics, Computing...
|
||
- [CSS Features](#css-features)
|
||
- RWD, Layout, Typography, Text, Animation, Effects...
|
||
- [Next Generation CSS](#next-generation-css)
|
||
- CSS Module, PostCSS, CSS in JS
|
||
- Best Practices (Skeleton, Methodology, Code Style...)
|
||
- Web Design (RWD, Atomic Design, Grid System, Typography, Style Guide...)
|
||
- [Next Generation JS](#next-generation-js)
|
||
- ES6+ Features, Intro to ES6+, Re-intro to JS, Important Proposals, Functional Programming, FRP, Static Typing, Code Style...
|
||
- [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
|
||
- [Tooling](#tooling)
|
||
- [Testing](#testing)
|
||
- Unit Testing / Test Runner, Test Doubles
|
||
- Web Testing (Integration Testing, Functional 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)
|
||
- Atom Plugins (UI, Formating, 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 Features](#html5-features)
|
||
3. [CSS Features](#css-features)
|
||
4. [Next Generation CSS](#next-generation-css)
|
||
5. [Next Generation JS](#next-generation-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)
|
||
* [Mastering CSS Principles: A Comprehensive Guide](https://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/)
|
||
* 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)
|
||
* [Google Developers](https://developers.google.com/web/)
|
||
* [Web Fundamentals](https://developers.google.com/web/fundamentals/), [HTML5Rocks](https://www.html5rocks.com/)
|
||
* Apple
|
||
* [WebKit JS](https://developer.apple.com/reference/webkitjs/), [WebKit DOM Programming Topics](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/SafariJSProgTopics)
|
||
* [Safari Web Content Guide](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/), [Safari HTML Reference](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html), [Safari CSS Reference](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/), [Safari CSS Visual Effects Guide](https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/)
|
||
* [Microsoft Edge Developer Guide](https://docs.microsoft.com/en-us/microsoft-edge/dev-guide)
|
||
* CSS-Tricks's [CSS Almanac](https://css-tricks.com/almanac/)
|
||
* [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/)
|
||
* [PageSpeed Insights Rules](https://developers.google.com/speed/docs/insights/rules)
|
||
* [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/)
|
||
* [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/)
|
||
* Offline
|
||
* [Offline UX Considerations](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux)
|
||
* Measure
|
||
* [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/)
|
||
* Security
|
||
* [The Tangled Web: A Guide to Securing Modern Web Applications](http://lcamtuf.coredump.cx/tangled/)
|
||
* [HTML5 Security Cheatsheet](https://html5sec.org/)
|
||
* Semantics / SEO / Accessibility
|
||
* [Let’s Talk about Semantics](http://html5doctor.com/lets-talk-about-semantics/)
|
||
* [SEO Tutorial For Beginners in 2017](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)
|
||
* [The A11Y Project](http://a11yproject.com/), [Using ARIA](https://w3c.github.io/using-aria/)
|
||
|
||
### HTML5 Features
|
||
|
||
* HTML / DOM
|
||
* [You Might Not Need jQuery](http://youmightnotneedjquery.com/), [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-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)
|
||
* [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 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)
|
||
* [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/)
|
||
* [WebVR](https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API)
|
||
* Status - [WebVR Rocks](https://webvr.rocks/)
|
||
* Workshop - [Codelabs - Building for Virtual Reality on the Web](https://codelabs.developers.google.com/codelabs/webvr/)
|
||
* 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](https://developer.mozilla.org/en-US/docs/WebAssembly)
|
||
* [WebAssembly.org](http://webassembly.org/)
|
||
* [An Abridged Cartoon Introduction To WebAssembly](https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/)
|
||
* Workshop - [Codelabs - An Introduction to Web Assembly](https://codelabs.developers.google.com/codelabs/web-assembly-intro/)
|
||
|
||
### 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/)
|
||
* Responsive Web Design
|
||
* Intro - see _[Platforms and Languages > Next Generation CSS](#next-generation-css) > 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
|
||
* [Using Flexbox today](https://chriswrightdesign.com/experiments/using-flexbox-today/)
|
||
* [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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
||
* [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
|
||
* [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/)
|
||
* 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)
|
||
|
||
### Next Generation CSS
|
||
|
||
* [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_
|
||
* [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/)
|
||
* [CSSNext](http://cssnext.io/)
|
||
* [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_
|
||
* [CSS in JS](https://speakerdeck.com/vjeux/react-css-in-js)
|
||
* [Styled-Components](https://github.com/styled-components/styled-components)
|
||
* [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/)
|
||
* [Aphrodite](https://github.com/Khan/aphrodite)
|
||
* [Inline CSS at Khan Academy: Aphrodite](http://engineering.khanacademy.org/posts/aphrodite-inline-css.htm)
|
||
* [JSS](http://cssinjs.org/), [Radium](http://formidable.com/open-source/radium/)
|
||
* Best Practices
|
||
* [Skeleton.css](http://getskeleton.com/) / [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/)
|
||
* [RSCSS](http://rscss.io/), [SOLID CSS](http://blog.millermedeiros.com/solid-css/), [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)
|
||
* [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/)
|
||
* Web Design
|
||
* 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/)
|
||
* [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/)
|
||
* 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 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/)
|
||
* 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/)
|
||
|
||
### Next Generation 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://rainsoft.io/the-legend-of-javascript-equality-operator/), [undefined](https://rainsoft.io/7-tips-to-handle-undefined-in-javascript/)
|
||
* [variables hoisting](https://rainsoft.io/javascript-hoisting-in-details/), [variables lifecycle](https://rainsoft.io/variables-lifecycle-and-why-let-is-not-hoisted/)
|
||
* [declare functions](https://rainsoft.io/6-ways-to-declare-javascript-functions/), ['this' keyword](https://rainsoft.io/gentle-explanation-of-this-in-javascript/)
|
||
* [three dots](https://rainsoft.io/how-three-dots-changed-javascript/)
|
||
* [array creation](https://rainsoft.io/power-up-the-array-creation-in-javascript/), [object literals](https://rainsoft.io/why-object-literals-in-javascript-are-cool/)
|
||
* [well-known symbols](https://rainsoft.io/detailed-overview-of-well-known-symbols/)
|
||
* [small and plain functions](https://rainsoft.io/the-art-of-writing-small-and-plain-functions/)
|
||
* [unicode](https://rainsoft.io/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:
|
||
* [ES Modules](https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358) in [Browsers](https://jakearchibald.com/2017/es-modules-in-browsers/) and [Node.js](https://hackernoon.com/node-js-tc-39-and-modules-a1118aecf95e)
|
||
* [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/)
|
||
* 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)
|
||
* [Adopting Flow & TypeScript](http://thejameskyle.com/adopting-flow-and-typescript.html)
|
||
* [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/)
|
||
* [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)
|
||
* 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/)
|
||
|
||
### 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)
|
||
|
||
### 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](http://x5.tencent.com/tbs/guide/w3c.html)
|
||
* Platform Releases
|
||
* [Chrome](https://chromereleases.googleblog.com/), [Safari](https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Introduction/Introduction.html) ([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)
|
||
* ECMAScript
|
||
* [ECMAScript compatibility table](http://kangax.github.io/compat-table/es6/)
|
||
* [Node.js ES2015 Support](http://node.green/)
|
||
* Node 8.x - [V8 5.9](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://wiki.whatwg.org/wiki/FAQ#The_WHATWG) (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)
|
||
* 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 CTC](https://github.com/nodejs/CTC) (Node.js Core Technical Committee)
|
||
* [Meeting Notes](https://github.com/nodejs/CTC/tree/master/meetings)
|
||
* [Node.js EPs (Enhancement Proposals)](https://github.com/nodejs/node-eps)
|
||
* 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)
|
||
* 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), [Telerik Verified Plugins](http://plugins.telerik.com/cordova)
|
||
* 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)
|
||
|
||
### 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
|
||
* `document-write` - [PostScribe](https://www.npmjs.com/package/postscribe)
|
||
* User Timing API - [marky](https://www.npmjs.com/package/marky)
|
||
* Offline
|
||
* Service Work - [sw-toolbox](https://googlechrome.github.io/sw-toolbox/)
|
||
* File / FileReader API
|
||
* [FileSaver.js](https://www.npmjs.com/package/file-saver)
|
||
* [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/)
|
||
|
||
### 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)
|
||
* [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)
|
||
* 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)
|
||
|
||
### 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](http://facebook.github.io/immutable-js/)
|
||
* Lightweight Alternative - [object-path-immutable](https://www.npmjs.com/package/object-path-immutable) / [dot-prop-immutable](https://www.npmjs.com/package/dot-prop-immutable)
|
||
* OOP
|
||
* [core-decorators](https://www.npmjs.com/package/core-decorators)
|
||
* [Stampit](https://www.npmjs.com/package/stampit)
|
||
* Async
|
||
* Observable - [RxJS](https://www.npmjs.com/package/rxjs)
|
||
* Promise - [Bluebird](http://bluebirdjs.com/docs/features.html)
|
||
* Generator - [Co](https://www.npmjs.com/package/co)
|
||
* Callback - [Async](http://caolan.github.io/async/)
|
||
* 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)
|
||
* [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/)
|
||
* Computation - [Math.js](http://mathjs.org/), [Simple Statistics](https://simplestatistics.org/), [ndarray](https://www.npmjs.com/package/ndarray)
|
||
* 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](http://stringjs.com/)
|
||
* 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)
|
||
* 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)
|
||
* 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 Paser - [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 -[Axios](https://www.npmjs.com/package/axios) / [Hifetch](https://github.com/dexteryy/hifetch) (author's own project)
|
||
* 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)
|
||
* NLP
|
||
* [compromise](https://github.com/nlp-compromise/compromise) / [talisman](http://yomguithereal.github.io/talisman/)
|
||
* ML
|
||
* [MLJS](https://www.npmjs.com/package/ml), [Synaptic](https://www.npmjs.com/package/synaptic)
|
||
|
||
## 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)
|
||
* [SurviveJS React](https://survivejs.com/react/introduction/)
|
||
* [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 - [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture)
|
||
* Component Utils
|
||
* [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)
|
||
* DOM Utils
|
||
* [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)
|
||
* Lightweight
|
||
* [Redial](https://www.npmjs.com/package/redial) / [React Refetch](https://www.npmjs.com/package/react-refetch)
|
||
* [Formsy React](https://www.npmjs.com/package/formsy-react) / [React Form](https://www.npmjs.com/package/react-form)
|
||
* Alternative
|
||
* [Preact](https://preactjs.com/) / [Inferno](https://infernojs.org/)
|
||
* [Angular](https://angular.io/)
|
||
* [Vue.js](https://vuejs.org/)
|
||
* 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/)
|
||
* Utilities
|
||
* [React Redux](https://www.npmjs.com/package/react-redux)
|
||
* [Redux Form](http://redux-form.com/)
|
||
* [Redux Auth Wrapper](https://www.npmjs.com/package/redux-auth-wrapper)
|
||
* [Redux Search](https://www.npmjs.com/package/redux-search)
|
||
* Store
|
||
* [Reselect](https://www.npmjs.com/package/reselect)
|
||
* [Normalizr](https://www.npmjs.com/package/normalizr)
|
||
* [Redux Persist](https://www.npmjs.com/package/redux-persist)
|
||
* Actions
|
||
* [Redux Actions](https://www.npmjs.com/package/redux-actions)
|
||
* [Redux Thunk](https://github.com/gaearon/redux-thunk), [Redux Promise Middleware](https://www.npmjs.com/package/redux-promise-middleware)
|
||
* [Redux Observable](https://redux-observable.js.org/) / [Redux Saga](https://redux-saga.js.org/)
|
||
* [MobX](https://mobx.js.org)
|
||
* [Baobab](https://www.npmjs.com/package/baobab) / [Freezer](https://www.npmjs.com/package/freezer-js)
|
||
* API
|
||
* [GraphQL](http://graphql.org/)
|
||
* Learning
|
||
* [Learn GraphQL](https://learngraphql.com)
|
||
* [Queries and Mutations](http://graphql.org/learn/queries/)
|
||
* Playground - [GraphQLHub](https://www.graphqlhub.com/)
|
||
* [React Apollo](http://dev.apollodata.com/react/), [Learn Apollo](https://www.learnapollo.com/)
|
||
* 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/)
|
||
* [React Router Redux](https://www.npmjs.com/package/react-router-redux)
|
||
* [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)
|
||
* Server-side Rendering
|
||
* see _[Tooling > Workflow](#workflow) > Deployment > Publishing App_
|
||
* Monitoring
|
||
* [React GA](https://www.npmjs.com/package/react-ga)
|
||
* [Redux Raven Middleware](https://www.npmjs.com/package/redux-raven-middleware)
|
||
* [Redux Segment](https://www.npmjs.com/package/redux-segment)
|
||
* Services - see _[Tooling > Workflow](#workflow) > Monitoring_
|
||
* Debugging
|
||
* [why-did-you-update](https://www.npmjs.com/package/why-did-you-update)
|
||
* Scaffold / Boilerplate / Generator
|
||
* [create-react-app](https://github.com/facebookincubator/create-react-app)
|
||
* [react-starter-kit](https://github.com/kriasoft/react-starter-kit) / [react-boilerplate](https://github.com/react-boilerplate/react-boilerplate)
|
||
* [angular-cli](https://cli.angular.io/)
|
||
* [vue-cli](https://www.npmjs.com/package/vue-cli)
|
||
* [JavaScript Stack from Scratch](https://github.com/verekia/js-stack-from-scratch)
|
||
* GUI Architectures
|
||
* Comparision
|
||
* [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/)
|
||
|
||
### UI Toolkits
|
||
|
||
* CSS
|
||
* [Bulma](http://bulma.io/)
|
||
* [Tachyons](http://tachyons.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
|
||
* [Material-UI](http://www.material-ui.com) / [React Toolbox](http://react-toolbox.com/)
|
||
* [Semantic UI React](https://react.semantic-ui.com)
|
||
* [Reactstrap](https://reactstrap.github.io/) / [React Bootstrap](https://www.npmjs.com/package/react-bootstrap)
|
||
* [React Foundation](https://react.foundation/)
|
||
* [Ant Design](https://ant.design/) / [Ant Design Mobile](https://mobile.ant.design/)
|
||
* [Blueprint](http://blueprintjs.com/)
|
||
* [Grommet](https://grommet.github.io/)
|
||
* [Elemental UI](http://elemental-ui.com/)
|
||
* [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)
|
||
|
||
### 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)
|
||
* 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)
|
||
* [React Tabs](https://www.npmjs.com/package/react-tabs)
|
||
* Accordion
|
||
* [React Sanfona](https://www.npmjs.com/package/react-sanfona)
|
||
* [React Collapse](https://www.npmjs.com/package/react-collapse)
|
||
* Progress
|
||
* [React Redux Loading Bar](https://www.npmjs.com/package/react-redux-loading-bar) / [NProgress](https://www.npmjs.com/package/nprogress)
|
||
* Form
|
||
* [React Select](http://jedwatson.github.io/react-select/)
|
||
* [React Toggle](https://www.npmjs.com/package/react-toggle)
|
||
* [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 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)
|
||
* [React JSON Schema Form](https://www.npmjs.com/package/react-jsonschema-form)
|
||
* Overlay
|
||
* [React Overlays](https://www.npmjs.com/package/react-overlays)
|
||
* [React Modal](https://www.npmjs.com/package/react-modal) / [vex](https://www.npmjs.com/package/vex-js) / [SweetAlert2](https://www.npmjs.com/package/sweetalert2)
|
||
* [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/)
|
||
* Picker
|
||
* [React Color](http://casesandberg.github.io/react-color/)
|
||
* [React Datepicker](https://hacker0x01.github.io/react-datepicker/) / [React Datetime](https://www.npmjs.com/package/react-datetime) / [React Day Picker](http://react-day-picker.js.org/) / [React Dates](https://www.npmjs.com/package/react-dates) / [Pikaday](https://www.npmjs.com/package/pikaday)
|
||
* 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)
|
||
* 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 TreeView](https://www.npmjs.com/package/react-treeview) / [React Treebeard](https://www.npmjs.com/package/react-treebeard)
|
||
* 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)
|
||
* [React Quill](https://www.npmjs.com/package/react-quill) / [Quill](https://quilljs.com/)
|
||
* [React Ace](https://www.npmjs.com/package/react-ace) / [React Codemirror](https://www.npmjs.com/package/react-codemirror)
|
||
* [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/)
|
||
|
||
## Client Side
|
||
|
||
### UX Libraries
|
||
|
||
* Drag & Drop
|
||
* [React DnD](https://react-dnd.github.io/react-dnd) / [Dragula](https://www.npmjs.com/package/dragula)
|
||
* [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](http://oliviertassinari.github.io/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](http://github.hubspot.com/shepherd/docs/welcome/) / [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)
|
||
|
||
### 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)
|
||
* [Animate Components](https://www.npmjs.com/package/animate-components) / [React Animations](https://www.npmjs.com/package/react-animations)
|
||
* [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)
|
||
* Scrolling
|
||
* [ScrollReveal.js](https://www.npmjs.com/package/scrollreveal) / [ScrollMagic](http://scrollmagic.io/)
|
||
* Parallax
|
||
* Scrolling - [Rellax](https://www.npmjs.com/package/rellax) / [React Springy Parallax](https://www.npmjs.com/package/react-springy-parallax)
|
||
* Orientation - [Parallax](https://www.npmjs.com/package/parallax-js)
|
||
* FLIP
|
||
* [React FLIP Move](https://www.npmjs.com/package/react-flip-move)
|
||
* Characters
|
||
* [React Typist](https://www.npmjs.com/package/react-typist)
|
||
* [React CountUp](https://www.npmjs.com/package/react-countup) / [CountUp.js](https://www.npmjs.com/package/countup.js)
|
||
* 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)
|
||
* [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
|
||
* Shape - [mo-js](http://mojs.io/)
|
||
* SVG - [Vivus](http://maxwellito.github.io/vivus/)
|
||
* [Ant Motion](https://motion.ant.design/)
|
||
* 2D
|
||
* Canvas
|
||
* [Pixi.js](http://www.pixijs.com/) / [Fabric.js](https://github.com/kangax/fabric.js) / [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](http://stack.gl/)
|
||
* [aframe-react](https://www.npmjs.com/package/aframe-react) / [A-Frame](https://aframe.io/)
|
||
* [React VR](https://facebook.github.io/react-vr/)
|
||
* 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/)
|
||
|
||
### 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)
|
||
|
||
## 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)
|
||
|
||
### Server-side Best Practices
|
||
|
||
* 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/)
|
||
* [Introducing JSON](http://json.org/)
|
||
* SaaS
|
||
* [The Twelve-Factor App](https://12factor.net/)
|
||
* 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)
|
||
* [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)
|
||
* [Defining Static Web Apps](https://staticapps.org/articles/defining-static-web-apps/)
|
||
* 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)
|
||
* [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_
|
||
|
||
### 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-server-express](http://dev.apollodata.com/tools/graphql-server/setup.html#graphqlOptions) / [express-graphql](https://www.npmjs.com/package/express-graphql)
|
||
* Rich Framework
|
||
* Configuration - [Hapi](https://hapijs.com/)
|
||
* Realtime - [Feathers](https://feathersjs.com/)
|
||
* Microservices
|
||
* [Micro](https://github.com/zeit/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)
|
||
* [graphql-tools](http://dev.apollodata.com/tools/graphql-tools/index.html)
|
||
* [graphql-anywhere](https://www.npmjs.com/package/graphql-anywhere)
|
||
* 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
|
||
* [nodecube](https://github.com/dexteryy/nodecube) (author's own project)
|
||
* [Nodal](https://github.com/keithwhor/nodal)
|
||
* [Fuge](http://fuge.io/)
|
||
* [Botpress](https://github.com/botpress/botpress)
|
||
|
||
### 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)
|
||
* 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 Browsers - see _[Tooling > Testing](#testing) > Web Testing > Headless Browsers_
|
||
* 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)
|
||
|
||
### 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/)
|
||
|
||
### Cloud Services (China)
|
||
|
||
> The evil twins inside the Great Firewall of China
|
||
|
||
* 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)
|
||
|
||
## 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/)
|
||
* [Karma](https://karma-runner.github.io)
|
||
* Web Testing
|
||
* Integration Testing
|
||
* [Enzyme](http://airbnb.io/enzyme/)
|
||
* Functional Testing
|
||
* Headless Browser Automation - [Selenium WebDriverJS](https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs) / [WebDriverIO](https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs) / [Nightwatch.js](http://nightwatchjs.org/) / [Nightmare](https://github.com/segmentio/nightmare) / [CasperJS](http://casperjs.org/)
|
||
* 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/)
|
||
* 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/)
|
||
|
||
### 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/)
|
||
* CSS / Style Guide
|
||
* [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/)
|
||
* [React Styleguidist](https://react-styleguidist.js.org/)
|
||
* 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)
|
||
|
||
### Toolchain
|
||
|
||
* Compiler / Transpiler / Preprocessor
|
||
* [Babel](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://github.com/babel/babel-preset-env)
|
||
* [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
|
||
* Shims - [Runtime Transform](http://babeljs.io/docs/plugins/transform-runtime/) / [Polyfill](http://babeljs.io/docs/usage/polyfill/)
|
||
* 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/)
|
||
* [Stage 2 Decorators](http://babeljs.io/docs/plugins/transform-decorators/) / [Legacy Decorator](https://www.npmjs.com/package/babel-plugin-transform-decorators-legacy)
|
||
* 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://toddmotto.com/typescript-the-missing-introduction)
|
||
* [PostCSS](https://github.com/postcss/postcss)
|
||
* Standards
|
||
* [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSNext](http://cssnext.io/)
|
||
* [image-set Polyfill](https://www.npmjs.com/package/postcss-image-set-polyfill)
|
||
* [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), [Initial](https://www.npmjs.com/package/postcss-initial)
|
||
* [Pxtorem](https://www.npmjs.com/package/postcss-pxtorem) / [Pixrem](https://www.npmjs.com/package/pixrem)
|
||
* [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)
|
||
* [Easing Gradients](https://www.npmjs.com/package/postcss-easing-gradients)
|
||
* 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](http://webpack.github.io/docs/)
|
||
* [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) / [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)
|
||
* [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)
|
||
* [resolve-url-loader](https://www.npmjs.com/package/resolve-url-loader)
|
||
* [svg-react-loader](https://www.npmjs.com/package/svg-react-loader)
|
||
* [worker-loader](https://www.npmjs.com/package/worker-loader), [wasm-loader](https://www.npmjs.com/package/wasm-loader)
|
||
* [raw-loader](https://www.npmjs.com/package/raw-loader)
|
||
* [json-loader](https://www.npmjs.com/package/json-loader) / [json5-loader](https://www.npmjs.com/package/json5-loader)
|
||
* [handlebars-loader](https://www.npmjs.com/package/handlebars-loader), [html-loader](https://www.npmjs.com/package/html-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)
|
||
* [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)
|
||
* Plugins
|
||
* [Extract Text Plugin](https://www.npmjs.com/package/extract-text-webpack-plugin), [HTML Webpack Plugin](https://www.npmjs.com/package/html-webpack-plugin), [Copy Webpack Plugin](https://github.com/kevlened/copy-webpack-plugin)
|
||
* [Offline Plugin](https://www.npmjs.com/package/offline-plugin), [SW Precache Plugin](https://www.npmjs.com/package/sw-precache-webpack-plugin)
|
||
* [Define Plugin](https://webpack.js.org/plugins/define-plugin/)
|
||
* [Lodash Plugin](https://www.npmjs.com/package/lodash-webpack-plugin)
|
||
* [Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)
|
||
* [Rollup](https://rollupjs.org/)
|
||
* [Webpack and Rollup: the same but different](https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c)
|
||
* Formatter
|
||
* [Prettier](https://www.npmjs.com/package/prettier)
|
||
* [prettier-eslint](https://www.npmjs.com/package/prettier-eslint)
|
||
* [Recast](https://www.npmjs.com/package/recast)
|
||
* [jscodeshift](https://www.npmjs.com/package/jscodeshift)
|
||
* [react-codemod](https://www.npmjs.com/package/react-codemod)
|
||
* [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
|
||
* [babel](https://www.npmjs.com/package/babel-eslint), [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)
|
||
* [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), [graphql](https://www.npmjs.com/package/eslint-plugin-graphql)
|
||
* [flowtype](https://github.com/gajus/eslint-plugin-flowtype), [jsdoc](https://www.npmjs.com/package/eslint-plugin-jsdoc)
|
||
* [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)
|
||
* [filenames](https://www.npmjs.com/package/eslint-plugin-filenames)
|
||
* [Flow](flowtype.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/)
|
||
* [Babili](https://github.com/babel/babili) / [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/image-webpack-loader)
|
||
* [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)
|
||
* [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)
|
||
* 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
|
||
* [gulp-util](https://www.npmjs.com/package/gulp-util), [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)
|
||
|
||
### Workflow
|
||
|
||
* Development
|
||
* Micro Generator
|
||
* [Plop](https://plopjs.com)
|
||
* Live Reload / Watch / Preview
|
||
* [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)
|
||
* [React Hot Loader 3](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/)
|
||
* 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)
|
||
* [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)
|
||
* 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
|
||
* [Next.js](https://github.com/zeit/next.js)
|
||
* [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/)
|
||
* China
|
||
* [阿里云-云监控](https://www.aliyun.com/product/jiankong) + [阿里云-日志服务 SLS](https://www.aliyun.com/product/sls) / [腾讯云-基础监控 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/), [AppNeta](https://www.appneta.com/)
|
||
* [Trace](https://trace.risingstack.com)
|
||
* China
|
||
* [OneAPM](https://www.oneapm.com/) / [听云](http://www.tingyun.com/)
|
||
* [腾讯云-云拨测 CAT](https://www.qcloud.com/product/cat) / [百度云观测](http://ce.baidu.com/)
|
||
* [alinode](https://alinode.aliyun.com/)
|
||
|
||
### 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/)
|
||
* 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)
|
||
* 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)
|
||
* [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 - [ag (The Silver Searcher)](https://github.com/ggreer/the_silver_searcher), [peco](https://github.com/peco/peco), [jq](https://stedolan.github.io/jq)
|
||
* 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)
|
||
|
||
### 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 - [cli](https://www.npmjs.com/package/cli) / [vorpal](https://www.npmjs.com/package/vorpal)
|
||
* 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)
|
||
|
||
### IDE / Editors
|
||
|
||
* [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)
|
||
* Formating
|
||
* [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)
|
||
* 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)
|
||
* 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
|
||
* [VS Code](https://code.visualstudio.com/)
|
||
* [Visual Studio Marketplace](https://marketplace.visualstudio.com/vscode)
|
||
* [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/)
|
||
|
||
### Useful Apps
|
||
|
||
* Playground
|
||
* [CodePen](http://codepen.io/) / [WebpackBin](https://www.webpackbin.com)
|
||
* CDN for npm - [unpkg](https://unpkg.com/)
|
||
* [RunKit](https://runkit.com)
|
||
* [RequestBin](http://requestb.in/)
|
||
* [jsPerf](https://jsperf.com/)
|
||
* [Apollo Launchpad](https://launchpad.graphql.com)
|
||
* [GLSL Sandbox](http://glslsandbox.com/)
|
||
* 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/)
|
||
|
||
### 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) / [HipChat](https://www.npmjs.com/package/hubot-hipchat) / [Discord](http://npmjs.com/package/hubot-discord) / [IRC](https://www.npmjs.com/package/hubot-irc) / [Wechat](https://www.npmjs.com/package/hubot-weixin) / [QQ](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/)
|
||
* Markdown
|
||
* [Mastering Markdown](https://guides.github.com/features/mastering-markdown/)
|
||
* [Markdown: Syntax](https://daringfireball.net/projects/markdown/syntax)
|
||
* Design
|
||
* [Sketch](https://www.sketchapp.com/learn/) + [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)
|
||
* [Figma](https://www.figma.com/)
|
||
* [InVision](https://www.invisionapp.com/)
|