Spellbook of Modern Web Dev
A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development
- This document originated from a bunch of most commonly used links and learning resources I sent to every new web developer on our full-stack web development team.
- What I'm doing in this document now is trying to provide the complete view angle of modern web (app or page) development ruled by JavaScript, reflect technological advance and help developers to acquire APIs, libraries, tools, services, best practices and learning resource which are not outdated and most commonly used.
- I hope this document can help one developer to have more power to do much more and much better, just like a spellbook does in fantasy worlds.
- The JS/web technology is like an ocean of stuff you don’t know. Simply collecting more stuff or composing dozens of "awesome lists" into a single one will only exacerbate the Javascript Fatigue. So this document must stay lean and focus on the most frequent problems and the most commonly used stuff.
- So for each problem domain and each technology, I try my best to pick only one or a few links.
- Which link belongs to "not outdated and most commonly used stuff" is not only decided by clear trends, empirical observation, and working experience, also by public data and web scraping scripts.
- The npm package statistics (like download count) are given more weight than Github repo statistics (like starring data) because npm statistics can better reflect the actual usage and popularity.
- Prefer fine-grained classifications and deep hierarchies over featureless descriptions and distractive comments.
- Ideally, each line is a unique category. The " / " symbol between the links means they are replaceable. The ", " symbol between the links means they are complementary.
- I wish this document could be closer to a kind of knowledge graph or skill tree than a list or a collection.
- It currently contains 2000+ links (projects, tools, plugins, services, articles, books, sites, etc.)
- Feel free to submit the missing or better links in your opinion. Also, please provide the reason.
- Why not add a Europe (or other regions) section? Why not add your project? Why so many React-based projects? Why not Angular/Vue.js/XXX?
Understanding Modern Web Development
- In English: coming soon...
- In Chinese: slides @ JSConf CN 2017
Table of Contents
- Platforms and Languages
- Open Web Platform
- Learning, Reference, Visual Tools
- Performance, Security, Semantics / SEO / Accessibility
- HTML5 / Web APIs
- HTML/DOM, Appearance, Interaction, Access, Network, Media, Graphics, Computing...
- CSS Features
- RWD, Layout, Typography, Text, Animation, Effects...
- Modern CSS / Next-Gen CSS
- CSS Module, PostCSS, CSS in JS
- Best Practices (Skeleton, Methodology, Code Style...)
- Know More about Web Design / UI Design / UX Design (RWD, Atomic Design, Motion Design, Grid System, Typography, Style Guide...)
- Modern JS / Next-Gen JS
- ES6+ Features, Intro to ES6+, Re-intro to JS, Important Proposals, Functional Programming, FRP, Static Typing, Code Style...
- WebAssembly
- Concepts, Features, Rust, ...
- Node.js
- Intro, Workshop, Best Practices...
- Platform Compatibility and Proposal Status
- Platform Status / Releases / Updates, ECMAScript Compatibility
- Proposal Status (W3C WG, WICG, WHATWG, ECMA TC39, Node.js CTC)
- JS Engine (V8, JSC, Chakra), Web/JS Runtime (Electron, Cordova, React Native...), Device...
- Cross-browser / Polyfill Libraries
- Appearance, Interaction, Access, Network, Performance, Offline, Media...
- npm Ecosystem
- Finding Packages (Search, Stats, Rank)
- Dependency Management / Release / Maintenance (npm, yarn, lerna, ncp...)
- Convention (Open Source, SemVer, package.json, Small modules, Isomorphic JS / Universal JS...)
- Universal Utility Libraries
- Standard Library Extensions (FP, OOP, Async...)
- Hashing / Generating
- Parsing / Manipulating (URL, Validator, i18n, Date, Numbers, Color, Text, Buffer / Blob...)
- Logic, Network, Storage, NLP, ML...
- Universal Web Apps / Web Pages
- GUI Framework
- View / ViewModel / ViewController (React)
- Model / App State (Redux)
- API (GraphQL)
- GUI Architectures (MVC, MVP, PM, MVVM, Flux, Redux, Elm, MVI, SAM...)
- UI Toolkits
- CSS, React...
- Standalone UI Components
- Layout, Icon, Button, Form, Overlay, Picker, Content, Editor...
- Client Side
- UX Libraries
- Drag & Drop, Gesture, Scrolling, Zoom, Tooltip, Tour...
- Graphic Libraries
- Animation (Effects, Loading, Scrolling, Parallax, Transition, Timeline, Motion / Curved Path...)
- 2D (Canvas, SVG, Physics...), 3D (WebGL, Physics...)
- Data Visualization, Game...
- Hybrid Libraries
- Electron, React Native
- Server Side
- Network
- HTTP (Intro, Same-origin policy, Performance, HTTPS, HTTP/2, gRPC...)
- TCP, UDP...
- Server-side Best Practices
- Restful API, SaaS, Microservices (API Gateway, Serverless)
- Cloud / Distributed, Web Hosting / Non-distributed
- Authentication / Authorization, Security, Logging / Monitoring, DevOps...
- Microservices / API Services (Node.js)
- Frameworks (RESTful API, Microservices, Serverless, Bots...), GraphQL, DocGen + CodeGen...
- Server-side Libraries (Node.js)
- Configuration, Debugging, Protocols, Network, Crypto, Auth, Storage, Jobs, Scraping, Images, Parsing / Generating, NLP...
- Cloud Services (Global)
- Compute (FaaS / Serverless / WebHook, PaaS, CaaS)
- Storage (Object Storage, DBaaS)
- BaaS (CRUD, Auth, Search, Email, SMS...)
- AIaaS / BDaaS (Natural Language, Computer Vision...)
- Cloud Services (China)
- The evil twins inside the Great Firewall of China
- Tooling
- Testing
- Unit Testing / Test Runner, Test Doubles
- Web Testing (Integration Testing, Functional/E2E Testing, Visual testing, Monkey Testing, Headless Browsers)
- Server-side Testing (Functional Testing, Load Testing)
- Benchmark Testing
- Analysis (Code Coverage, Node.js Security...)
- Documentation
- JS, API, CLI, CSS / Style Guide, Writing
- Toolchain
- Compiler / Transpiler / Preprocessor (Babel, PostCSS...)
- Loader / Builder / Bundler (Webpack, Rollup...)
- Minifier / Compressor / Optimizer (Prepack, Babili / Uglify, imagemin, cssnano / clean-css...)
- Formatter (Prettier, Stylefmt...)
- Static Analysis (ESLint, Flow, StyleLint...)
- Task Automation (npm scripts, Gulp...)
- Workflow
- Development (Micro Generator, Live Reload / Watch / Preview, Dev Tools, HTTP Inspector, Debugging Proxy...)
- Deployment (Process Supervisor, Containers, Container Clusters, PaaS)
- Monitoring (Error Tracking, Logging, APM...)
- Command-line Environment (Mac)
- Terminal, Homebrew, Zsh, Vim, Git, Docker, dotfiles, Utilities...
- Command-line Libraries (Node.js)
- Input (Options/Arguments Parser, Interactive, Configuration...)
- Output (Color / Style, Icon, Updating Log, Notice, Columns, Curses, Drawing...)
- Delivery, OS, API, Parser...
- IDE / Editors
- VSCode Plugins (UI, Formatting, Operating, Static Analysis, Docs, Assistant, Integration...)
- Atom Plugins (UI, Formatting, Operating, Static Analysis, Docs, Assistant, Integration...)
- Out-of-the-box Atom IDE, Other Electron-based IDE, Programming Fonts...
- Useful Apps
- Playground, Visual Tools, Viewer, Docs, Automation...
- Collaboration
- Version Control, ChatOps, Kanban, Markdown, Design...
A Subset as a Learning Path
- Open Web Platform
- HTML5 / Web APIs
- CSS Features
- Modern CSS / Next-Gen CSS
- Modern JS / Next-Gen JS
- Platform Compatibility and Proposal Status
- Network
- Node.js
- npm Ecosystem
- Command-line Environment (Mac)
- IDE / Editors
- GUI Framework
- Microservices / API Services (Node.js)
- Testing
A Subset for Finding Libraries
- Cross-browser / Polyfill Libraries
- Hybrid Libraries
- GUI Framework
- UI Toolkits
- Standalone UI Components
- UX Libraries
- Graphic Libraries
- Universal Utility Libraries
- Microservices / API Services (Node.js)
- Server-side Libraries (Node.js)
- Command-line Libraries (Node.js)
A Subset for Architecture and Infrastructure
- GUI Framework
- Toolchain
- Workflow
- Microservices / API Services (Node.js)
- Server-side Best Practices
- Cloud Services (Global) / Cloud Services (China)
- Documentation
Platforms and Languages
Open Web Platform
- Learning
- Reference
- MDN Web Docs
- HTML, SVG, CSS, DOM, DOM Events, Web APIs
- MDN content Roadmap
- Google Developers
- Web Fundamentals, Update, HTML5Rocks Archived Tutorials
- Apple
- WebKit JS
- CSSDB
- CSS-Tricks's CSS Almanac, Codrops' CSS Reference
- Mastering CSS Principles: A Comprehensive Guide
- HTML: The Living Standard (Web Developer Edition)
- The Web platform: Browser technologies
- W3Fools
- W3Schools Responds to W3Fools
- Why shouldn't I use W3Schools?, Why do people hate W3schools?, Does W3Schools really suck?
- Visual Tools
- see Tooling > Useful Apps > Visual Tools
- Performance
- Rendering
- How Browsers Work: Behind the scenes of modern web browsers, \ How Browsers Lay Out Web Pages
- Rendering Performance
- GPU Animation: Doing It Right / An Introduction to Hardware Acceleration with CSS Animations
- CSS will-change
- CSS Containment in Chrome 52
- Loading
- How DNS works
- Network resilience
- Evolution of Script Loading, Browser script loading roundup
- JavaScript Start-up Performance
- Critical Rendering Path, CSS and the critical path
- Offline
- see HTML5 / Web APIs > Offline
- Measure
- Performance budgets 101
- Measure Performance with the RAIL Model
- Measuring Page Load Speed with Navigation Timing
- Measuring network performance with Resource Timing API
- User Timing API
- Why Web Developers Need to Care about Interactivity
- Optimization
- Fast load times
- Why Performance Matters
- Performance audits
- Lighthouse Audit References
- Security
- Semantics
>> Return to Table of Contents
HTML5 / Web APIs
- HTML / DOM
- Appearance
- Interaction
- Desktop
- MouseEvent, WheelEvent, KeyboardEvent
- Drag and Drop, Pointer Lock
- Mobile
- TouchEvent
- DeviceOrientationEvent + DeviceMotionEvent
- Hardware Agnostic
- PointerEvent, Selection
- Intersection Observer API (Intro)
- Resize Observer API
- Gamepad, Web Speech
- Access
- Network
- Offline
- Overview
- Offline UX Considerations
- The offline cookbook
- Offline First - HTML5 technologies for a faster, smarter, more engaging web
- Web Storage, IndexedDB
- FileReader, File, Blob
- Service Worker
- Service Workers Explained
- Service Workers: an Introduction, The Service Worker Lifecycle
- Instant Loading Web Apps with an Application Shell Architecture
- Service Worker Cookbook
- Status - Is ServiceWorker Ready?
- Progressive Web Apps
- Progressive Web App Checklist, PWA audits
- Offline Storage for Progressive Web Apps
- The PRPL pattern
- Workshop - Codelabs - Your First Progressive Web App
- Media
- Graphics
- SVG
- Styling And Animating SVGs With CSS
- Canvas
- HTML5 Canvas
- WebGL
- WebGL by example, WebGL tutorial, Learning WebGL
- Primer: Shaders, An Introduction to Shaders
- The Book of Shaders
- Workshop -Shader School, WebGL Workshop, WebGL Academy
- Learning Modern 3D Graphics Programming
- WebXR / Immersive Web
- Welcome to the immersive web
- Progressive WebXR
- Computing
- Web Cryptography
- Web Workers
- WebAssembly
- see WebAssembly
>> Return to Table of Contents
CSS Features
- Basics
- You Don't Need JavaScript
- CSS Selectors from CSS4 till CSS1
- CSS Diner - Where we feast on CSS Selectors!
- An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements
- @supports Rule (Feature Queries)
- Houdini
- Houdini: Demystifying CSS, Houdini: Maybe The Most Exciting Development In CSS You've Never Heard Of
- Responsive Web Design
- Layout
- Flexbox, CSS Grid Layout
- CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout
- A Complete Guide to Flexbox (CSS-Tricks) / Flexbox (Codrops)
- A Complete Guide to Grid (CSS-Tricks) / A Complete Guide to CSS Grid (Codrops)
- Traditional
- Learn CSS Layout
- CSS Floats 101, All About Floats, CSS Float Theory: Things You Should Know
- CSS Positioning 101
- The Z-Index CSS Property: A Comprehensive Look
- Centering in CSS: A Complete Guide, Absolute Center an Image, How To Center in CSS
- Web Typography
- Text
- Animation
- CSS Transition
- Using CSS transitions
- Intro to CSS 3D transforms
- CSS Animation
- The Guide To CSS Animation: Principles and Examples
- Upgrading CSS Animation With Motion Curves
- Motion Path
- Animating Clipped Elements In SVG
- Moving along a curved path in CSS with layered animation
- Future Use: CSS Motion Paths
- Effects
>> Return to Table of Contents
Modern CSS / Next-Gen CSS
- Component-based CSS
- Utility Class / Functional CSS / Utility-first CSS / Atomic CSS
- The Case for Atomic / Utility-First CSS
- A Year of Utility Classes
- So you need a CSS utility library?
- see UI Toolkits
- CSS Modules
- The End of Global CSS
- Tools - see Tooling > Toolchain > Builder / Bundler > Webpack
- Styled-Components / Emotion
- CSS in JS
- Styled Components: Enforcing Best Practices In Component-Based Systems
- Writing your styles in JS ≠ writing inline styles
- Libraries
- Preprocessor-based CSS
- PostCSS
- Intro
- Preset Env
- More Plugins - see Tooling > Toolchain > Compiler / Transpiler / Preprocessor > PostCSS
- Best Practices
- Sanitize.css / Normalize.css / Reset.css
- Methodology
- BEM
- OOCSS
- SMACSS
- ITCSS, RSCSS, SOLID CSS
- CSS Guidelines, MaintainableCSS
- Code Style
- Idiomatic CSS
- Airbnb CSS / Sass Styleguide
- Airbnb CSS-in-JavaScript Style Guide
- CSS + HTML
- Know More about Web Design / UI Design / UX Design
- Responsive/Adaptive Web Design
- Responsive Web Design Basics /\ Responsive Web Design: What It Is And How To Use It
- The Difference Between Responsive and Adaptive Design
- The Current State of Adaptive Design
- Responsivedesign.is - Design, Develop
- Patterns
- Motion Design
- Creating Usability with Motion: The UX in Motion Manifesto
- 10 principles for smooth web animations
- Grid System - A Comprehensive Introduction to Grids in Web Design
- calc() grid system - Lost Grid
- flexbox grid system - Flexbox Grid
- The 8-Point Grid
- Typography
- Typography.js
- Gutenberg
- The Equilateral Triangle of a Perfect Paragraph
- The Elements of Typographic Style Applied to the Web
- Why is Vertical Rhythm an Important Typography Practice?
- More Meaningful Typography
- Atomic Design (Book)
- The Atomic Workflow — People, Process, And Making Design Systems Happen
- The “Other” Interface: Atomic Design With Sass
- Atomic Design – Your Ultimate Guide to Scalable & Modular CSS (Sass)
- Design System
- A comprehensive guide to design systems, Design Systems Handbook
- Design Tokens
- Style Guide
- Style Guide Driven Development / Living Style Guides
- Tools - see Tooling > Documentation > Style Guide
- Examples
- Apple's Human Interface Guidelines
- Google's Material Design
- Microsoft's Fluent Design System
- Airbnb's new design system
- Github's Primer
- Atlassian's Design Guidelines
- Salesforce's Lightning Design System
- Yelp's Styleguide
- IBM's Living Language
- BBC's GEL Guidelines
- A List Apart's pattern library
- USA.gov's Web Design Standards
- MailChimp's Email Design Guide
>> Return to Table of Contents
Modern JS / Next-Gen JS
- ES6+ Features
- Intro to ES6+
- Re-intro to JS
- Articles
- MDN
- Dmitry Soshnikov
- JavaScript. The Core
- ECMA-262-3 in detail
- Execution Contexts, Variable object, This, Scope chain, Functions, Closures, Evaluation strategy
- OOP: The general theory, ECMAScript implementation,
- ECMA-262-5 in detail
- Properties and Property Descriptors, Strict Mode
- Lexical environments: Common Theory, ECMAScript implementation
- Notes
- Equality operators, Default values of parameters
- Dmitri Pavlutin
- Other
- Books
- Eloquent JavaScript
- Speaking JavaScript
- You Don't Know JS (book series)
- Reference
- Important Proposals
- ESM (ECMAScript Modules)
- Intro
- Browsers
- Node.js
- Dynamic Import (
import()) - Class Fields & Static Properties
- Decorators
- async/await, Promise, Promise Promote, Promises/A+
- Observables
- Static Typing
- Concurrent JS / Parallel JavaScript
- Concurrent JavaScript: It can work!
- The Path to Parallel JavaScript
- Functional Programming
- Functional Programming for JavaScript People
- Functional Programming Jargon
- Composing Software
- Books
- Professor Frisby's Mostly Adequate Guide to Functional Programming
- Functional-Light JavaScript
- Lodash's FP Guide
- Introduction to Immutable.js and Functional Programming Concepts
- Why Ramda?
- The Philosophy of Ramda
- Favoring Curry
- Thinking in Ramda
- Fantasy Land
- From Callback to Future -> Functor -> Monad
- ADT (Algebraic Data Types)
- JavaScript and Type Thinking
- Functors, Applicatives, And Monads In Pictures
- FRP (Functional Reactive Programming)
- Static Typing
- Concurrent JS / Parallel JavaScript
- Code Style
>> Return to Table of Contents
WebAssembly
- References
- Concepts
- Features
- Workshop
- Languages
Node.js
- Intro
- The Art of Node
- You Don’t Know Node
- RisingStack's / NodeSource's Understanding the Node.js Event Loop
- Node.js Garbage Collection Explained
- Stream Handbook
- A Brief History of Node Streams
- Understanding Object Streams
- Keeping the Node.js core small
- Debugging Node.js with Google Chrome
- Add v8_inspector supports
- How to Debug Node.js with the Best Tools Available
- Workshop
- Best Practices
>> Return to Table of Contents
Platform Compatibility and Proposal Status
- Web
- Platform Status
- Can I Use
- Chrome, WebKit, Firefox, Edge, TBS (China)
- Platform Releases
- Chrome, Safari (Webkit), Firefox, Edge
- Platform Updates
- Mozilla Hacks
- Web Updates, Chromium Blog
- Webkit Blog
- Microsoft Edge Dev Blog
- Writing forward-compatible websites
- Polyfill - What is a Polyfill?
- Feature Detection - Modernizr/feature-detects, feature.js
- Browser/Device/Runtime Detection - see Platforms and Languages > Universal Utility Libraries > Parsing / Manipulating
- Graded Browser Support - Grade components, not browsers
- CSS Support Guide for Email Clients / Email Client CSS Support
- Email Design Reference + HTML Email Templates
- Node.js
- Platform Releases
- Node.js Release Working Group
- ECMAScript Support
- ECMAScript compatibility table
- Node.js ES2015+ Support
- Node 10.x LTS - Supports ES modules natively (without
--experimental-modules) - Node.8.5 - Supports ES modules natively (
.mjs+--experimental-modules) - Node 8.3 - V8 6.0, Ignition + Turbofan launched
- Node 8.0 LTS - V8 5.8, Five New Features You Need To Know
- Node 7.6 - V8 5.5, Async functions
- Node 6.0 LTS - V8 5.0, 93% of ES6 language features
- Performance - Six Speed
- Proposal Status
- W3C WG (World Wide Web Consortium Working Groups)
- Web Platform Publication Status
- CSS current work
- Current HTML5 Specifications
- Inside
- WICG (Web Incubator Community Group)
- Proposals
- WHATWG (Web Hypertext Application Technology Working Group)
- WHATWG Live Standards
- Inside
- ECMA TC39 (Ecma International Technical Committee 39)
- Status, process, and documents for ECMA262
- Inside
- Node.js TSC (Node.js Foundation Technical Steering Committee)
- Meeting Notes
- Inside
- JS Engine
- A Guide to JavaScript Engines for Idiots
- V8
- How the V8 engine works?
- Internal
- Next Generation
- JSC
- JavaScriptCore, the WebKit JS implementation
- Internal
- Next Generation
- Chakra
- Microsoft Edge’s JavaScript engine to go open-source
- Architecture Overview
- Node-ChakraCore and VM Neutrality in Node.js
- Internal
- Next Generation
- SpiderMonkey
- The monkeys in 2013
- Benchmarks
- The truth about traditional JavaScript benchmarks
- Browser Benchmarks
- Web Runtime / JS Runtime
- Electron
- Tutorials - Essential Electron
- Cordova
- Platform Support
- Top Mistakes by Developers new to Cordova/Phonegap
- Curated Plugins - Awesome Cordova Plugins
- Finding Plugins - plugreg / Plugin Search
- React Native / NativeScript / Weex
- React Native Styling Cheat Sheet
- Bridging in React Native - An in-depth look into React Native's core
- Tutorials - React Native Express, React Native Workshop, React Native Training
- Examples - 30 Days of React Native
- Device
>> Return to Table of Contents
Cross-browser / Polyfill Libraries
- Appearance
- Responsive Web Design
- Media Queries - Enquire.js
- Responsive Image - Picturefill
- Viewport Units Buggyfill
- Web Typography
@font-face- Font Face Observer- Web Animation API
- Web Animations Polyfill
- Web Components
- webcomponents.js (v1 spec polyfills) / Polymer
- Interaction
- Keyboard - Mousetrap
scroll-behavior: smooth;- Smoothscroll Polyfill- PointerEvent - PEP / React Pointable
- ResizeObserver Polyfill
- Access
- Web Notifications API - Push.js / Notify.js
- Clipboard API - Clipboard.js / copy-to-clipboard
- Fullscreen API - Screenfull
- Page Visibility API - Visibility.js
<iframe>- iframe-resizer
- Network
- XHR - window.fetch Polyfill
- Server-Sent Events - EventSource Polyfill
- WebSocket - Socket.IO-client / Engine.IO-client / SockJS-client
- Performance
- Web Worker - Greenlet / Workerize
document-write- PostScribe- User Timing API - marky
- Offline
- Service Work - Workbox
- File / FileReader API
- FileSaver.js / StreamSaver.js
- blob-util
- IndexedDB
- LocalStorage API - localForage
- Media
>> Return to Table of Contents
npm Ecosystem
- npm
- Finding Packages
- Dependency Management / Release / Maintenance
- Convention
- Open Source
- README
- Changelog
- License
- SemVer
- SemVer (Semantic Versioning) / The semantic versioner for npm / Semver: A Primer
- npm semver calculator
- package.json
- Specifics of npm's package.json
- Specifics of yarn's package.json
- What's the difference between dependencies, devDependencies and peerDependencies
- Small Modules
- Unix Philosophy and Node.js
- module best practices
- how I write modules
- Hyper Modular / One-line Modules
- Isomorphic JS / Universal JS
- Isomorphic JavaScript: The Future of Web Apps
- Universal JavaScript
>> Return to Table of Contents
Universal Utility Libraries
- Standard Library Extensions
- Utilities
- Lodash
- is.js
- FP
- Ramda
- Immutable
- OOP
- lodash-decorators
- Stampit
- Async
- Observable - RxJS
- Promise - es6-promisify, Bluebird
- Generator - Co
- Callback - Async
- Syntax
- XRegExp
- Node.js API
- node-libs-browser
- EventEmitter3
- Debugging
- debug / pino
- Hashing / Generating
- Parsing / Manipulating
- URL
- URL Parsing - qs, URI.js
- IP Address Manipulation - ip
- Environment
- UA Sniffing - UAParser.js / useragent
- Information - platform.js
- Runtime Detection - is-electron-renderer / electron-is
- Validator
- String Validation - validator.js
- Schema Validation - joi / Ajv
- i18n
- Intl.js + FormatJS / i18next
- Date
- Date Manipulation - Moment.js
- Numbers
- Number Manipulation - Numeral.js
- Money - accounting.js
- Color
- Color Manipulation - Chroma.js, Chromatism, randomColor
- Color Extraction - node-vibrant / Colorify.js
- Text
- Text Manipulation - Voca.js / string.js
- Characters - string-width, string-length
- HTML Entities - he
- Human-readable Slug - speakingurl
- XSS Sanitizer - DOMPurify / xss
- HTTP - mime-types, content-type
- JSON Superset - serialize-javascript, JSON5
- Markdown - marked / markdown-it
- Links Recognition - linkify-it
- Language Detection - franc
- Text Differencing - diff
- JSON Differencing - deep-diff
- Search - Fuse.js / fuzzysearch / Lunr.js / js-worker-search, regexgen / escape-string-regexp
- DSL Parser - PEG.js / nearley
- Buffer / Blob
- Type Detection - file-type, image-type
- Size Detection - probe-image-size
- Image Manipulation - jimp
- Image Crop - Smartcrop.js
- QR Code / Barcode - qrcode / jsbarcode
- Logic
- Rate Limiter - Bottleneck / Limiter
- Network
- HTTP / XHR
- Low-level - Isomorphic Fetch
- High-level
- GraphQL - lokka
- TCP
- MQTT
- UDP / P2P
- Simple Peer / JS SIP
- WebTorrent
- Storage
- Computation
- NLP
- ML/DL
>> Return to Table of Contents
Universal Web Apps / Web Pages
GUI Framework
- View / ViewModel / ViewController
- Model / App State
- Redux
- Learning
- Reduce Boilerplate
- redux-cube (Author's own project)
- Connect
- Action Types, Action Creators, Reducer Switch
- Asnyc Actions
- State
- normalizr
- Immutalbe - see Universal Utility Libraries > Standard Library Extensions > FP > Immutable
- redux-immutable
- redux-persist
- redux-undo
- redux-reset
- UI Patterns
- App Behaviours
- Development
- redux-devtools-extension
- redux-logger
- Testing - see Testing > Web Testing > Integration Testing
- MobX
- Baobab / Freezer
- API / Data Source
- GraphQL
- Learning
- Queries and Mutations
- Playground - GraphQLHub, Explore GraphQL
- State Management
- Apollo Client
- redux-source (Author's own project)
- graphql-anywhere
- graphql-tools
- Offline First
- Routing
- i18n
- Monitoring / Error Capture
- react-ga
- redux-segment
- redux-raven-middleware / raven-for-redux
- redux-catch
- redux-beacon
- Services - see Tooling > Workflow > Monitoring
- Debugging
- Server-side Rendering
- see Tooling > Workflow > Deployment > Publishing App
- Static Web
- JAMstack
- see Tooling > Workflow > Deployment > Publishing App
- Scaffold / Boilerplate / Generator
- create-react-app / angular-cli / vue-cli
- Next.js
- webcube (Author's own project)
- Starter Kits Recommended by the React Team
- JavaScript Stack from Scratch
- Static Site Generator - Gatsby / Metalsmith / Hexo / Assemble
- GUI Architectures
- Comparison
- Scaling Isomorphic JavaScript Code
- Comparison of Architecture presentation patterns MVP(SC),MVP(PV),PM,MVVM and MVC
- Unidirectional User Interface Architectures
- Change And Its Detection In JavaScript Frameworks
- Martin Fowler's eaaDev
- Patterns For Large-Scale JavaScript Application Architecture
- MVC - A, B, C
- Understanding MVC And MVP (For JavaScript And Backbone Developers)
- Understanding MVVM - A Guide For JavaScript Developers
- Flux Concepts
- Flux - In Depth Overview
- Redux - Reinventing Flux - Interview with Dan Abramov
- The Elm Architecture
- MVI (Model-View-Intent) in Cycle.js
- What Developers Need to Know about MVI (Model-View-Intent)
- SAM (State-Action-Model)
>> Return to Table of Contents
UI Toolkits
- CSS
- React
>> Return to Table of Contents
Standalone UI Components
- Layout
- Grid - React FlexBox Grid
- Masonry - React Masonry Component / masonry-layout / bricks.js / Justified Layout
- Split - React Split Pane / Split.js
- Dashboard - React Grid Layout
- Icon
- Progress
- Button
- Buttons
- Indicators - React Ladda / Ladda / React Progress Button
- Accordion
- Picker
- Input
- Form
- Overlay
- Content
- Carousel - React Slick / Nuka Carousel
- React Paginate
- React Rating
- List / Table - React Virtualized / React Table / React List
- Spreadsheet - React Data Grid / React Handsontable / React Datasheet
- TreeView - React Treebeard / React TreeView
- JSON Viewer - React JSON Tree
- React QR Code
- Email Table - Oy Vey
- Editor
- Widget
>> Return to Table of Contents
Client Side
UX Libraries
- Drag & Drop
- Gesture
- Scrolling
- Viewport and Elements
- React Waypoint / Waypoints, \ React ScrollMonitor / ScrollMonitor, \ React Visibility Sensor
- React Sticky
- React Headroom / Headroom.js
- React Infinite Scroller / React Infinite
- React Lazyload
- React Pull to Refresh
- Smooth Scrolling - React Scroll
- Scrollable - React iScroll / iScroll / Zynga Scroller
- Scrollable Container - React Custom Scrollbars / React Scroll Box / React Scrollbar / Overthrow
- Zoom
- Image Loupe - Drift / React Image Magnify
- Image Viewer - React Images / React Image Lightbox / LightGallery / SmartPhoto
- Crop
- Resize
- Tooltip
- Tour
- Accessiblity
>> Return to Table of Contents
Graphic Libraries
- Animation
- Effects
- Animate.css / Magic Animations / All Animation CSS3 / Motion CSS / Effeckt.css / CSS3 Animation Cheat Sheet
- Hover.css
- Transformicons / Hamburgers
- Loading
- Queue
- Characters
- Parallax / Scrolling
- ScrollReveal.js / ScrollMagic / Rellax
- rc-scroll-anim / React Springy Parallax
- Orientation - Parallax
- Easing
- d3-ease / tween-functions
- bezier-easing
- Keyframe / Transition
- Style
- Anything
- Anime.js / React Anime
- Between Shapes - flubber
- Lightweight Tweening Engine - shifty / tween.js
- GSAP - TweenLite, GSAP - TweenMax
- Keyframe + Timeline
- Style
- Anything
- Motion / Curved Path
- SVG - Vivus
- Shape - mo-js
- rc-tween-one
- 2D
- Canvas
- Pixi.js / Fabric.js
- React Pixi / ReactPixiFiber / React Konva
- Isometric - obelisk.js
- Creative - p5.js
- Fonts - opentype.js
- SVG
- Snap.svg / Raphaël
- Physics
- Matter.js
- 3D
- WebGL
- Three.js / React Three / React Three Renderer
- Babylon.js
- stackgl
- aframe-react / A-Frame
- React 360
- Physics
- cannon.js / ammo.js / oimo.js
- Data Visualization
- React Sparklines / React Trend / vx
- Recharts / Victory
- ECharts / Highcharts (Commercial) / React Highcharts / Google Charts / React Google Charts
- Plotly.js
- AntV G2
- Chart.js / React ChartJS / Chartist.js
- Graph - Cytoscape.js, AntV G6
- Timesheet.js, Canvas Gauges
- GIS - Leaflet, Turf.js, OpenLayers, Cesium
- D3.js
- Word Cloud - d3-cloud
- Constraint - d3-force / cola.js
- Awesome D3
- Game
>> Return to Table of Contents
Hybrid Libraries
- Electron
- Persistence
- Electron Settings
- Auto Launch
- Electron Window State
- Electron LetsMove
- UI
- Electron Window
- About Window
- Electron Context Menu
- Menubar
- Interaction
- Electron Localshortcut
- Debug
- Electron Log
- Electron Debug
- React Native
- UI Toolkits
- NativeBase
- React Native Elements
- Standalone UI Components
- Vector Icons
- Loading Spinner Overlay / SpinKit
- Progress
- Button
- Tabs
- Drawer
- Modalbox
- DatePicker
- Maps
- UX
- React Navigation / Navigation
- Push Notification / OneSignal
- Parsed Text
- Swiper
- TabView / Scrollable TabView
- Invertible Scroll View, Gifted Chat
- Keyboard Spacer
- Access
- Device Info
- Permissions
- Keychain
- Config
- Image Picker / Image Crop Picker
- Filesystem
- Communications
- Graphic
- SVG
- Blur
- Animatable
- Lottie
- Media
- Video
- Camera
- Sound
- Storage
- Realm
- Simple Store
>> Return to Table of Contents
Server Side
Network
- HTTP
- Intro
- An overview of HTTP, \ Introduction to HTTP
- Evolution of HTTP
- Identifying resources on the Web / \ Understanding URIs
- Architecture of the World Wide Web: Identification
- MIME types
- HTTP Messages
- Connection management in HTTP/1.x
- Redirections in HTTP
- Reference
- HTTP headers
- HTTP response status codes / httpstatuses.com
- Same-origin policy
- HTTP access control (CORS) / Using CORS
- Content Security Policy (CSP) - Google / Mozilla
- Performance
- High Performance Browser Networking, \ Ideal HTTP Performance
- HTTP Caching - Google, Mozilla
- Compression in HTTP
- HTTPS
- Why HTTPS Matters
- Is TLS Fast Yet? / HTTP vs HTTPS Test
- HTTP Strict-Transport-Security (HSTS)
- What Is Mixed Content?, Preventing Mixed Content
- HTTP/2
- http2 explained / \ Introduction to HTTP/2
- HTTP/2 FAQ
- A Comprehensive Guide To HTTP/2 Server Push
- gRPC
- What is gRPC?
- Protocol Buffers
- TCP
- UDP
>> Return to Table of Contents
Server-side Best Practices
- SaaS
- Restful API
- Microservices
- A pattern language for microservices
- Microservice Architecture, Monolithic Architecture
- Decompose by business capability, subdomain
- Service instance per container, Service deployment platform
- Externalized configuration, Microservice chassis
- Service discovery (Server-side, Client-side), Service registry, Remote Procedure Invocation
- Database per service, Shared database
- Microservices: From Design to Deployment
- Microservices Resource Guide
- API Gateway
- Pattern: API Gateway / Backend for Front-End
- Why an API Gateway?
- Moving from REST to GraphQL / From REST to GraphQL / GraphQL vs. REST
- Serverless and GraphQL: A Perfect Match for the New Cloud Paradigm
- Serverless
- Pattern: Serverless deployment
- Microservices without the Servers
- The Next Layer of Abstraction in Cloud Computing is Serverless
- The essential guide to serverless technologies and architectures, \ An essential guide to the serverless ecosystem
- Serverless Architecture: Five Design Patterns, \ Serverless Code Patterns
- Cloud / Distributed
- Architecture
- AWS Well-Architected
- Azure's Cloud Fundamentals - Architecture styles, Pillars of software quality, Design principles
- Static
- Static Content Hosting, Valet Key, Content Delivery Network
- Queue / Jobs
- Queue-Based Load Leveling, Competing Consumers, Priority Queue
- Background jobs
- Decompose
- Federated Identity
- Pipes and Filters
- Compute Resource Consolidation
- Configuration
- External Configuration Store, Runtime Reconfiguration
- Storage / Querying
- Cache-Aside, Caching
- CQRS, Event Sourcing
- Index Table, Materialized View
- Data partitioning, Sharding
- Resiliency / Availability
- Retry, Circuit Breaker, Transient fault handling
- Compensating Transaction
- Health Endpoint Monitoring, Leader Election, Scheduler Agent Supervisor
- The Reactive Manifesto
- Multitenant
- Manage Identity in Multitenant Applications
- Old-fashioned Web Hosting / Non-distributed
- Authentication / Authorization
- Cookies vs Tokens: The Definitive Guide, \ The Ins and Outs of Token Based Authentication
- Introduction to JSON Web Tokens
- An Introduction to OAuth 2, Understanding OAuth2
- The OAuth Bible
- Tokens used by Auth0
- Understanding Refresh Tokens
- How To Safely Store A Password, \ You Wouldn't Base64 a Password - Cryptography Decoded, \ How to securely hash passwords?
- Weak Signature Algorithm
- Security
- Logging / Monitoring
- DevOps
- Deployments Best Practices
- Start your DevOps journey
- The Practical DevOps Playbook
- Tools - see Tooling > Workflow > Deployment > DevOps
>> Return to Table of Contents
Microservices / API Services (Node.js)
- Frameworks
- RESTful API
- Middleware Framework
- Rich Framework
- Microservices
- Micro / Seneca / StdLib
- Serverless
- Serverless Framework
- IronFunctions
- Bots
- Botkit
- GraphQL
- DocGen + CodeGen
- API Blueprint / Swagger / RAML
- Parser - Protagonist / Drafter
- Renderer - Aglio
- Validator - Dredd
- JSON Schema
- Understanding JSON Schema
- JSON Schema Based Editor
- See Tooling > Documentation
- Scaffold / Boilerplate / Generator
>> Return to Table of Contents
Server-side Libraries (Node.js)
- Configuration
- Debugging
- Protocols
- Network
- WebSocket - ws / Socket.IO / Engine.IO / SockJS-node
- Server-Sent Event - faye-websocket
- HTTP/2 - spdy
- gRPC - grpc
- AMQP - amqplib
- download
- Email - Nodemailer
- Email HTML - mailgen
- Crypto
- Auth
- JWT - jsonwebtoken
- passwordless
- oauth
- OAuth Providers - hello.js / grant
- svg-captcha
- Storage
- Jobs
- Parallel - webworker-threads
- Queue - kue / bull
- Scheduler - node-schedule
- Scraping
- HTML Traversing - cheerio, jsdom
- HTML Parsing - parse5 / htmlparser2
- Extract Article - read-art / node-readability
- Extract Metadata - url-unshort / embedza
- Web Crawler - simplecrawler / x-ray / scrape-it / Headless Chrome Crawler
- Headless Browsers Automation - see Tooling > Testing > Web Testing > Functional Testing > Headless Browser Automation
- Images
- Canvas / WebGL API - node-canvas / gl
- Image Manipulation - gm / sharp
- Capture Screenshots - pageres
- QR Code / Barcode - qr-image
- Computer Vision - tracking.js / opencv
- Parsing / Generating
- NLP
>> Return to Table of Contents
Cloud Services (Global)
- Compute
- FaaS / Serverless / WebHook
- AWS Lambda / Google Cloud Functions
- webtask / hook.io
- Graphcool Functions
- Amazon API Gateway
- PaaS
- See Tooling > Workflow > Deployment > DevOps > PaaS
- CaaS
- Amazon ECS / Google Container Engine
- Storage
- Object Storage
- Amazon S3 / Google Cloud Storage
- imgix
- DBaaS
- In-Memory Key-Value NoSQL - Amazon ElastiCache
- Redis - Compose / Redise Cloud / Heroku Redis
- Document NoSQL - Amazon DynamoDB / Google Cloud Datastore
- MongoDB - Compose / mLab / MongoDB Atlas
- CouchDB - Couchbase / Cloudant
- Wide Column NoSQL - Google Bigtable
- SQL - Amazon RDS / Google Cloud SQL
- PostgreSQL - Compose / Heroku Postgres
- MySQL - Compose
- NewSQL - Google Cloud Spanner
- Queue - Amazon SQS / Amazon Kinesis / Google Cloud Pub/Sub
- Kafka - Heroku Kafka
- RabbitMQ - Compose
- Analytics - Amazon CloudSearch
- Elasticsearch - Amazon Elasticsearch Service / Elastic Cloud / Bonsai
- Warehouse - Amazon Redshift / Google BigQuery
- BaaS
- CRUD
- Realtime
- GraphQL
- CMS
- Auth
- Auth0 / Amazon Cognito / Firebase Authentication
- OAuth.io
- CAPTCHA
- Search - Algolia
- Email - SendGrid / Mailgun / Mandrill / Amazon SES
- SMS - Nexmo / Twilio / Amazon SNS
- Payment - Stripe
- Maps - Mapbox
- Customer Support - Intercom / Zendesk
- IM - Discord
- Form - Typeform.io / Form.io
- AIaaS / BDaaS
- Natural Language
- NLP - Google Natural Language API
- Speech Recognition / Speech Synthesis
- Translation - Google Cloud Translation API
- Computer Vision
- Amazon Rekognition / Google Cloud Vision API
- Google Cloud Video Intelligence API
>> Return to Table of Contents
Cloud Services (China)
The evil twins inside the Great Firewall of China
- Compute
- FaaS / Serverless / WebHook
- 阿里云-函数计算 / 腾讯云-无服务器云函数 SCF
- 阿里云-API 网关
- PaaS
- See Tooling > Workflow > Deployment > DevOps > PaaS
- CaaS
- 阿里云-容器服务 / 腾讯云-容器服务 CCS / DaoCloud
- Storage
- Object Storage
- 阿里云-对象存储 OSS / 腾讯云-对象存储 COS
- DBaaS
- In-Memory Key-Value NoSQL
- Redis - 阿里云-云数据库 Redis 版 / 腾讯云-云存储 Redis
- Document NoSQL
- MongoDB - 阿里云-云数据库 MongoDB版 / 腾讯云-文档数据库 MongoDB
- Wide Column NoSQL - 阿里云-表格存储 OTS
- HBase - 阿里云-云数据库 HBase 版 / 腾讯云-列式数据库 HBase
- SQL
- PostgreSQL - 阿里云-云数据库 PostgreSQL 版 / 腾讯云-云数据库 CDB for PostgreSQL
- MySQL - 阿里云-云数据库 MySQL 版 / 腾讯云-云数据库 CDB for MySQL
- Queue - 阿里云-消息服务 MNS / 腾讯云-消息服务 CMQ
- Kafka - 腾讯云-消息服务 CKAFKA
- Analytics - 阿里云-开放搜索 OpenSearch / 腾讯云搜 TCS
- Warehouse - 阿里云-MaxCompute (ODPS) / 腾讯云-大数据处理套件TBDS
- BaaS
- AIaaS / BDaaS
- Natural Language
- NLP
- Speech Recognition / Speech Synthesis
- Translation - 腾讯云-机器翻译
- Computer Vision
- 腾讯云-万象优图 CI
- 阿里云-印刷文字识别
- Graphs / Networks / Clusters
- 阿里云-推荐引擎 / 腾讯云-云推荐引擎 CRE
- 阿里云-关系网络分析
- 阿里云-机器学习PAI-网络分析
- Persona
- 阿里云-画像分析 / 腾讯云-智能推荐 IR
>> Return to Table of Contents
Tooling
Testing
- Unit Testing / Test Runner
- Web Testing
- Integration Testing
- Components - Enzyme
- Reducers
- Functional Testing / E2E Testing
- Headless Browser Automation
- DevTools API
- Headless Chrome - Puppeteer / Chromy
- electron-prebuilt - Nightmare
- WebDriver API - Selenium WebDriverJS / WebDriverIO / Nightwatch.js / CasperJS / Protractor
- AWS Lambda - Lambdium
- Cloud - BrowserStack Automate / Sauce Labs
- Visual Testing
- React Storybook / React Cosmos
- BrowserStack
- Monkey Testing
- gremlins.js
- Headless Browsers
- Browsers
- Chromium - Headless Chrome/Chromium
- Chromium + Node.js - electron-prebuilt
- WebKit - PhantomJS
- Why you should stop using PhantomJS
- Gecko - SlimerJS
- In-memory X11 Display Server
- Docker
- Server-side Testing
- Benchmark Testing
- JS
- Benchmark.js
- Speedracer
- stats.js
- Network
- wrk / httpstat
- Test Doubles (Fakes, Mocks, Stubs and Spies)
- Fake Data
- Faker.js / Chance.js
- JSON Schema Faker
- placeholder.com
- HTTP Mocking - Nock
- Monkey Patching - Mockery, babel-plugin-rewire
- SinonJS / testdouble.js
- Best Practices for Spies, Stubs and Mocks in Sinon.js
- testdouble.js vs. sinon.js
- Analysis
- Code Coverage
- Istanbul
- Software Complexity
- escomplex / complexity-report
- Node.js Security
- nsp / snyk
- Web Page
- Lighthouse / pwmetrics
- PageSpeed Insights
- Varvy SEO tool
>> Return to Table of Contents
Documentation
- JS
- API
- CLI
- Style Guide
- Markdown + JSX - docz
- JS - Storybook
- JS comments - React Styleguidist
- CSS comments - KSS (Knyle Style Sheets)
- kss-node
- SC5 Style Guide Generator
- Writing
>> Return to Table of Contents
Toolchain
- Compiler / Transpiler / Preprocessor
- Babel
- Setting up ES6
- Babel User Handbook, Babel Plugin Handbook
- Presets
- Plugins
- Proposals
- Babel progress on ECMAScript proposals
- Shims - @babel/polyfill (useBuiltIns) / core-js
- async/await - fast-async (NoDent)
- Stage 3, Stage 2, Stage 1, Stage 0
- Node.js
- add-module-exports
- Root Import / Webpack Alias
- React
- JSX Control Statements
- React CSS Modules
- Libraries
- lodash, ramda
- Optimization
- transform-remove-console
- TypeScript
- TypeScript: the missing introduction
- PostCSS
- Standards
- Utilities
- Assets
- Syntax
- node-sass
- PostHTML
- Loader / Builder / Bundler
- Webpack
- webpack-howto
- Loaders
- babel-loader, ts-loader / awesome-typescript-loader, vue-loader
- imports-loader
- exports-loader
- css-loader, style-loader / isomorphic-style-loader
- postcss-loader, scss-loader, less-loader
- resolve-url-loader
- workerize-loader / worker-loader
- raw-loader
- html-loader
- shader-loader / glslify-loader
- image-webpack-loader / img-loader
- svg-react-loader, react-markdown-loader
- url-loader, svg-url-loader
- file-loader
- thread-loader, cache-loader, val-loader
- Plugins
- Extract Text Plugin, Webpack Manifest Plugin
- Copy Webpack Plugin, Clean Webpack Plugin
- HTML Webpack Plugin
- HTML Webpack Template
- Plugins
- Define Plugin / Environment Plugin
- Provide Plugin
- Shimming Global
- Ignore Plugin, Watch Ignore Plugin
- Module Concatenation Plugin, Lodash Plugin
- UglifyJS Webpack Plugin / Babel Minify Webpack Plugin
- Workbox Webpack Plugins, Offline Plugin
- Bundle Analyzer
- Fork TS Checker Webpack Plugin, HappyPack
- Rollup
- Webpack and Rollup: the same but different
- Formatter
- ESLint with autofix feature - see Static Analysis
- Prettier
- prettier-eslint
- Codemod - Effective JavaScript Codemods
- jscodeshift
- react-codemod
- Recast
- stylefmt
- Static Analysis
- ESLint
- ESLint Rules
- Plugins
- Presets
- eslint-config-webcube (Author's own project)
- eslint-config-airbnb
- eslint-config-react-app
- Flow
- flow-typed
- Flow Runtime
- StyleLint
- doiuse
- Colorguard
- postcss-bem-linter
- HTMLHint
- Minifier / Compressor / Optimizer
- Task Automation
- npm-run-script, npm-scripts
- task automation with npm run, \ How to Use npm as a Build Tool
- Git Hooks
- Environment Variables - env-cmd, cross-env
- get-port, public-ip
- Gulp
- gulp - The vision, history, and future of the project
- Why you shouldn’t create a gulp plugin
- Gulpfile API
- Utilities
>> Return to Table of Contents
Workflow
- Development
- Micro Generator
- Plop
- Live Reload / Watch / Preview
- webpack-serve
- webpack-dev-server
- Hot Module Replacement / React Hot Loader
- Browsersync
- Electron - Electron Connect
- React Native - Expo
- Node.js - nodemon
- Dev Tools
- Chrome DevTools / Firefox Developer Tools / Safari Web Inspector / Microsoft Edge F12 Dev Tools
- Console - Console API, Command Line API
- Third-party Panels
- Reactotron
- Electron - Devtron
- React Native Debugger
- HTTP Inspector
- Paw / Postman / HTTPie
- Debugging Proxy
- AnyProxy / Fiddler
- Tamper Chrome
- Deployment
- Publishing App
- Server-side Rendering
- Static Web
- Dynamic Routing + CDN
- Superstatic
- Object Storage + CDN
- Global
- China
- Packaged App
- DevOps
- Process Supervisor
- Containers
- Container Clusters
- PaaS
- Global
- now
- heroku - heroku-cli
- China
- LeanCloud-云引擎 (云函数, 网站托管) - lean-cli
- Monitoring
- Error Tracking
- Capturing client-side JavaScript errors, Front-End Error Handling
- Services
- Logging
- Global
- China
- APM (Application Performance Management)
- Global
- China
- OneAPM / 听云
- 监控宝 / 百度云观测 / 360网站服务监控 / 腾讯云-云拨测 CAT
- 阿里云 Node.js 性能平台
>> Return to Table of Contents
Command-line Environment (Mac)
- Intro
- Terminal
- Package Manager
- Shell
- Vim
- Git
- Docker for Mac
- dotfiles
- Utilities
>> Return to Table of Contents
Command-line Libraries (Node.js)
- Input
- Output
- Delivery
- update-notifier
- Reporting Usage - insight
- Self-contained Executable - pkg
- Framework
- Generator - Yeoman
- OS
- Shell Commands - ShellJS
- Filesystem
- Filesystem API - fs-extra / fs-jetpack
- Wildcard Matching - glob / globby, matcher
- Virtual Filesystem - vinyl
- Temporary File - tmp
- File Locking - proper-lockfile
- Finding - find-up, readdirp
- Watch - chokidar / gaze
- Local
- network-address
- clipboardy
- API
- Git - simple-git / nodegit
- Docker - dockerode
- SSH - ssh2
- Parser
>> Return to Table of Contents
IDE / Editors
- VS Code Plugins
- UI
- vscode-icons
- Indenticator
- Operating
- VSCodeVim
- Search node_modules
- Path Intellisense
- npm Intellisense
- Lorem ipsum / Chinese Lorem Ipsum
- Snippets
- Formatting
- ESLint
- Prettier / stylefmt
- EditorConfig
- change-case
- Align
- Static Analysis
- Flow Language Support
- Stylelint
- HTMLHint
- Syntax
- Docs
- Dash
- Regex Previewer
- Color Picker
- Swagger Viewer
- API Elements extension
- Assistant
- Settings Sync
- Project Manager
- Bookmarks
- TODO Highlight
- Quokka.js - Live Scratchpad for JavaScript
- Integration
- VCS
- Share Code
- Debug
- React Native Tools
- Cordova Tools
- Write
- Atom Plugins
- UI
- fonts
- file-icons
- highlight-line, highlight-selected
- indent-guide-improved, trailing-spaces
- Operating
- vim-mode-plus, jumpy
- Sublime-Style-Column-Selection
- Emmet
- Snippets
- Formatting
- auto-detect-indentation, editorconfig
- prettier-atom
- atom-stylefmt / postcss-sorting / atom-beautify
- aligner / atom-alignment
- toggle-quotes
- Static Analysis
- file-types
- language-babel, atom-ternjs
- language-postcss
- language-mjml
- linter-eslint, linter-flow, linter-stylelint, linter-htmlhint, linter-mjml, linter-jsonlint, linter-js-yaml
- Docs
- dash
- Hyperclick, js-hyperclick
- keybinding-cheatsheet
- Assistant
- Project Manager
- todo-show / imdone-atom
- Integration
- GitHub for Atom
- Build
- Markdown Preview Plus
- Out-of-the-box Atom IDE
- Other Electron-based IDE
- WebStorm
- Programming Fonts
>> Return to Table of Contents
Useful Apps
- Playground
- Visual Tools
- Performance
- Cuzillion
- Critical Path CSS Generator
- CSS
- cssreference.io
- EnjoyCSS
- Easing - cubic-bezier / Ceaser CSS Easing Animation Tool / Custom easing functions / Easing functions
- Flexbox - Fibonacci Flexbox Composer / CSS Flexbox Please! / Flexy Boxes / Flexbox Playground / flexplorer
- Animation - CSS3 Keyframes Animation Generator / Mantra / Bounce.js
- Gradient - Ultimate CSS Gradient Generator
- Quantity Queries Builder
- Shapes - CSS triangle generator, Tridiv CSS 3D Editor
- HTML Table Generator
- JS
- Keyboard Event Viewer
- Web Audio Playground
- Regex101 / Debuggex
- Viewer
- Docs
- Automation
>> Return to Table of Contents
Collaboration
- Version Control
- ChatOps
- Kanban
- What is Kanban? - A, B
- Getting Started With Trello
- Github Project Boards
- Presentation
- Markdown
- Mastering Markdown
- Markdown: Syntax
- Diagram
- Mermaid
- Slides
- Remark
- Design
>> Return to Table of Contents