AgedCoffee

該周報主要為各個地方內容的彙總整理

• 技術
  • 四層負載均衡漫談
  • GLB: GitHub’s open source load balancer
  • Advanced usage patterns for taking page element screenshots with Playwright
  • 技術債務的定義與處理
  • Does Interaction to Next Paint actually correlate to user behavior?
  • Getting Started with React Native Skia
  • TanStack Router – modern React for the rest of us
  • Printing Perfection, A Developer’s Journey with React-to-Print
• 工具
  • nft
  • JSPyBridge
  • stylex
  • tinyld
• 更新
  • XState v5 is here
  • Astro 4.0
  • RTK-v2.0.0
  • Storybook 7.6
• AI
  • design2code
  • CopilotKit
• 其他

技術#

四層負載均衡漫談#

四層負載均衡是一種在網絡中常見的技術，通常作為 TCP 層的反向代理使用。它根據 TCP 頭部中的端口和標誌位來轉發數據，而不維護完整的 TCP 實現。這種負載均衡更像是轉發 IP 包而不是 TCP 代理。這種設計使得四層負載均衡具有高效的轉發效率。除了這些基本概念，還介紹了依賴服務發現的客戶端側負載均衡和反向代理模式的負載均衡技術。在後者中，將負載均衡器放在後端實例前面，通過將流量均衡地轉發給後端實例來實現擴縮容。然而，負載均衡器本身也需要解決自身的擴縮容和服務發現問題。

• 四層負載均衡是 TCP 層的反向代理，根據 TCP 頭部的端口和標誌位來轉發數據，而不維護完整的 TCP 實現。
• 四層負載均衡更像是轉發 IP 包而不是 TCP 代理，轉發效率高。
• 依賴服務發現的客戶端側負載均衡是讓客戶端知道存在多個伺服器，並根據一定策略訪問不同的伺服器。
• 反向代理模式的負載均衡通過在後端實例前面放置負載均衡器來實現擴縮容，將流量均衡地轉發給後端實例。
• 負載均衡器本身需要解決自身的擴縮容和服務發現問題。

GLB: GitHub’s open source load balancer#

GitHub 發布了他們的負載均衡器 GLB Director 的設計細節，並將其開源。GLB Director 是一個第四層負載均衡器，可以將一個 IP 地址分散到多個物理機器上，同時儘量減少伺服器變化時連接的中斷。它不取代 haproxy 和 nginx 等服務，而是在這些服務（或任何 TCP 服務）之前添加了一層，使它們能夠在多個物理機器上擴展而不需要每個機器都有唯一的 IP 地址。GLB Director 利用 ECMP（Equal-Cost Multi-Path）路由實現 IP 地址的擴展，通過哈希算法將連接均衡地分配到多條路徑上。為了解決連接斷裂的問題，GLB Director 引入了一個新的層級 “director”，負責控制哈希和存儲與連接相關的狀態。GLB Director 通過利用代理伺服器已有的流狀態，避免了在 director 層級中重複存儲連接狀態的問題。為了保持一致性，GLB Director 使用 “rendezvous hashing” 來選擇主伺服器和備用伺服器，並通過調整伺服器狀態來添加和刪除伺服器。

• GitHub 發布了他們的負載均衡器 GLB Director 的設計細節，並將其作為開源項目發布。
• GLB Director 是一個 Layer 4 負載均衡器，可以將單個 IP 地址分布在多個物理機器上，以實現負載均衡，同時儘量減少連接中斷。
• GLB Director 通過使用 ECMP 路由和流狀態改進了傳統負載均衡器的設計，使得代理伺服器可以在無狀態的情況下進行添加和刪除，並保持連接的穩定。

Advanced usage patterns for taking page element screenshots with Playwright#

本文介紹了如何使用 Playwright 進行網頁截圖，並對截圖進行自定義修改。作者首先介紹了使用 Playwright 框架進行截圖的基本用法，然後通過示例演示了如何使用 Playwright 的 addScriptTag 方法在截圖前修改 DOM，以及如何使用 Sharp 模塊對截圖進行修改。最後，作者還介紹了 Playwright 的 mask 功能，可以通過指定 CSS 選擇器來隱藏截圖中的某些元素。

• 使用 Playwright 工具可以方便地進行頁面截圖，可以用於視覺回歸測試或爬取第三方網頁。
• 通過 Playwright 的 addScriptTag 方法可以在截圖前修改頁面的 DOM 結構，從而控制截圖的內容。
• 使用 Sharp 模塊可以對截圖進行裁剪、調整大小和處理，實現對截圖圖片的修改。

技術債務的定義與處理#

本文討論了技術債務的定義和處理方法。技術債務是指在開發過程中為了完成代碼而做出的妥協，包括魯莽債務、審慎債務、故意債務和無意債務。技術債務會帶來負面後果，如代碼庫不穩定和性能問題。為了處理技術債務，建議記錄所有妥協並添加註釋，嚴格遵守編碼風格指南，進行代碼審查，並使用恥辱文件來跟蹤和處理已知的債務。

• 技術債務是指在開發過程中為了解決問題而做出的妥協，可能會影響代碼的穩定性和可維護性。
• 技術債務有四種類型：魯莽債務、審慎債務、故意債務和無意債務，每種類型都有不同的後果和處理方法。
• 處理技術債務的方法包括記錄一切、遵守編碼風格指南、進行代碼審查和跟蹤技術債務清單。

Does Interaction to Next Paint actually correlate to user behavior?#

在這篇文章中，作者討論了 Google 推出的交互至下一次繪製（INP）指標，該指標將取代首次輸入延遲（FID）成為 2024 年 3 月的核心 Web 關鍵指標之一。文章介紹了 INP 的定義、如何測量和影響因素，並通過實際數據分析了 INP 與用戶行為和業務指標之間的相關性。作者還提到，不同網站的結果會有所不同，INP 與轉化率存在負相關關係，但與 Google 的閾值沒有一致的關聯。最後，文章介紹了如何在 SpeedCurve 中測量 INP，並提供了相關資源。

• Interaction to Next Paint (INP) 是一個用於衡量頁面對用戶交互響應性的指標，與實際用戶行為和業務指標存在負相關關係。
• INP 的好壞與用戶行為和轉化率呈現負相關，說明 INP 是一個與用戶感知性能相關的有意義的指標。
• INP 與谷歌設定的閾值（好、需要改進、差）之間沒有一致的相關性，因此需要根據自己的數據來確定閾值。

Getting Started with React Native Skia#

Skia 是一個跨平台的 2D 圖形庫，允許在 iOS、Android、macOS、Windows、Linux 和瀏覽器上繪製圖形。@shopify/react-native-skia 庫將 Skia 功能暴露給 React Native 開發者。Skia 在 React Native 中可以用於繪製自定義用戶交互，具有優化性能和動畫效果的特點。文章介紹了如何使用 Skia 繪製基本形狀和路徑，並通過 react-native-reanimated 庫實現動畫效果。

• React Native Skia 是一個跨平台的 2D 圖形庫，可以在多個操作系統和瀏覽器上運行。
• RN Skia 提供了強大的繪圖功能，可以繪製自定義形狀並實現動畫效果。
• 使用 React Native Skia 可以構建不同於常規 React Native 組件的自定義用戶交互，並實現高性能的動態效果。

TanStack Router – modern React for the rest of us#

TanStack Router 是一個基於 React 的路由庫，它提供了類型安全的路由和數據加載功能。它的設計靈感來自於 Remix、NextJS、TRPC 和 Chicane。通過將路由與應用的狀態和 UI 結合起來，使得應用能夠更好地控制 URL 和頁面狀態，實現更好的多任務處理和數據預加載效果。TanStack Router 還支持文件式路由和嵌套路由，可以幫助開發者更方便地構建下一代應用。雖然它目前還處於 beta 版本，但已經受到了開發者的歡迎和使用。

• Tanner 通過 TanStack Router 為我們提供了一種類型安全的路由，使得構建下一代應用變得更加輕鬆。
• TanStack Router 將路由放在應用程序狀態和界面的控制之中，使得每個重要的 UI 變化都與一個新的 URL 相關聯，從而實現了頁面重構和多任務處理的能力。
• TanStack Router 的嵌套路由功能可以通過控制不同部分的 UI 來實現更靈活的頁面佈局，同時支持加載和錯誤狀態的處理。

Printing Perfection, A Developer’s Journey with React-to-Print#

這篇文章講述了作者在商業應用中實現自定義打印解決方案的經歷。作者通過使用 "react-to-print" 庫來利用瀏覽器原生的打印 API，解決了默認打印佈局不理想的問題。作者分享了選擇該庫的原因、遇到的挑戰以及解決方案。文章強調了在 Web 開發領域中持續學習、解決問題和社區的重要性。

• 為了實現更好的打印佈局，有時需要使用非瀏覽器默認的打印解決方案。
• "react-to-print" 是一個基於瀏覽器原生打印 API 構建的庫，具有較高的下載量和廣泛的使用者。
• 在實施過程中，需要注意解決組件引用、隱藏元素和鍵盤事件等問題，以實現理想的打印效果。

工具#

nft#

Node.js 依賴追蹤工具

JSPyBridge#

用於互操作 Node.js 和 Python 的橋樑

stylex#

一個適用於雄心勃勃的用戶界面的樣式系統

tinyld#

NodeJS 的簡單高效語言檢測庫

更新#

XState v5 is here#

XState v5 是一個基於狀態機、狀態圖和 Actor 模型的開源狀態管理和編排解決方案。它主要關注於演員（actors）的使用，使開發者能夠更輕鬆地編寫和管理複雜的應用邏輯。在這個版本中，XState 引入了演員作為抽象單位，可以用來創建各種類型的邏輯，如 Promise 邏輯、Transition 函數邏輯、Observable 邏輯和 Callback 邏輯。同時，XState v5 還引入了新的特性，如 Inspect API、深度持久化和演員系統等。這個版本還對 API 進行了簡化，減小了打包大小，並進行了文檔改進和添加了新的示例。

• XState v5 是一個基於狀態機、狀態圖和演員模型的開源狀態管理和編排解決方案，旨在簡化邏輯管理和協同開發。
• XState v5 的主要關注點是演員，它們可以模擬系統中多個部分之間的通信和協作。
• XState v5 引入了新的演員邏輯創建器，並通過創建演員來實現不同類型的邏輯，如 Promise、過渡函數、Observable 和 Callback。

Astro 4.0#

Astro 4.0 是一個用於構建內容驅動網站的 web 框架，它提供了一些新的 API、更快的構建速度、重新設計的文檔和一個增強本地開發環境的開發工具。新版本的亮點包括 Astro 開發者工具欄、國際化路由、增量內容緩存、新的視圖轉換 API、重新設計的日誌和文檔。Astro 4.0 還引入了國際化路由和增量內容緩存等新功能，提供了更簡化的開發和更快的構建速度。可以通過 npm 安裝 Astro 4.0，並使用 Astro 開發者工具欄增強本地瀏覽器開發體驗。

• Astro 4.0 是一個用於構建內容驅動網站的 Web 框架，具有快速加載和強大的 SEO 功能。
• Astro 4.0 引入了 Astro Dev Toolbar，可以增強和定制本地瀏覽器開發體驗。
• Astro 4.0 還增加了國際化（i18n）路由、增量內容緩存、新的視圖過渡 API、重新設計的日誌和文檔等功能。

RTK-v2.0.0#

這個重要版本更新帶來了一些重大改變，包括刪除了舊版的語法、更新了中間件和增強器選項、增加了新的方法和中間件，以及對其他依賴進行了更新。此外，還改進了 TypeScript 的支持和構建輸出的現代化等。這個版本是 Redux 系列所有相關包的重大更新之一。具體的改動和遷移指南可以在 Redux 文檔中找到。

• RTK 2.0 的主要更新包括刪除不推薦的對象語法、更新了 configureStore 的中間件和增強器選項、添加了 combineSlices 和 dynamic middleware 等新功能、以及對 RTK Query 和其他庫進行了更新。
• RTK 2.0 中，createReducer 和 createSlice.extraReducers 不再支持對象形式的語法，而是推薦使用 builder 回調形式。
• configureStore 的中間件和增強器選項現在必須使用回調函數的形式，並且建議仍使用默認的中間件和增強器。
• RTK Query 的行為發生了變化，現在會始終跟蹤緩存條目，並優化了訂閱狀態的同步。
• Redux 發布了 ESM/CJS 兼容的包，並優化了構建輸出和工具鏈，不再提供 UMD 構建。
• RTK 現在依賴於 Redux core 5.0、Reselect 5.0、Redux Thunk 3.0 和 Immer 10.0。

Storybook 7.6#

Storybook 7.6 是 Storybook 7 系列的最後一個次要版本，它提高了性能和用戶體驗，增強了與前端生態系統中的工具的集成，並為下一個主要版本 Storybook 8 鋪平了道路。更新內容包括改進 SWC 支持、新增測試工具和快速構建模式、NextJS SWC + avif 支持和修復、SvelteKit 頁面和導航模擬、React-docgen 升級、背景主題、視口和改進的可訪問性、診斷錯誤等。此外，還有一些移除的功能，例如 Storyshots 和 Vue2 的支持。Storybook 7.6 是 7.x 系列的最後一個版本，為接下來的 Storybook 8 做好了準備。

• Storybook 7.6 的改進包括性能提升和用戶體驗改善，與前端生態系統中的工具整合更加緊密，為下一個主要版本 Storybook 8 做好準備。
• Storybook 7.6 通過使用 Speedy Web Compiler（SWC）將 Webpack 項目的啟動時間縮短了 50% 以上，並修復了 Preact 和 React fast-refresh 的 SWC 問題。
• Storybook 7.6 為 Next.js 用戶帶來了 SWC 和 avif 支持，並修復了 Image 組件的 ref forwarding 問題，以及 Jest 兼容性問題。

AI#

design2code#

將任何網頁設計截圖轉換為乾淨的 HTML/CSS 代碼

CopilotKit#

將內置的 AI 聊天機器人 🤖 和基於 AI 的文本區域 ✨ 集成到 React Web 應用程序中

其他#

不要把職業（career）當成某一件具體的事情，這是人類發明的最危險、最令人窒息的概念之一，也是大多數夢想和直覺的敵人。
職業應該是一個抽象的概念，指的是一個人在日常的工作和生活中，不斷探索、培訓、實踐、逐步進步的過程。

--《喬布斯的遺產》