本文字数1500+ ，阅读时间大约需要 5分钟。
【掘金一周】本期亮点：
- 水波纹进度条，带有"水波纹"或"扭曲"效果,filter,svg
- 从 npm 到 pnpm：包管理器的进化与 pnpm 核心原理解析
- 为什么有些依赖必须 import *引入使用？
- 凌晨零点，一个TODO，差点把我们整个部门抬走
- 适配私有化部署，我手写了套支持离线验证的 License 授权系统
- Flutter 真 3D 游戏引擎来了，flame_3d 了解一下
- Android ViewModel数据加载：基于Flow架构的最佳实践
- 【干货】这些Claude Code使用技巧对你应该有用
- 从零实现 LLM（上）：原理讲透 + 最小可运行 GPT
「上榜规则」：文章发布时间在本期「掘金一周」发布时间的前一周内；且符合各个栏目的内容定位和要求。 如发现文章有抄袭、洗稿等违反社区规则的行为，将取消当期及后续上榜资格。
一周"金"选
内容评审们会在过去的一周内对社区深度技术好文进行挖掘和筛选，优质的技术文章有机会出现在下方榜单中，排名不分先后。
前端
水波纹进度条，带有"水波纹"或"扭曲"效果,filter,svg @拜无忧
当用户拖动滑块时，JS 会实时地去修改 SVG 滤镜中的各种参数，比如
feTurbulence的baseFrequency（波纹的频率）和feDisplacementMap的scale（波纹的幅度），让用户可以自由定制喜欢的效果。
从 npm 到 pnpm：包管理器的进化与 pnpm 核心原理解析 @再学一点就睡Orz
本文将先回顾 npm 的局限，再深入解析 pnpm 如何通过 硬链接与符号链接 突破这些局限，揭开其 "高效存储、极速安装" 的底层逻辑。
为什么有些依赖必须 import *引入使用？ @石小石Orz
本文将以 ECharts 为例，深入探讨这一问题的根源，并顺带梳理 ES Module（ESM）与 CommonJS（CJS）模块规范的差异，帮助你从底层理解
import *背后的原因。
手把手教你实现飞机上的开窗关窗效果 @一条会coding的Shark
通过视觉隐藏 (
filter: opacity(0))，使用滤镜将元素透明度设为0（完全透明），比opacity: 0或visibility: hidden更好的选择，因为它可以保持元素完全可点击和可聚焦，不影响布局（元素仍占据空间），不会阻止鼠标事件。
该用 < img > 还是 new Image()？前端图片加载的决策指南 😌😌😌 @Moment
在浏览器的关键渲染路径里，
<img>一旦进入 DOM 就会立刻参与调度并发起下载，天然具备语义与可访问性（如alt被读屏器识别），还能配合srcset/sizes与fetchpriority让浏览器按视口与优先级选择最合适的资源。
多端单点登录（SSO）实战：从架构设计到代码实现 @再学一点就睡Orz
本文基于简单的实际项目案例，详细介绍 SSO 在多端应用中的设计思路与实现方案，包含整页重定向与弹窗通信两种核心模式，并结合 client1、client2、client3 的具体代码实现进行说明。
实测告诉你：Web Worker 传输大字符串，哪种方法才不掉坑？ @站好了
一开始我以为 ArrayBuffer 会是更优解，但经过实际测试发现 ------ 直接传字符串才是王道。这让我更坚信一句老话：性能优化不能只靠直觉，一定要用数据说话！
后端
凌晨零点，一个TODO，差点把我们整个部门抬走 @大厂码农老A
顺着线程栈的指引，我很快定位到了代码里的"犯罪现场"：
XxxxxCacheManager.java在这段代码上方，还留着一行几个月前同事留下的、刺眼的注释：// TODO: 此处有性能风险，大促前需优化。
适配私有化部署，我手写了套支持离线验证的 License 授权系统 @洛卡卡了
说到底，License 就像是产品和客户之间的一份"合同"，不同的是它既能写在纸上（采购协议），也能写在代码里（授权逻辑）。对于我们来说，它最大的价值就是：能管得住时间，控得住功能，限得住环境，还防得了复制、破解和绕过。
Android
Flutter 真 3D 游戏引擎来了，flame_3d 了解一下 @恋猫de小郭
在Flame 2D中，游戏对象通常是
Component的子类 ，例如SpriteComponent用于渲染图像。在 flame_3d 则是引入了新的三维组件类型，比如MeshComponent，它们也继承自Component基类，但是在其之上有Component3D的相关实现。
Android ViewModel数据加载：基于Flow架构的最佳实践 @稀有猿诉
本文对 Android ViewModel 中基于流程的数据加载的探索，解决了传统
init {}块方法的根本挑战。虽然涵盖所有架构变体会很繁琐，但该模式成功处理了大约 90% 的常见用例。
人工智能
【干货】这些Claude Code使用技巧对你应该有用 @前端欧阳
整个流程我们只需要做的是将AI需要操作的浏览器登录上，然后给他布置任务就行，他自己就能埋头苦干+自己PUA自己。因为现在的AI已经能够聪明的像人类一样浏览网页了，虽然是借助浏览器MCP这种工具。
从零实现 LLM（上）：原理讲透 + 最小可运行 GPT @一点一木
LLM太大了，我是不是玩不起？其实不用。我们不会上来就研究 1000 亿参数的模型，而是用一个几十万参数的mini-GPT------ 它保留了核心机制（Tokenizer、Attention、Context Window、采样策略），只需几百行代码，就能在Google Colab跑起来。
📖 投稿专区
大家可以在评论区推荐认为不错的文章，并附上链接和推荐理由，有机会呈现在下一期。文章创建日期必须在下期掘金一周发布前一周以内；可以推荐自己的文章、也可以推荐他人的文章。