前端周刊第二十期

前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表，欢迎大家关注、转载。
如果外链不能访问，关注公众号「前端每周看」，里面有解决办法

大事件

• 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 路由器：任何人都可以从中学习的实验之一。