5 个适合视觉学习者的精美视觉资源

2025-05-25

5 个适合视觉学习者的精美视觉资源

作为一名信息图表设计师转行从事开发人员,我总是对编程概念的有效视觉解释着迷。

我永远不会忘记读完这条推文后,我第一次瞬间明白了一个关键概念:

从那时起,我一直在收集视觉资源,希望能尽快“抓住重点”。以下是我最常用的五大技巧:

1. Maggie Appleton 的illustrated.dev

阿普尔顿艺术品
这是我探索新框架、新库或新编程语言的首选之地。神奇的 Maggie 总能将抽象的想法转化为切实可行、令人难忘的东西,让人乐在其中。

我最近偶然看到了她的幕后文章,其中她用一个强有力的比喻来解释隐喻的力量:时间就是金钱。

我们经常用金钱来比喻时间那趟延误的航班让我浪费了一个小时。我能占用你几分钟时间吗?我不知道一整天时间做这件事是否值得。
阿普尔顿时代金钱

难道不美吗?那一刻,艺术介入,诠释科学。

2. Dan Abramov 的Just JavaScript

我其实就是在这里找到 Maggie 的插图的。如果你是 React.js 和 Redux 的粉丝,那你一定听说过 Dan Abramov。

Dan 除了是一位声名显赫、多产的推特用户之外,还撰写了名为《Just JavaScript》的简报。我所说的“精湛”并非轻描淡写——欣赏他撰写简报的精湛技艺,如同品尝米其林星级美食。

通过他的新闻通讯,我了解了心智模型,并借此对 JavaScript 有了更深入、更扎实的理解。此外,我还通过神奇的 Maggie 欣赏了他心智模型的视觉呈现:
心理模型-gif
心智模型

如果您订阅了他的时事通讯,我强烈建议您跟着他画画并完成练习。
心智模型-mynote1
心智模型-mynote2

相信我,这是一个非常值得的过程。如果你坚持下去,并像我一样留下一些详尽的反馈,你甚至可能得到Dan本人的私人教程 :)

3. Amelia Wattenberger 的互动博客

我在谷歌上搜索 d3.js 教程时发现了 Amelia 的博客,它看起来非常吸引人。Amelia 几乎把她的数据可视化专业知识运用到了她所有的文章中。
阿米莉亚-d3-系列
阿米莉亚钩子解释器

最重要的是,她网站一流的用户界面以及每个动画之间流畅、微妙的过渡无疑提升了学习体验。
阿米莉亚-胡克斯互动

另外,谁不喜欢薰衣草作为主色调呢?

4. Lydia Hallie的可视化系列

感谢 DEV 团队每周的热门帖子,我找到了我的第一个Git 命令教程,并且是可视化的。

hallie-git

当我浏览 Lydia 的其他开发帖子时,我发现了丰富的 JavaScript 可视化资源。诚然,我还没有逐一看过,但我一定会在参加任何 JavaScript 面试之前先看看她的互动测验。

5. 7分钟讲解Mosh的OOP

我的最后一站是 YouTube,一个事实上的视觉内容互联网图书馆。

在 YouTube 上传的数十万个教程中,我最喜欢 Mosh 的视频,尤其是对面向对象编程的简洁介绍。
mosh-oop-屏幕截图1
mosh-oop-屏幕截图2

有时我想知道是简洁还是原色(紫色!)吸引了我。


这些都是我迄今为止最喜欢的视觉大师。在我的编程之旅中,能够有这些精心制作的资源陪伴,真是莫大的荣幸。如果没有它们,我不可能走到今天。

文章来源:https://dev.to/liaowow/5-beautiful-visual-resources-for-visual-learners-4d7c
PREV
参加“this”测验,了解“this”在 JavaScript 中的工作原理
NEXT
如何使用 SpeaCode 上传代码中的视频/文档?👨‍💻📷🚀