Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/hex13/javascript-visual-explanations

Javascript Visual Explanations - concepts from JS/frontend ecosystem explained visually (pictures, diagrams, animations etc.)
https://github.com/hex13/javascript-visual-explanations
Last synced: about 2 months ago
JSON representation
Javascript Visual Explanations - concepts from JS/frontend ecosystem explained visually (pictures, diagrams, animations etc.)
Host: GitHub
URL: https://github.com/hex13/javascript-visual-explanations
Owner: hex13
License: mit
Created: 2018-08-30T10:57:00.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2023-03-05T17:10:21.000Z (over 1 year ago)
Last Synced: 2024-07-18T23:34:06.049Z (2 months ago)
Homepage:
Size: 26.4 KB
Stars: 244
Watchers: 15
Forks: 21
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        # 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](#general-programming--javascript)

  * [Gamedev](#gamedev)

  * [Reactive programming](#reactive-programming)

  * [React](#react)

  * [Redux](#redux)

  * [Vue](#vue)

  * [Angular](#angular)

  * [Flux](#flux)

  * [Relay](#relay)

  * [Immutable.js](#immutablejs)

  * [Service Workers](#service-workers)

  * [WebAudio](#webaudio)

  * [WebAssembly](#webassembly)

  * [WebGL](#webgl)

  * [Webpack](#webpack)

  * [Node.js](#nodejs)

  * [HTML/CSS](#htmlcss)

  * [Tools](#tools)

## General programming / JavaScript 

* [Map, Filter and Reduce – Animated](https://medium.com/@js_tut/map-filter-and-reduce-animated-7fe391a35a47)

* [Understanding the Almighty Reducer](https://css-tricks.com/understanding-the-almighty-reducer/)

* [Bubbling and Capturing in JavaScript](https://www.youtube.com/watch?v=3gNLqmqVWHo)

* [CodeAnalogies Blog - Visual explanations of HTML, CSS and JavaScript concepts](https://blog.codeanalogies.com/)

* [Dev Doodles](https://www.instagram.com/dev_doodles/)

* [ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)

* [How to Remove Array Duplicates in ES6](https://medium.com/dailyjs/how-to-remove-array-duplicates-in-es6-5daa8789641c)

* [Inside look at modern web browser (part 1)](https://developers.google.com/web/updates/2018/09/inside-browser-part1)

* [JavaScript Array Explorer](https://sdras.github.io/array-explorer/)

* [JavaScript Getter-Setter Pyramid](https://staltz.com/javascript-getter-setter-pyramid.html)

* [The 2018 Web Developer Roadmap](https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d)

* [Javascript (ES6) Generators — Part I: Understanding Generators](https://medium.com/@hidace/javascript-es6-generators-part-i-understanding-generators-93dea22bf1b)

#### JavaScript Engines

* [JavaScript engine fundamentals: optimizing prototypes](https://mathiasbynens.be/notes/prototypes)

* [JavaScript engine fundamentals: Shapes and Inline Caches](https://mathiasbynens.be/notes/shapes-ics)

* [V8 internals for JS developers - Mathias Bynens | JSHeroes 2018](https://www.youtube.com/watch?v=5UZzT_hgsl0)

#### Event loop

* [Philip Roberts: What the heck is the event loop anyway? | JSConf EU](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

* [Jake Archibald: In The Loop - JSConf.Asia 2018](https://www.youtube.com/watch?v=cCOL7MC4Pl0)

#### Functional Programming

* [Javascript Functor, Applicative, Monads in pictures](https://medium.com/@tzehsiang/javascript-functor-applicative-monads-in-pictures-b567c6415221)

* [Learn Ramda](https://davesnx.github.io/learn-ramda/)

#### Web protocols

* [HTTP2 and Front-End Performance with Mark Nottingham](https://www.youtube.com/watch?v=GIDXISQs67w)

* [How does HTTPS provide Encryption? | The Curious Engineer](https://www.youtube.com/watch?v=w0QbnxKRD0w)

* [How Http/2 works | Http/2 Optimize Website Performance](https://www.youtube.com/watch?v=RjnNaKLfjEU)

* [SSL TLS HTTPS process explained in 7 minutes](https://www.youtube.com/watch?v=4nGrOpo0Cuc)

* [What is HTTP2?](https://www.youtube.com/watch?v=WfA1uDAgXf8)

## Gamedev

* [A-STAR Pathfinding AI for HTML5 Canvas Games](http://buildnewgames.com/astar/)

* [Broad Phase Collision Detection Using Spatial Partitioning](http://buildnewgames.com/broad-phase-collision-detection/)

* [Particle Systems From the Ground Up](http://buildnewgames.com/particle-systems/)

## Reactive programming

* [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)

* [Learn RxJS and Reactive Programming principles](https://reactive.how/)

* [Interactive diagrams of Rx Observables](http://rxmarbles.com/)

* [JavaScript Reactivity Explained Visually](https://www.youtube.com/watch?v=7Cjb7Xj8fEI)

* [Learn to combine RxJs sequences with super intuitive interactive diagrams](https://blog.angularindepth.com/learn-to-combine-rxjs-sequences-with-super-intuitive-interactive-diagrams-20fce8e6511)

* [What is an Observable?](https://www.youtube.com/watch?v=XbOuCBuQepI)

* [RxJS Operators for Dummies: forkJoin, zip, combineLatest, withLatestFrom](https://scotch.io/tutorials/rxjs-operators-for-dummies-forkjoin-zip-combinelatest-withlatestfrom)

## React

* [Lifecycle Diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

* [You Got This! Zine - Making web apps with React.js](https://glitch.com/you-got-this/2)

* [Lin Clark: A cartoon guide to performance in React - JSConf Iceland 2016](https://www.youtube.com/watch?v=NGxVLnJKhP8)

* [What WebAssembly means for React - Lin Clark aka @linclark at @ReactEurope 2017](https://www.youtube.com/watch?v=3GHJ4cbxsVQ)

#### Codebase

* [Under the hood: React](https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/)

#### Fiber

* [Brief Overview of React Fiber - A Tutorial on its Features and Advantages](https://www.youtube.com/watch?v=0fUmOPQUv-Q)

* [Lin Clark - A Cartoon Intro to Fiber - React Conf 2017](https://www.youtube.com/watch?v=ZCuYPiUIONs)

#### Virtual DOM

* [React and the Virtual DOM](https://www.youtube.com/watch?v=BYbgopx44vo)

* [Virtual DOM and ReactJS - How ReactJS works - Tamil Tutorials](https://www.youtube.com/watch?v=S-m8axqtUDE)

## Redux

* [A cartoon intro to Redux](https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6)

* [Docs need one or more diagrams (Redux issue)](https://github.com/reduxjs/redux/issues/653#issuecomment-216844781)

* [Redux. From twitter hype to production](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/23)

* [Introduction to Redux](https://www.youtube.com/watch?v=ky4CzcSt2tQ)

## Vue

* [Intro to Vue.js: Computed Properties](https://www.youtube.com/watch?v=NK-Cy4IHwI4)

* [Intro to Vue: Communicating Events](https://www.youtube.com/watch?v=EYyHIMmilUY)

* [Intro to Vue.js: The Vue Instance](https://www.youtube.com/watch?v=DyndGu0fPSE)

* [Lifecycle Diagram](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram)

## Angular

* [@Self or @Optional @Host? The visual guide to Angular DI decorators](https://medium.com/frontend-coach/self-or-optional-host-the-visual-guide-to-angular-di-decorators-73fbbb5c8658)

## Flux

* [A cartoon intro to Flux](https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207)

## Relay

* [A cartoon intro to Facebook's Relay](https://code-cartoons.com/a-cartoon-intro-to-facebook-s-relay-part-1-3ec1a127bca5)

## Immutable.js

* [Immutable.js Tutorial - The Advantages of Using Immutable.js](https://www.youtube.com/watch?v=cHKG4b2XNig)

* [Using Immutable js With React](https://www.youtube.com/watch?v=D70Bk_PWmEE)

## Service Workers

* [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers/)

* [The Service Worker Lifecycle](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle)

## WebAudio 

* [JavaScript Systems Music](https://teropa.info/blog/2016/07/28/javascript-systems-music.html)

* [Basic concepts behind Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API)

## WebAssembly

* [Lin Clark: A Cartoon Intro to WebAssembly | JSConf EU 2017](https://www.youtube.com/watch?v=HktWin_LPf4)

* [Online Module Summit Part 8: Lin Clark on Web Assembly and ESModules](https://www.youtube.com/watch?v=cKRg6H5_aRE)

* [WebAssembly ES module integration](https://www.youtube.com/watch?v=qR_b5gajwug)

## WebGL

* [WebGL How It Works](https://webglfundamentals.org/webgl/lessons/webgl-how-it-works.html)

* [WebGL interactive reminder by Mark Green](http://pixelatron.com/coding/webgl/index.html)

* [WebGL State diagram](https://webglfundamentals.org/webgl/lessons/resources/webgl-state-diagram.html)

* [Raw WebGL](https://alain.xyz/blog/raw-webgl)

## Webpack

* [Front End Center — Webpack from First Principles](https://www.youtube.com/watch?v=WQue1AN93YU)

* [Sean Larkin: Webpack: The Core Concepts - NEJS Conf 2016](https://www.youtube.com/watch?v=AZPYL30ozCY)

* [Webpack & The Hot Module Replacement](https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07)

* [Webpack — The Confusing Parts](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9)

## Node.js

* [You Got This! Zine - Making web apps with Node.js](https://glitch.com/you-got-this/)

## HTML/CSS

* [A Nerd’s Guide to Color on the Web](https://css-tricks.com/nerds-guide-color-web/)

* [Explaining CSS Specificity — Estelle Weyl — Frontend Masters](https://www.youtube.com/watch?v=SLC83iesr60)

* [Guidelines - Material Design](https://material.io/design/guidelines-overview/)

#### Flex

* [Flexbox Ninja](https://flexbox.ninja/)

* [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

* [Flexbox: The Animated Tutorial](https://medium.freecodecamp.org/flexbox-the-animated-tutorial-263e7d8864e5)

#### Grid

* [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

* [CSS Grid — The Beginner’s Guide](https://medium.freecodecamp.org/css-grid-the-beginners-guide-45998e6f6b8)

* [Grid by Example](https://gridbyexample.com/examples/)

## Tools

#### Project Understanding

* [Project Explorer](https://sdras.github.io/project-explorer-site/)

#### AST

* [JavaScript AST Visualizer](http://resources.jointjs.com/demos/javascript-ast)

* [AST Explorer](https://astexplorer.net/)

#### Code execution

* [JavaScript Tutor - Visualize JavaScript code execution to learn JavaScript online](http://www.pythontutor.com/javascript.html#mode=edit) 

#### Dependencies / Codebase / Bundling

* [Madge - Create graphs from your CommonJS, AMD or ES6 module dependencies](https://github.com/pahen/madge)

* [Webpack Visualizer](https://chrisbateman.github.io/webpack-visualizer/)

#### GraphQL

* [GraphQL editor - visual node editor for GraphQL](https://github.com/slothking-online/graphql-editor)

#### HTML/CSS

* [Interactive Flex Editor](http://www.csstutorial.org/flex-both.html)

* [CSS Grid Generator](https://cssgrid-generator.netlify.com/)

#### Regular expressions

* [Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript](https://regex101.com/)

* [Regexly](https://regexly.chipto.io/)

#### Rx.js 

* [Rx Visualizer](https://rxviz.com/)

#### WebAudio

* [Web Audio Playground](http://webaudioplayground.appspot.com/#)

#### 2D Graphics

* [Phaser 2 Sandbox](https://phaser.io/sandbox)

#### WebGL / 3D Graphics

* [BabylonJS Sandbox - View glTF, glb, obj and babylon files](https://sandbox.babylonjs.com/)

* [three.js / editor](https://threejs.org/editor/)

* [three.js playGnd](http://threejsplaygnd.brangerbriz.net/)