第 124 期 - 夏天來啦！

Created on 2022-03-15

本週專欄

怎麼網頁改完還是錯的？- 一次搞懂 HTTP Cache 機制

一個網站的維護者透過暫存功能最希望達成的兩個目標就是當使用者第二次來拜訪網站時

👍 確保使用者可以獲得最新版本的檔案，假如有任何的檔案被修改時，他們要可以馬上獲得修改完的檔案
👍 在達成上面目標的同時，盡可能從網路下載越少的東西越好

如此一來可以節省頻寬與時間，提升使用者體驗，因此本週專欄想要來探討一下在 Client 端如何透過 HTTP Cache Header 去達成上面的目標？而且要怎麼設定會比較好？

前端開發

Everything You Need to Know About the React 18 RC

React 18 在最近幾天正式進入 release candidate 的階段了！對於前端工程師來說應該是一項非常振奮人心的消息，究竟 React 18 為各位開發者帶來哪些好用的 feature，有興趣的讀者不妨可以看看這篇文章。

12 Gorgeous UI Components for Your Design Inspiration

對於前端工程師來說要自己純手刻出一些非常炫砲的畫面應該是相當的費時又費力，作者精挑細選了 12 個可以讓你的網頁看起來相當炫砲的 UI component，有興趣想使用的讀者不妨可以參考看看。

What’s new in ES2022?

ES2022 即將於 2022 年的 6 月正式推出，究竟 ES2022 提供了哪些全新的功能在 JavaScript 裡頭呢？有興趣的讀者可以點進來這篇文章看看。

What Web Frameworks Solve And How To Do Without Them (Part 1)

作者在文章裡探討幾個現代 Web Frameworks 的差異，以及這些 Frameworks 實現相同技術所花費的成本，這可以讓我們思考 Frameworks 提供的功能是否存在另一種替代方案，或是當我們選擇使用某個方案時，也能從中學習。

A Future Made of JavaScript

JavaScript 除了原本跑在瀏覽器上的功能外，還多了各種不同的功能及用途。作者認為 JavaScript 能夠擺脫瀏覽器限制的最大原因是 Node.js 的出現，而在現今或未來的開發人員的生活中，又有哪些技術是與 JavaScript 有所關聯呢？

The Future of Micro-Frontends

在 2021 年底開始，作者花了幾週的時間研究 micro-frontends（微前端），並分析 micro-frontends 對團隊造成的影響，以及思考如何能夠使 micro-frontends 架構變得更好。

DevOps

awesome-compose

有時想要快速架一個環境做測試的時候 awesome-compose 就非常的好用，裡面有不同的語言甚至前後端資料庫整個架構都有了，有些範例可以讓使用這快速學習到這個服務怎麼使用，畢竟有時候直接看文件還是有點抽象，但直接看 docker-compose 就一目了然。裡面最特別的就屬創世神（Minecraft）伺服器 docker-compose 了。

自己架設服務讓組織有更多的彈性，而且資安規範必須要把服務架設在內網是很常見的事，在選擇服務的時候就可以來 awesome-selfhosted 找找有沒有特別的。除了介紹單一服務外，還有 self-hosting solutions 讓使用者一次建立多個 self-hosted 服務環境，讓你省去個別選擇的煩惱。這個專案看得出來很用心，甚至附上 demo 和 source code 的連結，也有一些分類直接導向別的 awesome 專案連結，甚至還有 License 以及程式語言的 tag。

awesome-baremetal

awesome-baremetal 是搜集了跟實體機器有關的專案，除了工具之外還有介紹不錯的 bare metal 雲服務商。本專案特別的地方在於精挑細選的規則，就必須一直有在開發、要真的有公司使用這些工具、能夠真的被廣泛使用而不是客製化的專案以及不得有廣告的嫌疑，像是這樣的篩選讓人們可以安裝從 awesome-baremetal 專案中做選擇。

後端開發

Rapid Event Notification System at Netflix

Netflix 擁有超過 2.2 億活躍用戶，他們必須確保用戶在不同的裝置間進行的任何動作 (修改 Profile, 觀看電影標題…等) 保持體驗的一致性，考量到支援的眾多裝置種類和使用者可以執行的動作之多，其實這不是一件容易達成的事情，因此 Netflix 開發了一個快速事件通知系統，用來支援任何需要 Server 與裝置間溝通的使用情境，而在這篇文章中將會介紹這套系統的大致樣貌，而且分享 Netflix 在構築它時所學到的事情

Code Verify: An open source browser extension for verifying code authenticity on the web

自從去年 WhatsApp 推出多裝置功能之後，Meta 這邊看到越來越多人直接使用瀏覽器拜訪 WhatsApp Web，考慮到此一使用者行為轉變， Meta 這邊開始想要增加 WhatsApp Web 的安全性，所以最近推出了一個開源的瀏覽器 Extension - Code Verify，他可以自動驗證使用者拜訪的 WhatsApp Web 程式碼沒有被其他人竄改，文章內進一步 Code Verify 的運作機制與使用方式

Modern application load balancing with a centralized control plane

一個服務或是系統，一般來說可以分成 Control Plane 和 Data Plane，將兩者分開可以實現 Software-Defined Everything 和 Infrastructure as Code，這樣的做法可以將應用程式跟其運行的基礎設施解耦合，好處有增加執行效率，增加部署彈性，執行成本最佳化；而傳統的 Load Balancer 和 Web Application Firewalls 通常都沒有將 Control Plane 和 Data Plane 拆開來，當你處在數千個應用服務的環境中時，這樣的模式將會成為 Wordload 的瓶頸，所以文章中提到對於這類型的系統或是服務要如何將 Control Plane 集中化，並將 Data Plane 拆分開來，以及其帶來的好處

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