從教女友寫代碼學(xué)到寫代碼在一定程度上是硬件問題
從今年四月一直到七月，我在教我女友寫代碼。我最大的收獲是認(rèn)識到了教人寫代碼在一定程度上是個硬件問題。雖然 codecademy、可汗學(xué)院、Scratch 和其他機(jī)構(gòu)為了教學(xué)優(yōu)化了代碼編輯器，但代碼編輯器總是卡在它們的軟件外殼上。我建議，除了提供優(yōu)秀的軟件和教學(xué)材料之外，我們還需要給新手輔助以出色的硬件。讓我來解釋一下。
背景
我在卡內(nèi)基梅隆學(xué)的計算機(jī)科學(xué)。在那里我還講過幾次計算機(jī)課。我的代碼技術(shù)最多算是中等吧，但是足以在諸如 Quora 這樣的公司做一名產(chǎn)品設(shè)計師。
一年多以前，我在日本遇到的我的女朋友。她在那度過了她的大部分時光。她在東京的一所女子學(xué)院學(xué)市場營銷和日本文化。我們相遇的日子里，她在同樣位于東京的一家做支付的初創(chuàng)公司做銷售助理。
但是她一直想要當(dāng)某方面的設(shè)計師。因為她對軟件有很大的熱情，并且對可用性有一定的見解，所以我的職場建議是她可以當(dāng)一名軟件產(chǎn)品設(shè)計師。
日本的技術(shù)社區(qū)只是最近才開始重視設(shè)計和用戶體驗，這個比起西方同類社區(qū)要落后幾年。在日本，產(chǎn)品設(shè)計師的供應(yīng)量還是比較低的，所以我建議女友可以試一下，盡管她沒有受過正式的設(shè)計方面的教育。
被說服之后，她在四月辭掉了工作，來到舊金山灣區(qū)看我。我們在一起住了三個月。在我的業(yè)余時間，我教她一些成為產(chǎn)品設(shè)計師的基本知識。她很努力在學(xué)，并希望能在回東京的時候能找到一份產(chǎn)品設(shè)計的工作。
教女友寫代碼
我相信所有軟件產(chǎn)品設(shè)計師都需要寫代碼。至于原因，請看「網(wǎng)頁設(shè)計師應(yīng)該自己寫 HTML 和 CSS」和「學(xué)習(xí) Rails 讓我成為更好的設(shè)計師」，都是 37signals 出的。
可能你已經(jīng)猜到了，我的女朋友從來沒有寫過代碼。我認(rèn)為這是培訓(xùn)里最大的路障，甚至比學(xué) photoshop 或者其他設(shè)計技能更難。所以我們決定先集中力量在寫代碼上。
我們剛開始學(xué)的是 HTML/CSS，然后轉(zhuǎn)到 Jekyll/SCSS 上。她從零學(xué)起，到掌握了怎樣設(shè)計一個博客主題（源碼）和展示她的模特照片的畫廊（源碼），都是用 Jekyll/SCSS 寫的。
因為她的英語只是初級水平，所以她的學(xué)習(xí)資源就很有限，包括在線資源和印刷書籍。我對任何用日文寫的初學(xué)者用的 HTML/CSS 的書籍或教程沒有什么好感，所以我專門為她制作了一本我自己的教材（截屏如下）
我有打算哪天把我的書翻譯成英文并出版，但是目前，我想說讓我最驚訝的是：對女朋友幫助最大的不是教程的質(zhì)量，而是她完成教程練習(xí)所使用的硬件。
硬件問題一：顯示器
女朋友學(xué)完基本知識后，我讓她用 HTML/CSS 去復(fù)制或者模仿我給她精選的設(shè)計良好的網(wǎng)站。她的復(fù)制品必須看起來和原始的網(wǎng)站一樣，并且 HTML 也要符合語法。
學(xué)習(xí)寫代碼的理想方法就是做一個真正的項目。因為她沒有想要做的網(wǎng)站，那么復(fù)制包括 Medium 和 Svbtle 那樣的設(shè)計良好的網(wǎng)站是最佳之選。
起初她用的是我的老古董 23 吋顯示器，還有她自己的 Macbook Air 的顯示器，但是很快她就用光屏幕空間了。她明顯需要同時開啟下面五個窗口：
1. Chrome 窗口顯示要復(fù)制的實際的網(wǎng)站。見本文封面的右上角。
2. 另一個 Chrome 窗口。顯示她當(dāng)前復(fù)制的網(wǎng)站。就是一個本地 HTML 頁面。見封面左上角。
3. Sublime Text 2 窗口。分割成 HTML 視圖和 CSS 視圖。見封面左下角。
4. Evernote 窗口。記錄她的筆記和代碼片段。見封面右下角。
5. Mac 的 GitHub 窗口。跟蹤她做的修改。我第一天就在她的工作流程里加入了 GitHub，這樣我就可以用 pull 來查看她的代碼。見封面的最左邊。
每個窗口都需要大概 1280×800 的像素。我最后只有租給她我的 30 吋家庭影院顯示器。它的 2560×1600 像素的分辨率足以平鋪上面所說的 4 個窗口。最后一個窗口就留在她的本本上。她用 Moom 來管理窗口。
為何需要同時顯示這么多窗口呢？因為新手喜歡能立刻看到代碼修改帶來的變化。
#p#
Brett Victor 在他著名的大作 Learnable Programming 一書中建議“反應(yīng)式創(chuàng)造”的教學(xué)技巧：
反應(yīng)式創(chuàng)造的思考方式可以這么描述：做出點(diǎn)什么，然后調(diào)整，直到它正確為止。
這正好就是我女朋友在做的。她（1）觀察目標(biāo)頁面，（2）寫代碼模仿出目標(biāo)頁面，（3）查看她做的是不是和目標(biāo)頁面看起來相似，（4）重復(fù)1~3 步，直到她的頁面和目標(biāo)頁面完全一樣為止。
在第 2 步和第 3 步，CodeKit 保持運(yùn)行并不停刷新頁面，這樣修改的結(jié)果不需要按 Commond+R 就能立即可見。她用 Mac 的 GitHub 來做回退。每次迭代，她都會在 Evernote 上作筆記，避免同樣的錯誤犯兩次。
這就是五個窗口都要同時打開的原因——將各步驟之間切換的開銷降至最低。當(dāng)所有的東西都可見時，她可以更快的做出反應(yīng)。
我能聽到你們這些高手在高呼：「這也太弱了吧。她可以用 Commond+ 數(shù)字或者 Commond+Tab 切換啊?！沟谴蟛糠中率侄加憛?tab 鍵和窗口切換。我們可以教他們這些技巧，但是他們很可能不會按部就班地執(zhí)行這些快捷鍵，至少在剛開始不會。新手不必硬要灌輸這些不必要的意識。
我的女朋友很快無 30 吋顯示器無編程了。我的住所離市區(qū)的 Palo Alto 要騎一小會車，那里有許多帶 Wifi 的咖啡店。但是她寧愿待在家里，因為有大顯示器用。看來是慣壞了的學(xué)生。不過她寫代碼確實比以前快了，而且最后她還掌握了 Commond+ 數(shù)字鍵和 Commond+Tab。
捫心自問，我們這些老手也喜歡大顯示器：
前公司的一則趣聞。我是一名留不住人的工程主管。我們團(tuán)隊一名工程師離職去了一家更小更前衛(wèi)的公司。這是離職的談話：
- 我：你為什么要離職？
- 他：因為他們有更大的顯示器。
因此為什么不給新手也提供大顯示器呢？他們是穩(wěn)定且可視的回饋的最大受益者，他們和窗口管理的斗爭也最激烈。
不管程序員變得如何反應(yīng)迅速，他們始終無法克服屏幕可用面積的局限——平板電腦在智能手機(jī)時代還有市場也正是這樣的原因。
硬件問題二：鍵盤
對于新手，他們的鍵盤——或者更一般地說打字——也可以是一個瓶頸，盡管不大。
問你自己：在代碼編輯器之外，你經(jīng)常會輸入像<，>，{，}，#這樣的字符嗎？或者按在 Sublime Text 里表示「在標(biāo)簽里包裝選擇」的 ctrl+shift+w？不是很常用吧。所以非程序員不熟悉那些鍵，敲起來很慢。
我會在女友寫代碼時坐在她身邊。每次她錯過用快捷鍵的機(jī)會時，我就會提示她。她會把快捷鍵寫作便簽上，貼在屏幕邊來試著提醒自己。但是一天天過去了，她還是會忘記用那些快捷鍵。
后來我發(fā)現(xiàn)她從來沒學(xué)過哪個手指用來負(fù)責(zé)敲哪些鍵。她那時就是感覺哪個手指自然就用哪個。她可以盲打一些常用詞，但比如當(dāng)我讓她輸入“{”時，她得去看鍵盤。她習(xí)慣日本鍵盤布局，但是也無濟(jì)于事。
為了糾正她的習(xí)慣，她買了一個微軟人體工程學(xué)鍵盤 4000，這讓她不用正確的手指輸入變得很難。她還每天學(xué)習(xí) Peter 的在線打字課程。在她完成了前十課時，她打字才像一個真正的程序員。她現(xiàn)在很少誤輸鍵盤快捷鍵了。
順便提一下，這里還有一個方法檢查代碼新手是否有打字問題：給他/她買一個不帶字符的鍵盤。如果這個讓他/她的輸入變慢了，就是有問題。
打字的不順暢可能會成為新手成為高手的阻力。因為隨著他們寫的代碼越來越多，他們的沮喪和低效率會加劇。這可能是我們這些經(jīng)驗豐富的老手想不到的，但是當(dāng)我們談?wù)摼幊探虒W(xué)時要注意這個問題。
結(jié)論
對于我的女友來說這兩個硬件——顯示器和鍵盤——有巨大的影響。他們也有可能影響大多數(shù)新手。代碼編輯器會變的更加高級，編程課程也會演進(jìn)，但是它們永遠(yuǎn)不會走進(jìn)硬件的領(lǐng)域。
就像 Andy Hunt 在他的杰出的《程序員的思維修煉:開發(fā)認(rèn)知潛能的九堂課 》一書中表明的，代碼菜鳥不僅僅是慢版和無知版的專家。他們的思維是完全不同的。一旦你成為哪怕高級一點(diǎn)的初學(xué)者，你就已經(jīng)失去了像代碼菜鳥那樣思考的能力。你可能會說「我想不出她為什么需要同時開啟那么多窗口」。但是如果你已經(jīng)沒有菜鳥的思維了，你當(dāng)然沒辦法去「想出」。
我的女友七月份回到日本。她很快就在東京一家創(chuàng)業(yè)公司找到了一份初級設(shè)計師的工作。但愿我們在硬件上的投資能夠賺回來。感謝閱讀。
更新（8 月 19 日）：我承認(rèn)這篇文章的主題，“寫代碼”，和“編程”不是一回事。編程需要控制邏輯，而寫代碼不用。
不過我的女友在用 Jekyll/SCSS 時也確實用到了控制邏輯。她正在學(xué)習(xí) JavaScript，這是一個真正的編程語言?；仡^合適的時候，我會分享教她編程時獲得的經(jīng)驗。
原文鏈接： Shu Uesugi 翻譯： 伯樂在線 - deepfish
