第 82 期 - Work from home 不孤單，我們陪你

Created on 2021-05-25

本週專欄

React | 為太龐大的程式碼做 Lazy Loading 和 Code Splitting

不曉得大家在使用 React 或是 Vue（抱歉我只用過這兩種前端框架，沒有要排擠的意思 😂）寫完程式要打包的時候，會不會遇到打包後的 JavaScript 太肥大了，讓網頁下載資源的時間變長，導致畫面出現在網頁的速度也跟著變慢。Lazy loading 和 code splitting 就是為了解決編譯後的打包檔太大的問題所存在的。雖然大部分人可能不會馬上遇到打包後的檔案太大的情況，但是遇到的話該如何優化呢？一起看看文章吧！ 🙌

前端開發

How to Use CSS Selectors to Style Your Web Page

把 CSS 中常用的選擇器分成「簡單選擇器」、「組合選擇器」、「偽類選擇器」、「偽元素選擇器」和「屬性選擇器」，並仔細介紹它們的功能，大家可以先把這篇存起來，之後使用到時再打開找自己需要的，不然看過一次可能很快就會忘了。 😂

Top 10 Chrome DevTools tips & tricks

本篇文章介紹了 Chrome DevTools 提供給開發者的各種好用功能，也許這些功能可以大大的減少你在查找 Bug 或是調整前端畫面的時間。

The future of Internet Explorer on Windows 10 is in Microsoft Edge

微軟將要把瀏覽器的主力通通放到 Edge 上了，因此會在 2022 年 6 月 15 日開始停止 IE 的使用（身為前端工程師，讓我歡呼一下 🎉），文章中描述了幾個將 IE 淘汰的原因（各位可以撇開私仇，從專業的角度了解一下 😂）。

Google AMP is dead! AMP pages no longer get preferential treatment in Google search

Google 終於要終止 AMP 專案了 🎉，以前很多新聞平台為了讓自己的新聞稿曝光率增加都會利用 amp 的方式讓手機可以快速的閱讀靜態網站的內容，所以很多大型公司為了讓自己的網站可以增加 Google 的自然搜尋都會要求前端工程師改寫網站成 amp 的模式，不過最近 Google 要終止這個專案了前端工程師們終於可以減少學習的技能了XD

:nth-of-type() & :nth-last-of-type() - 你覺得燒腦但其實根本不燒腦的選取器趴兔

會突然分享這篇文章的原因是因為最近看了一個 codepen，沒想到竟然會有多個元素同時一個選擇器選到，後來才知道原來 CSS 選擇器也可以利用數學公式的原理這樣玩真的太特別了！

Array.prototype.flat()

最近在看新的 ES10 的功能中，發現了一個正在實驗性但是很好用的陣列操作 method，flat 簡單來說就是壓平的意思，可以幫助一個複雜的多維陣列壓平成一個一維陣列，目前基本上主流的瀏覽器都支援這個方法了，如果之後開發上有需要做到類似的操作不妨使用原生的方法就好，不用再額外引用 lodash 的 flattern 了XD

Go

Comprehensive Guide to Dates and Times in Go

常常被時區、時間差、日期輸出格式搞到很煩嗎？這篇文章整理了 Go 裡面各種跟時間的函數，教你怎麼在各種格式之間轉來轉去

Graceful Shutdowns in Golang with signal.NotifyContext

對於一個 API server 來說，除了流量要扛得住之外，在 server 即將要關閉時做 Gracefully shutdown 也是非常重要的事情。而這篇文章提供了一個很簡單的範例，教你怎麼用 signal.NotifyContext 在收到 signal 時開始 gracefully shutdown，而不是直接就把 server 關掉

Go Package CI/CD with GitHub Actions

因為 Github Action 對於開源專案是完全免費的，而且跟 Github 的整合非常好，所以很多開源專案也紛紛從 Travis/Circle CI 轉過來。如果你手邊剛好也有 Go 的開源專案想要使用 Github Action 的話這篇是不錯的例子，不管是執行 Lint、Test 還是跨平台編譯這篇都寫得很清楚，懶得自己動手的話也可以借他的腳本過來改一改～

DevOps

Kubernetes: 6 open source tools to put your cluster to the test

K8s 生態系中有很多蓬勃發展的工具可以用來協助使用者，這篇文章介紹了六個用來測試 K8s Cluster 和在其中應用程式的好用工具:

Kubernetes Dashboard: 大家都知道可以用來管理 Cluster 的 Admin Console
Kube-monkey: 把 Netflix 的 Chaos Monkey 改成專門運行在 K8s 中的版本
Kube-hunter: 用來對 K8s Cluster 做滲透測試用以發現資安弱點的工具
Project Quay: Quay 不只是 Container Image Registry，同時也可以幫忙掃描 Image 有沒有什麼 Vulnerability
Kube-burner: 對 K8s Cluster 做壓力測試，例如一次建立很多的資源，然後再同時刪除掉
Kube-bench: 檢查 K8s Clustser 是否符合 CIS Kubernetes Benchmark

Introducing AWS App Runner

AWS 最近發佈的一個新的服務叫做 App Runner，號稱用來運行容器化 Web 服務的最簡單方式，使用他就不用再去管什麼 K8s, 不用設定 Pipeline，也不用去優化 Load Balancer，或是需要擔心 TLS 憑證是不是要過期了，當然也沒有伺服器需要管理，只需要把 Container 丟進去就可以跑了，然後再根據運行時間去算錢！

The Architecture of Uber’s API gateway

API Gateway 是微服務架構中不可缺少的一環，因為他可以為所有的應用程式提供單一個入口，並且提供一個介面來取得資料，商業邏輯和功能性，他也是一個用來實作許多高階功能的地方，例如 routing，protocol 的轉換，Rate Limiting, Load Shedding，處理 Header，安全審核，使用者存取控制…等；而這篇文章是想要深入探討 Uber 自己使用的 API Gateway 系統內的每個技術元件，推薦給有使用微服務架構的人參考看看

StarBugs Weekly

StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。
內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！

Writers:

@HannahLin - 從台灣到矽谷，熱愛前端的工程師女孩。
@Kyle老莫 - 無法忍受自己一天不進步的熱血社會菜雞。
@Airwaves - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。
@Jenny - 我不寫 CSS。

Curators:

@Andy - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。

Maintainers:

@GQSM - Hi！我是神 Q 超人，一個先衝再說的男人。
@LarryLu - 我是 Larry，傳說中的 0.1 倍工程師！
@LukaTW - 一名全身都是死角的工程師。
@smalltown - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。

Feedback

本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊星巴哥技術週刊 FB 粉絲專頁與我們聯繫。