AI 摘要：本文讲述了作者在使用 AI 编码代理开发 Outlyne（一个 AI 驱动的网站构建器）过程中，遭遇的一个由 AI 代理错误删除注释后引发的隐藏 bug。该 bug 导致应用程序中出现了无限的 React 组件递归渲染，并通过 React 19 的 <Activity> 组件巧妙地隐藏起来，直到用户浏览器因内存耗尽而崩溃。作者通过深入调试，最终找到了问题的根源，并强调了将关键代码约束（structural invariants）转化为自动化测试的重要性，而非仅仅依赖注释。

AI 摘要：本文通过基准测试对比了 JavaScript 中 Array of Objects (AoS) 和 Object of TypedArrays (SoA) 两种数据存储模式的性能。实验发现 SoA 模式比 AoS 模式快 4 倍。文章深入分析了这种性能差异并非仅源于 TypedArrays 的优势，而是多种因素共同作用的结果，包括对象属性查找开销、内存布局、缓存效率以及循环开销等。最终结论是，消除对象开销、减少循环迭代次数、利用属性访问提升（property access hoisting）以及 TypedArray 提供的性能保证是 SoA 模式性能更优的关键。

AI 摘要：本文全面介绍了 Vitest Browser Mode，这是一种在真实浏览器环境中运行前端测试的新兴技术。它结合了端到端（E2E）测试的真实性与组件测试的隔离性，能够直接利用所有 Web API，无需模拟，并提供可视化的调试界面。作者预测 Vitest Browser Mode 将在未来几年内成为前端工程师必备的测试工具。文章详细阐述了 Vitest Browser Mode 的工作原理、测试编写方式（类比 React Testing Library 和 Playwright）、核心概念、配置方法（推荐使用 Playwright provider）、安装步骤以及如何运行测试，并提供了一个完整的示例。

AI 摘要：本文详细介绍了 HTML 中用于管理文本换行的四种主要方式：<br> 元素、<wbr> 元素、­ (soft hyphen) 字符以及   (non-breaking space) 字符。文章分析了每种方法的适用场景、优缺点，并强调了在大多数情况下，CSS 提供了更强大、更灵活的解决方案，例如使用 display 属性、overflow-wrap、text-wrap 和 white-space 等 CSS 属性来控制文本的换行和断行行为，以提升内容的可访问性、可维护性和用户体验。

Them’s the Breaks - HTMHell

A collection of bad practices in HTML, copied from real websites.

AI 摘要：TanStack Pacer 是一个专为前端应用设计的轻量级库，旨在解决常见的异步事件时序问题，例如防抖、节流、批处理和速率限制。文章通过构建一个类似 Pinterest 的无限滚动图片画廊，详细展示了如何在 React 应用中集成并使用 Pacer 的核心功能，以优化用户界面性能并避免 RxJS 带来的复杂性，从而提供了一个更易学、更小巧、更符合 React 生态的解决方案。

LogRocket Blog

Moving beyond RxJS: A guide to TanStack Pacer - LogRocket Blog

Build a React infinite scroll gallery with TanStack Pacer. Learn debouncing, throttling, batching, and rate limiting without RxJS complexity.

Zola Chat 和 prompt-kit 作者 @Ibelick 沉淀了他使用 Tailwind + shadcn-ui 生态（Base UI）+ framer-motion 进行 AI 编程时的 Skill , 用来约束 AI 过度设计和给出明确的设计方向。

或许每个项目都应该又一个类似的 UI Skill 来约束项目的设计风格，我准备给项目也加一下

AI 摘要：作者在为 RSS feed 链接添加 UTM 参数以追踪流量时，意外导致 RSS 聚合器将所有文章视为新内容而重复添加。文章深入解释了 RSS feed 的工作原理，强调了 URL 作为唯一标识符的局限性，并介绍了 RSS 规范中的 guid 字段，阐述了如何使用 guid 来提供独立的、不易变的唯一标识，从而避免因链接变更而导致内容重复的问题。尽管作者的错误无法在已订阅的聚合器中修复，但文章强调了在设计 RSS feed 时使用 guid 的重要性。

1. RSS Feed 的工作原理与问题
• RSS feed 是一种机器可读的内容列表，常用于订阅更新。
• RSS 聚合器通过轮询 feed 来获取更新，并通常使用 URL 作为条目的唯一标识。
• 当作者在 RSS feed 的链接中添加 utm_medium=rss 参数后，聚合器将其视为新的、不同的链接，导致所有文章被重复添加。
2. 唯一标识符的必要性与 GUID 字段
• URL 可能会发生变化（例如，进行重构或添加追踪参数），而 RSS 聚合器不遵循重定向。
• guid (Globally Unique Identifier) 字段是 RSS 规范中用于为条目提供独立、不易变唯一标识的元数据。
• guid 字段没有规定格式，聚合器将其视为不透明字符串，确保其唯一性是源的责任。
3. 解决方案与教训
• 通过在 RSS feed 中为每个条目设置 guid 字段，可以保持 link 字段的灵活性，同时确保条目的唯一性。
• 作者的错误在于没有从一开始就正确使用 guid 字段，导致已订阅的聚合器中存在重复内容，并且无法修复。
• 这是一个关于 RSS、RFC 阅读和前瞻性思考的宝贵教训。

TheOrangeOne

GUIDs - How I messed up my RSS feed

If you're reading this post through an RSS aggregator, or were directed here from one, you may have already seen the issue I'm about to describe, and already swore my name. If you didn't, I'd recommend subscribing, for completely unbiased reasons. This is…

AI 摘要：Addy Osmani 在 Google 14 年的职业生涯中，总结出 21 条经验教训，这些经验并非关于特定技术，而是关于如何在工程领域取得成功，包括关注用户问题、团队协作、代码清晰度、避免不必要的创新、人际关系的重要性，以及认识到时间比金钱更宝贵等。这些经验强调了解决实际问题、与人合作以及持续学习的重要性，是工程师职业生涯中宝贵的指导。

1. 以用户为中心
• 真正的价值来自于深入理解并解决用户问题，而非仅仅热衷于技术本身。
• 通过参与客服、与用户交谈、观察用户痛点来深入理解问题。

2. 协作与对齐
• “对”固然重要，但“一起达成对”才是真正的挑战和价值所在。
• 避免成为“房间里最聪明的人”，应创造空间让他人参与，并对自己的观点保持适度怀疑。
• 绝大多数“慢”的团队实际上是“错位”的团队，即方向、接口或优先级不明确。

3. 行动与交付
• 完美的追求会阻碍进步，先行动、再完善、再优化。
• “行动导向”比“分析瘫痪”更能带来清晰度，可编辑错误页面，但无法编辑空白页面。
• AI 可以辅助快速迭代和反馈。

4. 清晰度而非技巧性
• 代码需要清晰易懂，以便他人（尤其是在紧急情况下）能够理解和维护。
• 为维护者（包括 2 AM 时的你）而非自己写代码。

5. 谨慎创新
• 创新是有成本的，应谨慎使用“创新代币”。
• 只在有独特价值的地方创新，其他地方应倾向于使用成熟、可靠的技术。

6. 价值的可视化与倡导
• 优秀的成果需要被看见，代码不会替你说话，人会。
• 要让你的影响对他人可见，尤其是在你不在场时。

7. 代码的最小化
• 最“好”的代码是你根本不需要写的代码。
• 在构建之前，思考“如果我们不这样做，会发生什么？”。

8. 兼容性即产品
• 在大规模系统下，即使是 bug 也会成为用户的依赖。
• API 设计实际上是 API 退休设计，需要考虑兼容性、时间和用户体验。

9. 聚焦可控因素
• 在大型组织中，很多变量不可控，应专注于自己的影响范围。
• 保持理智和高效的关键在于聚焦可控之事。

10. 抽象的代价
• 抽象会转移复杂性，而非消除它，当问题发生时，你仍需要理解底层。
• 持续学习“更低级”的知识，以应对抽象失效的情况。

11. 教学即学习
• 写作和教学是促进理解的有效方式，能暴露自己知识的不足。
• 尝试用简单的方式解释事物，是检验和深化理解的捷径。

12. “粘合剂”工作的价值与可见性
• 文档、入职、跨团队协调等“粘合剂”工作至关重要，但容易被忽视。
• 要将这些工作视为可见的影响，而非仅仅是“乐于助人”。

13. 避免轻易获胜
• 如果总是轻易获胜，可能意味着积累了“沉默的阻力”。
• 真正的对齐需要时间、理解和妥协，而非赢得争论。

14. 度量与目标
• 任何被量化的指标都会被“博弈”。
• 在衡量时，应同时关注速度和质量/风险，并注重趋势分析。

15. 承认未知
• 领导者承认“我不知道”能创造一个更安全的环境，鼓励团队成员也敢于提问。
• 好奇心和承认未知才能促进团队学习。

16. 人脉网络
• 人脉是你最重要的长期资产，远比任何一份工作都持久。
• 以好奇和慷慨的态度建立和维护人脉。

17. 性能提升源于移除
• 许多性能提升来自于移除不必要的工作，而非增加技术复杂度。
• 最快的代码是那些从不运行的代码。

18. 流程的本质
• 良好的流程应简化协调、降低失败成本，而非制造官僚主义。
• 如果流程的价值无法解释，它可能只是负担。

19. 时间价值
• 职业生涯后期，时间成为比金钱更宝贵的资源。
• 有意识地权衡时间和回报，避免过度追求金钱而牺牲宝贵的时间。

20. 复利效应
• 专业技能的提升需要刻意练习和时间积累，没有捷径。
• 将职业生涯视为复利增长，而非购买彩票，持之以恒会带来长远回报。

21. 核心思想
• 保持好奇心、谦逊，并始终记住工作关乎人（用户和团队成员）。
• 工程师的职业生涯足够长，可以从错误中学习，并分享经验。

Addyosmani

21 Lessons From 14 Years at Google

Lessons learned from 14 years of engineering at Google, focusing on what truly matters beyond just writing great code.

AI 摘要：本文总结了 ViteLand 生态在 2025 年 12 月的主要更新和社区动态，重点介绍了 Oxc 在代码校验和格式化方面的显著性能提升，以及 Vite、Vitest、Rolldown 各自的项目进展。同时，文章还预告了即将举行的相关技术活动，并展示了社区中涌现出的基于 ViteLand 工具的创新项目和迁移案例，表明整个生态正朝着更快速、更统一的方向发展。

1. Oxc 的性能突破
• Oxlint 和 Oxfmt 在代码校验和格式化方面提供比 ESLint 和 Prettier 更快的速度（分别快 50-100 倍和 30 倍）
• Oxlint 已推出 1.0 版本，并新增了类型感知校验（type-aware linting）和兼容 ESLint 的 JS 插件
• Oxfmt 新增了对嵌入式语言和实验性导入排序的支持
• Bun、Vue、Preact、date-fns、Inquirer.js、Shopify、Miro、Airbnb 等多个项目已迁移至 Oxc
• Oxc 团队计划在 2026 年推出对动态配置（dynamic configs）的支持
• Oxc 在性能优化方面持续投入，实现了语义分析性能的提升

2. Vite 项目更新
• 发布了多个 Vite 8 beta 版本，修复了 bug 并提升了稳定性
• Vite 8 beta 提供了第二版原生插件（native plugins），改进了动态导入（dynamic import）和导入 glob（import glob）插件的对齐

3. Vitest 项目更新
• 新增实验性的 OpenTelemetry 支持，用于分析测试性能瓶颈
• Vitest UI、CLI 和 VS Code 扩展支持分析和分解导入，识别减慢测试速度的依赖
• 支持通过 experimental.fsCache 缓存转换后的文件，加速后续测试运行

4. Rolldown 项目更新
• 支持通过手动指定 tsconfig 来使用 TypeScript 项目引用（TypeScript project references）
• 优化了默认的代码块（chunking）算法，减少了生成的代码块数量
• 提供了 postBanner 和 postFooter 选项，用于在打包后的代码前后追加内容
• 插件的 resolveId 钩子支持通过 importerId 进行过滤，提高性能

5. 社区动态与合作
• Framer 发布了关于使用 Rolldown 改进性能的案例研究
• TypeScript.fm 和 Syntax.fm 播客讨论了 ViteLand 项目的更新和发展预测
• Ninja Squad 撰写了关于使用 Vitest 浏览器模式测试 Angular 的文章
• 社区涌现出多个基于 Oxc 和 Rolldown 的新工具和迁移案例，如：
• oxlint-plugin-complexity：用于校验代码复杂度的 Oxlint 插件
• Roll(down)phobia：基于 Rolldown 的包大小分析工具
• RSC Explorer：使用 Vite 8 和 Rolldown 构建的 RSC（React Server Components）工具
• Facetpack：使用 Oxc 替换 Babel 的 React Native 工具。
• MonkeyType：迁移到 Oxlint 以获得更快的类型感知校验速度
• create-better-t-stack：从 Biome 迁移到 Oxlint 和 Oxfmt
• Ultracite：提供基于 Oxc 的预设配置
• rollipop：完全基于 Rolldown 的 React Native 构建工具

void(0)

What’s New in ViteLand: December 2025 Recap

Our December 2025 recap features big Oxc releases: Oxfmt alpha builds and Oxlint's type-aware linting alpha, plus updates across Vite, Vitest, Rolldown, and community highlights.

AI 摘要：Dither Image Online 是一个免费的在线工具，旨在帮助用户轻松地将普通图像转换为具有复古和像素艺术风格的抖动（dithered）图像。该工具强调其快速、实时和本地处理的特性，确保用户隐私安全。它提供了多种抖动算法，如 Bayer、Crosshatch、Halftone 和 Contour，并允许用户调整参数以获得所需效果，无需上传图片到服务器，也无需复杂的 Photoshop 操作。

AI 摘要：Chrome 144 的 DevTools 发布包括 DevTools MCP 服务器更新（支持复用浏览器会话的 auto connection）、Network 面板重命名为 Request Conditions 并新增对单个请求的节流（throttling）、在 Styles 面板中可编辑 @font-face 与 @font-feature-values、以及 Elements 面板下在 shadow root 与 document root 可见 adopted stylesheets；文章同时回顾了 2025 年 DevTools 在 AI 助手、性能面板重构与 Web 平台调试工具方面的一系列改进，并提供了预览版本与反馈渠道信息。

Chrome for Developers

What's new in DevTools, Chrome 144  |  Blog  |  Chrome for Developers

Chrome DevTools MCP server, individual request throttling, adopted stylesheets and 2025 highlights.

AI 摘要：Visual Studio Code (VSCode) 因其基于 Electron 的混合应用架构，在普及和可扩展性的同时，也带来了高资源消耗、启动缓慢和响应迟钝等性能问题。为了应对这些挑战，新一代的快速、原生代码编辑器正在崛起，它们使用 C++、Rust 等编译型原生语言构建，旨在优先考虑性能、降低资源消耗并提供更可预测的行为。

LogRocket Blog

6 fast (native) alternatives for VSCode - LogRocket Blog

VSCode has architectural performance limits. Compare six fast, native code editors built for lower resource usage.

CSSアニメーションで作った自主制作のモーションをポートフォリオサイトにまとめてみました🐈
https://yui540.com/