平面設計師踏入程式領域,走上前端技術的道路


五倍紅寶石課程顧問團隊
技術文章
平面設計師踏入程式領域,走上前端技術的道路

過去是平面設計師的 Tim,面對工作瓶頸和疫情衝擊,興起轉職的念頭。在這轉職的歷程中,遭遇很多挫折,卻也受到很多人的支持和協助,而 Tim 是如何逐步實踐前端夢想呢?

Nothing is Impossible!
如今,成功轉職成前端工程師的 Tim,找到一份讓生活和家庭平衡的工作,並出版了電腦技術書 『 Tailwind CSS 3.0 從零開始 - 入門到實戰』書中和大家介紹新世代排版神器 —— Tailwind CSS,並分享實作上會遇到的問題,讓團隊可以有效提升開發效率。

五倍紅寶石這次很榮幸邀請到 Tim 來到五倍直播間和大家分享,這條探索到成就自我的出版之路的甘苦談,如果你也在職涯之路徬徨,或是你還在努力地往前端工程師這個夢想前進,透過 Tim 的經驗,讓你在設定職涯目標不迷網。

講者介紹

許智庭 Tim Hsu | 前端工程師
從事平面設計七年,目前為前端工程師,開發經驗三年,樂於分享新知與所學技術,「提姆寫程式」部落格作者。

從鐵人賽到 Tailwind CSS 的出書之路

Tailwind CSS Book

如果你也想提升切版技術力,從初階到進階必學的排版神器!Tailwind CSS 3.0 從零開始 - 入門到實戰是你最強的參考書籍。

持續寫文章對自己有什麼幫助?

一開始會覺得這些技術已經有許多人寫過了,甚至文章內容寫得比我還要好,出現「為什麼我還要寫技術文章」這樣的心態?後來想想,寫文章最重要的是幫助自己,倘若在一個月或三個月後,遇到相同的技術問題,發現之前自己已經有針對此問題寫筆記,再重新複習,說不定能解決技術卡關的狀況,這樣就是對自己最好的幫助,也不需擔心文章寫得好與不好。

透過文字可以把當下遇到的情境以及想要學習的觀念寫下,將吸收的知識內化成理解的知識,在書寫過程中,輸出成文字,其實也是在整理你的邏輯思考與言詞。

畢竟,程式有太多東西要學,但每天需要處理的事情太多,而無法記得所有的技術知識,寫文可以幫助自己整理所學以及成為自己的技術字典。

從個人學習筆記到撰寫成文章再到教學書籍,這之間你認為有什麼樣的差異?

個人筆記就屬「個人」,不會有太多包袱,因為主要幫助對象是自己,記錄筆記的當下,多是閱讀他人的文章或是技術教學影片,而如實地呈現你所學的內容。但是,教學書籍的內容就需要言之有物了,畢竟出版品具有一定效力,在用字遣詞上以及資料考究都需要更加謹慎與精準,因為出版品無法在短時間內修改,如果誤人子弟就不好了。

這本書你覺得適合什麼樣的讀者呢?

《Tailwind CSS 3.0 從零開始 – 入門到實戰》這本書籍中,整理了明確的開發方式與基礎核心知識,讓開發者能較快上手 Tailwind CSS。

適合有實戰過 CSS 的開發者,因為對 CSS 有基本概念,也熟悉常用的語法,不需一直查詢想使用的樣式,不管是自己個人 side project 或是現在的工作上有碰到,而且自己能獨立手刻完成 RWD CSS 樣式的話,對於這本 Tailwind CSS 技術工具書較能快速吸收。

工程師聊技術

你如何看待 Tailwind、Bootstrap 和純手刻 CSS?

Tim 認為需要看專案的性質來定義,他認為 Bootstrap 像是一次性的 Landing Page,有許多元件化的模組所組成,可以透過元件反覆堆疊能快速組成一個網站,相對的,一次性網頁也不需要後續的維護。

純手刻的 CSS,比較像是客製化的網頁,像是大型的專案。

而,Tailwind CSS 是比較屬於純手刻的進階版,手刻 CSS 需要一直命名 class name,再將 CSS 的樣式寫進 class name 裡,除了難閱讀外,檔案也比較大,這樣的開發效率低。透過 Tailwind CSS,解決命名困擾,不需要撰寫冗長的 CSS,增加可讀性,能提升開發效率。

學 Tailwind 會需要對 CSS 有一定的基礎嗎?建議新手直接先從 Tailwind 學起嗎?

不建議新手直接學習 Tailwind CSS,因為 Tailwind CSS 是 CSS 框架,基礎概念是從 CSS 開始,程式新手還是要把基本功練好,紮穩基礎後再挑戰更進階的框架工具會比較適合。

你如何規劃 Tailwind 學習路徑?

Tim 認為可以從官方文件開始閱讀,且官方文件也寫得相當清楚,包含使用 npm 安裝、運作方式、設定方式等,只要了解如何起手,並跟著範例實作,能快速掌握 Tailwind CSS 的基礎,也可以利用 Tailwind CSS 執行基本開發。對於比較深且難的技術部分則需要繼續找尋相關文件閱讀。

Tailwind 是不是在網路上就有足夠的資源可以學習呢?網路有蠻多類似課程,不確定是否需要實體課來讓自己學會 Tailwind?

其實任何一門程式語言都是一樣的,端看自己決定想要以什麼方式學習程式,如果想要快速上手,可以找尋有系統性的方式來學習,不管是線上課程、實體課程,甚至是以書籍進修,找到一個可依賴的資源或是課程來幫助你入門程式,當你擁有一定的開發經驗後,再去看官方文件,慢慢地也可以自學起來。

如果你也想精深 coding 能力,五倍有開設眾多實體課程,很歡迎報名課程精進你的技能。

工程師生存的力量

兼顧生活、工作、學習的方法?

Tim 因為家庭、小孩又有工作的狀況下,能學習的時間相對少也非常零碎。Tim 是花了一年的時間利用線上課程與實體課程來學習程式,以定時定量來規劃工作與學習時間,每天固定時間學習程式,並改變原本的生活,將飲食單一化,休閒娛樂的時間改為練習程式,就發現學習時間變多了,這樣的生活其實是需要相當高的自律,才有辦法達成。

當你想轉職去面試前端的時候,做了哪些事前準備與克服不同領域的面試壓力呢?

之前在面試時有遇過面試官問「你都已經有年紀了,為什麼現在才要寫程式?」當下Tim 覺得自己好像真的很菜,也會自卑。

Tim 認為能做的準備就是將心理建設好,因為是轉職者,沒有這工作領域的經驗,因為程式開發需要靠經驗累積,所以無法與面試官闡述哪些技術是精通的,所學的知識是從線上課程與實體課程中得到,可能無法立即運用在工作情境中。遇到這樣的面試問題只能放寬心,誠實面對自己,讓對方知道自己就是新手,不過也要讓對方知道你是有潛力能成為一位優秀工程師。

Tim 是平面設計師跨領域轉職前端工程師,在鐵人賽也有一系列的轉職心得文,你會給正在迷惘的大家什麼建議嗎?

轉職其實本身需要很大的勇氣,面對轉職這件事,沒有最好的決定,但是既然已決定就需要努力做到最好。在轉職路上遇到的困難與挑戰,也許會比想像中多很多,需要時刻保持開放的心,保持正向與挫折相處,就算是進入職場,也是有許多時間需要與挫折相處,當你解完這個 bug 後又會有下個 bug 出現,要享受寫 code 的過程,能學習到更多技術。

小結

Tailwind CSS on Youtube

以上摘錄五倍紅寶石在今年 10 月的【直播分享會】鐵人鍊成!從平面設計跳轉程式領域,步步實踐前端夢想之路

希望這場包含技術主題與轉職心路歷程的直播,對於正在轉職路上前進,或是還未出發,但想往程式領域前進的你,帶給你幫助與收穫。

如果你也希望透過習得一技之長來翻轉職涯,歡迎認識 ASTRO Camp 全端工程師訓練營