从教女友写代码中学到的,教人写代码在一定程度上是硬件问题
从今年四月一直到七月,我在教我女友写代码。我最大的收获是认识到了教人写代码在一定程度上是个硬件问题。虽然 codecademy、可 汗学 院、Scratch 和其他机构为了教学优化了代码编辑器,但代码编辑器总是卡在它们的软件外壳上。我建议,除了提供优秀的软件和教学材料之外,我们还需要给新手辅助以出色的 硬件。让我来解释一下。
背景
我在卡内基梅隆学的计算机科学。在那里我还讲过几次计算机课。我的代码技术最多算是中等吧,但是足以在诸如 Quora 这样的公司做一名产品设计师。
一年多以前,我在日本遇到的我的女朋友。她在那度过了她的大部分时光。她在东京的一所女子学院学市场营销和日本文化。我们相遇的日子里,她在同样位于东京的一家做支付的初创公司做销售助理。
但是她一直想要当某方面的设计师。因为她对软件有很大的热情,并且对可用性有一定的见解,所以我的职场建议是她可以当一名软件产品设计师。
日本的技术社区只是最近才开始重视设计和用户体验,这个比起西方同类社区要落后几年。在日本,产品设计师的供应量还是比较低的,所以我建议女友可以试一下,尽管她没有受过正式的设计方面的教育。
被说服之后,她在四月辞掉了工作,来到旧金山湾区看我。我们在一起住了三个月。在我的业余时间,我教她一些成为产品设计师的基本知识。她很努力在学,并希望能在回东京的时候能找到一份产品设计的工作。
教女友写代码
我相信所有软件产品设计师都需要写代码。至于原因,请看「网页设计师应该自己写 HTML 和 CSS」和「学习 Rails 让我成为更好的设计师」,都是 37signals 出的。
可能你已经猜到了,我的女朋友从来没有写过代码。我认为这是培训里最大的路障,甚至比学 photoshop 或者其他设计技能更难。所以我们决定先集中力量在写代码上。
我们刚开始学的是 HTML/CSS,然后转到 Jekyll/SCSS 上。她从零学起,到掌握了怎样设计一个博客主题(源码)和展示她的模特照片的画廊(源码),都是用 Jekyll/SCSS 写的。
因为她的英语只是初级水平,所以她的学习资源就很有限,包括在线资源和印刷书籍。我对任何用日文写的初学者用的 HTML/CSS 的书籍或教程没有什么好感,所以我专门为她制作了一本我自己的教材(截屏如下)
我有打算哪天把我的书翻译成英文并出版,但是目前,我想说让我最惊讶的是:对女朋友帮助最大的不是教程的质量,而是她完成教程练习所使用的硬件。
硬件问题一:显示器
女朋友学完基本知识后,我让她用 HTML/CSS 去复制或者模仿我给她精选的设计良好的网站。她的复制品必须看起来和原始的网站一样,并且 HTML 也要符合语法。
学习写代码的理想方法就是做一个真正的项目。因为她没有想要做的网站,那么复制包括 Medium 和 Svbtle 那样的设计良好的网站是最佳之选。
起初她用的是我的老古董 23 吋显示器,还有她自己的 Macbook Air 的显示器,但是很快她就用光屏幕空间了。她明显需要同时开启下面五个窗口:
1. Chrome 窗口显示要复制的实际的网站。见本文封面的右上角。
2. 另一个 Chrome 窗口。显示她当前复制的网站。就是一个本地 HTML 页面。见封面左上角。
3. Sublime Text 2 窗口。分割成 HTML 视图和 CSS 视图。见封面左下角。
4. Evernote 窗口。记录她的笔记和代码片段。见封面右下角。
5. Mac 的 GitHub 窗口。跟踪她做的修改。我第一天就在她的工作流程里加入了 GitHub,这样我就可以用 pull 来查看她的代码。见封面的最左边。
每个窗口都需要大概 1280×800 的像素。我最后只有租给她我的 30 吋家庭影院显示器。它的 2560×1600 像素的分辨率足以平铺上面所说的 4 个窗口。最后一个窗口就留在她的本本上。她用 Moom 来管理窗口。
为何需要同时显示这么多窗口呢?因为新手喜欢能立刻看到代码修改带来的变化。
Brett Victor 在他著名的大作 Learnable Programming 一书中建议“反应式创造”的教学技巧:
反应式创造的思考方式可以这么描述:做出点什么,然后调整,直到它正确为止。
这正好就是我女朋友在做的。她(1)观察目标页面,(2)写代码模仿出目标页面,(3)查看她做的是不是和目标页面看起来相似,(4)重复1~3 步,直到她的页面和目标页面完全一样为止。
在第 2 步和第 3 步,CodeKit 保持运行并不停刷新页面,这样修改的结果不需要按 Commond+R 就能立即可见。她用 Mac 的 GitHub 来做回退。每次迭代,她都会在 Evernote 上作笔记,避免同样的错误犯两次。
这就是五个窗口都要同时打开的原因——将各步骤之间切换的开销降至最低。当所有的东西都可见时,她可以更快的做出反应。
我能听到你们这些高手在高呼:「这也太弱了吧。她可以用 Commond+ 数字或者 Commond+Tab 切换啊。」但是大部分新手都讨厌 tab 键和窗口切换。我们可以教他们这些技巧,但是他们很可能不会按部就班地执行这些快捷键,至少在刚开始不会。新手不必硬要灌输这些不必要的意识。
我的女朋友很快无 30 吋显示器无编程了。我的住所离市区的 Palo Alto 要骑一小会车,那里有许多带 Wifi 的咖啡店。但是她宁愿待在家里,因为有大显示器用。看来是惯坏了的学生。不过她写代码确实比以前快了,而且最后她还掌握了 Commond+ 数字键和 Commond+Tab。
扪心自问,我们这些老手也喜欢大显示器:
前公司的一则趣闻。我是一名留不住人的工程主管。我们团队一名工程师离职去了一家更小更前卫的公司。这是离职的谈话:
- 我:你为什么要离职?
- 他:因为他们有更大的显示器。
因此为什么不给新手也提供大显示器呢?他们是稳定且可视的回馈的最大受益者,他们和窗口管理的斗争也最激烈。
不管程序员变得如何反应迅速,他们始终无法克服屏幕可用面积的局限——平板电脑在智能手机时代还有市场也正是这样的原因。
硬件问题二:键盘
对于新手,他们的键盘——或者更一般地说打字——也可以是一个瓶颈,尽管不大。
问你自己:在代码编辑器之外,你经常会输入像<,>,{,},#这样的字符吗?或者按在 Sublime Text 里表示「在标签里包装选择」的 ctrl+shift+w?不是很常用吧。所以非程序员不熟悉那些键,敲起来很慢。
我会在女友写代码时坐在她身边。每次她错过用快捷键的机会时,我就会提示她。她会把快捷键写作便签上,贴在屏幕边来试着提醒自己。但是一天天过去了,她还是会忘记用那些快捷键。
后来我发现她从来没学过哪个手指用来负责敲哪些键。她那时就是感觉哪个手指自然就用哪个。她可以盲打一些常用词,但比如当我让她输入“{”时,她得去看键盘。她习惯日本键盘布局,但是也无济于事。
为了纠正她的习惯,她买了一个微软人体工程学键盘 4000,这让她不用正确的手指输入变得很难。她还每天学习 Peter 的在线打字课程。在她完成了前十课时,她打字才像一个真正的程序员。她现在很少误输键盘快捷键了。
顺便提一下,这里还有一个方法检查代码新手是否有打字问题:给他/她买一个不带字符的键盘。如果这个让他/她的输入变慢了,就是有问题。
打字的不顺畅可能会成为新手成为高手的阻力。因为随着他们写的代码越来越多,他们的沮丧和低效率会加剧。这可能是我们这些经验丰富的老手想不到的,但是当我们谈论编程教学时要注意这个问题。
结论
对于我的女友来说这两个硬件——显示器和键盘——有巨大的影响。他们也有可能影响大多数新手。代码编辑器会变的更加高级,编程课程也会演进,但是它们永远不会走进硬件的领域。
就像 Andy Hunt 在他的杰出的《程序员的思维修炼:开发认知潜能的九堂课 》一书中表明的,代码菜鸟不仅仅是慢版和无知版的专家。他们的思维是完全不同的。一旦你成为哪怕 高级一点的初学者,你就已经失去了像代码菜鸟那样思考的能力。你可能会说「我想不出她为什么需要同时开启那么多窗口」。但是如果你已经没有菜鸟的思维了, 你当然没办法去「想出」。
我的女友七月份回到日本。她很快就在东京一家创业公司找到了一份初级设计师的工作。但愿我们在硬件上的投资能够赚回来。感谢阅读。
更新(8 月 19 日):我承认这篇文章的主题,“写代码”,和“编程”不是一回事。编程需要控制逻辑,而写代码不用。
不过我的女友在用 Jekyll/SCSS 时也确实用到了控制逻辑。她正在学习 JavaScript,这是一个真正的编程语言。回头合适的时候,我会分享教她编程时获得的经验。