前端週刊第十九期

前端週刊發表每週前端技術相關的大事件、文章教程、一些框架的版本更新、以及程式碼和工具。每週定期發表，歡迎大家關注、轉載。
如果外鏈不能訪問，關注公眾號「前端每週看」，裡面有解決辦法

大事件

• 使用 Google 的 CrUX 比較 JS 框架的效能——Chrome使用者體驗報告 ( CrUX ) 是從真實世界的 Chrome 使用者收集的使用者體驗指標資料集，可以使用它來分析和比較不同 UI 框架的效能配置檔案

• Meta 將 Jest 專案轉移到 OpenJS 基金會——Meta，née Facebook，在 10 多年前建立了現在流行的 Jest JavaScript 測試框架，雖然它將在內部繼續使用，但他們現在認為它“功能完整”，因此認為它可能會蓬勃發展在更廣泛的社群中得到更好的管理。

• 關於 React 即將推出的useEventHook的思考——用於新的基本 React 鉤子或定義一個“看到”新的 props/state 但具有穩定函式標識的事件處理程式。

文章

1. 使用 Web 音訊 API 構建樂器 — 我們在前端領域最喜歡的作家之一回來了，她簡單地介紹了她如何構建Keyboard Accordion，這是一種基於 Web 的全音階手風琴（我很難以任何連貫的方式演奏它一切，但聽起來很棒）。

2. 瞭解您的瀏覽器的效能分析器 — 如果您的瀏覽器開發工具中的效能選項卡看起來有點嚇人，那麼本文試圖總結您需要了解的關於它所顯示內容的絕對基礎知識。

3. JavaScript 開發人員從 0% 到 80% 的 Rust - 如果關於用 Rust （重新）編寫 JavaScript 工具的永無止境的訊息還沒有讓你感到厭倦，也許你想知道如何從 JS 的角度學習 Rust。Daniel Bulant 的Rust 基礎，從高階程式設計師的角度來看，也是一個很好的解釋者。

4. 使用 PyScript 在瀏覽器中執行 Python - 從 Rust 到 Python，我們開始了。最近釋出的PyScript提供了一種在網頁上編寫 Python 程式碼的簡單方法，就像您現在編寫 JavaScript 一樣。這個 8 分鐘的截圖視訊稍微展示了一點。

5. 用 JavaScript 製作一個基本的“落沙”遊戲 - 一個平靜而平和的教程，其中包含貫穿始終的示例。

框架釋出

1. Wild Wild Path 3.0 – 使用路徑和查詢挖掘物件。
2. GraphQL Yoga 2.0 – 完整的 GraphQL 伺服器功能。
3. Hexo 6.2.0 – Node.js 部落格框架。
4. graphql-schema-linter 3.0 - 驗證 GraphQL 模式定義。
5. pnpm 7.1.0
6. Solid 1.4 – 很棒的宣告式 UI 庫。

程式碼和工具

1. InfiniteGrid 4.3：在網格佈局上無限排列卡片元素：非常成熟和成熟，可以輕鬆建立由不同大小的卡片元素組成的網格。它也適用於您選擇的框架，並且在桌面和移動裝置上都很滿意。

2. blursort 1.9: Fast Fuzzy Search Library：靈感來自 Sublime Text 中的模糊搜尋。檢視現場示例- 確實感覺很快。

3. Parvus：無依賴的可訪問燈箱：我喜歡它所說的不要在網頁上使用疊加層，但如果必須，使用它！有一個 CodePen 示例。

4. crypto-random-string 5.0：生成加密強隨機字串：例如：cryptoRandomString({length: 10})可能會返回2cf05d94db（雖然我真的希望你嘗試它時不會返回，否則它會失敗?）。現在可以在 Node.js 和瀏覽器中使用。

5. Reagraph: WebGL Graph Visualizations for React：一個在底層使用 WebGL 的高效能網路圖形視覺化庫。您可以使用的基本示例。

6. DFlex：適用於所有 JS 框架的拖放庫：這是一個原生 JavaScript 解決方案，專注於良好的效能和易於實現。在這裡嘗試一些演示。

7. nve 15.0：使用特定的 Node.js 版本執行事物：使用特定版本（或多個版本）的 Node.js 輕鬆執行檔案、命令或 REPL。例如，您可以一次執行npm test多個版本。

8. actions/github-script：用 JavaScript 編寫 GitHub API 指令碼的工作流程：如果你想編寫通過 GitHub API 執行操作的 GitHub 操作，這可以讓你的生活更輕鬆。