本次「如何建構前端工程師技能樹」活動,雖名為「建構技能樹」但是Amos老師偏向以學長向學弟妹叮嚀的口吻,來提醒大家在接觸一門新技能的時候,該從哪些面向切入,各種學習管道的特點在哪裡,又該如何使用工具來優化工作效率。比較像是幫助大家整理出升級技能樹觀念,並沒有直接以懶人包形式丟出「哪個技能該學哪個技能可以放棄」這種制式技能樹點法。


影片精華

基礎技能概述

如何學習一門新技術

工具的選擇

三部影片共約22分鐘,時間不夠的話建議先閱讀文字內容


根基札實才能走得長遠

活動一開場Amos就強調HTML & CSS是前端的根基,而越基礎的東西越需要學習,當基礎扎實,後續學習相關技能才會順暢。此外,Amos認為SEO是身為前端工程師的基礎常識而非進階觀念,怎麼說呢,拉到網頁設計的動機來看:做網頁就是為了被搜尋、曝光出去。而體質好了,接下來怎麼操作都沒問題。但是當網頁CSS架構太過肥大或是拆很多支,便會拖累網頁速度,進而影響SEO評分,這些基礎都是交互影響的。


技能這麼多該從哪裡開始

前端的技能幾乎每半年就會出現新的,Amos老師的建議是會用到什麼就去學,每個人學習背景和曲線都不一樣,不需要聽從別人的建議,把頭洗下去就對了,要學就學到能夠把自己當老師,以講課方式敘述給自己聽。學習時,基本理論及實務範例都很重要,在初期,專攻基本理論的效益很差。相對來說,從實務範例學起效益比較高(基本上,沒時間從實務學起,有時間就回頭看理論,然後自行研究、測試),老師這邊有舉例之前的作品: 用CSS3做泡泡特效,就是單純用圓角的觀念做出來

學習管道,在找教材上有兩點建議供檢視

  • 內容安排順不順暢,是否起到引導作用
  • 理論與實務範例穿插,看完一部分理論章節,能夠呼應對照實務便於理解

學習新技能的管道建議,有卡住就往下一層找資源

  • 先google資料自學
  • 再來是找書,一本書只要寫到一個我們不知道的好用技巧就值得買,500元買一個技術非常划算
  • 線上課程聽別人整理過的教材,主要是買經驗(講師犯過的錯、踩過的雷)
  • 實體補習班(需把通勤成本考量進去),買現場QA的機會


工具

「順手就好,但更快更好」
工具是用來節省時間的,不要戰工具。若能建立模組,在進行重複性工作時能有效增加效率,效率增加後就有多出來的時間進修(不要讓老闆知道),達到良性循環。

不要太依賴外掛,因為什麼時候衝到不曉得,盡量了解背後原理自己寫(有時間的話,沒時間還是套吧),技能樹一定會爬起來。

老師貫徹整場的核心理念就是「提升技術就是捲起袖子,來把手弄髒」實作非常非常重要,沒時間的時候可以套外掛,但有空時記得回頭來搞清楚外掛的原理;而學習時該花的錢就花吧,我們所花的每一分錢都是在節省自己的時間。工程師的時間是最貴的,如何提高效率,再將省下的時間投入進修,才是最重要的課題。


Q&A

問題一:
最近 vue.js 出來之後,似乎很多人把它用在介面體系的建構架構上,請問這方面的學習路徑?

Amos:網路上應該蠻多資源的,學習路徑有幾個方式:

  • Google->找書->以上兩項實作之後,再不行,就找補習班。
  • 找教材的話,基本理論需跟實作交互進行,線上、線下都可以,花錢去節省時間不貴,因為時間成本可能更貴;花錢買的內容是人家整理過的,現在線上教學很便宜,先找線上在找線下,你買得是老師的經驗,不是知識,但有些東西線上比較不容易了解。


問題二:
請問你先前有將 footer.CSS 分開寫,後來合併起來成一個 CSS檔案,是用壓縮工具嗎?還是直接寫在同一個檔案內?

Amos:直接寫在同一個檔案內,不拆了

續問:這樣子維護的話?

Amos:這是撰寫習慣的問題,撰寫習慣要讓你容易維護,每個人會有每個人的撰寫習慣,網路上看很多撰寫習慣之後,你要自己有想法。
撰寫習慣:團隊的話要訂出標準,自己的工作的話按照自己的習慣無所謂。有些人會把CSS 用成一行,但是自身經驗會容易寫到重複的內容,用壓縮工具就好,不用浪費時間,有些習慣聽聽就好,還是要找到自己執行起來順暢的方式。

續問:team co-worker的話,你會建議?

Amos:team co-worker的話,你可以把他拆開來,後面再用工具合併,可是規則要先訂出來,因為現在有 git,可以用merge,可是 team 一定要先溝通好規則。


問題三:
CSS 模組化的時候,class 名稱會設很長

Amos:會,模組化的第一步就是分析,如何用最短的class 的結構去做,所以 class 的名稱會有很多種,或者說你把它拆解掉…
舉例:bootstrap 裡面有個 class 名稱叫做 list-unstyled,就是把前面的東西拿掉,今天可以做menu去搭配 list-unstyled 把它湊起來,有點像樂高模組的概念,基本東西如何讓他套三個就可以做完這件事情,可是你的class 名稱不要太長,再來編碼規則要去制定一下。


問題四:
現在看到的前端技能這麼多,我們看自己想要去的工作,但有時候看公司網站或是說他們現在正在進行的專案我們並不能看到全貌,比如說我想要進這家公司或是現在市場上求職會比較需要作品要怎樣準備會比較好?

答:這是面試跟前景問的問題,要去想下一步在哪裡,如果要走前端可以看目前前端比較夯的技能是什麼,就先去把基礎弄好來。如果說現在去學會太慢,可能就很快速的,花一、兩週想辦法先把這新的技能先瞭解之後,去面試看有沒有機會上,如果沒有機會上,對這個技能有一個概念了,如果還是想朝這條路走的話,就繼續把這技能再學下去。

面試是從頭到尾要賣你自己,要怎樣讓你看起來比較好賣,面試是把自己推銷出去,販售的是你的能力,你的客人要的是你的能力,他要十個能力,你有九個,那上的機率就高,要先了解對方要什麼。面試像是累積經驗值,現在市場要的是技術廣度,所以我們一旦把基礎深化再去學其他的就會快。


問題五:
為什麼AMOS老師會從視覺設計師轉前端?

Amos:兩個原因

  • 錢難賺
  • 不爽

什麼叫不爽?因為我們之前溝通常常會出現一個情況,我跟程式設計師說我要什麼東西,他可能都會覺得你都不懂,有些跟你講不能寫,但你明明想一想說邏輯上應該是可以寫,有些能力是因為不爽所以我自己學。

錢難賺是說視覺設計師跨網頁,其實是為了生存,我可以雙棲,可以回去做視覺設計師也可以直接跨到網頁設計師。跳出來自己做工作室是學到最多的時候。而如何支持自己要做下去,要有興趣。


#本會後筆記由謝同學、余同學、慕課 共同編輯
---

若對老師提到的工具sublime有興趣,在此提供

初階課程傳送門



進階課程傳送門