該周報主要為各個地方內容的彙總整理
技術#
React 最佳實踐 2023 - 第 4 部分：編寫乾淨高效的 React 代碼 - 最佳實踐與優化技術#
本文討論了在 React 應用程序中編寫乾淨高效代碼的各種最佳實踐。建議實現錯誤邊界、對函數組件使用 React.memo、使用代碼檢查工具提高代碼質量、避免默認導出、使用對象解構、使用 Fragment 和傳遞對象而不是多個 props。這些實踐可以提高代碼庫的可維護性、性能和可讀性。
- 在編寫 React 代碼時，實現錯誤邊界、使用 React.memo 和對象解構等方法可以編寫乾淨高效的代碼。
- 使用類似 ESLint 的代碼檢查工具可以提高代碼質量和一致性。
- 使用具名導出替代默認導出，使用 Fragment 替代不必要的包裝 div，並傾向於傳遞對象而不是多個 props，以使代碼庫更有組織性和易於導航。
通過使用 Node.js AsyncLocalStorage 避免參數鑽孔#
本文討論了在 Node.js 應用程序中共享上下文的挑戰，並介紹了 AsyncLocalStorage 類，它提供了一種在 Web 請求或任何其他異步操作的生命週期中存儲特定上下文數據的方法。不推薦使用全局變量來共享上下文，並且傳遞參數或將其附加到請求對象可能會很麻煩。AsyncLocalStorage API 可以用於關聯 ID、存儲當前用戶、事務 ID、報告數據等。文章還提到了 JavaScript 的 Async Context 提案。
- 在處理異步代碼時，全局變量可能會造成問題，因為它們可能會相互干擾。
- Node.js 中的 AsyncLocalStorage 類提供了一種在整個異步操作的生命週期中存儲特定上下文數據的方法，避免了干擾。
- JavaScript 的 Async Context 提案旨在擴展 AsyncLocalStorage 的用途，並可能在將來成為 ECMAScript 標準的一部分。
React Server Component 初體驗與實踐 —— 將博客遷移到 Next.js App Router#
- 從 Hexo 遷移到了 Next.js，並使用了 React Server Component 和 Next.js 13 的 App Router。
- 保留了 Hexo 作為 CMS，但需要額外寫很多序列化步驟。
- 在 React Server Component 中，可以直接調用 Hexo 的 API，還可以直接把 Hexo API 返回的 warehouse 的 Document 和 Query 實例用 prop 傳來傳去。
- 使用了 Next.js App Router 實現 Nested Layout。
- 介紹了利用 React 18 Concurrent Rendering 的能力保障優先更新高用戶體驗的 stat 數據。
你可能不知道的 Next Image 相關知識#
本文解釋了 Next.js Image 組件的工作原理，並澄清了周圍一些誤解。Next Image 組件是一個無需繁瑣操作的圖像優化解決方案，支持現代格式並為不同屏幕尺寸生成多個版本。Next Image 的架構包括三個組件：React Next Image 組件、Image API 和 Image Optimizer。Image API 充當圖像代理，而 Image Optimizer 根據環境使用不同的庫。該文章揭穿了有關圖像裁剪的誤解，澄清了顯示圖像寬度和加載圖像寬度之間的差異，並解釋了如何在沒有 Next Image 組件的情況下使用圖像優化。它還討論了使用 import 導入本地圖像和了解響應式圖像的'sizes' 屬性的重要性。
- Next.js 中的 Next Image 組件提供了無需繁瑣操作的圖像優化功能，支持現代格式並為不同屏幕尺寸生成定制版本。
- 該組件實際上並不對圖像進行裁剪，而是使用寬度和高度屬性來防止佈局變化，並在出現不匹配時拉伸或縮小圖像。
- Image API 可以單獨與 Next Image 組件一起使用，用於在畫布上呈現圖像或優化 OG 圖像等場景。
使用滾動驅動動畫偽造 選擇器#
本文討論了如何使用滾動驅動動畫來模擬一個 選擇器，該選擇器將匹配當前在啟用滾動捕捉的祖先滾動器中捕捉的元素。文中提供了代碼和實現方法，並附帶演示。然而，該方法並非完美，也存在一些限制。作者建議應該在 CSS 中內置一種適用於捕捉元素的樣式設置方式。
- 滾動驅動動畫可以用來模擬一個虛構的 選擇器，從而實現基於滾動捕捉的動態元素樣式設置。
- 通過將滾動驅動動畫與其他 CSS 特性結合使用，開發人員可以創建出粘性定位、文本縮小和滾動保持狀態等獨特效果。
- 儘管提供的代碼提供了一種將樣式應用於捕捉元素的解決方法，但它存在一些限制並被認為是一種巧妙的解決方案，凸顯了需要一個專門的 CSS 功能來處理捕捉元素的需求。
Midjourney 從零基礎到落地實踐#
構建一個全棧、完全類型安全的 pnpm monorepo，使用 NestJS、NextJS & tRPC#
本教程指導您構建一個全棧、端到端的類型安全的 pnpm monorepo，使用 NestJS、NextJS 13 和 tRPC。它涵蓋了 monorepo 的設置，添加 NestJS 應用程序，添加 NextJS 13 應用程序以及進行配置更新以實現兩個應用程序之間的無縫集成。該教程還演示了如何在 NestJS 和 NextJS 中使用 tRPC，包括將 tRPC 服務器添加到 NestJS 和將 tRPC 客戶端添加到 NextJS。最後，它提供了將 monorepo 部署到 Railway 的說明。本教程強調了開發體驗和選擇的技術堆棧的優勢。
- 本教程指導您使用 NestJS、NextJS 13 和 tRPC 構建一個全棧、端到端的 monorepo，提供無縫的開發體驗。
- monorepo 的設置使用 pnpm 工作區，允許在同一個存儲庫中獨立管理前端和後端項目。
- tRPC 服務器被集成到 NestJS 中，提供了後端和前端應用之間的類型安全通信。
在 React Query 中思考#
Web 上的流媒體介紹#
Web 流提供了一種標準化的方式，可以在網絡連接上異步發送和接收數據。它通過實時更新和交互增強了 Web 應用程序的性能和響應能力。Web 流可以分為可寫流（WritableStream）、可讀流（ReadableStream）和轉換流（TransformStream）三種類型。數據流中的基本單元是數據塊（chunks），其大小和形狀可以不同。常用的與 Web 流交互的方法包括 Fetch API 和 getReader 方法。Web 流還具有處理反壓的能力，確保數據的生產和消費之間達到平衡。服務器發送事件（SSE）是另一種將實時更新從服務器流式傳輸到客戶端的方法。
- Web 流提供了一種標準化且高效的處理數據的方式，可以實現 Web 應用程序的實時更新和交互。
- Web 流中的反壓處理確保數據的生產和消費平衡，防止內存溢出並保持數據流的平穩。
- 服務器發送事件（SSE）使用長連接的 HTTP 連接，從服務器實時向客戶端流式傳輸更新，非常適合需要實時數據的應用程序。
有用的 DevTools 提示和技巧#
該文章討論了使用瀏覽器開發者工具提高調試工作效率的 15 個流行技巧。這些技巧包括縮放開發者工具界面、刪除網頁上煩人的覆蓋層、列出頁面上使用的字體、測量頁面上的任意距離、檢測未使用的代碼、更改視頻的播放速度、在不同語言中使用開發者工具、禁用事件監聽器等。文章為每個技巧提供了逐步說明，並鼓勵讀者在評論部分分享自己的技巧。
- 一些流行的開發者工具技巧包括縮放 UI 界面、刪除煩人的覆蓋層、列出頁面上使用的字體、測量任意距離、檢測未使用的代碼、更改視頻的播放速度以及在不同語言中使用開發者工具等。
- 瀏覽器開發者工具提供了一系列面板和功能，可以極大地增強您的調試工作流程和工作效率。
- 通過探索和利用這些不太為人所知的功能，您可以優化調試流程，更高效地解決常見問題。
Node.js 和 JavaScript 中命令注入漏洞的介紹#
本文討論了 Node.js 和 JavaScript 應用程序中命令注入的安全漏洞。命令注入發生在操作系統將不受信任的用戶輸入作為命令執行時，允許攻擊者獲取未經授權的訪問或危害系統。文章重點介紹了命令注入的風險和影響，並提供了幾種最佳實踐來減輕這些漏洞，包括輸入驗證和清理、將命令與參數分離、限制命令執行，並遵循最小權限原則。文章還推薦了一本進一步學習如何保護 Node.js 應用程序免受命令注入漏洞影響的書籍。
- Node.js 和 JavaScript 應用程序中的命令注入漏洞可能導致未經授權的訪問、數據洩露或完全系統崩潰。
- 為了減輕命令注入漏洞的風險，關鍵是實施輸入驗證和清理、將命令與參數分離、避免執行用戶提供的輸入作為命令執行的一部分，並遵循最小權限原則。
- 了解風險、參考真實世界的事件，並遵循最佳實踐，可以幫助開發人員有效地保護他們的 Node.js 應用程序免受命令注入漏洞的影響。
工具#
typesafe-router#
React Router 的小型包裝庫，可顯著提高類型安全性。
panda.css#
CSS-in-JS 具有構建時生成的樣式、RSC 兼容、多變體支持和一流的開發人員體驗。
webperf-snippets#
Web 性能片段。
ModHeader - 修改 HTTP 標頭#
修改請求頭和響應頭。
tween.js#
JavaScript/TypeScript 動畫引擎。
psd#
適用於 Web 和 Node.js 的快速零依賴 PSD 解析器。
更新#
styled-component v6#
remix 1.18#
nestjs v10#
NestJS 10 已發布，帶來了錯誤修復、改進和新功能。這個版本引入了使用 SWC（Speedy Web Compiler）來加快開發速度。現在可以在測試中覆蓋模塊，使模擬更加簡單。NestJS 10 支持 Redis 通配符訂閱，允許訂閱與給定模式匹配的消息。CacheModule 已移至獨立的包中。不再支持 Node.js v12，要求使用 TypeScript v4.8 或更高版本的 CLI 插件。關於從 Nest v9 升級的遷移指南可供使用。NestJS 項目提供企業諮詢和支持服務。社區和贊助商的支持對項目的發展至關重要。
- NestJS 10 引入了 SWC（Speedy Web Compiler），用於加快開發過程，顯著提高了默認的 TypeScript 編譯器的速度。
- 新版本允許在測試中覆蓋模塊，使得整個模塊的模擬更加容易，而不僅僅是個別提供者。
- NestJS 10 現在支持 Redis 通配符訂閱，允許用戶訂閱與特定模式匹配的消息。
設計#
純乾貨！如何利用激勵體系提升用戶粘性#
本文主要講述了用戶激勵體系的設計與應用。用戶激勵體系是促進用戶增長和活躍的常用手段，分為平台精神激勵、物質利益激勵和社交情感激勵三種。好的激勵體系是能夠像指揮棒一樣，激勵用戶沿著指定的方向成長，是激勵用戶增長與用戶召回，刺激用戶活躍度的有力武器。激勵體系伴隨著用戶增長的全流程 “獲取 — 激活 — 留存 — 推薦 — 變現” 各個過程，採用不同的激勵方式能輔助產品快速達到目標。文章還分析了好看視頻的用戶人群與現階段背景，並提出重新打造符合好看人群特徵的激勵體系的思路。
通過樞紐表和網格探索通用和認知友好的 UX 設計#
該文章討論了創建包容性和用戶友好的表格設計的重要性。重點關注認知障礙對表格感知的影響，並提出改進表格可用性的建議。文章強調了減少認知負荷、最大化信號與噪音比以及有效使用認知偏見的必要性。它還討論了顏色調色板和在表格設計中的使用的作用。總體目標是創建對所有用戶易於理解和導航的表格。
- 表格是一種流行的數據可視化方式，但對於認知障礙的個體來說可能很難理解，因此包容性設計非常重要。
- 在設計表格時，應考慮認知負荷、認知偏見和信號與噪音比，以確保所有用戶都有良好的用戶體驗。
- 在表格中正確使用顏色非常重要，因為顏色傳遞信息和情感，影響信息的感知方式。
AI#
GPT-4 的秘密已被揭示#
OpenAI 的 GPT-4 語言模型備受期待，但近期的發布令許多人失望，因為揭示出它實際上是八個較小模型的集合，而不是一個創新的突破。這種被稱為專家混合範式的方法首次由谷歌工程師在 2021 年成功使用。然而，OpenAI 的營銷策略成功地在模型周圍製造了神秘感和炒作，使人們相信它具有神奇的能力，並阻止競爭對手模仿他們的技術。儘管如此，GPT-4 仍然是一個令人印象深刻的語言模型，具有出色的性能，即使它沒有滿足人們對人工智能的重大突破的期望。
- GPT-4 不是單一的龐大模型，而是由八個較小的模型巧妙組合而成。
- 為了防止人們對該領域進展的失去信心，以及防止競爭對手模仿他們的技術，OpenAI 隱瞞了 GPT-4 並非突破性的事實。
- GPT-4 是一次商業營銷的典範，隱藏了它不盡人意的方面，同時保持著話題的高度關注，並增強了它神秘的氛圍。
AI 工具搜索引擎#
langtale.ai#
支持 OpenAI 函數調用的 Playground。
ChatALL#
同時與 ChatGPT、Bing Chat、Bard、Alpaca、Vicuna、Claude、ChatGLM、MOSS、訊飛星火、文心一言等聊天，發現最佳答案。
其他#
生命的行為目的，不是為了食物和能量，而是為了負熵，爭取負熵最大化。
熵代表衰老和死亡，那麼負熵就代表對抗衰老和死亡。
-- 維基百科條目《熵與生命》
每當你有一種 “應該有人在這裡做某事” 的感覺，那個應該做這件事的人很可能就是你。
-- 《高級工程師的道路》
