第 104 期 - 又到了想要一直待在被窩裡的季節
本週專欄
Shift Left Testing - Policy as Code 工具大比拼
在 2019 年時曾經撰文 “介紹 Policy as Code”，當初提的為 Open Policy Agent 這套工具，經過兩年他的定位跟功能沒有太大的改變，而 “Kubernetes PodSecurityPolicy Deprecation 的消息” 應該有讓大家更重視他一些；當把他放到充滿 IaC 的真實環境運用時，會發現其實導入上沒有那麼容易，因為…
- 官方主要提供 PaC 框架，其中的 Policy 需要有懂 Rego 的人去撰寫跟維護
- 雖然有跟週邊的生態圈整合的方式，但自己覺得只到堪用的階段
因此這兩年來陸續有不少工具與服務如雨後春筍般冒了出來，藉由填補這些缺口讓大家更簡單的把 Policy as Code 整合至 Infrastructure as Code 的開發環境中，此篇文章便把自己目前看到一些比較多人使用的工具筆記下來，讓有需要的人在選擇時可以有個依據
前端開發
Animating with GSAP and SVG
文章中介紹如何使用 GSAP 和 SVG 來製作動畫，而除了程式碼的實作之外，作者也簡單介紹什麼是 GSAP 和 SVG，也提供了他自己設計動畫的思路給大家參考！
Simple Screen Recorder With Vanilla JS
作者介紹如何使用 navigator.mediaDevices.getDisplayMedia 來取得你要提供的螢幕畫面，並用 MediaRecorder 把螢幕內容記錄並下載成檔案。文章中提供的程式碼非常清楚和簡單，可以稍微記一下該怎麼做，下次遇到類似的需求就可以馬上聯想！
CSS Layers Tutorial: Real CSS Encapsulation
雖然現在幾乎沒有任何一個瀏覽器能夠使用 CSS 的 Layers 語法，但是 Layers 仍然是一個可能改變我們如何寫 CSS 思考模式的 feature，在被廣泛支援之前先來搶先看看吧！ 🙌
The optimistic UI with React
Optimistic UI 又稱樂觀 UI 在近年的前端可以說是相當興盛，有了這種開發模式可以提升更多使用者體驗，可以說是前端工程師相當重要的一個開發模式，有興趣的讀者不妨可以蒐藏起來閱讀~
TreeShaking性能優化實踐原理篇
tree-shaking 對於前端來說相當重要，可以幫助前端減少不必要的 bundle 減少最終的 bundle size，想要了解 tree shaking 的原理可以看看這篇~
MongoDB
30天之你好MongoDB 系列
雖然已經是幾年前的文章，但小馬克的這一系列講 MongoDB 講得非常清楚，如果想要有系統性的學習 Mongo 的基礎知識，那這一系列真的很推
Do You Need Mongoose When Developing Node.js and MongoDB Applications?
有在 Node.js 中使用過 MongoDB 的人應該都知道 Mongoose 這套 ODM，他最大的好處就是可以幫你做 schema validation，讓你的資料庫不會有一堆缺值、型別錯誤的 document，但現在的 MongoDB 內建的 schema validation 也算是很成熟了，所以下個專案也許可以考慮不需要使用 Mongoose，直接用官方的 mongo driver 就好了
Investigate Queries with explain() and Index Usage
有時候在用 Mongo 時會發現 query/insert 的速度不如預期，這時候就需要用 explain 來分析一下到底問題出在哪裡，有可能你以為你精心設計的 index 可以大幅加速 query，但 explain 下去才發現根本沒吃到 index。所以為了讓資料庫照著你想要的方式去動作，今天就把 explain 學好吧～
DevOps
3 Reasons to Choose a Wide Cluster over Multi-Cluster with Kubernetes
在今年的 KubeCon 一直被大家提及的字眼都有關於分散式的 Kubernetes, 例如 Edge, Hybrid Cloud 和 Multi-Cloud，而每個主題都會對應到一拖拉庫的解決方案，例如：KubeEdge, OpenShift Edge, Akri, Baetyl, Kubermatic, Lens, Rancher, KubeFed, KubeSphere, Red Hat ACM, Liqo, Skupper, Linkerd, Fleet…等，但假如可以讓 Kubernets Node 部署在跨不同的地理位置，並且由單一個 Kubernetes Cluster 來做管理，那是不是就不需要上面那些解決方案了？！而這種架構稱為 Wide Cluster 或是 Stretched Cluster，同時也是 Multi-Cluster 模式的替代方案，其實從 Latency, Security, Cloud Cost 和 Cloud Support 這些面向來看的話，Multi-Cluster 都是佔上風的，但作者提出三個 Wide Custer 還是有其用處的理由：
- 不想要去採用一堆複雜的工具，省掉很多的時間，例如學習, 維護…等
- 節省多個 Cluster 架構下重複設定與元件的管理時間與所需資源
- 透過 Mesh VPN 任意無限制地將 K8s Node 延伸到任何的地點
The Best VS Code Extensions to Supercharge Your Git
雖然說 DevOps/SRE 應該都是 Terminal 的愛用者，熟悉各種 Git CLI 指令，但其實透過 VS Code 加上 Extension 可以讓 Git 用起來更容易，並且擴展 Git 的功能與能力，所以作者在這篇文章推薦了幾個 VS Code Git Extension 給大家參考：
- Git Graph: 在 VS Code 最流行用來視覺化 Git 的 Extension，透過它可以看到 Commit Tree 和完成複雜的 Git 操作
- GitLive: 可以讓使用者知道該 Git Repository 其他的貢獻者是否在線上，並且即時知道他們正在處理哪一些 Git Issue 和 Branch
- Git Automator: 假如你很懶得輸入 Commit 訊息，那一定要試試看這個 Extension，他會根據開發者的動作幫忙填寫 Commit Message，並且讓開發者可以透過快捷鍵去增加和 Commit 檔案
- Git Urgent: 他的功能只有一個，而且就像他的名字一樣，讓使用者只需要一個指令就直接增加所有檔案，並且 Commit 完後 Push 到遠端的 Git Repository
- Git Tree Compare: 讓目前正在使用的檔案跟任意的 Branch, Tag 或是 Commit 做比較
- GitLens: 擁有一千萬安裝的 Extension 王者，讓開發者可以得知每一行程式碼的 Commit 資訊，與本地端的差異，顯示出有改變的那幾行，方便開發修改的進行
Helmify
又到介紹小工具的時間，不知道大家有沒有遇過一種情況，就是已經有管理 K8s 資源的 YAML 檔案，有可能是人類撰寫，或是使用 kubectl output 所獲得，但是希望把它轉換成 Helm Chart，使其之後可以變成使用 Helm 來管理；而 Helmify 就是可以幫助大家達成這件事情的小工具，目前已經常見的 K8s 資源已經都有支援，例如 Deployment, Service, RBAC, configs 和 webhooks，假如剛好有這個需求的話就可以使用這個小工具來節省寶貴的時間
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 粉絲專頁 與我們聯繫。