AI 摘要：本期 JavaScript Weekly 涵盖了多个重要动态，包括轻量级 JS 运行时 Bare 的发布、Deno 与 Oracle 的 JavaScript 商标之争、React 19.1 新特性、Safari 18.4 更新，以及一系列工具和教程推荐。此外，还介绍了 Wasp 全栈框架、Anime.js 4.0 动画库等新工具，并分享了开发者资源和行业趋势。

1. Bare: 轻量级模块化 JS 运行时
• 类似 Node.js 但更精简，基于 V8 和 libuv，支持多引擎。
• 仅提供模块系统、插件系统和线程支持，依赖用户态模块扩展。

2. Deno 与 Oracle 的 JavaScript 商标争议
• Deno 向 USPTO 申请撤销 Oracle 持有的 "JavaScript" 商标。
• Ryan Dahl 呼吁开发者支持，签署公开信反对 Oracle 的商标主张。

3. 社区动态
• Safari 18.4 更新
• 新增 Declarative Web Push、迭代器助手、Error.isError，优化 JSON 解析性能。
• TC39 将讨论 TypeScript 风格枚举提案
• 长期以来一直有人提议将 TS 风格的枚举引入 JavaScript，作者 Ron Buckton 将在下次会议上向 TC39 提出该提案。 这里有一个幻灯片介绍了该提案的好处。
• ES2025 规范 进入候选阶段，预计将于 6 月最终获得批准。
• Express 5.1：长期存在的 Node.js Web 框架得到了升级，5.x 最终成为 npm 上的 latest 标记版本。
• Chrome 135+ 支持 CSS Overflow 5 规范，这使得创建原生滚动和轮播体验变得更加容易。
• Astro 5.6, Ember 6.3, Turborepo 2.5, Node.js v23.11.0, Bun v1.2.8......

5. 教程与文章
• 探讨 JavaScript 同步 await 的可行性（Dr. Axel Rauschmayer） 本文探讨了 JavaScript 中同步与异步代码的“颜色”问题，提出通过同步 await 解决现有异步编程的局限性，但分析了其潜在的性能损耗和操作风险，最终认为该方案可能不可行。
• 我第一次接触 WebAssembly 时学到的经验教训 本文作者分享了首次接触 WebAssembly（ #WASM ）的经验
• Breaking down circular dependencies in JavaScript 本文通过实验深入解析了 JavaScript 中的循环依赖问题，解释了其成因、表现场景、错误机制及解决方案，并对比了不同运行环境（浏览器、Node.js、打包工具）下的差异。
• GitHub 为项目维护者提供的一些提示： 每个维护者都需要知道的 5 个 GitHub Actions
• 如果您想写一篇可以刊登在 JavaScript Weekly 上的博客文章，那么阅读 Michael Lynch 撰写的《如何撰写开发人员阅读的博客文章》 是个不错的主意.. :-)

AI 摘要：本期聚焦 React 19.1 的功能更新、全栈工具链（如 Wasp）、安全漏洞提醒及社区动态（如 styled-components 的未来）。同时推荐了多个实用库（如 TinyBase、React Email）和开发者活动。

1. React 19.1 发布
• 主要更新
• Owner Stacks （开发工具功能）：帮助开发者追踪组件渲染关系。
• 边缘环境流式支持 ：优化边缘计算场景下的性能。
• 服务器端预渲染 RSC 的新 API （与 Parcel 2.14.0 兼容）。
• 增强 Suspense 支持 。
• 未发布官方博客，但包含多项修复和小功能改进。

2. 工具与库更新
• Wasp - 基于 React、Node 和 Prisma 的全栈框架，提供传统全栈开发体验。
• TinyBase v6.0 - 响应式本地优先数据存储，支持 React 19，仅提供 ESM 版本。
• React Email 4.0 - 新增邮件链接分析工具、垃圾邮件评分器及客户端兼容性检查。
• Svggles - 通过 React 增强 SVG 交互性（如发光、动画效果）。
• Remotion React-to-video 工具包添加了一个简洁的听力图模板 ，用于渲染音频媒体的波形样式视图。

3. 安全与社区动态
• Remix/React Router 漏洞 ：CVE-2025-31137 影响 Remix 2 和 React Router 7（Express 适配器用户需注意）。
• 愚人节玩笑 ：Vercel 的 Guillermo Rauch 假称 React 将弃用 className 改用 class，实际未发生。
• styled-components 进入维护模式：社区讨论替代方案 ( Linaria / Vanilla Extract / CSS Modules ......)

4. 其他新闻
• Material UI v7 稳定版发布 。
• React Native Gesture Handler 2.25 ：优化原生触摸 API。
• Express 5.1 发布 ：Node.js 框架正式进入 5.x 阶段。
• Vue.js 2025 社区报告 ：包含对 Evan You 和 Nuxt 团队的深度访谈。

Medium

RIP Styled-Components. Now What?

Styled-components are officially in maintenance mode. No new features or major updates should be expected. Only critical bug fixes and…

不幸的是，其中一些功能在较旧的浏览器中降级得非常糟糕，以至于对于使用卡在 Safari 15 上的旧 iPhone 或 iPad 访问的人来说，即使是颜色和阴影等基本内容也可能根本无法呈现。

For Tailwind CSS v4.1, we put a bunch of effort into coming up with and testing our own framework-specific fallbacks to make your sites render as best as possible in older browsers, even if some super modern things still don't behave quite the same.
对于 Tailwind CSS v4.1，我们投入了大量精力来提出和测试我们自己的特定于框架的回退，以使您的网站在较旧的浏览器中呈现得尽可能好，即使一些超级现代的东西仍然表现得不尽相同。
在 oklab 中定义的颜色现在可以在旧版本的 Safari 中呈现

AI 摘要：Tailwind CSS v4.1 引入了文本阴影、遮罩工具、浏览器兼容性优化等多项新功能，提升开发体验。

Tailwind CSS v4.1 是一个重要版本更新，新增了多项实用功能和优化。主要包括：

• 文本阴影工具（text-shadow-*）：提供五种预设阴影大小，支持颜色和透明度调整。
• 遮罩工具（mask-*）：支持使用图片或渐变遮罩元素，优化了 API 设计。
• 浏览器兼容性改进：在旧浏览器中更优雅地降级，同时充分利用现代浏览器特性。
• 精细文本换行（overflow-wrap）：防止长单词破坏布局。
• 彩色投影支持（drop-shadow）：新增彩色投影工具。
• 输入设备适配（pointer-* 和 any-pointer-*）：针对触摸设备优化设计。
• 基线对齐（items-baseline-last 和 self-baseline-last）：支持将 Flex/Grid 项目对齐到文本最后一行的基线。
• 安全对齐（safe）：防止内容在空间不足时消失。
• 构建优化：支持忽略特定路径（ @source not ）和强制包含工具类（ @source inline(...) ）。
• 新变体：如 noscript、user-valid、inverted-colors 等。

文章还提供了升级指南，支持通过 npm 安装最新版本（CLI、Vite、PostCSS）。

AI 摘要：Chrome DevTools 新增的 Insights 侧边栏将 Lighthouse 的性能分析直接集成到 Performance 面板中，帮助开发者更高效地定位和解决性能问题。

通过将 Lighthouse 的性能分析结果直接集成到面板中，提供更直观的性能问题定位和解决建议。

Insights 侧边栏会列出录制过程中发现的性能或用户体验问题，并允许开发者通过悬停或点击直接在高亮的时间轴上查看相关事件。文章详细说明了如何使用该功能，包括如何展开侧边栏、查看不同页面的性能分析结果，以及如何利用 LCP（Largest Contentful Paint）阶段分析来优化页面加载性能。

此外，文章还介绍了针对页面加载、响应性和布局稳定性等方面的具体分析功能，帮助开发者全面优化网站性能。

Chrome for Developers

Insights sidebar in the DevTools Performance panel  |  Blog  |  Chrome for Developers

Learn about the new performance insights, the power of Lighthouse directly in the DevTools Performance panel.

AI 摘要：本文介绍了如何设计高转化率的表单。文章涵盖了表单设计的重要性、表单构成要素（操作、描述符、输入控件、反馈机制）、表单类型（简单表单、向导式表单、可导航表单）、十个表单设计最佳实践（简洁、清晰标签、避免只用占位符文本、分组相关字段、单列布局、有效处理错误、预防错误、启用内联验证、确保无障碍性、移动端优化）以及三个表单创建工具（Typeform, Zoho Forms, Jotform）的优缺点。核心要点在于：保持表单简洁明了，减少摩擦以鼓励填写完成，优先考虑无障碍性和包容性。

LogRocket Blog

Better form design: UX tips, tools, and tutorial - LogRocket Blog

When designed well, forms can leave a user feeling delighted and accomplished. These guidelines can help you create a smooth user experience.

AI 摘要：介绍如何使用 CSS 的 conic-gradient() 和 repeating-conic-gradient() 创建条纹和爆发式背景效果。

文章首先回顾了使用 CSS 线性渐变（linear-gradient 和 repeating-linear-gradient）创建条纹背景的基本方法，并介绍了新的简化语法。接着，作者将这一概念扩展到圆锥渐变（conic-gradient），展示了如何通过硬色停（hard stops）创建爆发式背景效果。文章还提到如何通过叠加径向渐变（radial-gradient）调整中心区域，并参考了 Robinhood 首页的设计，探讨了如何通过更多渐变或 SVG 实现更复杂的动态效果。最后，作者鼓励读者尝试用 @property 实现动画效果。

Frontend Masters

CSS Bursts with Conic Gradients

You can make stripes with CSS gradients pretty easily. It’s that classic thing where you don’t fade a color from one to another, you just switch colors by having two colors share the same “color stop”. I made this one time to explain that:

还搜到了这个，小破站其实早就全面切换到 AVIF 了：
https://www.bilibili.com/opus/775386423432839251

结论可以直接拿来用：
2022 年以前，B 站主流图片格式为 WebP，在对基础设施成本做回顾的过程中，定位到静态资源 CDN 成本是重要的组成部分。随着业界技术的逐渐成熟，经过相关调研，我们认为 AVIF 在 B 站大规模落地存在可行性。

在相同格式相同编码器下，可以简单的认为编码速度、图像质量与图片体积构成一个不可能三角，需要通过调整编码速度参数（下称 speed）与图像质量参数（下称 quality），在三者之间做取舍。

我们选取了三百万线上真实的缩略图请求，于实验环境进行回放，尽可能贴近 B 站实际使用场景。对同一个缩略请求，我们会使用线上现有编码参数，生成 PNG 和 WebP 两个版本，并用几个不同档位的 speed 和 quality，生成若干个 AVIF 版本，其中 PNG 被认为是无损格式，用作比较基准。

PSNR 可以被用于衡量原图与编码后图片的差异大小，一般大于 30 dB 即可认为人眼较难察觉出图像差异，大于 20 dB 被认为人眼观感差异不明显。PSNR 不能代替人类主观评价，但定量实验中，我们需要一个客观指标。无特别描述的前提下，下文提及 WebP/AVIF 的图像质量时，指的是 PSNR ( PNG → WebP ) 和 PSNR ( PNG → AVIF ) 的数值大小。

经过持续数天的流量回放实验，我们有以下定性结论：

1. speed 对编码耗时影响显著，对图像质量与图片体积影响不大。

2. 相同 speed/quality 的前提下，图片越大，AVIF 相对 WebP 的体积优势越明显。

3. 相同 speed/图片大小 的前提下，质量(quality)越高，AVIF 相对 WebP 的体积优势越明显。

对齐图像质量（PSNR 差值不超过 1）的前提下，我们有以下定量结论：

1. B 站主流缩略图场景下，AVIF 相比 WebP 平均体积优化在 35% 左右。

2. B 站主流缩略图场景下，AVIF 相比 WebP 耗时增长 4 ~ 5 倍，图片越大，耗时增长越明显，视频预览图等超大图场景，耗时增长 20 倍以上。

B 站主流缩略图场景下，AVIF 4 线程编码耗时约为单线程的 73%，CPU 开销是单线程的 115%，且进一步增大并发度的收益不高。

karminski-牙医@karminski3: HuggingFace 上了一个新功能，只要之前在 "个人设置->本地APP和硬件" 中添加了硬件。就能在新模型的模型卡下面看到自己的硬件能不能运行这个模型。特别方便。
图1是我的M2Ultra 128G，可以看到能运行这个模型的各种量化版本。图2则是我的3080Ti，可以看到哪个都不能运行哈哈哈哈。

AI 摘要：本文详细阐述了一种创新的 CSS 技术，通过单个自定义属性（如 --lqip:192900）实现低质量图像占位符（LQIP），无需额外标记或 JavaScript。作者对比了现有 LQIP 方案（如 BlurHash、Gradify 等），指出其依赖复杂标记或脚本的缺点。核心方案是将图像信息压缩为 20 位整数，通过 CSS 解码并渲染为 3×2 网格的径向渐变叠加，模拟模糊效果。文章还探讨了 CSS 数值限制、位操作实现、颜色空间选择（Oklab），以及通过二次插值优化渐变平滑度。最后提供了替代方案（如单色填充）和未来 HTML 属性 attr() 的展望。

1. CSS-only模糊图像占位符（LQIP）技术

• 方法：通过单一CSS自定义属性（--lqip）实现模糊占位符，无需额外标记或JavaScript。

<img src="…" style="--lqip:192900">

• 优势：
• 极简：仅需一个整数属性，不污染HTML结构。
• 非侵入性：无需包装元素、长数据字符串或复杂脚本。
• 即时渲染：纯CSS方案在加载时立即显示。

2. 与其他LQIP方案的对比
• 传统方案：
• 低分辨率图片（如WebP/JPEG）、SVG形状优化（SQIP）、BlurHash（需JS解码）。
• 纯色/渐变占位符：如Canva/Pinterest的纯色填充，或Gradify的CSS渐变近似。
• 缺点：
• 其他CSS方案常需冗长内联样式或数据URL，增加标记复杂度。
• BlurHash需JS解码，牺牲了纯CSS的即时性。

3. CSS整数编码与解码
• 编码限制：
• CSS整数值范围受限（-999,999至999,999），有效信息量约20位（2^20种配置）。
• 编码方案：
• 基础颜色（8位）：使用Oklab色彩空间（2位亮度+3位a/b坐标）。
• 6个灰度组件（12位）：3×2网格布局，每个组件2位。
• 解码技术：
• 通过CSS的calc()、mod()和round(down)模拟位操作（移位和掩码）。

--bits: mod(round(down, calc(var(--packed-int) / 64)), 4);


4. 渲染实现
• 径向渐变网格：
• 6个径向渐变覆盖3×2网格，叠加基础颜色。
• 使用二次缓动模拟双线性插值，避免硬边，实现平滑模糊效果。

background-image:
radial-gradient(50% 75% at 16.67% 25%, var(--lqip-ca-clr), transparent),
linear-gradient(0deg, var(--lqip-base-clr), var(--lqip-base-clr));


5. 备选方案与未来改进
• 早期尝试：
• 四角色混合（因混色效果差放弃）。
• 单一纯色占位符（简单但缺乏细节）。
• 未来方向：
• 使用HTML属性（如lqip="192900"）替代CSS变量，依赖attr() Level 5规范。

6. 局限性
• 视觉粗糙：相比BlurHash等方案，模糊效果较基础。
• 兼容性：依赖CSS图像的RSS阅读器可能不支持。

AI 摘要：本文全面讲解了 TanStack Table —— 一款支持多框架（如 React、Solid、Vue 等）的无头表格库。文章首先介绍了 TanStack Table 的概念、背景以及由 React Table 演变而来的历史，强调其完全自定义的 UI 与轻量优势。接着，文中详细描述了在 React 项目中使用 TanStack Table 的各个环节，包括基本功能（如远程数据获取、排序、分页、过滤）与高级功能（如内联编辑、分组、列扩展、列缩放等）的实现步骤，并通过代码示例演示了如何构建简单表格、实现自定义样式组件以及添加全局与列级搜索功能。最后，文章对比了 TanStack Table、Material React Table 与 Material UI Table 的异同，并解答了常见问题，为开发者在定制化与预制组件之间做选择提供了参考建议。

1. TanStack Table 简介
• 定义与特点：介绍 TanStack Table 的概念，说明其无头设计、跨框架兼容以及完全自定义 UI 的特性。
• 发展历程：说明 React Table 如何演变为 TanStack Table，强调 TypeScript 重写后的性能和功能提升。

2. React 中使用表格的场景
• 用途说明：举例说明表格在展示结构化数据（如财务报告、排行榜、定价对比）中的应用场景。
• 案例介绍：提及 Airtable、Asana、Google Sheets、Notion 等产品以及大厂的使用实例。

3. TanStack Table 核心功能解析
• 基本功能：包括自定义 UI、远程数据请求、搜索、列过滤和排序。
• 高级功能：涉及自定义排序和过滤、分页、行编辑、扩展行视图、固定表头、响应式设计、列缩放等。

4. 快速上手与迁移指南
• 迁移步骤：详细列出从 React Table v7 升级到 TanStack Table v8 的步骤，指出关键改动（如 Hook 名称、属性名称修改）及代码调整。
• 安装与示例：提供从零开始的安装命令和基础表格实现的完整代码示例。

5. 动态数据展示与 API 调用
• Axios 请求示例：展示如何利用 Axios 从 TVMAZE API 获取数据，并结合 useReactTable 构建动态表格。
• 组件拆分：通过创建独立的 Table.tsx 文件详细讲解数据与列配置的交互实现。

6. 自定义样式与增强功能
• 样式定制：通过示例介绍如何使用自定义组件（例如徽章展示 genres、时间格式转换）来改造单元格显示效果。
• 搜索、排序、分组：分别介绍添加全局搜索、列级搜索、排序功能的实现原理与代码示例。
• 列缩放：详细说明如何通过 API 添加列宽调整功能，并展示实际效果。

7. TanStack Table 与 Material 系列表格库对比
• 对比表格：从类型、UI 框架、自定义程度、依赖关系、功能丰富度等角度对比 TanStack Table、Material React Table 和 Material UI Table。
• 选择建议：根据需求灵活选择适合项目的表格解决方案。

8. 常见问题解答 (FAQ)
• 针对 React Table 历史变更、各表格库的区别和创建 React 表格的最佳实践等问题提供解答。

9. 结论
• 总结如何利用 TanStack Table 构建高效定制化的表格 UI，并鼓励读者在合适的场景下避免重复造轮子，提升开发效率。

LogRocket Blog

A complete guide to TanStack Table (formerly React Table) - LogRocket Blog

Discover how to use TanStack Table, formerly known as React Table, to build a table UI for a variety of use cases.

紡ぐ四季に彩りを
#ブルアカ #Bluearchive