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
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."
Isn't it beautiful? That moment when art jumps in and explains science.
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.
If you subscribe to his newsletters, I highly recommend drawing along and completing the exercises.
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.
Above all, the top-notch UI of her website and the smooth, subtle transitions between each animation definitely elevate the learning experience.
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.
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.
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.
Top comments (15)
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???
Everyone can relate to visual learning rather than hardcore jargon's . This is awesome list. Thank you for sharing this.
Wonderful list Annie! Thanks for sharing 🙏
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.
These. Are. Insanely. Amazing!!
I'm gonna buy these folks coffee!
Excellent resources, especially illustrated.dev. Thank you for sharing.
Thanks for sharing this list!
AWESOME 👍👍👍 I love these. Thank you so much!
Awesome. I know a few of them. But some are new and had been added to the list. Thx
Thanks for sharing this amazing list ♥️
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!