第 111 期 - 我現在可以說我是史上最佳射手了

Created on 2021-12-15

本週專欄

「星巴哥文章推薦」開發全記錄 — 從 Hexo 到 11ty

最近嘗試使用 11ty 也就是 eleventy 來架設共筆部落格。所以做了一個小 Side Project 來嘗試一下 11ty 開發共筆部落格。在開始之前，先說明一下星巴哥文章推薦的核心精神。讓更多人可以分享看到的好文章，看到的同時，也可以宣傳一下自己的 Blog。並且在 Github 上留下貢獻的記錄。除了對他人有幫助外，對自己，對社群都有幫助。這是星巴哥文章推薦的出發點。

前端開發

A Complete Guide To Incremental Static Regeneration (ISR) With Next.js

在 Next.js 中有一個相當重要的設定叫：Incremental Static Regeneration (ISR)，拜 ISR 所賜假如只有該頁面需要更新內容，可以只重 build 該頁面即可，不需要重 build 整個專案，對於 SSG 渲染方式來說可說是相當好用的一把利器，想要了解 Next.js ISR 的完整介紹，不妨可以參考這篇文章。

Keeping things fresh with stale-while-revalidate

stale-while-revalidate (SWR) 可以說是相當重要的一個 cache 處理機制，有了這套機制可以讓使用者在面對一個內容確定過期的頁面不會在一開始進入過長的等待，瀏覽器會先從 cache 返回之前的內容，並同時更新要顯示的正確內容，待下次使用者重新進入此頁面時就會是最新的內容了，有興趣了解 SWR 機制的可以參考看看這篇文章。

Learnings from React Conf 2021

React 每年都會有一場盛大的 conference，這次的 conference 又介紹了相當多好用的工具，有興趣的讀者可以參考別人整理好的筆記。(所以我說那個 React 18 什麼時候才要正式上線呢XD

想知道一个20k级别前端在项目中是怎么使用LocalStorage的吗？

文章中解釋了 LocalStorage 的用法，並提出在正常情況下使用 LocalStorage 會出現哪些問題，以及如何更好的管理存在 LocalStorage 中的資料，

Refactoring If..Else Statement In JS

作者提出用 Ternary operator、Switch Case、Short Circuit、Guard clauses 和 Function delegation 改善了 if…else 的寫法，可以思考哪種方式更適合目前的情境。

7 useful HTML attributes you may not know

所有的屬性都滿少見，但是在特定用途上又非常實用，可以稍微掃視了解一下。還有第一個留言也提到可以用 designMode 使整個網站變得可修改，方便做一些初期設計工作。

DevOps

Terraform 1.1 Improves Refactoring and the Cloud CLI Experience

HashiCorp 這幾天最大的新聞應該就是在 Nasdaq IPO 了！不過我們還是回歸技術面來看一下 Terraform 剛推出的 1.1 版有哪一些值得關注的內容:

Terraform 使用久了之後，難免會遇到想要 ReFactoring 的狀況，例如把單一個 Module 拆成多個，這次在 1.1 推出了 moved statememt，讓使用者透過 plan 來預覽跟驗證 Refactoring 的動作，有興趣的人可以參考官方教學文章
改善在 Terraform Cloud 與 Enterprise 中的 CLI 體驗

Karpenter vs Cluster Autoscaler

上個月底 AWS re:Invent 推出了另外一套叫做 Karpenter 的 Kubernetes Cluster Autoscaler，而他跟目前大家使用的開源 Cluster Autoscaler 有什麼不一樣呢？就以 EKS 這個 Kubernetes 來舉例說明，它分成 Control Plane 和 Node Group，既有的開源 Cluster Autoscaler 會去偵測是否有 Pod 處於 Pending 的狀況，然後去叫控制 Node Group 的 AWS Auto-Scaling Group 根據需求增加多少台機器

而 Karpenter 可以根據 Pending Pod 所需要的資源跳過 Node Group，直接開適合的 EC2 出來，所以其實在時間跟資源的應用上都可以更有效率，例如突然有個需要使用超級多 Memory 的 Pod 處於 Pending 的狀態，在 AWS Auto-Scaling Group 裡面所定義的機器型別根本就都不適合此 Pod 運行，Karpenter 就可以直接協助開啟一台符合此 Pod 使用的 EC2 然後直接把 Pod 指派到這台新開的 EC2 上，所以對於 Kubernets Worker Node 的擴展性來說強大很多

Using ChatOps to help Actions on-call engineers

在 GitHub 內常使用 ChatOps 來幫助合作更順利，使用的 Chatbot 為 Hubot，運行 ChatOps Command 很像是在 Terminal 運行自己的指令一樣，但不同之初在於所有的團隊成員都可以看到運行的成果，這讓合作時的溝通是即時的，特別是在處理 Incident 時，可以更快的恢復服務並且找出原因；而目前在 GitHub 內讓應用服務保持健康不再是某個神秘團隊的責任，而是落在建立該服務的工程師手上，因此除了幫 GitHub 建立力強大的功能之外，在 GitHub 的工程師也會貢獻他們時間在維護服務的健康上，此文便是講述前幾天一個新的 Actions on-call engineer: Mona 她處理 Incident 的經過，從其中可以看出 ChatOps 如何協助她快速且有效的處理事件

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