該周報主要為各個地方內容的彙總整理
技術#
理解 React 伺服器組件#
React 伺服器組件 (RSCs) 是在 React 框架中加入了數據獲取和遠程客戶端與伺服器通信功能的組件。RSCs 解決了傳統的客戶端和伺服器之間的緊密關係問題，並透過在伺服器上進行渲染來提高性能。RSCs 還可以減少客戶端 JavaScript 包的大小，並提供更快的頁面加載速度。RSCs 與客戶端組件和伺服器組件可以在同一個 React 樹中進行互動。然而，RSCs 也有一些限制，例如無法使用生命週期鉤子和狀態。在 Next.js 中，透過 App Router 可以使用 RSCs，並且可以選擇將組件設置為客戶端組件。
- React 伺服器組件（RSCs）將 React 的基本功能擴展到了數據獲取和遠程客戶端 - 伺服器通信的範疇。
- RSCs 解決了傳統 React 在伺服器渲染和 Suspense 方面的一些問題，提供了更好的性能和用戶體驗。
- RSCs 減少了客戶端 JavaScript 包的大小，提高了頁面加載速度，並且可以與客戶端組件和 Suspense 無縫集成。
為什麼 DNS 仍然難以學習？#
這篇文章討論了為什麼學習和調試 DNS 問題會很困難。作者指出了一些原因，包括系統的隱藏性、處理隱藏系統的方法、DNS 伺服器提供的擴展調試信息等。此外，文章還提到了一些與 DNS 相關的工具和一些奇怪的問題，如負快取、getaddrinfo 實現的差異等。最後，作者提出了改進工具和輸出格式的一些建議。
- DNS 是一個被廣泛使用的技術，但學習和調試 DNS 問題很困難，因為其中很多系統是隱藏的。
- DNS 的隱藏系統包括計算機上的 DNS 庫、解析器的快取以及解析器與權威域名伺服器之間的對話，這些都不容易直接觀察和理解。
- 透過教育人們了解這些隱藏系統，改進工具輸出的可讀性，以及增加調試信息等方式，可以使學習和調試 DNS 問題更加容易。
在 TypeScript 中使用 Extract 的 6 種方法#
本文介紹了 TypeScript 中一種非常有用的工具類型 Extract 的多種用法。其中包括透過區分標識符提取聯合類型的成員、透過成員形狀提取聯合類型的成員、提取聯合類型中的所有字符串、布爾值和數字、提取聯合類型中的所有函數、從聯合類型中排除 null 和 undefined 以及找到兩個聯合類型中的共同成員。
- TypeScript 的 Extract 是一種非常有用的工具，可以從一個聯合類型中提取特定的成員。
- Extract 可以根據聯合類型的鑑別屬性或形狀來提取特定的成員。
- Extract 還可以用於從聯合類型中提取特定類型的成員，如字符串、布爾值、函數等。
原型的價值在於它所傳遞的洞察，而不是代碼。#
這段文字講述了原型開發的價值和重要性。原型可以幫助我們快速驗證想法，獲取反饋，並做出決策。它可以幫助我們了解問題，找到解決方案，並提供有價值的見解。原型不僅是代碼的產物，更是一個學習的工具，可以幫助產品和工程團隊做出關鍵的商業決策。文中還介紹了不同類型的原型，以及如何進行原型設計的方法和步驟。最後，強調了透過原型學習到的知識對於項目的成功和未來類似項目的重要性。
- 原型設計是驗證想法、獲取反饋、收集數據的重要工具，幫助產品和工程團隊做出關鍵性的業務決策。
- 原型的價值在於提供洞察力，而不僅僅是編寫的代碼。它可以幫助我們快速失敗，獲取決策所需的數據，並安全地進行試錯。
- 原型設計是一個學習工具，它透過與利益相關者的對話，幫助我們發現需求、解決問題、改善產品，並為最終產品的成功與否起到決定性作用。
如何使用 Resend 透過 React 發送電子郵件#
本文介紹了如何使用 React Email 和 Resend 發送電子郵件，並使用 Next.js 構建了一個典型的投資組合聯絡表單。透過 Resend API，我們可以發送電子郵件，並使用 React Email 創建郵件組件。文章詳細介紹了如何設置 Next.js 應用程序、獲取 Resend API 密鑰、創建郵件組件以及使用 Resend 發送電子郵件的步驟。最後，強調了使用 React Email 和 Resend 可以簡化創建和發送電子郵件的過程，並提供了相關文檔和示例代碼的鏈接。
- 最近，使用 React 創建和發送電子郵件變得非常困難，但是 React Email 和 Resend 的出現解決了這個問題。
- 在使用 Next.js 搭建應用程序並設置 Resend 之後，我們可以創建一個典型的投資組合聯絡表單，用於發送電子郵件。
- 使用 React Email 和 Resend，我們可以輕鬆創建和發送電子郵件，它們提供了優秀的開發者體驗。
如果 Web 組件如此出色，為什麼我不使用它們？#
Web 組件在過去十年中沒有取得廣泛應用的原因主要有以下幾個方面：1. Web 組件過於低級，主要面向框架作者，而大部分框架已經解決了他們的問題。2. 早期的 Web 組件和 Polymer（Google 的 UI 框架）之間存在混淆，加上 Google 的一些宣傳方式不當，使得 Web 組件的推廣受阻。3. 缺乏成功案例和知名產品的支持，難以讓人投入使用。4. 直到最近才得到廣泛支持，之前只是實驗性技術。5. Web 組件存在一些性能問題。如果能重新做一遍，就應該將目標用戶定位為 WordPress 用戶，減少 Google 的影響，簡化樣式問題，並建立一個行為準則。
- 存在市場推廣問題，缺乏全面的營銷策略。
- 過於底層，設計初衷是為框架開發者而設計，但對於已經解決了大部分問題的框架開發者來說，並沒有太大吸引力。
- 在早期的推廣中存在重度宣傳的問題，與 Google 的 UI 框架 Polymer 產生混淆，導致推廣效果不佳。
虛擬鍵盤 API#
本文介紹了移動設備上固定元素被虛擬鍵盤遮擋的問題，並介紹了如何使用虛擬鍵盤 API 來解決這個問題。作者詳細解釋了問題的原因，並提供了一些使用虛擬鍵盤 API 的示例和用途。虛擬鍵盤 API 目前只在安卓版 Chrome 瀏覽器中支持。作者建議謹慎使用虛擬鍵盤 API，因為在某些情況下可能會引起其他問題。
- 移動設備上的固定元素在虛擬鍵盤激活時可能被鍵盤遮擋，影響用戶體驗。
- 使用虛擬鍵盤 API 可以解決這個問題，透過檢測鍵盤位置和尺寸來調整佈局。
- 虛擬鍵盤 API 目前僅在 Chrome for Android 瀏覽器中支持，使用時需要啟用 JavaScript 或者使用 meta 標籤或 CSS 屬性。
Nginx 使用量子安全加密算法#
該文章介紹了量子計算機的威脅以及如何使用量子安全加密算法來保護網站數據的安全。Open Quantum Safe 項目提供了一些能抵禦量子計算機攻擊的加密算法，並提供了 nginx、Chromium 等軟件的編譯、集成流程文檔。文章還提供了編譯 OQS-OpenSSL 和編譯 Nginx 的具體步驟。
容器編排器的自我介紹#
該文介紹了容器編排器的發展歷程，包括容器編排器的自我介紹、Swarm 和 Kubernetes 的介紹。Swarm 是 Docker Compose 的升級版，支持服務發現、負載均衡、滾動更新等特性，但不能實現容器的高可用性。Kubernetes 是目前最受歡迎的容器編排器，支持在多達數千個節點的集群上管理和分配資源，具有強大的功能和性能，支持民主化變革，但配置較為複雜。
工具#
ora#
優雅的終端 Spinner
size-limit#
計算運行您的 JS 應用程序或庫的實際成本，以保持良好的性能。如果成本超過限制，請在拉取請求中顯示錯誤
a11y-dialog#
一個非常輕巧和靈活的可訪問模態對話框腳本
更新#
Sharp - WASM#
設計#
鏡子：高層次設計#
這段文字主要講述了設計在解決問題中的重要性以及設計師應該具備的能力和責任。文章強調了設計是有意識地影響結果的行為，是控制我們命運的手段，是創新的魔法粉。同時，文章也指出了人們在評估他人的知識和技能、確定重要目標方面存在的偏見和困難。最後，文章呼籲我們要正確理解設計的本質，並根據目標和相應的知識技能來選擇最合適的人來設計解決方案。
- 設計是有意識地影響結果的行為，是控制我們命運的手段，是拒絕不喜歡的現狀的方式。
- 設計是從我們存在的黎明時代就開始的，它是對混亂的一種武器，是創新的妙方，是追求幸福的基礎。
- 在技術生態系統中，工程師和設計師在設計方面的技能可能不同，但角色不應該決定誰能提出最好的解決方案，應該根據知識和技能來確定最佳設計者。
其他#
AI 模型需要用戶清晰描述他的问题，但是當代社會有一半人的表達能力不夠好，無法從（當前的）AI 模型得到理想的結果。
-- 《AI：60 年來第一個新的 UI 範式》
事情幾乎總是從某個人做一些當時看起來毫無用處的事情開始的。
-- 詹姆斯・伯克，英國科技史家
如果想長期吸收學到的東西，你必須參與其中，親自動手實踐。
但是，在智能手機流行的社會，真正的參與變得比以前困難。人們已經習慣了被動瀏覽別人的作品，分享、點讚和轉發替代了自己的參與。
-- 《如何在數字時代更好地學習》