AI 摘要：本期 JavaScript Weekly 是一份精简版通讯，主要涵盖 TC39 提案动态（如 Records/Tuples 提案被撤回，但 Enum 等新提案进展）、工具更新（如 Hako JS 引擎）、框架/库发布（WebStorm 2025.1），以及技术文章（WebGL 解析、React 实战案例等）。

1. TC39 提案动态
• Records/Tuples 提案撤回：原计划为 JS 引入不可变数据结构，但 TC39 会议决定终止
• 新提案进展：
• 将枚举引入 JavaScript 的提案进入 Stage 1（兼容 TypeScript 语法） Slidedeck
• Deferred re-exports proposal 进入 Stage 2，支持延迟导出模块
• Upsert 和 Composites 提案已得到推进

2. 工具与库
• Hako JS 引擎：基于 QuickJS 的高性能可嵌入引擎，可编译为 WebAssembly #wasm
• Firefox 139：默认启用 Temporal API（日期时间处理）

3. 发布与更新
• WebStorm 2025.1：强化 AI 支持、Angular/Next.js 集成
• 其他：tldts 7.0（URL 解析）、Redux Toolkit 2.7、Bun 1.2.10……

4. 文章与视频
• WebGL 渐变效果解析：通过 GLSL 实现流动渐变的技术详解
• SvelteKit 单页应用：无需服务器的单文件开发方案
•  部署 TypeScript：最新进展和可能的未来方向  Dr. Axel Rauschmayer

AI 摘要：本文通过对比 Tailwind 和 Linaria 在初始加载性能（LCP）和交互性能（INP）上的表现，发现 Tailwind 虽能减少 CSS 体积（-13%）但增加了 HTML/JS 大小（HTML 最高 +162%），而实际初始加载性能差异可忽略不计。然而，Tailwind 的通用选择器（如 * 和伪元素）导致交互性能下降（如下拉菜单延迟增加 50%）。结论：两者性能差异对多数项目影响微小，框架选择应优先考虑开发体验而非性能优化。

Developerway

Tailwind vs Linaria: Performance Investigation

Investigating performance of Tailwind vs Linaria frameworks, with a focus on initial load and interaction performance.

AI 摘要：本文探讨了 CSS 预处理工具（如 Sass）和后处理工具（如 PostCSS）的演变，指出随着原生 CSS 功能的增强（如变量、嵌套）以及新兴工具（如 Lightning CSS、Tailwind）的崛起，后处理工具逐渐成为主流选择。作者分析了技术趋势变化的原因，并提供了迁移建议。

1. 背景与分类
• 预处理工具（Pre-processors）：如 Sass、Less，需编译为合法 CSS。
• 后处理工具（Post-processors）：如 PostCSS、Lightning CSS，直接处理 CSS 文件并优化输出。

2. 后处理工具的优势
• Autoprefixer 曾是必备插件（自动添加浏览器前缀），现因浏览器兼容性提升需求减少。
• 关键转折点：
• 原生 CSS 支持变量和嵌套。
• Tailwind 4 放弃预处理支持。
• Lightning CSS 的高性能替代方案。

3. 原生 CSS 的进步
• 已支持变量（--var）和嵌套语法，减少对预处理器的依赖。
• 未来将引入 if() 函数，但模块化拆分仍需依赖工具（如 postcss-import）。

4. Tailwind 的影响
• Tailwind 4 明确不支持预处理器，推荐自身作为“预处理器替代”。
• 仍可通过 .css 扩展名与 Sass 兼容，但流程更复杂。

5. Lightning CSS 的崛起
• 性能优势：比 PostCSS 快 100 倍，支持 Vite 集成。
• 功能覆盖：替代 postcss-import 、autoprefixer 等插件。
• 开发者如 Chris Coyier 已转向 Lightning CSS。

6. 迁移建议
• 仅需变量/嵌套 → 原生 CSS。
• 需模块化 → Lightning CSS。
• 需混合（Mixins） → Tailwind 的 @apply。
• 需复杂逻辑（if/for） → 暂保留 Sass。

CSS-Tricks

So, You Want to Give Up CSS Pre- and Post-Processors... | CSS-Tricks

There was once upon a time when native CSS lacked many essential features, leaving developers to come up with all sorts of ways to make CSS easier to write over the years.

AI 摘要：本文详细介绍了 Claude Code（Anthropic 开发的命令行工具）的最佳实践，旨在帮助工程师高效利用这一低层级、高灵活性的代理式编程工具。文章涵盖环境配置优化、工具集成、常见工作流设计、协作技巧及自动化场景应用，强调通过定制化设置和明确指令提升模型输出质量。

1. 自定义环境配置
• CLAUDE.md 文件：作为核心上下文文档，自动加载到对话中，可记录常用命令、代码风格、测试指南等。支持多层级放置（项目根目录、父/子目录、用户主目录）。
• 工具权限管理：通过交互提示、命令行或配置文件（ .claude/settings.json ）定制允许的工具（如文件编辑、Git 操作），平衡安全性与灵活性。
• GitHub 集成：安装 gh CLI 以增强 Claude 的 GitHub 交互能力（创建 PR、处理 Issue 等）。

2. 扩展工具链
• Bash 工具：通过文档或 --help 指令让 Claude 学习自定义脚本。
• MCP 服务器：连接 Puppeteer 等工具，支持项目级或全局配置（ .mcp.json ）。
• 自定义斜杠命令：将重复工作流模板（如修复 Issue）保存为 Markdown 文件，通过 / 调用并传递参数。

3. 高效工作流模式
• 探索-计划-编码-提交：分阶段任务分解，利用子代理（subagents）验证细节，触发深度思考模式（"think harder"）。
• 测试驱动开发（TDD）：先编写测试用例，迭代实现代码，确保通过验证。
• 视觉迭代：结合截图工具（如 Puppeteer），以设计稿为参考实现 UI 并优化。
• 安全 YOLO 模式：在隔离环境中跳过权限检查，快速生成代码（需谨慎使用）。

4. 协作优化技巧
• 明确指令：具体需求（如“覆盖用户未登录的测试用例”）显著提升输出质量。
• 图像/URL 输入：直接粘贴截图或提供链接，辅助视觉任务或代码分析。
• 上下文管理：频繁使用 /clear 清理无关内容，用 Markdown 清单跟踪复杂任务进度。

5. 自动化与高级应用
• 无头模式（Headless）：集成到 CI/CD，自动处理 Issue 分类或代码审查。
• 多 Claude 协作：并行实例分工（如编码与验证），结合 Git worktrees 隔离任务环境。
• 管道化处理：通过 claude-p 和 JSON 输出嵌入数据处理流程。

Anthropic

Claude Code Best Practices

A blog post covering tips and tricks that have proven effective for using Claude Code across various codebases, languages, and environments.

Retypeset 是一款基于 Astro 框架的静态博客主题，中文名为重新编排。本主题以 活版印字 为设计灵感，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。