【極速開發】我花4個月課前練習,有效提升 60% 寫 Code 速度

廖洧杰 (查理)
10 min readJan 4, 2021

前言

相信各位都瞭解不論是誰,都會有低潮或撞牆期的時候,不論是工作、家庭,甚至是自己的職涯上,為了重拾自己的熱情,去尋找專業的點火師再次把自己燃起來,也是個非常棒的鍛鍊方式。

於是去年八月底我報名了江湖人稱 91 哥的極速開發+ 的課程,展開了一條人生史上最漫長的課前練習…慢著,所以寫這篇文章時我還沒上課嗎?你沒看錯,因為 91 哥開的課前菜單,就足夠我鍛鍊四個多月,收穫就已經滿到不行的超威課程。

先附上我還沒上過課的成績單,藉由開發功力+編輯器優化+正確的開發流程,讓我從一開始要寫 2 小時半,有信心開始錄製時要寫 50 分鐘的 Code,變成只需要 16 分鐘!

YouTube 頻道連結

所以我想藉由這篇文章,來分享自己的自學習慣給各位參考與學習。

什麼是極速開發課程?

這裡也擷取課程裡面的這句話來介紹這門課

生產力 = 你的設計功力(能力) + 最佳化開發環境與設定(神兵) + 對的開發方式(招式)

這門【極速開發+】的培訓,就是用來解決實務上大家總說「時間不夠」的問題,因為時間不夠,所以我沒法子寫單元測試,沒法子重構,沒法子 TDD,沒法子 code review,沒法子逋拉逋拉…

我認同「時間不夠」是個問題,然而卻很少人去改善或解決這個問題。這門課,將讓各位學到,如何建立自我刻意練習的模型,將所有工具的整合起來發揮最大綜效,透過正確的開發方式與順序,讓你寫代碼時能行雲流水,並且兼顧設計、品質與生產力。

看完這段話也深感認同,再加上我以前從來沒寫過 JS 測試,想說透過這門測,順便來練一下測試,於是想都沒想就直接報名了,也感謝當初衝動的自己,因為在當天就販售完畢了 XD

昭告天下,讓自己動起來

這門課主要是藉由寫一段 Tennis Kata(網球比賽計分程式),藉此來鍛鍊自己的寫 Code 速度,通常在上課前,我都習慣做課前練習,這樣在課堂上才能更專注在我想瞭解的細節。

我自己在幫學生授課時,也會在一個月前提供蠻大量的課前練習,而從我的學習系統來記錄,通常有做課前練習的學生,成效也會比沒做的同學好兩倍以上,於是我就用了我最擅長的昭告天下法,讓大家都知道自己的目標,讓自己沒有退路 XD

FB 連結

當然,你也可以透過告知親人、伴侶來宣示自己的行動,讓你自己覺得「我都跟我重要的人說了,不可以漏氣」的心態來前進。

我的自學鍛鍊過程

於是我挑了一部 91 的 JS 影片,開始進行課前練習,也就是下部影片,當初太熱血下了 flag 自己要在 20min 內完成,但隔天回來看真的冷汗直流 orz

  • 為什麼打了一堆英文字可以移動、執行指令?
  • Vim 是什麼?為什麼測試會自己跑起來?也根本沒有存檔!
  • 我是用 VSCode,但他是用 WebStorm,我該跳編輯器嗎?

最後我認清現實,那就是「代誌不是憨人想得那麼簡單(台語」,還好最後仍趕在上課前一週達到目標,這裡也分享一下我自學的四大流程。

那就是:

  1. 第一招:吸收整合知識,不急於動手做
  2. 第二招:持續輸出,從中獲得自身盲點
  3. 第三招:反覆撞牆,從開源網路中獲得可以前進的方向
  4. 第四招:刻意練習,鍛鍊出肌肉長期記憶

第一招:吸收知識,不急於動手做

看完影片,我當下真的有「幹我應該辦不到的挫折感」,但這種焦慮過沒幾天,我很快面對現實,決定拆解我該學的東西,這樣才能看到學習的終點。

因為對每個技巧都不熟,也就只能乖乖將知識學好,才有辦法練習,於是我透過影片知道我該學的東西有:

  1. Vim (文字編輯器):花了我 4 個月
  2. Jest (JS 測試):花了 2 週
  3. TDD (測試驅動開發心法):花了 2 週瞭解初步概念
  4. WebStorm (IDE 編輯器):花了 1 個月

於是我開始從 Google 中尋找學習資源,並用 Notion 當作我的筆記軟體,並刻意尋找「哪些資源比較適合我花時間投入與建立短期的目標」。

第二招:持續輸出,從中獲得自身盲點

如果只有單純「看影片」、「看文章」,我很清楚自己一定學不會,最重要的一定都是「動手自己做」,這樣才能將技能刻在我的身體裡,於是我也展開了我的練功過程。

我習慣使用番茄工作法,平均一天我會花一顆番茄來練功,也就是 25 分鐘。

其中最讓我頭痛的就是學 Vim,他任何的移動、編輯、操作,都是透過英文字指令達成,例如 4j 是向下移動 4 行、cw 是編輯一個單字,也附上個密密麻麻的咒語表參考。

這真的是將以前我開發習慣整個打掉重練,我也清楚自己內心是排斥的,但最後我抱持著「我不知道自己有沒有興趣,但我必須自己動手去做才知道我喜不喜歡,重點本身是持續鍛鍊的過程,結果只是附加品。」

於是我還是展開了鍛鍊之旅,在第一階段我尋找了很多不錯的 Vim 教學,這也讓我在學 Vim 的時候減輕不少痛苦。

這裡也首推龍哥的 Vim YT 教學:

龍哥 YT 影片

我為了要將 Vim 養成習慣,我強迫自己在火箭隊線下分享技術時,都讓自己用 Vim 來授課,藉由學生恥笑老師的近乎手殘的開發流程,藉由羞恥心讓我更快地學會 Vim,每當我一直卡在一個很蠢的地方時,也會迫使我想找到更快的 Vim 移動流程 orz

但好處是我找到方法,讓自己在特定場合來刻意練習,這也讓我對 Vim 沒有那麼畏懼,另外我很清楚自己不搞熟 Vim 的話,也根本無法上 91 哥的課,於是在 9–11 月時,我就專注學好 Vim。接著再來吃其他的練習菜單。

我在鍛鍊 Vim 時,有用一個練功方法,那就是去尋找更厲害操作 Vim 的達人,並以 80/20 法則,觀察對方哪些最少的 20% 熱鍵是開發者最常用的 80% 功能,於是我用了 0.25 倍速去逐秒拆解 91 的 vim 指令,這也讓我在學習上變得飛快。

每打勾一個項目,成就感也跟著攀升

直到上圖的 Notion 我勾選絕大部分的 Vim 指令接近 70~80% 時,我才開始邁入 Jest 測試來寫網球計分程式。

第三招:反覆撞牆,從開源網路中獲得可以前進的方向

但往往最難的,不外乎是最後的 10~20%,不管我再怎麼找資源,前進的路途開始變得緩慢,也非常難熬。我那時候記得最常跟我朋友講這幾句話:

「我不知道為什麼自己要學 Vim 折磨自己..XDD」

「乾找不到設定方式 RRRR」

抱怨歸抱怨,但身體卻很老實,因為學習本身本來就是痛苦與成就感參半,在感到痛苦的過程中,表示自己也在穩健成長。

我為了突破這撞牆期,嘗試了以下的方式,並獲得蠻好的效果,也分享給各位:

  1. 尋找學長姐撞牆突破文章:謝謝這位寫 Android 的學長,看到你寫的才發現能自訂 ideaVim 熱鍵,以及常見的熱鍵
  2. 講師給其他同學的回饋意見:91 的 Code Review 也非常紮實,我在找一個熱鍵 zaa 完全不知道在幹嗎,搜尋到這部影片,看到 91 哥的回饋後再看影片,就搞懂這 Vim 該如何自訂了
  3. 翻遍整個 WebStorm 官方文件:為了快速學會該編輯器,我有整整兩週時間,都在研究裡面所有的熱鍵,以及官方的文件,甚至當成遊戲攻略再看,WebStorm 文件不得不說寫得蠻棒的,甚至有 Gif 圖片來輔助,連結處
  4. 腦內假想寫 Code:影片我看了至少 1000 次,到後期自己開發上可以更順,我會腦內假想我自己開發的流程,甚至開 91 的影片但不看,腦內想自己的流程結束後,能不能贏 0.5~0.75 倍的影片內容。咦,你說為什麼不直接寫 Code,因為..沒時間,我有兩間公司、兩個孩紙 RR 我連哄孩子睡覺都不浪費時在假想寫 Code 呢(怎麼有股淡淡的哀傷
  5. 觀看和自己程度差不多同學的作業:我找的練習影片是講師本身的,因為太過高端完全看不懂,還好 91 哥有用 trello 整理學生記錄的習慣,裡面根本是超級寶庫!我看了很多 JS 的練習,以及講師給學生的回饋,從回饋中也看出自己要注意哪些小細節,從學生影片也知道一些熱鍵怎麼調整會更好。
滿滿的乾貨資源

第四招:刻意練習,鍛鍊出肌肉長期記憶

為了要真正練成一個技術,其里程碑就是「忘記任何的招式」,也就是當你要用一個語法時,你不會思考自己用得對不對,猶豫自己的判斷,而是會下意識地、神經反射性地使出技巧。那麼才能真正地說自己會了。

我目前也是剛好到這階段而已,這裡也分享我實際鍛鍊幾次的進步程度。

  1. 第一次練習:2 小時半
  2. 第二次練習:1 小時半
  3. 第三次練習:49 分
  4. 第四次練習:35 分
  5. 第五次練習:31 分
  6. 第六次練習:25 分
  7. 第七次練習:22 分
  8. 第八次練習:19 分
  9. 第九次練習:16 分

看到這裡你可能會疑惑說,不是說看了上千次影片,但為什麼才 9 次練習?因為我為了達到影片裡的速度,都是刻意練習每分鐘局部的 Code 執行方式,直到我所有的知識量跟熟練度達到一定程度後,才開始執行最終寫網球測的目標。

如果我一開始什麼知識都不吸收,也不提早練 Vim,那麼我練千次也無法前進,所以前期我花了大量時間找資源、刻意練習自己不會的技能,也到最後才開始進行訓練。

前兩次練習則是我為了學 Jest,不用 Vim 跟著影片來操作,而後面第三次後則就全程都是用 Vim 來開發,時間也縮得越來越短,寫 Code 也變得超順!

但距離第四招形成肌肉記憶,我自認目前還沒達到,像是 Vim 的 JK 上下移動我老是按相反,這點可能就得再花時間來習慣。

總結

為什麼明明還沒上課,我要花那麼多時間來做課前練習,像是就有同行和我說:

  1. 你跟 91 哥直接拿 Vim 的設定不就更快,也不用在那邊猜 WebStorm 與 Vim 的設定?
  2. 直接問別人就好啦,你朋友 XXX 不是也有上過他的課,直接問他解答不是比較快,你不是都找兩個禮拜了?

我認為這些都是「假象的會了」,學習的重點主要是來自於「過程的鍛鍊」,這過程中才能培養解決問題能力、自我研究能力,如果直接跳過這段直接看攻略,那久而久之也會塑造自己伸手牌的心態。

在這過程中,我學到了以下用金錢無法換得的技能:

  1. 知道 TDD 的好處,有點上癮
  2. 重構原來可以這麼美妙,藉由 IDE 的優化,讓重構本身變得輕鬆愉快
  3. 提升自我研究問題、自我解決問題能力
  4. 已經習慣 Vim 開發,標題寫的提升 60%,是因為我現在不用 Vim 寫網球計分模式,至少都需要 2x~3x 分鐘,但現在已經縮短到 16 分,甚至可以更快
  5. 感謝一直以來堅持的自己,讓自己又再次進化
  6. 過幾天上課時,我可以專注在講師分享的技術上,並帶著開發實際上遇到的問題問得過癮

希望以上學習歷程有幫助到你,如果你在學習技能上遇到困難,也歡迎隨時與我交流,我也很樂意分享自己掌握技能的心得,幫助你/妳變得更好 :D

--

--

廖洧杰 (查理)

職涯教練傳教士,至今已協助超過 1,000 位人員擬定職涯發展,目前也是六角學院與火箭隊共同創辦人。擅長領域為前端工程、社群開發、數位行銷