#demo #codepen #动画 #svg #webgl #液态玻璃
Codepen Spark#453
Liquid and Glass 大合集
好多啊好多啊，我们前端花活就是多啊.webp

#优质博文 #前端 #css #grid
1fr 1fr vs auto auto vs 50% 50%

AI 摘要：本文详细探讨了 CSS Grid 中三种常见的列宽设置方式（ 1fr 1fr 、auto auto 和 50% 50% ）在不同场景下的表现和差异。作者通过多个示例和截图，分析了这些设置在处理间距（gap）、内容大小、溢出等问题时的行为差异，指出 fr 单位通常表现最为直观和可预测，但也存在“blowout”问题，并提供了解决方案如 minmax(0, 1fr) 。此外，文章还提及了列宽的混合使用以及其他关键词如 min-content 和 max-content 的潜在价值。

author Chris Coyier

#优质博文 #前端 #node #新动态 #工程化
🍊 Node Weekly #581

AI 摘要：本期 Node Weekly 聚焦 Node.js 生态系统的最新动态与技术更新，重点讨论了 Node.js 版本生命周期管理、技术提案进展以及一系列工具和库的更新。文章强调了旧版本（如 v18 及更早版本）已进入 EOL 状态，建议开发者直接升级到 v22 以获得更好的未来支持，同时介绍了 Node v24.2.0 的新功能、TC39 会议的技术提案、Jest 30 的重大改进，以及多个 Node.js 相关的工具和库的最新版本发布。此外，还涵盖了 JavaScript 生态系统的其他重要动态，如 Rolldown-Vite 带来的构建速度提升、CSS 2025 年度调查。

1. 社区动态
• Matteo Collina 指出 Node.js v18 及更早版本现已 EOL。他详细分析了这对旧版本用户意味着什么，以及为什么应该跳过活跃的 LTS v20 版本，直接升级到 v22 版本，以最大程度地适应未来发展。如果您必须继续使用旧版本，Matteo 分享了一个可供考虑的选项。
• Node v24.2.0（Current）发布：引入 import.meta.main，一个新的布尔值，用于判断当前 ES 模块是否为进程的入口点，便于在模块直接运行时执行特定代码；移除了 nghttp2 中对 HTTP/2 优先级信号的支持；使用权限系统时无需将应用程序入口点传递给 --allow-fs-read
• TC39 会议与技术提案：Sarah Gooding 总结了 TC39 近期会议讨论和推进的提案，包括 Array.fromAsync、Error.isError 和显式资源管理。

2. 测试框架与工具更新
• Jest 30 发布，带来了一系列重大改进，标志着数年来的一次重要版本更新。
• SQLite-JS：一个有趣的 SQLite 扩展，允许使用 JavaScript 编写自定义 SQLite 函数。

3. 博文教程
• Native Hot Module Reloading in Node via Module Hooks：通过模块钩子实现原生高效的“热模块”功能
• Unpacking Config and Environment Variables in Node：Liran Tal 分享了在 Node.js 中处理配置和环境变量的挑战及最佳实践
• Postgres 迁移：推荐使用 node-pg-migrate 处理 Node.js 中的 Postgres 迁移（作者：Boas Falke）。
• 构建 API：探讨如何使用 Node.js 和 gRPC 构建 API
• 在 Node 中使用 SQL 和 Sequelize：介绍在 Node.js 中使用 Sequelize 进行 SQL 操作

4. 代码与工具推荐
• Mock Service Worker：一个用于 REST/GraphQL API 模拟的库，支持拦截请求并模拟响应
• tz-lookup：基于经纬度的快速时区推断工具，以速度和大小为代价换取准确性
• 其他工具更新：包括 Babel 8 Beta、Prisma 6.9、OpenAI Node 5.2、MongoDB Node.js Driver 6.17 等多个库和框架的最新版本发布。

5. 其他 JavaScript 生态动态
• Rolldown-Vite：Evan You 宣布了基于 Rust 的快速 JavaScript 打包工具 Rolldown 的 Vite 替代包，许多开发者报告构建时间显著缩短。
• Gleam：一种针对 Erlang 和 JavaScript 运行时的语言，编译到 JS 的速度提升了 30%。
• State of CSS 2025：CSS 年度调查现已开放参与。

State of CSS 2025

Take the State of CSS survey

#前端 #codepen #demo #动画 #svg #gsap
Colourful GSAP animated SVG radio buttons

Josh Dillon continues an electrifying exploration of glitch animation in UI with this set of radio buttons. Make sure to visit Josh's collections for more.

via Codepen Spark#452

Yummy 😋

陈波：小米 NAS 预计 10 月初步量产，年底前发布

小米生态链总经理陈波今晚联合李杰灵进行了直播，他在直播中回应小米 NAS 的进度。
陈波预计小米 NAS 将会在今年 10 月初步量产并完成测试，年底（元旦前）发布，第一款产品重点服务手机用户。

陈波表示，这款产品不会做得过于极客，旨在为消费者普及一下 NAS 的产品品类。他认为，要把生态和联动做好，首款产品优先服务好小米手机的用户群。小米 NAS 预计在相册管理、存储、电视墙等功能上，会有更好的实操体验。

#碎碎念
小米真搞 NAS 啊，都要发布了hhh
那什么时候搞卫生巾（x
怎么感觉会一坨 bug

#优质博文 #前端 #工程化 #oxlint #linter #新动态
Announcing Oxlint 1.0

AI 摘要：Oxlint 1.0 作为首个稳定版本正式发布，这是一个基于 Rust 开发的 JavaScript 和 TypeScript 代码检查工具，性能比 ESLint 快 50~100 倍，支持超过 500 条 ESLint 规则，并在 Shopify、Airbnb 等大公司中得到应用。Oxlint 强调快速、零配置的特性，便于开发者快速上手，同时支持通过配置文件进行定制化，并提供与 ESLint 的平滑迁移工具和插件支持。未来，Oxlint 将继续优化性能、支持自定义规则和更精细的配置，团队也在不断壮大，期待社区反馈以推动项目发展。

author Boshen Chen and Cameron Clark

void(0)

Announcing Oxlint 1.0

The first stable version of Oxlint, a fast & easy-to-use Rust-powered linter for JavaScript and TypeScript, is out. Learn about its 50~100x speed advantage over ESLint, support for 500+ rules, real-world adoption by major companies, and easy migration.

#碎碎念 #开源
很同意了，虽然 alist 这个操作很emmmm，但是开源真不容易，很敬佩能一直搞的，但是用爱发电持久不了，能持久的就更佩服了，这种例子出一桩是一桩。

DIYgod/1932703374283284812

看到 alist 被以非常丑陋的姿态卖掉，对作者、用户、收购方都是个悲剧，感觉非常可惜，但从开源作者的角度又挺理解原作者的，现在破口大骂资本的 alist 用户应该都没体会过开源的苦，看不到作者的长期孤独贡献，只看到又少了一个可以白嫖的项目

看图二就知道这显然不是一个健康的开源项目状态，作为一个 50k stars 的顶流项目，contributors 只有 100 多，第二名非机器人 contributor 的贡献量刚到作者的 8%，再往下更是断崖减少，作者从 2024 年就已经很少提交了，后面也一直没有其他维护者接手，除非作者积极回归，这项目的最终死亡已经是必然了，只是开始死亡的时间在一年半之前

反观 RSSHub，虽然 star 没 alist 多但 contributors 人数接近 10 倍，在作者贡献量下降的时期也及时有其他维护者补充，总体维护效率并没有下降反而一直在上升

总之 alist 一直都不是一个健康的开源状态，离开作者根本无法存活，作者又长期得不到足够的帮助和资助，用户也视而不见反而都在反资本，至于那些非 contributors 趁热度 fork 出的各种 blist xlist，如果 forker 在 alist 还有救的时候都没想着去提交一行代码，现在等 alist 死了才出来扛大旗，真的能相信他们能够长期任劳任怨地维护吗？

对用户，与其破口大骂资本，不如想想你现在除了 alist 还在白嫖哪些开源项目，去看看它们还好么，有什么可以帮上忙的，哪怕只是去送上一份感谢，可能都能让那些可怜的牛马开源作者开心上好几天，能让项目多维持几天

对开源作者，怎么让开源项目到达健康可持续的状态，而不是最后被迫廉价丑陋变现，是一个值得更多思考的问题

有个评论我也很赞同：

一定程度上理解作者的选择，但作者在卖掉Alist的过程中，没有保持信息的公开透明，我认为也是导致目前这个局面的原因之一。暂且不提征求社区的意见，如果能够说明这样做的动机和项目未来的方向，我认为对于各方来说都会更好接受一些。

ref: https://t.me/cosine_front_end/1940

Telegram

cosine - 前端人の日常频道

#优质博文 #开源
唉，这，第几起了
Open Source is Where Dreams Go to Die
https://www.trevorlasn.com/blog/open-source-is-where-dreams-go-to-die
AI 摘要：文章分析了当前开源生态系统中维护者面临的困境。作者指出，大多数开源项目背后都有一群默默奉献、无偿投入大量时间和精力的开发者，他们常因持续的价值剥夺和不公平期待而导致精疲力竭甚至倦怠。文章通过揭示 “免费” 软件背后的真实成本，批评了一个让…

#优质博文 #动画 #前端 #css
Partial Keyframes • Josh W. Comeau

AI 摘要：本文由 Josh W. Comeau 撰写，详细介绍了 CSS 关键帧动画中“部分关键帧（Partial Keyframes）”的技巧及其强大应用。通过省略关键帧的起点（from）或终点（to），动画可以动态继承元素的当前样式值，从而实现更灵活和可组合的动画效果。文章还探讨了如何将多个关键帧动画叠加以创造复杂效果，以及使用 CSS 变量在关键帧中实现动态值设置，进一步提升动画的灵活性。作者还分享了一个额外的技巧和即将推出的动画课程信息，适合对 CSS 动画感兴趣的前端开发者深入学习。

author Josh W. Comeau

Joshwcomeau

Partial Keyframes • Josh W. Comeau

CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our keyframe animations so much more reusable and dynamic! 🤯

#优质博文 #前端 #新特性 #javascript #css #chrome
Support foldable devices with the Viewport Segments API

AI 摘要：本文介绍了 Viewport Segments API 的功能与应用，该 API 从 Chrome 138 版本开始可用，支持开发者为可折叠设备优化界面。通过 JavaScript 或 CSS 访问视口逻辑分区的尺寸和位置，开发者可以为可折叠设备创建双窗格体验或避免内容跨折叠区域布局。文章还提及 API 的更新细节及演示案例，展示了如何利用该 API 提升用户体验。

1. API 简介与背景
• 介绍了 Viewport Segments API 的基本概念，解释了视口分区如何由硬件特性（如折叠或铰链）划分而成。
• 强调 API 的目标：帮助开发者将视口的不同区域视为逻辑上独立的区域，从而优化可折叠设备的用户界面。
2. 功能与应用场景
• 详细说明 API 的功能，支持通过 JavaScript 和 CSS 获取视口分区的尺寸和位置。
• 应用场景包括创建双窗格用户体验，以及避免内容布局跨折叠区域，提升用户体验。
3. API 更新与改进
• 提到自去年 Origin Trial 以来的两项主要变更：
a. JavaScript 属性 segments 现位于 window.viewport 对象中，而非之前的 window.visualViewport。
b. 当设备未折叠或不可折叠时，segments 属性行为与 CSS 行为对齐，返回包含单个分区（代表整个视口）的数组。
4. 演示与实践
• 提供了可折叠设备上 API 的演示案例，展示网页如何沿铰链分割成两个逻辑分区。
• 鼓励开发者通过演示了解 API 的实际效果。
5. 发布时间与版本支持
• API 从 Chrome 138 版本开始正式可用，发布时间为 2025 年 6 月 9 日。

author Alexis Menard

Chrome for Developers

Support foldable devices with the Viewport Segments API  |  Blog  |  Chrome for Developers

The Viewport Segments API has shipped with minor changes to the origin trial covered in this blog post.

#优质博文 #前端 #动画 #css #svg
SVG Displacement Filtering 实现 Liquid Metal，性能很寄的……不希望以后到处都是这个效果（唉那有点恐怖了） 感觉展示性的网站用用还行。
A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

Codepen

Mike Bespalov (@bbssppllvv):
It’s 3AM and I just recreated @Apple Liquid Metal right in the browser. No JavaScript. No WebGL. Just raw HTML + CSS.

Let me know if you want the code

https://fixupx.com/bbssppllvv/status/1932325303273271727

cosine - 前端人の日常频道

#优质博文 #前端 #css #WebGL #three #GLSL #demo #动画 coooool～ How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、…

#优质博文 #前端 #shaders #css #WebGL #course
从这个里面又学到很多，加上之前看到的，整理一下这几个 WebGL 学习资源推荐www

1. The Book of Shaders - 一本由 Patricio Gonzalez Vivo 和 Jen Lowe 编写的关于片段着色器（Fragment Shaders）的循序渐进指南，旨在帮助读者理解和掌握这一抽象而复杂的图形编程领域。
2. Three.js 之 1 Animation 动画 掘金早期难得的很高质量的 three 学习笔记一个系列，是 Three.js Journey（$95 终身访问）的学习笔记。
3. Discover three.js 由 three.js 核心开发者编写的完整教程，从基础到高级的系统性学习路径、包含实时代码编辑器、提供清晰的 2D 图表解释概念。
4. WebGL Academy 交互式 WebGL 和 3D 算法学习，在线 IDE 环境，支持语法高亮，涵盖从基础到高级的 WebGL 概念，包含物理模拟和高级渲染技术。
5. SB Code R3F Tutorials 内容涵盖 React Three Fiber 和 Drei 库的基础知识，逐步讲解相关概念，帮助学习者理解如何构建自己的项目并参与 React 生态系统。
6. WebGL 理论基础 & WebGL2 理论基础 从 WebGL 的基本理论讲起。

The Book of Shaders

Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

#优质博文 #前端 #css #WebGL #three #GLSL #demo #动画
coooool～
How to Create Interactive, Droplet-like Metaballs with Three.js and GLSL

AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、平滑融合、噪声纹理添加以及鼠标互动的实现，适合对 WebGL 和着色器编程感兴趣的开发者学习和实践。

概览：介绍了演示的整体结构和构建步骤，包括全屏平面的设置、光线步进渲染球体、从球体到 metaball 的平滑过渡、添加噪声以获得液滴外观，以及通过鼠标移动模拟拉伸效果。

1. 全屏平面设置：创建覆盖整个视口的全屏平面，通过 Three.js 设置几何体和材质，并传递画布大小的 uniform 变量到着色器。
2. 光线步进渲染球体：在片段着色器中使用光线步进技术渲染球体，详细解释了光线步进的步骤、SDF（有符号距离函数）的概念，以及如何通过代码实现两个重叠球体的渲染。
3. 从球体到 Metaball：通过 smoothMin 函数平滑融合多个球体的距离值，避免硬边缘，创造出有机融合的 metaball 效果，并通过参数控制融合平滑度。
4. 添加噪声以获得液滴外观：利用 3D 值噪声技术对表面进行扰动，结合反射向量和时间变量生成液滴纹理，并通过后处理增强玻璃般的半透明效果。
5. 通过鼠标移动模拟拉伸液滴：通过记录鼠标轨迹并沿轨迹放置多个球体，实现液滴的拉伸和弹性运动效果，增强互动性。

author Yuki Kojima

#优质博文 #AI
我对各种 AI Coding Agent 工具的看法
author xxchan

XX's Blog

我对各种 AI Coding Agent 工具的看法

Agentic coding 或许是当下最火（最卷）的方向，一万家公司在做。并且隔三差五就在社交媒体上看到又有什么新工具、谁家又出什么新功能了（又 blow 谁的 mind 了，又颠覆谁谁了）。这还挺让人困惑的，我发现很多人会问 “这些 AI coding 工具真有那么牛吗？”，或者 “XX 和 YY 到底有啥区别”。不少人自己试用了一下，感觉不过如此，于是迅速下头。同时，我还发现还有不少程序员连 Cursor 都没用过。

#碎碎念
女装照骗！（x）
第一次自己买的小裙子和随便买的假发，好难打理，先试试，等妹妹来陪我玩（嘿嘿嘿）
以免丑到大伙打个遮罩（
哎呀这么一看真的拍的好草率