AI 摘要：本文详细介绍了 CSS 新增的 shape() 函数在创建复杂形状方面的应用，特别是在使用直线和弧线绘制 CSS 形状时的强大功能。作者通过具体示例和实践，展示了如何利用 shape() 函数结合 CSS 特性（如变量、单位和数学函数）创建各种形状，介绍了 shape() 的基本命令（如 from、line、hline、vline ），建议优先使用 line 命令以提高代码可读性，并对比了 shape() 与传统方法（如 clip-path 和 mask）的适用场景。此外，文章还提供了 SVG 到 CSS 的在线转换工具，方便开发者快速转换代码。

CSS-Tricks

Better CSS Shapes Using shape() — Part 1: Lines and Arcs | CSS-Tricks

This is the first part of a series that dives deep into the shape function, starting with shapes that use lines and arcs.

AI 摘要：本期 Awesome JavaScript Weekly 汇总了 Deno 生态澄清、数据库架构语言争议、JavaScript 内存管理、Electron 性能优化等前沿技术文章，同时推荐了 GitHub 个人资料生成器、反检测爬虫工具等热门开源项目，涵盖开发实践与工具生态。

1. 技术文章精选
• Deno 生态现状
• Reports of Deno's Demise Have Been Greatly Exaggerated
驳斥 Deno 生态衰落的传言，分析其持续迭代的活跃社区和近期功能更新。
• 数据库架构设计争议
• Stop Inventing DB Schema Languages
批评过度设计数据库模式语言的现象，提倡复用现有 SQL 标准与工具链（如 Kysely）。
• JavaScript 知识挑战
• Javascript Guess the Output Quiz
通过交互式测验解析 JavaScript 隐式类型转换、作用域等易错特性。
• 安全实践指南
• JavaScript Security Best Practices
从依赖审计、CSP 策略到沙箱隔离，系统化阐述前端安全防护方案。
• 内存管理深度解析
• How Memory Works in JavaScript and Node.js
对比 V8 引擎堆栈内存分配、垃圾回收机制及 Node.js 进程内存限制的调优策略。
• Electron 性能优化
• 6 Ways Slack/Notion/VSCode Improved Electron Apps
总结懒加载、进程隔离、V8 快照等六大优化手段的落地案例。
• JavaScript 语言特性
• Symbol.unscopables
MDN 官方文档更新，详解 Symbol.unscopables 在 with 语句中的作用。

2. 工具与框架
• 新兴框架
• Moose: TypeScript 分析后端框架
专为数据分析场景设计的全栈框架，支持实时聚合与可视化管道。
• 开发工具
• Slides.html with Vanilla JS
纯原生 JavaScript 实现的轻量级幻灯片工具，无依赖、可嵌入式部署。

3. 热门开源项目
• github-profile-header-generator: 自动化生成个人主页横幅图像
• rebrowser-patches: 对抗 Cloudflare 检测的 Puppeteer/Playwright 补丁集
• wBlock: Safari 高性能广告拦截器
• Checkmate: 自托管服务器监控工具，支持实时可视化
• ai-digest: 代码库聚合工具，输出 Markdown 供 AI 分析

Deno

Reports of Deno's Demise Have Been Greatly Exaggerated | Deno

Addressing recent Deno criticisms and sharing our vision for the future

AI 摘要：本文分享了 Git 核心开发者常用的配置设置，并探讨了这些设置为何应成为默认值。文章分为三部分：明显改进 Git 的配置（如分支排序、标签排序、默认分支、差异算法等）、无害且可能有用的配置（如自动纠正提示、提交时显示差异等），以及个人偏好的配置（如合并冲突样式、拉取默认行为等）。作者通过实际示例和配置代码，详细解释了每个设置的作用和优势。

TLDR
• 提供了一组 Git 配置代码，可直接复制到 ~/.gitconfig 文件中，涵盖分支、标签、差异、推送、拉取等优化设置。

How do Git core devs configure their Gits?
• 介绍了 Git 核心开发者通过邮件列表讨论的“春季大扫除”实验，参与者分享了他们认为应成为默认的 9 项配置和 3 个别名。
• 这些配置包括 merge.conflictstyle、rebase.autosquash、diff.algorithm 等。

Clearly Makes Git Better
1. Listing branches
• 使用 branch.sort = -committerdate 按提交日期排序分支，column.ui = auto 以列格式显示分支。
2. Listing tags
• 使用 tag.sort = version:refname 按版本号排序标签，避免字母顺序的问题。
3. Default branch
• 设置 init.defaultBranch = main 避免每次初始化仓库时的警告。
4. Better diff
• 使用 diff.algorithm = histogram 改进差异算法，diff.colorMoved = plain 高亮移动的代码。
5. Better pushing
• 设置 push.autoSetupRemote = true 自动设置上游分支，push.followTags = true 自动推送标签。
6. Better fetching
• 使用 fetch.prune = true 和 fetch.pruneTags = true 自动清理已删除的远程分支和标签。

Why the Hell Not?
1. Autocorrect prompting
• 设置 help.autocorrect = prompt 在输入错误命令时提供纠正建议。
2. Commit with diffs
• 使用 commit.verbose = true 在提交消息编辑器中显示完整差异。
3. Reuse recorded resolutions
• 启用 rerere.enabled = true 和 rerere.autoupdate = true 自动重用冲突解决方案。
4. Global ignore file
• 设置 core.excludesfile = ~/.gitignore 使用全局忽略文件。
5. Slightly nicer rebase
• 使用 rebase.autoSquash = true 和 rebase.autoStash = true 优化变基操作。

A Matter of Taste
1. Better merge conflicts
• 使用 merge.conflictstyle = zdiff3 在冲突标记中显示原始内容。
2. Better pulling
• 设置 pull.rebase = true 将拉取默认行为设为变基而非合并。
3. Run the fsmonitor processes
• 启用 core.fsmonitor = true 和 core.untrackedCache = true 加速大仓库的状态检查。

GitButler

How Core Git Developers Configure Git

What `git config` settings should be defaults by now? Here are some settings that even the core developers change.

此工具可将使用 <path d=“...”> 创建的 SVG 形状转换为 CSS 形状（使用 clip-path 的新 shape() 函数制作）
单元素实现，可用于图像并支持渐变色

AI 摘要：本文介绍了由 CSS 形状专家 Temani Afif 开发的新工具，该工具可将 SVG 路径（ path() ）转换为新的 CSS shape() 函数命令。文章对比了两者的语法差异，并强调了该工具作为学习资源的实用性，尽管 path() 并未被弃用，但 shape() 提供了更直观的坐标描述方式。

AI 摘要：Jeremy Keith 分享了他在新项目中默认使用的 CSS 实践和代码片段，包括逻辑属性、用户偏好查询、视图过渡、自定义属性和流体排版等现代 CSS 特性，并提供了多个可复用的实用代码片段，强调可访问性和渐进增强的重要性。

1. CSS 习惯用法
• 默认使用逻辑属性（如 inline-start 替代 left），以支持多语言书写方向。
• 通过 prefers-reduced-motion 和 prefers-color-scheme 查询优化用户体验。
• 视图过渡（View Transitions）默认启用，但包裹在减少运动偏好查询中。

2. 颜色与自定义属性
• 使用 OKLCH 色彩空间，即使从十六进制值开始转换。
• 自定义属性的应用策略：避免过早优化，仅在值重复多次时提取为变量。

3. 排版技术
• 使用 clamp() 实现流体文字大小，结合 Utopia 工具调整类型比例。
• 新属性 text-wrap: pretty/balance 和 hanging-punctuation 优化文本换行与标点悬挂。

4. 可复用代码片段
• figcaption 样式：居中短文本，多行时左对齐（max-inline-size: max-content）。
• 焦点样式：a:focus-visible 使用 currentColor 和相对单位（0.25em）。
• 低特异性技巧：通过 :where() 选择器或层叠层（@layer core）确保样式可覆盖。

5. 未来改进方向
• 探索 :has() 选择器和容器查询的更多用例。
• 采用 lh 单位（行高）控制块间距。

6. 读者互动：
• Carlos Espada 补充了 :has() 的实用案例（如 body:has(dialog[open]) 禁用滚动）
• Marc Görtz 提到迁移至 oklch() 色彩和 lh 单位的实践

AI 摘要：本期 Frontend Focus 聚焦 2025 年 Google I/O 大会的前端技术动态，涵盖 Gemini AI 集成、CSS 新特性、开发者工具升级等内容，同时推荐了设计系统构建、Web 可访问性改进等实用工具与文章。

1. Google I/O 2025 重点更新
• 开发者主题演讲：展示 Gemini AI 如何辅助 Web 开发（1 小时 10 分钟）。
• Chrome 与 Web 新特性：包括 Baseline 标准、CSS 功能（如 CSS Carousels）、Core Web Vitals 优化等。
• AI 集成：Gemini AI 将嵌入 Chrome 和开发者工具，提供多模态 Prompt API。
• 工具支持：Visual Studio Code 新增 Baseline 兼容性支持。
• 来自 Google I/O 10 的 2025 项更新：CSS 轮播、AI 驱动的 DevTools、具有多模式功能的提示 API 等

2. AI 与开发工具
• 'MCP is the Coming of Web 2.0 2.0'：Anil Dash 探讨 LLM 与第三方工具交互的开放协议潜力。 #MCP
• Mozilla 观点：呼吁在谷歌反垄断案中平衡搜索与浏览器竞争。
• 开发人员浏览器 Polypane 24.1 新增 CSS 选择器测量工具。
• Safari Technology Preview 219 和 Chrome 137 DevTools 新功能。

4. 教程与文章精选
• CSS 技巧：
• Temani Afif 使用 clip-path: shape() 创建动态 Blob 形状。
• Jeremy Keith 分享实用 CSS 代码片段。
• Zoran Jambor 演示弹性网格布局（Flexible Wrapping CSS Grid）。
• 可访问性：
• HTML 邮件的可访问性仍待改进（基于 40 万封邮件分析）。
• Chris Coyier 探讨 RTL 语言布局翻转问题。
• 多篇文章讨论 WCAG 2 合规性和图片可访问性解决方案。

5. 工具与资源
• AI 相关：
• prompt-kit：基于 shadcn/ui 的 AI 应用组件库。
• Polarr 的 AI Color Match：图像色彩匹配工具。
• 开发工具：
• Datastar：结合 Alpine.js 与 htmx 的超媒体框架。
• jsPad：支持多技术栈的在线代码沙盒。
• Crosspost：跨社交网络一键发布工具。
• ColorPocket：用于组织和选择颜色的 Chrome 扩展程序

6. 其他亮点
• 趣味实验：Eric Parker 尝试用 Windows 95 浏览现代网页（体验极差）

io.google

Google I/O 2025: Developer keynote

Don’t miss Google I/O, featuring product launches, innovations, and insights. Tune in for the live keynotes and sessions.

AI 摘要：本文探讨了如何通过 CSS 实现多级嵌套列表的复杂编号样式（如法律文档中的 1. (a) (i) (A) 格式），并对比了传统选择器、CSS 嵌套和 @counter-style 的解决方案，同时强调了 HTML type 属性作为无 CSS 回退方案的重要性。

1. 问题背景
• 读者提问如何实现法律文档中常见的五级嵌套列表编号（如 1. (a) (i) (A) ）
• 示例场景：物业管理条例中的条款层级结构

2. 基础解决方案
• 传统选择器方法：通过 ol ol 层级选择器逐级设置 list-style-type （如 decimal 、lower-alpha ），但代码冗长且难以维护
• CSS 嵌套优化：利用 CSS 嵌套简化代码结构，使样式与 HTML 层级一一对应

3. 法律文档的特殊需求
• 括号 (a) 或 (i) 是法律格式的必需部分，需通过 @counter-style 自定义计数器样式：
• 扩展预定义样式（如 lower-alpha ），添加 prefix 和 suffix（如 (a) ）。
• 示例： enclosed-lower-alpha 样式将 a 包裹为 (a) 。

4. 无 CSS 兼容性方案
• 使用 HTML type 属性（如 type="a" ）确保旧浏览器或无 CSS 时仍显示正确编号。
• 法律文档中此功能至关重要，避免格式错误导致的法律歧义。

5. 相关资源扩展
• 文中推荐了 CSS-Tricks 关于 list-style 、 @counter-style 和计数器样式的其他文章，供深入学习。

CSS-Tricks

A Reader's Question on Nested Lists | CSS-Tricks

Answering a reader's question about how to create a complex numbering system with CSS list counters.