從教女友寫代碼學到寫代碼在一定程度上是硬件問題
從今年四月一直到七月，我在教我女友寫代碼。我最大的收獲是認識到了教人寫代碼在一定程度上是個硬件問題。雖然 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 來管理窗口。
為何需要同時顯示這么多窗口呢？因為新手喜歡能立刻看到代碼修改帶來的變化。
#p#
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 的咖啡店。但是她寧愿待在家里，因為有大顯示器用?？磥硎菓T壞了的學生。不過她寫代碼確實比以前快了，而且最后她還掌握了 Commond+ 數字鍵和 Commond+Tab。
捫心自問，我們這些老手也喜歡大顯示器：
前公司的一則趣聞。我是一名留不住人的工程主管。我們團隊一名工程師離職去了一家更小更前衛的公司。這是離職的談話：
- 我：你為什么要離職？
- 他：因為他們有更大的顯示器。
因此為什么不給新手也提供大顯示器呢？他們是穩定且可視的回饋的最大受益者，他們和窗口管理的斗爭也最激烈。
不管程序員變得如何反應迅速，他們始終無法克服屏幕可用面積的局限——平板電腦在智能手機時代還有市場也正是這樣的原因。
硬件問題二：鍵盤
對于新手，他們的鍵盤——或者更一般地說打字——也可以是一個瓶頸，盡管不大。
問你自己：在代碼編輯器之外，你經常會輸入像<，>，{，}，#這樣的字符嗎？或者按在 Sublime Text 里表示「在標簽里包裝選擇」的 ctrl+shift+w？不是很常用吧。所以非程序員不熟悉那些鍵，敲起來很慢。
我會在女友寫代碼時坐在她身邊。每次她錯過用快捷鍵的機會時，我就會提示她。她會把快捷鍵寫作便簽上，貼在屏幕邊來試著提醒自己。但是一天天過去了，她還是會忘記用那些快捷鍵。
后來我發現她從來沒學過哪個手指用來負責敲哪些鍵。她那時就是感覺哪個手指自然就用哪個。她可以盲打一些常用詞，但比如當我讓她輸入“{”時，她得去看鍵盤。她習慣日本鍵盤布局，但是也無濟于事。
為了糾正她的習慣，她買了一個微軟人體工程學鍵盤 4000，這讓她不用正確的手指輸入變得很難。她還每天學習 Peter 的在線打字課程。在她完成了前十課時，她打字才像一個真正的程序員。她現在很少誤輸鍵盤快捷鍵了。
順便提一下，這里還有一個方法檢查代碼新手是否有打字問題：給他/她買一個不帶字符的鍵盤。如果這個讓他/她的輸入變慢了，就是有問題。
打字的不順暢可能會成為新手成為高手的阻力。因為隨著他們寫的代碼越來越多，他們的沮喪和低效率會加劇。這可能是我們這些經驗豐富的老手想不到的，但是當我們談論編程教學時要注意這個問題。
結論
對于我的女友來說這兩個硬件——顯示器和鍵盤——有巨大的影響。他們也有可能影響大多數新手。代碼編輯器會變的更加高級，編程課程也會演進，但是它們永遠不會走進硬件的領域。
就像 Andy Hunt 在他的杰出的《程序員的思維修煉:開發認知潛能的九堂課 》一書中表明的，代碼菜鳥不僅僅是慢版和無知版的專家。他們的思維是完全不同的。一旦你成為哪怕高級一點的初學者，你就已經失去了像代碼菜鳥那樣思考的能力。你可能會說「我想不出她為什么需要同時開啟那么多窗口」。但是如果你已經沒有菜鳥的思維了，你當然沒辦法去「想出」。
我的女友七月份回到日本。她很快就在東京一家創業公司找到了一份初級設計師的工作。但愿我們在硬件上的投資能夠賺回來。感謝閱讀。
更新（8 月 19 日）：我承認這篇文章的主題，“寫代碼”，和“編程”不是一回事。編程需要控制邏輯，而寫代碼不用。
不過我的女友在用 Jekyll/SCSS 時也確實用到了控制邏輯。她正在學習 JavaScript，這是一個真正的編程語言?；仡^合適的時候，我會分享教她編程時獲得的經驗。
原文鏈接： Shu Uesugi 翻譯： 伯樂在線 - deepfish
