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

1,728 阅读10分钟

科技趣闻

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 基金会项目的商标保持一致。对于贡献者来说,什么都不会改变。

了解更多:openjsf.org/blog/2022/0…

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 大小的影响,以便可以向开发者提供早期反馈。

开源地址github.com/spotify/rul…

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

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

开源地址:github.com/novak-99/ML…

更新速递

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 功能。

更新详情:github.com/expressjs/e…

2. ESLint v8.9.0 正式发布

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

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

更新详情:eslint.org/blog/2022/0…

3. TypeScript 4.6 RC 版本发布

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

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

npm install typescript@rc

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

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

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

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

更新详情:devblogs.microsoft.com/typescript/…

4. Next.js 12.1 正式发布

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

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

npm i next@latest

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 构建,为该网站提供了强大的支持。

更新详情:nextjs.org/blog/next-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,你肯定能发现很多相似之处。但它也有自己的特点,比如嵌套路由、数据获取和数据保存的处理以及错误处理等。

更新详情:github.com/remix-run/r…

开源趋势

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

1. Mermaid

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

Star⭐: 43.5 k

本周Star⭐️: 3051

Github: github.com/mermaid-js/…

2. Font-Awesome

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

Star⭐: 68.7 k

本周Star⭐️: 878

Github:github.com/FortAwesome…

3. Mantine

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

Star⭐: 6 k

本周Star⭐️: 643

Github: github.com/mantinedev/…

4. 3d

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

Star⭐: 1 k

本周Star⭐️: 332

Github:github.com/dragonir/3d

5. Solid

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

Solid 有以下特点:

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

Star⭐: 14.4 k

本周Star⭐️: 292

Github: github.com/solidjs/sol…

工具推荐

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

1. React-pdf/renderer

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

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

GitHubgithub.com/diegomura/r…

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…

3. React-file-viewer

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

GitHub:github.com/plangrid/re…

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/re…

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/r…

文章推荐

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

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

文章链接:mp.weixin.qq.com/s/Gos-IvUWt…

2. JavaScript 不再像以前那样

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

文章链接:mp.weixin.qq.com/s/MZFlAyd4e…

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

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

文章链接:mp.weixin.qq.com/s/czvnS0c7y…

4. JavaScript 命名约定最佳实践

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

文章链接:mp.weixin.qq.com/s/4Nr5Y-ngF…