TS & JS
TS 类型可视化
这个网站做了 TS 类型的可视化讲解,非常适合新手学习理解
JavaScript Source Map 的内部运作机制
文章详细解读了 Source Map 的 JSON 文件格式,并重点阐释了其核心部分——mappings 字段的结构以及用于高效压缩映射数据的 VLQ (可变长度量) 编码算法。
CSS & 动画
【Web开发入门】CSS布局:flexbox、grid、媒体查询和容器查询
非常适合新手入门的 CSS 布局教程,也适合有经验的同学温故知新。
Web 动画性能层级列表
这篇是 motion 的博客文章,提出了 web 动画的 6 个层级:
-
S-Tier:可以完全在合成器线程上运行的动画。
-
A-Tier:在主线程上运行,但触发合成器。
-
B-Tier:涉及一些 DOM 设置测量,但然后作为 A 或 S-Tier 动画运行。
-
C-Tier:触发重绘。
-
D-Tier:触发重排。
-
F-Tier:反复向 DOM 写入内容、测量内容、写入内容、测量内容
似/乎 F 层级是大家早期写一些动画或者动态设置布局经常会用到的方法,这个是性能最差的方案了。他的代码大概是:
// ❌ Bad Code
const header = useRef()
useLayoutEffect(() => {
const element = header.current
// Read
if (element.scrollWidth > element.clientWidth) {
// Write
header.current.dataset.overflowing = "yes";
} else {
header.current.dataset.overflowing = "";
}
}, [text]);
return <div ref={header}>...</div>
React
State Of React 2025 调查
一年一度的 State Of React 调查又开始。
填写问卷❌
拓展 React 视野 ✅
Node
极好的 Node.js 包与资源合集
超 500 个精选包、资源与链接集合。
Node.js 24 进入 LTS 阶段 & 如何从 22 迁移到 24
Node.js 24 版本系列已进入长期支持 (LTS) 阶段,并将继续获得更新,直至 2028 年 4 月底。
20 版本将持续支持到 26 年 4 月,22 版本将持续支持到 27 年 4 月。