这是 Chrome/Firefox 的一个有趣的例子：你能发现为什么这个（有效的！）日期字符串被解析为五月吗？

const date = 'it is wednesday, my dudes. 2025, April, maybe...28(?)';
console.log(new Date(date)); // Wed May 28 2025 00:00:00 GMT-0700 (Pacific Daylight Time)

AI 摘要：本文深入探讨了 JavaScript 中日期解析的奇特行为，特别是在处理不同格式的日期字符串（如 '2025/05/28' 和 '2025-05-28'）时出现的差异。作者通过分析浏览器历史、规范演变以及代码实现，揭示了这种差异源于时区解析规则的模糊性和浏览器厂商在实现上的不一致。此外，文章还展望了即将到来的 Temporal API 如何解决这些问题，并附带了一些有趣的日期解析“彩蛋”。

AI 摘要：本文详细介绍了如何在 Astro 博客中使用 Hugging Face 的 transformers.js 库通过嵌入（Embeddings）技术实现智能相关文章推荐，而无需服务器或数据库。作者通过将博客内容转化为向量表示，并利用余弦相似度计算文章之间的语义相关性，成功构建了一个在构建时运行的推荐系统。这种方法比传统的标签分类更能捕捉内容的真实含义，极大地提升了推荐质量。

alexop.dev

No Server, No Database: Smarter Related Posts in Astro with `transformers.js` | alexop.dev

How I used Hugging Face embeddings to create smart “Related Posts” for my Astro blog—no backend, no database, just TypeScript.

AI 摘要：本期 JavaScript Weekly (2025 年 5 月 30 日) 带来了多项重要更新和资源。Remix 框架迎来重大变革，脱离 React 框架定位，转型为基于 Preact 的模型优先、低依赖的全栈框架；Temporal API 在 Firefox 139 中默认启用，为 JavaScript 日期和时间处理带来新解决方案；Angular v20 发布，稳定了信号和增量 hydration 等功能，并引入新的实验性 API。此外，还有关于 React 19、Chrome DevTools 性能调试、以及多个工具和框架更新的内容，涵盖了从前端框架到 AI 代码审查工具的广泛话题。

1. Remix 框架重大更新：
• Remix 与 React Router 一年前合并后，现再次转型，React Router 回归 Remix 最初定位。
• Remix 重启为基于 Preact 的模型优先、低依赖、Web API 中心的 full-stack 框架，不再是 React 框架。

2. Temporal API 即将上线：
• Temporal API 作为处理日期和时间的新方法，已在 Firefox 139 默认启用，很快将在更多运行时中可用。
• 文章探讨了其重要性及提供的功能，解决现有日期处理中的痛点。

3. Angular v20 发布：
• 稳定了信号 (signals) 和增量 hydration 等实验性功能。
• 引入新实验性 API，如资源流 (resource streaming) 和基于信号的 HTTP 请求 API (httpResource)。

4. 工具与资源：
• Svelte Flow 1.0：基于 Svelte 的节点 UI 和图表组件，用于构建交互式编辑器和图表。
• Cap：轻量级、现代开源 CAPTCHA 替代方案
• Google Gen AI SDK v1：支持 TypeScript 和 JavaScript 的 Gemini API 工具包，适用于 Node.js 开发。
• ReactJust：没有框架的服务器组件  —— 这种 “原始 RSC” 方法可能会引起您的兴趣。
• Linkify：将文本中的链接、标签和提及转换为 HTML 链接。

5. 文章与教程：
• JavaScript 日期问题解析：探讨为何 2025/05/28 和 2025-05-28 在 JavaScript 中是不同日期。
• Chrome DevTools 性能调试：介绍了更新后的性能面板新功能及使用方法。
• React 概念可视化：更新至 React 19，涵盖 actions、transitions 和 Server Components。
• Angular 博客搭建教程：使用 Analog 框架在 30 分钟内搭建博客。

6. 框架与技术探讨：
• JavaScript 框架 DOM 渲染方式：SolidJS 创作者分析框架渲染 DOM 的三种方式。
• React 元框架问题：Redwood 团队分享从头重建框架的经验。

7. 工具更新与发布：
• Bun v1.2.15：新增 bun audit 工具，用于项目依赖安全审计。
• Ink 6.0：支持 React 19，基于 React 构建 CLI 应用。
• Docusaurus v3.8：流行的文档导向静态网站生成器更新。

8. 其他动态：
• TC39 第 108 次会议推进多项提案，如 Seeded Pseudo-Random Numbers 进入 Stage 2。
• OpenJS 基金会成为 40 多个 JavaScript 项目的 CVE 编号机构。
• Node.js 技术指导委员会决定不设立官方赏金计划。

AI 摘要：本文是关于 CSS shape() 函数的第二部分，专注于 arc 命令的使用，探讨如何通过该命令创建复杂的形状，如扇形（Sector）和弧形（Arc）。作者详细介绍了如何使用 arc 命令绘制动态形状，解决绘制过程中的常见问题（如弧的方向和大小选择），并结合 CSS 条件逻辑和变量优化代码。本文还提到 shape() 函数目前仅在 Chrome 137+ 和 Safari 18.4+ 中受支持，适合对 CSS 高级特性感兴趣的开发者学习。

• 支持环境与背景：文章指出 shape() 函数目前仅在 Chrome 137+ 和 Safari 18.4+ 中受支持（截至 2025 年 5 月），并作为系列文章的第二部分，建议读者先阅读第一部分以理解基础知识。
• 扇形（Sector Shape）：
• 描述：扇形是一种常用于饼图的经典形状，包含一个弧和两个固定点，以及一个随填充比例变化的移动点。
• 实现：通过 shape() 函数从顶部开始绘制弧线（arc to），使用变量 --v（范围 0-100）控制填充比例，并通过数学公式计算弧线终点坐标（X 和 Y）。
• 问题与解决：弧线绘制中遇到方向和大小问题，需通过尝试 small cw 和 large cw 组合解决；当 --v 接近 100 时，弧线无法形成完整圆形，作者通过限制值为 99.99 并添加 border-radius: 50% 解决。
• 应用：可用于图像元素的 clip-path，增强视觉效果。
• 弧形（Arc Shape）：
• 描述：基于扇形，移除内部填充部分，形成纯弧形，适用于创建环形效果。
• 实现：基于扇形代码，移除 line to center，增加内弧线命令，并通过变量 --b 定义弧线厚度。
• 问题与解决：与扇形类似，弧线大小随 --v 变化需调整为 small 或 large ，作者引入 CSS 条件逻辑（如 if() 或样式查询）动态调整弧线参数。
• 优化：移除 border-radius，通过条件逻辑同时解决内外弧线问题。
• 带圆角的弧形（Arc Shape with Rounded Edges）：
• 描述：通过在弧形两端添加小半圆弧，创建圆角效果，提升视觉美感。
• 实现：将直线命令替换为小半圆弧（使用 1% 半径技巧让浏览器自动计算），并在末尾添加额外弧线回到起点。
• 练习：作者鼓励读者自行尝试修改代码，理解四弧结构。
• 总结与展望：
• 总结：作者强调 arc 命令是 shape() 函数中最复杂的部分，重点在于方向和大小的处理，通过两篇文章详细讲解，希望读者能掌握其用法。
• 补充：仅讨论了圆弧，未深入探讨椭圆弧（需两个半径），认为其应用较少；并推荐读者阅读作者在 Frontend Masters 的后续文章，探索更多基于 arc 的花式形状。

CSS-Tricks

Better CSS Shapes Using shape() — Part 2: More on Arcs | CSS-Tricks

This is the second part of a series that dives deep into the CSS shape() command, continuing with a more detailed look at the arc command.

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 表现不错，但最终在巨大的内存压力下失败了。