AI 摘要：本文探讨了如何利用现代 CSS 的 shape() 函数与 clip-path 属性，构建出带有圆角、延展弧线的标签 (Tabs) 样式。文章从早期依赖多元素遮罩的实现方式出发，逐步演示如何使用 shape() 绘制可响应的标签形状，并通过变量 (CSS Variable) 优化灵活度。后续还包含兼容性 fallback、单方向滚动控制 overflow-inline/overflow-block 的技巧，以及对可访问性 (Accessibility) 实现的反思。

1. 背景与旧方案
• 作者回顾早期制作“round-out tabs”的方案，需要为每个标签使用四个额外元素来模拟圆角连接效果。
• 这种方法复杂、难维护且受限于层叠遮罩实现。

2. 使用 shape() 实现圆角标签
• 介绍 shape() 函数与 clip-path 的结合，能直接以绘图指令定义形状，无需额外 DOM 元素。
• shape() 的指令包含 from、curve、vline、hline 等步骤，用以绘制从矩形裁剪出的弧线标签外形。
• 每一步演示曲线、直线和坐标计算，使形状既可固定又可相对灵活。
• 最终实现完整闭合形状，只显示实际的标签区域。

3. 参数变量化与可动态调整
• 将固定数值（如 10px、20px）抽象为自定义属性 (--tabGirth)，以便根据变量调整标签厚度。
• 使用 Knobs 等交互工具实时修改变量值以测试视觉效果。

4. 外观与行为增强
• 添加 hover 与 active 效果，通过 translate 实现微动。
• 解决非换行标签的滚动问题，利用 overflow-inline: auto 与 overflow-block: clip 控制单方向滚动。
• 使用 filter 为 clip 后的形状添加阴影效果。

5. 浏览器兼容性与 Fallback
• 当前仍有浏览器未完全支持 shape()。
• 提供 @supports 条件判定，未支持时以 border-radius 提供圆角退化方案，保证视觉一致性。

6. 可访问性 (Accessibility) 讨论
• 使用 anchor 作为基础标签实现，并在有 JavaScript 时补上 aria 属性。
• 承认目前键盘导航功能不足，提醒开发者参考更完善的无障碍 Tabs 模式。

7. 相关与延伸参考
• 提到 Temani Afif、Ana Tudor 的圆角或内凹标题组件为现代 CSS 造型提供灵感。

Frontend Masters

Modern CSS Round-Out Tabs

Quite a while back I made a set of “round out” tabs, where the literal tab part of the UI would connect to the content below with a rounded edge that flared out as it connected. A bit tricky of a situation, even now!

AI 摘要：本文通过实例展示如何将 GSAP 动画库与 WebGL 着色器（Shaders）结合，以构建沉浸式网页交互视觉。作者从基础的 HTML 布局与 Three.js 场景搭建开始，逐步扩展至通过 GSAP 动画驱动着色器 uniform 参数，实现包括灰阶渐变、点击波纹、鼠标揭示遮罩、点击与按压的流体扭曲、以及基于滚动的动态模糊等复杂 GPU 动效。文章强调 JavaScript 动画时间线与 GLSL 实时渲染逻辑的联动，让网站视觉能以自然、物理感与交互性呈现。

1. 基础设置与 HTML/CSS 结构
• 构建页面容器与隐藏溢出内容，准备 GSAP Draggable 和 ScrollTrigger 绑定。
• 在 Three.js 环境中创建 Stage 类，负责 Renderer、Camera、Scene 管理。
• 使用 GSAP ticker 同步渲染循环，实现动画与渲染一致更新。

2. WebGL Stage 与平面载入
• 使用 TextureLoader 创建平面 (PlaneGeometry)，加载 DOM 中的图片纹理。
• 将 DOM 元素与 Canvas 中的物体同步，通过正交相机的坐标转换函数转换屏幕坐标到世界坐标。
• 替换标准材质为 ShaderMaterial，导入自定义 vertex/fragment shader。

3. 点击波纹与灰阶渐变效果（Ripple + Grayscale）
• 使用 GSAP Observer 监听点击事件。
• 点击后修改 shader uniform uGrayscaleProgress 在彩色与灰阶之间平滑过渡。
• 添加鼠标点击点 uMouse uniform，使过渡从点击中心扩散。
• 加入顶点波动（Ripple）动画，在 vertex shader 中用正弦函数生成波形变形。
• 结合 GSAP Timeline 同步控制灰度和波纹周期。
• 管理多平面状态，实现点击切换与反向第二动画效果。

4. 纹理遮罩揭示（Texture Reveal Mask Effect）
• 引入双纹理 (uTexture, uTextureBack) 并使用 uMixFactor 控制混合。
• 通过鼠标 hover 事件，使用 Raycaster 定位交互对象。
• 在 fragment shader 中基于鼠标坐标生成圆形遮罩，平滑混合两张纹理。
• 悬停时 reveal 动画开启，离开时渐出还原。

5. 点击按压揭示（Click & Hold Mask Reveal）
• 通过 GSAP Observer 监听 onPress/onRelease/onMove，管理按压持续状态。
• 使用异步 Timeline 表现“按住充能—释放复位”的动画逻辑。
• shader 中使用噪声函数 (noise) 与 uTime 动态扰动 mask，制造液态波动感。
• 实现交互中的纹理扭曲、流动与时间关联视觉。

6. 动态模糊轮播（Dynamic Blur Effect Carousel）
• 结合 GSAP Draggable 与 ScrollTrigger 使轮播支持拖动与滚动同步。
• 计算每个平面到屏幕中心的距离，根据距离动态更新 uBlurAmount。
• 在 shader 中使用多重 Kawase 模糊算法，混合多层模糊采样和平滑区间。
• blur 与 scroll 动态联动，创造景深般的焦点模糊效果。

7. 总结与启发
• GSAP 为动画时序与交互逻辑提供流畅控制。
• Shaders 提供像素级视觉自由度与 GPU 实时渲染性能。
• 在 Web 前端中实现生动视觉，展现设计与技术融合的趋势。

AI 摘要：本文指出大多数开发者在前端实现中无意间给用户加载了远大于实际需求的图片，这浪费了带宽与计算资源。作者以 NextJS <Image> 组件为例，解释 sizes 属性在响应式图片 (responsive images) 中的重要性，并系统讲解了 srcset、sizes、图片加载策略 (lazy vs eager loading)、设备像素比 (DPR) 等概念，最终提供完整的 “Cheat Sheet” 实用总结，帮助开发者高效地为不同屏幕设备提供最佳尺寸的图片。

1. 现实检视 (Reality Check)
• 使用高分辨率原图在小屏幕设备上会导致带宽浪费
• 即使使用 NextJS <Image> ，若缺少 sizes 属性，仍会传输超大图

2. sizes 属性的核心作用
• 明确规定图片渲染尺寸，帮助浏览器选择最佳匹配
• 设置 sizes="100vw" 显著压缩文件大小（最高可减少 25 倍）

3. 响应式图片的基本概念
• 像素限制**：超过屏幕物理限制的像素冗余无意义
• 引入 srcset 与 sizes：提供多种分辨率图片并让浏览器选择最优版本

4. 在复杂布局中的使用
• 当图片宽度并非等于屏幕宽度时，必须结合 sizes 指定实际渲染逻辑
• 支持多断点 (media queries)，可为不同 viewport 设置不同加载策略
• sizes="auto" 仅在懒加载 (lazy loading) 模式下生效，且浏览器兼容性有限

5. 图片加载策略
• loading="eager"：默认立即加载，适合首屏关键图片 (FCP)
• loading="lazy"：延迟加载，推荐用于非关键图片，高效节省资源

6. 设备像素比 (Device Pixel Ratio, DPR)
• 区分 **CSS pixel 与 device pixel
• 对应关系由 DPR 决定，例如 DPR=2 需要两倍分辨率图片
• srcset 支持 w 单位（推荐）和 x 单位（DPR 描述符），前者更适合响应式

7. 实用指南 (Cheat Sheet)
• 固定尺寸图片（如 icon）：设置固定 sizes，srcset 使用 DPR 描述符即可
• 响应式图片：
• 若为首屏内容：指定具体 sizes
• 若非首屏内容：加上 loading="lazy" 并优先用 sizes="auto, ...fallback"

8. 参考资料
• MDN Responsive Images
• HTML Living Standard
• Use density descriptors (web.dev)

Reason Under Pressure

Your Images Are (Probably) Oversized

Or why you should always set the `sizes` and `srcset` attributes on your (responsive) <img> tags.

AI 摘要：本文详细展示了使用 Framer Motion 在 React 项目中实现动画的方式，对比了传统 CSS 实现与 Framer Motion 的简洁 declarative（声明式）方式，并通过 Fade-In、Hover、List Staggering、Drag-and-Drop、Sortable List 等实例演示其强大功能。文章强调了 Framer Motion 的生产级特性（如 gestures、physics、variants、Reorder 等），并给出了初学和进阶的使用方向。

1. 为什么选择 Framer Motion
• 提供生产级动画解决方案，语法简洁，学习成本低
• 完美兼容 React 与 TypeScript，支持 declarative 宣告式写法
• 强大特性：drag 拖拽、spring 物理动画、scroll 动效、shared layouts

2. 开发环境准备与安装
• 使用 Vite 初始化 React + TypeScript 项目
• 使用 npm install framer-motion 安装依赖
• 提供 Demo 链接 便于快速试验

3. 动画实例逐步讲解
• 基本 Fade-In：对比 CSS keyframes 与 motion.div（initial/animate/transition）
• Hover 动画：对比 Tailwind hover/active 与 whileHover whileTap 的简洁写法
• List Staggering：传统 nth-child + 延迟 VS variants + staggerChildren 的声明式方案
• Drag-and-Drop：利用 drag、dragConstraints 等 props 快速实现拖拽，不需手写 DOM 监听
• Sortable List：利用 Reorder.Group 与 Reorder.Item 实现可排序列表的流畅交互

4. 总结与进阶提示
• Framer Motion 让复杂动画开发更直观和简洁
• 初学者可从 motion.div、animate、transition 入门
• 进阶可使用 AnimatePresence、Reorder、useMotionValue 等更高级功能
• 动画开发核心思想：声明式描述交互，而非命令式逻辑

Medium

Animating Elements through framer motion with React.js

Today, most of the website requirements you come across will ask for animations and effects. While you can definitely build animations with…

AI 摘要：作者通过对常见的 React 状态订阅写法 (useEffect + useState) 进行剖析，指出该模式在服务端渲染 (SSR) 下可能引发抖动 (jank)，并介绍了 useSyncExternalStore 的优势：它提供了更简洁的 API，支持订阅机制和服务端默认值，从而提升 SSR 渲染体验并减少 UI 闪烁。

1. 常见的 useEffect + useState 订阅模式
• 使用 useEffect 在组件挂载时订阅事件源 (event source)。
• 更新 useState 来触发组件重渲染，卸载时清理订阅。
• 常见于绑定 ResizeObserver、DOM 引用、外部事件等场景。

2. 该模式在服务端渲染 (SSR) 下的问题
• 初始渲染使用默认值，SSR 时无法订阅浏览器事件。
• 浏览器接管 (hydration) 后才启动订阅并更新状态。
• 导致界面多次渲染，出现 UI 闪烁、过渡不平滑的现象 (jank)。

3. 使用 useSyncExternalStore 的改进方案
• 提供显式的 subscribe 函数实现监听与取消订阅。
• 第二个参数为获取当前值的方法，确保 UI 与外部状态同步。
• 第三个参数允许定义服务端默认值，提升 SSR 初始化体验。
• 案例对比表明，useSyncExternalStore 渲染更平稳，减少 UI 抖动。

4. 开发实践与思考
• 在涉及外部状态订阅 (API、事件、可观察对象) 场景下，应优先考虑 useSyncExternalStore。
• 默认值的设计影响 SSR 渲染体验，可以通过合理设置来降低不适感。
• 对数据可视化、实时 UI 交互等高频场景尤其重要。

Swizec

You may be looking for a useSyncExternalStore | Swizec Teller

When you see a `useEffect` that updates a `useState` and returns a value, you might be looking for a `useSyncExternalStore`. This is my current vendetta.

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 项目的完整生产级最佳实践
• 扩展性强，可直接应用于实际开发

www.reactsquad.io

How To Set Up Express 5 For Production In 2025

Learn how to build an Express 5 app with TypeScript. You'll set up a production-ready project with tools for linting, testing and more.

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 中的新特性，如锚点定位和视图转换
• 每个模块配有明确的浏览器支持信息，保证学习即用

web.dev

通过九个新模块重新学习 CSS  |  Blog  |  web.dev

我们广受欢迎的“学习 CSS”课程已更新，新增了涵盖最新 CSS 功能的模块。

AI 摘要：本文深入解析了 CSS 中的对齐 (Alignment) 机制，强调“内容(content)”与“项目(item)”两个层级对齐逻辑在 Grid、Flexbox、Block 以及定位元素中的差异。文章不仅讲述了基础属性（如 align-, justify-, place-* ）的适用场景，还对 auto margin 、绝对定位、以及 safe alignment 等进阶知识点逐一拆解，并指出 对齐始终依赖于尺寸 (sizing) 与剩余空间 (free space)**。这是篇对 CSS 布局本质高度还原的长文，尤其适合想彻底理解 Alignment 背后的逻辑的开发者。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 对齐基础理论 （The Alignment Theory）
• CSS 中存在约 10 个对齐相关属性，常令初学者困惑。
• 对齐分为 content level 与 item level。
• 常用属性类别：
• place-content（容器内容对齐）
• place-items（所有项目的对齐）
• place-self（单个项目的对齐）
• 属性均存在水平 (justify-*) 与垂直 (align-*) 两个维度。
• place-* 为两者速记写法，但常用分开书写。

2. Grid 布局对齐
• Grid Anatomy：容器(container) → 格子单元(cells) → 项目(items)。
• 内容层级：对齐的是 grid cells 作为整体；项目层级：对齐的是 cell 内单个项目。
• start / end 使用逻辑值而非物理 left / right，支持不同语言排版。
• Auto sizing：若设为 auto，grid cells 会填充或收缩，normal 默认值等于 stretch。
• auto vs 1fr 区别：
• auto 可收缩并依赖对齐调整。
• 1fr 吞下所有剩余空间，导致无法再进行 content-level 对齐。
• 跨单元格项目 (grid area)：对齐是在 grid area 内进行，而非单一 cell。

3. Flexbox 布局对齐
• Flexbox Anatomy：容器 → flex lines → flex items。
• 纵向轴 (cross axis)：
• 内容层级对齐：flex lines 可整体对齐。
• 项目层级对齐：item 可在 flex line 内独立对齐 (align-self)。
• 横向轴 (main axis)：
• 仅存在内容层级对齐 (justify-content)，项目不可单独对齐 (justify-self 无效)。
• flex-wrap：
• nowrap 禁止纵向内容层对齐 (align-content 失效)。
• wrap 激活 content-level alignment 即便只有一行。
• flex-direction：行列切换会翻转主轴与交叉轴，因此相同属性可作用于不同方向。
• **flex-grow 与对齐关系：填满剩余空间会禁用对应轴上的 content 对齐。

4. Block 容器与内联元素
• 在 Block container 中：
• 水平：item-level 对齐（justify-items, justify-self），没有内容层级对齐。
• 垂直：content-level 对齐 (align-content)，没有 item-level。
• inline 元素的特殊情况：
• 单纯 inline → 水平继承 text-align，无需 flex/grid。
• 混合 inline 与 block → 浏览器生成“匿名块盒 (anonymous block box)”封装 inline 元素，但这些盒子不可直接对齐。

5. Auto Margins
• 对齐的是 margin box 而非元素本身。
• margin: auto 会将剩余自由空间转化为 margin，本质是“吞掉空间”的机制。
• 在 Flexbox 主轴下依旧生效，即便没有 item-level alignment。
• 注意：Block 垂直方向 auto margin 无效，需要定义 width 才能触发水平居中。
• 与 place-self: center 的区别：前者 margin box 吞满，后者保持元素周围留有自由空间。

6. 绝对定位元素 (Absolutely-positioned elements)
• 对齐以 containing block 作为参考区域（父级 padding box 或视口）。
• inset 定义内缩区域 (IMCB)，对齐作用在该区域内。
• *-self 属性适用，但浏览器兼容性有限。
• 传统写法 （ left: 50%; top: 50%; transform: translate(-50%, -50%)）依旧可用，但推荐 inset: 0; place-self: center 更直观。

7. Safe Alignment
• 当内容超出容器（负自由空间）时，可仍然对齐，但滚动条可能导致内容不可达。
• 使用 safe 修饰符（如 justify-self: safe center）可避免此问题。
• margin: auto 的对齐方式天然就是“safe”，因其不作用于负自由空间。

8. 总结
• Alignment 逻辑核心：永远依赖剩余空间和元素尺寸。
• Grid、Flexbox、Block 各自有不同的默认行为和适用属性。
• 常见混淆点：
• auto vs normal vs stretch
• justify-items 和 justify-content 适用范围不同
• fr 与 flex-grow 会吞掉剩余空间，从而禁用对齐。

Css-Tip

The Fundamentals of CSS Alignment

This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!

AI 摘要：这篇文章系统梳理了 CSS 中各种布局（Grid、Flexbox、Block、绝对定位等）的对齐机制，总结了 -content、-items、*-self 等属性在不同语境下的行为逻辑，重点在于区分 内容层级 (content level) 与 项目层级 (item level) 的对齐方式。文章核心思想是：对齐总和尺寸 (sizing) 与剩余空间 (free space) 的关系密不可分，不同布局模型下默认值和可用属性会有所不同，理解其背后的逻辑远比记忆“如何写出居中”更重要。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. Alignment 理论
• CSS 对齐有两个层次：content level（容器内整体内容）、item level（单个元素）。
• 三类主要属性：place-content / place-items（全局），place-self（单个元素）。
• 属性分为两大轴向：align-（垂直/交叉轴），justify-（水平/主轴）。
• 对齐效果依赖剩余空间是否存在，“normal” 默认等同于 stretch。

2. Grid Container
• content 概念在 Grid 对应 grid cells，item 对应 grid items。
• -content 控制网格单元整体在容器内的分布；-self 控制 item 在单元格内对齐。
• auto 与 1fr 表现不同：auto 利用对齐缩放元素；1fr 会占满剩余空间导致无对齐空间。
• 元素跨多格时，对齐发生在其 grid area 内。

3. Flexbox Container
• 与 Grid 相比更复杂；main axis 与 cross axis 的切换是难点。
• 横向（默认 row 模式）：只有 content level 对齐，使用 justify-content。
• 纵向：存在 content 和 item 两级对齐，align-items / align-self 针对单个 item。
• flex-wrap 决定是否启用纵向 content 对齐；flex-grow 消耗剩余空间，可能使对齐无效。
• 改变 flex-direction 会交换主/交叉轴，导致属性在不同维度表现不同。

4. Block Container 与 Inline 元素
• Block 布局默认垂直堆叠：垂直轴只有 content level 对齐，水平轴有 item level 对齐 (justify-self)。
• Inline 元素的对齐靠 text-align，不是 CSS Alignment 模块。
• 内联+块元素混合时，浏览器会生成 anonymous block boxes 来容纳内联元素，但这些匿名盒不能直接对齐。

5. auto margins
• margin: auto 本质是将剩余空间转换为 margin，因此其视觉效果类似居中。
• 区别在于 place-self: center 保留空隙，而 auto margin 会填满空间。
• 在 Flexbox 主轴上 auto margin 始终生效，甚至在没有 item-level 对齐的场景下。

6. 绝对定位元素
• 对齐基于 containing block 或 inset-modified containing block(IMCB)。
• 可通过 place-self 直接居中，替代传统的 top:50% + transform 技巧。
• margin: auto 亦可应用，但需显式指定 width/height。

7. Safe Alignment
• 当内容溢出 (negative free space) 时，safe 关键词可避免内容被裁剪到不可见区域。
• 如 justify-self: safe center，可保证在可滚动环境不导致内容不可到达。
• auto margin 天然是安全的，因为只考虑正向剩余空间。

Css-Tip

The Fundamentals of CSS Alignment

This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!

AI 摘要：作者以“很多站点并不需要 JavaScript”为引子，系统展示现代 CSS 的强大与可用性：从 Nesting、相对颜色、:has、@starting-style、color-scheme/light-dark，到输入校验与 details 组件、Web 动画与视口单位 dvh/lvh/svh，以及 Baseline 兼容性保证；论证在性能（合成器线程 compositor thread）、可访问性与隐私友好方面 CSS 具备天然优势，主张用 CSS 做到能做的事，把 JS 作为渐进增强，并提出若干 CSS 心愿单与个人的创作观。

1. 观点与动机
• 批评“臃肿 JS + 追踪脚本”导致的糟糕体验，但承认框架在合适场景的价值。
• 核心主张：并非所有站点都需要 JavaScript；HTML/CSS 已能覆盖大量交互与视觉需求。
• 目标：科普现代 CSS 能力，帮助开发者减少不必要的 JS。

2. 现代 CSS 能力与可用性
• 语法与可读性：原生 Nesting 显著改善层级样式组织；短类名也更可控。
• 相对颜色与 color-mix：可在多色彩空间就地变换/混合，轻松生成主题、悬停态等。
• 新语法与单位：媒体查询支持范围表达式 (width <= 768px)、lh 单位、scrollbar-gutter 等。
• Baseline 计划：用“新近可用/广泛可用”标识保障跨浏览器一致性与上线时机判断。

3. 性能、可访问性与渐进增强
• 性能：CSS 动画运行在合成器线程 (compositor thread)，避免事件循环抖动，低端设备也更顺滑；如需 JS 触发，优先用 Web Animations API。
• 可访问性与隐私：无脚本也可完整浏览；对安全研究者/隐私用户更友好。
• 渐进增强 (progressive enhancement)：交互与主题切换用 CSS 实现，偏好持久化可由 JS 或服务端补充。

4. 实战示例与模式库
• 过渡与入场：@starting-style 简化“初始态 + transition”实现，无需 keyframes/JS 强制触发。
• 主题与暗色模式：color-scheme: light dark + light-dark() 一键适配系统主题；用 radio + :has 覆写用户选择。
• 表单与交互：
• 自定义单选/标签：:has(input:checked)、:has(input:focus-visible) 驱动样式与无障碍焦点。
• 选项卡：在父级用 :has(#id:checked) 切换内容显示。
• 折叠面板：details/summary 原生手风琴，支持 [open] 状态与可搜索。
• 校验：pattern、:valid/:invalid 与 :user-valid/:user-invalid 组合，既即时反馈又避免“未输入即报错”；可配合 :has 进行联动样式。
• 其他经验：使用自定义元素名（带连字符）组织结构；在 body 内邻近放置 style 以优化首屏可读性（实践有效但规范上未正式推荐）。

5. 视口与虚拟键盘适配
• 移动端视口单位陷阱：vw/vh 在地址栏显隐时不稳定，易致元素被截断或背景不满屏。
• 解决方案：使用响应式单位 lvh/svh/dvh（背景用 lvh，必须始终可见的按钮用 svh，dvh 动态变化慎用以免抖动）。
• 键盘覆盖处理：
• meta viewport 的 interactive-widget=resizes-content（跨浏览器、无 JS）。
• VirtualKeyboard API（Chromium 专属）：navigator.virtualKeyboard.overlaysContent 与 env(keyboard-inset-height) 获取键盘尺寸；跨端性不足，谨慎采用。

6. CSS 心愿单（提案/期望）
• 可复用块：在原生 CSS 内支持类似 @apply 的类复用。
• 组合 @media 选择器：在同一规则中合并媒体条件与选择器列表，减少重复。
• nth-child 变量：将子序号暴露为变量，便于位置/颜色等按序计算。
• nth-letter 选择：扩展 ::first-letter 为 ::nth-letter(n) 做文本特效。
• 单位移除：更直观地得到无单位数值（当前需 tan/atan2 等技巧与 @property，期望直接除法）。
• 更好的 image()：实现带回退色与图像片段裁剪的函数，优于 url() 场景。
• 允许 body 内 style 合规：实务上有利于感知性能

AI 摘要：本文从静态形状的剪切路径 (clip-path) 转向运动路径 (offset-path)，系统讲解如何用 offset-distance、offset-anchor、offset-position、offset-rotate 等控制元素沿自定义路径自然运动；阐明 offset transform 在 transform 栈的执行顺序及其对视觉结果与性能的影响；区分闭合与开放路径、负值与溢出距离的行为；展示用 shape() 切分路径与 ray() 创建无限射线；并给出交互触发与可访问性 (prefers-reduced-motion) 的实践建议与性能优化策略。

1. 概念与对比
• 从剪切路径 (clip-path) 的“控形”转向偏移路径 (offset-path) 的“控动”
• 参照系差异：clip-path 相对元素 border-box，而 offset-path 相对包含块 (containing block)
• shape() 浏览器支持度低于 offset-path 与 clip-path

2. 值与坐标
• 支持绝对单位与百分比，适配响应式
• 大量使用 CSS 变量，使路径定义、函数参数、单点坐标可参数化
• 路径静态由 offset-path 定义，位置动态由 offset-distance 驱动

3. 距离与动画
• 核心动画仅需 offset-distance: 0% → 100%
• 非线性运动：通过多关键帧实现往返与停顿
• 可用 transition 在 hover、focus、click 等交互中平滑过渡 offset-distance

4. 锚点与起点
• offset-anchor 决定元素哪个点贴合路径（类似 transform-origin）
• offset-position 决定路径在包含块中的起始位置：normal(居中)、auto(元素自身位置)、或显式坐标

5. 旋转与方向
• offset-rotate 控制沿路径方向的旋转：auto、固定角度、auto 叠加角度、reverse
• 通过 auto 使元素切线对齐，实现自然转向

6. 变换栈与相互关系
• 变换顺序：单独 transform 属性 (translate/rotate/scale) → offset transform → transform
• 相同路径在不同层次的变换组合会产生不同视觉结果

7. 性能考虑
• offset-path 属于 transform 栈，享受硬件加速，避免重排重绘
• 动画中避免改动 offset-path，本应动画 offset-distance；用变量或类切换路径
• 简化路径：简单直线不必用 shape()，circle() 性能优于大量曲段的 path()

8. 闭合与开放路径
• circle()、inset()、polygon() 天生闭合，0% 与 100% 连续循环
• path()、shape() 可开可闭；开放路径 100% 回到 0% 会“跳跃”
• 负值与溢出：闭合路径可环绕归一化，开放路径则钳制在 0%–100%

9. 分段路径与“切割”
• 使用 shape() 的 move 指令在中途打断并重启路径
• 适合制作从一点“传送”到另一点的分段运动效果

10. 无限射线 ray()
• ray(angle) 生成无穷直线；100% 通过关键字定义参照距离：closest-side、closest-corner、farthest-side、farthest-corner、sides
• 始终为开放路径，超过 100% 将无限延伸，适用于飞出屏幕、激光、方向性动画

11. 可访问性与交互
• 尊重用户减少动画偏好：@media (prefers-reduced-motion: no-preference) 有条件启用
• 交互驱动：用状态切换与 transition 提供可控运动反馈

12. 总结与实践要点
• clip-path 控形，offset-path 控动，二者组合形成 CSS 空间表达的完整语汇
• 选对参照系与锚点，明确起点与旋转策略
• 动画以 offset-distance 为主，路径参数化，注意性能与可访问性

Frontend Masters

The `-path` of Least Resistance (Part 2)

In the previous chapter, we explored clip-path and its power to reshape elements, cutting through the rectangular constraints of traditional elements to create circles, polygons, and complex curved shapes. We learned how to think beyond the box (literally)…

AI 摘要：本文系统介绍了 CSS 锚点定位（Anchor Positioning）基础：通过为任意元素定义锚（anchor-name）并在目标元素使用 position-anchor、anchor() 或 position-area 等特性，实现在不重构 DOM 的前提下，将元素稳定地相对其他元素对齐，并用 position-try-fallbacks（如 flip-block、flip-inline）优雅处理视口溢出问题；文章配有交互示例与实践建议，并提示当前浏览器支持仍以 Chrome 为主，Safari/Firefox 仍待完善。

1. 背景与问题
• 回顾传统 position 定位的局限：绝对定位只能相对最近的定位父级，无法跨层级对齐；为对齐常被迫调整 DOM 结构，维护成本高。
• 实战场景：卡片布局中，将分类标签叠放在图片角落；当卡片改为横向布局时，基于父容器的绝对定位失效，出现脆弱的“魔法数”方案。

2. Anchor Positioning 基础能力
• 定义锚元素：在被参考的元素上设置 anchor-name，作为锚点。
• 目标关联：在目标元素上用 position-anchor 引用锚。
• 使用 anchor() 对齐：通过 anchor(top/right/bottom/left) 将目标 inset 到锚的边缘，可在任意布局变更下保持稳定相对位置。
• 要点：锚与目标无需同容器；适用于徽标、角标、标签、弹出层等跨层级对齐需求。

3. position-area 与 3x3 网格
• 核心概念：position-area 在锚周围生成 3x3 网格，以“方位 + 对齐”（如 top center）描述目标落位，更直观。
• 跨单元格：span-* 语法（如 span-right）让目标横纵向跨越多个单元格，便于描述宽度或高度延展。
• 实用场景：快速布置弹出层、提示框在锚的上/下/左/右及边角位置，减少复杂的位移计算。

4. 自适应回退与溢出处理
• position-try-fallbacks：声明回退策略以处理视口或容器溢出，减少对 JS 的依赖。
• flip-block：在块轴（垂直方向）空间不足时，自动上下翻转（如弹层从上侧切换到底侧）。
• flip-inline：在内联轴（水平方向）空间不足时，自动左右翻转（与 span-right 等组合更灵活）。
• 可视化与调试：示例中提供锚区域可视化，便于预判翻转与回退路径。

5. 兼容性与实践建议
• 浏览器支持：当前以 Chrome 桌面端体验最佳；Safari TP 中 position-area 示例存在问题；期待 Firefox 与 Safari 稳定支持。
• 开发建议：优先用锚点定位替代脆弱的绝对定位与“魔法数”；为弹出层与标签类组件提供更稳健的跨容器对齐与溢出回退。
• 资源延伸：CSS Anchor Positioning 规范与入门文章，帮助深入理解 API 设计与更多用例。

Ishadeed

The Basics of Anchor Positioning

Learn the basics of Anchor Positioning in CSS

AI 摘要：文章深入介绍了 CSS clip-path 属性的核心原理与应用方式，从基础几何形状到复杂自定义路径，展示了如何通过裁剪和路径定义突破传统矩形限制，使用户界面更具表现力和交互性，并为下一篇将涉及的动态路径（offset-path）铺垫了理论背景。

Frontendmasters

The `-path` of Least Resistance (Part 1)

A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.

AI 摘要：这篇文章深入探讨了 SVG 的 <path> 元素，详细介绍了如何使用该元素绘制各种形状，尤其是 Bézier 曲线和弧形。文章通过示例和解释帮助读者建立对路径语法的直观理解，适合希望提升其 SVG 绘图技能的开发者。

1. 基本概念
• SVG <path> 元素类似于矢量图形软件中的“笔”工具，可以连接多个绘图指令。
• d 属性定义了一系列绘图指令，每个指令通过不同的命令（如 M、L）来实现。

2. 基本命令
• 移动命令 (M)**：用于将笔移动到画布的特定位置，不会绘制任何线条。
• 直线命令 (L)：用于绘制从当前点到指定点的直线。
• **Bézier 曲线: 包括二次 (Q) 和三次 (C) Bézier 曲线，分别使用一个和两个控制点绘制平滑曲线。

3. 弧形 (Arcs)
• 弧的复杂性：弧的绘制涉及到多个参数，掌握其用途对于理解如何连线至关重要。
• 半径控制：水平和垂直半径影响着绘制的椭圆形状的深度和外观。
• 弧形路径选择：通过大弧标志和扫掠标志选择路径方向。

4. 动画与额外功能
• 提到了动画技术的学习课程，并介绍了路径闭合命令 (Z) 和相对命令 (小写字母形式)。
• 文章总结了一些常用的命令和其语法，帮助开发者更轻松地创建复杂的 SVG 图形。

Joshwcomeau

An Interactive Guide to SVG Paths • Josh W. Comeau

SVG gives us many different primitives to work with, but by far the most powerful is the <path> element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some…

AI 摘要：Stefan Judis 详细分享了他制作、编辑和发布 YouTube 视频的完整工作流程，特别是针对技术内容的视频。他强调了周密的规划与准备的重要性，包括如何选择主题、组织代码并进行充分练习。文章深入介绍了其使用的软件工具链，如用于录制和初步编辑的 Screenflow、用于字幕生成和音频优化的 Descript，以及 Keynote 和 Jitter 等辅助动画工具。此外，作者还分享了为录制优化的 VS Code 配置和所用的硬件设备，并提供了一份实用的录制前后检查清单，旨在帮助内容创作者提升视频质量和效率。

1. 视频内容规划与准备
• 想法来源与主题选择: 视频创意源于用户常见问题、近期学习所得和新产品功能，确保持续有内容可产出。
• 代码准备与演示流程: 提前在 GitHub (代码托管平台) 准备演示代码，并将其整理至易于录制的状态；对于复杂代码，会在第二块屏幕上显示最终版本以便参考。
• 脚本策略与练习方法: 通常不写完整脚本，而是通过纸质笔记规划故事线和演示步骤；进行多次大声演练 (通常 5-10 次)，优化表达流畅度，并通过修改措辞或创建 VS Code snippets (代码片段) 解决卡顿或输入困难。
• 直播编程注意事项: 强调充分准备是关键，需预设意外情况 (如网络中断) 的备用方案；如果自身操作失误，通常是准备不足，需有 Git checkpoints (代码检查点) 或笔记以便快速恢复。

2. 录制与编辑工具
• 核心录制与编辑软件: 使用 Screenflow 进行屏幕和摄像头录制及一体化编辑，支持边录边暂停调整的灵活工作流，但也提到软件更新频率较低的担忧。
• 动画与视觉辅助工具: 利用 Apple Keynote 制作幻灯片式动画内容；在需要透明视频片段 (如 fly-ins 飞入、modals 模态框) 时，偶尔使用 Jitter 进行制作。
• 后期处理与字幕生成: 将初步编辑好的视频导入 Descript，用于自动生成高质量字幕、应用“Studio Sound”滤镜进行音频优化，并可访问免版税音效库；Descript 也能辅助生成视频标题和描述作为灵感。

3. 技术设置与硬件配置
• 编码环境优化 (VS Code): 采用定制化的“Presentation” (演示) 主题配置，特点包括：匹配品牌色彩、增大字体、移除干扰元素 (如标签页、状态栏)、禁用 AI 功能和悬停提示，以确保屏幕内容清晰简洁；录制时使用全屏模式。
• 硬件设备概览: 使用 MacBook Pro (M3 处理器, 36GB RAM) 保证流畅运行；Sony ZV-1 Camera (摄像头) 作为网络摄像头替代品；两盏 Elgato key lights (补光灯) 提供照明；Shure MV-7 麦克风用于音频录制；使用站立式办公桌并站立录制以保持精力。
• 录制工作室环境: 展示了其新搭建的录制工作室，强调了环境对录制质量的重要性。

4. 录制流程检查清单
• 录制前准备: 检查房间灯光、关闭窗户、清理背景杂物；关闭 macOS (操作系统) 通知；切换 VS Code 到“Presentation”模式。
• 录制后处理: 在 Screenflow 中应用“compressor” (压缩器) 滤镜、调整鼠标光标；在 Descript 中应用“studio sound” (工作室音效) 滤镜。

Stefanjudis

How I record, edit and publish YouTube videos

My video recording process and setup.

AI 摘要：本文深入探讨了 React Query 中 select 选项的高级用法，旨在实现极致的性能优化。文章从 select 的基本作用——创建精细化的数据订阅以避免不必要的组件重渲染——讲起，逐步深入到如何在 TypeScript 中为包含 select 的抽象进行类型定义。最后，文章聚焦于性能优化的核心，即“超级充电”，通过 React.useCallback 和外部 memoization 库（如 fast-memoize）解决昂贵计算在多次渲染和多组件实例中的重复执行问题，展示了如何将 select 的性能潜力发挥到极致。

tkdodo.eu

React Query Selectors, Supercharged

How to get the most out of select, sprinkled with some TypeScript tips.

AI 摘要：karminski/one-small-step 是一个技术科普教程项目，旨在以简洁易懂的方式解释有趣且前沿的技术概念和原理，每篇文章力求在 5 分钟内阅读完毕。项目内容涵盖人工智能（AI）、数学、系统和硬件等多个领域，并计划保持每周不低于 3 篇的更新速度，旨在帮助读者快速掌握复杂的技术知识。

GitHub

GitHub - karminski/one-small-step: 这是一个简单的技术科普教程项目，主要聚焦于解释一些有趣的，前沿的技术概念和原理。每篇文章都力求在 5 分钟内阅读完成。

这是一个简单的技术科普教程项目，主要聚焦于解释一些有趣的，前沿的技术概念和原理。每篇文章都力求在 5 分钟内阅读完成。 - karminski/one-small-step

AI 摘要：本文作者作为 Claude Code 的深度用户，详细介绍了自己从 Cursor 转向全程使用 Claude Code 的开发体验，总结出一系列高效实用的使用建议。文章覆盖了 Claude Code 的 VS Code 插件启动、终端界面、权限系统、GitHub 集成、大型代码库表现、经济性、队列系统、自定义扩展、可视化界面及团队协作等方面，旨在帮助开发者最大化 Claude Code 在日常工作中的价值与便捷性。

Builder.io

How I use Claude Code (+ my best tips)

I switched from Cursor's agents to Claude Code weeks ago and I'm not going back. Here's how I use it and my best practical tips

AI 摘要：本文是 Josh W. Comeau 撰写的一篇关于 SVG（可缩放矢量图形）的入门教程，旨在为读者提供 SVG 的基础知识和实用技巧。文章从 SVG 的基本概念入手，介绍了其作为图像格式的独特之处（如基于 XML 的语法和与 DOM 的无缝集成），并深入探讨了 SVG 的基本形状、缩放机制、表现属性以及动画效果。通过详细的代码示例和互动演示，作者展示了如何利用 SVG 创建动态插图，并结合 CSS 和 JavaScript 实现交互效果。文章还提到作者正在开发的动画课程，邀请读者关注后续更新。

Joshwcomeau

A Friendly Introduction to SVG • Josh W. Comeau

SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously…