Published on

2023-第四十九周

Authors

该周报主要为各个地方内容的汇总整理

akirakusaka_official-20231211_000943-409339463_271447128878768_1012697592937502785_n

技术

What do we know about React Forget | Code Insight

React Forget 是一个编译器，旨在分析 React 代码并自动进行组件和 Hooks 的记忆化。它的目标是消除不必要的重新渲染，提高性能。React Forget 由 Meta 开发，目前正在实际应用中进行测试，并计划在通过所有测试后向公众发布和开源。编译器在构建阶段进行优化，输出优化后的代码。它利用 React 的不可变性、纯净性和组件驱动设计原则，将所有组件和 Hooks 进行记忆化，从而避免不必要的重新渲染。编译器通过低级优化实现记忆化，优于人工手动优化。初步测试表明，编译器在提高页面加载速度和性能方面表现出色。

  • React Forget 是一个编译器，旨在分析 React 代码并自动优化组件和钩子函数的性能，减少不必要的重新渲染。
  • React Forget 由 Meta 开发，目前还没有发布和开源。
  • 编译发生在构建阶段，优化后的代码在打包中输出，不会在运行时执行。
  • 初步测试结果显示，React Forget 在优化页面性能方面比人工优化效果更好，可以提升页面加载速度和交互响应速度。

Develop the right thing every time and become a 10x engineer 🏆: The art of writing RFCs 🥋

本文介绍了 RFC（Request For Comments）的概念和作用。RFC 是一个提出代码改变来解决特定问题的文档，它的主要目的是在实现之前找到最佳解决方案。文章解释了何时需要编写 RFC 以及为什么应该编写 RFC，包括组织思路、学习和获得团队的知识、提高团队对代码库的理解、使 PR 审查更顺利等好处。文章还简要介绍了编写 RFC 的基本步骤和常见部分，包括元数据、问题/目标、解决方案和实施概述等。

  • RFC 是一种请求评论的文档，用于在实现代码变更之前找到解决问题的最佳方法。
  • 编写 RFC 可以使思路更清晰，学习更多，并获取团队的知识和反馈。
  • 通过先编写 RFC，可以使 PR 审查更顺利，减少不必要的讨论，并为文档的撰写提供了一部分内容。

A minimal dependency-free translation system for Next.js

这篇文章介绍了一个基于 Next.js 的简单翻译系统，通过调用 POEditor 的 API 来获取翻译内容，并使用 React Context 来存储翻译数据。作者创建了一个自定义的翻译钩子，使得在 React 组件中可以方便地使用翻译功能。文章还提供了源代码和在线演示的链接。

  • 作者在进行网站速度性能检查时发现使用的翻译系统增加了包的体积。
  • 为了解决这个问题，作者创建了一个简单的翻译系统，不需要任何依赖。
  • 通过使用 React Context 和 POEditor 来获取和存储翻译，作者成功实现了一个精简且无依赖的翻译系统。

Node.js, TypeScript and ESM: it doesn't have to be painful

这篇文章探讨了在 Node.js 项目中使用 ESM（ES Modules）和 CommonJS 的选择。作者介绍了如何将项目转换为 ES Module，并使用 TypeScript 进行编译。文章还提到了使用 SWC 进行编译和使用 nodemon 进行实时重新加载的方法。最后，作者总结了使用 TypeScript 和 ESM 编译在 Node.js 中的复杂性，并提供了一个示例仓库供参考。

  • 选择 ESM 还是 CommonJS：面对 Node.js 项目，选择 ESM 或 CommonJS 是一个困扰的选择，但目前趋势显示 ESM 是未来的方向。
  • 使项目成为 ES 模块：在 package.json 中加入"type": "module"即可将项目转为 ES 模块，但需要注意在导入文件时需要加上文件扩展名。
  • 使用 SWC 编译项目：使用 SWC 编译项目为 JavaScript，可以提高编译速度，同时可以使用 tsc 进行类型检查。

A Chain Reaction

这段文字讲述了在 Web 开发中，通过给不同概念命名的方式，可以让开发者更好地理解和组织复杂的系统。它还介绍了如何使用 JSX 和定义概念来实现对浏览器的“翻译”，以及如何通过“翻译”将自己定义的概念转化为浏览器已知的概念。最后，它提到了将 JSX 转化为浏览器可以理解的形式，以便在浏览器中显示内容。

  • 命名的重要性：通过给标签和 CSS 类等概念命名，我们可以在不关心底层实现的情况下使用它们。
  • 分层的概念：将复杂的系统分解成不同层次的概念，让不同的人员可以专注于各自领域的工作。
  • 使用 JSX 和定义概念：通过定义概念并将其应用于 JSX，我们可以将自定义概念转化为浏览器已知的概念，实现代码的可读性和重用性。

How to Use Responsive HTML Video (...and Audio!)

这篇文章介绍了最新的 HTML 视频响应式设计，包括使用媒体查询来根据浏览器窗口大小选择不同的视频源。作者还提到了 HTML 音频元素也可以使用媒体查询来实现响应式音频。此外，文章还提到了 HTTP Live Streaming（HLS）作为一种更好的视频传输方式，并简要介绍了 HLS 的使用方法和优势。最后，作者表示正在寻找 2024 年的工作机会。

  • 最新的浏览器版本已经重新支持使用媒体查询来实现响应式 HTML 视频。
  • 响应式 HTML 视频可以根据浏览器的视口大小选择不同的视频源，有助于提高网页性能和节省数据成本。
  • 不仅可以在视频元素中使用媒体查询，还可以在音频元素中使用媒体查询来实现响应式音频。

THE AWAIT EVENT HORIZON IN JAVASCRIPT

这篇文章首先将 JavaScript 中的 Promise 与黑洞的边界（事件视界）打了比方，提出了类似的无法从中跳出的特性。通过探讨 Promise 内部的异步函数可能会被无限期地阻塞的问题，作者进一步阐述了如何避免资源泄漏的问题。几种方案，包括显明资源管理（Explicit resource management）和 AbortSignal，都因为各自的局限性证明了它们无法解决这个问题。在分析了结构化并发（Structured Concurrency）和 await 事件视界之后，文章告诉我们，结构化并发至关重要，但无法由async 函数保证。然后，作者提出了 JavaScript 的生成器函数（Generator functions）在实现结构化并发方面的巨大潜力，因为它们能够通过显式返回来终止执行，但在退出时，它们仍会遵循像finally 这样的关键代码路径。

  • JavaScript Promise 就像黑洞的事件视界，一旦进入，就无法从中逃脱。异步函数可能会无限期地阻塞。
  • 显明资源管理（Explicit resource management）虽然能够改善编码风格，避免资源泄漏，但原则上它并不能解决异步函数受阻的问题。
  • AbortSignal 不能完全解决这个问题，因为真正需要的是对 work() 的内在操作的黑箱抽象，而无论 work() 如何构建都能确保其返回控制权。
  • 结构化并发（Structured Concurrency）很重要，但不能由 async 函数保证，因为 async 函数无法改变 await 事件视界的基本物理特性。
  • 生成器函数（Generator functions）是实现结构化并发的有效方法，它们能够显式返回来终止执行，同时还会遵循关键的代码路径，如 finally 块或显式资源方法。

Web Components Will Outlive Your JavaScript Framework

这篇文章讲述了作者在选择构建项目时为什么选择了纯 JavaScript 的 Web 组件。作者认为 Web 组件具有可移植性和易于维护的优势，可以在不依赖于特定框架或依赖项的情况下构建可重用的 HTML 元素。通过使用纯 JavaScript 和避免过多的依赖，作者认为可以创建更稳定、可访问和未来兼容的网页。

  • 在选择技术时，项目的约束应该决定技术决策，这篇文章选择了使用原生 JS Web 组件来实现交互式演示。
  • 使用 Markdown 和 HTML 结合的方式可以使内容更加可移植，而不依赖于特定的网站生成器。
  • Web 组件是一种使用 W3C 标准构建可重用 HTML 元素的方法，它们具有独立的 HTML、CSS 和 JS，且不需要额外的构建系统。

Your Cache Headers Could Probably be More Aggressive

这篇文章讨论了网站静态资源的缓存策略，介绍了默认缓存和更智能缓存的区别。作者建议使用更智能的缓存策略，并解释了如何通过指纹和更改文件名来刷新缓存。文章还提供了在不同网站托管平台上实现更智能缓存的方法，并鼓励读者深入了解网络工具以优化网站加载速度。

  • 现代主机提供商通过缓存静态资源来提高网站性能，但默认设置可能不够高效。
  • 通过使用更聪明的缓存策略，可以减少不必要的 HTTP 请求，提升页面加载速度。
  • 采用指纹技术可以解决更新资源的问题，保证用户获取最新的内容。

工具

tsdiagram

使用 TypeScript 创建图表并规划您的代码

gitbrain

AI 提交消息、代码拆分等：轻松上手 Git 的秘籍

npm-check-extras

CLI 应用程序，用于检查过时和未使用的依赖项，并对选定的依赖项运行更新/删除操作

svgo

⚙️ 一个用于优化 SVG 文件的 Node.js 工具

article-extractor

使用 Node.js 从指定的 URL 中提取主要文章内容

react-rotate-captcha

React 的验证码扩展包

better-commits

这是一个用 TypeScript、ZOD 和 Clack 编写的命令行工具，用于按照常规提交指南创建更加规范的提交

trippy

Trippy 是一个网络分析工具，结合了 traceroute 和 ping 的功能。它支持多种协议，包括 ICMP、UDP 和 TCP，并提供了自定义跟踪选项。Trippy 还具有 Tui 界面，可以同时跟踪多个目标，并提供了丰富的统计信息和可视化图表。此外，Trippy 还支持 DNS 查询、GeoIp 信息查询和生成跟踪报告等功能。它可在多个平台上运行，并具有不同的安装方式和特权要求。

prosekit

跨框架且无界面的富文本编辑器

更新

Announcing Million 3.0

这段文字是关于发布了 Million 3.0 的消息。Million 3.0 是一个 React 的替代品，能够将现有的 React 代码转换成高度优化的虚拟 DOM。这个版本带来了许多新功能和改进，包括更快的编译和运行时间，以及更高效的渲染方式。迁移到 3.0 版本也很简单，只需要更新依赖包即可。未来，Million.js 将成为 Web 的性能工具集，还将推出一些强大而新颖的工具来帮助构建更快的网站。感谢所有为 Million.js 做出贡献的人。

  • Million.js 发布了 3.0 版本，带来了更快的构建时间和运行时，以及更多的功能和优化。
  • 3.0 版本的编译器经过全面改进，编译速度提高了 34%，代码变更速度提高了 82%。
  • 迁移到 3.0 版本很容易，只需更新依赖并运行 npm install million@latest 即可。

Storybook for React Server Components

React Server Components (RSC) 是 React 基于 Web UI 的一种新的编程模型。与传统的 React“客户端”组件不同，它们只在服务器上渲染。这带来了多种性能和安全优势，但也与我们今天使用的 React 工具和库有很大不同。其中受影响最大的领域之一是组件驱动的开发和测试。像 Storybook、Testing Library 和 Playwright/Cypress Component Testing 这样的工具都假设用户的组件是在浏览器（或 JSDom）中渲染的。但是对于服务器组件来说，情况并非如此。这就带来了一个问题：如何对服务器进行独立的组件开发和测试？现在，我很高兴地发布了 Storybook 的 Next.js 框架中对 RSC 的支持，作为对这个问题的试验性答案。它是一个纯客户端实现，与 Storybook 插件和集成的整个生态系统兼容。

  • React Server Components（RSC）是一种新的 React 基于 Web UI 的编程模型，与传统的“客户端”组件不同，它只在服务器上渲染，从而带来了性能和安全方面的优势。
  • RSC 对组件驱动的开发和测试产生了重大影响，因为现有的工具和库都假设用户的组件是在浏览器中渲染的，但是对于服务器端组件来说，情况就不同了。
  • Storybook 的 Next.js 框架现在支持 RSC 作为实验性功能，这是一个纯客户端实现，与 Storybook 的插件和集成生态系统兼容。

Expo Router v3 beta is now available

Expo Router v3 是 Expo SDK 50 的一部分，提供了新的实验性功能，包括 API Routes、更小的 bundle 大小和更强大的 web 支持。该版本还修复了一些 bug，并改进了稳定性。迁移到 Expo Router v3 需要注意一些变化，包括删除一些依赖、重命名文件等。用户可以参与测试并报告问题，以帮助改进该版本。

  • Expo Router v3 是 Expo SDK 50 的一部分，提供新的实验性系统来构建服务器端点。
  • Expo Router v3 的新功能包括更快的静态网站导出、更小的基础捆绑包大小和更强大的网络支持。
  • Expo Router v3 还引入了 API Routes、捆绑分割和更好的 URL 支持等新特性。

Announcing Reactotron 3.0!

Reactotron 3.0 是一个用于调试 React 和 React Native 应用程序的开源桌面应用程序。它提供了改进的日志记录、实时状态检查、网络检查、自定义命令和插件系统等功能。在新版本中，日志现在默认跟踪，并具有更好的 Android 设备调试功能。此外，应用启动时间更快，组件整合到一个单一的代码库中，还提供了更强大的类型系统和更新的文档。用户可以下载最新版本的 Reactotron 应用，并更新相关依赖和配置。

  • Reactotron 3.0 是一款用于检查和调试 React Native 应用程序的开源桌面应用程序，提供了改进的日志记录、实时状态检查、网络检查、自定义命令和插件系统等功能。
  • Reactotron 3.0 在性能和调试体验方面进行了改进，自动捕获和发送日志消息到 Reactotron 时间轴，并提供强大的搜索和排序工具。
  • Reactotron 3.0 还改善了与 Android 设备的连接问题，提供了帮助页面和简化的连接流程，同时优化了启动时间和内存使用，提供了新的快捷方式和更强的类型支持。

设计

1 分钟带你了解 Bento box 设计趋势

本文讨论了 Bento box 设计风格的起源和发展，并介绍了其设计特征和思维。Bento UI 以其清晰的区块划分和简约优雅的风格，融入了极简主义和东方传统美学，使用户能够轻松理解和操作。文章还提到了 Bento UI 的克制艺术和创意限制，并给出了一些 Bento UI 应用的案例，以供设计师们参考。最后，强调了设计师需要了解和应用设计趋势，以提供更好的用户体验。

  • Bento box 设计风格是指将用户界面划分为清晰的区块，融入了极简主义和东方传统美学，追求简单直接的解决方案。
  • Bento UI 的设计特征包括具有视觉吸引力的层次感、基于网格的响应式布局、清晰的内容和功能划分，以及简约优雅的现代感。
  • Bento box 设计风格的限制包括需要处理和平衡卡片类型的多样性，以及严格的栅格系统对不规则创新设计的限制。

AI

Mixture of Experts Explained

本文介绍了专家混合（MoEs）的概念和应用。MoEs 是一种在 transformer 模型中使用的结构，由稀疏 MoE 层和路由器网络组成。稀疏 MoE 层由多个专家组成，每个专家都是一个神经网络，通过路由器网络将输入的令牌分配给不同的专家。MoEs 具有高效的预训练和快速的推理速度，但在微调过程中面临一些挑战。稀疏性的引入使得模型的计算量可以随着模型规模的增大而减小，并且可以更好地利用计算资源。然而，MoEs 需要较高的内存需求，因为所有的专家都需要加载到内存中。此外，MoEs 在微调过程中容易过拟合。文章还介绍了 MoEs 的发展历史和一些相关的研究工作。

  • Mixture of Experts (MoEs) 是一种用于训练大型模型的技术，它可以在相同的计算预算下，以更快的速度进行预训练，并且在推理过程中具有更快的推理速度。
  • MoEs 由稀疏的 MoE 层和路由器组成，稀疏的 MoE 层由多个专家组成，路由器确定输入被发送到哪个专家。
  • MoEs 的训练和推理都面临挑战，但最近的 MoE 指令调整技术为 Fine-tuning 提供了希望。

现在 v0 对所有人开放了

人工智能辅助程序员的三种类型 [译]

人们对生成式人工智能（AI）在编程领域的应用存在不同观点。一些人认为 AI 工具能够帮助初级工程师更快地编写代码，但存在质量和可维护性的问题。然而，对于资深工程师而言，AI 工具更多是提高工作效率的辅助工具。AI 在编程领域的作用还处于初期阶段，未来的发展仍有待观察。

  • AI 工具在编程领域的应用引起了广泛讨论，对于初级工程师而言，它们既是挑战也是机遇。
  • AI 工具对于初级工程师来说可以是学习工具，但过分依赖可能限制其成为优秀程序员的发展。
  • 对于资深工程师而言，AI 工具可以提高工作效率，但需要注意不要只关注速度而忽视质量。
  • AI 工具的发展仍处于初期阶段，未来的应用和影响有待进一步观察。

coffee

借助人工智能，您可以在自己的集成开发环境（IDE）中以十倍速度构建和优化用户界面 ☕️

其他

任何不经常改主意的人，都大大低估了我们生活的世界的复杂性。

-- 贝佐斯，亚马逊创始人

作为父母，我们的首要任务是向他们传达一种世界感，即世界是一个不完美的地方，然而，在其中，幸福是可能的。

-- 扫地僧。笔记

Discuss on Twitter • View on GitHub