Many years ago I searched long and hard for visual learning resources to help me with web development. I struggled to find any! The closest thing I could find was arrays of apple and banana emojis:
const ar = [ 🍌 , 🍌 , 🍎 , 🍌 ];
ar.filter(fruit => fruit === 🍎) // results in [ 🍎 ];
The creativity in this blog is simply outstanding. I only recently came across this, and I absolutely love it. The drawings and sketches help you understand some really complex topics, from ES Modules to to Inside a super fast CSS engine.
What I especially love about this series is that it tackles intermediate to advanced subjects. These can be really difficult to represent visually, and even more difficult to explain succinvtly with the aid of the visuals. The text is as important as the cartoon, and Lin Clark, the creator, is brilliant at both.
Lydia Hallie is my hero. She has an ability to take concepts that are hard to explain and condense them into colourful, animated graphics with short and concise explanations. Her blogs are among my favourite of all time, and they include:
- Generators and Iterators
- Promises & Async / Await
- The Event Loop
This is a top visual learning resource for any web developer. Git is a part of every day for most developers. And yet, many are afraid of it. This is because there is a lot that happens behind the scenes, and the fear of "losing everything" can prevent you from understanding it deeply. This website allows you to visualize the branches and commits, and see exactly what happens after each command.
The areas covered include:
- basic git commands
- modifying the source tree
- finding lost commits
- interactive rebasing
👉 Computational Fairy Tales by Jeremy Kubica
If you are learning design patterns and algorithms, this book is for you! Often I found the implementation part of an algorithm dizzying, and after you have studied a few it is easy to mix them up. The stories in this book make each algorithm unforgettable, and help you see the "bigger picture" - exactly what The Great Sync advocates for effective learning.
What I love about these stories is they are all connected - an important mnemonic principle for rooting images to a single location, instead of a mixed bag of disconnected analogies that are difficult to recall. I can also confidently say that each story is amusing and captivating.
There is so much covered in these stories, including:
- data structures
- arrays and linked lists
- Big-O notation
- binary search
The course covers these fundamental areas:
- values & variables
- statements & expressions
- primitive values
- objects and functions
- null and undefined
- properties and prototypes
Visual learning is not to be mistaken for a "short cut". It is not about avoiding actual coding, and it should never be dismissed as "something only for beginners". Every one of the resources above help you look at code with perspective. It's perspective which enables you to solve problems - the ultimate job of a developer.
I hope you enjoyed the list 😊