前端&AI技术双周刊-2025.04.27

前端技术

• Node v20.19.1 (LTS)
  Node.js v20.19.1（LTS）版本发布情况。此次更新涉及多项内容，如升级依赖，包括将 undici 更新到 6.21.2、c-ares 更新到 v1.34.5；恢复 dns 查询缓存的 TTL；修正文档中 require (esm) 警告状态；更新测试用例以支持 OpenSSL 3.5；更新工具以适应 GH 缓存变化等。同时，还提供了不同系统的安装包、二进制文件及源代码的下载链接，以及各文件的 SHASUMS 信息，方便开发者获取和验证。

• React Labs: View Transitions, Activity, and more
  介绍了 React Labs 的相关内容，提到 React 编译器能自动推断依赖并插入，借助 IDE 扩展和 useEffectEvent 等特性，通过 CodeLens 展示编译器插入内容，方便调试和优化，有助于开发者形成编写 Effects 的正确思维模式，使组件或钩子状态与其他事物同步，为 React 开发带来更多便利与优化方式。

• The ECMAScript Records and Tuples Proposal Has Been Withdrawn
  历经数年打造的 ECMAScript Records 与 Tuples 提案，原本要为 JavaScript 带来两种新的深度不可变数据结构。然而在本周的 TC39 会议上，大家达成共识将其撤回。该提案的撤销意味着 JavaScript 在这方面的发展方向出现变化，可能会对相关开发人员和依赖这些特性的项目产生影响。

• document.designMode, Baseline & Polyfills, Style Observer
  了解document.designMode的工作原理，改进您对浏览器支持和polyfills的思考，学习如何使用Style Observer库观察CSS属性更改

AI资讯

• 昆仑万维 SkyReels 团队发布并开源 SkyReels-V2
  昆仑万维 SkyReels 团队发布并开源 SkyReels-V2，这是全球首个用扩散强迫框架的无限时长电影生成模型。文章先指出当前视频生成技术面临的痛点，接着介绍 SkyReels-V2 的核心创新技术，如视频理解模型 SkyCaptioner-V1 等。在评估中其性能卓越，在多维度表现出色

• OpenAI发布GPT-4.1
  该系列包含了三个模型，分别是 GPT-4.1、GPT-4.1 mini 和 GPT-4.1 nano，它们仅通过 API 调用，并已向所有开发者开放。它们还拥有更大的上下文窗口 —— 支持高达 100 万个上下文 token，并且能够通过改进的长上下文理解更好地利用这些上下文。知识截止日期已更新至 2024 年 6 月。

• OpenAI发布o4-mini和满血版o3
  OpenAI 发布 o3 和 o4-mini，前者为高性能推理模型，支持复杂任务（如编程、科学、视觉分析）以及图像融入思维链，可解析模糊草图并动态调整图像，后者为轻量级模型，优化成本与速度。

• Gemini 2.5 Pro vs. Claude 3.7 Sonnet: Coding Comparison
  作者对 Gemini 2.5 Pro 和 Claude 3.7 Sonnet 进行编码能力对比。介绍了 Gemini 2.5 Pro 相关信息，如拥有 100 万（即将到 200 万）的上下文窗口，编码准确率约 63.8% 。通过飞行模拟器、魔方求解器等 4 项编码测试对比。结果显示，在多数测试中 Gemini 2.5 Pro 表现出色，一次生成正确代码；Claude 3.7 Sonnet 在部分测试中有问题，不过在 LeetCode 问题上代码更简单。

• GPT-image-1
  OpenAI发布了全新图像模型GPT-image-1，已经通过API向全球开发者开放使用。GPT-image-1与ChatGPT版本有很大不同，可以控制生成图像的敏感度、生成效率、背景、输出格式、渲染质量、压缩质量等

拓展阅读

• Minimal CSS-only blurry image placeholders
  本文介绍一种仅用 CSS 创建模糊图像占位符（LQIPs）的技术。先对比多种 LQIP 实现方式的优劣，接着阐述新方法，将图像信息编码为单个 CSS 整数值，用位运算在 CSS 中解码

• Time Travel with JavaScript
  介绍用 JavaScript 实现如 Vestaboard 风格的 3D 翻页显示效果。先阐述创建单页的 HTML 结构、样式设置，包括用 clip-path 裁剪形状、设置元素旋转和亮度变化。接着引入 GSAP 进行动画控制，实现字符循环切换，并利用其强大 API 控制动画时间，还提及用 WAAPI 实现无依赖版本的思路与代码示例

• A flowing WebGL gradient, deconstructed
  本文详细拆解了如何使用 WebGL 着色器创建流动渐变效果。从基础的颜色与位置关系开始，逐步介绍了线性渐变、振荡渐变、添加运动等内容。接着深入讲解 WebGL 和 GLSL 相关知识，以及如何编写片段着色器。还探讨了绘制曲线、生成动画波、添加模糊效果等实现细节，包括使用噪声函数、调整参数等。最后将各个部分组合起来，实现了一个美观、流畅且富有动态感的 WebGL 渐变效果，为读者提供了全面的 WebGL shader 编程实践指导

• webstorm-2025-1
  WebStorm 2025.1–JetBrains的JavaScript集成开发环境（IDE），新增了大型AI、Angular、monorepo和Next.js增强功能