前端周刊第三十一期

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

大事件

• JS1024 2022 竞赛优胜者—— JS1024 是一项“代码高尔夫”竞赛，您有 15 天的时间在 1024 字节内创建 JavaScript 或 GLSL 程序。这会产生许多创意，并带有出色的（非缩小）源代码可供查看。获胜的 JS 条目是这款古怪的打字游戏，获胜的基于着色器的条目是3D 隧道体验。这里有很多东西要学，因为这些人使用了书中的每一个技巧，包括在一个使用Brotli 和特制 WOFF2 字体文件（！）

• Docusaurus 2.0 发布——Docusaurus 支持的站点在 JS 空间中无处不在（例如Babel 文档），经过四年的努力，流行的 React 支持的、以文档为中心的静态站点生成器的2.0 版就在这里。从头开始重建，它添加了MDX支持、新的插件系统、主题、暗模式、SPA 导航、离线支持等等。

• Electron 20：跨平台桌面应用程序框架——20 听起来像是一个很大的、圆形的版本号，但它主要是一个典型的版本。Chromium 升级到 v104，V8 升级到 10.4，Node 升级到 16.15.0。Windows 获得了“沉浸式黑暗模式”，Electron 窗口现在可以“浮动”在全屏应用面板样式上。

文章

1. 检查原生 JavaScript 函数是否是“猴子补丁” — 随着 JavaScript 的活力，函数可能会被覆盖（或“猴子补丁”，因为有些人称之为运行时修改的想法），但是有（不完美的）方法来查看是否这已经发生了。

2. 关于用 Bud 更快地构建现代Web 应用程序 — Bud（不，不是Bun）是一个相对较新的 Go(lang) 和 JavaScript 驱动的全栈 Web 框架，有很多好主意 – ▶️ 这个 15 分钟的视频创建一个黑客新闻克隆这是一个有趣的演示。如果 Go 在后端适合您，那么值得一看。

3. React 中从 500 毫秒到 1.7 毫秒 — 缓慢的自定义网格触发了分析一些瓶颈的旅程，随后进行了一些调整，从而显着提高了性能。

4. util.parseArgs()在 Node.js 中解析命令行参数 — 今年 Node 18.3 中添加的一项功能。

框架发布

1. Parcel 2.7
2. Ember 4.6
3. Ionic 6.2 - 跨平台应用程序构建工具包。
4. Redwood 2.2 – React 支持的全栈框架。
5. 赛普拉斯 10.4 – 任何基于浏览器的流行测试方法。
6. Ohm 16.4 – 解析器/解释器构建工具包。
7. React Native Boilerplate 3.5 – RN 应用程序的入门模板。
8. Stripe Node 10.0 – Stripe API 的 Node.js 库。
9. Electron Store 8.1 - Electron 应用程序的简单数据持久性。
10. Meriyah 4.3 – 兼容的、自托管的 JS 解析器。( Demo )
11. React Spreadsheet Grid 2.3 – React 的类似 Excel 的网格组件。
12. Inferno 8.0.2 – 快速、类似 React 的库。
13. Peaks.js 2.0.3 – BBC 的音频波形 UI 组件。

代码和工具

1. vue-grid-layout：适用于 Vue.js 的可拖动和可调整大小的网格布局：类似于Gridster.js（来自 jQuery 时代！），但适用于 Vue.js。主页上有一个演示。

2. safe-json-value：当 JSON 序列化不能失败时：防止JSON.serialize()抛出异常、更改类型或以其他方式意外转换值，因为有时您需要那种保证。

3. colorgrad：高性能、Rust 驱动的颜色渐变库：在幕后使用 Rust 编译到 WebAssembly——非常现代！如果您也想尝试它，它也是一个很好的小型代码库，可以用来学习该技术。

4. Embla Carousel 7: Carousel with Fluid Motion 和“Swipe Precision”：一个备受诟病的 UI 元素，但这些示例对我们来说效果很好。与库无关，但如果需要，可以轻松集成 React、Vue 和 Svelte。

5. Nativefier：使任何网页成为桌面应用程序：一个基本的 Node.js 驱动工具，用于为任何使用 Electron 作为 web 视图的网站创建桌面“应用程序”。适用于 Windows、macOS 和 Linux。

6. ts-version：从 Types 访问当前的 TypeScript 版本：创建者说得最好： “对 TS 版本如何处理您的包略有不同感到沮丧，但又不想使用 TypesVersions 发布您的类型的完整副本？现在您可以根据 TS 版本调整您的类型！”