該週報主要為各個地方內容的匯總整理
技術#
glyphhanger#
Glyphhanger は、文字のサブセットとホワイトリストを使用してフォントファイルのサイズを最適化するためのウェブフォントツールです。
著者は、Roboto フォントを ASCII 文字セットと他のホワイトリスト文字に縮小し、フォントファイルのサイズを半分以上縮小し、文字のサポートに影響を与えないようにしました。
このツールとテクニックを使用すると、カスタムフォントを使用するウェブサイトのページの重さを大幅に軽減することができます。
著者は可変フォントを試しましたが、ファイルサイズが大きすぎるとわかりました。彼らは Glyphhanger ツールを使用して、フォントを必要な文字のみに縮小し、--whitelist パラメーターを使用してカスタム文字を含めました。Glyphhanger は、ページで使用される文字に基づいてフォントを評価およびサブセット化することもできます。著者は、最適化されたフォントを使用するウェブサイトコンポーネントのファイルサイズを大幅に縮小することに成功しました。フォントファイルを最適化するためにこのツールを使用することをお勧めします。
聊聊 WebCodecs 實現 GIF 視頻轉碼#
本文介紹了如何將 GIF 轉換成視頻資源，困難在於如何在 Web 環境下進行轉換。文章討論了兩種方案：
- 通過 Canvas 實現動畫繪製
- 使用 FFmpeg 實現轉碼。文章詳細介紹了如何在瀏覽器環境中使用 ffmpeg.wasm 進行轉碼，這是一個方便的 FFmpeg WebAssembly 實現。
moduleResolution 總結#
JS 在設計之初並沒有模塊這個概念，ESM 也才這兩年正式落地，而模塊解析策略隨著exports的出現有了統一的並且能夠滿足各種場景需求的標準。估計過個一兩年很多新發布的 npm 包連main字段都不寫了。
exports是一個強大並且被各種前端工具廣泛支持的模塊解析標準，我們開發 npm 包時，應該使用exports來管理它的解析規則exports的解析規則較為複雜，社區的很多第三方實現或多或少有些 bug，尤其是和優先級相關的- 對於很多不想寫擴展名的 typescript 項目來說，應該使用
bundler解析策略，這樣的話第三方庫就可以只寫exports，不寫typesVersions typescript的很多設計都是對現實妥協的產物，除了bundler解析策略，再例如裝飾器，早期的裝飾器並沒有進到 ECMAScript stage3 標準，TS 還是自己實現了一套。換句話說就是 typescript 在開發效率和 ECMAScript 標準之間在當時選擇了開發效率。
What's new in ECMAScript 2023#
即將發布的 ECMAScript 規範預計將在 6 月底發布，其中包括一系列新功能，如 “從後找數組”、“Hashbang Grammar”、“Symbols 作為 WeakMap 鍵” 以及 “複製數組來修改”。
- 數組從最後查找提案在 Array 和 TypedArray 原型上添加了 findLast () 和 findLastIndex () 方法，允許從最後一個元素進行搜索。
- Hashbang Grammar 提案規範了可執行腳本開頭的 hashbang 的使用
- Symbols 作為 WeakMap 鍵提案允許在 WeakMap 中使用未註冊的 Symbols 作為鍵。複
- 製數組來修改的提案添加了一些方法，這些方法返回一個新副本，而不是在原數組上進行原地變異。
Web 播放 RTSP 推流最佳方案實踐#
本文介紹了 Web 端播放 RTSP 流的兩種解決方案。
- 首先，講解了將 RTSP 流轉換為 WebSocket/WebRTC 再轉換為 WebVideo 的原理。
- 然後，介紹了基於 ffmpeg 的 Node 後端推流方案和基於 jsmpeg/flv.js 的前端視頻展示方案，以及基於 WebRTC 的推流方案，並提供了詳細的代碼示例和解釋。
- 最後，總結了付費方案和免費方案的區別，推薦程序員使用免費方案搭建轉流服務。
Display Warning for Unsaved Form Data on Page Exit#
本文介紹了如何實現一個 FormPrompt 組件，以提高 Web 應用程序的用戶體驗。該組件可以在用戶嘗試離開具有未保存更改的頁面時發出警告。作者討論了使用純 JavaScript 的 beforeunload 事件處理此類情況，以及使用 React Router v5 中的 Prompt 組件和 React Router v6 中的 useBeforeUnload 和 unstable_useBlocker 鉤子的 React 特定解決方案。
工具#
Markflow#
革新你的工作流程，創造更多、更快的作品。
告別開發工具，複製任何元素並將其直接粘貼到項目中。Markflow 支持 Figma、React、Webflow、Svelte 等。
pretty-ts-errors#
讓 VSCode 中 TypeScript 的錯誤信息更加美觀易懂
lazyrepo#
lazyrepo 是一個針對 npm/pnpm/yarn monorepos 的零配置緩存任務運行器。它適合於 turborepo 所開創的領域：使 package.json “scripts” 擴展，而無需採用像 nx、bazel、rush 或 buck 這樣的大型工業級構建系統。lazyrepo 非常快速，儘管它是用 TypeScript 編寫而不是一些年輕、英俊、聰明、有趣的系統語言，但它比 turborepo 要快得多。
更新#
Vite 4.3#
- Vite 4.3 已發布，著眼於提高開發服務器性能。與 Vite 4.2 相比，在各種基準測試中，該更新產生了顯著的速度提升。
- Vite 團隊正在致力於進一步的性能改進，並為 Vite 開發了官方基準測試工具，在 vite-plugin-inspect 中增加了更多與性能相關的功能。
- Vite 團隊計劃在今年發布一次重大更新，與 9 月份的 Node.js 16 的 EOL（結束生命周期）相一致，該版本將停止支持 Node.js 14 和 16。
vercel-web-analytics#
對標 Google Analytics