前端周刊 | OpenJS基金会收购Node.js商标; 高中生用C++实现机器学习库; Express 5.0 Beta版发布

科技趣闻

1. Node.js 商标转让给 OpenJS 基金会

在过去的 6 年中，OpenJS 基金会已获得使用 Node.js 商标和徽标的免费永久许可。

2022 年 2 月 14 日，OpenJS 基金会为开源 JavaScript 社区的持续增长提供供应商中立的支持，宣布收购 Node.js 徽标、商标的所有权。

即日起，OpenJS 基金会将承担 Node.js 商标的持续管理和维护工作。Node.js 商标的所有权和管理权已从 Joyent 转移到 OpenJS 基金会。管理 Node.js 商标使用的规则现在将与所有其他 OpenJS 基金会项目的商标保持一致。对于贡献者来说，不会有任何影响。

了解更多：https://openjsf.org/blog/2022/02/14/node-js-trademarks-transferred-to-openjs-foundation/

2. Spotify 宣布开源其 App 分析工具

2022年2月14日，Spotify 宣布开源其 App 分析工具 Ruler，可帮助解决 App 安装包越来越大的问题。

Ruler 是一个 App 的分析工具。它可以模拟谷歌 Google Play 商店上传 App Bundle 的形式，生成最终获得优化的 APK 大小，包括下载大小和安装大小。然后，Ruler 可以扫描 App 并找到其中的文件列表及其大小。它还可以找到所有影响 App 大小的 Gradle 模块和依赖项。通过这种方式对 App 的所有文件进行分组，并确定每个模块和依赖项在整个 App 中的大小占比，从而进行进一步优化。

Spotify 表示，Spotify 的安卓版 App 拥有超过 1000 个 Gradle 模块和数百个第三方依赖项。并且在过去六个月中，Ruler 帮助将 App 大小减少了 9% 以上。Spotify 每天使用最新的版本导出一次 App 大小数据，并使用这些数据来跟踪整个 App 以及单个模块和第三方依赖项的历史趋势，还分析了每个拉取请求对 App 大小的影响，以便可以向开发者提供早期反馈。

开源地址：https://github.com/spotify/ruler

3. 16岁高中生用13000+行代码，从零构建C++机器学习库

16 岁的 novak-99 构建的这个机器学习库（ML++）有 13000 多行代码，涵盖了统计、线性代数、数值分析、机器学习和深度学习等19个主题。他表示，之所以构建这个库，是因为 C++ 是他所选择的语言，但到了 ML 前端，C++ 却用得非常少。这主要是因为C++缺乏用户支持，以及 C++ 语法比较复杂。因此，他决定自己写一个 C++ 的机器学习库。

开源地址：https://github.com/novak-99/MLPP

更新速递

1. 时隔七年，Express.js 5.0 发布 Beta 版本

Express.js 在 2014 年发布了 v5.0 第一个 alpha 版本。时隔七年多，在2022年2月14日，终于发布了第一个 Beta 版本。

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。Express 提供精简的基本 Web 应用程序功能，而不会隐藏您了解和青睐的 Node.js 功能。

更新详情：https://github.com/expressjs/express/blob/5.0/History.md

2. ESLint v8.9.0 正式发布

2022 年 2 月 11 日，ESLint v8.9.0 正式发布。该版本添加了新的ES2022环境。当启用时，它会添加所有 ECMAScript 2022 全局变量（目前与 ECMAScript 2021 全局变量相同）并自动将 ecmaVersion 解析器选项设置为13。

ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码。

更新详情：https://eslint.org/blog/2022/02/eslint-v8.9.0-released

3. TypeScript 4.6 RC 版本发布

2022年2月11日，TypeScript 4.6 候选版本 (RC) 正式发布，自此到 TypeScript 4.6 的稳定版本，预计除了关键的错误修复之外不会有进一步的变化。

可以使用以下命令安装RC版本：

TypeScript v4.6 的主要更新如下：

• 允许在super（）之前的构造函数中使用代码；
• 非结构化判别联合的控制流分析；
• 改进的递归深度检查；
• 索引访问推理的改进；
• 相关参数的控制流分析；
• --target选项现在支持es2022；
• JavaScript中的更多语法和绑定错误
• 类型脚本跟踪分析器

TypeScript 是微软新推出的一种语言，基于 JavaScript，是 JavaScript 的超集，最终通过工具编译生成 JavaScript。

TypeScript 兼容JavaScript，可以载入 JavaScript 代码然后运行。TypeScript 与 JavaScript 相比，进步的地方包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之成为一个全新的面向对象语言。

更新详情：https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/

4. Next.js 12.1 正式发布

2022年2月18日，Next.js 12.1正式发布。

可以使用以下命令安装12.1版本：

Next.js 12.1 主要更新如下：

• 按需ISR（测试版）：立即使用getStaticProps重新验证页面。
• 扩展了对SWC的支持：styled-components、Relay等。
• next/jest插件：使用SWC的零配置jest支持。
• 使用SWC（RC）的缩小速度更快：缩小速度比 Terser 快 7 倍。
• 自我托管的改进：Docker镜像缩小了约80%。
• React 18和服务器组件（Alpha）：提高了稳定性和支持能力。

Next.js 是一个用于服务器渲染的通用 JavaScript Web 应用程序的小型框架，该框架基于React、Webpack 和 Babel 构建，为该网站提供了强大的支持。

更新详情：https://nextjs.org/blog/next-12-1

5. Remix v1.2.0 正式发布

2022年2月16日，Remix v1.2.0 版本正式发布。

Remix v1.2.0  的主要更新如下：

• 新功能：serverBuildTarget
• 新功能：单文件服务器构建
• 新功能：Node 内置的浏览器插件
• 新功能：仅在node上使用ESM包
• 实验功能：Deno适配器

Remix 是一个新的全栈式 JavaScript 框架，它摆脱了静态网站的生成，并且在其他方面做了一些与我们常用的其他框架不同的事情。它依靠 React 来渲染用户界面，如果你熟悉 Next.js，你肯定能发现很多相似之处。但它也有自己的特点，比如嵌套路由、数据获取和数据保存的处理以及错误处理等。

更新详情：https://github.com/remix-run/remix/releases/tag/v1.2.0

开源趋势

下面来看看本周 GitHub 有哪些热门的前端开源项目吧~

1. Mermaid

Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。

Star⭐： 43.5 k

本周Star⭐️： 3051

Github： https://github.com/mermaid-js/mermaid

2. Font-Awesome

Font Awesome一套绝佳的图标字体库和CSS框架，它提供了可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

Star⭐： 68.7 k

本周Star⭐️： 878

Github：https://github.com/FortAwesome/Font-Awesome

3. Mantine

Mantine是一个具有原生深色主题支持的 React 组件库，可以比以往更快地构建功能齐全的可访问 Web 应用程序。Mantine 包含 120 多个可定制的组件和hooks。

Star⭐： 6 k

本周Star⭐️： 643

Github： https://github.com/mantinedev/mantine

4. 3d

3d 是一个 Three.js 3D项目，包含冰墩墩🐼、数字城市🏙、3D人像👤、车模展示🚗、塞尔达传说🗡等一些3D趣味演示页面。

Star⭐： 1 k

本周Star⭐️： 332

Github：https://github.com/dragonir/3d

5. Solid

Solid 是一个用于创建用户界面的声明性 JavaScript 库。它不使用虚拟 DOM。相反，它选择将其模板编译为真实的 DOM 节点，并将更新包装在细粒度的反应中。这样，当您的状态更新时，只运行依赖于它的代码。

Solid 有以下特点：

• 高性能 - 始终在公认的 UI 速度和内存利用率基准测试中名列前茅；
• 强大 - 可组合的反应式原语与 JSX 的灵活性相结合；
• 务实 - 合理且量身定制的 API 使开发变得有趣而简单；
• 生产力 - 人体工程学和熟悉程度使构建简单或复杂的东西变得轻而易举。

Star⭐： 14.4 k

本周Star⭐️： 292

Github： https://github.com/solidjs/solid

工具推荐

下面来推荐5个用于React项目的PDF处理库。

1. React-pdf/renderer

React-pdf/renderer是一个广泛使用的库，用于在浏览器和服务器上创建 PDF 文件。该库的一些实用功能如下：

• 支持多种样式和 CSS 属性。
• 通过usePDF钩子 API更好地控制文档。
• 提供节点 API。
• 很棒的文档。
• 快速高效。
• 高度可定制且易于使用。

GitHub：github.com/diegomura/react-pdf

2. @mikecousins/react-pdf

@mikecousins/react-pdf 是一个使用 PDF.js 渲染 PDF 文档的组件。这个库使用一个 Hook 调用usePdf来渲染 PDF，我们需要通过这个 Hook 传递几个参数：

• file - PDF 文件的 URL。
• page- 表示要显示的页面。默认值 = 1。
• scale- 允许您缩放 PDF。默认值 = 1。
• onDocumentLoadSuccess - 您可以定义一个回调函数，该函数将在 PDF 文档数据完全加载后调用。
• onDocumentLoadFail- 让您定义一个回调，当发生 PDF 文档数据加载错误时调用该回调。
• onPageLoadSuccess - 让您定义在 PDF 页面数据加载完成后将调用的回调。
• onPageRenderSuccess - 让您定义一个回调，在 PDF 页面完全渲染到 DOM 后将执行该回调。

GitHub：github.com/mikecousins/react-pdf-js

3. React-file-viewer

React-file-viewer 是一个可扩展的文件查看器，用于支持 PDF、图像、csv、xslx 和 docx 的 Web 应用程序。

GitHub：github.com/plangrid/react-file-viewer

4. @phuocng/react-pdf-viewer

React-pdf-viewer 是一个完全由 React 钩子驱动并用 TypeScript 编写的 React 组件。它有一些特色功能：

• 支持密码保护的文件。
• 缩放：支持自定义级别，例如实际大小、页面大小和页面宽度。
• 页面间导航。
• 搜索文本。
• 预览页面缩略图。
• 查看和导航目录。
• 列出并下载附件。
• 旋转和许多滚动模式。
• 文本选择和手动工具模式。
• 全屏模式。
• 可以打开本地文件（例如，拖放本地文件以查看它。）
• 下载文件并打印。
• 查看文档属性。
• 支持 SSR。

注意：React 16.8+ 版本和 TypeScript 3.8+ 版本才能使用 React-pdf-viewer。

GitHub：github.com/phuoc-ng/react-pdf-viewer

5. React-pdf

上面说的React-pdf/renderer 专门用于创建 PDF。而React-pdf用于预览PDF。

React-pdf 提供了一个 React 组件 API，允许打开 PDF 文件并使用PDF.js渲染它们。它具有一些实用的功能：

• 易于使用；
• 支持自定义事件。
• 多种渲染方法。
• 支持文本选择和注释。
• 跨浏览器兼容性。
• 可访问性——React-pdf 不仅将 PDF 呈现为图像。但也可以作为屏幕阅读器可以掌握的可见文本层，让视障人士更容易使用PDF内容。

GitHub：github.com/wojtekmaj/react-pdf

文章推荐

1. 有趣且实用的 CSS 小技巧

本文介绍了一些 CSS 实用并且有趣的小技巧。

2. JavaScript 不再像以前那样

本文介绍了JavaScript的发展历程，以及JavaScript的优缺点。

3. 27 个前端动画库让你的交互更加炫酷

本文介绍了前端常用的一些动画库，让你的页面交互更加炫酷！

4. JavaScript 命名约定最佳实践

本文介绍了 JavaScript 中命名约定的最佳实践，包括变量、布尔值、函数、常量、类、组件、文件等的命名最佳实践。

由于微信公众号改版，可能会经常看不到文章推送。如果不想错过最新文章，就对本号设为星标吧！