5 Beautiful Visual Resources for Visual Learners
Tags: javascript, productivity, design
Published: 2020-05-30 19:21:13

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:
{% twitter 741089564329054208 %}
 
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](https://illustrated.dev/)
![appleton-artwork](https://dev-to-uploads.s3.amazonaws.com/i/s16w2810x9w84xw7so8a.png)
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](https://illustrated.dev/drawinginvisibles1), 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](https://dev-to-uploads.s3.amazonaws.com/i/rgqvmh941v4rwpvr7p7z.png)

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

### 2. Dan Abramov's [Just JavaScript](https://justjavascript.com/)

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](https://justjavascript.com/). 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](https://dev-to-uploads.s3.amazonaws.com/i/yk1lt56pd52b2s0yn3lu.gif)
![mental-model](https://dev-to-uploads.s3.amazonaws.com/i/cqnjyo0iirnh2bk9nisd.jpeg)

If you subscribe to his newsletters, I highly recommend drawing along and completing the exercises. 
![mental-model-mynote1](https://dev-to-uploads.s3.amazonaws.com/i/j5thdai99zhzqlvhq1j1.jpg)
![mental-model-mynote2](https://dev-to-uploads.s3.amazonaws.com/i/rumrqmrpljfsevifs93i.jpg)

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](https://wattenberger.com/blog/react-hooks)

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](https://dev-to-uploads.s3.amazonaws.com/i/cg0orqsmv0tyby6f8yic.png)
![amelia-hooks-explainer](https://dev-to-uploads.s3.amazonaws.com/i/ffoxamjnf58d306toi29.png)


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](https://dev-to-uploads.s3.amazonaws.com/i/s8ef6jwflwoho36y2ult.gif)

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


### 4. Lydia Hallie's [Visualized Series](https://dev.to/lydiahallie)

Thanks to the DEV team's weekly top posts, I found my first [Git commands tutorial](https://dev.to/lydiahallie/cs-visualized-useful-git-commands-37p1), visualized. 
![hallie-git](https://res.cloudinary.com/practicaldev/image/fetch/s--EIY4OOcE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/dwyukhq8yj2xliq4i50e.gif)

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](https://www.youtube.com/watch?v=pTB0EiLXUC8)

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](https://dev-to-uploads.s3.amazonaws.com/i/ouuzdm94p5ejmoz8sum6.png)
![mosh-oop-screenshot2](https://dev-to-uploads.s3.amazonaws.com/i/emhhfypdh840zowxsjza.png)

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

<hr/>

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.