#优质博文 #前端 #Vite #Rolldown #工程化 #新动态
What’s New in ViteLand: January 2026 Recap
VoidZero 2026 年 1 月回顾

1. 品牌与设计统一（Unified Design）
• 实现了 VoidZero 旗下所有项目（Vite, Vitest, Rolldown, Oxc）的视觉身份统一，发布了全新的官网和 Logo。
• 更新了 Vite 的启动模板（Starter Templates），将新品牌标识内置其中。
• 强调了工具链的深度集成：Vite 8 在底层直接使用 Rolldown 和 Oxc，实现了一致的开发者体验。

2. 核心项目进展（Project Updates）
• Vite：自 2020 年发布以来，累计下载量超过 30 亿次；React 服务端组件（React Server Components, RSC）插件进行了优化，以支持 TanStack Start 等框架。
• Vitest：启动 4.1 测试版（Beta），引入测试标签（Test Tags）功能，并支持通过禁用 viteModuleRunner 选项在脱离 Vite 的情况下运行。
• Rolldown：正式达成候选发布版（Release Candidate, RC）里程碑，API 进入稳定阶段；推出“Lazy Barrel Optimization”，在 AntDesign 等场景下可减少 92% 的模块编译，提速 2 倍。
• Oxc：Oxlint 支持 oxlint.config.ts 动态配置；Oxfmt 实现了与 Prettier 100% 的一致性（Conformance），并新增了 Tailwind CSS 类名排序功能。

3. 社区动态与生态（Community & Events）
• 榜单表现：在 2025 JavaScript Rising Stars 榜单中，Vite、Oxc、Rolldown 和 tsdown 均名列前茅。
• 生态迁移：Hugging Face、Turborepo 和 Lichess 等知名项目宣布从 ESLint/Prettier 迁移至 Oxlint/Oxfmt。
• 周边工具：社区推出了基于 Oxc 的代码体积优化工具 jsshaker 以及 Oxlint 的终端用户界面工具 oxlint-tui。

void(0)

What’s New in ViteLand: January 2026 Recap

Our January 2026 recap features the unified redesign across VoidZero, Vite, Vitest, Rolldown, and Oxc websites, plus updates across all projects and community highlights.

#优质博文 #WebGL #GLSL #前端 #设计 #趣站
重なるレイヤーに色が溶け出すようなエフェクトを組み合わせた Matthew Pothier さんのポートフォリオサイト：介绍了一位电影摄影师极简且具有独特 WebGL 色彩流动效果的个人作品集网站。

站点地址：Matthew Pothier-Cinematographer

#优质博文 #tools
互联网档案馆发布插件，解决 40% 的互联网死链问题 - 小众软件：互联网档案馆（Internet Archive）推出了 WordPress 插件 Link Fixer，旨在解决互联网日益严重的“链接腐化”（Link Rot）问题。该插件通过自动检测失效的 URL（如 404 错误），并引导用户访问 Wayback Machine 中存储的历史网页快照，据称能修复约 40% 的死链。

居然是 WordPress 插件（

小众软件

互联网档案馆发布插件，解决40%的互联网死链问题 - 小众软件

互联网档案馆（Internet Archive）与 WordPress 母公司 Automattic 推出 WordPress 插件 Link Fixer，用来对抗“链接腐烂”：文章外链随时间失效、变成 404。皮尤研究中心统计，2013 年的链接到 2024 年近 40% 已不可用。

#demo #前端 #WebGL #Shader
reczko_konrad/1985296691331809574
酷到没边了！前端梦想的样子（x）
会弹弹弹的滑动条，利用 TypeGPU 0.8 打造的 Q 弹丝滑的 Jelly Slider！Shader 直接用 TS 编写。

在线体验 Jelly Slider Demo

Ever since I first saw this I wanted to try implementing it in TypeGPU, and I finally got around to it while testing the new 0.8 release.

You can try out the Jelly Slider here:
https://docs.swmansion.com/TypeGPU/examples/#example=rendering--jelly-slider

Had a lot of fun brainstorming optimisations with @iwoplaza and the team, and it should run well on most modern devices.

Built entirely with TypeGPU, no extra libraries, with all shaders written in TypeScript. The prototyping speed with features like console.log on the GPU and “bindless” resources made the process really smooth.

#Newsletter #前端 #周刊更新
周刊第 26 期！这周给博客加了很多新功能好爽www
给我的博客新增了以前的 shoka 语法兼容和歌单版块，都来看我的歌单！！
FE Bits Vol.26 | Gatsby 支持 React 19，Rspress 2.0 发布

#codepen #demo #CSS #前端
不规则网格上带有凹面圆角的卡片

“卡片和按钮之间的缝隙实现了真正的透明效果。没有尖角，全部都是圆角。除了 .jpg 格式的卡片背景图外，没有其他图片。卡片形状会根据按钮的大小和形状进行调整——您可以尝试只更改按钮元素的字体大小来查看效果。这不需要任何 JavaScript 代码——一切都归功于 CSS 子网格的神奇功能！”

author Ana Tudor
source

#碎碎念
整点 steam deck 笑话

#tools #语音合成 #TTS #AI #开源
jamiepine/voicebox 一款由 Qwen3-TTS 驱动的开源、本地优先语音克隆与合成工具

Voicebox 是一款功能强大的开源语音合成工具，被定位为 ElevenLabs 的本地化替代方案。它允许用户在本地机器上进行高保真声音克隆和语音生成，无需依赖云端服务，从而确保数据隐私。该工具集成了类似数字音频工作站（DAW）的多轨道编辑器，支持多角色对话混音和 API 扩展，并在 Apple Silicon 设备上通过 MLX (Machine Learning eXchange) 框架实现了极速的硬件加速推理。

GitHub

GitHub - jamiepine/voicebox: The open-source voice synthesis studio powered by Qwen3-TTS.

The open-source voice synthesis studio powered by Qwen3-TTS. - jamiepine/voicebox

cosine - 前端人の日常频道

#碎碎念 #折腾 这周把心心念念的博客歌单和播放器加上了，向全世界安利山山~ 最近做了很多更新，为 astro-koharu 主题添加了之前 Hexo Shoka 主题的 Markdown 扩展语法兼容支持，可在这里查看全部新增的语法演示：Shoka 主题 Markdown 语法演示 然后增加音乐播放器和歌单页面，都可以开关～ 一点一点变成我想要的样子了～ Release v2.6.0 · cosZone/astro-koharu · GitHub 歌单 | cosine = 余弦の博客 = WA 的一声就哭了

#碎碎念 #折腾
and 这周给 Moe Copy AI v0.3.5 新增了完整的 Prompt Template 管理功能，支持预设模版和自定义模版。之前还添加了深色模式！（是的没错都是我自用的功能）
https://moe.cosine.ren/docs/changelog

#优质博文 #前端 #CSS #锚点定位 #course
Drawing Connections with CSS Anchor Positioning - Roland Franke
锚点定位真好玩儿吧：在无需 JavaScript 的情况下实现 UI 元素（如评论与其回复）之间的视觉连线。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

• 核心挑战： 在 CSS 中视觉化连接相关元素（如评论线、Tooltip 工具提示）通常很棘手，传统方案往往依赖 JavaScript 计算、额外的标签或不稳固的布局假设。
• 锚点定位机制：
• 使用 anchor-name (锚点名称) 为一个元素命名作为参考点。
• 使用 anchor-scope (锚点作用域) 限制锚点名称的影响范围，确保组件的独立性。
• 在另一个元素中使用 anchor() (锚点函数) 获取参考元素的边界位置（如 start, end, center）。
• 代码实现：
• 通过为 .comment 和 .reply 定义锚点名，在回复的 ::after 伪元素中利用 inset 属性引用这些锚点，从而精确绘制连接线。
• 结合 Logical Properties (逻辑属性) 如 inset-block-start，使布局能够自适应不同的语言和书写方向。
• 技术优势：
• 无需 JavaScript： 减少了脚本负担，提升了性能。
• 布局感知： 当内容增长或容器变动时，连接线会自动更新位置。
• 代码简洁： 减少了冗余的 Wrapper (包装) 元素。
• 浏览器兼容性： 目前处于 Baseline: Newly available (基线：新近可用) 阶段，主要在最新版本的 Chromium 系浏览器中得到支持，建议作为 Progressive Enhancement (渐进增强) 使用。

author Roland Franke

Roland Franke - Frontend Developer

Drawing Connections with CSS Anchor Positioning - Roland Franke

A practical exploration of CSS Anchor Positioning and the anchor() function to visually connect related elements without extra markup.

#优质博文 #前端 #CSS #JavaScript #新特性 #Chrome
New to the web platform in January
汇总了 2026 年 1 月 Web 平台的重大进展，重点介绍了 Chrome 144 和 Firefox 147 稳定版的发布。其中，CSS 锚点定位 (CSS Anchor Positioning) 和 Navigation API 随着 Firefox 的支持正式达到 Baseline Newly Available 状态。此外，Chrome 144 引入了期待已久的 Temporal API、声明式的 <geolocation> 元素以及用于自定义页内搜索样式的 ::search-text 伪元素

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 稳定版浏览器发布（Stable browser releases）
• Baseline 状态更新：随着 Firefox 147 的发布，CSS 锚点定位 (CSS Anchor Positioning) 和 Navigation API 现已在所有主要引擎中可用，正式进入 Baseline 阶段。
• CSS 锚点定位 (CSS Anchor Positioning)：允许元素相对于“锚点”元素进行定位，适用于工具提示 (Tooltips)、菜单和弹出层。
• Navigation API：提供了一种现代化的方式来启动、拦截和管理应用程序中的导航，是单页应用 (SPA) 的核心增强。
• Temporal API：Chrome 144 引入了这一重磅 JavaScript API，作为 Date 对象的现代替代方案，提供更强大的日期和时间处理功能。
• 声明式 <geolocation> 元素：Chrome 144 新增了由用户激活的地理位置控制控件，简化了权限流程并减少了对复杂 JavaScript API 的依赖。

2. CSS 与样式增强（CSS Enhancements）
• ::search-text 伪元素：Chrome 144 支持自定义浏览器“页内查找”结果的样式，类似于 ::selection。
• caret-shape 属性：开发者现在可以指定文本插入光标的形状，如条状 (bar)、块状 (block) 或下划线 (underscore)。
• 视图过渡 (View Transition) 增强：Firefox 147 开始支持单页应用 (SPA) 的视图过渡类型识别，并支持通过 Document.activeViewTransition 获取当前活动的过渡对象。

3. Beta 版预览与未来动态（Beta browser releases）
• Chrome 145 Beta：引入了 text-justify 属性、多列布局改进（column-wrap 和 column-height）以及可自定义的 <select> 列表框。
• Firefox 148 Beta：支持 Location.ancestorOrigins，用于检测文档是否被嵌入到 <iframe> 中以及被哪些站点嵌入。

author Rachel Andrew

web.dev

New to the web platform in January  |  Blog  |  web.dev

Discover some of the interesting features that have landed in stable and beta web browsers during January 2026.

#优质博文 #前端 #CSS #锚点定位 #layout #course
Solving Shrinkwrap: New Experimental Technique
好文，利用 CSS Anchor Positioning（锚点定位）和 Scroll-Driven Animations（滚动驱动动画）解决网页排版中“自动换行导致的容器宽度无法自动收缩（Shrinkwrap）”这一经典难题。

AI 摘要：本文提出了一种创新的 CSS 实验性方案，旨在解决困扰开发者多年的“Shrinkwrap”难题：当块级元素内的文本自动换行时，容器宽度依然占据最大可用空间而非紧贴文本内容的现象。
作者 Roman Komarov 通过巧妙结合 Anchor Positioning（锚点定位）进行尺寸测量，并利用 Scroll-Driven Animations（滚动驱动动画）将测量值跨层级传递给父元素，从而动态调整容器尺寸。尽管该技术在 HTML 结构上有一定要求且目前仍处于实验阶段，但它为实现真正的紧凑包裹效果（如聊天气泡、自适应提示框等）提供了全新的纯 CSS 路径。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 核心挑战与背景 (The Problem)
• 解释“Shrinkwrap”问题：当元素内的内容（如文本）自动换行时，CSS 的 shrink-to-fit 算法通常会让容器扩展到最大可用宽度，导致视觉上出现多余的空白。
• 回顾该问题在 CSS 规范（CSSWG）中长达十年的讨论，以及 text-wrap: balance 等新属性如何凸显了这一缺陷。

2. 技术实现原理 (The Base Technique)
• 结构设计： 采用四层嵌套 HTML 结构，包括容器、内容包装器、源元素和探测元素 (probe)。
• 远程测量 (Remote Dimension Measuring)： 利用 Anchor Positioning（锚点定位）来确定内部行内元素的边界。
• 数值传递： 结合 Scroll-Driven Animations（滚动驱动动画）和自定义属性（CSS Variables），将测量到的像素值转换成可以在父元素中使用的数值，从而动态设置 inline-size（行向尺寸）。

3. 代码实现与 API (Code & Limitations)
• 展示核心 CSS 代码，利用 @property 定义变量，通过 animation-range 和 view-timeline 实现尺寸捕捉。
• 使用限制： 元素必须仅包含 Phrasing Content（短语内容，即行内元素）；目前主要在 Chrome 和 Safari 中运行，且 Safari 存在某些实验性 Bug。
• API 定义： 提供 --sw-limit（限制宽度）和 --sw-padding（间距调整）等自定义属性。

4. 进阶复杂场景 (Complex Content)
• 多锚点策略 (Multiple Explicit Anchors)： 演示如何处理具有多个 Flex（弹性布局）或 Grid（网格布局）项的容器包裹。
• 链式锚点 (Chained Anchors)： 针对不确定数量的项目，提出一种基于容器查询（Container Queries）和锚点链的自动化测量方案（目前仅 Chrome 支持较好）。
• 内容重复法： 探讨解决导航菜单等具有复杂相互依赖关系的布局方案。

5. 实际应用案例 (Use Cases)
• 聊天气泡 (Chat Bubbles)： 让气泡背景完美贴合换行后的文本，保持美观的视觉边距。
• 表单分组标题 (Fieldsets and Legends)： 解决 legend 标签在换行时导致的边框对齐问题。
• 覆盖图注 (Overlay Image Captions)： 实现图片上的半透明遮罩背景随文本长度动态收缩。
• 提示框 (Tooltips)： 优化设计系统中的气泡提示，使其在不同文本长度下都能保持紧凑。

6. 总结与未来趋势 (What's Next)
• 作者呼吁浏览器厂商提供原生的 CSS 属性或函数来简化这一过程。
• 强调简单场景的解决方案已趋于成熟，而跨依赖的复杂布局仍是未来探索的方向。

author Roman Komarov

kizu.dev

Solving Shrinkwrap: New Experimental Technique

In this article, I present my new technique for solving a CSS problem that was deemed impossible — true shrinkwrapping of an element with auto-wrapped content. By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions…

#GitHub #开源 #AI #新动态
GitHub 正在讨论开源项目维护者如何应对日益增加的低质量、AI 生成的拉取请求（PR），可能包括允许用户完全禁用 PR，或者至少限制 PR 只能由协作者访问等操作，可以在这里参加讨论：Exploring Solutions to Tackle Low-Quality Contributions on GitHub

GitHub

Exploring Solutions to Tackle Low-Quality Contributions on GitHub · community · Discussion #185387

Hey everyone, I wanted to provide an update on a critical issue affecting the open source community: the increasing volume of low-quality contributions that is creating significant operational chal...

#碎碎念
忘记了之前在哪里看过的话了，AI 越🔥确实真的会越有种“啊终于有人能懂我们写代码或者说 build 东西的快乐了”（（
以前说业余爱好是写代码，人家会说有毒吧x
现在说业余爱好是 Vibe Coding （嗯理解？）
纯属娱乐碎碎念

#优质博文 #前端 #性能优化 #JavaScript
The Browser Hates Surprises

AI 摘要：文章指出，浏览器的渲染引擎实际上是一个高效的约束求解器。当开发者中途“惊吓”浏览器（如延迟加载图片、动态插入滚动条等）时，会强制触发回流（Reflow），导致累积布局偏移（CLS）和用户体验的卡顿（Jank）。作者通过对比实验，提出了四种具体的优化方案：利用 scroll-margin-top 处理粘性布局遮挡、使用 scrollbar-gutter 预留滚动条空间、配置 aspect-ratio 预留图片位置，以及通过 Promise.all 编排数据加载。核心观点是：优化不仅是为了更快的加载，更是为了实现更平稳（Calm）的渲染。

author Durgesh Rajubhai Pawar

Frontend Masters

The Browser Hates Surprises

We often treat the browser like a canvas — a blank slate waiting for us to paint pixels. But this mental model is flawed. The browser isn’t really a painter; it’s a constraint solver.

#优质博文 #前端 #CSS
CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions

AI 摘要：本文探讨了在复杂前端界面开发中，传统 CSS 命名规范（如 BEM）以及现代抽象工具（如 Tailwind 或 CSS-in-JS）的局限性。作者重点介绍了现已达成 Baseline 兼容的 CSS @scope 特性。@scope 允许开发者在不牺牲 CSS 级联（Cascade）和继承特性的前提下，实现精确的样式隔离。通过支持“甜甜圈作用域（Donut Scoping）”和引入邻近性（Proximity）原则，@scope 有效解决了样式泄露和特异性（Specificity）战争问题，为构建现代、可维护的 UI 提供了一种更符合原生 Web 标准的替代方案。

author Blake Lundquist

Smashing Magazine

CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions — Smashing Magazine

Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new `@scope` rule finally give developers the confidence to write CSS that can keep up with modern front ends?