AI 摘要：本文详细介绍了 Shopify 如何在持续迭代和数百万用户使用的前提下，将 Shopify Mobile 与 Shopify POS 成功迁移到 React Native 新架构 (Fabric + TurboModules)。迁移过程中坚持“最小代码改动、新旧架构并行兼容、性能稳定性不退化”三大原则，解决了多种迁移使用中的难题，并与开源社区和 Meta 合作推动性能优化。最终实现了稳定迁移、性能提升和生态回馈，并分享了对其他团队的建议与未来优化方向。

1. 迁移策略与原则
- 最小化改动优先，优化与重构延后来做
- 保持新旧架构并行兼容，避免开发停滞
- 确保性能与稳定性不退化，关注 TTI 与 crash-free 指标
2. 迁移过程与技术实现
- Native 模块：仅改造不兼容模块，TurboModules 迁移延后规划
- 依赖管理：升级/替换库，减少依赖规模
- 首先升级到最新 React Native 版本，减少低层 bug 影响
- 应用代码最小改动，增加 deprecation warning 便于后续清理

AI 摘要：传统的 JavaScript 数组方法如 .sort() 、 .reverse() 和 .splice() 会直接修改原数组，可能带来难以排查的 bug，尤其在 React 等依赖 不可变数据 (immutability) 的框架中。ES2023 新增了 toSorted() 、 toReversed() 和 toSpliced() ，它们返回新数组而不会变异原始数据，从而提升代码可维护性和安全性。这一细小的语法改进带来了巨大的开发体验优化，特别是在现代前端应用中。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 新的不可变 (non-mutating) 方法
• toSorted()：返回排序后的新数组，允许自定义比较函数
• toReversed()：返回反转后的新数组，避免破坏原数组
• toSpliced()：返回元素增删后的新数组，保持原数组不变

2. 在 React 中的应用场景
• 保证状态不可变性，触发正确的重新渲染
• 常见用法：展示反向排序的任务列表、根据条件生成新数组
• 避免额外的深拷贝操作（如 structuredClone()）

3. 浏览器与环境支持
• Chrome/Edge 110+、Safari 16+、Firefox 115+、Node.js 20+ 原生支持
• 旧环境可依赖 core-js 提供 polyfill
• 与其他 ES2023 特性互补，如 optional chaining、top-level await

AI 摘要：本文介绍了 Remotion 与 Mediabunny 的合作。Remotion 决定停止自身的 Media Parser 和 WebCodecs 项目，全面支持由 Vanilagy 开发的 Mediabunny，该库具备更快性能、更佳架构和更自由的许可。此举包括资金赞助、代码贡献和推广支持，目标是推动 Mediabunny 成为 Web 上的首选多媒体工具库，从而让浏览器能实现更高效的视频处理与应用。

AI 摘要：本文介绍了 Web.dev 更新的 Learn CSS 课程，新增了 9 个涵盖最新 CSS 功能的模块，例如 CSS 嵌套 (nesting)、容器查询 (container queries)、自定义属性 (custom properties)、锚点定位 (anchor positioning) 等。此次更新反映了近四年 CSS 的重大进展，模块同时关注 Baseline 功能保证了实用性，适合学习或提升前端开发技能的开发者。

1. Learn CSS 课程的演进
• 2021 年推出的 Learn CSS 是 Web.dev 基础 Web 开发内容的起点
• 四年间 CSS 特性快速发展（如容器查询从无到广泛可用）
• 每月数千人使用此课程，促使更新迭代

2. 本次更新的核心内容
• 新增 9 个重要模块：
• CSS 嵌套
• 容器查询
• 自定义属性
• 计数器
• 光标和指针
• 锚点定位
• 浮层和对话框
• 单页应用 (SPA) 的视图过渡
• 路径、形状、剪切和遮罩
• 更新后的模块紧贴近几年 CSS 标准发展与浏览器支持

3. Baseline 功能的聚焦
• 所有教学功能均已达到或即将进入 Baseline 状态
• 包括 Interop 2025 中的新特性，如锚点定位和视图转换
• 每个模块配有明确的浏览器支持信息，保证学习即用

AI 摘要：本文通过构建粒子效果的案例，揭示了在 CSS 中实现颜色动态变化时会遇到的限制（如 RGB 插值导致灰色过渡），并提出利用 CSS filter 中的 hue-rotate() 作为更佳的解决方案。同时，作者还演示了如何使用随机性和闪烁效果（twinkling）增强动画的自然感受，最后预告了即将上线的动画课程。

1. 引言：粒子特效与颜色变化的重要性
• 粒子从随机颜色开始，逐渐淡出时改变色相 (hue)
• 动画核心在于“颜色渐变”而非单一随机取色

2. 颜色生成的方式
• 使用 RGB 随机值生成色彩 → 结果缺乏统一风格
• 使用 HSL 固定饱和度和亮度，只在色相上变化 → 形成更加统一的色调效果

3. 从单一颜色到颜色过渡
• 初步尝试利用 HSL 渐变 → 浏览器实际以 RGB 插值，导致过渡中间产生灰度色
• HSL 的 0° 与 360° 等效，无法实现完整色相轮动画

4. CSS 渲染限制：RGB 插值问题
• color-transition 过程中浏览器默认以 RGB 渠道计算
• 中间值往往失真，无法表现我们感知的平滑色相变化

5. CSS filter 的解决方案
• 使用 filter: hue-rotate() 实现真实的色相旋转
• 可实现超过 180° 的平滑过渡
• 注意：该方法常使颜色显得更暗，需要选择更亮或低饱和度的初始色

6. 增强动画的细节：Twinkling 闪烁效果
• 使用 keyframes + 随机参数产生轻微闪烁，避免所有粒子同步
• 过渡不再是死板的线性透明度衰减，而是更自然的消隐效果

AI 摘要：ForgeUI 是一个基于 React 的实验性组件库，重点在于“动画优先”的设计理念，提供动画表单、动态卡片、闪烁文字等现代化 UI 组件，旨在帮助开发者快速实现富交互界面。其技术栈包括 Next.js、TypeScript、Tailwind CSS、shadcn/ui 和 Framer Motion。项目定位更像是作者的“个人实验室”，供开发者参考与取用，而非正式社区驱动的开源产品。

AI 摘要：本文深入介绍了高质量字体 (high-quality fonts) 所附带的各种隐藏功能，尤其是 OpenType 及 Variable Fonts 的特性，如 axes 变化、替代字形 (alternates)、swashes、数字样式 (numerals)、小型大写 (small caps)、上下文替换 (contextual alternates) 等，并结合 CSS 的相关属性给出实践方式。文章核心思想是：字体远不止「粗体/斜体」，合理启用这些特性能够提升应用设计的可读性与美感。

1. Variable Axes（可变字体轴线）
• OpenType 字体支持多个轴 (axes)，如 wght(weight)、wdth(width)、slnt(slant)、ital(italic)、opsz(optical size)。
• CSS 提供对应属性 (如 font-weight)，但对于自定义轴需用 font-variation-settings。
• font-variation-settings 存在级联冲突问题，可通过 CSS variables 解决。

2. Alternates（替代字形）
• Stylistic alternates：用 salt、ss01、cv01 等替换字符形态（如 “a”、“g”）。
• CSS 可通过 font-feature-settings 或 font-variant-alternates 控制，后者更可读，但同样有继承覆盖问题。

3. Swashes（装饰性字形）
• 一些字体附带装饰性笔画 (swashes)，可增强标题表现力。
• 使用 font-feature-settings 或 font-variant-alternates 启用。

4. Numerals（数字字形样式）
• 字体可包含 lining numerals（对齐大写字母高度）、old-style numerals（小写高度）、tabular（等宽）、proportional（按比例）。
• 使用 font-variant-numeric 控制，如 tabular-nums、oldstyle-nums。
• 场景：表格更适合 tabular，正文常用 proportional 或 old-style。

5. Small Caps（小型大写）
• 小型大写可减少正文中大写字母突兀的问题。
• 使用 font-variant-caps（small-caps 或 all-small-caps）。
• 避免浏览器自动合成（非真正小型大写），可通过 font-synthesis 禁用。

6. Contextual Alternates（上下文替换）
• 自动替换特定上下文中的字符形态，如 → 符号、@ 符号的排版优化。
• 多数字体默认启用，可通过 font-variant-ligatures: no-contextual 禁用。

7. Further Reading（扩展资料）
• 提及更多 OpenType 特性（连字、分数、历史字形、花饰等）。
• 推荐网站、演讲与「Variable Fonts Primer」。

AI 摘要：本文回顾了前端开发工具从 2009–2013 的简洁时代（以 JavaScript、jQuery、HTML、CSS 为主）到 2015 后的工具爆炸时期（SPA、TypeScript、各类框架、构建工具与 AI 工具层出不穷）的演变，指出当下开发者陷入“工具过载”，导致决策困难、学习曲线陡峭、工具频繁替换（tool churn）等问题。作者提倡理性选工具：优先选择成熟、社区验证的方案，避免盲目追逐潮流，注重团队稳定性、代码可维护性和适用性，而非工具数量和新潮程度。

AI 摘要：本文通过 npm 中 chalk、debug、duckdb 等热门包遭遇钓鱼攻击事件，指出现有包管理器的安全模型存在设计性缺陷，暴露了软件供应链体系的脆弱性。作者主张借鉴 Linux 发行版与金融行业经验，对包管理器进行系统性升级，包括强制性签名、多维护者审查、抗钓鱼认证、自动化恶意检测、透明构建流程与依赖权限隔离。核心观点是：包管理器已成为现代软件的关键基础设施，必须以更高安全标准来治理。

AI 摘要：文章探讨了 UI 动画在交互设计中的价值与风险，提出动画必须有明确目的，且要考虑交互频率与速度感知。作者强调：合适的动画能提升可预测性与愉悦感，不合理的动画则会破坏效率与信任。有时，最佳的“动画”就是没有动画。

1. 动画的双刃性
• 正确使用动画可让界面更自然、流畅、愉快
• 滥用动画则会使界面显得缓慢、不确定，甚至损害用户信任

2. Purposeful Animations（有目的的动画）
• 动画需服务于具体功能或信息传达，而非纯粹装饰
• 案例：Linear 用动画展示功能逻辑；按钮点击缩放增强响应感
• 动画可营造 delight（愉悦），但仅适合低频使用，避免变成负担

3. Frequency of Use（使用频率）
• 高频操作（如 Raycast 命令输入、键盘快捷键）不应使用动画，否则会拖慢效率
• 低频操作可适度加入动画，提高体验的独特性和愉悦感
• hover 或菜单切换等高频交互场景更适合零动画或极快动画

4. Perception of Speed（速度感知）
• 动画速度需足够快，保持用户与界面的即时连接
• 一般 UI 动画时长应低于 300ms
• 案例：下拉菜单在 180ms 内更灵敏，tooltip（提示框）应有初始延迟但切换时不应再延迟

5. 设计原则与结论
• 动画不是必然元素，而是用户体验的加速器或负担
• 最佳实践：以用户需求为导向，基于目的、使用频率和性能感知来判断是否加入动画
• 有时，没有动画，才是最好的设计

AI 摘要：本文从零开始搭建一个生产级别的 Express 5 应用，使用 TypeScript、ESLint + Prettier、Vitest + Supertest 进行规范和测试，展示了如何结构化 Express 项目（分层、按功能归档），如何实现 REST API 的路由、健康检查、日志、CRUD、JWT + cookie 的认证体系，并结合 Prisma + PostgreSQL 构建持久化层。文章采用 TDD（Test-Driven Development）的方法，通过分模块讲解与示例代码，让读者最终完成一个可扩展、可维护的现代 Express 应用。

1. 项目初始化与基础配置
• 使用 npm 初始化 Express + TypeScript 项目
• 配置 tsconfig.json 以启用严格模式和 ES Module
• 运行脚本 (build、start、dev) 设置

2. 代码规范与开发工具
• ESLint、Prettier 用于一致性和规范化
• 配置 lint 规则，包括 unicorn、simple-import-sort
• 添加格式化和修复脚本

3. 测试驱动开发 (TDD)
• 使用 Vitest + Supertest 写单元测试和集成测试
• 初始化 Vitest 配置（Node 环境）
• 实现第一个健康检查 (health-check) 测试 → 控制器 → 路由

4. 架构拆分与中间件
• 将 app.ts 与 server.ts 分离
• 使用 morgan 日志中间件
• 功能分组 (features) + MVC 模式 (无 view 层)
• 编写自定义 asyncHandler 简化 error 处理

5. 数据库与数据层 (Prisma + PostgreSQL)
• 初始化 Prisma schema
• 使用 UserProfile 模型
• 实现数据库连接与 PrismaClient 管理
• Facade 模式封装数据库 CRUD

6. 测试数据与校验
• 使用 Factory Functions 快速生成模拟数据
• 使用 Zod 校验 body / query / params
• 对比 express-validator 的类型推断问题

7. 认证与授权 (Authentication & Authorization)
• 集成 cookie-parser 用于读取 cookies
• 使用 JWT + bcrypt 实现登录 / 注册 / 登出
• setJwtCookie、clearJwtCookie、getJwtTokenFromCookie helpers
• Middleware requireAuthentication 实现受保护路由

8. 用户功能与 REST API CRUD
• /user-profiles 列表（带分页）测试与实现
• 单条获取 (GET by ID)、更新 (PATCH)、删除 (DELETE) 的 TDD 流程
• 考虑异常处理：404、400、409
• 自定义 getErrorMessage 工具统一报错输出

9. 项目结构与总结
• 最终应用结构清晰：src/features/*
• Express + TypeScript 项目的完整生产级最佳实践
• 扩展性强，可直接应用于实际开发

AI 摘要：文章报道了 2025 年 9 月爆发的 Shai-Hulud 恶意软件攻击，被认为是史上最大规模、最危险的 NPM 供应链攻击，已波及 CrowdStrike 及数百个流行 JavaScript 包。攻击者通过在维护者的包中注入恶意脚本（bundle.js）进行秘密凭据窃取和持久化后门植入，利用自动化工作流在 CI/CD 环境中持续外泄密钥。文中详细给出已确认被攻击的包清单、潜在影响范围及防护建议，包括立即停更、扫描环境、凭据轮换与审计 GitHub 工作流。

1. 攻击背景与规模
• Shai-Hulud 是迄今为止最严重的 NPM 供应链攻击
• 影响范围涵盖高人气的 @ctrl/tinycolor、CrowdStrike 官方包及数百个开源组件
• 恶意代码可自动触发，扩大横向传播

2. 攻击技术与机制
• 注入 bundle.js 脚本，在安装包时执行
• 使用 TruffleHog 扫描本地文件和代码库中的密钥（npm、GitHub、AWS、GCP、Azure 等）
• 创建隐藏的 GitHub Actions 工作流文件（shai-hulud-workflow.yml），用于在 CI/CD 阶段外泄凭据
• 双重目标：密钥窃取 + 持久后门部署

3. 影响与风险评估
• 大量开发者环境（本地 + 云端）已可能泄露敏感凭据
• 攻击持续性强，即便删除恶意包后，持久化机制仍可能存活
• 企业级安全厂商 CrowdStrike 受影响，进一步放大危机

4. 应对建议与缓解措施
• 立即扫描所有终端与构建环境，确认是否安装受影响包
• 暂时冻结 npm 包的更新，避免进一步扩散
• 轮换全部相关凭据（GitHub、npm、AWS、GCP、Azure 等）
• 审计 GitHub 工作流，排查 shai-hulud-workflow.yml 等异常文件
• 对流程与自动化管道进行全面安全加固