前端周刊 | Node.js 18 发布; 程序员延寿指南登上 Github 热榜; Meta 开源其文本编辑器框架

1,836 阅读9分钟

新的一周,来看看上周发生了哪些新鲜事吧!

科技趣闻

1. 程序员延寿指南登上 Github 热榜

近日,一个名为《程序员延寿指南》的开源项目火爆Github,仅一周的时间,新增10k+star。跟着学就能多活20年?

在这份延寿指南中,各种方法被严格地划分成输入、输出和上下文三类,每一种方法都有可以量化的指标和结果。

(1)输入篇(即拆分饮食结构,合理化自己的日常饮食) 根据ACM(全因死亡率)来制定相应的延寿方案,简单来说就是降低ACM,从而使得寿命得到延长。就比如JAMA(一个科学刊物)上一个八年的研究表明:每天增加半份红肉摄入,则ACM增加10%,而每周吃两份红肉,ACM则会增加3%。 从这一点着手,想要降低ACM,就可以尽量减少红肉的摄入,而增加白肉、蔬菜类食物的摄入,这样就可以有效降低ACM。

(2)输出篇(即代谢掉身体不需要的物质,保证身体健康) 在专业科研杂志《柳叶刀》上记载过,想要降低ACM,运动是一项可以考虑的方法,而这个运动也不需要你真的付出特别多的体力,哪怕只是每周保持3次,每次45分钟左右的挥拍运动,都能让你的ACM下降47%。还有保证每天的睡眠时间7个小时,也可以有效降低ACM。

(3)上下文(即外在环境和自身情绪对ACM的影响) 想要保证程序员的身体健康,外部因素也不得不考虑到,情绪、贫富差距、环境污染等都会产生一定的影响,情绪乐观积极更有助于降低ACM。

Github:github.com/geekan/HowT…

2. Meta 开源其文本编辑器框架Lexical

近日,Meta(前 Facebook)在 GitHub 上开源了一个名为 Lexical 的项目,该项目是一个基于 JavaScript 的 Web 文本编辑器框架,具有可扩展、可访问和高性能的特性。Meta 在介绍中表示,结合 Lexical 高度可扩展的架构,开发者可以构建在大小和功能上均可以扩展的独特文本编辑器。

Lexical 的核心是一个文本编辑引擎 ——一个为网络建立功能丰富的编辑器的平台。为了避免用户在每一个实现中重复编写相同的富文本功能,Lexical 还公开了一组单独的、模块化的包,诸如用户界面组件、工具栏、富文本功能和标记等功能都可以通过这些包来实现和扩展。

官网:lexical.dev/

3. W3C发布WebAssembly 2.0首个草案

WebAssembly 是在Web上运行Assembly。开发者可以把Rust、Go、C等编写的程序编译为WebAssembly,从而让程序在浏览器中运行。WebAssembly 最初由 W3C 的 Mozilla、谷歌、微软、苹果等公司合作研发,是浏览器内应用程序的高性能执行引擎。

2019 年,W3C 宣布 WebAssembly 核心规范成为正式标准。时隔 3 年,W3C 又发布了 WebAssembly 核心规范 2.0 的首个草案。目前该草案是首次对外公开,作为第一个草案,并不意味着获得了所有W3C成及其成员的认可。

详情:www.w3.org/TR/wasm-cor…

4. State of React 聚会即将举行

The State of React 会议即将在 4 月 27 日上午 00:00 在线上进行。 参会者包括React 18 工作组成员、贡献者和 React 库作者,有现场提问的机会!

详情:www.reactjsmeetup.com/state-of-re…

更新速递

1. Node.js 18.0 正式发布

4月19日,Node.js 18.0正式发布。其更新如下:

  • 全局 Fetch API(实验性);
  • Web Streams API(实验性);
  • 其他全局 API:Blob、BroadcastChannel;
  • 测试运行器模块(实验性);
  • 工具链和编译器升级;
  • 构建时用户空间快照(实验性);
  • V8 引擎更新到 10.1 版本;

更新详情:nodejs.org/en/blog/ann…

2. React Redux 8.0 正式发布

4月16日,React Redux 8.0 正式发布。它是 Redux 作者封装的一个 React 专用的库。

更新详情:github.com/reduxjs/rea…

3. Nuxt.js 3.0 RC1 正式发布

Nuxt 3 测试版于 2021 年 10 月 12 日发布,引入了基于 Vue 3、Vite 和 Nitro 的新基础。六个月后,4 月 20 日,Nuxt 3 的第一个候选版本正式发布,代号为“Mount Hope”。

Nuxt.js 是一个通过 Vue 用于服务端渲染的简单框架,灵感来自 Next.js。

  1. 模块化:Nuxt 基于一个强大的模块化架构。你可以从 50 多个模块中进行选择,让你的开发变得更快、更简单。对 PWA 的支持、添加谷歌分析到你的网页或生成网站地图,这些功能都无需重新发明轮子来获得。
  2. 高性能:Nuxt.js 默认会优化你的应用程序。我们尽可能地利用 Vue.js 和 Node.js 的最佳实践来构建高性能的应用程序。Nuxt 帮你把所有不需要的比特都从你的应用程序中剔除,并且还包含了一组分析器,以便更好地优化你的应用程序。
  3. 友好:Nuxt.js 具备有吸引力的解决方案、描述清晰的错误消息、强大的默认值和详细的文档。如果有问题或遇到困难,社区会帮助你解决。

更新详情:nuxtjs.org/announcemen…

4. Deno 1.21 正式发布

4月21日,Deno 1.21 正式发布。

Deno 是一个简单、先进且安全的 JavaScript 和 TypeScript 运行时环境,其基于 V8 引擎并采用 Rust 编程语言构建。

  1. 默认安全设置。除非 显式开启,否则不能访问文件、网络,也不能访问运行环境。
  2. 天生支持 TypeScript。
  3. 只有一个唯一的可执行文件。
  4. 自带实用工具,例如依赖检查器 (deno info) 和代码格式化工具 (deno fmt)。
  5. 有一套经过审核(审计)的标准模块, 确保与 Deno 兼容。

更新详情:deno.com/blog/v1.21

5. Electron 18.1 正式发布

4月21日,Electron v18.1.0 正式发布。

更新详情:github.com/electron/el…

开源趋势

下面来看看上周Github上有哪些热门的前端项目吧!

1. Lexical

Lexical 是一个可扩展的 JavaScript Web 文本编辑器框架,强调可靠性、可访问性和性能。结合高度可扩展的架构,Lexical 允许开发者创建独特的文本编辑体验,并在规模和功能上进行扩展。

团队认为,用户不应该在每个实现中一遍又一遍地重写相同的富文本功能,因此 Lexical 公开了一组单独的模块化包,可用于添加常见功能如列表、链接和表格。Lexical 强调可扩展性:节点可以被扩展,以增加或改变行为,简单的、命令式的 API 使它很容易建立自定义的用例。

Lexical 由编辑器实例组成,每个实例都附加到一个内容可编辑元素。一组编辑器状态代表了编辑器在任何特定时间的当前和待定状态。它设置简单,与框架无关,但为 React 提供了一组绑定。Lexical 不直接关注 UI 组件、工具栏或富文本功能和 Markdown,这些功能的逻辑可以通过一个插件接口包含进来。此外,Lexical 遵循网页无障碍性指导原则 (Web Content Accessibility Guidelines),并与屏幕阅读器和其他辅助技术兼容。

官方提醒称,Lexical 目前处于早期开发阶段,API 和包可能会经常更改。

Star⭐:7.9 k

本周Star⭐️:2844

Githubgithub.com/facebook/le…

2. Leaflet

Leaflet 是领先的用于移动友好交互式地图的开源 JavaScript 库。大小仅仅约39KB的JS,它拥有大多数开发者所需要的所有地图功能。

Leaflet在设计时考虑到了简单性、性能和可用性。它可以在所有主要的桌面和移动平台上高效地工作,可以通过大量的插件进行扩展,拥有一个漂亮的、易于使用的、记录良好的API,以及一个简单的、可读的源代码。

Star⭐:34.2 k

本周Star⭐️:623

Githubgithub.com/Leaflet/Lea…

3. javascript-algorithms

用 JavaScript 实现的算法和数据结构,包含了多种基于 JavaScript 的算法与数据结构。每种算法和数据结构都有自己的 README,包含相关说明和链接,以便进一步阅读 (还有 YouTube 视频) 。

Star⭐:140 k

本周Star⭐️:671

Githubgithub.com/trekhleb/ja…

4. clean-code-javascript

clean-code-javascript 即编写高质量的 JavaScript 代码(JavaScript 的代码规范)。

Star⭐:66.7 k

本周Star⭐️:655

Githubgithub.com/ryanmcdermo…

5. Tabby

Tabby(以前称为Terminus)是一个高度可配置的终端仿真器、SSH 和串行客户端,适用于 Windows、macOS 和 Linux。

Star⭐:32.1 k

本周Star⭐️:699

Githubgithub.com/Eugeny/tabb…

工具推荐

下面来推荐几个用于React开发的实用工具!

1. React Developer Tool

React Developer Tools是一款由facebook开发的Chrome浏览器扩展;通过它,可以在chrome开发者工具中得到一个名为React的新标签,检查React组件层次结构,在页面上显示React组件。

React Developer Tool 可以通过组件选项卡轻松访问页面上呈现的组件。因此可以轻松地检查和调试这些组件。此外,它使用火焰图以准确的时间信息直观地表示组件重新渲染。这可以通过 profiler 选项卡访问,它非常适合调试与性能相关的问题。

介绍:reactjs.org/blog/2019/0…

2. Reactide

Reactide 是首个用于 React Web 应用开发的专用 IDE 。Reactide 是一个跨平台的桌面应用程序,提供了一个自定义模拟器,不需要构建工具和服务器配置,开箱即用。 Reactide 将开发带回到打开单个文件的日子,立即在浏览器中呈现项目。 使用 Reactide,开发人员可以使用单个 React JSX 文件实现相同的简单性,同时利用 React 的强大功能。

官网:reactide.io/

3. Webpack Bundle Analyzer

Webpack Bundle Analyzer 是一个 Webpack 插件和 CLI 实用程序。它在交互式和可缩放的树形图中提供了应用程序包的可视化表示。该工具可以帮助我们查看bundle包的内容并确定哪些模块占用的空间最大以及要删除哪些模块。

Github:github.com/webpack-con…

4. why-did-you-render

why-did-you-render 是 React 和 React Native 通知开发人员有关可避免的组件重新渲染的路径。这使我们能够轻松识别组件重新渲染的原因和时间,这对于调试与性能相关的问题很有用。

Github:github.com/welldone-so…

5. React Sight

React Sight 是 React 应用的组件层次树的实时视图,以 Chrome 插件形式发布,支持 React Router 和 Redux,现在支持Firefox。

官网:www.reactsight.com/