第 96 期 - 疫苗打起來

Created on 2021-08-31

本週專欄

Kubernetes Multi-Clusters Monitoring With Prometheus & Thanos

近期跟同事一起 Refactory 組織內給 K8s Multi-Clusters 使用到的 Prometheus 監控系統，期間發現 Thanos 讓每個元件負責單一功能，讓我們像在組樂高積木般，根據自我需求去設計出最符合自己的 Prometheus Stack，因此內文提到的方式並不是最佳解，大家可以根據自身需求再去探索出適合自己組織的架構，而在不同元件的整合上，希望可以透過此文讓開始實作的維運人員少走冤枉路，文章內容主要談到…

📕 各種 Prometheus Stack 監控 K8s Multi-Cluster 方式的優缺點分析
📕 Prometheus Alert 和 Grafana Dashboard 要如何支援 K8s Multi-Clusters
📕 實作 K8s Multi-Cluster Monitoring 時可能遇到的相關問題與建議做法

前端開發

Announcing TypeScript 4.4

Microsoft 在 8/26 的時候宣布 TypeScript 4.4 的可用功能。其中的 --exactOptionalPropertyTypes，是為了讓 TypeScript 區分物件裡的成員為 undefined 是因為該物件缺少該成員或本來的值就是 undefined 所新增的 flag。其他功能再點進文章中看看更多詳細的介紹！

How to Implement Drag and Drop in Vanilla JS

在前端的網頁中，需要使用拖拉來提升使用者體驗的場景越來越多。這篇文章的作者在不使用套件的狀況下，用原生的 JS 來實現拖拉的功能！

Material-UI 5 is Coming: Here’s What I’m Excited About

在使用 React 的時候 Material UI 就一直是很喜歡用的框架之一，如今它也要進入到 5 了！目前已知的新功能有以下幾點：

Improvements to Codemod CLI：讓 v4 升級到 v5 更容易！
Switch Component：新增了開關的 Switch Component。
Changes to Default Color Values：改變 info、success 和 warning 的預設顏色。
Changes to Slider：修改了 Slider Component 的樣式。

且根據發佈時程，應該可以在九月份就能使用了！ 🙌

細說event.currentTarget & event.target的不同使用

有時候在處理一些 event 上的事情，總是會把 event.target 或 event.currentTarget 這兩種處理方式搞混，在 input 的 onChange 中要取得值時會用 event.target 可是有時候一些 onClick 要取得值時卻會用 event.currentTarget，究竟這兩個差在哪呢？這篇文章有了詳細的解釋。

TypeScript 泛型之 Omit<T, K> = Pick<T, Exclude<keyof T, K>>

在 TypeScript 中有些 type 的設定可以說是非常好用但是初學 TypeScript 時可能不會特別去注意，例如 Omit 就是一個很好的例子，這篇文章整理了幾個好用的泛型定義方式以及為什麼這個設定會有這樣的結果都有完整的寫出來，算是蠻用心的一篇文章，有興趣的讀者不妨可以收藏起來日後閱讀。

Design Patterns in JavaScript

Design Patterns 可以說是軟體業非常重要的一個觀念，但是真的很少人會按照 design pattern 的方式來設計程式碼XD
這篇文章介紹了如何在 JavaScript 中利用 design pattern 的方式來設計整個架構，有興趣的讀者也可以閱讀看看~

Security

不識廬山真面目：Clickjacking 點擊劫持攻擊

在眾多前端的攻擊方式中，我覺得 Clickjacking 算是很腦洞大開的一個XD。胡立這篇文章非常詳細介紹了 Clickjacking 的原理、如何防範，最後甚至還有實際案例分析，非常值得讀的一篇文章

關於 email security 的大小事 — 原理篇

相比於 Web security，比較少看到有文章在探討 Email 相關的安全性問題，而且這篇文章為了介紹認證機制還先講了 Email 在傳輸過程中有哪些關卡，對於了解 Email 原理有非常大的幫助！

How hackers steal your keys and secrets

這篇文章說明了駭客可能會從哪些地方得到你的密碼或 API Key，像是在 Github 原始碼找到、Google 找到之類的，而且也有提供幾個很實用的預防方法

DevOps

OpenTelemetry becomes a CNCF incubating project

上週 KEDA 成為 CNCF Incubating 專案，這週是 OpenTelemetry 這套讓使用者拿來分析軟體效能與行為的遙測工具，不知道下週還會不會有?! OpenTelemetry 其實是由 OpenCensus 和 OpenTracing 這兩個專案於 2019 年 5 月合併創建的，過了不久成為 CNCF Sandbox 專案，從那時開始，OpenTelemetry 團隊開發了 11 種語言的 API 和 SDK，並且在 OpenTelemetry Protocol (OTLP) 全面支援 Metric 和 Tracing，而且目前已經被廣泛採用，例如 F5, Grafana Labs, Shopify, Splunk…等，越來越多使用者和相關廠商將 OpenTelemetry 運行在大規模 Production 環境中，至今已有超過來自 220 間公司的 500 個開發者對此專案做出貢獻，例如 Amazon, Dynatrace, Google, Honeycomb, Lightsetp, Microsoft, Splunk, User…等

OpenTelemetry 主要包含底下三個部分：

📕 OpenTelemetry Protocol (OTLP): 定義了遙測的資料來源，中繼節點 (例如 Collectors) 和遙測後端這三者彼此之間的資料是如何編碼，傳輸跟傳遞的機制

📕 OpenTelemetry Collector: 提供無關特定廠商的接收，處理和匯出遙測資料的實作層，免除讓使用者需要運行，操作跟維護多種 Agent 和 Collector

📕 API 和 SDK: 具有支援 11 種語言的 API 和 SDK，讓使用者可以輕易地整合和擴展自己目前手上的專案

Karmada 0.7: Next-Gen Multi-Cloud and Multi-Cluster Kubernetes Orchestration

本週的週刊有提到 Kubernetes Multi-Clusters 是未來的趨勢，InfoQ 這篇文章剛好也介紹了 Karmada (Kubernetes Armada) 這套系統，他是專門設計用來管理 multi-cloud 和 multi-cluster Kubernetes 的系統，提供中心化的管理功能，具有高可用，自動修復於流量調度的能力，Karmada 根據 Kubernetes Federation v1 和 v2 為基礎去做開發，繼承了其中的一些基本概念

Karmada 在上個月剛推出的版本 0.7 中增加了不少功能，例如 Multi-Clusters 的 Service Discovery，精確的 Cluster 狀態管理，根據 Cluster 資源來做 Replica 的調度，更方便易用的 API，而 KubeFed v2 還在 Beta 階段，而且有些功能甚至還在 Alpha 階段，這樣不成熟的狀況，讓使用者缺乏信心將其用在 Production 環境上，所以假如有這方面的需求，或許可以考慮看看 Karmada

My Favorite CLI Tools

每次看到有人介紹自己珍藏的 CLI 工具大補帖時，一定會停下來看一看，找找有沒有什麼好用的工具是自己所欠缺的，趕快把它補起來，這次推薦的作者為 fish 派系，像我自己是 zsh XD 除此之外有幾個工具我自己目前沒有使用過，真的是賺到了！

🛠️ fish shell: 記得也是滿多擁護者的一種 Shell
🛠️ starship: 強大的命令列提示工具
🛠️ z: 快速在常用的資料夾中切換
🛠️ fzf: 通用的模糊搜尋工具
🛠️ fd: 更好的 find 命令取代方案
🛠️ ripgrep: 更好的 gerp 取代方案
🛠️ htop and glances: 系統監控工具
🛠️ virtualenv 和 virtualfish: Python 虛擬環境管理共聚
🛠️ pyenv, nodenv, 和 rbenv: 用來管理不同版本的 Python, Node 和 Ruby
🛠️ pipx: 在獨立的環中安裝 Python 套件
🛠️ ctop and lazydocker: Docker 的監控工具
🛠️ homebrew: macOS 的套件管理工具
🛠️ asciinema: 用來錄製 Terminal Session，而且錄製的內容可以被複製貼上
🛠️ colordiff 和 diff-so-fancy: 加上色彩的 diff
🛠️ tree: 用來呈現資料夾結構
🛠️ bat: 更好的 cat 取代工具
🛠️ httpie: 更好的 curl 取代工具
🛠️ tldr: man 的替代方案
🛠️ exa: 更好的 ls 取代工具
🛠️ litecli 和 pgcli: 用來取代預設 sqlite3 和 psql 的 Client 連接工具
🛠️ mas: App Store CLI 版
🛠️ ncdu: 硬碟使用狀況分析

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 粉絲專頁與我們聯繫。