#优质博文 #AI
我使用 Claude Code 开发 Rolldown 的体验：在 Rolldown 开发中高强度使用 Claude Code 进行真实开发的思考与经验分享。

几个月前，我自认为对 AI 认知是比较贴切，能写点脚本、做下网页开发，但处理不了 Rolldown 这种复杂度的项目。
而现在，过去两周里，它几乎替我写了所有的代码。整个流程没有魔法，只有跟着官方文档《Claude Code: Best practices for agentic coding》的笨拙使用，仅仅是这样，就已经颠覆了我的认知。

author Yunfei He

从 周报 #102 - 我是如何使用 AI 的 里看到的文章，我觉得说的都挺对的，现在 AI 确实是很好的副驾驶了，我也是同时用着 codex / claude code / cursor 感觉爽翻天了。

hyf.me

我使用 Claude Code 开发 Rolldown 的体验

Blog post by Yunfei He

#demo #codepen #前端
酷是挺酷的，但是感觉 UX 不太符合用户直觉？
Custom curved scrollbars

Chris Bolson 分享了曲线滚动条主题的两种变体：一种是超级曲线，另一种是更微妙的曲线。"滚动条遵循容器的边框半径，长度根据内容数量计算"。

核心原理是隐藏原生滚动条，在容器上方叠加一层 SVG，画一条沿容器圆角轮廓的轨迹，并将滚动条当作这条路径上的一段子路径来渲染，用视口高度与内容高度的比例计算滚动条长度。

拖动时根据指针的垂直位置换算滚动比例写回 scrollTop，滚动与窗口尺寸变化时同步重算路径，颜色与粗细则由 CSS 变量和交互状态控制。

via Codepen Spark#478

#优质博文 #前端 #CSS #JavaScript #动画 #course
教程不嫌多～～
Start implementing view transitions on your websites today

AI 摘要：本文系统地讲解了如何在网站中使用 View Transition API，通过 CSS 与 JavaScript 结合实现页面或内容间的动画过渡，从基础语法、调试技巧、命名规范、类型区分到最佳实践完整覆盖。作者强调利用伪元素与动画组结构可极大简化复杂转场开发，提出在 prefers-reduced-motion 设置下应合理退化，同时介绍跨页面转场与未来 CSS 原生增强的前景。

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

1. View Transition API 基础
• View Transition API 允许在状态切换间实现平滑动画，方式包括自动触发或通过 JavaScript 手动调用。
• 浏览器在启动转场时会创建当前和未来状态的快照进行对比并生成关键帧动画，机制类似 FLIP 技术但由 CSS 自动处理。
• 若未改动浏览器原生导航，可简单通过 @view-transition { navigation: auto; } 启用。

2. View Transition 结构与伪元素 (pseudo elements)
• 介绍转场的 DOM 架构：::view-transition-group、::view-transition-image-pair、::view-transition-old、::view-transition-new。
• 每个转场组独立包含前后状态快照，开发者可用 view-transition-name 命名控制。
• 快照为非交互式静态影像，转场中无法修改其内容或动态更新样式。

3. 调试与命名
• Chrome DevTools 的动画面板 (Animations Drawer) 可用于调试、调整动画速度与暂停查看。
• 推荐为每个转场元素添加独立的 view-transition-name，跨页面动画需在两页手动匹配命名。
• 使用 match-element 可支持同文档内转场。

4. View Transition 类型与事件
• 通过 JavaScript 可在 document.startViewTransition() 调用时传入 types 参数，区分不同交互的转场类型。
• 可结合 :active-view-transition-type(filter) 伪类为特定类型设置动画样式。
• 使用 pagereveal 事件判断页面跳转方向与来源，实现更复杂的跨页面转场逻辑。
• 当前部分旧版 Chrome 不支持类型参数，可通过 try-catch 或自定义 data 属性兼容处理。

5. 最佳实践与组织结构
• 应为所有 view-transition-name 设置一致的动画时长、缓动函数（animation-timing-function）与填充模式（fill-mode）。
• 建议用短变量如 --vt 生成唯一 ID，在使用 CMS 或框架时可轻量生成名称。
• 使用 prefers-reduced-motion: no-preference 媒体查询，以保证可访问性良好的退化行为。
• 可通过选择器 [style*="--vt"] 一次性添加全部转场名称。

6. 高阶应用与动画逻辑
• 转场组中可能只存在 old/new 状态，用于筛选（filter）或排序（sort）操作表现不同。
• 使用 CSS 伪类 :only-child 区分仅有 old/new 状态的元素，实现“进入”或“退出”动画。
• 案例包括从总览页到详情页的转场动画。
• 当前 :has 尚无法检查组内是否同时存在 old/new 元素，此功能已在 W3C 提案中。

7. 浏览器兼容性与后续发展
• Firefox 144 已支持 View Transition API，但仅限同文档转场。
• 跨文档转场（cross-document transitions）正在推进，可跟踪 MDN 与 Chrome 团队 Demo 获取更新。

author Cyd Stumpel

Piccalilli

Start implementing view transitions on your websites today

Browser support for view transitions is rocketing and there's not many better out there to help you understand how to implement them than Cyd Stumpel.

#优质博文 #CSS #前端
Pure CSS Tabs With Details, Grid, and Subgrid | CSS-Tricks

AI 摘要：本文作者回顾多年来使用纯 CSS 制作选项卡 (Tabs) 的探索，并介绍一种利用 <details> 与 <summary> 元素结合 CSS Grid 与 Subgrid 的新方案。该方法无需 JavaScript 即可实现结构化、响应式、可访问的选项卡布局；文章展示完整 HTML 结构、Grid 与 Subgrid 的布局方法、状态切换 (open 属性) 的控制与可访问性特性，最后通过变量与模板语言优化代码结构。

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

1. 背景与动机
• 回顾作者九年前的纯 CSS Tabs 实现与可访问性优化历程
• 提出更现代的实现思路：结合 <details> 元素、CSS Grid 与 Subgrid 构建组件化界面

2. HTML 结构搭建
• 使用 .grid 容器包裹多个 <details>，每个 <details> 对应一个选项卡
• <summary> 元素作为点击控制标签，而内容区域作为展示面板

3. CSS Grid 与 Subgrid 实现布局
• .grid 使用 display: grid 创建三列布局，上行为标签，下行为内容区
• details 继承 Subgrid 网格线以保证对齐一致性
• 利用 grid-column 与 grid-row 完成布局占位
• 通过 ::details-content 定位并控制内容区显示

4. 交互逻辑与状态控制
• 通过 [open] 属性自动控制显示与隐藏，无需 JS
• 使用 :not([open]) 结合 display: none 隐藏未选中面板
• <summary> 元素作为可操作区域，悬停与点击时样式变化

5. 样式分布与变量化
• 使用 :nth-of-type 精确定位每个 tab 的布局位置
• 引入自定义属性 (CSS Variables) --n 优化可维护性
• 建议通过模板语言 (如 Liquid) 动态生成 HTML 以自动分配变量

6. 细节优化与可访问性
• 利用 z-index 确保 <summary> 块可以正确响应点击事件
• <details> 原生可访问性支持包括键盘导航与屏幕阅读
• 社区反馈与改进：参考 Mastodon 与评论区的讨论

7. 结论与展望
• 纯 HTML + CSS 已能实现具有良好交互体验的 Tabs 组件
• Subgrid 与 ::details-content 等新特性仍待浏览器完全支持
• 表明现代 CSS 的能力足以构建小型交互组件，无需依赖 JS

author Silvestar Bistrović

CSS-Tricks

Pure CSS Tabs With Details, Grid, and Subgrid | CSS-Tricks

Can we use the <details> element as the foundation for a tabbed interface? Why yes, we can!

#Newsletter #前端 #周刊更新
周刊第 12 期！这周过的好快，下周就要去成都呆一周了，周五请假去九寨沟玩耍，浅浅期待一下。
FE Bits Vol.12｜Next.js 16 发布、Docusaurus 3.9 AI 搜索、ChatGPT Atlas 发布

#优质博文 #CSS #前端 #course #layout
Web dev for beginners: CSS layout – flexbox, grid, media queries and container queries：面向初学者的 CSS 布局指南，系统讲解 flexbox、grid、media query 与 container query 的核心概念与实践，是《Web development for beginners》系列的一部分。

author Dr. Axel Rauschmayer

2Ality

[Web dev for beginners] CSS layout: flexbox, grid, media queries and container queries

CSS provides a variety of services for web content: In the previous chapter, we used it to format content: to change colors, typefaces, etc. In this chapter, we will use it to lay out content: to place HTML elements on a page.

#碎碎念 #杂谈 #emo
写点流水账，破事水：最近经常被若有若无的“孤独感”侵袭（对的兄弟就算有对象也会经常有），想听人说话，想出去走走，听自己以前录的视频啊，回看 vlog 啊什么的，一晃然发现上次录的带声儿的视频都已经是 22 年的大作业了，听完就会有种：啊我那个时候那么稚嫩吗的感觉。

偶尔 B 站会开直播打游戏也是这个原因，直播跟另一个朋友语音着打游戏，但我这个人又不擅长开麦/露脸等行为，这方面非常之不自信。回忆起大学的时候，我一个 i 人身兼学生会部长/社团副部长/团委的时候，各种露脸，演讲和接触学弟学妹看起来都很 e，但实际上内心是非常没底气的一个人。

但这又跟我之前说的偶尔会觉得自己“我做什么都会成功的！”这个念头冲突，偶尔又会有“我好废物啊！”的感觉，人体，很神奇吧。

偶尔也会想，要不要做点视频唠嗑唠嗑说说话，别给孩子憋疯了，但是转念一想，又想不到做什么样的视频，没有必要硬做，很羡慕别人做 vLog 啊演讲啊之类的视频能够说很多话。

还有就是最近经常经常心情不好就去吃楼下的烧烤（都怪他太好吃了），然后就减肥无望，然后心情更不好了，更想去吃了，恶性循环，运动一点也补不回来，在想等回来之后要不要去看看减重科。

还有就是，我也太久没生过什么病了导致有点担忧，一直都是间断性头隐隐作痛，不会突然来个大的吧。

不想那么多了，先期待期待下周去九寨沟！

#优质博文 #JavaScript #前端 #新特性 #浏览器
好东西。
URLPattern is now Baseline Newly available

AI 摘要：介绍了已进入 Baseline 的新浏览器功能 URLPattern API，它为 URL 匹配和路由提供了标准、简洁且高性能的原生解决方案。过去开发者需使用复杂的正则表达式或第三方库来解析和提取 URL 参数，而 URLPattern 使得这些操作更清晰、可维护且无需额外依赖。

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

1. URLPattern 基础与核心概念
• 介绍 URLPattern API 的推出背景：取代传统正则匹配与第三方路由库。
• 提供新 URLPattern 接口，可通过 .test() 与 .exec() 操作直接匹配并提取参数。

2. 基本 URL 模式匹配
• 对比旧方法（URL + 正则）与新 API 的简化写法。
• 展示匹配 /users/:id 的例子，体现代码可读性和简洁性。

3. 提取动态参数（Dynamic Parameters）
• 传统方法依赖匿名的正则捕获组，易出错。
• URLPattern 支持命名参数，可通过结构化对象获取（如 result.pathname.groups）。
• 示例：提取书籍分类 category 与 id。

4. 复合匹配（Compose Multipart Matches）
• 传统方式需多处判断主机名与路径。
• URLPattern 原生支持同时匹配多个部分，例如 hostname + pathname。
• 示例：匹配 .cdn.com 下的 /images/ 文件。

5. 减少项目依赖（Project Dependencies）
• URLPattern 是内置能力，无需加载第三方库，减少 bundle 体积与维护成本。
• 使用浏览器原生实现，跨引擎一致且性能更优。

6. 深度用法详解（Detailed Usage）
• 多种典型场景：
• 路径匹配与参数提取：示例 /products/:category/:id 展示 .test() 与 .exec() 双用法。
• 匹配子域名与版本号：支持在 hostname 层定义变量如 :subdomain.myapp.com，适用于多子域架构。
• 通配符与正则表达式结合：通过 * 和嵌入式正则增强匹配灵活度，如 /users/:userId(d+)/assets/*.(jpg|png|gif)。

7. 实战示例：Service Worker 路由
• 利用 URLPattern 拦截 fetch 事件，根据路径实行不同缓存策略。
• 示例：
• /images/* 采用缓存优先；
• /api/* 使用网络优先。
• 显示该 API 在渐进式 Web 应用（PWA）中的现实意义。

8. 结语与扩展阅读
• URLPattern 提升代码可维护性，简化路由逻辑。
• 推荐进一步查阅 MDN Web Docs 了解完整参考。

author Jay Rungta

web.dev

URLPattern is now Baseline Newly available  |  Blog  |  web.dev

URLPattern became Baseline Newly available as of September 15, 2025.

#优质博文 #安全 #供应链攻击 #VSCode
GlassWorm: First Self-Propagating Worm Using Invisible Code Hits OpenVSX Marketplace

AI 摘要：本文由 Koi Security 团队发布，揭示了一种前所未有的供应链攻击——GlassWorm。该蠕虫针对 OpenVSX 与 VSCode 插件生态，通过不可见的 Unicode 字符隐藏恶意代码，使用 Solana 区块链和 Google Calendar 作为不可下线的指挥控制系统（C2），可远程访问、窃取开发者凭证、劫持加密钱包并自我传播。

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

1. 攻击概览与事件背景
• GlassWorm 继 Shai Hulud 之后成为第二个自我传播的供应链蠕虫，首次锁定 OpenVSX 市场
• 感染 7 个扩展、下载量约 35,800 次，并在 VSCode 官方市场出现活跃样本
• 攻击结合区块链、Unicode 隐蔽代码与去中心化通信机制

2. 隐形攻击机制：Unicode 差异选择器
• 攻击者在 JavaScript 源码中嵌入不可显示的 Unicode Variation Selectors
• 人眼与静态扫描均看不到恶意逻辑，但解释器可执行
• 此方法突破代码审查和 Git diff 可见性，暴露软件供应链审查的盲点

3. 区块链 C2 机制（Solana Blockchain）
• 利用 Solana 交易的 memo 字段存储下一阶段载荷链接
• 特性：不可变、匿名、抗封锁、难以审查、成本极低
• 攻击者可频繁更新交易实现动态替换，完全绕过传统安全封控

4. 三级指挥控制体系
• 主 C2：Solana blockchain 交易地址
• 二级：直接 IP （217.69.3.218）传输加密 payload
• 三级：Google Calendar 用作备用 C2，通过事件标题存储 Base64 链接
• 实现“无法下线”的混合基础设施体系

5. 凭证与资产窃取阶段（Credential Harvest）
• 定向获取 NPM / GitHub / Git / OpenVSX 凭证
• 搜索并攻击 49 种加密货币钱包（MetaMask / Phantom 等）
• 使用 AES 加密及 HTTP 动态密钥进行安全通信以强化隐蔽性

6. ZOMBI 模块：完全远控与渗透功能
• SOCKS Proxy：将开发者工作机转为攻击代理节点
• WebRTC P2P：实现实时对等通信，通过 NAT 穿透
• BitTorrent DHT：分布式指令广播，无中心可拔除节点
• HVNC（Hidden Virtual Network Computing）：隐藏桌面控端操作，可完全远程访问
• 支持模块化更新与自愈机制，实现长期驻留

7. 自我传播（Self-Propagation）机制
• 利用窃取的凭证自动入侵更多扩展与仓库
• 无需用户交互，通过自动更新实现连锁感染
• 模仿生物病毒复制循环，实现开发生态层面的指数级扩散

8. 攻击现状与影响评估
• 10 月中旬已造成全球范围感染
• 五个扩展仍在续散布恶意版本
• 受害系统正在被远程控制、挖掘凭证、充当犯罪代理节点

author Koi Security Research Team

www.koi.ai

GlassWorm: First Self-Propagating Worm Using Invisible Code Hits OpenVSX Marketplace | Koi Blog

#优质博文 #设计 #配色 #UI #CSS #color #tools
ColorMate – Free Color & Gradient Generator Tools

AI 摘要：ColorMate 是一款面向设计师与开发者的免费在线配色工具，可快速生成符合无障碍标准（Accessibility）的调色板。用户可提取图片配色、即时预览 UI 效果、进行对比度测试（Contrast Checker），并将结果以 HEX、CSS 或 PNG 格式导出。它还提供由 AI 命名、锁定颜色及实时生成新方案的功能，并收录多种热门配色示例。

ColorMate

ColorMate – Free Color & Gradient Generator Tools

Generate beautiful color palettes, gradients, and design assets with ColorMate. All tools are 100% free.

#优质博文 #测试 #前端 #工程化 #新动态
Announcing Vitest 4.0：Vitest 团队宣布推出 Vitest 4.0，这是该测试框架的重大版本更新。此次版本将 Browser Mode 标记为稳定，让开发者能在真实浏览器环境中运行单元测试，从而获得更高的可靠性。此外还引入了 视觉回归测试 与 Playwright Trace 支持，提升了调试与测试体验。

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

1. 发布概况
• Vitest 在过去一年内从每周 700 万下载增长至 1700 万，社区影响力显著提升。
• 经过近一年的开发，Vitest 4.0 正式发布。
• 该版本包含若干重大变更（breaking changes），需参考迁移指南进行升级适配。

2. Browser Mode 稳定
• Browser Mode 结束 Beta 阶段，正式进入稳定版。
• 支持在真实浏览器中运行组件测试，不再局限于 JSDOM 等模拟环境。
• 使用相同的 Vitest API，无需修改测试代码。
• 基于 Playwright 等 provider 实现执行环境，但不替代现有 E2E 工具，仅改变测试运行方式。

3. 新增功能与改进
• 视觉回归测试 (Visual Regression Test)：在 Browser Mode 下进行组件截图与参考图对比，用于检测视觉变化。
• Playwright Traces：生成可在 Trace Viewer 中分析的跟踪文件，辅助调试。
• 报告系统 (reporter) 更新、类型感知钩子 (type-aware hooks) 等多项改进。

4. 版本变更与迁移
• 此次为主版本升级，包含不兼容改动。
• 官方提供迁移指南：Migration guide。

5. 未来计划与社区
• 团队将重点优化性能和 Browser Mode 体验。
• 报告问题可通过 GitHub Issues 提交。

void(0)

Announcing Vitest 4.0

Vitest 4.0 is released with Browser Mode being marked stable, Visual Regression testing support, and Playwright Trace support. The Vitest team will focus on performance improvement in the upcoming quarter. This major release includes breaking changes.