第 129 期 - 有人看是 Bug，有人看像 Feature，這就是雅量

Created on 2022-04-19

本週專欄

原來程式碼打包也有這麼多眉角 - 淺談 Tree Shaking 機制

Hi 大家好我是 Andy，身為一位前端工程師，效能優化這件事情一直都是必須要做的事情，隨著現代的網頁越來越複雜，bundler 要做的事情也越來越多，究竟 bundler 是如何優化打包過後的程式碼，就讓我們來仔細探討這個 Tree Shaking 機制吧！

前端開發

CSS Parent Selector

你有曾經想要去確認過是不是有某個特定的 element 包含在 parent 之中嗎？這邊要介紹的 :has 就能讓你判斷這件事情，作者在文章裡先是描述了網頁排版中會遇到的狀況，並以 :has 來解決。可惜的是 :has 在瀏覽器之間還沒有很高的支援，這點是要注意的地方！

Javascript -Iterators and Generators

作者介紹 JavaScript 中的 iterators 和 generators 方法，記得之前面試的時候，就有被考過 iterators 的概念，以及如何在不用 Array、也不使用多餘空間（例如宣告 100 個 index 的 array，或是 100 個 key 的 object）的情況下，用 for…of 跑過 1-100 執行，當時的答案就是使用 generators

Those HTML Elements You Never Use 🌚🕵🏿

又到了稀有 HTML 標籤的介紹時間了，作者列出了超過十個你可能沒看過的 HTML 標籤，雖然有些功能我們已經透過 UI Framework 使用很久了，但默默地 HTML 也偷偷追了上來。

MongoDB

該用 MySQL 或 MongoDB？選擇資料庫前你該了解的事

在剛開始學習使用資料庫時，第一個會先碰到的問題就是要使用 MySQL/PostgreSQL 還是 MongoDB，但要使用什麼資料庫跟你的應用場景其實有很大的關係，如果還不知道怎麼選的話來看看這篇的分析吧

MongoDB 不懂 ESR 別說你會用 Index !!

在 MongoDB 中進行 query 時，如果希望盡量吃到 index，那在設計 index 以及進行搜尋、排序時就要遵守 ESR(Equality, Sort, Range) 原則，但不知道為什麼這個原則並沒有寫在官方文件裡XD，所以如果你有在用 MongoDB 卻沒聽過 ESR 的話趕快來這邊補一下

Getting started with MongoDB explain()

在使用資料庫時，為了加快搜尋的速度我們都會使用 index，但怎麼知道你建立的 index 是不是真的有被吃進去呢，總不能憑感覺吧，所以這時候就要把 explain 請出來，看看 Mongo 是不是真的有照你想的去使用建出來的 index

後端開發

30 Coding Concepts I Learned After Reading “Clean Code”

作者本身喜愛將自己所讀完的書給記下來，因此在讀完 Uncle Bob 所撰寫的 Clean Code 之後，將讀完此書學到的 30 個概念給整理出來，首先講述 Clean Code 的整體思想與概念，然後再深入探討這三十個概念的細節，策略與實作相關訊息，假如沒有太多時間來讀這本書的話，可以考慮花個 15 分鐘閱讀此篇整理文章

1,000,000 Concurrent Connections

作者最近看到不少文章有一個錯誤的觀念，述說著一台伺服器最多只能接受 65,000 個連線，作者首先提出一些證據來打臉，首先是 WhatsApp 所使用到的 Phoenix Web Framework 早就演示過可以在單一個 Port 上接受數百萬的連線，再來要是任何人假如不相信的話，可以使用簡單的 Java 在自己的機器做個實驗就可以了；但為了證實自己所說，作者還是詳細的做了個 PoC 將結果展示給大家看，結果顯示在 Mac 就可以接受到將近八萬個連線，並且將可能遇到的問題給記錄下來

CQRS Software Architecture Pattern: The Good, the Bad, and the Ugly

Command and Query Responsibility Segregation (CQRS) 是一種專門用來將資料的讀與寫分離開來的架構，其中的 Queries 就是負責來讀取資料的模型，Commands 就是用來負責更新資料的模型；這篇文章將會詳細的介紹 CQRS 的架構，並且詳細地說明如何實作 CQRS，以及他的優缺點，跟可能會遇到的問題

DevOps

Finding Vulnerable Info Using Google Dorks — Ethical Hacking

此篇撰寫了如何用 Google 搜尋引擎的特性尋找敏感的資訊，例如：鎖定檔案類型為 log 且內容含有 username 的結果，以及尋找可以直接看的公開線上鏡頭（我第一個搜尋結果可以看到塞爾維亞街頭攝影機的即時影像），其實推薦這篇不為別的，就是希望提醒大家維運系統時盡量不要把 credential 上傳到網路上啊！

OpenTelemetry, the standardized observability framework for everyone

OpenTelemetry 算是在業界引起了一波浪潮，其提供完整的 APIs、SDKs、工具和整合讓 tracing、metrics 和 logs 可以得到更好地整合。作者分享自己整合 jaeger 和 datadog 的經驗和 demo，另外作者也有把 demo code 上傳到 Github 上，有興趣的可以照著文章的步驟做。

How to Generate Terraform Code with Opta

作者介紹 Opta 是以 Terraform 為底層做抽象化封裝，與之相比 Terraform 太多底層的細節要注意，在建造 infrastructure 堆積木的過程中很容易有設定錯誤的情況發生。反之，向 Opta 表示意圖並且產出 Terraform files 之後也可以對 Terraform files 做細節的調整，相比之下使用 Opta 是比較人性化的。不過此專案還算早期，抽象化的封裝還不夠多而且都以 AWS 為主，但可以看得出來團隊很認真經營社群，slack channel 都還算活躍。

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