技术新鲜事不停，畅聊趣闻无止尽 ~
川 & 智@zhizijun 播客真的开播了！
欢迎收听 EventLoop · 事件循环 播客节目的第 0 期！

小宇宙：https://www.xiaoyuzhoufm.com/episode/684535da6dbe9284e75730c7
Spotify：https://open.spotify.com/show/7DqNJtwKpi2mDgSJnE397w
哔哩哔哩：https://www.bilibili.com/video/av114646887503001?p=1
YouTube：https://youtube.com/watch?v=IvzxUmDzH2w

AI 摘要：本文深入探讨了 React Server Components (RSC) 中导入（import）和导出（export）机制的运作方式，重点分析了如何通过 'use client' 和 'use server' 指令在前后端环境中划分代码。作者从模块系统的基本原理出发，解释了 JavaScript 模块的单例特性及其在单一环境中的运作方式，随后扩展到前后端代码共享的挑战和解决方案，提出了 'server-only' 和 'client-only' 的“毒丸”机制来防止代码跨环境误用，并通过 RSC 的指令机制实现前后端模块系统的交互。文章旨在帮助读者构建对 RSC 的准确心智模型，同时也适用于对模块系统感兴趣的开发者。

什么是模块系统？
• 模块系统的定义：模块系统是一套规则，用于将程序拆分为文件，控制代码可见性，并将代码链接为可执行的单一程序。
• 人类需求：模块帮助开发者将复杂程序拆分为可管理的部分，限制代码可见性以保护实现细节，并促进代码复用。
• 计算机执行：计算机需要在内存中“展开”模块代码以执行程序，模块系统弥合了人类编写代码和计算机执行之间的差距。
• JavaScript 模块：通过 import 和 export 关键字实现模块化。

导入就像复制粘贴……但又不完全是
• 基本直觉：JavaScript 的模块系统设计使得 import 和 export 的效果类似于复制粘贴，最终程序在内存中展开为单一代码块。
• 与 C 语言的 #include 对比：C 的 #include 确实是直接复制粘贴，可能导致命名冲突和重复包含问题，而现代模块系统（如 JavaScript）通过自动处理避免这些问题。

JavaScript 模块是单例
• 单例特性：每个模块无论被导入多少次，其代码只执行一次，模块系统通过缓存已加载模块的导出值来实现这一点。
• 优势：避免代码重复导致输出体积膨胀；模块可保持私有状态；简化心智模型，每个模块视为单一实例。
• 实现机制：模块系统通常使用 Map 记录已加载模块及其导出值，例如在 Node.js、Webpack 等工具中均有类似逻辑。

一个程序，一个计算机
• 单一环境设计：大多数 JavaScript 程序是为单一计算机（如浏览器或 Node.js 服务器）设计的，模块系统支持从入口文件开始加载并缓存模块。
• 导入效果：导入模块时，代码被“带入”当前程序，模块保持单例特性，避免重复执行。

两个程序，两个计算机
• 前后端分离：传统上，前端和后端是运行在不同计算机上的两个独立程序，分别负责交互逻辑和 HTML/API 服务。
• 模块系统独立性：前后端各有独立的模块系统，共享代码（如 a.js）会在两个环境中分别加载，实质上是“各自的版本”。

构建失败是好事
• 代码复用风险：共享代码可能引入只适用于一侧的 API（如后端的 fs），导致另一侧构建失败。
• 构建失败的价值：构建失败提供早期反馈，迫使开发者解决代码复用问题，可选择调整代码位置或依赖关系。

仅限服务器端代码
• 问题场景：若共享代码引入服务器端敏感信息（如密钥），可能无构建错误地泄露到前端。
• 解决方案：引入 server-only “毒丸”包，标记不可进入前端的代码，前端构建时遇到则失败，强制开发者修复。
• 传递性：只需在源头文件标记 server-only，依赖链会自动传播此限制。

仅限客户端代码
• 类似机制：引入 client-only “毒丸”，防止特定前端代码（如 DOM 操作）被后端引入，构建失败以避免运行时错误。
• 细粒度控制：如 React 通过条件导出机制将 useState 等 API 标记为 client-only。

一个程序，两个计算机（RSC 视角）
• 前后端协作问题：传统方式依赖约定同步前后端代码，缺乏语法支持，易出错。
• RSC 创新：use client 指令允许后端引用前端代码而不将其引入后端，实质是“打开前端之门”，生成 <script> 标签在前端恢复；use server 则相反。
• 指令作用：非指定代码运行位置，而是创建模块系统间的“门”，用于数据传递而非代码移动。

结论
• RSC 核心：承认前后端模块系统独立性，共享代码在两侧分别存在。
• 两大机制：server-only 和 client-only 防止代码误入错误环境；use client 和 use server 提供跨环境引用和数据传递的“门”。
• 最终模型：RSC 将应用视为跨两台计算机的单一程序，拥有独立模块系统、毒丸保护和交互之门，开发者只需处理构建错误即可。

overreacted.io

How Imports Work in RSC — overreacted

A layered module system.

AI 摘要：本文是关于 CSS shape() 函数系列教程的第三部分，重点介绍了 curve 命令的使用及其在创建复杂 CSS 形状中的重要性。作者通过详细的示例和对比，解释了 curve 命令如何通过贝塞尔曲线控制点来绘制曲线，并与 arc 命令进行了对比，探讨了两者的适用场景。此外，文章还展示了如何利用 curve 命令创建不规则形状的圆角效果，包括倾斜边缘、箭头形状和多边形等复杂图形，并提供了实用的代码和技巧，帮助读者快速上手。

1. 系列背景与概述
本文是 CSS shape() 函数系列的第三部分，前两部分已介绍线条 (lines) 和弧线 (arcs)，本部分聚焦于曲线 (curves)，强调 curve 命令是掌握 shape() 函数全功能的关键。

2. Curve 命令详解
• 介绍了 curve 命令的基本概念，即通过指定控制点在两点间绘制贝塞尔曲线，可分为二次曲线（一个控制点）和三次曲线（两个控制点）。
• 简化了贝塞尔曲线的复杂理论，重点放在实用性上，避免深入数学细节，鼓励通过示例学习。
• 提供了 curve 命令的语法结构，例如 clip-path: shape(from Xa Ya, curve to Xb Yb with Xc Yc)，并解释了控制点的相对与绝对坐标的使用。

3. Arc 与 Curve 命令对比
• 对比了 arc 和 curve 命令在创建圆角时的异同，指出 arc 命令更适合规则圆弧，而 curve 命令适用于更灵活的曲线效果。
• 通过具体代码和图形示例，展示了两种命令在同一形状上的不同效果，帮助读者理解选择依据。
• 强调选择命令时的灵活性，建议优先尝试 arc，若不适用再转向 curve。

4. Curve 命令的实用案例
• 倾斜边缘 (Slanted Edge)：展示了如何从直角矩形转换为带有圆角倾斜边缘的形状，详细讲解了使用 curve 命令替换 line 命令的步骤，并通过 CSS 变量简化复杂计算。
• 箭头形状 (Arrow-shaped Box)：通过三个圆角的箭头形状示例，说明了 curve 命令在多点圆角设计中的应用，强调即使不擅长数学，也可以通过试错法调整坐标。
• 圆角多边形 (Rounded Polygons)：介绍了如何利用 curve 命令创建圆角多边形（如五边形、六边形），并结合 Sass 和 CSS 变量实现可控性和动画效果，同时提供了在线生成工具供参考。

5. 结论与后续资源
• 总结了 curve 命令的潜力及其在复杂形状设计中的作用，承认代码复杂性，但强调通过作者提供的在线资源和工具可轻松获取代码。
• 推荐了进一步学习资源，如作者在 Frontend Masters 上的文章，涉及使用 curve 命令创建 blob 形状。

CSS-Tricks

Better CSS Shapes Using shape() — Part 3: Curves | CSS-Tricks

This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.

Matt Pocock (@mattpocockuk):
tsc --init is finally getting an upgrade

Happy to see it largely resembles my tsconfig cheat sheet, but with some extra goodies I might need to steal

https://github.com/microsoft/TypeScript/pull/61813

AI 摘要：本文是 Chrome 开发者博客于 2025 年 6 月发布的一篇关于 Chrome 扩展程序最新动态的综述，涵盖了过去几个月 Chrome 网上应用店和扩展平台的重要更新。文章详细介绍了 Google I/O 大会上关于 Chrome 扩展的新功能和未来规划、用户脚本 API 的改进、提交审核流程优化、安全性提升的验证上传功能、测试账户凭据支持、政策更新、功能弃用、即将推出的特性以及社区活动和视频内容。通过这些更新，Chrome 致力于提升开发者体验和用户安全性，同时推动跨浏览器扩展的兼容性。

1. 亮点
• Google I/O：介绍了产品经理在大会上分享的 Chrome 扩展和网上应用店的最新进展，以及与 Gemini 结合的未来潜力，包含了多个相关主题的演讲视频播放列表，并邀请开发者参与班加罗尔和柏林的活动。
• userScripts.execute 方法：用户脚本 API 允许扩展在特定页面上运行用户脚本，新方法支持随时执行脚本，而无需提前注册，提升了灵活性。
• 取消审核：开发者可取消待审核的扩展提交并立即提交新版本，优化了提交流程。
• 验证 CRX 上传：引入了私钥签名机制，确保只有持有私钥的人能上传新版本，增强了账户和发布流程的安全性。
• 测试账户凭据：开发者可在开发者仪表板中提供测试指令和凭据，帮助审核团队评估扩展功能，尤其是在申请特色徽章时。
• 政策更新：更新了 Chrome 网上应用商店的政策，包括一般性更新和联属广告政策调整。

2. 功能弃用
• 移除 --load-extension 标志：Chrome 137 版本将移除该命令行标志，因其常被用于加载恶意软件；同时提供了测试替代方案，并改进了 Puppeteer 等工具。

3. 即将推出的功能
• 用户脚本 API 开关变更：针对用户需启用开发者模式和 API 可用性检测的反馈，计划引入新开关以简化启用流程。

4. 社区更新
• WECG 三月聚会：在柏林 Mozilla 办公室与 W3C WebExtensions 社区小组成员讨论了平台未来发展和跨浏览器兼容性。
• Svelte 伦敦演讲：Oliver Turner 分享了构建浏览器扩展的经验和技巧，适合新手和资深开发者。

5. 新视频
• 扩展很酷：Patrick 发布新视频，介绍各种用户可用的扩展类型。
• 打地鼠游戏：Oliver 制作并分享了一个打地鼠游戏 demo 的构建过程视频。
• 新扩展菜单：展示了 Chrome 实验性新扩展菜单及相关新 API。

Chrome for Developers

What's happening in Chrome Extensions, June 2025  |  Blog  |  Chrome for Developers

An overview of the recent changes in Chrome Extensions, plus exciting upcoming extensions features developers can look forward to.

AI 摘要：本文详细介绍了作者在开发 Chrome 扩展程序时，如何通过自定义实现来拦截网络请求（包括 fetch 和 XHR），以满足特定需求（如批量屏蔽 Twitter 垃圾用户）。作者分析了现有库的不足，提出了自己的设计需求，并基于类似 Hono 中间件的洋葱模型，设计并实现了一个简洁而强大的拦截器 API。文章从动机、设计到具体实现，逐步讲解了如何覆盖原生 fetch 和 XHR 方法以实现请求和响应的拦截与修改，最终将成果发布为 npm 包

AI 摘要：本期涵盖了 JavaScript 及前端开发领域的最新动态。内容包括 Rolldown-Vite 的发布，这是一个基于 Rust 的快速 JavaScript 打包工具；TC39 会议上多项 ECMAScript 提案的进展；以及多个工具和框架的更新，如 Babel 8 Beta、ESLint v9.28.0 等。此外，还包括针对 JavaScript 开发者的 Go 语言入门指南、Svelte Summit 2025 的演讲视频等资源。本期内容虽简短，但信息量丰富，旨在为读者提供最新的技术资讯和学习资源。

1. 社区动态
• Rolldown-Vite：介绍了一个基于 Rust 开发的快速 JavaScript 打包工具 Rolldown，旨在与 Vite 构建工具结合使用，已有早期用户反馈构建时间大幅缩短。
• TC39 会议进展：报道了 ECMAScript 规范委员会最新会议成果，Array.fromAsync、Error.isError 等提案进入 Stage 4 阶段。
• WebStatus.dev 更新：Google 的 Web 平台状态网站近期更新，提供了更多数据和更深入的洞察。
• 简讯：React Native 团队将专注于新架构，SQLite-JS 允许使用 JavaScript 编写自定义 SQLite 函数，CSS 2025 状态调查现已开放。

2. 工具与版本发布
• Babel 8 Beta：完成所有计划中的重大变更。
• ESLint v9.28.0：核心规则新增对 TypeScript 语法的支持。
• AngularFire 20.0：支持最新 Angular 20，与 Firebase 集成。
• 其他更新：Vitest 3.2、Astro 5.9、Ionic 8.6、Prisma 6.9.0。

3. 文章与视频资源
• JavaScript 开发者 Go 语言指南：为 JavaScript 开发者提供 Go 语言入门知识，聚焦后端开发。
• document.currentScript 的实用性：探讨了一个被忽视的浏览器 JavaScript API 的实际用途。
• Svelte Summit 2025 演讲视频：包含 12 个演讲视频，其中 Rich Harris 的“What Svelte Promises”为重点内容。
• 可选链提高 JavaScript 可靠性、React 服务器组件的导入机制、Chrome 扩展网络请求拦截和高效 Monorepo 的构建方法。

4. 代码与工具
• php-node：一个 Node.js 原生模块，支持在 Node 环境中运行 PHP 应用，适用于遗留应用迁移或混合开发。
• Storybook 9：前端 UI 组件开发工具更新，新增交互、视觉和无障碍测试功能。
• Beachpatrol：一个 CLI 工具，基于 Playwright 实现日常浏览器自动化。
• 其他工具：Starry Night 3.8（类似 GitHub 的语法高亮）、ngx-vflow 1.9（为 Angular 应用添加节点界面）。

AI 摘要：本期内容包括 Rolldown-Vite 的发布、JavaScript 相关技术文章（如 Progressive JSON 和无构建客户端岛）、Go 语言指南、HTML 流式传输技术等，同时推荐了热门库和项目（如 snapDOM 和 react-md-editor）

1. 热门新闻与文章
• VoidZero announces Rolldown-Vite：VoidZero 发布了 Rolldown-Vite
• Is It JavaScript?：Jim Nielsen 的博客探讨了“It’s Just JavaScript”这一常见说法的背后含义，质疑是否所有以 .js 为扩展名的代码都能简单地归类为 JavaScript
• Progressive JSON — overreacted：Dan Abramov 的文章探讨了传统 JSON 数据传输的局限性，并提出了“Progressive JSON”的创新概念，即通过广度优先的分块流式传输数据，使客户端能够逐步处理未完成的数据，从而提升用户体验和性能。
• document.currentScript is more useful than I thought：文章介绍了 document.currentScript 的实用性，展示了它在处理 <script> 元素配置属性和其他方面的潜力。
• Exploring "No-Build Client Islands": A (New) JavaScript Pattern for SPAs：介绍了“No-Build Client Islands”这一架构理念，旨在帮助开发者构建无需构建工具、稳定持久的交互式单页应用（SPA）。通过使用 Preact、HTM 和 Page.js 等轻量级工具，结合原生 JavaScript 模块，开发者可以摆脱复杂框架更新和构建链的困扰，实现快速、反应式的 Web 应用，同时保持与任何后端的灵活集成。
• A JavaScript Developer's Guide to Go：为 JavaScript 开发者提供学习和使用 Go 语言的指南，帮助跨语言开发。
• Streaming HTML out of order without JavaScript：介绍了一种无需 JavaScript 即可实现 HTML 乱序流式传输的技术，利用 Shadow DOM 和 Declarative Shadow DOM (DSD) 结合流式响应服务器和模板语言，实现在浏览器中按正确顺序渲染乱序发送的 HTML 片段。
• Experimenting with no-build Web Applications：探讨无构建 Web 应用的实验，关注简化开发流程的可能性。
• One Roundtrip Per Navigation — overreacted：Dan Abramov 深入探讨了网页导航中数据加载的效率问题，分析了从传统 HTML 服务端渲染到现代客户端渲染中数据请求的演变。

2. Upcoming Conferences（即将举行的会议）
• JSNation 2025：作为年度主要 JavaScript 会议，将于 6 月 12 日和 16 日在阿姆斯特丹及线上举行，拥有 50+ 位演讲者，票价 €414（优惠码 LIBHUNT10 享 10% 折扣）。
• React Summit 2025：全球最大的 React 会议，将于 6 月 13 日和 17 日在阿姆斯特丹及线上举行，早鸟票已开售，票价 €504（优惠码 LIBHUNT10 享 10% 折扣）。

3. 热门库与项目
• snapDOM：一个快速且准确地将 HTML 元素捕获为图像的工具。
• Chain-of-Recursive-Thoughts：通过让 AI 自我辩论提升思考能力，效果显著。
• ws4kp：一个基于 Web 的 WeatherStar 4000 项目，包含天气频道和显示功能。
• react-md-editor：一个 React.js markdown 编辑器组件，适用于 UI 开发。
• Youtube2Webpage：将 YouTube 视频内容转为网页文本，便于学习。

void(0)

Announcing Rolldown-Vite

We introduce Rolldown-Vite, a drop-in replacement for Vite that leverages the power of Rolldown for faster builds and reduced memory usage. Try it out today!

今天是我35岁的生日
想着好歹挑首歌翻唱来纪念一下
选了很多歌
最后还是放不下这首
于是就唱了

也将这首歌献给写出这首歌的人
愿这歌声 能让你坚强 朋友朋友好朋友

假如给你一张100万的支票，没有选题限制，你可以用这张支票和你的伙伴前往任何地方，结交来自世界各地的朋友，你会想去哪里？这一次我们的编导怀谷，拿上这100万带你走进百万支票系列的第一站——巴厘岛数字游民。如果你喜欢这期视频，请多多支持我们，并把视频分享给你的朋友们一起看看！