loading...
Cover image for 5 Beautiful Visual Resources for Visual Learners

5 Beautiful Visual Resources for Visual Learners

liaowow profile image Annie Liao ใƒป3 min read

As an infographic designer turned developer, I am always fascinated by effective visual explanations of programming concepts.

I will never forget the first time a key concept clicked for me in a heartbeat after reading this tweet:

Since then, I have been collecting visual resources to help me "get it" sooner than later. Here are my top 5 lifesavers:

1. Maggie Appleton's illustrated.dev

appleton-artwork
This is my go-to place for exploring a new framework, library, or programming language. The magical Maggie can always turn an abstract idea into something tangible and memorable, making it so enjoyable to digest.

I recently came across her behind-the-scene article, in which she explains the power of metaphors by using a powerful metaphor: Time is money.

"We often talk about time through the metaphorical frame of money: That delayed flight cost me an hour. Can I steal a few minutes of your time? I don't know if spending all day on that is worth my while."
appleton-timemoney

Isn't it beautiful? That moment when art jumps in and explains science.

2. Dan Abramov's Just JavaScript

This is actually where I found Maggie's illustrations. If you're a fan of React.js and Redux, then you must have heard of Dan Abramov.

In addition to being a celebrated and prolific tweeter, Dan also crafts a newsletter called Just JavaScript. When I say craft, I am not saying it lightly -- admiring the craftsmanship of his newsletters is like savoring Michelin-star cuisine.

Through his newsletters, I have been introduced to the mental model, with which I gain a better and solid understanding of JavaScript. On top of that, I get to enjoy a visual presentation of his mental models via the magical Maggie:
mental-model-gif
mental-model

If you subscribe to his newsletters, I highly recommend drawing along and completing the exercises.
mental-model-mynote1
mental-model-mynote2

Believe me, it is a rewarding process. You might even get a personal tutorial from Dan himself if you follow through and leave some thorough feedback like I did :)

3. Amelia Wattenberger's Interactive Blog

I found Amelia's visually-appealing blog while googling around and looking for d3.js tutorials. Amelia applied her data visualization expertise to virtually all of her posts.
amelia-d3-collection
amelia-hooks-explainer

Above all, the top-notch UI of her website and the smooth, subtle transitions between each animation definitely elevate the learning experience.
amelia-hooks-interaction

Plus, who doesn't like lavender as the primary color?

4. Lydia Hallie's Visualized Series

Thanks to the DEV team's weekly top posts, I found my first Git commands tutorial, visualized.
hallie-git

As I browsed Lydia's other dev posts, I discover abundant visual resources on JavaScript. Admittedly, I have yet to read through each of them, but I will make sure to check out her interactive quizzes before any JavaScript interviews.

5. Mosh's OOP Explained in 7 minutes

My final stop for the top list is YouTube, a de facto internet library for all things visual.

Among the hundreds of thousands of tutorials uploaded to YouTube, I have enjoyed Mosh's videos the most, specifically the succinct introduction to Object-Oriented Programming.
mosh-oop-screenshot1
mosh-oop-screenshot2

Sometimes I wonder if it's the brevity or the primary color (purple!) that draws me in.


These are my favorite visual gurus thus far. It is such a privilege to be accompanied by these beautifully-crafted resources in my coding journey. Couldn't have made it this far without them.

Posted on May 30 by:

liaowow profile

Annie Liao

@liaowow

Fresh Frontend Developer with full-stack skillset (React with Rails). Former media producer + product owner at Yahoo. Forever infographicist.

Discussion

markdown guide
 

I am a big fan of Amelia Wattenbergers blog, her posts are always so engaging.

I will checkout your other suggestions. Thank you

Build Your Own React is one that always springs to mind.

 

Thanks a lot for sharing these amazing resources! In the same vein, I suggest you take a look at Lin Clark's Code Cartoons. Those really helped me grasp concepts like JIT compilers and WebAssembly ๐Ÿ˜ƒ

 

Oh wow, I love the writing style too. Very conversational and jargon-free. Thanks for sharing this!

 

I really liked the "3. Amelia Wattenberger's Interactive Blog". I really appreciate how instead of bloated classes, a short, neat functional code could be written.

Now please help me wrap my head around the concept, how to unit test such code? It seems beautiful, yet sometimes not exactly intuitive at the first look. But is it testable???

 

I'm a UI designer first and front end guy second who wants to sharpen my JS skills. Thanks for these resources it all looks very helpful.

 

Everyone can relate to visual learning rather than hardcore jargon's . This is awesome list. Thank you for sharing this.

 

Awesome. I know a few of them. But some are new and had been added to the list. Thx

 
 

AWESOME ๐Ÿ‘๐Ÿ‘๐Ÿ‘ I love these. Thank you so much!

 

Thanks for sharing this amazing list โ™ฅ๏ธ

 

These. Are. Insanely. Amazing!!

I'm gonna buy these folks coffee!

 

Excellent resources, especially illustrated.dev. Thank you for sharing.

 

Wonderful list Annie! Thanks for sharing ๐Ÿ™

 

Wow cool resources thanks.
By the way, I don't think Dan is creator of react.js ( are you talking about redux๐Ÿค” ).

 

Oops, I guess his name just keeps showing up whenever I use React, hence the illusion ๐Ÿ˜… Thanks for the correction, Anup!