從教女友寫程式碼中學到的

jobbole發表於2013-08-29

　　從今年四月一直到七月，我在教我女友寫程式碼。我最大的收穫是認識到了教人寫程式碼在一定程度上是個硬體問題。雖然 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，這是一個真正的程式語言。回頭合適的時候，我會分享教她程式設計時獲得的經驗。

　　原文連結： Shu Uesugi   翻譯： 伯樂線上 - deepfish

　　譯文連結： http://blog.jobbole.com/46382/

相關文章