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/

AI 摘要：本文深入探讨了 JavaScript 内置 Date 对象的诸多缺陷，包括其不一致的解析行为、缺乏时区支持以及最重要的其作为可变对象 (mutable object) 导致的意外副作用。作者提出 Temporal API 是 Date 对象的完美替代方案，Temporal 作为命名空间对象 (namespace object)，提供了更直观、更细致的日期时间处理能力，并且其所有操作都返回新的不可变对象 (immutable objects)，彻底解决了 Date 的核心问题。文章鼓励开发者提前试用 Temporal，以推动其最终标准化和广泛应用。

1. JavaScript Date 对象的历史与痛点
• 构造函数行为不一致：Date 构造函数 (constructor) 在处理月份、年份推断和字符串格式时存在诸多怪癖和不一致性。
• 内部机制与命名误导：Date 实际上表示的是以毫秒为单位的 Unix 时间戳 (Unix timestamp)，而非纯粹的日期，容易引起混淆。
• 功能受限：缺乏对复杂时区、夏令时 (Daylight Saving Time) 以及非公历 (Gregorian calendar) 的原生支持。
• 对性能的影响：由于 Date 的局限性，开发者常需引入大型第三方库 (third-party library) 来解决问题，导致性能开销。
2. Date 对象的核心问题：可变性 (Mutabilty)
• 原始值 (Primitive Values) 的不可变性：解释 JavaScript 中数字、布尔值等原始数据类型 (primitive data types) 是不可变 (immutable) 的，变量赋值是创建副本。
• 对象 (Objects) 的可变性：解释对象是可变 (mutable) 的，变量存储的是引用 (reference)，对对象的修改会影响所有引用。
• Date 的可变性后果：Date 对象作为构造函数创建的对象，具有可变性。对 Date 实例 (instance) 的修改会直接改变原始对象，导致意外的副作用和难以追踪的错误。
• 代码示例：通过 addDay 函数的例子，展示了 Date 对象的可变性如何导致“今天”和“明天”变成同一个日期。
3. Temporal API 的设计理念与优势
• 取代 Date 的新方案：Temporal API 被设计为 Date 对象的全面替代品，旨在提供现代、健壮的日期时间处理能力。
• 命名空间对象 (Namespace Object) 设计：Temporal 不是构造函数，而是类似 Math 的命名空间对象，包含多个更专业化的类 (classes) 和方法。
• 丰富的日期时间类型：Temporal 提供了 Duration、Instant、PlainDate、PlainDateTime、ZonedDateTime 等多种类型，能够更精确地表示日期、时间及两者结合的不同概念。
• 核心优势：不可变性 (Immutability)：Temporal 对象的所有操作方法 (methods)，例如 add() 和 subtract() ，都不会修改原始对象，而是返回一个新的 Temporal 对象，从根本上解决了 Date 的可变性问题。
• 代码示例：展示 Temporal 如何通过返回新对象来避免副作用，并使得链式调用 (chaining methods) 成为可能，大幅提升了代码的清晰度和安全性。
4. Temporal API 的当前状态与未来展望
• 标准化进展：Temporal 提案已进入 TC39 标准化过程的第三阶段 (Stage 3)，已被推荐实现。
• 浏览器支持：已在 Chrome 和 Firefox 等主流浏览器的最新版本中落地实现。
• 开发者参与：鼓励开发者试用 Temporal 并提供反馈，以帮助完善最终规范。
• 未来前景：Temporal 将为 JavaScript 带来合理、现代的日期时间处理能力，彻底改变现有 Date 对象带来的困境。

Piccalilli

Date is out, Temporal is in

Temporal is the Date system we always wanted in JavaScript. It's extremely close to being available so Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript date system.

AI 摘要：DiceBear 是一个功能强大的头像库，旨在帮助设计师和开发者快速为项目创建多样化的头像。它提供了从抽象形状到精心设计的人物角色等多种头像风格。用户不仅可以生成随机头像，还可以通过设定 seed 实现确定性头像生成，或利用丰富的定制选项创建个性化头像。DiceBear 通过 JavaScript 库、HTTP API、命令行工具 (CLI)、Figma 插件和在线 Playground 等多种方式，为用户提供了灵活便捷的头像生成方案。

1. DiceBear 项目概览
• 项目定位：专为设计师和开发者打造的头像库。
• 核心优势：快速为项目创建精美头像，提供多样化的选择。
• 头像风格：涵盖抽象形状和精心设计的人物角色。
2. 头像生成功能与特性
• 随机生成：支持生成纯粹随机的头像。
• 确定性生成：通过内置的伪随机数生成器 (PRNG) 和 seed 值，确保基于特定种子重复生成相同的头像，适用于用户身份标识。
• 高度可定制：每个头像风格都提供无数选项，允许用户创建个性化头像。
3. 多平台集成与便捷工具
• JavaScript 库：提供便捷的 JavaScript 客户端集成。
• HTTP API：支持通过 HTTP 请求生成头像。
• 命令行工具 (CLI)：方便在命令行环境中使用。
• Figma 插件：直接在 Figma 设计工具中使用。
• 在线 Playground：提供交互式平台进行头像预览和配置。

AI 摘要：本文着重介绍了四个前端开发者在 2026 年前应熟练掌握的 CSS 新特性，这些功能已在 2025 年发布。它们包括 sibling-index() 和 sibling-count() 函数，用于基于兄弟元素索引实现动态动画；@container scroll-state() 查询，提供对滚动容器状态的精细控制；text-box 属性，用于精确管理文本行高和间距，实现像素级对齐；以及功能更强大且类型安全的 typed attr()，允许直接在 CSS 中使用 HTML 属性并进行类型验证。这些特性旨在显著提升 Web 界面的交互性、设计精确度和开发效率。

1. CSS 主题回顾与前瞻
• 回顾了 2023、2024 年的 CSS 特性推荐，强调本文是其系列主题的一部分。
• 文章重点关注 2025 年已发布并值得开发者在 2026 年掌握的 CSS 新功能。
2. sibling-index() 和 sibling-count() 函数
• 核心功能： 允许开发者将元素相对于其兄弟元素的位置（索引）作为计算值使用。
• 典型应用：
• 基于索引错开过渡动画 (stagger animations)，实现元素按序出现或消失的效果，例如结合 @starting-style 创建平滑的入场动画。
• 可以通过 calc((sibling-index() - 1) * 100ms) 使第一个元素立即开始动画。
• 其他用途： 旋转色相 (rotate hues)、自动编号等。
• 参考资源：
• MDN sibling-index()
• MDN sibling-count()
3. @container scroll-state() 查询
• 核心功能： 允许查询滚动容器的特定状态，实现基于滚动行为的渐进增强 (progressive enhancement) 样式。
• 使用前提： 需在目标容器上设置 container-type: scroll-state。
• 可查询状态：
• stuck：查询 position: sticky 元素何时被“粘住”。用途：改变导航栏样式，提示用户内容被覆盖。
• snapped：查询滚动吸附 (scroll-snap) 对齐何时激活。用途：高亮当前吸附的项，或弱化其他项。
• scrollable：查询内容何时溢出容器且可滚动，可检测滚动方向。用途：显示滚动提示，调整填充。
• scrolled：查询内容何时向特定方向滚动。用途：根据滚动方向显示/隐藏头部或导航栏。
• 参考资源：
• Chrome Blog: CSS Scroll State Queries
• MDN: Container scroll-state queries
4. text-box 属性
• 核心功能： 精确控制文本框的垂直间距，去除字体默认包含的“半行高” (half-leading) 空白。
• 解决问题： 解决 Web 字体渲染中，字体包含额外空白导致文本无法精确对齐的问题。
• 典型应用：
• 实现像素级对齐，例如将文本的基线 (baselines) 或 x-高度 (x-heights) 与网格或其他元素精确对齐。
• 示例：h1 { text-box: trim-both cap alphabetic; } 可以同时修剪顶部大写字母高度和底部字母基线处的空白。
• 未来趋势： 作者认为它最终会成为默认行为。
• 参考资源：
• Chrome Blog: CSS text-box-trim
5. typed attr() 函数
• 核心功能： attr() 函数的增强版，允许在 CSS 中直接、类型安全地使用 HTML 属性值，并支持类型检查和回退 (fallback)。
• 优势： 提供了 HTML 和 CSS 之间强大的桥梁，使得 CSS 可以根据 HTML 属性动态调整样式。
• 典型应用：
• 传递颜色： background: attr(data-bg color, black); 可以从 data-bg 属性获取颜色，如果无效则使用 black。
• 传递数字： grid-template-columns: repeat(var(--_columns), 1fr); 结合 CSS 变量从 data-columns 获取数字值。
• 类型验证： 使用 type() 函数验证属性值是否符合预设的关键字列表，例如 scroll-snap-align: attr(scroll-snap type(start | center | end));。
• 参考资源：
• Chrome Developers Blog: Advanced attr()
• Temani Afif's post

nerdy.dev

4 CSS Features Every Front-End Developer Should Know In 2026

Toolbelt worthy, powerful, and game-changing CSS you need for 2026.

AI 摘要：文章详细介绍了如何在移动端利用加速计 (accelerometers) 和运动传感器 (motion sensors) 增强网页动画的用户体验。作者指出桌面端基于鼠标的动画在移动端会“失效”，并提出了通过 DeviceMotionEvent 和 DeviceOrientationEvent API 来弥补这一差距。文中涵盖了环境检测、权限处理（尤其强调 iOS 的用户手势要求）、DeviceMotion 和 DeviceOrientation 两种传感器的应用场景（运动跟踪与绝对角度）、如何将传感器数据映射到 CSS 变量以控制动画的旋转和位移，并最终实现更具沉浸感的交互效果。文章还探讨了如何将移动端的动态感受引入桌面端。