从教女友写代码中学到的 - Crossin的编程教室

从今年四月一直到七月，我在教我女友写代码。我最大的收获是认识到了教人写代码在一定程度上是个硬件问题。虽然 codecademy、可汗学院、Scratch和其他机构为了教学优化了代码编辑器，但代码编辑器总是卡在它们的软件外壳上。我建议，除了提供优秀的软件和教学材料之外，我们还需要给新手辅助以出色的硬件。让我来解释一下。

我在卡内基梅隆学的计算机科学。在那里我还讲过几次计算机课。我的代码技术最多算是中等吧，但是足以在诸如Quora这样的公司做一名产品设计师。

一年多以前，我在日本遇到的我的女朋友。她在那度过了她的大部分时光。她在东京的一所女子学院学市场营销和日本文化。我们相遇的日子里，她在同样位于东京的一家做支付的初创公司做销售助理。

但是她一直想要当某方面的设计师。因为她对软件有很大的热情，并且对可用性有一定的见解，所以我的职场建议是她可以当一名软件产品设计师。

日本的技术社区只是最近才开始重视设计和用户体验，这个比起西方同类社区要落后几年。在日本，产品设计师的供应量还是比较低的，所以我建议女友可以试一下，尽管她没有受过正式的设计方面的教育。

被说服之后，她在四月辞掉了工作，来到旧金山湾区看我。我们在一起住了三个月。在我的业余时间，我教她一些成为产品设计师的基本知识。她很努力在学，并希望能在回东京的时候能找到一份产品设计的工作。

我相信所有软件产品设计师都需要写代码。至于原因，请看「网页设计师应该自己写HTML和CSS」和「学习Rails让我成为更好的设计师」，都是37signals出的。

可能你已经猜到了，我的女朋友从来没有写过代码。我认为这是培训里最大的路障，甚至比学photoshop或者其他设计技能更难。所以我们决定先集中力量在写代码上。

我们刚开始学的是HTML/CSS，然后转到Jekyll/SCSS上。她从零学起，到掌握了怎样设计一个博客主题（源码）和展示她的模特照片的画廊（源码），都是用Jekyll/SCSS写的。

因为她的英语只是初级水平，所以她的学习资源就很有限，包括在线资源和印刷书籍。我对任何用日文写的初学者用的HTML/CSS的书籍或教程没有什么好感，所以我专门为她制作了一本我自己的教材（截屏如下）

我有打算哪天把我的书翻译成英文并出版，但是目前，我想说让我最惊讶的是：对女朋友帮助最大的不是教程的质量，而是她完成教程练习所使用的硬件。

女朋友学完基本知识后，我让她用HTML/CSS去复制或者模仿我给她精选的设计良好的网站。她的复制品必须看起来和原始的网站一样，并且HTML也要符合语法。

学习写代码的理想方法就是做一个真正的项目。因为她没有想要做的网站，那么复制包括Medium和Svbtle那样的设计良好的网站是最佳之选。

起初她用的是我的老古董23吋显示器，还有她自己的Macbook Air的显示器，但是很快她就用光屏幕空间了。她明显需要同时开启下面五个窗口：

2. 另一个Chrome窗口。显示她当前复制的网站。就是一个本地HTML页面。见封面左上角。

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，这是一个真正的编程语言。回头合适的时候，我会分享教她编程时获得的经验。