第 126 期 - 以為是 feature 的東西，在 20 年後才發現原來是 Bug
本週專欄
Vue | 在選擇 CSS Modules 做 UI Component Library 以及 Storybook 的初體驗
Hi！大家好，我是神 Q 超人！前一陣子滿幸運可以參與到公司規劃的一些新專案，為了這些專案，我們需要把會重複使用的介面切成 component library，而在這個過程中剛好有遇到一些小問題，就想說把它們記錄下來，如果有其他人或是之後碰上類似的狀況，就能有一些思考如何解決的方向。
前端開發
Remix – Web Standards Are Cool Again
Remix 是 React Router 的團隊開發，並在去年正式開源的全端框架。文章中作者介紹了他對 Remix 中感興趣的地方，像是 SSR、Routes 和 錯誤處理等，看完我都想要來試試 Remix 了！
Why does JavaScript’s parseInt(0.0000005) print “5”?
JavaScript 有許多方法的回傳值都讓人匪夷所思，這篇文章就來解析 parseInt 這個方法，看看為什麼在 JavaScript 裡將 0.0000005 透過 parseInt 轉換成整數會得到 5。
Tailwind vs Sass/SCSS: Structure and Consistency over Style and Comfort
雖然 Tailwind 和 Sass/SCSS 寫起來的方式完全不同，但畢竟都是用來提高寫 CSS 的質量用，難免會被拿出來比較一下。那對於這兩種編寫 CSS 的方式，你又有什麼想法呢？
後端開發
Multi-Tenant Application
所謂的 multi-tenancy 概念就是眾多的使用者再看不到彼此資料的前提之下，一起分享運算資源，網路和儲存裝置，所以一個 multi-tenancy 應用程式必須為每一群使用者 (或稱為 tenant) 去訂製，但是整個架構和核心功能必須保持一致，所以 multi-tenancy 也是 SaaS 廠商常常採用的方式，讓資源利用最大化，不過 multi-tenancy 實際上是如何運作的呢？要怎麼設計一個具有 multi-tenancy 的解決方案架構？有興趣的人不要錯過這篇文章了
1 min guide to Golang development best practices in 2022
使用一分鐘快速了解 Golang 的 Best Practice 🏃🏻 這篇文章想帶讀者用最短的時間快速了解必要的函示庫和重要提示，讓 Golang 開發者天天擁有高效率與簡易的開發人生
- 熟悉如何使用 Go Modules 來管理 Golang 套件相依性
- 使用 Gin 來構建 Web API
- 建立妥適的 Git Repoisotry 結構
- 利用 SQLX 來完成資料庫查詢作業
- 一定要在 API 加上認證機制
- 使用 Microservices 的概念來撰寫 API 功能
- 輸入良好的 Log 來追蹤錯誤或是臭蟲，例如 Zap, Logrus
- 使用 HttpTest 和 asset 來做測試
- 使用 Redigo 來處理跟 Redis 的連線
- 利用 CI/CD 來自動化開發流程
- 讓 pre-commit hooks 幫助省下 commit 前要花費的時間
macOS Tools and Apps for Development in 2022
相信有不少人使用 macOS 來當作日常的開發環境，正所謂工欲善其事必先利其器，這篇文章的作者表示雖然網路上有不少介紹 macOS 相關的開發工具文章，不過好像介紹的東西對他來說都不那麼有用，有些甚至還讓他浪費更多寶貴的時間，所以他決定自己寫一篇來介紹真的對改善他自己工作效率有效的 macOS 開發工具大補帖💪 底下列出分類和名稱，有興趣的人可以直接參閱內文通通裝起來 🤩 (Fig 我自己也超推的，最近新竄起的新創所開發)
🛠️ Terminal 工具類
- Homebrew
- iTerm2
- ZSH
- Oh My ZSH!
- Fig
- Volta
- Ngrok
🛠️ 桌面軟體
- VS Code + plugins
- GitKraken
- ResponsivelyApp
- RunJS
- Altair GraphQL Client
🛠️ 其他工具
- Moom
- CleanShot X
- Sli.dev
- Notion
DevOps
Prometheus - Investigation on high memory consumption
作者先幫讀者複習一次 Prometheus 的名詞解釋和運作原理，之後循序漸進分析出記憶體幾乎是用在哪裡，最後得出的結論是 Prometheus label 比 metric 本身還要消耗記憶體，拿掉作者認為不重要的 id label 後，生產環境的記憶體使用量減少了 75%。
Prometheus rate function
Prometheus alert rule 在網路上常常看到 rate() function 的範例，但個人覺得官方文件解釋稍微抽象了一點。於是找到這篇作者除了解釋 rate() 原理外，也說明跟 irate() 的差異，並且分享了實際的使用心得建議，甚至提供了 alert rule 和 SLO 計算的範例，另外作者也提醒 rate() function 計算期間沒有 scrape 到資料的話會失真。
Getting started with Grafana dashboard design
這篇以影片為主，主要是 Grafana dashboard 展示的確以影片的傳達媒介較佳。這次 webinar 說明在設計 dashboard 時要注意的人類瀏覽的行爲、顏色的使用、觀看者是誰以及 panel 呈現的優先度等等。後半段也有大量 dashboard 火力展示和 Q&A，Q&A 內容可以看到一些精彩的示範，例如從 50:12 主持人回答如何在同一個時間點對比 metric 和 log。
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 - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。
- @RicoChen - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。
Feedback
本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 星巴哥技術週刊 FB 粉絲專頁 與我們聯繫。