前端週刊第二十期

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

大事件

• Sliderland：一個極簡主義的編碼遊樂場——這是一種滑塊式的視覺化，您可以使用簡單的公式進行編碼（看看這個）。程式碼很簡單，但包含一些簡潔的功能，例如由ffmpeg.wasm提供的 WebAssembly 驅動的 MP4 記錄器。

• Playwright 現在可以測試 React、Vue 和 Svelte 元件——Playwright是 Microsoft 的 Node.js 瀏覽器控制元件庫，它採取了一個有趣的步驟，允許您使用 Playwright 測試（Playwright 自己的測試執行器）使用 Playwright 的所有功能以程式設計方式測試您的元件。

• Web 應用程式 101 ——一篇涉及構建現代網站所涉及的許多結構概念的文章，從最簡單的 HTML 頁面到伺服器端呈現 (SSR) 和靜態站點生成 (SSG)。不是教程，而是為您繪製建築圖片。

文章

1. 使用 JavaScript 和 MIDI 構建動畫鋼琴鍵盤 — 如果您喜歡 Tania Rascia上週的手風琴，這篇精美的帖子適合您。Jamie 正在做的工作也在為他的爵士鋼琴培訓網站提供服務。

2. 為什麼不需要void 0 — JavaScript 的void運算子多年來一直以一些有趣的方式使用，undefined但 Lars 認為undefined現在是更好的選擇。

3. RFC 9239：ECMAScript 媒體型別的更新 - 其中之一“我是否需要知道這一點，即使這聽起來很重要？” 話題。Axel 博士保持簡單，但本質上 JavaScript 的 MIME 型別現在是明確 text/javascript的，並且.mjs是 JS 模組的註冊副檔名。

4. 將 Node-RED 部署到 Google App Engine - Node-RED是一種基於 JavaScript 的低程式碼事件驅動程式設計環境，通常與物聯網相關聯，並以各種方式將硬體裝置整合在一起。但是您也可以將其部署在雲中，以建立您自己的自動化系統。

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

框架釋出

1. Mithril.js 2.2 – 流行的 SPA 框架，2年來首次釋出。
2. Electron React Boilerplate 4.6 - 現在使用 React 18。
3. Helmet 5.1.0 - 使用 HTTP 標頭保護 Express.js 應用程式。
4. Deno 1.22
5. melonJS 10.8.0 – JS 2D 遊戲引擎。
6. Angular 14 Release Candidate
7. Node 18.2.0 – Node Weekly中的更多內容。

程式碼和工具

1. JSON 掩碼：一種選擇 JS 物件特定部分的方法：給 JSON 掩碼一個物件和一個（XPathesque）查詢，你會得到一個具有相同結構但只包含其餘部分“掩碼”的物件（由此得名）。

2. Fontkit：適用於節點和瀏覽器的高階字型引擎：適用於 TrueType、OpenType、WOFF 和其他格式 — 支援將字元對映到字形、替換、讀取指標、佈局字形、字型子集等。用作PDFKit PDF 生成庫的一部分。

3. PushIn.js：適用於網頁的輕量級視差/推車/推入效果：在滾動時模擬互動式推車或推入動畫。主頁本身就是一個現場演示。

4. Vuestic 1.4.0：Vue 3 的開源 UI 庫：包含 50 多個可定製元件的庫。1.4.0帶來了 Nuxt 3 支援以及新的輪播和計數器元件。

5. Timewave：一個微型時鐘和日期庫（具有模擬支援）：擁有“與 MomentJS 及其替代 Luzxon 的大部分功能相同的功能”，該庫還允許您以不同的速度並行執行多個時鐘。

6. Elder.js：一個專注於 SEO 的基於 Svelte 的靜態站點生成器：專為大規模構建對 SEO 友好的站點而設計，名稱不僅僅是隨機的，它還用於在生產中執行一個關於尋找老年人住房的站點。

7. minimatch: A Glob Matcher：將 glob 樣式的表示式轉換為正規表示式。由 內部使用npm。

8. 在 100 LOC 內實現的 React 路由器：任何人都可以從中學習的實驗之一。