#前端 #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 友好」，提高一次命中率；
当生成不再是瓶颈时，工程师应该如何设计验证流程，把时间花在真正值钱的地方。

#React #CSS #前端 #组件库 #新动态
Ant Design 6.0 来了！

AI 摘要：Ant Design v6 正式发布，以技术升级和未来兼容性为核心，全面支持 React 18+，引入纯 CSS Variables 模式、全量组件语义化结构，并新增 Masonry、可拖拽 Drawer、模糊蒙版等实用功能。此次升级保持对 v5 的完全兼容，带来更轻盈的打包体积与更灵活的定制体验。Ant Design X 也同步发布 2.0，聚焦 AI 场景的 UI 体验，预示着生态的又一次跃进。

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

1. 版本背景与发布说明
• Ant Design 自开源以来积累超 96K Star、2K+ 贡献者，社区生态庞大。
• v6 聚焦技术优化与未来 React 版本兼容，标志进入新阶段。
• 与 v5 之间为平滑迁移，v5 进入一年维护周期。

2. 技术升级与核心变化
• React 版本提升：最低要求 React 18，推荐使用 React 19，移除旧版兼容逻辑。
• 启用 React Compiler：在构建产物中优化性能，开发者可自行选择是否开启。
• 纯 CSS Variables 样式架构：全面弃用 IE 兼容逻辑，样式实现零运行时（zeroRuntime）模式，支持实时多主题切换。
• 组件语义化结构：所有组件 DOM 结构优化，支持函数式类名配置 (classNames) 与内联样式 (styles)，提升定制能力与可维护性。
• 移除废弃 API：彻底移除 v4 遗留逻辑，统一 API 命名，同时兼容 v5 的使用方式。

3. 新组件与功能增强
• Masonry 瀑布流组件：优化图片展示与卡片排布体验。
• Tooltip 支持平移切换：多内容提示实现滑动过渡。
• InputNumber spinner 模式：交互式加减按钮布局更直观。
• Drawer 支持拖拽：用户可调整抽屉大小。
• 模糊蒙版背景：所有弹层默认使用模糊特效，可按需关闭。

4. 升级指南
• v6 可直接从 v5 升级，无需 codemod 或兼容包。
• 项目需运行在 React 18+ 环境。
• 不再支持 IE，建议替换废弃 API。

5. 未来计划
• 聚焦移动端交互体验与可访问性（Accessibility）增强。
• 跟进 React 新特性，持续优化性能。
• 持续推出新组件，拓展生态边界。

6. One More Thing —— Ant Design X 2.0
• 面向 AI 场景的组件库同步升级，提供更智能的交互能力。
• 新版本强化渲染性能与灵活性，是探索 AI 驱动界面的关键工具。
• 更多详情可参考 🎉 Ant Design X 2.0 正式发布了 🎉。

7. 致谢
• 官方感谢 2000+ 贡献者的支持与共创。
• 十年开源历程，秉持「因为你们的参与，开源才美好」的初心。

GitHub

🎉 Ant Design 6.0 来了！ 🎉 · Issue #55805 · ant-design/ant-design

English | 中文 引言 自开源以来，Ant Design 已收获 96.6K Star、累计 31.9K issue、20.7K PR、发布了 904 个 npm 版本，并有 2314 位贡献者 共同参与其中。这些数字不仅代表着社区的活跃度与支持，也见证了项目的不断进化与成熟。 正因为你们，Ant Design 才能不断成长，向下一站前行：《Plan about Ant Design...

#优质博文 #前端 #CSS #动画 #工程化 #规范 #course
Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine

AI 摘要：本文介绍了通过将动画关键帧 (@keyframes) 设计为可重用的 Keyframes Tokens，来实现动画系统的标准化与可维护化。作者说明了动画重复定义与全局作用域冲突带来的问题，提出以集中式样式表、命名空间、可定制的 CSS 自定义属性（custom properties）和设计 tokens 的方式来统一所有动画。文中展示了 fade-in、slide-in、zoom、spin、pulse 等动画的动态实现，并讨论了动画叠加、组合 (animation-composition)、可访问性 (prefers-reduced-motion) 与实际项目实施策略。核心思想是：让动画像颜色、字号、间距一样成为可管理的系统资源。

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

1. 动画混乱的根源
• 各组件独立创建重复的 @keyframes，导致代码冗余。
• CSS keyframes 属于全局作用域，容易被后加载样式覆盖。
• 修改或统一动画需全局搜查，影响维护效率。

2. 统一的解决方案：Keyframes Tokens
• 将动画关键帧集中存放在共享样式表中，形成唯一数据源。
• 利用命名空间（如 kf- 前缀）避免命名冲突。
• 借助 CSS 自定义属性实现动态参数化，支持多场景适配。
• 使动画定义与其他 design tokens（颜色、间距等）协同管理。

3. 构建基础动画库
• Fade In：定义基础淡入动画并统一调用。
• Slide In：通过自定义属性 --kf-slide-from 控制入场方向。
• Zoom：用 --kf-zoom-from/to 实现双向缩放。
• Spin/Pulse：封装连续动画，可控制旋转幅度、脉冲强度。
• Bounce/Elastic：展示复杂缓动（easing）动画封装方法。

4. 动画组合与冲突处理
• 可将多种动画组合，如 fade+slide 或 zoom+pulse。
• 对同一属性冲突时使用 animation-composition: add; 合并动画效果。
• 适当使用动画时间错位（stagger）提升视觉节奏。
• 说明 transform 与单独变换 (translate/scale) 的执行顺序差异。

5. 无障碍与减弱动效（Reduced Motion）
• 利用 prefers-reduced-motion 提供无动画或柔和过渡版本。
• 对需要仍然变换属性的动画定义瞬时完成（instant-in）版本。
• 保留必要动效但平滑化运动，提升可访问性。

6. 实施策略与最佳实践
• 渐进引入：从常见动画（fade、slide）着手。
• 命名规范：统一前缀标识 token 动画。
• 文档化：在 token 文件添加注释说明用途与参数。
• 灵活性与简洁性：仅暴露必要自定义属性。
• 融入设计体系：将 keyframes tokens 视为 design language 的一部分。

author Amit

Smashing Magazine

Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine

Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By consolidating and standardizing keyframes, you take something that is usually messy and hard to…

#优质博文 #前端 #调试技巧 #JavaScript #CSS #Chrome
断点是真的很重要。严肃学习！
Six Things I Bet You Didn't Know You Could Do With Chrome's Devtools, Part 1

AI 摘要：本文由 Rachel 撰写，灵感来自 TechBash 会议中 Mike Rapa 的讲座，介绍了 6 个鲜为人知的 Chrome DevTools 技巧。本篇是 Part 1，涵盖前三个内容：用 console.time() 和 console.timeEnd() 精准计时函数执行、利用 DOM Breakpoints 实时捕捉元素变化，并自动暂停脚本运行、以及用 monitor() 在控制台监听任意函数调用。

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

1. 文章背景与启发来源
• 作者参加 TechBash 会议，受到 Mike Rapa 的 DevTools 演讲启发。
• 本文专注于 Chrome DevTools 的 3 个隐藏功能，Firefox 部分功能支持略有不同。
• 计划分上下两篇，本篇为 Part 1，介绍前三个功能。

2. 计时函数性能监控
• 介绍 console.time() 与 console.timeEnd() 的使用，可精确测量代码块执行耗时。
• 提及 console.timeLog() 用于中间打印时间进度。
• 举例说明结合 React Hook 使用场景，展示暂停与超时逻辑的时间追踪方案。
• 来源：Mike Rapa 的演讲及 Github 仓库。
• 支持情况：原生 JS 特性，各浏览器均可使用。

3. 通过 DOM Breakpoints 检测元素变化
• 介绍如何在 Chrome Elements 面板中为任何 DOM 元素设置 "Break on" 断点。
• 当该元素属性、子树或节点被修改时，自动暂停脚本执行。
• 可快速定位导致页面 UI 异常的脚本。
• 提供 Stack Overflow 示例，展示实际操作方法。
• 支持情况：主流浏览器支持，Firefox 行为略有差异。

4. 使用 monitor() 监听任意函数调用
• 在控制台中可用 monitor(functionName) 监控任意函数调用及其参数。
• 帮助调试第三方脚本或不易插入 console.log() 的代码。
• 示例：sum(1,2) 会在控制台输出调用信息。
• 来源：Google DevTools Utilities 文档。
• 支持情况：仅支持 Chrome。

5. 预告与后续主题
• 作者计划在 Part 2 中讨论剩余三项：可视化编辑网页（WYSIWYG）、记录与重放用户操作、按需限速网络请求。
• 鼓励读者关注后续更新、尝试在实际项目中运用这些技巧。

author Rachel Kaufman

Rachel Kaufman, developer

Six Things I Bet You Didn't Know You Could Do With Chrome's...

Hidden and not-so-hidden tools that will make your life easier.

#优质博文 #CSS #3d #前端 #JavaScript
How to Create 3D Images in CSS with the Layered Pattern

AI 摘要：本文介绍了如何通过 CSS 3D transform 与 “layered pattern（分层模式）” 创建栩栩如生的 3D 图片效果。作者从 HTML 结构设计、CSS 3D 场景设置、层间位移计算、亮度与饱和度调节到交互控制面板（含 JavaScript）完整展示了创建流程。文章强调了分层视觉的本质是在二维平面中利用透视与光影制造立体幻觉，并通过 perspective、translateZ()、filter 等技巧实现动态的 3D 效果。

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

1. 3D CSS 概念与分层模式简介
• 概述 CSS 3D 的发展历史，从 2009 年起被 W3C 规范化
• “layered pattern（分层模式）”通过多个图层叠加制造立体幻觉
• 提示需理解 CSS perspective 与坐标系 (x, y, z) 概念

2. HTML 结构设计
• 使用 <div class="scene"> 包裹整个 3D 场景
• 建立多层重复图像 (.layer) 并以自定义属性 --i 标识层级
• 通过 aria-hidden="true" 处理无障碍可访问性问题
• 提及未来可通过 sibling-index() 和 sibling-count() 优化层索引

3. CSS 构建 3D 场景
• 设置 .scene { perspective: 1000px } 以控制深度
• 启用 transform-style: preserve-3d 让所有层在三维空间可见
• 通过 --layers-count 和 --layer-offset 控制层数与间距
• 利用 translateZ(calc(var(--i) * var(--layer-offset))) 实现纵深位移
• 计算标准化变量 --n 以动态调节亮度与饱和度实现光影变化
• 使用 filter: brightness() 与 filter: saturate() 增强立体层次
• 布局上将 .layer 与 .layers 设为 position: absolute; inset: 0 覆盖叠加

4. 动画与交互控制
• 通过 @keyframes rotate3d 添加旋转动画模拟立体旋转
• 创建交互控件（input range 滑块与按钮）控制 perspective、层间距与旋转角度
• 使用 JavaScript 监听输入事件动态更新 CSS 自定义属性与图像内容
• 示例函数 updateRotation() 绑定 X/Y 旋转值，支持图片更换

5. 附加功能与扩展
• 控制面板提供图像切换与参数调节体验
• JS 实现与视觉绑定，删除原有动画以改为实时控制
• 结尾展示延伸案例 “3D CSS steak”，说明同一技术可应用于更复杂视觉模型

6. 小结与启示
• 3D CSS 的核心在于“二维模拟三维”的视觉幻象
• 有效结合 transform、perspective 与 filter 可获得高性能的 3D 效果
• 分层模式可扩展用于文字、图片、UI 元素等多种设计

author Sunkanmi Fafowora

#碎碎念 #AI #前端 #设计
感觉 gemini 3 pro 的设计确实好有意思哦，给了我不少灵感
还能 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; 这么玩儿（）

要做一个无关紧要的官网，我给我们设计安利了 gemini 3 pro 说这个可以出原型，他试了一下一直在卧槽卧槽（直呼底层设计要失业）
（好吧大家一起失业吧x）

https://aistudio.google.com/apps
https://github.com/ZeroLu/awesome-gemini-ai

0:08

Media is too big

VIEW IN TELEGRAM