該周報主要為各個地方內容的彙總整理
技術#
在 React 中使用 svg 精靈圖標#
本文介紹了在 React 應用中使用 svg 精靈圖標的最佳實踐。作者不推薦在組件中直接編寫 svg 代碼的方式，因為這樣會導致包大小的劇增。相反，作者提倡使用 svg 精靈圖，在一個 svg 文件中存儲多個圖標，以便在需要時只顯示其中的一部分。文章還提供了一些有用的工具和腳本，幫助開發者在項目中使用 svg 精靈圖標。
WebAssembly 在抖音煙花特效中的應用#
本文介紹了如何使用 WebAssembly 對 JavaScript 代碼進行優化，並以抖音煙花特效為例進行了實踐。通過將耗時的 JavaScript 計算打包進.wasm 文件中，利用 WebAssembly 執行原來的計算邏輯，可以顯著提高性能。同時，文章也指出了該方案存在的問題，但對於 CPU 側的性能瓶頸，使用 WebAssembly 仍然是一個不錯的選擇。
強類型 useRef 與 ElementRef#
本文解釋了如何在 React 中使用 useRef 鉤子與原生元素一起使用。它提供了一種解決方案，用於在使用 useRef 時指定正確的元素類型。作者建議使用 React 中的 ElementRef 類型助手，以輕鬆提取所定位元素的類型。這種方法也適用於使用 forwardRef 的自定義組件。文章最後推薦了一門免費的 React 和 TypeScript 初學者課程，以獲取更多技巧和竅門。
- 在 React 中使用 useRef 與原生元素一起使用時，確定正確的類型可能會有些棘手，但使用 ElementRef 類型助手可以更容易地提取適當的類型。
- ElementRef 也可以與使用 forwardRef 的自定義組件一起使用，以提取組件轉發到的元素的類型。
- 如果不確定要使用的類型，ElementRef 是一個有用的工具，可以確保在 useRef 中使用正確的類型。
重現 YouTube 的環境模式發光效果#
本文討論了 YouTube 的 “環境模式” 功能，該功能在視頻播放器周圍創建了一個發光效果。作者對代碼進行了逆向工程，並解釋了如何使用 HTML <canvas>和 requestAnimationFrame 函數來創建此效果。文章概述了 HTML <canvas>元素及其用途，以及 requestAnimationFrame 方法。然後，它概述了創建環境模式效果的步驟，包括在畫布上渲染視頻幀，應用模糊效果和添加 CSS 樣式。文章還討論了 HTML 標記和將<canvas>與<video>元素同步。
YouTube 的視頻播放器的環境模式效果通過將視頻的顏色投射到背景上，創造了一種微妙的發光效果，使其更具沉浸感。
該效果使用 HTML <canvas>元素和 requestAnimationFrame 函數來渲染和同步視頻幀與畫布來實現。
通過縮小、模糊和樣式化畫布，可以在其他視頻上創建類似的發光效果。
React Server Components 提示#
React Server Components（RSC）是 React 的官方數據獲取解決方案。它們帶來了一些限制，如需要深度集成打包工具、嚴格的組件樹結構和模塊組合，以及交互式代碼必須在特殊的客戶端組件中執行等。但它們也帶來了一些好處，如可以在組件內部獲取數據、避免客戶端獲取數據時常見的瀑布流問題、通過<Suspense>實現數據流的加速加載，以及在服務器上執行更多的代碼而不需要將其發送到客戶端，從而減小打包大小。在使用 RSC 時，需要
- React Server Components 是 React 的官方數據獲取解決方案，可以在組件內部獲取數據。
- 使用 React Server Components 可以避免客戶端獲取數據時常見的數據瀑布流問題。
- 使用 React Server Components 可以通過
<Suspense>實現數據流式傳輸，加快頁面的初始加載速度。
完整上下文開發#
本文介紹了延遲加載（lazy loading）的技術，它是一種將資源（如圖片、腳本或 React 組件）的加載推遲到實際需要時的技術。延遲加載可以提高網絡性能和用戶體驗，通過只加載當前所需的資源，減少了加載時間並更高效地利用網絡資源。文章還提到了一些實際案例，通過延遲加載可以顯著提升網站的加載速度。文章還介紹了 React 中實現延
- 懶加載是一種延遲加載資源的技術，可以提高網頁加載速度和網絡資源的利用效率。
- 使用 React.lazy () 函數可以實現組件的懶加載，通過動態 import () 語句來加載所需的模塊。
- 懶加載可以通過與 Suspense 組件結合使用，提供加載中的佔位內容，實現更好的用戶體驗。
Docker 網絡初學者指南#
Docker 的網絡功能包括不同類型的網絡驅動程序。默認情況下，Docker 會創建一個名為 docker0 的橋接網絡，用於容器之間的通信和與主機之間的通信。橋接網絡通過創建 Linux 橋接、內部接口、iptables 規則和主機路由來實現容器之間的連接。橋接網絡可以通過端口映射來實現對外部的訪問。此外，文中還介紹了其他兩種類型的網絡：host 網絡（主機與容器在同一網絡上）和 none 網絡（容器運行在獨立的網絡棧上）。橋接網絡是一種將多個通信網絡或網絡段連接起來的方式。
- Docker 的網絡子系統是可插拔的，支持不同類型的網絡驅動程序。
- Docker 默認創建一個名為 docker0 的橋接網絡，每個新的 Docker 容器都會自動連接到該網絡，除非指定自定義網絡。
- 橋接網絡通過創建一個私有的內部網絡連接主機上的容器，使得容器之間可以通信，同時通過端口映射實現與外界的通信。
TS 之父的新項目 typechat 預示著前端的未來#
TypeChat 是一個能夠將自然語言描述轉換為可執行代碼的工具。它可以對輸出結果進行自動糾錯，並且能夠生成穩定的代碼。未來，前端工程師需要編寫詳盡的類型聲明，讓 TypeChat 生成框架代碼，類似現在前端通過框架編寫狀態變化邏輯一樣。這將導致前端工程師的要求更高，但這個崗位會持續存在，只是從業者會更少。
工具#
veaury#
在 Vue3 中使用 React，在 React 中使用 Vue3
auto-form#
一個 React 組件，根據 zod 模式自動創建 @shadcn/ui 表單。
vaul#
一個用於 React 的未經樣式化的抽屜組件。
capo.js#
把你的<head>標籤內容整理好
swagger-typescript-api#
TypeScript API 生成器通過 Swagger 方案
np#
一個更好的 npm publish
更新#
Astro 2.9: 視圖過渡（實驗性）#
- 引入了實驗性的視圖過渡支持，可以在不需要客戶端路由的情況下實現頁面之間更平滑的過渡。
- 重定向配置選項不再是實驗性的，這使得在項目中設置重定向更加容易。
- Astro 的靜態分析已經改進，通過僅包含所使用的導入來優化腳本捆綁，從而獲得更高效的性能。
其他#
如何成功#
本文提供了關於如何取得非凡成功的 13 個思考，無論是在賺取大量財富還是創造重要事物方面。作者強調了複利的重要性，無論是在商業上還是個人成長上。他們強調了自信、獨立思考和有效推銷自己想法的必要性。鼓勵冒險，保持專注和努力工作。文章最後指出，找到目標並產生有意義的影響可以帶來巨大的喜悅和滿足感。
- 要取得非凡的成功，要專注於提升自己和職業，追求指數級增長，不斷提高成果。
- 培養自信，甚至到幾乎妄想的程度，因為它在實現成功和克服挑戰方面具有巨大的力量。
- 培養獨立思考能力，學會有效地推銷自己的想法，並使冒險變得容易，以便抓住機會並快速適應。
好的代碼就像是給下一位維護它的開發者寫的情書。#
本文強調了編寫優秀代碼的重要性，並將其比作寫情書。優秀的代碼就像一封個人化、真誠而體貼的情書一樣。它遵循設計模式和原則，使其具有可擴展性、可維護性和高效性。遵循最佳實踐，如適當的命名約定和徹底的註釋，也至關重要。嚴格的測試和對未來開發人員的同理心是編寫優秀代碼的關鍵要素。最終，優秀的代碼是他人可以輕鬆構建的持久遺產。
- 優秀的代碼就像一封情書，個人化、真誠而體貼，旨在準確傳達情感並高效解決問題。
- 設計模式和原則是代碼的語法規則，為開發人員提供了共享的詞彙，用於創建可擴展、可維護和可理解的軟件設計。
- 遵循最佳實踐、進行徹底的測試，並對未來的開發人員表現出同理心和尊重，對於創建易於閱讀、理解和維護的好代碼至關重要。
NFTs 101 — 為什麼 NFTs 是一項世代創新#
文章作者解釋了他們對 NFT（非同質化代幣）價值的新認知，並決定投資超過 100 萬美元的 NFT。他們討論了 NFT 帶來的高回報潛力以及 NFT 的價值原因。作者還分享了他們以前對藝術和無形商品持懷疑態度，但解釋了他們如何開始欣賞 NFT 藝術的價值。該文章分為不同章節，涵蓋了 NFT 的各個方面，並提供了與 NFT 互動的實用教程。
- 作者最初對 NFT 和藝術的主觀價值持懷疑態度，但現在成為 NFT 作為技術革命潛力的堅定信仰者。
- 作者強調了傳統藝術估值和 NFT 投機性質之間的脫節，但認為 NFT 可以比傳統加密貨幣投資帶來更高的回報。
- 作者強調了 NFT 在藝術和遊戲等多個行業的實用性，並討論了 NFT 對創作者和收藏家之間利益契合的潛力。
SaaS 之後會怎樣？#
該文章討論了軟件開發中的 “可塑源代碼” 概念，用戶可以使用人工智能修改應用程序的底層代碼。這樣可以實現更多的定制和個性化，類似於建造一個可個性定制的郊區開發項目。作者分享了他們使用可塑源代碼應用程序的經驗，以及如何通過基於瀏覽器的開發環境輕鬆與朋友共享。文章認為，軟件開發中的這種新範式將使構建小型 SaaS 應用程序變得更容易，模糊開發者和用戶之間的界限，並創建更具定制化的軟件。
- 基於 Web 環境和人工智能技術的發展使得可定制和個性化的軟件應用程序的創建成為可能。
- 這些技術的進步使用戶可以在不需要編碼技能的情況下修改和定制應用程序，從而實現更具個性化和定制化的用戶體驗。
- 軟件開發中的這種新範式打開了新的商業機會，並模糊了開發者和用戶之間的界限。