Javascript Visual Explanations
This repo contains links to pages in which concepts from JavaScript/frontend ecosystem are explained visually (pictures, diagrams, animations etc.)
- General programming / JavaScript
- Gamedev
- Reactive programming
- React
- Redux
- Vue
- Angular
- Flux
- Relay
- Immutable.js
- Service Workers
- WebAudio
- WebAssembly
- WebGL
- Webpack
- Node.js
- HTML/CSS
- Tools
General programming / JavaScript
- Map, Filter and Reduce – Animated
- Understanding the Almighty Reducer
- Bubbling and Capturing in JavaScript
- CodeAnalogies Blog - Visual explanations of HTML, CSS and JavaScript concepts
- Dev Doodles
- ES modules: A cartoon deep-dive
- How to Remove Array Duplicates in ES6
- Inside look at modern web browser (part 1)
- JavaScript Array Explorer
- JavaScript Getter-Setter Pyramid
- The 2018 Web Developer Roadmap
- Javascript (ES6) Generators — Part I: Understanding Generators
JavaScript Engines
- JavaScript engine fundamentals: optimizing prototypes
- JavaScript engine fundamentals: Shapes and Inline Caches
- V8 internals for JS developers - Mathias Bynens | JSHeroes 2018
Event loop
- Philip Roberts: What the heck is the event loop anyway? | JSConf EU
- Jake Archibald: In The Loop - JSConf.Asia 2018
Functional Programming
Web protocols
- HTTP2 and Front-End Performance with Mark Nottingham
- How does HTTPS provide Encryption? | The Curious Engineer
- How Http/2 works | Http/2 Optimize Website Performance
- SSL TLS HTTPS process explained in 7 minutes
- What is HTTP2?
Gamedev
- A-STAR Pathfinding AI for HTML5 Canvas Games
- Broad Phase Collision Detection Using Spatial Partitioning
- Particle Systems From the Ground Up
Reactive programming
- The introduction to Reactive Programming you've been missing
- Learn RxJS and Reactive Programming principles
- Interactive diagrams of Rx Observables
- JavaScript Reactivity Explained Visually
- Learn to combine RxJs sequences with super intuitive interactive diagrams
- What is an Observable?
- RxJS Operators for Dummies: forkJoin, zip, combineLatest, withLatestFrom
React
- Lifecycle Diagram
- You Got This! Zine - Making web apps with React.js
- Lin Clark: A cartoon guide to performance in React - JSConf Iceland 2016
- What WebAssembly means for React - Lin Clark aka @linclark at @ReactEurope 2017
Codebase
Fiber
- Brief Overview of React Fiber - A Tutorial on its Features and Advantages
- Lin Clark - A Cartoon Intro to Fiber - React Conf 2017
Virtual DOM
Redux
- A cartoon intro to Redux
- Docs need one or more diagrams (Redux issue)
- Redux. From twitter hype to production
- Introduction to Redux
Vue
- Intro to Vue.js: Computed Properties
- Intro to Vue: Communicating Events
- Intro to Vue.js: The Vue Instance
- Lifecycle Diagram
Angular
Flux
Relay
Immutable.js
Service Workers
WebAudio
WebAssembly
- Lin Clark: A Cartoon Intro to WebAssembly | JSConf EU 2017
- Online Module Summit Part 8: Lin Clark on Web Assembly and ESModules
- WebAssembly ES module integration
WebGL
Webpack
- Front End Center — Webpack from First Principles
- Sean Larkin: Webpack: The Core Concepts - NEJS Conf 2016
- Webpack & The Hot Module Replacement
- Webpack — The Confusing Parts
Node.js
HTML/CSS
- A Nerd’s Guide to Color on the Web
- Explaining CSS Specificity — Estelle Weyl — Frontend Masters
- Guidelines - Material Design