第 95 期 - 家常音樂

本週專欄

Python — Mutable vs Immutable

今天來探討 Python 中的 Mutable 與 Immutable 的概念。Mutable 顧名思意就是「可變的」,而「Immutable」顧名思義是不可變得。 那麼什麼是「可變的」?什麼是「不可變的」呢?…

前端開發

Practical Uses of CSS Math Functions: calc, clamp, min, max

作者在文章裡介紹四個在 CSS 裡常看見的數學運算函示,也一一講解 calcclampminmax 的功能是什麼,除了程式碼和文字外,還有實作的例子和效果展示!

The Most Surprising Behavior of JavaScript Regular Expression

文章中介紹了在 JavaScript 中內建用正規表示法搜尋的 /g flag,以及在加上 /g 後使用 testexec 方法搜尋又會出現什麼樣的行為。

應該有很多初學者在一開始都不曉得要把 JavaScript 寫在 HTML 中的哪裡,或是該如何把整份文件放到 HTML 裡執行,這篇文章介紹了基本的嵌入方法,以及為何推薦把 JavaScript 放到 body 內容的最後。

從你的 Node.js 專案裡找出 Memory leak,及早發現、及早治療!

說真的自己很少需要處理 memory leak 的問題,如果遇到這種問題第一個反應就是把記憶體加大,能盡量不去審視自己的程式碼就盡量不去做這件事,但追根究柢其實每個 library 在使用的時候或多或少都會佔一些記憶體空間,雖然 JavaScript 會自己釋放已經不需要被使用的記憶體空間,但如果真的有這麼厲害的話應該就不會遇到 memory leak 的問題了是吧XD
這篇文章整理了如何一步一步的找出 memory leak 的原因,快跟著作者一起進入 debug 的過程吧XD

釋放巢狀物件的型別標示吧! feat. TypeScript: Conditional Types

真的沒有想到原來 TypeScript 的研究可以這麼深,還有這麼多不同的玩法可以用,雖然這些都是非常進階的用法可能一般人不見得會用到但還是可以多學習避免日後遇到問題時不知道該如何下手比較好。這篇文章講述了巢狀結構的物件下要如何利用 TypeScript 的型別定義達到快速知道每個 key 其對應的 type 是什麼,非常值得一看並研究。

React 元件庫製造紀事錄 (ㄧ) – 問題說明與第一個麻煩:JavaScript 的模組系統

說真的完全沒有想到原來 JavaScript 的模組系統還有這麼多需要了解的知識在裡面,平常假如都是寫 CSR 的專案基本上都是靠 Webpack 或者是 ESBuild 來進行模組打包,但如果要自己親手打造一個 SSR 而且還不是用 Next.js 這種好用的工具的話到底該如何做呢?這篇文章闡述了如何做的想法以及一些更細節的系統處理,有興趣的讀者不妨可以收藏起來日後可以閱讀。

React.js

Three Practical Examples of Concurrent React

從 React 18 開始,state 更新被區分成 urgent 跟 transition 兩種,urgent 是比較急的必須要馬上更新到畫面上,而 transition 則是慢慢來也沒關係,而這篇文章便是在講你要怎麼運用這兩種 update 才能讓使用者體驗更好~

了解這些,更快掌握 TypeScript 在 React 中的使用

如果想知道要怎麼用 TypeScript 寫 React、寫起來是什麼感覺的話,一定要來讀讀這篇~這篇文從常見的 TS 語法開始講起,慢慢講到用 TS 寫 React 有哪些該注意的地方,雖然文有點長,但看完的話在學習 TS + React 的過程中應該可以少走很多彎路

如何在redux處理非同步操作

在寫 React + Redux 的時候,為了非同步的 dispatch action,通常會需要用到 redux-thunk、redux-saga 或是 redux-observable,那他們三個又各有什麼優缺點呢?一起來看看這篇文章的解說吧

DevOps

New Terraform Planning Options: -refresh=false, -refresh-only, -replace

Terraform 在今年六月增加了三個好用的功能,用以個人開發與團隊協作的效率,分別是 -refresh=false plan option, -refresh-only plan mode-replace plan option,讓我們來稍微說明一下這三個新增在 Plan SubCommand 分別是用來做什麼用的:

  • -refresh=false: 一般來說來做 Plan 的時候會先執行 Refresh State,讓 Terraform State 跟被管理的雲端資源是一致的,中間沒有差異,然後再根據你定義的程式碼跟 State 做比較,就可以得知執行 Terraform Apply 的話,會有哪一些資源被新增/修改/刪除,當管理的資源很多時,一直去對遠端服務發出請求其實時很耗時的,假如你的環境不會被人手動亂改動,Terraform State 是跟所被管理雲端資源是保持一致的,那麼這個時候就可以使用 -refresh=false 節省時間,少掉 Refresh State 的這個過程

  • -refresh-only: 但現實情況就是有可能發生有人需要手動上去修改雲端資源,這時候 Refresh State 其實還是要做,但這個 -refresh-only 的 Flag 可以讓你單純只做 Refresh State 的動作,所以可以根據需求,非同步或是排程去做,等到之後執行 Terraform Apply 時就會讓被管理的資源再度跟定義的程式碼保持一致

  • -replace: 大家應該有一種經驗,就是要把某個資源重新建立出來,以前的作法會先用 Taint 對該資源進行標注,接下來再去做 Plan 與 Apply,而這個 -replace Flag 可以在 Plan 的時候就把要被重新建立的資源直接標註起來,接下來 Apply 的時候就會被重新建立,整個流程變得一氣呵成,不會卡卡的

KEDA moves from the CNCF Sandbox to become an incubating project

有個專門用來擴展 Kubernetes 內應用程式的專案 KEDA (Kubernetes Event-Driven Autoscaling) 最近成為 CNCF Incubating 專案,這個專在在 2019 年時由 Microsoft 和 Red Hat 的合作夥伴所創立,2020 三月進入到 CNCF Sandbox,而且使用人數越來越多,最新發佈的版本支援多達 37 的 Scaler,例如根據常見的 CPU 來做 Auto-Scale, 根據 RabbitMQ (這就比較酷了吧),根據 Cron 排成…等,而它主要由兩個元件所組成,分別是 Agent 和 Metrics

  • Agent: 在安裝 KEDA 後,keda-operator 中的 Container 就像個 Agent 一樣,它負責的主要功能就是根據從 Scaler 來的資訊去對 Deployment 做 Scale In 和 Scale Out

  • Metrics: KEDA 同時也算是一種 K8s 的 Metrics Server ,他對外提供豐富的資訊,例如像是 Queue 裡面還有多少訊息,或是串流延遲的狀況,根據這些資訊,Horizontal Pod Autoscaler 就可以執行對應的 Scale Out 和 Scale In 動作

Modern Watch Command - Viddy

又到介紹小工具的時間,應該有些人,例如像我會去使用一個叫做 watch 的指令,他可以根據設定的時間去一直重複執行某個特定的指令,例如 watch -n 5 kubectl get node 就會每五秒去抓取一次 K8s Node 的資訊顯示在畫面上;而 Viddy 是使用 Go 所寫成的炫砲版 Watch,除了添加了色彩之外,也可以強調每次獲得結果的不同之處,還可以像影片一樣倒帶,搜尋字串,暫停或是重新執行…等,聽完介紹有沒有迫不期待想要趕快安專來玩玩看呢?!

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