第 103 期 - 秋意濃，入秋最低溫18度
本週專欄
IT 邦幫忙鐵人賽懶人包 2021 — 不可以比中指! 用Python做一個AI有禮貌神器!
去年寫完就有明年一定不要再寫了，沒有新意。但是看到鐵人賽很多好文，不看一下好像很可惜。看完如果沒有記錄下來以後要找又很麻煩，於是還是下筆開始寫了。
撰寫到後面才發現有這麼有趣的系列文。秉持著不能只有我看到的精神，現在還面對著比中指的圖片寫文章。寫了那麼多的文章第一次有這麼奇妙的感覺。
前端開發
Facebook CSS-in-JS Solution Stylex Introduced at React Finland 2021
Stylex 是一位 Facebook 的工程師 Naman Goel 在 React Finland 2021 中展示的 (有興趣的話可以看看影片)，Stylex 是為了讓大型的 React 應用程式更好的使用 CSS-in-JS 的解決方案。聽說 Stylex 的開源大概會在 2021 年底出現，一起來看看它具備什麼樣的功能吧！
5 Key UI Design Principles For Beginners
文章中提到五個前端的 UI 設計原則，個人覺得當中的 Color Theory、Typography 和 Hierarchy 都是在處理前端中需要留意，但又很常會不小心遺漏的部分，看完後也可以檢視之後切版或是拿到 UI 設計稿時，多思考一下這樣的頁面代表了什麼。
Confused About rem and em units in CSS?
簡單解釋了 em 以及 rem 的差別，並提出以 rem 為單位時，要設定值的一些不方便的地方，以及解決方法。而文章最後也說明 em 和 rem 沒有哪個比較好，兩者都有人在使用，建議大家可以都用看看，並感受他們的差別和使用情境！
React.js
從 Hooks 開始，讓你的網頁 React 起來
雖然已經是兩年前的文章，不過 PJCHENder 這一系列講 react 跟 hook 講得非常清楚，就算完全沒有寫過 react，只要有前端跟 JS 的基礎知識就可以看懂哦
React Hook Form vs. Formik: A technical and performance comparison
React Hook Form 跟 Formik 是繼 Redux-Form 之後比較新興的競爭者，主要的功能也是做表單的狀態管理，而這篇文章詳細比較了他們的效能以及寫法，如果最近還在煩惱要用哪個 lib 來做表單的話可以參考看看～
A Guide to React Context and useContext() Hook
Context 算是 React 裡面比較進階的技巧，有時候為了讓整個應用的狀態集中管理，就會需要把一堆 props 一層一層往下傳。但如果這樣傳了太多層，除了程式不好看之外效能也可能變差，而這時候就可以適當的把一些很常用的變數放進 context，就可以讓程式更好維護哦～
Nginx
NGINX vs Apache: Head to Head Comparison
在 Nginx 還沒誕生以前，主宰整個 web server 的一直都是 Apache，自從 Nginx 誕生後使用人數急速上升甚至超越了 Apache，到底這兩套工具哪個比較好又有哪些差別，這篇文章有做比較有興趣的讀者可以閱讀看看~
8分鐘帶你深入淺出搞懂Nginx
如果讀者跟我一樣都是想要學習 Nginx 但又不知道要從何下手，看著國外的參考資料又覺得英文讀起來相當費時又費力，這邊推薦一篇中文的 Nginx 新手大禮包，可以方便讀者快速了解 Nginx 在做什麼以及 Nginx 是如何做到這些功能的。
Nginx —— 理解HTTP 代理，負載均衡，緩衝（Buffering）和緩存（Caching）
Nginx 強大的地方就在於除了可以當作是 web server 外還可以當作 reverse proxy server，有了 reverse proxy server 就可以很輕鬆的做到 Load balancer 等等功能，這篇文章講述了幾個在流量處理當中 Nginx 可以做到的好用功能，有興趣的讀者不妨可以閱讀看看
DevOps
K8s On-Call Hero
這週想要介紹的三篇文章都與 Kubernetes 相關，首先是一個叫做 K8s On-Call Hero 的線上小遊戲，看起來是 Komodor 為了行銷而開發，遊戲做的滿用心與精美的，其中使用 K8s 常會遇到的問題來當作計分題目，例如在什麼情況下會遇到 ImagePullBackOff，當 Secret 不存在時會引發什麼樣的錯誤，而玩家將有機會獲得機票，Apple Watch 或是 T-Shirt，有時間的話不妨花個幾分鐘玩玩看 😏
How to create Kubernetes YAML files
YAML 是一個可讀性高，用來表達資料序列化的格式 (Wiki)，所以閱讀 YAML 檔案是相當直覺簡單的，不過撰寫 YAML 檔案就沒那麼有趣了，而且以 K8s 來說，自己私底下嘗試，與實際 Production 要使用的 YAML 檔案是有一段差距的，因為正式使用階段的檔案和內容都是不一樣的量級，而且 K8s 本身的資源就有不少種，再加上組職內會用到的 CRD，有沒有覺得頭越來越暈了XD 所以這篇文章介紹幾種建立 K8s YAML 檔案的方式，如何在開發流程自動檢查與修正 YAML 檔案錯誤…等，假如想要瞭解更多的話，請參閱原文
- YQ
- Kubectl
- Docker-compose
- VSCode with plugins
- CDK8s
- NAML
- Online Tools
Trigger a Kubernetes HPA with Prometheus metrics
前一陣子有提到 KEDA 從 CNCF Sandbox 變成 Incubating 專案，他可以讓 K8s Scale Out 符合更多的應用場景，而這篇由 Sysdig 所分享的文章，就是示範透過 KEDA 由 Prometheus Metric 來觸發 Kubernetes 的 HPA；了解 KEDA 的功能，和實際示範之後，應該都會覺得一定要裝起來用的啊XD 不然原生的 HPA 功能相對陽春，不太能夠滿足各式各樣的需求，推薦給有需要使用到 HPA 的 K8s 開發人員
StarBugs Weekly
StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。
內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！
Writers:
- @HannahLin - 從台灣到矽谷，熱愛前端的工程師女孩。
- @KyleMo - 雜食性軟體工程師，喜歡的技術我都想學。
- @Airwaves - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。
- @Jenny - 我不寫 CSS。
- @Andy - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。
Maintainers:
- @GQSM - Hi！我是神 Q 超人，一個先衝再說的男人。
- @LarryLu - 我是 Larry，傳說中的 0.1 倍工程師！
- @LukaTW - 一名全身都是死角的工程師。
- @smalltown - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。
Feedback
本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 星巴哥技術週刊 FB 粉絲專頁 與我們聯繫。