Crossin的编程教室

标题: 从教女友写代码中学到的 [打印本页]

作者: crossin先生    时间: 2013-10-25 13:44
标题: 从教女友写代码中学到的
从教女友写代码中学到的,教人写代码在一定程度上是硬件问题

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

背景
我在卡内基梅隆学的计算机科学。在那里我还讲过几次计算机课。我的代码技术最多算是中等吧,但是足以在诸如Quora这样的公司做一名产品设计师。
一年多以前,我在日本遇到的我的女朋友。她在那度过了她的大部分时光。她在东京的一所女子学院学市场营销和日本文化。我们相遇的日子里,她在同样位于东京的一家做支付的初创公司做销售助理。
但是她一直想要当某方面的设计师。因为她对软件有很大的热情,并且对可用性有一定的见解,所以我的职场建议是她可以当一名软件产品设计师。
日本的技术社区只是最近才开始重视设计和用户体验,这个比起西方同类社区要落后几年。在日本,产品设计师的供应量还是比较低的,所以我建议女友可以试一下,尽管她没有受过正式的设计方面的教育。
被说服之后,她在四月辞掉了工作,来到旧金山湾区看我。我们在一起住了三个月。在我的业余时间,我教她一些成为产品设计师的基本知识。她很努力在学,并希望能在回东京的时候能找到一份产品设计的工作。

教女友写代码
我相信所有软件产品设计师都需要写代码。至于原因,请看「网页设计师应该自己写HTML和CSS」和「学习Rails让我成为更好的设计师」,都是37signals出的。
可能你已经猜到了,我的女朋友从来没有写过代码。我认为这是培训里最大的路障,甚至比学photoshop或者其他设计技能更难。所以我们决定先集中力量在写代码上。
我们刚开始学的是HTML/CSS,然后转到Jekyll/SCSS上。她从零学起,到掌握了怎样设计一个博客主题源码)和展示她的模特照片的画廊源码),都是用Jekyll/SCSS写的。
因为她的英语只是初级水平,所以她的学习资源就很有限,包括在线资源印刷书籍。我对任何用日文写的初学者用的HTML/CSS的书籍或教程没有什么好感,所以我专门为她制作了一本我自己的教材(截屏如下)
63918611gw1e82qzbpr9nj20p00h5aev.jpg
我有打算哪天把我的书翻译成英文并出版,但是目前,我想说让我最惊讶的是:对女朋友帮助最大的不是教程的质量,而是她完成教程练习所使用的硬件。

硬件问题一:显示器
女朋友学完基本知识后,我让她用HTML/CSS去复制或者模仿我给她精选的设计良好的网站。她的复制品必须看起来和原始的网站一样,并且HTML也要符合语法。
学习写代码的理想方法就是做一个真正的项目。因为她没有想要做的网站,那么复制包括MediumSvbtle那样的设计良好的网站是最佳之选。
起初她用的是我的老古董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来管理窗口。
63918611gw1e82qzcppyrj20p00k0wjz.jpg
为何需要同时显示这么多窗口呢?因为新手喜欢能立刻看到代码修改带来的变化。
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?不是很常用吧。所以非程序员不熟悉那些键,敲起来很慢。
我会在女友写代码时坐在她身边。每次她错过用快捷键的机会时,我就会提示她。她会把快捷键写作便签上,贴在屏幕边来试着提醒自己。但是一天天过去了,她还是会忘记用那些快捷键。
后来我发现她从来没学过哪个手指用来负责敲哪些键。她那时就是感觉哪个手指自然就用哪个。她可以盲打一些常用词,但比如当我让她输入“{”时,她得去看键盘。她习惯日本键盘布局,但是也无济于事。
63918611gw1e82qz1a64qj20p00c9djc.jpg
为了纠正她的习惯,她买了一个微软人体工程学键盘4000,这让她不用正确的手指输入变得很难。她还每天学习Peter的在线打字课程。在她完成了前十课时,她打字才像一个真正的程序员。她现在很少误输键盘快捷键了。
顺便提一下,这里还有一个方法检查代码新手是否有打字问题:给他/她买一个不带字符的键盘。如果这个让他/她的输入变慢了,就是有问题。
打字的不顺畅可能会成为新手成为高手的阻力。因为随着他们写的代码越来越多,他们的沮丧和低效率会加剧。这可能是我们这些经验丰富的老手想不到的,但是当我们谈论编程教学时要注意这个问题。

结论
对于我的女友来说这两个硬件——显示器和键盘——有巨大的影响。他们也有可能影响大多数新手。代码编辑器会变的更加高级,编程课程也会演进,但是它们永远不会走进硬件的领域。
就像Andy Hunt在他的杰出的《程序员的思维修炼:开发认知潜能的九堂课 》一书中表明的,代码菜鸟不仅仅是慢版和无知版的专家。他们的思维是完全不同的。一旦你成为哪怕高级一点的初学者,你就已经失去了像代码菜鸟那样思考的能力。你可能会说「我想不出她为什么需要同时开启那么多窗口」。但是如果你已经没有菜鸟的思维了,你当然没办法去「想出」。
我的女友七月份回到日本。她很快就在东京一家创业公司找到了一份初级设计师的工作。但愿我们在硬件上的投资能够赚回来。感谢阅读。
更新(8月19日):我承认这篇文章的主题,“写代码”,和“编程”不是一回事。编程需要控制逻辑,而写代码不用。
不过我的女友在用Jekyll/SCSS时也确实用到了控制逻辑。她正在学习JavaScript,这是一个真正的编程语言。回头合适的时候,我会分享教她编程时获得的经验。


原文链接: Shu Uesugi   翻译: 伯乐在线- 奇风余谷
译文链接: http://blog.jobbole.com/46382/
作者: Kathie    时间: 2014-10-9 11:59
我觉得这篇文章非常棒,第一点我深有体会,不过为什么这个观点大家都不易察觉,原因之一可能是,大屏幕带来的体验对于个性着急、容易生沮丧感的人来说尤为突出,而一般这样的人都不会有那么好的运气碰到大屏幕和耐心的老师~~也即是说,这样的人很少安下心来写代码,所以这样的体验和总结并不多。
作者: 祭奠0亡灵    时间: 2016-4-27 15:49
希望多一些这样的帖子,编程过程中遇到问题而找不到解决办法的时,那种心情无比的难受啊~
作者: 十三才    时间: 2017-7-16 23:45
受益匪浅




欢迎光临 Crossin的编程教室 (https://bbs.crossincode.com/) Powered by Discuz! X2.5