#优质博文 #前端 #javascript #新特性
未广泛......吗（好像除了取色都用过
6 hidden gems in the JavaScript API you should be using

AI 摘要：本文介绍了 6 个未被广泛使用但功能强大的原生 JavaScript API，包括 structuredClone、EyeDropper、AbortController、Intersection Observer、ResizeObserver 和 Clipboard API，详细解释了它们解决的问题、适用场景及实现方法，帮助开发者无需依赖外部库即可构建高效动态的 Web 应用。

1. structuredClone
• 功能：深度克隆复杂对象（支持日期、Map 等类型），替代 JSON.parse(JSON.stringify()) 的局限性。
• 示例：克隆包含嵌套对象、数组和特殊类型的原始数据，保持独立性且无需手动类型转换。

2. EyeDropper API
• 功能：原生实现颜色选择器，适用于图片编辑或绘图类应用。
• 限制：目前仅支持 Chrome、Edge 和 Opera。
• 示例：通过按钮触发颜色选择，动态更新页面背景色。

2. AbortController
• 功能：取消已发送的异步请求（如搜索输入防抖场景），避免陈旧响应。
• 示例：结合 fetch 和 useEffect，在组件卸载或查询变化时中止请求。

3. Intersection Observer
• 功能：监听元素进入视口的时机，实现懒加载图片或无限滚动。
• 示例：通过 data-src 延迟加载图片，仅在可见时替换为 src 属性。

4. ResizeObserver
• 功能：监听元素尺寸变化，适用于响应式图表或动态调整文本大小。
• 示例：根据父容器宽度自动缩放文本字体。

5. Clipboard API
• 功能：替代已废弃的 document.execCommand，支持文本和图像的复制/粘贴操作。
• 安全限制：需 HTTPS 环境及用户授权。
• 示例：复制文本到剪贴板，以及通过 Blob 处理图像粘贴。

author Rahul Padalkar

LogRocket Blog

6 hidden gems in the JavaScript API you should be using - LogRocket Blog

Explore underrated JavaScript APIs like structuredClone, AbortController, and more that let you build dynamic, performant, and user-friendly apps.

#优质博文 #前端 #react #course
很棒的初学者友好的 React Fiber 架构说明。
React Internals: Which useEffect runs first?

AI 摘要：本文深入探讨了 React 中 useEffect 的执行顺序问题，通过示例代码和 React 内部机制（如 Fiber 架构和遍历算法）解释了为何子组件的 useEffect 会先于父组件执行。文章分为渲染阶段和提交阶段，详细解析了 React 的生命周期和遍历逻辑，帮助开发者理解并避免潜在的执行顺序问题。

1. 问题引入
• 通过一个父子组件的 useEffect 执行顺序测试题引入主题，展示大多数开发者对执行顺序的误解。
• 示例代码显示子组件的 useEffect 先于父组件执行，但官方文档未明确解释这一行为。
2. React 生命周期概述
• 触发阶段（Trigger）：初始渲染或状态更新（如 setState）。
• 渲染阶段（Render）：调用组件函数，生成虚拟 DOM，标记需更新的节点。
• 提交阶段（Commit）：更新真实 DOM 并执行副作用（如 useEffect）。
3. React Fiber 架构
• Fiber 树是 React 内部用于管理组件层级和更新的数据结构，包含节点类型（如 HostComponent）、子节点、兄弟节点和父节点指针。
• 图示展示了 Fiber 树与 DOM 树的差异，强调其优化渲染效率的特性。
4. Fiber 树的遍历算法
• 深度优先遍历：每个节点被访问两次（向下和向上），优先处理子节点，再处理兄弟节点。
• 动画演示了遍历过程，解释了为何子组件的 useEffect 会先执行。
5. 渲染阶段（Render Phase）
• beginWork()：调用组件函数，执行 console.log，标记需更新的节点。
• completeWork()：生成新的 DOM 节点，但未提交到真实 DOM。
6. 提交阶段（Commit Phase）
• 副作用提交：通过 recursivelyTraversePassiveMountEffect 函数深度优先遍历，先提交子组件的 useEffect，再提交父组件的。
• 动画和代码示例进一步验证了这一行为，解释了同级组件的执行顺序逻辑。

author Teng Wei Herr

Frontend Masters

React Internals: Which useEffect runs first?

useEffect is one of the most commonly used hooks in the React community. Regardless of how much experience you have with React, you’ve probably used it before.

#优质博文 #新动态 #javascript #前端 #node
Node Weekly #576

AI 摘要：本期 Node Weekly 聚焦 JavaScript 生态的重要更新与工具动态，涵盖 Koa 3.0 发布、Node.js LTS 版本更新、Bun 的兼容性进展、安全事件解析，以及 Tonkotsu IDE 等新工具。同时探讨了 V8 优化、Deno 改进和跨语言开发趋势，为开发者提供全面的技术风向标。

1. 框架与运行时更新
• Koa 3.0 发布
• 作为 Express.js 的“下一代”框架，Koa 3.0 强调现代 JavaScript 特性，提供轻量级中间件方案。
• 与 Express 的复兴形成竞争，v3.0 更新细节见发布说明。
• Node.js v22.15.0 (LTS)
• 包含 300+ 提交，支持 Windows/macOS 系统证书、依赖项更新及 process.execve 引入。
• Bun 兼容性进展
• 通过 Node.js events 模块 100% 测试，新增 llms-full.txt 文档支持 AI 工具集成。

2. 工具与创新
• Tonkotsu IDE：自然语言驱动的 JS/TS 开发环境，支持通过文本描述生成代码，开放免费早期体验。 (SPONSOR)
• Seyfert：跨运行时（Node/Deno/Bun）的 Discord 机器人框架，支持组件化开发。
• Scala.js 1.19.0：强化 Scala 与 JavaScript 的互操作性，提供代码对比示例。

3. 安全与优化
• Node.js CI 安全事件解释：Jenkins 管道漏洞被利用，技术委员会披露事件分析与修复措施。
• V8 显式编译提示：通过预编译指定文件加速启动，随 Chrome 136 一起提供。

4. 版本生命周期
• Node.js v18 即将终止支持，建议升级至 v22；v23 进入维护模式，v24 即将发布。

5. 其他动态
• OpenAI Node 库 4.96：新增 gpt-image-1 模型支持。
• 跨语言指南：TypeScript 与 C# 的语法对比，DuckDB-WASM 的 3D 游戏实验。
• p5.js 2.0：重大升级缓慢推进，Deno 2.3 改进预告发布。

GitHub

Releases · koajs/koa

Expressive middleware for node.js using ES2017 async functions - koajs/koa

#碎碎念 #游戏 #无限暖暖
太离谱了，昨天玩了一晚上评价是：我还是先歇几天在做活动吧，怎么有游戏的上新版本能做到包括但不限于以下事情：

1. 大改键位和 UI 和界面布局（不！止！一！次！）
2. 开服前几个小时才开预下载，下载完开服了进去：初始化失败，那好吧，点修复资源完了你游戏相册里的照片就丢了，很难想象是一个主打拍照的游戏干得出来的事（虽然应该大多数拍照都会存下来）
3. 新任务的时候，一坨的引导，npc 是若隐若现的， 任务标点是乱飞的，动一动还会出现重复的任务标点 bug 和重复的任务条目指引 bug，突然出现的联机人的 bug，不存在的任务标点 bug，支线任务冒充主线任务的标点，遇到任何 bug，欸，只能重启
4. 染色方案一应用，欸我界面怎么卡死啦~重启！
5. 以上都是 pc 的 bug 体验录，ps5 端看推甚至有人到现在还没进去。
6. 画质和帧率倒是变好了，但我这是 5090D 啊。
7. 其他大的小的就不说了，新玩家把新手剧情给换了，老玩家新手引导换成星海之后还砍了动画？？什么操作，原来的新手剧情你想改为什么要直接砍掉动画。而且这新新手剧情新玩家看了只会觉得一头雾水尬的只有场景好看的吧。（你游文案、策划、剧情什么样大家一直懒得喷）

锻炼忍耐力来的了，都能忍的这辈子有了😇

狗叠该骂，狠狠骂，往死里骂，这明显是新版本更新的东西太多做不好直接赶鸭子上架了完全没测过，生动形象的诠释了什么叫草台班子。

我看开了，反正都是草台班子，也是随缘玩。感兴趣去 B 站可以搜一圈都是 bug 吐槽。

原铁绝都退了没精力玩儿但是人家做的好太多，你想学习是没啥问题但是没那个人力就别硬学。。你就是 5090 也得必须来尝尝我的 bug 攻击，笑死☺️

ps: 这是 B 站 bug 吗怎么两个空的视频，被删了？？
哦对不起，是广告被 ad block 干掉了

我从来没有觉得玩无限暖暖开心过😩

千人团队 = 四个二百五

cosine - 前端人の日常频道

#碎碎念 moonlight 远控 5090D 打游戏（） https://live.bilibili.com/10292443

#碎碎念 #游戏 #视频更新 #无限暖暖
虽然你的 bug 很多😡但是看到这风景我暂时原谅几秒。先丢一点点片段到阿 B。
5090D带鱼屏光追拉满最高画质帧率的无限暖暖长什么样～Part.1

别问，问就是懒得改源文件标题（草）
ps： 怎么有游戏的 bug 能那么多的？！

Bilibili

lv_0_20250430011032_哔哩哔哩_bilibili

lv_0_20250430011032是5090D带鱼屏光追拉满最高画质帧率的无限暖暖长什么样～Part.1的第1集视频，该合集共计2集，视频收藏或关注UP主，及时了解更多相关视频内容。

#碎碎念
moonlight 远控 5090D 打游戏（）
https://live.bilibili.com/10292443

cosine - 前端人の日常频道

#AI Qwen3 写代码能力貌似还可以？我还没来得及试。 https://fixupx.com/karminski3/status/1917019006428713333

#碎碎念 虽然但是我应该还是继续用 cursor 写代码，这些本地部署都是尝尝鲜跑一些角色扮演（逃）干一些 api 不敢干的事儿。
酒馆启动

Akasha Terminal: dev🍃

一觉醒来发现 qwen3 发布了，跑了一下，mac 和 win 都试过了。亮点应该是 30B 激活参数量 3B 的模型，性能跟传统 30B 模型相当的同时，大大加快了运行速度。
就是这 5090D 怎么跟 mac 一个水平了，这么拉了？
疑似是显存瓶颈，GPU 核心使用率上不去。这1.8T/s 的带宽保真吗（

总之 30 t/s 也妥妥够用了，个人级设备不折腾不捡垃圾也能跑。这个参数量用 ktransformer 加速意义不大，但是 200B 那个估计有机会。再等等吧。
至于说云服务商提供的多卡运行几百 tps 的场景，在离线非交互（比如deepwiki）才有用，30 t/s 已经跟完整速读速度差不多了，再快就需要略读了，基本上能满足纯本地化的日常使用了。

#AI
Qwen3 写代码能力貌似还可以？我还没来得及试。
https://fixupx.com/karminski3/status/1917019006428713333

🧵 Thread • FixupX

karminski-牙医 (@karminski3)

Qwen3 写代码能力测试来啦！

简单说结论——可以加显卡了，这就是可以本地部署的最强开源写代码大模型

来看 KCORES LLM Arena 的测试结果：

20小球七边形测试结果：

主要问题出现在小球掉出了七边形，以及小球摩擦极其微弱判定为无摩擦的扣分，但整体实现效果仍然很好。得分71分与 Gemini-2.0-Flash 相当

mandelbrot-set-meet-libai 测试结果：

主要问题出现在渲染过大以及颜色弄反了造成的扣分。但是渲染性能和绘制准确度都很好。得分89分与Qwen2.5…

#碎碎念 #手办
五一回家：？无语，谁干的，草

#优质博文 #前端 #css
Anchor Positioning Just Don't Care About Source Order | CSS-Tricks

AI 摘要：本文介绍了如何使用 CSS 的锚点定位（anchor positioning）技术来摆脱 HTML 源代码顺序的限制，使得元素的定位更加灵活和简便。通过实例展示了如何将一个 div 覆盖在另一个 div 上，并详细解释了锚点定位的实现方法和优点。

• 简介
• 文章以十个 div 进入酒吧的比喻开始，解释了当空间不足时，如何让一个 div 坐在另一个 div 的“腿上”。
• 强调了 HTML 源代码顺序的重要性，因为在传统的 CSS 定位中，元素的顺序会影响定位效果。

• 传统的定位方法
• 展示了如何通过调整 HTML 源代码顺序来实现一个 div 覆盖另一个 div 的效果。
• 介绍了使用父子关系（parent-child）来定位 div 的方法。
• 详细解释了如何使用 CSS 的 position: relative 和 position: absolute 属性来实现定位，并通过 inset-block-start 和 inset-inline-start 属性将子元素固定在父元素的左上角。
• 通过设置子元素的宽度为父元素的 100%，实现完全覆盖父元素的效果。

• 锚点定位的优势
• 介绍了锚点定位技术如何简化定位过程，不再受限于 HTML 源代码顺序。
• 说明了锚点定位在最新版本的 Chrome 浏览器中默认支持。
• 展示了如何使用 anchor-name 属性定义锚点元素，并通过 position-anchor 属性将子元素与锚点元素连接。
• 解释了如何使用 position-area 属性来居中定位子元素，并通过 anchor-size() 函数设置子元素的大小以完全覆盖锚点元素。

• 结论
• 强调锚点定位技术的优点，即它不依赖于 HTML 源代码顺序，体现了 CSS 在内容和表现分离方面的优势。

author Geoff Graham

CSS-Tricks

Anchor Positioning Just Don't Care About Source Order | CSS-Tricks

The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.

#优质博文 #前端 #工程化 #pnpm
感觉这样挺好的欸。vscode 扩展：antfu.pnpm-catalog-lens

Categorize Your Dependencies

AI 摘要：本文探讨了在项目开发中如何更好地管理和分类依赖包，提出了使用 pnpm catalogs 进行依赖分类和版本管理的方法，并介绍了相关的工具支持和未来可能的应用场景。

详细内容要点：

1. 引言
• 介绍了在项目开发中使用 npm 安装第三方包的情况。
• 解释了依赖包的两种主要类型：dependencies（生产依赖）和 devDependencies（开发依赖）。
• 展示了 package.json 文件中依赖包的示例配置。

2. 依赖包的基本概念
• 详细解释了 dependencies 和 devDependencies 的区别。
• 说明了这些概念最初是为 Node.js 库开发而引入的。
• 讨论了 npm 在安装包时如何处理依赖和开发依赖。

3. 项目类型分类
• 将项目分为三类：Apps（应用程序）、Libraries（库）和 Internal（内部包）。
• 指出依赖和开发依赖的区分主要适用于发布到 npm 的库。

4. 依赖包的多重用途
• 讨论了工具如何扩展依赖和开发依赖的含义以适应不同场景。
• 举例说明 Vite 和其他构建工具如何处理依赖包。

5. 依赖包分类的必要性
• 指出仅使用 dependencies 和 devDependencies 无法充分描述包的用途。
• 提出了一些可能的依赖分类方法，如 test、lint、build 等。

6. PNPM Catalogs 介绍
• 介绍了 pnpm catalogs 功能，允许在 monorepo 中共享依赖版本。
• 展示了如何在 pnpm-workspace.yaml 和 package.json 中配置 catalogs。
• 说明了 catalogs 如何简化版本管理和依赖分类。

7. 工具支持
• 讨论了使用 catalogs 后需要的工具支持。
• 介绍了作者开发的 VS Code 扩展 PNPM Catalog Lens，用于显示依赖版本。
• 列举了已适配 catalogs 的工具，如 taze、eslint-plugin-pnpm 等。

8. 未来展望
• 讨论了依赖分类在未来可能的应用场景，如在 Vite 和 unbuild 中更精细地控制依赖优化和外部化。
• 提出使用 catalogs 可以增强安全性报告和防止错误的打包操作。
• 作者表示已开始在项目中使用 catalogs，并鼓励读者尝试这种方法。

author Anthony Fu

Visualstudio

PNPM Catalog Lens - Visual Studio Marketplace

Extension for Visual Studio Code - Show inlay version for PNPM catalogs

#碎碎念 #猫
坏可乐乱拉屎，干掉了我们一个晚上的时间收拾！还是绝育了吧公猫不绝育的话乱拉乱尿还是太难顶了，腊八当时就不这样，唉，还是小母猫好，我爱腊八 :-(

Yu’s Life

📖 AI 正在让人变得前所未有地自以为是 #article 备注：诚然 AI 降低了很多知识获取与学习的门槛，但我依然不敢信任它在我未曾涉猎的领域中给出的似乎条分缕析的回答或是长篇大论的 Research，如果有一天我对 AI 生成的东西感到陌生或是完全无法判断真伪，可能会更担心是不是自己已经丧失思考能力了吧。 程序员算是 AI 浪潮的比较直接的受益者，LLMs 很大程度改变了我的工作模式和行为习惯，我也偶尔会偷懒让 AI 帮我总结或是用沉浸式翻译读英文资料，但我依然不会也难以想象用 AI 帮我写周报…

#碎碎念 #AI
太认同了，担心 AI 会不会让自己变成文盲这一点。

用 AI 算命，把 AI 当作心理咨询师，就是这种无知的具体表现。就连 AI 所擅长的编程工作，真正的程序员都还在担心 AI 会不会让自己变成文盲，而另一些可笑的人，做着相反的事情，还认为 AI 能让自己变得更聪明，能在一夜之间换一个职业，肆无忌惮地生产垃圾产品污染行业。

📖 AI 正在让人变得前所未有地自以为是 #article

备注：诚然 AI 降低了很多知识获取与学习的门槛，但我依然不敢信任它在我未曾涉猎的领域中给出的似乎条分缕析的回答或是长篇大论的 Research，如果有一天我对 AI 生成的东西感到陌生或是完全无法判断真伪，可能会更担心是不是自己已经丧失思考能力了吧。

程序员算是 AI 浪潮的比较直接的受益者，LLMs 很大程度改变了我的工作模式和行为习惯，我也偶尔会偷懒让 AI 帮我总结或是用沉浸式翻译读英文资料，但我依然不会也难以想象用 AI 帮我写周报/博文，或许它终有一天能做得不错，却少了灵魂和一些微妙的“人”感。

https://www.geedea.pro/posts/ai-%E6%AD%A3%E5%9C%A8%E8%AE%A9%E4%BA%BA%E5%8F%98%E5%BE%97%E5%89%8D%E6%89%80%E6%9C%AA%E6%9C%89%E5%9C%B0%E8%87%AA%E4%BB%A5%E4%B8%BA%E6%98%AF/

www.geedea.pro

AI 正在让人变得前所未有地自以为是

就我所观察到的，人们对于生成式 AI 和大语言模型的讨论中，最值得注意的，是人工智能与人类智慧的关系，例如「AI 能不能代替人思考？」「AI 的思考能力有没有超越人类？」以及「AI 是否拥有真正的思考能力」的问题。
我对 AI 没什么负面想法，就像我对我的书桌没什么负面想法一样。这篇文章是一篇批评，但批评的对象是使用和讨论 AI 的一部分人，不是 AI 本身。如果你不清楚两者的区别，请先阅读《 你批评的只是第三者的诠释方式 》。