Skip to main content

· 7 min read
Zoe Huang

在從 UI 設計轉職前端的過程中，曾經報名過實體課，也上過一些線上課程，又或是找 youtube 教學影片來看，想分享讀過覺得不錯的免費學習資源：

線上課程​

CS50: Introduction to Computer Science - Harvard

note

程式沒太多基礎的人也能看懂吸收的課程，非常喜歡講者的教學，講課過程很生動、富有感染力，課程中也設計了許多互動環節，課堂上大家提問十分踴躍，看現場學生提問很有趣，因為大家不見得都是本科，也不會害羞覺得自己提出的問題是不是太簡單，總的來說，我認為這是一堂很能啟發人的課，從課程本身到上課方式都有亮點。

不過我看的是Covid19 之前的版本，個人不是很想要看到老師學生都戴著口罩，全線上上課對於我來說，比較缺乏現場互動的感覺。

Vue - The Complete Guide (incl. Router & Composition API)

note

老師設計課程時滿仔細的，課程中提供了還未完成的範例程式碼作業，和已完成作業的解答程式碼供參考，課程也是 step by step 的引導學生慢慢理解功能。

優點是不會被時間和地點所限制，缺點是線上課程容易讓人懈怠，曾以為實體課程會比線上課程來的吸收力好，但上完這個 Vue 的線上課程後，覺得並不會遜於實體課程。線上課程的缺點是沒辦法馬上舉手問老師，不過這個課程的作業設計細膩度是很足夠的，針對不懂的部分也可以反覆觀看，趁特價時買也只需要台幣三百多塊，個人覺得十分划算，值得推薦。

計算機概論/于天立教授 - 臺大科學教育發展中心CASE

note

因為我是非本科專業，對於計概並不是非常熟悉，在友人的推薦下看于天立教授的計概線上課程，覺得台大真的非常佛心，把完整的課程放到網路上免費讓人學習，老師口條清楚，而且是繁體中文的學習資源。

缺點大概就是學習曲線偏高，對於非本科生會略微痛苦，我是挑自己比較有可能會接觸到的部分來看，有些太電機的部分並沒有完全看完，有些篇幅看過一次不是太熟悉，之後會想再反覆多看幾次。

電子書​

You Don't Know JS

note

算是 JS 聖經等級的書，完全免費還有中文版本可以看，會覺得與其一口氣啃完，不如分成幾個段落看完一次，如果在實作上有遇到相關問題，再回頭重新看相關的章節，會比一次埋頭猛 K 完ㄧ整本更有感。

網站​

note

state of 系列網站我從前幾年開始追，每一年的年末到隔年的年初會推出該年的總回顧，從這份調查報告裡可以看出，現在流行趨勢是什麼，哪些框架/語法/工具最多人推，有哪些新的框架/語法/工具等等...可以了解整個 JS / CSS 的趨勢脈動。缺點是這是在網路上普發英文問卷的調查，所以樣本數多為歐美白人，像是一些框架的選擇、薪水的級距等，對於目前身處亞洲的我只能酌量參考，不過，如果是目標擺在歐美職缺的話，用這份調查報告來檢驗自己的能力是否符合歐美職缺的期待，是滿適合的。

note

這是同事推薦給我的網站，大推 ByteByteGo 電子報和 Youtube，每一期電子報會針對不同主題進行講解，有圖文並茂的影片也有純文字的介紹，圖示解說的部分覺得十分用心，可以感受出作者想要盡量用動態和淺顯的方式跟大家介紹專業技術，整支解說影片時間有控制在適當的時間內，解說語速和咬字也讓人聽得很舒服和清楚，除了吸收新知外，也會想要學習 ByteByteGo 在圖表呈現和表達的細節。

Podcast​

Syntax. - A tasty treats podcast for Web Developers.

note

之前就有在看 Scott Tolinski 的 Level Up Tuts 教程 和 Wes Bos 的 JavaScript 30，後來發現他們一起合作 Podcast，理所當然就來個一鍵三連按讚訂閱分享：）

他們的 Podcast 整體基調算是輕鬆聊天的氛圍，不是非常死板或硬核到讓人難以消化，不過，基本上我並沒有每集都聽，是挑自己喜歡的主題選著聽，看看相同領域的人對於技術或工具發表一些想法，是滿有趣而且可以獲得新知。推薦給想要時不時了解一下新技術新知識，但目前還沒有適合管道或同好可以討論的人，輕鬆的節奏是可以讓人比較無壓力的聽。

· 3 min read
Zoe Huang

以下是在研究 CSS 各種光怪陸離的問題和效果的路上，搜集到一些用來查找資料，或是觀摩大神範例的資源：

網站​

CSS-Tricks - Tips, Tricks, and Techniques on using Cascading Style Sheets.

note

CSS-Tricks 我會用來看一些新語法的介紹和範例寫法，基本定義可以查找 W3C 或 MDN，但如果是想要看一些基礎到進階的實作應用，或是一些酷炫效果的範例，我就會來這邊挖挖寶。

當然網站裡不僅僅只有 CSS 主題，還有許多跟前端相關的其他主題，文章更新的頻率和質量都很好。

note

Smashing Magazine 和 Codrops 也是我會拿來觀摩一些特殊效果、或是查找進階應用和新知識的資源。

有些實作不見得能完全解決自己遇到的問題，畢竟實際開發產品的過程中，還是會遇到向下相容性或是客戶需求等限制，最新技術最酷炫的效果往往到最後會被閹割或是(取)捨，在看這些效果範例時，也開始會思考如何兼顧效果和彈性/可讀性，這兩個網站的文章更新的頻率和質量也都很不錯，適合挖寶。

工具​

Muzli

note

自定義瀏覽器首頁工具，可以無腦訂閱官方提供的資源，也可以自定義自己喜歡的來源。作為吸收新知和獲取靈感是一個滿不錯的工具，時不時刷一下順眼的文章，沒空的時候，一眼掃過文章標題，也可以大概知道最近在流行什麼主題。這個工具的應用不僅限於技術或UIUX，也可以訂閱國內外新聞或其他網站的RSS，推薦大家可以試試看，作為自己的整合知識資源庫。

· One min read
Zoe Huang

git hooks post-receive shell​

#!/bin/sh
git_folder=/usr/local/apache-tomcat-8.5.46-9487/webapps/repo
tomcat_folder=/usr/local/apache-tomcat-8.5.46-9487/webapps/ROOT
rm -rf ${git_folder}
mkdir ${git_folder}
cd ${git_folder}
git --work-tree=${git_folder} --git-dir=/var/repo/qa.git checkout -f master
rm -rf src
cp -r ${git_folder}/dist/image/ ${tomcat_folder}/
cp -r ${git_folder}/dist/css/ ${tomcat_folder}/
cp ${git_folder}/dist/js/main.js ${tomcat_folder}/js/

Git 大小寫設定​

關閉單一專案的大小寫忽略設定 (等同於開啟大小寫偵測)

$ git config --local core.ignorecase false

開啟單一專案的大小寫忽略設定 (等同於關閉大小寫偵測)

$ git config --local core.ignorecase true

· 10 min read
Zoe Huang

在自學的路上，面對各種大量的資訊，有一些是自己接觸過，覺得值得推薦分享的資源，在這裡拋磚引玉，部分也附上自己的心得短評，希望能夠提供給同樣曾經迷惘的同好，作為參考：

好書共讀​

認知與設計-理解UI設計準則

note

其實老早就排了好度要寫這本書的讀後感，卻難以下筆，絕非這本書的內容或架構哪邊有問題，而是很怕自己寫不好，無法充分表達這本書的優點，最後想想，初衷不就是要誠實記錄自己讀完這本書的感想跟啟發，何必如此糾結。

總結來說，這是UI Design/Web Design的必讀經典

UI Design相繼其他，算是較為新起的領域，以前自己總覺得找不到相關資料可以閱讀，無從入門（爾後才慢慢發現是自己見識太少，不知道該怎麼去挖資料）。若想加強UI Design的基礎知識，推薦好好讀過幾次這本書，把準則看熟牢記在心，往後可於實作時避許多基本錯誤。這本書很適合一讀再讀，或當工具書翻閱，不論是初學者用來打底，進階者用來加強概念，半路出家者想搞懂UI Design是怎麼一回事，老少咸宜。

這本書從最基本的定義闡述起，列出許多現象或刻板印象，以科學實驗為基礎，衍伸完整的理論去佐證現象或推翻刻板印象。其實每個章節我都覺得很有用，可以拿出來hilight ，每個準則後面都其理論依據，而不是用“這樣看起來比較好看”或“大家都這樣做”帶過。自己印象很深刻的是，有一段提及人類大腦的反應時間，套用於UI Design，便是要去思考該如何設計產品在大腦反應時間內給予適當回饋，或是要怎麼做才不會讓使用者產生混淆感。附錄還貼心地收錄了著名UI Design準則，整本書的精華都列點於此，不影印下來貼在書桌前天天朗誦都不行。

眾妙之門︰網站UI設計之道

note

最初想說看簡中版應該會比較容易瞭解概念，看完一遍以後的感想是還是乖乖再啃一次英文比較實在...畢竟很多術語跟程式語言都是英文，專業術語被翻成簡中用法反而一時之間無法會意，如果是怕自己英文程度不夠或閱讀速度太慢，推薦先讀一次簡中抓住主軸概念，然後再讀一次原文，確認專業術語和細節。

總結來說，大推！在這個領域混的至少要讀過，書中幾乎把網頁設計的基本概念都講過一輪，某些部份頗為深入，除了概念探討甚至牽涉到程式，適合給對網頁設計已經有一些底子的設計師/工程師讀。覺得Smashing magazine是個很棒的綜合知識網站，從web design,coding到UI/UX都有豐富的知識和技術分享，除了訂閱電子報follow最新潮的觀念之外，看幾本概念書加強基礎也很不錯，如果不知道要從哪邊起頭，推薦直接讀幾本Smashing book打底。

這本書的前半部比較偏重CSS跟Layout，個人覺得很有用的是關於字體對於版面構成的影響，自己以往的經驗其實對於使用哪種字體相互配合，並沒有真正深入探究，看了才知道字體其實也是門很深的學問，光是襯體與否就看到眼花撩亂，下次執行專案打算好好配合這個部分的理論，去挑選適合的字體。

中後半部較多程式或概念分享，例如在設計版面時應該要參考遵守哪些準則等等。有幾個地方我覺得很受用，像是“容錯性”的重要，必須讓使用者可以直覺且流暢的操作，且避免不可逆的操作發生。或是在設計網站時，設計人員應該要站在使用者角度去構思發想，而不是以自己身為"設計師"或"工程師"的角色出發，畢竟絕大部分是要開發功能性網站給特定族群使用，要完全展現自己的想法跟設計理念，把這些東西留給個人portfolio就可以了。

瑕不掩瑜之處：畢竟出版年份稍早，範例網站的風格和樣式跟目前最流行最前端的有些差距，不過並不影響準則跟概念的應用。或是關於RWD跟AWD，甚至是CSS framework的選擇，現今有許多卓越的技術和framework可供選擇（像鼎鼎有名的Bootstrap），有些疑慮或是技術性需克服的地方已獲得解決，不過同樣的，這些並不會跟原則或概念相衝突，在閱讀過程中，或許能順便想想現在能用哪些工具解決這些問題。

Thinking​

在探討字體跟排版的章節，有一段提到連文句的垂直對齊都必須考慮，是否不同區塊的段落每一行都能對齊。試著假想一下，真心覺得這是一個費工的魔鬼細節，可能調校個老半天，使用者根本無感，或是投下去的功跟達到的成效不成比例，尤其是又在專案時間壓力緊迫的時候，這件事情的可行性和CP值到底能到哪種程度，真是個問號...

書裡提及許多面向，的確有很多工具能應用，的確有許多細節須調校，有許多流程和內容要構思。但說到底，若在執行專案時，環境或人為因素影響，讓執行者難以達到這些標準，該怎麼去拿捏取捨，好像又是另外一回事了。

點石成金：訪客至上的網頁設計秘笈（Don∨t Make Me Think）

資訊架構學：網站、App與資訊生態系統規劃

線上課程​

Coursea - Scott Klemmer / University of California San Diego

note

免費的線上課程，老師講話平緩、語速偏慢，可以了解理論基礎，適合初學想接觸UIUX領域者，不過課程略微催眠，推薦可以直接找自己想要了解的部分聽

社群/講座/演討會​

note

算是同一團體經營的一系列社群，有分享性質的小型講座，線上社群和較為正式的研討會，如果是想要了解最近台灣在流行怎樣的UIUX知識，是一個滿推薦的接觸管道。

可惜因為疫情影響，這幾年的實體活動比較少，講座個人還是偏好參加實體，比較有互動，推薦可鎖定自己有興趣的講者/主題，參加相關講座。