第 66 期 - 我的心已經在年假上了
本週專欄
開源專案讀起來 | 從 SWR 來看看實務上的 Observer Pattern（觀察者模式）
本週專欄主要討論的 Observer Pattern（觀察者模式）算是非常常見的模式之一，尤其是在同一資料在多個地方被使用到，且當資料改變時，需要更新所有使用該資料的地方的情境特別有用。Umm…上方像教科書裡會寫的定義可能不太親民，換個方式說：
當多個 component 共用同一個 state（不論 state 是保管在 react-redux 或 SWR），那當 state 更新時，所有使用到該 state 的 component 都要根據新資料重新 render 頁面！
如果還是不太清楚，待會文中也是會先用簡單的範例呈現，再來從程式碼中看看 Observer Pattern 是怎麼實現的！
前端開發
導入 TypeScript 應考慮之效益與成本
近幾年 TypeScript 越來越熱門，甚至登上 2020 最受開發者喜愛的語言第二名（對，來源又是 Stack Overflow 統計 😂），但是當你在導入的時候是真的了解 TypeScript 的好，並覺得有需要呢？還是僅僅因為大家都在使用？其實 TypeScript 本身並不可怕，可怕的是將它導入到專案中的成本可能超乎你的想像。
What I Wish Every Developer Knew About let In Javascript.
在看這篇文章之前可以試著想想，在 JavaScript 裡，var 和 let 的差異在哪裡？在面對這個問題的時候你能夠回答多少答案呢？本文的作者對 var 和 let 的差異做了一些簡單的整理，且文章中也有提到關於 TDZ - temporal dead zone 的概念，值得抽空簡單瞭解一下！
How Hex Code Colors Work – and How to Choose Colors Without A Color Picker
本篇文章簡單解釋了 hex color（16 進位的顏色表示法）的組成以及使用 hex 表示顏色的好處。記得之前工作的時候，常常看到某個顏色就會找同事一起玩猜 hex 的遊戲，然後比誰猜得比較接近 😂，推薦大家看完這篇文章又剛好很無聊的話，之後也可以找同事一起玩，哈哈哈。
Finally, a CSS only solution to :hover on touchscreens
這是一個非常有趣的前端議題，最近有個專案裡面有一個按鈕本身有 :hover 以及 :active 兩種樣式，但以前的我認為行動裝置並沒有 :hover 的樣式(嚴格說起來應該是沒辦法 trigger 出 :hover 的樣式)，但很奇怪的是每次點擊這個按鈕後都會跑出 :hover 的樣式出來，後來研究了一下才發現原來行動裝置在點擊完後會觸發 :hover ，要取消這個樣式必須要使用者自己點擊其他的區塊來移除樣式，不過要動到使用者的操作就絕對不是好解法，直到看了這篇文章才知道原來已經有 css 解法了，如果有讀者遇到類似的問題不妨也可以用這個方法試試看，說不定就解出來了～
使用 React Hooks 搭配 Context API 取代 Redux
這個算是我心中一個很難解的議題，以前 React 還在 class component 時期時無庸置疑 Redux 是一個非常好用的 state machine，但由於 Redux 有個非常大的缺陷就是無法處理非同步的 action 也因此有了 redux-saga 、 redux-thunk 、 redux-promise 、 redux-observable 等等 middleware 來處理非同步的狀態處理，這也造就了讓前端工程師需要學習更多的工具才能解決問題，但是現在 React 進入大 hook 時代，一堆 custom hook 以及 dependencies 的監聽讓你的 component 可以不用再處理那麼多的 state 管理，再加上 React 也同時更新了 context 的運用，所以到底 hook 有沒有需要 Redux 呢？這個問題一直在我心中沒有一個正確的解答XD
svelte
svelte 算是 2020 年最大的 JavaScript Framework 黑馬了吧，但為什麼拖到 2021 年才來講呢？是因為在 2020 年的 JavaScript Framework 排行榜中，svelte 竟然名列前茅，這讓前端工程師又更頭痛了，React 還沒學得淋漓盡致，Vue 也還沒摸透，更不要說還有一個換了一版本就要重寫的 Angular，現在還要多學一個 svelte 是不是在搞工程師XD 但 svelte 為什麼會突然受到那麼多人喜歡也不是沒有道理，svelte 只有 document.createElement 跟 element.textContent 的包裝而已，沒有 Virtual DOM 的概念，加上容量更小的 bundle file，和不用再額外學一些 framework 自己創出來的 API(對我就是在說 React XD)，只要會 JavaScript 最基本的語法就可以利用 svelte 把網頁寫的好效能也不差，非常適合初學網頁的人使用，看了這篇文章後也想開始學習 svelte 這個框架了XD
Golang
Go 在即將到來的 1.16 版本中，有一些滿有趣的新 feature，而且內建的 library 也有一點變動，所以推薦這三篇介紹 Go 1.16 的文章給大家讀讀～
Go 1.16 推出 Embedding Files
首先是第一個新 feature - embedded files，以往如果專案裡面有一些執行過程中會用到的檔案、圖片，那就沒辦法把整份程式碼編譯成單一執行檔，但有了內建的 embedded files 之後，就可以把所有檔案及程式碼編譯成一個執行檔，雖然那個執行檔會比較肥（因為塞了檔案在裡面），但在 deploy 跟 release 時都會方便許多
從一知半解到略懂 Go modules
Go 在 1.11 時就推出自己的 package management 工具 Go modules，但最初只是實驗性質所以預設是關閉的，而且那時還有 dep 跟 vendor 等等競爭對手。但在經過幾個版本的推動之後，Go 1.16 終於要預設開啟 Go modules 功能，也代表以後的依賴管理就是以 Go modules 為主了，所以還不熟悉他的朋友們得快點跟上囉
A Tour of Go 1.16’s io/fs package
寫過一陣子 Go 的人應該都知道 Go 內建有個 package 叫 ioutil，但這個 package 原本的定位就怪怪，有一種「這些功能很好用，但不知道要放哪裡，所以就弄個 util」的感覺，所以 Go 決定要在 1.16 把 ioutil deprecate 掉，並且把原有的功能放到新的 package io/fs 裡面，所以快來看看最新的 io/fs 怎麼使用吧～
如果覺得學不動了，為了讓舊版本的程式碼可以跑，ioutil 還是會繼續留在那邊，所以短時間內還不用擔心，不過有時間的話還是去了解了解 io/fs 比較好～
DevOps
The DevOps Tools Lifecycle Mesh for 2021
DevOps Tool Chain 就像是名模生死鬥一般，有些不用多久的時間就被淘汰掉，也會一直有新的冒出來，而 Harness 這邊幫大家整理好 2021 年的 DevOps Tool，按照不同的功能屬性分類好，趕緊來瞧瞧看自己鑽研的領域有沒有多出新的角色，並且順便從各大分類中看看自己的技能樹有沒有少了什麼XD
Terraform Mono Repo vs. Multi Repo: The Great Debate
有用 Terraform 或是其他 IaC 工具的人一定都會想要問究竟該使用 Mono Repo 或是 Multi Repo 來管理 IaC 程式碼，答案就是…這取決與你的組織！Mono Repo (這邊是指連 Module 都在同一個 Repo 內) 的好處就是從一個地方就可以取得所有 Infrastructure 的資訊，但缺點是開發起來不方便，效率也不好，Repos 的權限控管也不好做；而 Multi Repo 的好處就是 Module 拆開管理的話開發比較方便，也可以讓不同的團隊一起使用，引用的時候可以做到版本控制，權限控管也可以輕易達成，但缺點就是必須花時間去下載，官方建議可以透過 Git Submodule 的方式來解省一些本端開發的時間
K8s-mirror
K8s-mirror 是一個新的專案，可以使用 repo 內的 kube-exporter.sh 腳本把 K8s 內所有的資源給匯出儲存成一個 JSON 格式的檔案，透過另外一個 etcd 和 kube-apiserver 就可以查看這個檔案，感覺用來做測試很方便，不過作者有說此專案目前在 PoC 的 Pre-Alpha 階段而已，請大家使用要小心
StarBugs Weekly
StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。
內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！
Writers:
- @HannahLin - 從台灣到矽谷，熱愛前端的工程師女孩。
- @Kyle老莫 - 無法忍受自己一天不進步的熱血社會菜雞。
- @Airwaves - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。
- @Jenny - 我不寫 CSS。
Curators:
- @Andy - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。
Maintainers:
- @GQSM - Hi！我是神 Q 超人，一個先衝再說的男人。
- @Larry850806 - 我是 Larry，傳說中的 0.1 倍工程師！
- @LukaTW - 一名全身都是死角的工程師。
- @smalltown - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。
Feedback
本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 星巴哥技術週刊 FB 粉絲專頁 與我們聯繫。