前端周刊 | 编程版“阿法狗”击败一半程序员; Node.js 将支持 Fetch API; Electron 17 发布

开工第一天，也是新年的第一期前端周刊，快来看看本周发生了哪些新鲜事吧！

科技趣闻

1. 编程版“阿法狗”击败一半程序员

2022年2月4日，DeepMind 的 Alpha 家族再添一名新成员：会刷编程竞赛题的AlphaCode！AlphaCode 参加了著名网站 Codeforces 最近举行的10场编程比赛，成绩超过了一半人类。AlphaCode 在10场比赛中排名前54.3%，Elo评分1238。

关于 AlphaCode 的详细介绍：https://deepmind.com/blog/article/Competitive-programming-with-AlphaCode

2. Node.js 将支持 Fetch API

Node.js v17.5 引入了对fetch() 的支持，这是一种流行的跨平台 HTTP 客户端API，可在浏览器和Web/服务器中使用，是一种实验性的核心功能。

fetch() 的支持是许多人长期以来要求添加的功能，他们希望编写跨平台HTTP请求代码，并且熟悉fetch() API的形态和调用模式。因此，node-fetch 模块的存在只是为了在Node.js 中补充此功能。好消息是，在未来将不再需要额外的模块，Node.js 将支持该API。

详见：https://fusebit.io/blog/node-fetch/?utm_source=javascriptweekly.com&utm_medium=referral&utm_campaign=none

3. Dan Abramov 重写了 React 快速入门文档

Dan Abramov 为 react docs beta 推送了重写的React 快速入门文档。不过，目前新版的React 官方文档还处于 beta 阶段，只有英文版，英语好的小伙伴可以学习一下！

新版《React 快速入门文档》：https://beta.reactjs.org/learn

更新速递

1. MDX v2.0 发布

2022年2月1日，MDX 的第 2 版正式发布，并进行了以下改进：

• 📝 改进的语法使得在 JSX 中使用 markdown 更容易；
• 🔌 新的esbuild、Rollup和Node.js集成；
• ⚛️ 任何 JSX 运行时：React、Preact、Vue、Emotion，应有尽有，它们都受支持；
• 🌳 改进的 AST更详细地公开了更多信息；
• 🏃‍♀️ 编译速度至少快 25%；
• 🚴 生成的代码运行速度是原来的两倍（快100%）；

MDX 是一种可编辑格式，可在 Markdown 文档中无缝编写 JSX。可以导入诸如交互式图表或 alert 之类的组件，并将其嵌入到文档内容中，这样可以让使用组件编写长格式内容变得很顺滑。

MDX 特性：

• 功能强大： MDX 混合了 Markdown 和 JSX 语法，可以完美地适配基于 JSX 的项目。
• 一切都是组件： 导入 JSX 组件并直接在 MDX 文档中渲染。
• 可自定义： 可以指定为每个 Markdown 元素渲染哪个组件。
• 基于 Markdown： Markdown 的简单和优雅特性仍然保留着，仅在需要时才插入 JSX。
• 快速： MDX 没有运行时，所有编译都在构建阶段进行。

更新详情：https://mdxjs.com/blog/v2/

2. Babel v7.17.0 发布

2022年2月2日，Babel 7.17.0 正式发布。

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性 （通过引入第三方 polyfill 模块，例如 core-js）
• 源码转换（codemods）

更新详情：https://babeljs.io/blog/2022/02/02/7.17.0

3. V8 v9.9 发布

2022年1月31日，V8团队宣布最新的分支v9.9处于测试阶段，几周后与 Chrome 99 Stable 协调发布。主要更新包括：

• 国际语言环境扩展；
• 国际枚举；
• V8 API。

V8 是 Google 的开源高性能 JavaScript 和 WebAssembly 引擎，用 C++ 编写。它用于 Chrome 和 Node.js 等。它实现了ECMAScript和WebAssembly，并在 Windows 7 或更高版本、macOS 10.12+ 以及使用 x64、IA-32、ARM 或 MIPS 处理器的 Linux 系统上运行。V8 可以独立运行，也可以嵌入到任何 C++ 应用程序中。

更新详情：https://v8.dev/blog/v8-release-99

4. Electron v17.0.0 发布

2022年2月1日，Electron团队激动地宣布 Electron 17.0.0 正式发布！它升级了Chromium 98、V8 9.8和Node.js 16.13.0。可以通过 npm 命令npm install electron@latest下载。

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

更新详情：https://www.electronjs.org/blog/electron-17-0

开源趋势

下面来看看本周GitHub上有哪些热门的前端项目吧。

1. NextUI

NextUI 允许制作漂亮、现代和快速的网站/应用程序，无论您的设计经验如何，使用React.js 和 Stitches 创建，基于 GeistUI 并受 Vuesax 启发。

NextUI 的特性：

• 主题化： 提供一种自定义默认主题的简单方法，可以更改颜色、字体、断点和需要的一切。
• 快速响应： 在运行时避免不必要的样式参数，使其比其他 UI 库更高效。
• 明暗界面： 自动深色模式识别，NextUI 检测到 HTML 主题道具变化时自动更改主题。
• 独特的DX： NextUI 是全类型化的，以最大限度地减少学习曲线，并提供最佳的开发人员体验。

Star⭐：4.5k

本周Star⭐️：1767

Github：https://github.com/nextui-org/nextui

2. Budibase

Budibase 是一个开源的低代码平台，帮助 IT 专业人士在几分钟内在自己的基础架构上构建、自动化和交付内部工具。支持 PostgreSQL、MySQL、MSSQL、MongoDB、Rest API、Docker、K8s。

Budibase 的特性：

• 构建和发布真正的软件。 与其他平台不同，你可以使用 Budibase 构建和发布单页应用程序。Budibase 应用程序具有内置的性能，可以进行响应式设计，为你的用户提供出色的体验。
• 开源和可扩展。 Budibase 是开源的 - 许可为 GPL v3。这应该让您充满信心，Budibase 将永远存在。您还可以针对 Budibase 进行编码或将其分叉并根据需要进行更改，从而提供对开发人员友好的体验。
• 加载数据或从头开始。 Budibase 从多个来源提取数据，包括 MongoDB、CouchDB、PostgreSQL、mySQL、Airtable、S3、DyanmoDB 或 REST API。与其他平台不同，使用 Budibase，你可以从头开始，创建没有数据源的业务应用程序。
• 使用强大的预制组件设计和构建应用程序。 Budibase 开箱即用，带有设计精美、功能强大的组件，你可以像使用构建块一样使用它们来构建您的 UI。官方还公开了许多用户最喜欢的 CSS 样式选项，以便用户可以进行额外的创作。
• 自动化流程、与其他工具集成并连接到 Webhook。 通过自动化手动流程和工作流程来节省时间。从连接到网络钩子，到自动化电子邮件，只需告诉 Budibase 做什么，让它为你服务。
• 管理员的天堂。 Budibase 是按比例制造的。使用 Budibase，你可以在自己的基础架构上自托管，并全局管理用户、入职、SMTP、应用程序、组、主题等。你还可以为用户/群组提供应用程序门户，并将用户管理传播给群组管理员。

Star⭐：9.6k

本周Star⭐️：865

Github：https://github.com/Budibase/budibase

3. awesome-selfhosted

awesome-selfhosted 是在本地托管和管理应用程序而不是从SaaSS提供商处租用的实践。这是可以在本地托管的免费软件网络服务和Web 应用程序的列表。

Star⭐：76.7k

本周Star⭐️：864

Github：https://github.com/awesome-selfhosted/awesome-selfhosted

4. nuclear

nuclear 一个免费的音乐流媒体程序，它可以从互联网上的免费资源中提取内容。

Star⭐：8.1k

本周Star⭐️：626

Github：https://github.com/nukeop/nuclear

5. Word Guessing Game

Word Guessing Game 是一个使用 React、Typescript 和 Tailwind 制作的猜字游戏。

Star⭐：1.2k

本周Star⭐️：551

Github：https://github.com/cwackerfuss/word-guessing-game

工具推荐

下面来推荐五个音频库，有做音频相关业务的小伙伴不容错过~

1. Howler.js

Howler.js利用 Web Audio API 和 HTML5 Audio 的强大功能来提供高度可靠的跨平台音频支持。它是一个开源库，具有音频精灵、自动缓存、编解码器支持等功能。

Howler.js的特点如下：

• 单一 API 即可提供多种服务；
• 支持多种编解码器；
• 支持跨浏览器；
• 支持 3D 空间声音；
• 支持播放杜比音频。

官网地址：https://howlerjs.com/

2. Audo AI

Audo API 使用基于 AI 的噪声去除算法来自动检测和去除任何不需要的背景噪声。除此之外，它比传统的基于音频滤波器的噪声消除效果要好得多，因为它可以提供最小失真的声音。

Audo是一个商业产品，可用于从音频剪辑中去除背景噪音。它提供了 2 种不同的模式，如下所示：

• 批处理 - 从多个音频文件中去除噪音。
• 流处理 - 实时噪声消除。

Audo API 的特点如下：

• 基于 AI 的噪音消除可带来高质量的输出；
• 支持实时音频处理；
• 支持多种文件格式，包括视频文件。

官网地址：https://audo.ai/noise-removal

3. Dolby.io

Dolby.io 服务可以用来构建音频会议应用、虚拟教室、直播应用、社交应用等。它也是一个商业级的音频解方案。

Dolby.io的特点如下：

• 高保真音频质量；
• 很多功能，包括噪音消除、空间音频、响度校正、背景嗡嗡声消除。

官网地址：https://dolby.io/

4. Tone.js

Tone.js是一个 Web 音频框架，允许使用 JavaScript 来创建音乐。

Tone.js的特点如下：

• 允许个性化定制；
• 支持使用 WebRTC 协议的外部音频输入；
• 提供音频合成、噪声和效果生成、循环和跟踪音乐时间等；
• 默认不支持实时降噪。

官网地址：https://tonejs.github.io/

5. Twilio

Twilio广泛用于在基于 javascript 的应用程序中生成自动音频通信功能。

Twilio Voice JavaScript SDK 支持许多新功能，例如使用多个指标监控音频数据质量、使用 javascript 的基于 Web 的 VoIP 以及基于录音生成转录。

Twilio的特点如下：

• 支持文本转化为语音；
• 语音识别；
• 通话质量监控工具；
• 良好的文档和技术支持。

官网地址：https://www.twilio.com/

文章推荐

本周是过年啦，没有更新文章，来推荐几篇之前写的文章吧~

1. 你需要知道的 19 个 console 实用调试技巧

我们使用最多的就是console.log()，当然多数情况下，console.log()就能满足我们的需求，但是当数据变得比较复杂时，console.log()就显得有些单一。其实console对象为我们提供了很多打印的方法，本文就来介绍一下 console 的那些实用调试技巧。

2. 33个非常实用的JavaScript一行代码

一行代码简化我们的代码，也可以学到一些JavaScript API的使用技巧！

3. 关于前端大管家 package.json，你知道多少？

本文主要介绍了前端的大管家package.json文件相关的配置。充分了解这些配置有助于我们提高开发的效率，规范我们的项目。

4. 如何优雅地在 React 中使用TypeScript ？

单独使用 TypeScript 时没有太多的坑，不过和React结合之后就会复杂很多。本文介绍了TypeScript与React一起使用时经常遇到的一些类型定义的问题。

5. 你需要知道的30个ES6—ES12开发技巧！

本文梳理了 ES6——ES12 的常用新特性以及使用技巧。巩固基础、学习技巧必备！

本期前端周刊到这里就结束了，本周刊每周一上午更新。如果觉得有用，就点个赞和在看吧！