該週報主要為各個地方內容的匯總整理
技術#
使用 React 和 Framer Motion 創建動畫工具提示#
本文討論了如何使用 Floating UI 和 Framer Motion 庫在 React 中創建可自定義的工具提示。它提供了一個逐步構建基本工具提示的指南，然後添加動畫和過渡效果使其獨特。本教程涵蓋了必要的邊緣情況，如定位和調整大小，並確保工具提示是可訪問的。作者建議使用特定版本的庫以避免潛在問題。生成的工具提示可以進一步自定義以適應開發人員的需求。
在瀏覽器標籤和視窗之間共享 WebSocket 連接#
本文討論了在瀏覽器標籤和視窗之間共享 WebSocket 連接的概念，以優化資源使用並增強 Web 應用程式的性能。通過創建一個專門管理 WebSocket 連接並促進其在不同瀏覽器上下文中共享的共享 worker，我們可以使 Web 應用程式更加高效和流暢。然而，由於引用隨時間的累積，可能導致記憶體洩漏，因此記憶體管理可能是一個挑戰。為了緩解這個問題，我們可以利用 WeakRefs 或在 onbeforeunload 事件處理程序的主體中傳送一個特殊的控制訊息。
注意使用 'ch' 單位時的佈局位移#
該文章討論了使用 ch 單位和優化 Web 字體載入的組合如何導致網站出現佈局位移，從而導致累計佈局位移得分較低。作者通過調試確定了問題，並通過將 ch 單位替換為 rem 單位來解決問題。本文作為一個警示故事，提醒使用 ch 單位時要注意，強調考慮字體變化對佈局的影響的重要性。
Raycast API 和擴展的工作原理#
該文章討論了 Raycast API 的開發，該 API 是 macOS 應用程式，以及它在幕後是如何工作的。API 的目標是允許開發人員為 Raycast 創建擴展，這些擴展可以輕鬆地被使用者安裝。文章涵蓋了開發過程中所做的各種技術選擇和權衡，包括使用 JavaScript 作為主要運行時語言和 TypeScript 作為主要擴展語言的決定。文章還討論了渲染使用者介面的挑戰和使用 XPC 進行進程間通訊的方法。總體目標是創建一個無縫的使用者體驗，使擴展在應用程式中感覺像一等公民。
工具#
privateGPT#
本地部署一個 GPT 可以和文件做問答交互
tailwind-merge#
合併 Tailwind CSS 類，避免樣式衝突
更新#
rtk-v2.0.0-beta.0#
包括更新 TypeScript 型別、改進實體適配器以及新增功能（例如能夠將自定義的 createSelector 方法傳遞給 entityAdapter.getSelectors ()）。該版本還包括一些重大變更，例如移除 createReducer 和 createSlice.extraReducers 的物件參數。其他變更包括更新 Redux 核心依賴和支援 ESM/CJS 兼容性。此外，該文章還討論了早期 alpha 版本中所做的更改。
TailwindCSS 支援 text-banlace#
https://github.com/tailwindlabs/tailwindcss/pull/11320
在 nextjs 專案中添加 python 後端#
TypeScript 5.1 發布#
TypeScript 5.1 現已發布！現在具有以下功能：
-
更智能的 undefined 返回函數檢查
-
getter/setter 類型之間沒有限制
-
更好的 JSX 標籤檢查
-
JSX 的聯動編輯
-
@param 片段
-
更快的速度
設計#
錯誤訊息指南#
該文章討論了數字產品設計中有效錯誤訊息的重要性，並提供了 12 個創建它們的準則。這些準則分為三類：可見性、溝通和效率。可見性準則著重於使錯誤訊息對使用者可見和可識別，而溝通準則強調使用易於理解的語言和提供建設性的建議的重要性。效率準則建議錯誤訊息應該防止可能出現的錯誤並保護使用者的努力和時間。總的來說，創建有效的錯誤訊息對於提高數字產品的可用性和品質非常重要。