vlambda博客
学习文章列表

新的一周，快来看看上周发生了哪些新鲜事吧！

科技趣闻

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：https://github.com/geekan/HowToLiveLonger

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

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

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

官网：https://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成及其成员的认可。

详情：https://www.w3.org/TR/wasm-core-2/

4. State of React 聚会即将举行

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

详情：https://www.reactjsmeetup.com/state-of-react-or-april-2022

更新速递

1. Node.js 18.0 正式发布

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

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

更新详情：https://nodejs.org/en/blog/announcements/v18-release-announce/

2. React Redux 8.0 正式发布

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

更新详情：https://github.com/reduxjs/react-redux/releases/tag/v8.0.0

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 具备有吸引力的解决方案、描述清晰的错误消息、强大的默认值和详细的文档。如果有问题或遇到困难，社区会帮助你解决。

更新详情：https://nuxtjs.org/announcements/nuxt3-rc/

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 兼容。

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

5. Electron 18.1 正式发布

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

更新详情：https://github.com/electron/electron/releases/tag/v18.1.0

开源趋势

下面来看看上周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

Github：https://github.com/facebook/lexical

2. Leaflet

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

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

Star⭐：34.2 k

本周Star⭐️：623

Github：https://github.com/Leaflet/Leaflet

3. javascript-algorithms

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

Star⭐：140 k

本周Star⭐️：671

Github：https://github.com/trekhleb/javascript-algorithms

4. clean-code-javascript

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

Star⭐：66.7 k

本周Star⭐️：655

Github：https://github.com/ryanmcdermott/clean-code-javascript

5. Tabby

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

Star⭐：32.1 k

本周Star⭐️：699

Github：https://github.com/Eugeny/tabby

工具推荐

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

1. React Developer Tool

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

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

介绍：https://reactjs.org/blog/2019/08/15/new-react-devtools.html

2. Reactide

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

官网：https://reactide.io/

3. Webpack Bundle Analyzer

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

Github：https://github.com/webpack-contrib/webpack-bundle-analyzer

4. why-did-you-render

why-did-you-render 由 Welldone Software 开发的，用来对组件重复渲染给出反馈。它会对组件的 props 做 diff，如果组件重新渲染了，但是 props 并没改变，它会在命令行提醒你 props 并没有变化。这对于调试与性能相关的问题很有用。

Github：https://github.com/welldone-software/why-did-you-render

5. React Sight

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

官网：https://www.reactsight.com/

往期推荐：