#优质博文 #前端 #新动态 #react #course
有意思。
🗓 React Status #434

AI 摘要： 本期 React Status 通讯（#434，2025年7月2日）聚焦于 React 生态系统的最新动态与讨论热点，涵盖了 React 开发中的复杂性问题、工具库更新、技术文章、会议回顾以及社区活动等内容。特别值得关注的是 Mario Brizic 的一篇挑衅性文章，讨论了 React 在构建现代 SPA 应用时可能带来的复杂性与混乱，引发了 Reddit 和 Hacker News 上的广泛讨论。此外，还包括 Vercel Ship 2025 会议的亮点回顾、新工具和框架的介绍，以及多篇关于 React 开发技巧的文章。

1. 主文章：React Still Feels.. Foolish, and No One is Talking About It?
• 作者 Mario Brizic 探讨了 React 在构建复杂 SPA 应用时的痛点，指出其灵活性可能导致代码混乱，强调这并非 React 独有问题。
• 该文在 React 社区内引发了激烈讨论，尤其是在 Reddit 和 Hacker News 上。
2. 简讯 (IN BRIEF)
• Reactylon：基于 Babylon.js 的 React 3D/扩展现实框架，新增展示页面。
• React Advanced London：11 月在伦敦举办的线上线下 React 活动。
• Anthropic 新功能：通过 Claude 构建和分享带有 React UI 的 AI 应用。
3. 会议回顾：Vercel Ship 2025 Recap
• 总结 Vercel 年度会议的最新公告，包括 AI SDK 更新、Fluid 计算选项、Vercel Sandbox、滚动发布功能和机器人检测等。
4. 技术文章
• 《Using useOptimistic to Make Your App Feel Instant》by Kent C. Dodds：介绍如何使用 useOptimistic 提升应用响应速度。
• 《A Study Guide to Data Fetching in React》by React Practice：React 数据获取的学习指南。
• 《Automating Frontend Accessibility with Storybook 9》by Dominic Nguyen：探讨如何利用 Storybook 9 自动化前端无障碍性测试。
5. 代码、工具与库
• Time Picker：基于 shadcn/ui 的日期/时间选择组件，简洁优雅。
• Tuono：React/Rust 全栈框架，结合 Next.js 风格与 Rust 后端开发。 #rust 【啊？6】
• react-xtermjs：为 React 应用添加 Xterm.js 终端体验。
• UI Builder 2.0：Figma 风格的可视化组件构建工具。
• AG Charts v12.0、Yet Another React Lightbox 3.24、Schedule-X 2.35、Ink 6.0.1 等工具和库的更新与介绍。
6. 深度内容
• 介绍了 Vercel 开发的开源字体 Geist，支持多语言和多种字重。 #font
• Josh Justice 关于在 React 中使用 MUI X Charts 创建高级折线图的教程。
• Neobrutalism：基于 shadcn/ui 的视觉组件库。
• 关于 React 应用样式设计的思考，作者支持 Tailwind 方案。
• 使用 Kamal 2 部署 Next.js 应用
• 使用 Framer Motion 创建 “Sticky” 搜索交互的教程
• 在最后介绍了编辑团队的其他技术通讯，如 Ruby Weekly、JavaScript Weekly、Node Weekly 等，覆盖多个技术领域。

author Peter Cooper

Reddit

From the programming community on Reddit: React Still Feels Insane And No One Is Talking About It

Posted by mbrizic - 408 votes and 321 comments

#优质博文 #前端 #tools #EPUB #开源 #rust
聊聊 Web 与 EPUB 的公式渲染问题

AI 摘要：本文深入分析了 Web 和 EPUB 环境下数学公式渲染的常见问题，如浏览器兼容性差、EPUB 阅读器限制（如不支持 JS/SVG）、字体对齐困难等。作者提出了一种基于 Typst 的解决方案 Gladest，强调其“通用性”、“便利性”和“兼容性”三大设计原则。文章详细剖析了排版中的核心问题（如基线对齐、字体参数差异），并解释了 Gladest 如何通过 Typst 的轻量化工具链和 Rust 的高性能实现高效渲染。此外，作者呼吁字体厂商提供更友好的 Web Font 支持以改善排版体验，并分享了 Gladest 在解决多系统单位不一致性（如 em 单位标准化）和边距调整上的技术细节。

1. Web 与 EPUB 公式渲染的痛点
• 数学公式在 Web 和 EPUB 中的渲染存在兼容性问题，尤其在 EPUB 环境中（如电子墨水屏设备）表现更差，缺乏 JavaScript 和 SVG 支持。
• 主流工具（如 MathML、MathJax、KaTeX ）在特定场景下存在局限性，如字体兼容性、无 JS 环境支持等。

2. Gladest 的设计目标与实现
• 通用性：统一不同场景（博客、EPUB）的公式渲染工具，减少工具链碎片化。
• 便利性：基于 Typst（Rust 生态）开发，避免 LaTeX 的复杂性和历史包袱，支持LaTeX语法兼容层（mitex）。
• 高性能：利用 Rust 多线程能力，渲染速度显著优于传统方案（如 GladTeX ）。

3. 排版对齐的核心挑战
• 字体与基线对齐：图文混排时需处理不同字体的基线、x 字高、大写高度等参数差异，CSS 现有属性难以完美解决。
• 跨系统单位统一：通过 em 单位协调 Typst 与 Web 的渲染尺寸，确保公式在不同分辨率设备下的清晰度。
• Typst 的边距问题：Typst 硬编码的边距需通过 CSS 反向调整（如margin: -0.455em）以避免布局异常。

4. 行业呼吁与解决方案
• 提倡字体厂商提供分块优化的 Web Font（如WOFF2格式），以改善跨平台渲染一致性，IBM Plex Sans CJK 字体为范例。
• 强调开发者需主动适配字体参数，确保垂直对齐的精准性。

5. 未来计划
• 完善 Gladest 的自定义字体功能，增强基础稳定性后扩展字体元信息解析能力。

author Losses Don

螺莉莉的数据中心

聊聊 Web 与 EPUB 的公式渲染问题 | 螺莉莉的数据中心

如果你曾经尝试写过有大量数学公式的博客文章，那我相信你一定因为数学公式渲染的问题而略微痛过。而如果你尝试在 EPUB 里面排大量数学公式，额……朋友，你现在还好吗……
如果你只是单纯想在浏览器里面把一个公式渲染出来，其实这并不难。一方面我们有
MathML 这样的标准，另外一方面像是 MathJax、KaTeX 这类渲染库都能把事情做好。但如果你稍微有那么一丢丢额外的追求，那么事情就会变得无比麻烦。
比如：Chromium 的 MathML 兼容性其实没你想象当中的好，Firefox 这边如果你把数学公…

#rust #开源 #tools
记得上一次看到类似的是 lint-md
mark 一下回头试试！

https://github.com/huacnlee/autocorrect
AutoCorrect 是一个基于 Rust 编写的工具，用于「自动纠正」或「检查并建议」文案，给 CJK（中文、日语、韩语）与英文混写的场景，补充正确的空格，纠正单词，同时尝试以安全的方式自动纠正标点符号等等。

GitHub

GitHub - huacnlee/autocorrect: A linter and formatter to help you to improve copywriting, correct spaces, words, and punctuations…

A linter and formatter to help you to improve copywriting, correct spaces, words, and punctuations between CJK (Chinese, Japanese, Korean). - huacnlee/autocorrect

#前端 #优质博文 #javascript #rust #wasm
Rust 正在吞噬 JavaScript
https://leerob.com/n/rust

AI 摘要：本文详细探讨了Rust语言如何凭借其速度、内存安全和高性能成为替代传统JavaScript工具（如Babel、Terser、Prettier等）的新选择。文章首先介绍了Rust独特的内存管理机制——内存所有权，通过编译时检查消除运行时错误，进而在底层系统开发中表现优异。随后讨论了Rust在业界和开源项目中的应用，如SWC、Deno、esbuild、Rome，以及NAPI与WebAssembly的结合，为前端工具性能带来了质的飞跃。同时，文中也指出了Rust学习曲线陡峭以及生态尚未完全成熟的现状，探讨了未来如何平衡易用性和极致性能，从而推动JavaScript工具链向更高效、更统一的方向演进。最后文章更新了2023年后涌现的新项目，展望Rust将持续主导前端构建工具的发展。

via Lee Robinson

Leerob

Rust is Eating JavaScript | Lee Robinson

Why is Rust being used to replace parts of the JavaScript web ecosystem like minification (Terser), transpilation (Babel), formatting (Prettier), bundling (webpack), linting (ESLint), and more?

#优质博文 #跨端 #rust #wasm
大前端：如何突破动态化容器的天花板？

最终我们获得了一个如上图的高性能、安全的动态化容器，可以以Wasm的方式支持原生级别的性能，也可以将JavaScript 的前端工程的性能提升一截。

从某个角度看，像是我们把RN用Rust重写了，添加了Wasm解释器的支持。但用熟悉WebView架构的视角看，也可以看作是一个WebEngine Lite，只是试图绘制暂时用的系统UI。

文章写的挺有意思的。

AI 摘要：美团金服大前端团队在动态化容器性能提升方面做出了重要进展，提出了新的容器解决方案 Recce。长期以来，动态化容器因其复杂性，往往牺牲性能，导致用户体验下降。团队指出，现有容器方案如 React Native 和 WebView 在性能上存在明显短板，特别是在大规模视图节点处理时。

Recce 通过优化逻辑解释器的执行效率和通信效率，使页面加载速度提升了300%。团队选用了 Wasm 作为主要解释器，并结合 Rust 语言构建高性能的UI框架，避免了传统 JavaScript 框架的性能瓶颈。此外，Recce 还保留了 React Native 的优良特性，利用系统 UI 框架来优化渲染过程。

via 掘金 美团技术团队

突然掉落群友邀请码： nasuCk_v0T

#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 290 期）：苹果头盔的最大问题

1. Web 终极拦截技巧（中文） 📓 本文介绍 Web 平台常见的拦截 HTTP 通信的方法，以及如何注入拦截代码。
2. 剖析 SSL 证书（英文） 📓 本文通俗地介绍，如何查看 HTTPS 证书的内容，以及证书各部分的简单含义。
3. 响应式视频播放器的 Web 组件（英文） 📓 一篇详细的教程，通过一个响应式视频播放器，教你怎么写 Web 组件（Web Components）。
4. 如何构建一个窃取一切的 Chrome 插件（英文） 📓 作者提醒大家注意，浏览器插件可以读取用户的所有信息，发到远程服务器，因此不要随便安装。她还提供了一个演示。如何无需用户察觉即可捕获包括浏览历史、屏幕截图、Cookies、键盘记录和地理位置在内的各种数据，
「Did you really scrutinize their permissions?」
5. Base32 编码解释（英文） 📓 本文详细解释 Base64、Base32、Base8 等等是如何编码实现的。 【挺有意思的】
6. 开发者需要知道 GPU 知识（英文） 📓 AI 大量使用 GPU 运算，本文介绍开发者需要知道的 GPU 知识。前半部分是概念，后半部分是 GPU 编程，可以只看前半部分。
7. TCPView 🧰 微软的官方工具，用来查看 Windows 系统所有 TCP 和 UDP 连接的详细信息。
8. FontMagic 🧰 字体工具软件，可以将字体文件的某个字形导出为 SVG 格式，还可以转化字体格式，支持 macOS 和 Windows。（@leibnizli 投稿）
9. uv 🧰 Rust 语言写的 Python 包管理器，速度非常快，可以替代 pip 和pip-tools。 #python #后端 #rust
10. Keep Screen On 🧰 打开这个网页，就可以让电脑屏幕保持常亮，对 PC、Mac、Android、iOS 均有效。 #趣站
11. background-erase.xyz 🧰 去除图片背景的免费网站，使用最新的删除图片背景的 AI 模型 RMBG-v1.4，所有计算都在本地完成，不用上传图片。（@janily 投稿）
12. browserscan.net 🧰 该网站检测浏览器指纹、IP 地址、WebRTC 泄露，DNS 泄露等信息。（@BrowserScan 投稿） 【有意思】
13. Localtunnel 🧰 一个 npm 软件包，为你的本地服务分配一个公网的 URL，使得公网可以访问这个本地服务。
14. SirTunnel 🧰 一个开源软件，只需要50行代码，就能建立一条隧道，将你的内网电脑可以被公网访问，这里有一篇教程。
「从本质上讲，它编写了 Caddy 的 API 脚本来动态添加和删除隧道。当您通过 SSH 连接到服务器时，您会调用该脚本，并且在 SSH 连接期间，服务器域的子域会通过 SSH 链接转发流量。」
【有无群友测评一下】

hughfenghen.github.io

Web 终极拦截技巧（全是骚操作） | 风痕 · 術&思

拦截的价值

> 计算机科学领域的任何问题都可以通过增加一个中间层来解决。 —— Butler Lampson

如果系统的控制权、代码完全被掌控，很容易添加中间层；
现实情况我们往往无法控制系统的所有环节，所以需要使用一些 “非常规”（拦截） 手段来增加中间层。

拦截的方法

拦截/覆写 浏览器 API

最常见的场景有通过拦截 console ...

#优质博文 #前端 #工程化 #rust
前端新玩具 - Oxlint发布: JavaScript linter, 速度快50-100倍

摘要: Oxlint 是由字节跳动开发的一个JavaScript linter，使用Rust编写，速度比ESLint快50-100倍。作为OXC工具集的一部分，它旨在捕获错误或无用的代码，提供超过200条规则，支持.eslintignore和ESLint注释禁用。Oxlint主打零配置开箱即用，增强了诊断功能，易于集成和调整。虽然当前还不支持插件系统，但已有计划整合流行插件规则。Oxlint在Shopify的应用中将75分钟的ESLint运行时间缩减到10秒，显示了其显著的性能优势。

via 微信公众号 前端充电宝

Weixin Official Accounts Platform

前端新玩具来了，速度快的惊人🤩

真快啊~

#优质博文 #前端 #wasm #rust
字节，不声不响发大教程：走进WebAssembly的世界
「对于 JavaScript、Python 等脚本语言来说，为了追求更高的性能，可以将性能热点模块通过 WebAssembly 来实现，从而获取高性能执行的收益。对于 Rust 开发者来说，利用语言的特性可以获取高性能和高安全性，但为了让开发者获得更低的开发门槛，可以编译为 WebAssembly 模块提供给类似 JavaScript、Python 等脚本语言使用，降低开发者门槛；对于 C++ 开发者来说，可以获得高性能」

juejin.cn

走进 WebAssembly 的世界 - 字节前端的专栏 - 掘金

走进 WebAssembly 的世界：本专栏从 WebAssembly 的基础入手，由浅入深的系统化介绍了 WebAssembly 的相关技术、底层设计原理、语言、库与工具链，并结合有代表性的实际业务场景，探讨其未来发展方向、发展趋势，同大家一起走入 WebAssembly 的世界。 - 掘金

#资源推荐 #优质博文 #阮一峰的科技周刊 #rust #rss

这期的周刊：科技爱好者周刊（第 246 期）：永不丢失的网络身份
Huntly：一款自托管的信息管理工具，可以订阅 RSS 和自动保存浏览过的网页，支持多维度的分类和搜索。 https://github.com/lcomplete/huntly

Comprehensive Rust:安卓团队编写的为期四天的 Rust 课程，从基本语法到高级主题，最后一天还会讲到 Rust 如何用于安卓开发。 https://google.github.io/comprehensive-rust/

#优质博文 #前端 #工程化 #rust
Rspack 是由 ByteDance Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具，拥有高性能、兼容 Webpack 生态、定制性强等多种优点
https://mp.weixin.qq.com/s/R-tjPrj2N2DKMO8_cPsp9Q

Weixin Official Accounts Platform

字节跳动自研 Web 构建工具 Rspack 正式发布

Rspack 是由 ByteDance Web Infra 团队孵化的基于 Rust 语言开发的构建工具。