AI 摘要： 本文探讨了 ChatGPT 在提供 CSS 解决方案时，生成的代码中包含过时和冗余的问题，特别是在 CSS 渐变文本动画的实现上。作者通过分析 ChatGPT 提供的代码，指出其使用了早已不必要的 WebKit 前缀和无效的属性（如 -webkit-text-fill-color），并追溯了 CSS 渐变文本技术的发展历史，揭示了这些过时方案的起源与现代浏览器的兼容性现状。文章还批评了 AI 工具在生成代码时未能根据当前技术标准优化方案的缺陷，呼吁开发者审慎使用 AI 生成的代码，并结合现代工具（如 @supports）来确保代码的高效与兼容性。

• 引言：ChatGPT 生成代码的问题
• 文章以一个网友询问如何实现类似 ChatGPT“搜索中”效果的 CSS 渐变文本动画为切入点。
• ChatGPT 提供的代码看似有效，但包含冗余和过时的 CSS 属性，在现代浏览器中毫无必要。
• 核心问题：ChatGPT 的代码未能反映现代 CSS 标准，包含了至少五年前已解决问题的过时解决方案。

• 代码分析：ChatGPT 方案的缺陷
• 提供的 CSS 代码使用 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent，这些前缀和属性在当前浏览器中已无必要。
• 代码中 background-size 和 background-position 的设置方式冗长且未使用简写，未能优化。
• 对比优化后的代码，作者展示了如何用更简洁的方式实现相同效果，且在所有浏览器中均无兼容性问题。

• CSS 渐变文本的历史与演变
• 回顾了 CSS 渐变文本技术的发展历程，从 2009-2010 年 WebKit 浏览器独占的支持，到 2016 年所有主流浏览器对 background-clip: text 的支持。
• 解释了 -webkit-text-fill-color 的历史用途：最初用于解决 2010 年非 WebKit 浏览器不支持渐变文本时文本透明度问题。
• 指出该属性现已成为冗余，因为现代浏览器已全面支持相关标准，且 ChatGPT 代码同时设置了 color: transparent，完全违背了当初使用前缀的初衷。

• 浏览器兼容性与前缀问题的历史
• 讨论了 WebKit 前缀（如 -webkit-）在非 WebKit 浏览器（如 Opera、Firefox、IE）中的支持历史，及其导致的混乱和兼容性问题。
• 提到 2010-2015 年间浏览器厂商对前缀的支持策略变化，以及如何导致开发者编写过多或不足的前缀代码。
• 强调现代浏览器已不再需要这些前缀，ChatGPT 提供的代码未反映这一现实。

• 代码优化建议
• 提出使用现代 CSS 特性（如 @supports）来处理兼容性问题，而非依赖过时前缀。
• 优化 background-size 和 background-position 的设置，省略不必要的参数，使用简写形式。
• 改进页面布局代码，避免 height: 100vh 导致的滚动条问题，推荐使用 display: grid 等现代布局方案。
• 建议设置更美观的字体，并使用 clamp 函数让字体大小自适应视口。

• 不仅仅是 ChatGPT 的问题
• 指出其他 AI 工具（如 Gemini）同样存在生成过时或错误代码的问题，原因是它们倾向于引用互联网上较旧但流行度高的解决方案。
• 强调 AI 生成代码缺乏时间上下文，开发者难以判断其是否过时，建议查阅原始资源或验证代码的适用性。

Frontend Masters

ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch

It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s what it told me!” – well, maybe not these exact words, but…

Filip Zrnzevic 精心重现了 Braun 玻璃钟的外观和功能。在预览模式下按下 H 键，即可打开设置面板，调整时钟的内部运作。

Jordan Delcros 重建了个人作品集，展示其 WebGL、动画和交互式开发方面的最佳项目和技能，标志着其作为自由职业开发者的全新旅程。

AI 摘要：CSS attr() 这一特性在 Chrome 133 版本开始得到支持。通过 attr() 函数，CSS 代码量可大幅减少，HTML 属性直接控制样式变得更加灵活，例如间距、颜色、背景图等样式的动态设置。此外，文章还揭示了如何通过 image-set() 函数实现动态 URL 作为背景图显示的创新方法。尽管目前浏览器支持尚不全面，但作者对未来充满期待，认为 CSS 的发展将带来更多可能性。

与软件开发中的代码作斗争是一回事。而通过运用战略性软技能与僵化的世界观和自我意识作斗争则完全是两码事，而且是你可以学习的东西。

你可能不应该在早期阶段就固执己见，开始质疑。残酷的事实是，你是这家公司的新人，你必须接受——也必须接受——所有你之前遇到的愚蠢行为，就像其他开发人员一样。
等你慢慢适应了这个角色，你可能会发现自己更有能力去质疑这类事情了。但是！如果你所在的团队一直以来都不愿意听取你的理性意见，你就得加倍努力，列出一系列对你有利的技术论据，并用巧妙的论证说服他们。
所以，虽然我有一些疑问，而且我对一些事情很有主见——关于如何 “正确” 地做事——但我绝对不会开始质疑，除非我先把自己的论点写在纸上，并列好很多很多的清单。然后，我会向老板提出我想提出的问题。

从自己和年轻群友喜欢的内容对比来看，自己大抵是老了。

对于新词新概念的接受程度大幅下降了。
不再像年轻时那样，对新概念非常感兴趣，甚至认为没有新概念约等于过去的老古董。

老了之后就反过来了，对自己所不能理解的新概念非常排斥。
如果不是用旧词定义的缩写，出现一个真正的新词就已经产生反感了。
出现多几个就认为它在哗众取宠，不值得一读。

但是不得不承认，不断发明新概念是一种趋势。
尤其是在认知提升，效率控之类的领域。
但是积极上进的群友都很关注这些。

就导致很多时候群友转发或者讨论某种新概念，例如元心智或者氛围编程。
然后自己却已经对它打上哗众取宠的标签，完全没有能聊的共同语言。

AI 摘要：本文是 Node Weekly 第 579 期（2025 年 5 月 27 日）的newsletter，涵盖了 Node.js 社区的最新动态、工具更新和技术文章。内容包括 Node.js 协作峰会的报告、TypeScript 原生预览版的发布、Glitch 平台停止托管服务的消息、Node.js 版本更新，以及一系列与 Node.js 相关的工具和资源。此外，还涉及 JavaScript 生态系统的其他热点话题，如 Deno 的发展现状和 JavaScript 30 周年纪念。

• Node.js 协作峰会报告：每年两次的峰会讨论了 CI 安全事件、Async Context、编译应用到可执行文件的能力提升、Undici、模块加载器钩子及与 Chrome DevTools 的更好集成。
• Node.js TSC 拒绝功能赏金计划：讨论了是否应设立正式的功能赏金计划以奖励特定功能开发，官方暂时否决了此提议。
• TypeScript 原生预览版发布：TypeScript 编译器移植到 Go 语言，速度提升 10 倍，支持原生编译和并发处理，用户可自行尝试。
• 简讯 (In Brief)：
• Glitch 平台停止应用托管服务，未来方向不明。
• Astro 5.8 发布，不再支持 Node v18.20.8 之前的版本。
• Angular 20 即将发布，完全放弃 Node 18 支持。
• Node.js Next 10 调查仅剩三天。
• Node v24.1 (Current) 和 v22.16.0 (LTS) 发布，新增 node.config.json 支持。
• Seokho Song 撰写了关于成为最新 V8 提交者的文章。
• 技术文章：
• 探讨 Node.js 控制台文本样式的多种方法。
• 介绍 Node.js 内存管理中的 ArrayBuffer、TypedArray 和 Buffer。
• 讲解数组索引方法 at() 如何简化操作。
• 代码与工具 (Code & Tools)：
• Google Gen AI SDK v1.1：支持 TypeScript 和 JavaScript，集成 Gemini API。
• Astra：新的 JavaScript 转 EXE 编译器，仅限 Windows。
• Defuddle：提取网页主要内容的工具，类似 Mozilla 的 Readability。
• express-generator-typescript：Express.js 和 TypeScript 应用生成器。
• 其他工具更新包括 Express Slow Down、exiftool-vendored、Slonik、Multer 等。
• JavaScript 生态其他动态：
• Deno 团队发布 JavaScript 30 周年历史时间线。
• Ryan Dahl 称有关 Deno 之死的报道被大大夸大了。
• ESLint 9.0 过渡回顾及问题总结。
• Socket 发现更多恶意 npm 包。
• 开发者对 Node、Go、Rust 等语言进行压力测试，Node 表现不错，但最终在巨大的内存压力下失败了。

AI 摘要：本文详细介绍了一种利用 GSAP 和 CSS clip-path 技术实现的创意产品网格到全预览的悬停交互效果。作者受到设计伙伴的灵感启发，通过简化和视觉错觉的方式，将复杂的动画效果分解为多个步骤实现，包括布局设置、clip-path 动画、产品卡片移动、预览图像缩放以及图片画廊效果等。教程不仅展示了技术实现，还强调了简化和优化代码的重要性，同时关注了可用性和可访问性问题，适合对前端动画和交互设计感兴趣的开发者学习。