#优质博文 #WebGL #GSAP #three #r3f #前端 #动画 #趣站
太有创意了。
网站：https://www.romanjeanelie.com/
文章：Letting the Creative Process Shape a WebGL Portfolio

AI 摘要：这篇文章详细记录了制作 WebGL 个人作品集的全过程。文章展现了一个从最初构想到最终实现的探索旅程。文中涉及诸多技术，包括 Next.js、Three.js、React Three Fiber 以及 GSAP（含 MorphSVG 插件），并分享了多个实现细节，如 Fold 效果、MeshPortal 场景嵌入系统、基于滚动速度的 Shader 动效，以及 SVG 到 Canvas 的性能优化。最终，作品以戏剧化的视觉语言融合作者在戏剧、电影与编程三重背景下的美学追求。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 起点：Fold 效果与创意萌芽
• 以 Vector Projection 实现自由方向的折叠效果
• Shader 中的假阴影计算增加立体感
• 从最初“主特效”到成为创意起点的自我修正

2. 构建中：角色与 MeshPortal 系统
• 创建带角色的屏幕，利用 Mixamo 动作资源
• 引入 MeshPortal 技术，将独立 3D 场景限制在屏幕范围内
• 建立系统实现 WebGL 与 DOM 布局同步（mask 区域）
• 采用 hash-based 导航配合 GSAP 动画实现平滑过渡

3. 节奏延伸：让角色起舞与滚动动效
• 通过基于速度的 Stretch Shader 让文字响应滚动加速度
• 利用 depth-aware 动线制造空间层次
• 前端 JS 调控 Shader uniform 实现自然的运动衰减与模糊

4. 创意突破：不再拘泥于“屏幕”
• 从平面屏幕过渡到文字形态（Morphing Plane to Text）
• 借助 GSAP MorphSVG 插件实现路径平滑过渡
• 优化性能：通过 Canvas 渲染替代 SVG DOM 调用，保持 60fps
• 将“WHO” 文字转化为剧场式的舞台： Cinema、Theater、Code 三部分，用视频投影营造剪影效果

5. 闭环：Contact 页与「MEET ME」交互收尾
• 通过算得精确的 DOM 与 WebGL 匹配 mask 完成动态过渡
• 使用 GSAP 的 back.out 缓动创造富表现力的弹性动画
• 利用镜头视角（FOV）和空间深度营造收尾的视觉叙事
• 以贴纸元素作为呼应起点的个人符号，为项目画上圆满句号

6. 总结与思考
• 作品的发展不是强行设计，而是对“创意呼吸”的倾听
• 通过“让过程塑形”，实现技术与自我表达的统一
• 最终成果是一种情感与视觉共鸣的体验，而非单纯代码演示

author Roman Jean-Elie

#优质博文 #CSS #前端 #新特性
How to Add and Remove Items From a Native CSS Carousel (…with CSS)

AI 摘要：本文介绍如何利用 CSS Overflow Module Level 5 的新特性（如 ::scroll-button() 与 ::scroll-marker）创建一个完全不用 JavaScript 的原生 CSS 轮播组件。通过结合 HTML 的复选框控制展示项、CSS 伪元素控制滚动行为与可视化反馈，作者实现了可动态增删轮播项、支持自动滚动、滚动锚点定位的完整组件。文章分为三步：HTML 结构设计、基础样式编写与添加按钮/标记逻辑，展示了未来 CSS 在交互与状态管理上的潜力。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. CSS 新特性简介
• 概述 CSS Overflow Module Level 5 模块，引入 ::scroll-marker 与 ::scroll-button() 两个新伪元素。
• 说明这些特性如何在滚动内容中自动生成导航控件，无需脚本交互。
• 当前仅 Chrome 142+ 提供支持，但为未来原生组件交互铺路。

2. HTML 结构与逻辑绑定
• 使用 <input type="checkbox"> 控制轮播项的显示与隐藏。
• 每个复选框对应一个 <li> 滑块，可预选或取消以动态控制内容。
• 通过 .component:has(input:not(:checked)) 实现逻辑选择，隐藏未选项。
• 结构层清晰，可改造为 <form> 以实现数据序列化提交。

3. CSS 基础样式与响应式设计
• 使用 max-width 与 aspect-ratio 实现轮播容器的响应式尺寸。
• 当存在选中项时使用 display: flex; 和 min-width: 100% 水平展示滑块。
• 未选中时显示占位样式，增强组件的状态反馈。

4. 滚动控制与标记实现
• 使用 scroll-snap-type: x 与 scroll-behavior: smooth 实现平滑滑动与对齐。
• 通过 anchor-name 将轮播容器转变为锚点，利用 position-anchor 精准定位滚动按钮与标记组。
• scroll-marker-group 属性控制标记插入位置，可调节排列与间距。
• 各标记通过伪类 :target-current / :target-before / :target-after 呈现不同状态风格。
• 实际布局通过固定定位 (position: fixed) 与锚点对齐 (justify-self: anchor-center) 来分布按钮与标记。

5. 滚动按钮的添加与行为控制
• 使用 ::scroll-button(left/right) 生成左右切换箭头。
• 通过 :enabled 控制显示状态，避免无效方向交互。
• 再次利用锚点定位调整按钮相对位置，内容用 Unicode 符号构建箭头。
• 补充 scroll-snap-align: center，保证切换时对齐完整幻灯片。

6. 扩展与应用
• 相同机制可拓展至分页、标签页等滚动式界面组件。
• 展示了未来 CSS 在状态驱动组件中的可行性与可维护性。
• 示例：产品展示轮播，可根据颜色选项动态切换视图。

author Daniel Schwarz

Frontend Masters

How to Add and Remove Items From a Native CSS Carousel (…with CSS)

The CSS Overflow Module Level 5 defines specs for scrolling controls that enable users to navigate overflow content without manually scrolling (like click-and-dragging the scrollbar, the trackpad, a scrollwheel, or the like). This includes scroll buttons…

#优质博文 #前端 #安全
以 0.0001 美分的价格干掉 Next.js 服务器

AI 摘要：Harmony Intelligence 团队报告发现 Next.js 自托管版本存在严重的拒绝服务（DoS）漏洞，攻击者仅需一个精心构造的 HTTP 请求即可导致服务器内存被耗尽而崩溃。漏洞由 AI AppSec Agent 在测试期间意外发现，已由 Vercel 于 2025 年 10 月修复。防御建议是尽快升级至 Next.js 15.5.5 或以上版本，并在生产环境使用可限制请求大小的反向代理，因为仅靠请求频率限制并不能防御此类攻击。

[以下是方便搜索索引的大纲（AI 生成），请读原文]

1. 漏洞概述
• 漏洞类型：拒绝服务 (DoS)，通过发送大体积的 HTTP 请求流导致服务器内存耗尽并崩溃。
• 受影响范围：所有带有中间件的自托管 Next.js 服务器（Vercel 托管的不受影响）。
• 受影响版本：≤15.5.4、14.x、13.x 等旧版本。

2. 发现经过
• 漏洞在测试 AI AppSec Agent 能否独立识别已知认证绕过问题（CVE-2025-29927）时意外被触发。
• AI 代理可访问源代码并在安全沙盒中运行，对应用执行自动化渗透探索。
• 意外发现 Next.js 官方源码中 cloneBodyStream 函数复制无大小限制的请求体，从而导致内存占用过高。

3. 技术细节
• 漏洞根源在于 body-stream.ts 中的 cloneBodyStream：函数会将整个请求流读入内存。
• 攻击者仅需持续发送数据流片段即可造成服务器崩溃，资源消耗极低。
• 修复补丁通过在内存缓冲区超过 10MB 时抛出异常来限制流大小。

4. 影响与安全评级
• 全球 300 万个活跃 Next.js 部署中约 55% 为自托管环境（企业约 80%）。
• 初始漏洞报告时 Vercel 尚未在文档中明确推荐使用反向代理限制请求大小。
• 推荐 CVSS v3.1 评分 7.5（高危），依据类似 Node.js 漏洞 (CVE-2018-12121) 的评估逻辑。

5. 缓解措施（Mitigation）
• 推荐立即升级至 Next.js 15.5.5 或 16.0.0 及以上版本。
• 配置诸如 nginx 的反向代理来限制请求体大小，例如默认 client_max_body_size = 1MB。
• 确保应用服务器不对外直接暴露，全部流量应经过代理层。
• 仅靠应用层的 rate limit、bodyParser.sizeLimit 或 express-rate-limit 等代码级限制无效，因为漏洞触发点在中间件执行前。

6. 信息披露时间线
• 2025-08-07：私下通知 Vercel 并持续每周跟进。
• 2025-09-23：Vercel 第一次回应。
• 2025-10-13：Vercel 发布补丁 (v15.5.5)。
• 2025-11-26：公开披露与缓解方案发布。

author Alex Browne

Harmonyintelligence

Harmony Intelligence - Taking down Next.js servers for 0.0001 cents a pop

Our AI AppSec Agent discovered an unauthenticated DoS vulnerability that crashes a self-hosted Next.js server with a single HTTP request and negligible resources.

#优质博文 #AI #AST #React #前端 #测试 #工程实践 #ClaudeCode #codemod #course
好文章，关于使用 AI 进行重构迁移的教科书式文章。
Migrating 6000 React tests using AI Agents and ASTs

AI 摘要：作者在 Filestage 的前端项目中使用 AI Agents（特别是 Claude Code）与 AST（Abstract Syntax Tree）技术，将近千个测试文件、六千多条测试从 React Testing Library v13 迁移至 v14。文章展示了从制定迁移指南、分步提交 PR、编写 codemod、自动化验证到改进 AI 提示的完整过程，最后总结出 AI 在大规模代码迁移中的优势与局限，并强调“小步迭代 + 自动化验证”的工程基本功仍然至关重要。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 项目背景与动机
• 公司使用旧版 React Testing Library 编写了 970 个测试文件，总计 6000 多测试用例。
• 升级至 v14 后 API 完全异步化，行为变化大，手动迁移代价极高。
• 作者决定尝试用 AI 辅助完成大规模迁移。

2. 准备与迁移指南
• 首次直接用 Claude Code CLI 自动迁移失败，暴露出测试失败过多、AI 调试混乱的问题。
• 于是转而使用 Claude Web 模式制作详细的迁移指南，分析版本差异与新 API。
• 确定主要变化：异步 API、测试 setup 模式更新、时序逻辑差异需人工介入。

3. 拆分改动与依赖并行安装
• 利用 NPM 的包别名功能同时运行 v13 与 v14，避免一次性大变更。
• 生成迁移指南并提交第一份 PR，保证团队迭代可控。

4. 编写与测试 codemod 自动化工具
• 使用 jscodeshift 解析代码为 AST，再生成批量修改工具。
• 编写输入输出测试用例以验证 codemod 效果（例如导入路径、 renderWithUserEvent 封装替换）。
• 自动测试 codemod 确保修改一致性和可验证性。

5. 实际迁移与 AI 协作循环
• 通过详细 prompt 指令让 Claude Code 分批迁移 10 个测试文件，执行 lint 检查与单测验证。
• 持续观察失败案例，不断改进 codemod 与迁移指南。
• 迁移指南从最初 4500 字扩充到 7500 字；codemod 从 271 行发展到近千行，测试覆盖更完备。
• 共执行 50 次迁移，形成 50 个独立 PR。

6. AI 性能与局限分析
• Claude Code 在调试测试与识别重复模式方面表现优异。
• 局限包括 context 深度不足、长任务遗忘指令、无法稳定维持覆盖率。
• 通过增加 JSON 格式的覆盖率报告输入，AI 能理解覆盖问题并修复。
• 网络波动与服务超限导致中断，验证仍需人工把关。

7. 工程启示与最终成果
• 整体用一周完成迁移，每个 PR 约半小时。
• 若纯人工迁移，估计需数月。
• 迁移过程机械但 AI 显著提升效率。
• 保持验证自动化、关注 edge case、理解底层工具机制，是让 AI 发挥价值的关键。
• 作者展望未来 AI 将进一步解放开发者，从“重复劳动”转向更有创造力的工作。

author Elio Capella Sánchez

Eliocapella

Migrating 6000 React tests using AI Agents and ASTs

How I used AI to migrate 970 test files with 6000+ test cases from React Testing Library v13 to v14 in one week, through 50 PRs that would have taken months manually.

#前端 #course
老仓库了，适合初学者。
JavaScript Algorithms and Data Structures
一个涵盖经典算法与数据结构的 JavaScript 示例仓库，其中每个算法和数据结构都有其独立的 README 文件，包含相关的解释和进一步阅读的链接。

GitHub

GitHub - trekhleb/javascript-algorithms: 📝 Algorithms and data structures implemented in JavaScript with explanations and links…

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings - trekhleb/javascript-algorithms

#优质博文 #react #前端 #JavaScript #Astro
还是看业务复杂程度～不过我觉得 Astro 超好用www
Why use React?

AI 摘要：作者以一种反思式的语气询问开发者——我们为什么要在浏览器里使用 React？文章从技术惯性、前后端职责演变、开发者文化到框架优先级等多个角度分析 React 的盛行原因与隐形代价。作者最终的立场是：在服务端使用 React 无可厚非，但在客户端运行 React 则可能损害用户体验。若仅因文化或团队习惯而加载庞大的 React 库，不如考虑 Preact、Astro 或直接用原生 JavaScript（vanilla JS），以提升性能和用户友好度。

[以下是方便搜索索引的大纲（AI 生成），请读原文]

1. 选择 React 的现象与动机
• 多数开发者使用 React 并非出于设计或性能考虑，而是出于团队惯性或工作要求。
• 作者将“被强制使用的技术”定义为企业级软件（enterprise software）。
• 惯性（Inertia）被认为是 React 持续流行的首要原因。

2. 前端与后端的边界变化
• 过去前端与后端有清晰分工，如 HTML、CSS、JavaScript 属于前端，PHP、Ruby、Python 属于后端。
• 随着 JavaScript 可在服务器端执行，开发者常忽视客户端代码的性能代价。
• 客户端执行环境有限，文件体积和加载时间至关重要，而服务端则可通过硬件“买掉”性能瓶颈。

3. React 开发者文化与生态迁移
• React 从最初强调虚拟 DOM 到后来因组件化架构与 JSX 被开发者喜爱。
• React 不再只是前端库，而是类似 Rails、Django 的全栈式生态。
• 这种文化层面的认同让开发者倾向于“全用 React”，即便这并不总是对用户友好。

4. 框架优先级与替代方案
• Next.js 推行服务端渲染（SSR），但仍倾向输出同样的客户端 React 代码，造成资源浪费。
• Astro 框架提出“最小化客户端 JavaScript”的思路，保留 JSX 作者体验但减轻用户负担。
• React/Next/Vercel 生态的惯性使这种思路被边缘化，但 Astro 展示了另一种可能。

5. 回归问题：为什么在浏览器使用 React？
• 若使用 React 只是团队协作或文化原因，可仅在服务端保留 React。
• 前端若非单页应用（SPA），应尽量减少 JavaScript 框架负担。
• 若确需前端状态管理，可考虑 Preact 或探索原生 JavaScript 的能力。
• 作者倡导：让框架留在服务器，充分利用浏览器本身的强大功能。

author Jeremy Keith

Adactio

Why use React?

Or, more precisely, why use React *in the browser*?

#优质博文 #CSS #前端
light-dark() isn't always the same as prefers-color-scheme

AI 摘要：这篇文章探讨了 CSS 新特性 light-dark() 与经典媒体查询 prefers-color-scheme 之间的区别。作者原以为前者可以“一键取代”后者，但在实际项目中发现，light-dark() 依赖于 color-scheme 属性的正确设定，而 prefers-color-scheme 完全基于操作系统的偏好。两者虽然目标相似（响应亮/暗模式），却响应机制不同，导致主题切换时的表现并不一致。开发者在实现自定义主题时，应理解它们的区别，以正确控制组件的配色逻辑。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 新特性背景与初衷
• 作者在 “Today I learned” 系列中分享 CSS 的最新学习经验
• 以为 light-dark() 能替换 prefers-color-scheme，从而精简代码
• MDN 对 light-dark() 的定义：能为属性设置两种颜色，而无需媒体查询

2. light-dark() 的工作条件
• 必须在 :root 或容器上设置 color-scheme: light dark; 才能生效
• 若未设定 color-scheme，light-dark() 无法根据系统主题切换
• prefers-color-scheme 无论 color-scheme 是否存在，都能响应操作系统主题

3. 实际项目中的表现差异
• 以 Web Weekly 网站重构为例，作者使用 Tailwind CSS 配置了自定义颜色变量
• light-dark() 自动翻转颜色逻辑，但 prefers-color-scheme 与 color-scheme 之间无联动
• 当通过 color-scheme 切换主题时，light-dark() 能正确响应；而 prefers-color-scheme 仍只看系统设置
• 这种行为差异源于 prefers-color-scheme 的历史兼容性设计

4. 结论与经验
• light-dark() 并非 prefers-color-scheme 的替代品，而是基于 color-scheme 工作的全新机制
• prefers-color-scheme 更偏向全局系统偏好，light-dark() 更适合组件级主题控制
• 实现主题切换前，应明确两者触发机制，避免预期不符

author Stefan Judis

Stefanjudis

light-dark isn't the same as prefers-color-scheme

`light-dark()` and `prefers-color-scheme` treat the defined `color-scheme` values differently.

#tools #前端 #color #设计 #网站
Color Palette Pro
一款能像音乐合成器一样自由调制色彩的在线调色工具，支持多种色彩空间与样式切换，实时生成色阶、色环、阴影与高光调和效果，非常适合设计师进行系统化配色或视觉一致性探索。

主要是设计的非常漂亮诶，但是交互我觉得很容易看不懂也没有 tooltip 之类的～

#碎碎念 #优质视频
很喜欢长大之后对得失已经不是那么在意了的自己，也不讨厌小时候笨笨的情感外露的我自己。

其实我的印象里，是 2019 年记忆最深刻，那年我大一入学，高考完毕，院运动会，OJ 周赛，欣欣向荣。虽然其实后面四年我过得也不差，但是疫情来了，校运动会不开了，各方面也都受到了很大限制，四年大学基本上三年疫情。

说来惭愧，妈咪把我养的很好，从小到大没做过任何家务（洗碗、做饭、打扫卫生），每天家里都是干干净净的，是个生活白痴，很多常识性的东西都是靠后面自己看，所以现在我会回馈她（）

哎哟，煽情剑法。
【“视频拍摄于2018年三十，不过7年而己，总感觉失去了什么，却什么也想不起来，时间过得真快啊，还有一个月就2026年了...”】
https://www.bilibili.com/video/av115591042105827

Bilibili

“视频拍摄于2018年三十，不过7年而己，总感觉失去了什么，却什么也想不起来，时间过得真快啊，还有一个月就2026年了...”_哔哩哔哩_bilibili

“视频拍摄于2018年三十，不过7年而己，总感觉失去了什么，却什么也想不起来，时间过得真快啊，还有一个月就2026年了...”, 视频播放量 2041625、弹幕量 1862、点赞数 278397、投硬币枚数 16800、收藏人数 65213、转发人数 8647, 视频作者 唯美风景线, 作者简介 “平凡生活的调味剂，美景分享” 合作vx wmfjx0225备注来意，投稿任意网盘 素材来自网络，侵权联系即删，相关视频：2026将是最爽的一年，原来2015年已经是九年前了，拍摄于2012年1月13号，在…

#前端 #AI #ClaudeCode
这个好，现在可以用 cc 的插件弥补他的前端设计技能，
在 Claude Code 里用这两条命令：

/plugin marketplace add anthropics/claude-code

/plugin install frontend-design@claude-code-plugins

https://fixupx.com/trq212/status/1993786550656897491

Thariq(@trq212):Opus 4.5 is our best model yet for design & vision.
Here are some of my favorite UIs we made with Claude Code's frontend-design plugin.
To try this yourself add our marketplace in Claude Code:
/plugin marketplace add anthropics/claude-code
and then install the plugin:
/plugin install frontend-design@claude-code-plugins

🧵 Thread • FixupX

Thariq (@trq212)

Opus 4.5 is our best model yet for design & vision.

Here are some of my favorite UIs we made with Claude Code's frontend-design plugin.

#优质博文 #webgpu #前端 #浏览器 #新动态
WebGPU 现在也是全面支持了，但是 Safari 是 iOS 26 才支持，而且 Safari 移动端给的显存嘛……少少的。

WebGPU is now supported in major browsers

AI 摘要：文章宣布 WebGPU 正式在 Chrome、Edge、Firefox 与 Safari 上全面支持，这标志着网页端高性能计算和 3D 图形的新时代。WebGPU 不仅替代 WebGL，更在性能与设计层面跃升，支持现代 GPU 功能、Compute Pipeline（通用计算管线）和 Render Bundles（渲染指令集复用）等特性，为游戏、AI 推理、视频处理和物理仿真提供桌面级性能。文章还介绍了各浏览器与操作系统的支持情况以及生态圈的成熟度，包括 Babylon.js、Three.js、ONNX Runtime、Transformers.js 等框架的支持，并感谢各大公司与开发者的多年协作。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. WebGPU 的意义与特性
• WebGPU 是 WebGL 的继任者，提供更现代、更高效的 GPU 接口。
• 设计包含符合 JavaScript 习惯的 API 与现代着色语言（Shader Language）。
• 支持 Compute Pipeline，让网页端可以执行机器学习推理、模型训练、视频处理等高性能任务。
• Render Bundles 能记录并重用渲染命令，提高性能、降低 CPU 开销。
• 示例：Babylon.js 的 Snapshot Rendering 通过 Render Bundles 提升渲染性能约 10 倍。

2. 浏览器与系统支持现状
• Chrome / Edge：在 Windows（Direct3D 12）、macOS、ChromeOS 自 v113 起支持；Android 自 v121 起支持。
• Firefox：Windows 自 v141 起支持，macOS ARM64 自 v145 起支持。
• Safari：在 macOS、iOS、iPadOS、visionOS 的版本 26 中支持。
• Linux、Android 及部分平台的支持仍在持续开发中，可查看 Implementation Status。

3. WebGPU 生态系统的成长
• 主流框架已支持 WebGPU，包括 Babylon.js、Three.js、PlayCanvas、ONNX Runtime、Transformers.js、React Native WebGPU、TypeGPU、Unity WebGPU。
• 底层引擎如 Dawn (Chromium) 与 wgpu (Firefox) 可独立使用，方便跨平台开发。
• 借助 WebAssembly (Wasm)、Emscripten、Rust web-sys 等工具，可将原生 GPU 应用移植至 Web。

4. 致谢与社区协作
• WebGPU 的成功来自 W3C GPU for the Web Working Group 的多年协作。
• 感谢多家公司与贡献者，包括 Apple、Google、Intel、Microsoft、Mozilla 等。
• 特别致谢开发者 Corentin Wallez、Ken Russell、Thomas Lucchini 等。

author François Beaufort

web.dev

WebGPU is now supported in major browsers  |  Blog  |  web.dev

Read about the biggest web graphics launch since WebGL. WebGPU is supported across major browsers, bringing unparalleled performance to the web.

#优质博文 #css #前端 #浏览器 #新特性
Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

AI 摘要：文章介绍了 Chrome 144 对 CSS 属性 overscroll-behavior 的改进：该属性现在在“不可滚动的滚动容器”上也有效，这意味着开发者可以用简单的 CSS 代码阻止页面在对话框（<dialog>）打开时滚动。作者解释了这一特性的技术背景、过去的限制及其在不同浏览器支持上的现状，并展示了一个实现示例。

author Bramus!

Bram.us

Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open

Chrome 144 features a small change to overscroll-behavior: it now also works on non-scrollable scroll containers. While this change might seem trivial, it fixes an issue developers have been dealing with for ages: prevent a page from scrolling while a (modal)…

#优质博文 #生活
很温柔的文章，提出「自洽而非自律」，「好好生活」不靠逼迫，而靠理解与自洽。
入选年度我最喜欢的文章，值得停下来，慢慢看。

谈谈不自律的良好生活 - 少数派

说到这里，肯定会有朋友提出质疑：「我毕竟没有退休，上班已经够累了，下班只想躺着刷刷手机，怎么可能再去做这些事？」。然而，刷手机很难说是有效的休息。App 的推荐算法通过调动人的情绪，使用户在开心与悲伤、得意与焦虑之间反复横跳，进而抓住用户的注意力。这样的方法有利于延长使用时间，但却无益于用户的心理健康。在情绪的拉扯中，用户的劳累、焦虑只会不断加剧。等到几个小时过后，只剩下雪上加霜的虚无感。相比起来，爱好与工作对大脑的调用有所区别，投入自己的爱好虽然看起来比较费劲，但只要能专注在其中，很快就会忘记烦恼和疲劳，工作大脑也能得到充分的休息。

仔细地审视人心，会发现很多惊人的矛盾。现实中，爱别人或爱物品似乎都要比爱自己常见得多。人们把自己的感情付出给爱人、付出给偶像、宠物、喜爱的品牌，或者付出给组织和国家。偏偏忘了，其他无论什么都是生命里的过客，从起点到终点，一直陪伴自己的始终只有自己。爱，尤其是无条件的爱，原本在自己身上最简单，最「合理」。「莫向外求」是有道理的，许多人为了能够被爱，起早贪黑，奋不顾身，就像沙漠中的人长途跋涉寻找甘泉，却忘记了绿洲就在自己出发的地方。

我自己常常经历或大或小的失衡。虽说都是我想要或需要做的事，但长期专注于一件事，总会变得索然无味，或者导致生活中实际的问题。比如说学习哲学固然快乐，然而抽象的知识学习久了容易脱离生活，甚至在心中贬低美食、美景这样直接的乐趣，给自己的生活平添烦恼；和朋友聚会固然快乐，可把时间全部消耗在社交上，缺少了独处时间，便很难澄清思想、实践爱好、发挥创造力，最终变得空虚。生活大概也和做菜差不多，需要五味俱全、荤素搭配。努力让自己的不同侧面和谐共处，不是把它们都按在一个房间里正襟危坐，而是要让它们从座位上起来，友好地交谈、游戏、逗乐。这样的生活，才算得上生机和趣味。

author Sylvan_Wang

少数派 - 高品质数字消费指南

谈谈不自律的良好生活 - 少数派

Matrix首页推荐Matrix是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选Matrix最优质的文章，展示来自用户的最真实的体验和观点。文章代表作者个人观点 ...

#优质博文 #CSS #前端 #布局 #grid
Brand New Layouts with CSS Subgrid • Josh W. Comeau

AI 摘要：本文通过多个实例（如艺术作品集和定价卡等）讲解了 CSS Subgrid 的基础概念、进阶用法与常见陷阱。Subgrid 允许嵌套元素继承父级网格结构，实现跨层级的布局一致性与响应性，从而简化复杂 UI 的构建。作者展示了它如何解决兄弟元素互不联动、语义化结构打破布局等老问题，并警示了行数预留、索引重置和兼容性等细节，同时提供了实用的 Fallback 策略。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. Subgrid 基础与语义化改进
• 传统 CSS Grid 仅支持直接子元素参与布局，嵌套结构会破坏网格定位。
• Subgrid 通过继承父网格行列定义，让子元素（如 <ul><li>）复用父结构，从而保持语义化 HTML 与视觉布局同步。
• 基本用法：display: grid + grid-template-rows: subgrid + grid-template-columns: subgrid。
• 对比方案包括使用 Flexbox 嵌套 Grid，但 Subgrid 更能保持整体一致布局。

2. 新的布局可能性与动态响应
• 示例中展示了艺术作品卡片在不同屏幕下的两列布局问题，Subgrid 可让列宽动态适配内容。
• 通过共享父网格的列定义，兄弟 <article> 间可以互相影响，实现内容驱动的响应式调整。
• Subgrid 的计算方式可让布局在标题长度等内容变化时自动调整。
• 这种“跨组件感知”的能力是传统 CSS 无法实现的。

3. 实践陷阱（Gotchas）解析
• 行空间预留问题：Subgrid 默认只占一行，需明确声明 grid-row: span n 避免元素重叠。
• 索引重置：Subgrid 内行/列线号会重新编号，非父级的延续 ID。
• 流式网格不兼容：auto-fill, auto-fit 等自动列数写法与 Subgrid 不完全兼容，需要显式定义列。
• 旧版浏览器支持：截至 2025 年仍未达 90%，推荐通过 @supports 编写单列垂直 fallback 布局。

4. 实战与兼容性策略
• 用 Subgrid 搭建灵活的定价卡（Pricing Card）示例，实现不同卡片内容的行高完全对齐。
• 介绍 Feature Query (@supports) 实现优雅降级。
• 讨论如何平衡“视觉一致性”与“用户体验优化”；Fallback 不追求完美复刻，而是保持最佳体验。

5. 背景与应用前景
• Stripe Developer Site 是 Subgrid 的大型示范：多层 Subgrid 构建超大布局。
• 但作者更看重 Subgrid 在小范围 UI 调整、组件层布局优化的价值。
• Subgrid 可逐步引入项目，提高代码语义与一致性，而非一次性重构全站。

author Josh W. Comeau

Joshwcomeau

Brand New Layouts with CSS Subgrid • Josh W. Comeau

Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid…

#优质博文 #CSS #HTML #前端 #新特性
巧用CSS ::details-content伪元素实现任意展开动画

AI 摘要：回顾了 <details> 与 <summary> 元素自 2018 年以来的演进，重点介绍了新引入的 ::details-content 伪元素，使得内容展开收起可实现平滑动画；同时讲解了内容锚点（hash）自动展开机制，以及 scroll-margin-block-start 的可用技巧。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. HTML <details> 元素的演进
• 从 2018 年起 <details> 结构不断完善，三角箭头改为 ::marker，与列表元素标记统一。
• 新增 name 属性，支持手风琴式（accordion）互斥展开。
• 支持内容区域 hash 匹配自动展开，实现无 JS 的动态交互。
• 引入 ::details-content 伪元素，为内容区域提供 Shadow DOM 层级的样式控制。

2. ::details-content 实现动画展开效果
• 通过 transition 联合 content-visibility、height 等属性实现收展动画。
• 详细解释 allow-discrete 特性，使离散属性如 display 支持过渡动画。
• interpolate-size: allow-keywords 让 auto 尺寸参与动画计算。
• 属于渐进增强（progressive enhancement）方案，浏览器不支持也不会出错。

3. 锚点匹配与自动展开机制
• 当 details 内容的元素被 URL hash 定位时，details 自动展开。
• 该行为与 hidden="until-found" 类似，由 content-visibility 支持。
• 通过样式调整滚动定位：scroll-margin-block-start 设置元素滚动停留位置，提升体验。

4. 浏览器支持与语法参考
• 现代浏览器几乎在同一时间点全面支持 ::details-content。
• 使用语法为 selector::details-content，适用所有常规 CSS 属性。
• 由于支持良好，可放心在生产环境渐进式增强。

author 张鑫旭

Zhangxinxu

巧用CSS ::details-content伪元素实现任意展开动画 « 张鑫旭-鑫空间-鑫生活

details元素又新支持了一个CSS选择::details-content伪元素，可以匹配内容阴影DOM，我们可以利用这个伪元素进行区域背景设置，或者实现实用的展开收起的动画效果。

#优质博文 #AI #工程实践 #ClaudeCode #工程化
非常好文章，在 X 上的 yousa：“我把前几天在Trae的分享整理成了文字稿“ 里看到的。

yousa (@y0usali): 我把前几天在Trae的分享整理成了文字稿
「https://yousali.com/posts/20251124-how-to-coding-with-ai/」
这篇文章写给已经在或准备在真实生产项目里用 AI Coding 的后端 / 全栈工程师和技术管理者。
它不会教你「按钮在哪里」「哪个 prompt 最神」，而是想在大约 15 分钟里，帮你搞清楚三件事：
哪些任务交给 AI 最「划算」；
怎么让项目本身变得更「AI 友好」，提高一次命中率；
当生成不再是瓶颈时，工程师应该如何设计验证流程，把时间花在真正值钱的地方。

从「写代码」到「验代码」：AI 搭档写走 3 年，我踩出来的协作路线图

AI 摘要：作者总结三年 AI 编程经验，指出 AI 写代码的时代关键不在「准不准」而在「值不值」。文章从个人与团队两个视角分析了 AI 生成代码的最佳使用场景（高重复、低风险、易验证）、如何构建「AI 友好」项目，以及工程师心态从「写代码」到「验代码」的转变。核心结论是：生成已不再是瓶颈，验证才是新的核心；AI 的上限取决于给它的上下文（Context）。标准化与自动化是让 AI 值得信赖的关键，而工程师应成为定义任务与设计验证系统的「总工程师」。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 两种声音与早期弯路 —— 从试验到思考
• AI 编程存在两极化认知：「神迹」与「玩具」并存。
• 初期盲目尝试，成功靠运气，暴露问题在于目标定义不清。
• 结论：关键在于明确「让 AI 干什么」，而非讨论「准不准」。

2. 从关注准确率到计算性价比 —— 「甜点区」的发现
• 引入「效率增益」公式衡量 AI 协作的价值。
• 四类高性价比任务：高重复、高耗时、低风险、易验证。
• 案例：模块化模板 + few-shot 示例提升生成质量。
• 心态转变：接受 AI 错误，注重系统级可靠性。
• 工程协作比喻：把 AI 当成「聪明但不熟悉项目的实习生」。

3. 团队视角的优化 —— 让项目更「AI 友好」
• 数据显示企业中 20%–30% 新代码由 AI 生成，但效率提升有限。
• 关键差异在于：项目是否标准化与自动化。
• 标准化**：统一接口规范、术语表、文档说明，让人机共享上下文。
• 自动化：降低验证成本，AI 助力 pre-commit、自动测试、CI/CD 等流程。
• 实践公式：讲清规则 → AI 辅助执行 → 人专注高价值审查。

4. 工程师的心理负担与注意力管理
• 高频切换任务使「注意力成本」爆炸，人类像「上下文很小的 LLM」。
• 心流（flow）被碎片化交互打断，导致疲惫与效率下降。
• 自救方法：时间分层、AI 时分复用、三分钟原则、沟通卫生与单线专注。
• 重点转移：保护注意力等于提升系统整体吞吐。

5. 稳定的两条工程原则
• 原则一：生成已非瓶颈，验证是核心
• 聚焦测试、监控、回滚机制。考核应基于 Bug Lead Time 而非代码量。
• 原则二：上下文为王（Context is King）
• 上下文完整度决定 AI 产出质量。
• 推广路径：统一规范 → 写进仓库 → 自动化验证。
• 单句箴言：AI 写代码的水平 = 你提供上下文的水平。

6. 给三类读者的建议
• 新手：从小型任务切入，先找「值不值」感受。
• 重度用户：从优化上下文与验证流程入手。
• 管理者：亲自尝试，引导从「个人提速」走向「团队工程化」。

author yousa

🧵 Thread • FixupX

yousa (@y0usali)

我把前几天在Trae的分享整理成了文字稿
「https://yousali.com/posts/20251124-how-to-coding-with-ai/」

这篇文章写给已经在或准备在真实生产项目里用 AI Coding 的后端 / 全栈工程师和技术管理者。
它不会教你「按钮在哪里」「哪个 prompt 最神」，而是想在大约 15 分钟里，帮你搞清楚三件事：

哪些任务交给 AI 最「划算」；
怎么让项目本身变得更「AI 友好」，提高一次命中率；
当生成不再是瓶颈时，工程师应该如何设计验证流程，把时间花在真正值钱的地方。