#优质博文 #动画 #前端 #css
Partial Keyframes • Josh W. Comeau

AI 摘要：本文由 Josh W. Comeau 撰写，详细介绍了 CSS 关键帧动画中“部分关键帧（Partial Keyframes）”的技巧及其强大应用。通过省略关键帧的起点（from）或终点（to），动画可以动态继承元素的当前样式值，从而实现更灵活和可组合的动画效果。文章还探讨了如何将多个关键帧动画叠加以创造复杂效果，以及使用 CSS 变量在关键帧中实现动态值设置，进一步提升动画的灵活性。作者还分享了一个额外的技巧和即将推出的动画课程信息，适合对 CSS 动画感兴趣的前端开发者深入学习。

author Josh W. Comeau

Joshwcomeau

Partial Keyframes • Josh W. Comeau

CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our keyframe animations so much more reusable and dynamic! 🤯

#优质博文 #前端 #新特性 #javascript #css #chrome
Support foldable devices with the Viewport Segments API

AI 摘要：本文介绍了 Viewport Segments API 的功能与应用，该 API 从 Chrome 138 版本开始可用，支持开发者为可折叠设备优化界面。通过 JavaScript 或 CSS 访问视口逻辑分区的尺寸和位置，开发者可以为可折叠设备创建双窗格体验或避免内容跨折叠区域布局。文章还提及 API 的更新细节及演示案例，展示了如何利用该 API 提升用户体验。

1. API 简介与背景
• 介绍了 Viewport Segments API 的基本概念，解释了视口分区如何由硬件特性（如折叠或铰链）划分而成。
• 强调 API 的目标：帮助开发者将视口的不同区域视为逻辑上独立的区域，从而优化可折叠设备的用户界面。
2. 功能与应用场景
• 详细说明 API 的功能，支持通过 JavaScript 和 CSS 获取视口分区的尺寸和位置。
• 应用场景包括创建双窗格用户体验，以及避免内容布局跨折叠区域，提升用户体验。
3. API 更新与改进
• 提到自去年 Origin Trial 以来的两项主要变更：
a. JavaScript 属性 segments 现位于 window.viewport 对象中，而非之前的 window.visualViewport。
b. 当设备未折叠或不可折叠时，segments 属性行为与 CSS 行为对齐，返回包含单个分区（代表整个视口）的数组。
4. 演示与实践
• 提供了可折叠设备上 API 的演示案例，展示网页如何沿铰链分割成两个逻辑分区。
• 鼓励开发者通过演示了解 API 的实际效果。
5. 发布时间与版本支持
• API 从 Chrome 138 版本开始正式可用，发布时间为 2025 年 6 月 9 日。

author Alexis Menard

Chrome for Developers

Support foldable devices with the Viewport Segments API  |  Blog  |  Chrome for Developers

The Viewport Segments API has shipped with minor changes to the origin trial covered in this blog post.

#优质博文 #前端 #动画 #css #svg
SVG Displacement Filtering 实现 Liquid Metal，性能很寄的……不希望以后到处都是这个效果（唉那有点恐怖了） 感觉展示性的网站用用还行。
A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

Codepen

Mike Bespalov (@bbssppllvv):
It’s 3AM and I just recreated @Apple Liquid Metal right in the browser. No JavaScript. No WebGL. Just raw HTML + CSS.

Let me know if you want the code

https://fixupx.com/bbssppllvv/status/1932325303273271727

cosine - 前端人の日常频道

#优质博文 #前端 #css #WebGL #three #GLSL #demo #动画 coooool～ How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、…

#优质博文 #前端 #shaders #css #WebGL #course
从这个里面又学到很多，加上之前看到的，整理一下这几个 WebGL 学习资源推荐www

1. The Book of Shaders - 一本由 Patricio Gonzalez Vivo 和 Jen Lowe 编写的关于片段着色器（Fragment Shaders）的循序渐进指南，旨在帮助读者理解和掌握这一抽象而复杂的图形编程领域。
2. Three.js 之 1 Animation 动画 掘金早期难得的很高质量的 three 学习笔记一个系列，是 Three.js Journey（$95 终身访问）的学习笔记。
3. Discover three.js 由 three.js 核心开发者编写的完整教程，从基础到高级的系统性学习路径、包含实时代码编辑器、提供清晰的 2D 图表解释概念。
4. WebGL Academy 交互式 WebGL 和 3D 算法学习，在线 IDE 环境，支持语法高亮，涵盖从基础到高级的 WebGL 概念，包含物理模拟和高级渲染技术。
5. SB Code R3F Tutorials 内容涵盖 React Three Fiber 和 Drei 库的基础知识，逐步讲解相关概念，帮助学习者理解如何构建自己的项目并参与 React 生态系统。
6. WebGL 理论基础 & WebGL2 理论基础 从 WebGL 的基本理论讲起。

The Book of Shaders

Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

#优质博文 #前端 #css #WebGL #three #GLSL #demo #动画
coooool～
How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL

AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、平滑融合、噪声纹理添加以及鼠标互动的实现，适合对 WebGL 和着色器编程感兴趣的开发者学习和实践。

概览：介绍了演示的整体结构和构建步骤，包括全屏平面的设置、光线步进渲染球体、从球体到 metaball 的平滑过渡、添加噪声以获得液滴外观，以及通过鼠标移动模拟拉伸效果。

1. 全屏平面设置：创建覆盖整个视口的全屏平面，通过 Three.js 设置几何体和材质，并传递画布大小的 uniform 变量到着色器。
2. 光线步进渲染球体：在片段着色器中使用光线步进技术渲染球体，详细解释了光线步进的步骤、SDF（有符号距离函数）的概念，以及如何通过代码实现两个重叠球体的渲染。
3. 从球体到 Metaball：通过 smoothMin 函数平滑融合多个球体的距离值，避免硬边缘，创造出有机融合的 metaball 效果，并通过参数控制融合平滑度。
4. 添加噪声以获得液滴外观：利用 3D 值噪声技术对表面进行扰动，结合反射向量和时间变量生成液滴纹理，并通过后处理增强玻璃般的半透明效果。
5. 通过鼠标移动模拟拉伸液滴：通过记录鼠标轨迹并沿轨迹放置多个球体，实现液滴的拉伸和弹性运动效果，增强互动性。

author Yuki Kojima

#优质博文 #AI
我对各种 AI Coding Agent 工具的看法
author xxchan

XX's Blog

我对各种 AI Coding Agent 工具的看法

Agentic coding 或许是当下最火（最卷）的方向，一万家公司在做。并且隔三差五就在社交媒体上看到又有什么新工具、谁家又出什么新功能了（又 blow 谁的 mind 了，又颠覆谁谁了）。这还挺让人困惑的，我发现很多人会问 “这些 AI coding 工具真有那么牛吗？”，或者 “XX 和 YY 到底有啥区别”。不少人自己试用了一下，感觉不过如此，于是迅速下头。同时，我还发现还有不少程序员连 Cursor 都没用过。

#碎碎念
女装照骗！（x）
第一次自己买的小裙子和随便买的假发，好难打理，先试试，等妹妹来陪我玩（嘿嘿嘿）
以免丑到大伙打个遮罩（
哎呀这么一看真的拍的好草率

#碎碎念 #优质播客 #前端
听了第 0 期挺有意思的喵，名字取得好啊~

https://fixupx.com/Shenqingchuan/status/1931638678096662777

技术新鲜事不停，畅聊趣闻无止尽 ~
川 & 智@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

FixupX

River · 沈青川 (@Shenqingchuan)

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

小宇宙：https://www.xiaoyuzhoufm.com/episode/684535da6dbe9284e75730c7
Spotify：https://open.spotify.com/show/7DqNJtwKpi2mDgSJnE397w
哔哩哔哩：https://www.bilibili.com/video/BV1T3T9zcENG/…

#优质博文 #前端 #react #RSC #javascript #工程化
讲 RSC 讲的最明白的一集，写的太牛了。
How Imports Work in RSC

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 将应用视为跨两台计算机的单一程序，拥有独立模块系统、毒丸保护和交互之门，开发者只需处理构建错误即可。

author Dan Abramov

overreacted.io

How Imports Work in RSC — overreacted

A layered module system.

#优质博文 #前端 #css #course
Better CSS Shapes Using shape() — Part 3: Curves

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 形状。

author Temani Afif

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.

https://www.linkedin.com/pulse/kernel-mind-moon-hee-lee-miwze/
推荐一个系列的文章，Linux 核心开发人员之一的写的。主要是探索 Linux 内核设计的很多思路。推荐大家阅读

Linkedin

The Kernel in the Mind

Understanding Linux Kernel Before Code This isn’t a guide to writing kernel code. It’s an effort to understand how the Linux kernel thinks.

#typescript #新动态
https://fixupx.com/mattpocockuk/status/1931305701676110169

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

FixupX

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

#优质博文 #前端 #浏览器拓展 #插件 #新动态
What's happening in Chrome Extensions, June 2025

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。

author Oliver Dunk

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.

#优质博文 #前端 #浏览器扩展 #插件
Intercepting Network Requests in Chrome Extensions

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

author rxliuli

Rxliuli

Intercepting Network Requests in Chrome Extensions | rxliuli

While implementing the Chrome extension Mass Block Twitter, I needed to block Twitter spam users in bulk. Twitter's request headers contain authentication information that appears to be dynamically generated via JavaScript. Rather than investigating how Twitter…

#优质博文 #前端 #javascript #新动态
JavaScript Weekly#739

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 应用添加节点界面）。

Rxliuli

Intercepting Network Requests in Chrome Extensions | rxliuli

While implementing the Chrome extension Mass Block Twitter, I needed to block Twitter spam users in bulk. Twitter's request headers contain authentication information that appears to be dynamically generated via JavaScript. Rather than investigating how Twitter…

#优质博文 #前端 #react #javascript #新动态
Awesome JavaScript Weekly - Issue 472, Jun 05, 2025 | LibHunt

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!