#CSS #动画 #趣站
https://yui540.com/
一个作者自制 CSS 动画的展示网站，超可爱

yui540/2009861642432155980

CSSアニメーションで作った自主制作のモーションをポートフォリオサイトにまとめてみました🐈
https://yui540.com/

#优质博文 #JavaScript #Temporal #日期处理 #前端 #新特性
一篇 Temporal 的介绍。
Date is out, Temporal is in

AI 摘要：本文深入探讨了 JavaScript 内置 Date 对象的诸多缺陷，包括其不一致的解析行为、缺乏时区支持以及最重要的其作为可变对象 (mutable object) 导致的意外副作用。作者提出 Temporal API 是 Date 对象的完美替代方案，Temporal 作为命名空间对象 (namespace object)，提供了更直观、更细致的日期时间处理能力，并且其所有操作都返回新的不可变对象 (immutable objects)，彻底解决了 Date 的核心问题。文章鼓励开发者提前试用 Temporal，以推动其最终标准化和广泛应用。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. JavaScript Date 对象的历史与痛点
• 构造函数行为不一致：Date 构造函数 (constructor) 在处理月份、年份推断和字符串格式时存在诸多怪癖和不一致性。
• 内部机制与命名误导：Date 实际上表示的是以毫秒为单位的 Unix 时间戳 (Unix timestamp)，而非纯粹的日期，容易引起混淆。
• 功能受限：缺乏对复杂时区、夏令时 (Daylight Saving Time) 以及非公历 (Gregorian calendar) 的原生支持。
• 对性能的影响：由于 Date 的局限性，开发者常需引入大型第三方库 (third-party library) 来解决问题，导致性能开销。
2. Date 对象的核心问题：可变性 (Mutabilty)
• 原始值 (Primitive Values) 的不可变性：解释 JavaScript 中数字、布尔值等原始数据类型 (primitive data types) 是不可变 (immutable) 的，变量赋值是创建副本。
• 对象 (Objects) 的可变性：解释对象是可变 (mutable) 的，变量存储的是引用 (reference)，对对象的修改会影响所有引用。
• Date 的可变性后果：Date 对象作为构造函数创建的对象，具有可变性。对 Date 实例 (instance) 的修改会直接改变原始对象，导致意外的副作用和难以追踪的错误。
• 代码示例：通过 addDay 函数的例子，展示了 Date 对象的可变性如何导致“今天”和“明天”变成同一个日期。
3. Temporal API 的设计理念与优势
• 取代 Date 的新方案：Temporal API 被设计为 Date 对象的全面替代品，旨在提供现代、健壮的日期时间处理能力。
• 命名空间对象 (Namespace Object) 设计：Temporal 不是构造函数，而是类似 Math 的命名空间对象，包含多个更专业化的类 (classes) 和方法。
• 丰富的日期时间类型：Temporal 提供了 Duration、Instant、PlainDate、PlainDateTime、ZonedDateTime 等多种类型，能够更精确地表示日期、时间及两者结合的不同概念。
• 核心优势：不可变性 (Immutability)：Temporal 对象的所有操作方法 (methods)，例如 add() 和 subtract() ，都不会修改原始对象，而是返回一个新的 Temporal 对象，从根本上解决了 Date 的可变性问题。
• 代码示例：展示 Temporal 如何通过返回新对象来避免副作用，并使得链式调用 (chaining methods) 成为可能，大幅提升了代码的清晰度和安全性。
4. Temporal API 的当前状态与未来展望
• 标准化进展：Temporal 提案已进入 TC39 标准化过程的第三阶段 (Stage 3)，已被推荐实现。
• 浏览器支持：已在 Chrome 和 Firefox 等主流浏览器的最新版本中落地实现。
• 开发者参与：鼓励开发者试用 Temporal 并提供反馈，以帮助完善最终规范。
• 未来前景：Temporal 将为 JavaScript 带来合理、现代的日期时间处理能力，彻底改变现有 Date 对象带来的困境。

author Mat “Wilto” Marquis

Piccalilli

Date is out, Temporal is in

Temporal is the Date system we always wanted in JavaScript. It's extremely close to being available so Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript date system.

#开源 #前端 #tools #设计 #API #头像生成
做友链功能的时候发现的（感觉还挺好用的就 mark 一下）
DiceBear 是一个为设计师和开发者提供多种风格头像生成功能的开源库。
dicebear/dicebear: DiceBear is an avatar library for designers and developers

AI 摘要：DiceBear 是一个功能强大的头像库，旨在帮助设计师和开发者快速为项目创建多样化的头像。它提供了从抽象形状到精心设计的人物角色等多种头像风格。用户不仅可以生成随机头像，还可以通过设定 seed 实现确定性头像生成，或利用丰富的定制选项创建个性化头像。DiceBear 通过 JavaScript 库、HTTP API、命令行工具 (CLI)、Figma 插件和在线 Playground 等多种方式，为用户提供了灵活便捷的头像生成方案。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. DiceBear 项目概览
• 项目定位：专为设计师和开发者打造的头像库。
• 核心优势：快速为项目创建精美头像，提供多样化的选择。
• 头像风格：涵盖抽象形状和精心设计的人物角色。
2. 头像生成功能与特性
• 随机生成：支持生成纯粹随机的头像。
• 确定性生成：通过内置的伪随机数生成器 (PRNG) 和 seed 值，确保基于特定种子重复生成相同的头像，适用于用户身份标识。
• 高度可定制：每个头像风格都提供无数选项，允许用户创建个性化头像。
3. 多平台集成与便捷工具
• JavaScript 库：提供便捷的 JavaScript 客户端集成。
• HTTP API：支持通过 HTTP 请求生成头像。
• 命令行工具 (CLI)：方便在命令行环境中使用。
• Figma 插件：直接在 Figma 设计工具中使用。
• 在线 Playground：提供交互式平台进行头像预览和配置。

#优质博文 #前端 #CSS #新特性
4 CSS Features Every Front-End Developer Should Know In 2026 · January 7, 2026

AI 摘要：本文着重介绍了四个前端开发者在 2026 年前应熟练掌握的 CSS 新特性，这些功能已在 2025 年发布。它们包括 sibling-index() 和 sibling-count() 函数，用于基于兄弟元素索引实现动态动画；@container scroll-state() 查询，提供对滚动容器状态的精细控制；text-box 属性，用于精确管理文本行高和间距，实现像素级对齐；以及功能更强大且类型安全的 typed attr()，允许直接在 CSS 中使用 HTML 属性并进行类型验证。这些特性旨在显著提升 Web 界面的交互性、设计精确度和开发效率。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. CSS 主题回顾与前瞻
• 回顾了 2023、2024 年的 CSS 特性推荐，强调本文是其系列主题的一部分。
• 文章重点关注 2025 年已发布并值得开发者在 2026 年掌握的 CSS 新功能。
2. sibling-index() 和 sibling-count() 函数
• 核心功能： 允许开发者将元素相对于其兄弟元素的位置（索引）作为计算值使用。
• 典型应用：
• 基于索引错开过渡动画 (stagger animations)，实现元素按序出现或消失的效果，例如结合 @starting-style 创建平滑的入场动画。
• 可以通过 calc((sibling-index() - 1) * 100ms) 使第一个元素立即开始动画。
• 其他用途： 旋转色相 (rotate hues)、自动编号等。
• 参考资源：
• MDN sibling-index()
• MDN sibling-count()
3. @container scroll-state() 查询
• 核心功能： 允许查询滚动容器的特定状态，实现基于滚动行为的渐进增强 (progressive enhancement) 样式。
• 使用前提： 需在目标容器上设置 container-type: scroll-state。
• 可查询状态：
• stuck：查询 position: sticky 元素何时被“粘住”。用途：改变导航栏样式，提示用户内容被覆盖。
• snapped：查询滚动吸附 (scroll-snap) 对齐何时激活。用途：高亮当前吸附的项，或弱化其他项。
• scrollable：查询内容何时溢出容器且可滚动，可检测滚动方向。用途：显示滚动提示，调整填充。
• scrolled：查询内容何时向特定方向滚动。用途：根据滚动方向显示/隐藏头部或导航栏。
• 参考资源：
• Chrome Blog: CSS Scroll State Queries
• MDN: Container scroll-state queries
4. text-box 属性
• 核心功能： 精确控制文本框的垂直间距，去除字体默认包含的“半行高” (half-leading) 空白。
• 解决问题： 解决 Web 字体渲染中，字体包含额外空白导致文本无法精确对齐的问题。
• 典型应用：
• 实现像素级对齐，例如将文本的基线 (baselines) 或 x-高度 (x-heights) 与网格或其他元素精确对齐。
• 示例：h1 { text-box: trim-both cap alphabetic; } 可以同时修剪顶部大写字母高度和底部字母基线处的空白。
• 未来趋势： 作者认为它最终会成为默认行为。
• 参考资源：
• Chrome Blog: CSS text-box-trim
5. typed attr() 函数
• 核心功能： attr() 函数的增强版，允许在 CSS 中直接、类型安全地使用 HTML 属性值，并支持类型检查和回退 (fallback)。
• 优势： 提供了 HTML 和 CSS 之间强大的桥梁，使得 CSS 可以根据 HTML 属性动态调整样式。
• 典型应用：
• 传递颜色： background: attr(data-bg color, black); 可以从 data-bg 属性获取颜色，如果无效则使用 black。
• 传递数字： grid-template-columns: repeat(var(--_columns), 1fr); 结合 CSS 变量从 data-columns 获取数字值。
• 类型验证： 使用 type() 函数验证属性值是否符合预设的关键字列表，例如 scroll-snap-align: attr(scroll-snap type(start | center | end));。
• 参考资源：
• Chrome Developers Blog: Advanced attr()
• Temani Afif's post

author atom@argyleink

nerdy.dev

4 CSS Features Every Front-End Developer Should Know In 2026

Toolbelt worthy, powerful, and game-changing CSS you need for 2026.

#优质博文 #JavaScript #前端 #动画 #陀螺仪
这个我 2 年前（怎么都 2 年了卧槽）有做过类似的需求，也叫陀螺仪，iOS 必须请求陀螺仪权限才能用，除了这个缺点，整体上其实用起来挺舒服的。
Beyond the Mouse: Animating with Mobile Accelerometers

AI 摘要：文章详细介绍了如何在移动端利用加速计 (accelerometers) 和运动传感器 (motion sensors) 增强网页动画的用户体验。作者指出桌面端基于鼠标的动画在移动端会“失效”，并提出了通过 DeviceMotionEvent 和 DeviceOrientationEvent API 来弥补这一差距。文中涵盖了环境检测、权限处理（尤其强调 iOS 的用户手势要求）、DeviceMotion 和 DeviceOrientation 两种传感器的应用场景（运动跟踪与绝对角度）、如何将传感器数据映射到 CSS 变量以控制动画的旋转和位移，并最终实现更具沉浸感的交互效果。文章还探讨了如何将移动端的动态感受引入桌面端。

author Amit Sheen

#趣站 #demo #前端
非常可爱的网站！看了看首页还有很多有趣的东西

https://www.gachago.net/MarbleRace

一个基于物理模拟的弹珠台式抽奖工具，灵感来源于游戏内的抽奖玩法，通过模拟物理碰撞（例如红色柱子增加弹力）来决定结果，使得抽奖过程更具趣味性和不可预测性。

https://x.com/Mant0uStudio/status/2009279695276089512

作者是 @Mant0uStudio

#优质博文 #前端 #工程化 #性能优化 #JavaScript #BundleSize #TreeShaking #course
相当实用的好文，教你怎么减小打包体积（PS：初学者友好）
Bundle Size Investigation: A Step-by-Step Guide to Shrinking Your JavaScript

AI 摘要：本文提供了一份详细的逐步指南，旨在帮助开发者调查并缩减 JavaScript 打包文件的大小，以提高网页性能。作者通过一个实际项目案例，展示了如何使用打包分析器来识别大型或冗余的代码块。文章深入探讨了摇树优化（tree-shaking）的工作原理和局限性，特别是针对 CommonJS 模块和 * 导入模式。此外，还介绍了如何通过识别和移除重复库、以及处理由第三方依赖引入的传递依赖（transitive dependencies）来进一步优化代码体积，最终将示例项目的 bundle size 从 5MB 显著减少到 600KB 左右。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 初始项目设置 (Initial Project Setup)
• 作者创建了一个故意膨胀的示例项目（其 JavaScript 包大小为 5MB），作为演示如何调查和缩小打包体积的起点。
• 提供项目 GitHub 仓库链接，鼓励读者通过实际操作来验证文章内容。
2. 分析打包大小 (Analyzing Bundle Size)
• 介绍了打包分析器（bundle analyzer）工具的使用，例如 Vite 项目中的 Rollup Plugin Visualizer。
• 解释如何解读打包分析图（treemap），识别出项目中最大的代码块，尤其是供应商（vendor）代码和应用程序自身代码。
• 指出可以通过配置更改可视化模板（template），如使用火焰图（flamegraph），以获得不同视角的分析。
3. 调查流程 (Investigation Process)
• 确定要移除的包 (Step 1: Identify a Package to Eliminate)：通过打包分析图识别出体积巨大且可能存在问题的包，如 @mui 相关的包。
• 理解包 (Step 2: Understand the Package)：快速研究包的功能和用途，以理解其在项目中的角色。
• 理解包的使用方式 (Step 3: Understand the Usage of the Package)：通过代码搜索确定包在项目中的导入和使用模式，特别是是否存在 * 导入所有内容的模式。
• 确认问题 (Step 4: Confirm That This is the Problem)：通过临时注释掉问题包的导入代码并重建项目，验证其对打包大小的实际影响。
4. 摇树优化和死代码消除 (Tree Shaking and Dead Code Elimination)
• 解释摇树优化（tree-shaking）的原理：现代打包工具如何识别并移除未使用的代码（dead code）。
• 通过示例代码展示了 tree-shaking 在原生 ESM 模块中的有效性。
• 揭示了 * 导入模式（ import * as Something from 'library'）会阻止 tree-shaking 对外部库生效，导致整个库被打包。
• 提出解决方案：避免使用 * 导入，改为精确导入所需模块，以确保 tree-shaking 正常工作。
5. ES 模块和非摇树优化库 (ES Modules and Non-tree-shakable Libraries)
• 解释 JavaScript 模块格式（如 ESM, CommonJS）对 tree-shaking 能力的影响。
• 强调 ESM 格式易于 tree-shaking ，而 CommonJS 等旧格式则难以优化。
• 介绍 is-esm 工具，用于检查一个 npm 包是否为 ESM 格式。
• 以 lodash 库为例，展示了非 ESM 格式导致 tree-shaking 失败的问题，即使是精确导入特定函数也无济于事。
• 提供解决方案：使用库提供的精确子路径导入（import trim from 'lodash/trim'）来只引入所需部分，或在功能允许的情况下替换为原生 JavaScript 函数。
6. 常识和重复库 (Common Sense and Repeating Libraries)
• 指出在大型项目中，多个库可能实现相同功能，导致代码冗余。
• 以日期处理库 date-fns、moment 和 luxon 为例，展示了如何识别并移除这些重复的库。
• 强调选择替换库时需考虑 tree-shaking 能力、API 易用性、维护状态以及对打包大小的影响。
• 通过将 moment 和 luxon 的使用重构为 date-fns，显著减少了打包体积。
7. 传递依赖 (Transitive Dependencies)
• 解释传递依赖：当项目直接依赖的库又依赖了其他库时，这些间接依赖也会被打包。
• 介绍 npm-why 工具，用于追溯一个包的所有依赖路径，从而识别其作为传递依赖的来源。
• 以 @emotion 库为例，即使从项目中移除了直接使用，它仍可能通过 @mui 等库作为传递依赖存在。
• 说明移除传递依赖可能需要移除其上游所有依赖，这是一项需要权衡成本和收益的复杂任务。
• 通过将 @mui 组件替换为 Radix UI 组件并替换图标，成功移除了 @mui 及其传递依赖 @emotion。
8. 结果 (The Result)
• 总结了整个优化过程的成果：示例项目的 JavaScript 包大小从 5MB 显著减少到 600.98 KB。
• 指出尽管取得了巨大进步，但仍有进一步的优化空间，例如通过懒加载（lazy loading）处理 tiptap 和 prosemirror 等大型库。

author Nadia Makarevich

Developerway

Bundle Size Investigation: A Step-by-Step Guide to Shrinking Your JavaScript

A practical guide to analyzing and reducing JavaScript bundle size. Learn bundle analysis, fix tree-shaking issues, remove duplicate libraries, and otherwise optimize your React app's JavaScript size.

#优质博文 #前端 #R3F #WebGL #性能优化 #course
Infinite Canvas: Building a Seamless, Pan-Anywhere Image Space | Codrops

AI 摘要：本教程深入探讨了如何利用 React Three Fiber 构建一个无缝、可无限平移的 3D 图像画布。文章核心在于通过“区块” (chunk) 分块渲染、确定性 (deterministic) 内容生成、基于距离的剔除 (culling) 与渐隐，以及惯性 (inertia) 驱动的相机控制器等技术，创造出无限探索的视觉错觉，同时确保在高性能设备上达到 120 帧的流畅体验。它还详细介绍了包括延迟加载、像素密度限制、禁用抗锯齿等多种性能优化策略，为开发者提供了构建响应式、沉浸式 3D 体验的实用指南和未来扩展方向。

author Edoardo Lunardi

#tools #AI #代码搜索
React Scan 作者发布了新作品 Repogrep，一个由 AI 驱动的超快速代码库搜索工具，能够帮助开发者在公共 GitHub 仓库中查找代码，比较类似 DeepWiki，但是快，超级快。

Aiden Bai(aidenybai): 介绍 repogrep.com 对任何公共 GitHub 仓库进行超快速代码库搜索
我在不到 10 秒内找到了 React Hooks 的源代码。
https://x.com/aidenybai/status/2008222085240549530

AI 摘要：Repogrep 是一款创新的 AI 编码代理，专为解决在海量代码库中快速搜索的痛点而设计。它能够搜索任何公共 GitHub 仓库，用户只需粘贴 GitHub 仓库 URL 或输入关键词，即可实现超快的代码查找。

Repogrep

ultra fast codebase search

Tailwind創始人Adam Wathan關閉了一個為Tailwind CSS網站添加llms.txt的PR。
Adam在PR comment中稱使LLM更容易閱讀文件意味著人們更不容易接觸到Tailwind的付費解決方案，因此沒有時間處理這一類PR。Adam稍後補充團隊最近裁員75%，他認為正是AI對其商業模式殘酷的衝擊所致，更列出數字指自2023年初Tailwind CSS Docs訪問量降低了40%、營收縮減了近80%。
PR作者Evan Jacobs對此大感失望，認為這是對文件的補充而非一種替代，並連發兩則TikTok影片批評Adam的行為。

https://github.com/tailwindlabs/tailwindcss.com/pull/2388

#demo #codepen #前端 #CSS #SVG
文本框边框动画旋转 [CSS & SVG] V2

在 Fernando Cohen 制作的这个流畅的 CSS 和 SVG 动画中，文字栅栏围绕着一张照片的边缘。看看悬停照片时会发生什么

看了一下原理，这是一个使用 SVG 和 CSS 创建的文字沿着有机形状边框旋转动画效果。
首先使用 SVG Blob 形状生成，创造有机的 blob 形状

<path d="M43.1,-68.5C56.2,-58.6,67.5,-47.3..." />

这个路径数据可能来自 Blob Generator 等工具

然后是使用 clip-path 进行图片裁剪，将矩形图片裁剪成 blob 形状，同时通过 preserveAspectRatio="xMidYMid slice" 确保图片填充满整个区域。

<clipPath id="blobClip">
  <path d="..." transform="translate(100 100)"/>
</clipPath>
<image clip-path="url(#blobClip)" />

然后使用 pathLength 进行文字路径动画，定义文字路径

<path id="text" d="..." fill="none" stroke="none" pathLength="100" />

• pathLength="100" 标准化路径长度，便于动画计算
• fill="none" stroke="none" 路径本身不可见，仅作为文字轨迹

将文字沿路径排列：

<text class="text-content">
  <textPath href="#text" startOffset="0%">
    ❤️ MADE WITH LOVE ❤️ MADE WITH LOVE...
    <animate attributeName="startOffset" 
             from="0%" to="100%" 
             dur="15s" 
             repeatCount="indefinite" />
  </textPath>
</text>

• <textPath> 让文字沿着指定路径排列
• startOffset 控制文字在路径上的起始位置
• <animate> 元素实现 SMIL 动画（SVG 原生动画）

那无缝循环是怎么做的呢？他用了两段文字，当第一段文字从 0% 移动到 100% 时，尾部会消失，第二段文字从 -100% 移动到 0%，正好填补空白。两段文字首尾相连，形成无缝循环。

<textPath href="#text" startOffset="0%">
  <animate from="0%" to="100%" />
</textPath>

<textPath href="#text" startOffset="100%">
  <animate from="-100%" to="0%" />
</textPath>

最后是这个交互式缩放效果，是通过悬停时放大裁剪区域（而非整个 SVG）来做的。

#优质博文 #CSS #前端 #新特性
@scope 已获得所有主流浏览器支持，定义了新的 CSS 作用域上下文。
MDN：@scope - CSS | MDN
文章：How to @scope CSS Now That It’s Baseline

AI 摘要：@scope CSS 规则是现代前端开发中一项重要的新特性，它允许开发者在 CSS 中定义明确的作用域，从而解决了传统 CSS 全局作用域导致的样式冲突和管理难题。文章详细阐述了 @scope 在 <style> 块和外部 CSS 文件中的不同使用方式，包括如何利用 :scope 伪类指定作用域根，以及通过 to 关键字创建“甜甜圈作用域 (Donut Scope)”来限制样式生效范围。同时，作者还探讨了 :scope 在 JavaScript DOM API 中的应用，并提出了一种平衡代码组织与性能优化的综合实践策略，旨在帮助开发者更灵活、高效地管理和应用 CSS 样式。

author Daniel Schwarz

MDN Web Docs

@scope - CSS | MDN

The @scope CSS at-rule enables you to select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.

#博客更新 #图片优化 #Shell

最近需要处理别人的服务器上大量历史图片的压缩问题。因为历史遗留原因（别问，问就不是我的锅） 累积了不少高分辨率的全景图和常规照片，占用存储空间越来越大。

虽然之前在前端生产环境中一直使用 sharp-cli 和 @napi-rs/image 等进行图片处理，但这次面对的是已存储的历史图片批量压缩场景，并且这次提供的环境是堡垒机，只能通过网页终端进行操作，没有 GUI，需要更灵活的命令行工具。

这篇文章记录了完整过程，希望对有类似需求的朋友有所帮助。

欢迎勘误拷打我知道肯定有更好的方法但是反正都压缩完了。

使用 ImageMagick 和 libvips 进行服务器端批量图片压缩

cos

使用 ImageMagick 和 libvips 进行服务器端批量图片压缩 | 工具 | 余弦の博客

最近需要处理别人的服务器上大量历史图片的压缩问题。因为历史遗留原因， 下累积了不少高分辨率的全景图和常规照片，占用存储空间越来越大。虽然之前在前端生产环境中一直使用 sharp-cli、@napi-rs/image 等进行图片处理，但这次面...