#趣站 #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 等进行图片处理，但这次面...

#优质博文 #前端 #CSS #渐进增强 #新特性 #course
一篇关于 scroll-state(scrolled) 很详细的介绍，该查询允许开发者根据用户最新的滚动方向来应用样式，从而实现响应式用户界面。
Directional CSS with scroll-state(scrolled)

AI 摘要：本文详细介绍了 Chrome 144 中新增的 scroll-state(scrolled) CSS 查询。作为 scroll-state() 容器查询 (container queries) 家族的一部分，它使开发者能够根据用户最近的滚动方向动态调整页面元素的样式。文章首先解释了其工作原理，包括如何设置 container-type: scroll-state 以及 scrolled 查询接受的不同方向值。随后，通过几个实用的案例演示了其应用，包括在用户向下滚动时隐藏顶部导航栏并在向上滚动时重新显示（使用 fixed 或 sticky 定位），以及结合滚动触发动画 (scroll-triggered animations) 实现方向性的元素进入效果。文章强调了这种新特性在渐进增强 (Progressive Enhancement) 方面的优势，展示了无需 JavaScript 即可实现复杂交互的可能性。

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

1. scroll-state(scrolled) 查询介绍
• 新特性：Chrome 144 中引入的 CSS 新查询，用于根据用户滚动方向应用样式。
• 核心功能：允许开发者基于用户最新的滚动方向来动态修改元素的样式。
2. 工作原理
• scroll-state() 查询家族：scrolled 是 scroll-state() 容器查询 (container queries) 的一个新成员，同系列还包括 stuck、snapped 和 scrollable。
• 启用方式：需在父元素上设置 container-type: scroll-state。
• 查询语法：通过 @container scroll-state(<type>: <value>) 规则块来应用基于滚动状态的样式。
3. scrolled 查询的详细说明
• 检测目标：检测最近期的相对滚动方向。
• 支持值：
• 方向性值：top、right、bottom、left。
• 逻辑方向值：block-start、inline-start、block-end、inline-end。
• 轴向速记：x、y、block、inline。
• 初始状态：none，表示容器尚未发生相对滚动。
• 动态性：浏览器会实时更新此状态，允许根据用户滚动方向（向上、向下、向左、向右）来为子元素设置样式。
4. 实际应用案例
• 案例一：使用固定定位 (fixed positioning) 实现的隐藏导航栏 (Hidey-bar)
• 功能描述：当用户向下滚动时隐藏顶部导航栏，向上滚动时重新显示。
• 优势：增加屏幕可视空间，且无需完全滚动回顶部即可访问导航。
• 渐进增强 (Progressive Enhancement)：不支持此特性的浏览器将始终显示导航栏，不影响基本功能。
• 案例二：使用粘性定位 (sticky positioning) 实现的隐藏导航栏 (Hidey-bar)
• 作者偏好方案：采用 position: sticky 实现类似的导航栏隐藏/显示功能。
• 渐进增强优势：对于不支持的浏览器，导航栏保持原有的粘性定位行为，不破坏现有用户体验。
• 用户体验：导航栏在开始滚动时动画隐藏，向上滚动时动画出现。
• 案例三：方向性滚动进入动画 (Directional scroll entry animation)
• 实现原理：结合 scroll-state(scrolled) 和实验性的滚动触发动画 (scroll-triggered animations) API，根据滚动方向改变元素的进入动画效果。
• 示例：根据是向上滚动还是向下滚动，使卡片从不同的方向（例如，从底部或从顶部）滑入视图。
• 发展前景：尽管当前的滚动触发动画 API 仍处于早期阶段并存在一些限制（如动画重播问题），但其潜力巨大，有望实现更自然的用户界面动效。

author Una

Una.im

Directional CSS with scroll-state(scrolled)

Style based on scroll direction with this new scroll-state query feature.

#codepen #demo #前端 #canvas
果冻压扁按钮

好可爱的按钮！看了一下原理。

这不是真正的 3D 果冻，而是通过快速切换预渲染的图片序列来模拟果冻挤压效果，类似电影胶片的原理。预加载了 215 张连续的果冻形变图片，这些图片记录了果冻从静止到被挤压到回弹的完整动画过程，通过切换不同帧号的图片来做的。

你需要预留一点时间来压扁这个东西。无论是垂直拖动光标，还是单击 "跟随鼠标 "复选框，都可以将这个由 Voicu Apostol 制作的内含果冻的按钮的压扁效果与鼠标移动联系起来。

#优质博文 #前端 #WebGL #demo #course
Demo 这个也很酷。
How to Create a Pixel-to-Voxel Video Drop Effect with Three.js and Rapier

AI 摘要：本教程详细介绍了如何利用 Three.js、着色器 (shaders) 和 Rapier 物理引擎，将 2D 视频流转化为动态的 3D 体素 (voxel) 下落效果。文章从核心概念——像素和重力——出发，逐步讲解了如何构建一个由 InstancedMesh 和刚体 (rigid bodies) 组成的平面，通过着色器实现平铺像素到 3D 体素的涟漪 (ripple) 变形效果，并最终通过 JavaScript 模拟涟漪进程来激活物理引擎，使体素在逼真的物理作用下散射和恢复。作者还分享了实现过程中的技术细节、优化考量以及未来扩展的可能性。

author Junichi Kasahara

#优质博文 #前端 #趣站 #demo #WebGL
很有创意的一个滚动驱动的 portfolio 页面：Mr. Panda's Psychologically Safe Portfolio

• 开源在：GitHub - andrewwoan/mr-pandas-psychologically-safe-portfolio
• 技术解析视频：How I created a Hand-drawn Papercraft Portfolio with Three.js, Blender, React, and Krita

author Andrew Woan

#优质博文 #前端 #WebGL #Shaders #demo
很 NB 的 ASCII 艺术生成网站 https://efecto.app/ 之前发过，这篇是作者的详细技术解析。
Efecto: Building Real-Time ASCII and Dithering Effects with WebGL Shaders | Codrops

AI 摘要：本文作者 Pablo Stanley 分享了他如何开发 Efecto 应用，在网络上实时实现图像抖动（dithering）和 ASCII 艺术效果，并结合 WebGL 着色器（shaders）模拟 CRT 显示器视觉效果的经验。文章详细介绍了抖动算法（如 Floyd-Steinberg、Atkinson 等）的原理与代码实现，多色调色板的应用，以及如何通过数学函数在着色器中绘制 ASCII 字符。此外，还探讨了扫描线（scanlines）、屏幕曲率（screen curvature）、色差（chromatic aberration）等 CRT 特效的实现，并讨论了 CPU 和 GPU 在这些效果实现中的分工，最后总结了从历史算法到现代 Web 开发的宝贵经验。

author Pablo Stanley

Efecto

Efecto - Free ASCII Art & Dithering Effects Tool

Transform 3D models, videos, and images with ASCII art, dithering, and halftone effects in real-time.