交互式技术教程与实验

将算法、数据结构、CSS、浏览器机制等主题实现为可视化、可操作的页面—— 支持单步执行算法过程、调节参数观察结果、验证浏览器的实际行为。每个主题一个系列。

🧮算法与数据结构48

时间轮 Timing Wheel

管理海量定时器的 O(1) 结构：环形数组 + 槽位 bucket + 随 tick 前进的指针。单步演示定时器入槽、指针推进触发，以及分层时间轮如何用 cascade 降级避免「槽位膨胀」。

timing-wheel 结构 / 容器

链表 Linked List

以放弃随机访问换 O(1) 就地增删：既拆解多指针单次遍历的经典题（反转 / 判环 / 合并 / 相交 / 深拷贝），也讲结构本身的变体（单 / 双 / 循环 / 跳表 / 展开 / XOR）。

linked-list 结构 / 容器

Priority Queue 优先队列 / 二叉堆

每次出队优先级最高的元素；主流实现是二叉堆——以数组存储、按完全二叉树解释。单步演示 sift-up / sift-down 与 heapify。

priority-queue 结构 / 容器

LFU Cache 频率淘汰缓存

容量满时淘汰累计访问最少的条目。朴素做法用 min-heap 是 O(log n)；一篇 2010 论文用「频率链表 + bucket + hash 表」把 get / set / 淘汰全做到 O(1)。单步演示频率链表如何随访问移动，并和 LRU 并排对比。

lfu-cache 结构 / 容器

并查集 Union-Find

N 个对象不断合并、随时查询连通性——动态连通性问题。从 quick-find 逐步优化到 path compression，均摊复杂度接近 O(1)。

union-find 结构 / 容器

Bitmask 位运算的三类应用

同一个整数的二进制位，在集合成员 / 可达性指纹 / lane 占用三种场景中语义各异，共同点是以位运算替代遍历。

bitset 结构 / 容器

树 · 遍历 · 平衡 BST · 前缀 / 度量树

把树话题收拢到一处，分三条线：遍历（三序 × 递归 / 显式栈 / Morris）、平衡与查找 BST（红黑 / AVL / treap / 次优 BST）、走出 BST 的 radix tree 与 BK-tree。每类都配单步引擎，可改输入、单步播放。

trees 结构 / 容器

排列生成字典序与回溯

把 n 个数的全部 n！个排列玩通透：字典序下一个排列（支点 + 后继 + 翻转）、反复调用枚举全体、回溯递归树，以及康托展开把排列与整数序号一一对应。

permutation 序列扫描

自适应归并排序 Timsort 与 Powersort

现实数据多半基本有序。先识别天然 run、再合并它们，合并 a、b 两段代价约 a+b，于是合并顺序决定总代价。Timsort 用一套栈不变式（曾因此栈溢出，Python 补了第 4 条）,Powersort 改以「虚拟完全二叉树」算 node power 定序，栈深上界一目了然且近似最优。单步对比两者的合并树与搬移代价。

powersort 序列扫描

双指针 Two Pointer

当数据具有某种有序性时，两个单向移动的指针可将 O(n²) 降为 O(n)。分类讲解同向、对撞、快慢三种模式。

two-pointer 序列扫描

滑动窗口 Sliding Window

相邻窗口大部分重叠、仅相差一进一出，增量维护可降为单次遍历 O(n)。分定长（单调队列）与变长（可伸缩窗口）两类。

sliding-window 序列扫描

二分查找 Binary Search

不背模板，用一个循环不变量统一所有变体：开区间 l=-1, r=n + 红蓝染色。>= / > / <= / < 四种查询 = 两条判定 × 两个返回端；并推广到「二分答案」。

binary-search 序列扫描

一维标签布局 1-D Label Placement

每个标签都有期望位置，数据密集时相互重叠。Kate Morley 的 O(n) 算法用 cluster 栈使最大偏移量最小化；竖直或水平轴通用。

label-placement 序列扫描

弹幕排布 Danmaku Layout

滚动评论从右飞入，如何分配轨道、判定不追尾、轨道占满后如何降级。等速只看入场间距，变速归一则解追及不等式。

danmaku 序列扫描

区间查询前缀和 / 树状数组 / 线段树

在数组上反复执行区间查询与单点更新，四种能力递进的解法：前缀和、树状数组、线段树，以及 lazy propagation。

range-query 序列扫描

合并单元格用四个坐标描述一块区域

合并区域通常以四个坐标（左上 + 右下）描述。解析数据模型、用矩形相交判定重叠，最终映射到锚点单元格与 rowspan/colspan。

merged-cells 序列扫描

Regex × Unicode 字符模型与自研引擎

一个「字符」往往由多个 code point 组成。先系统讲解 Unicode 字符模型与 \p{…} 属性，再用自研引擎解析 regex。

regex 字符串 / diff

String Search KMP / BM / Rabin-Karp

在 text / pattern 对齐网格上观察 naive matching 的冗余比较，再分析 KMP / Boyer-Moore / Rabin-Karp 各自如何减少比较次数。

string-search 字符串 / diff

列表 diff 数组的最小差异更新

把一个列表变换为另一个最少需要多少次编辑操作？从 LCS、Myers（git diff）、LIS（框架 reconciler）到 virtual DOM 的工程权衡。

list-diff 字符串 / diff

Suffix Automaton 后缀自动机

识别一个串全部子串的最小 DFA，却只需 ≤ 2n−1 个状态、O(n) 在线构造。核心是 endpos 等价类：结束位置相同的子串共用一个状态，suffix link 连成一棵 parent 树。单步看 sa_extend 逐字符建机（含 clone 分支），并把本质不同子串计数 / 出现次数 / 两串 LCS 都化作一次遍历。

suffix-automaton 字符串 / diff

连续重复消除安排次序求最短

反复删除连续相同字符段、删后邻居贴合可级联，如何安排次序得到最短结果？从左贪心会错失「先删中间障碍、让远处同字符合并」的机会（abbbbccccbd 卡在 abd 而非 ad）；改用区间 DP 判定子串可消空性 E(i,j)，再在其上求最短 F,O(n³) 时间。

run-elimination 字符串 / diff

多重子集和把两组数配对

两组数总和相等，要把数组2的碎片不重复地分进数组1的每个目标——整数化规避浮点 + 降序回溯 + 剩余和剪枝 + 同值去重，取代人工对账。

subset-sum 搜索 · 回溯 · 博弈

博弈论收益矩阵 / minimax / 纳什均衡

从 2×2 收益矩阵出发:零和博弈的鞍点与 minimax、迭代消去支配策略、无鞍点时的混合策略,最后越过零和到纳什均衡与囚徒困境。

game-theory 搜索 · 回溯 · 博弈

搜索 BFS / DFS / 回溯 / 剪枝

在庞大的状态空间中寻找一条路径。DFS（栈、深入到底再回溯）vs BFS（队列、首次到达终点即最短），再到回溯模板与剪枝。

search 搜索 · 回溯 · 博弈

Branch & Bound 分支限界

组合优化的解空间是 2ⁿ 决策树。为子树估算乐观 bound，不优于已知最优解的子树整体剪除；末节说明 A* 是它的特例。

branch-bound 搜索 · 回溯 · 博弈

alpha-beta 剪枝减少博弈树的搜索量

Minimax 在博弈树上推演，但代价按 b^d 指数增长。搜索时维护窗口 [α, β]，一旦 α ≥ β，当前节点其余子节点可直接跳过。

alpha-beta 搜索 · 回溯 · 博弈

Dancing Links 解 Exact Cover

数独 / N 皇后本质上是同一个 Exact Cover 问题。Knuth 的 Algorithm X + 双向循环链表使删除与还原均为 O(1)。

dancing-links 搜索 · 回溯 · 博弈

沿 Diestel 教材骨架铺开的图论 (graph theory) 定理体系:先把顶点 / 边 / 度 / 连通等基础语言说清楚,再过匹配 / 连通性 / 平面图 / 着色 / 流五类经典结构 (Hall / König / Menger / Euler / Kuratowski / max-flow min-cut),然后看极值 / Ramsey / Hamilton / 随机图这一族「整体条件逼出局部结构」的母题,最后落到无限图与图子式的现代结构理论。每页都把抽象定义落到一张能拖点、改参数、单步执行的图上。

graph-theory 图论

线性规划网络流从最大流到 LP 对偶

从最大流的定义与残量网络出发,依次走完 Ford-Fulkerson / Edmonds-Karp / Dinic / ISAP / HLPP 这五种求解算法、最大流最小割定理、最小费用最大流,再到二分图匹配、经典建模归约、上下界网络流,最后用线性规划与对偶把整套理论统一收束。每页都能选网、单步播放、对照流量表与代码。

network-flow 图论

图论 · 最短路 / MST / 拓扑 / 树分解

图 (graph) 上的经典算法合集:单步运行 Dijkstra 最短路、Prim/Kruskal 最小生成树、Kahn/DFS 拓扑排序,再到 treewidth 与树分解。每个子页都能选图、逐步播放、对照表格与代码。

graph 图论

最优分段 DP · 相册排版与内容分栏

把一维序列按顺序切成连续段，每段有代价，求全局最优切法。相册 justified layout（Σ 代价最小）与内容分栏均衡（min-max 切 K 段）同属一个引擎，各配贪心对照。

partition-dp 动态规划

序列对齐 DP · 一张表跑出四种算法

LCS、编辑距离、Needleman–Wunsch 同属一个二维 DP：三方向转移 + max/min，换 spec 即换算法。附近亲 DTW：数值序列的时间轴对齐（字幕 forced alignment）。

sequence-dp 动态规划

背包问题九讲动态规划专题

从 01 背包出发逐步增加约束、变换问法：完全 / 多重 / 混合 / 二维费用 / 分组 / 依赖，最终归纳为泛化物品与聚合算子替换。

dp 动态规划

树形 DP 后序聚合与拐弯路径

节点的答案依赖其全部子节点的答案，天然适合一次后序遍历。从求树高到直径、最大路径和与 House Robber III。

tree-dp 动态规划

动画引擎原理从插值到播放控制

不谈 CSS transition,而是从零拆解动画的底层要素:插值、缓动曲线、弹簧物理、关键帧与时间线编排、可回退的播放控制。每页都由本仓库手写的 @vega/anim 引擎实时驱动。

animation 概率 · 编码 · 理论

图片占位：主色与模糊预览

懒加载真图到达前先铺一块占位。最朴素的是「一块主色」——用八叉树把 24-bit 颜色空间逐位细分、折叠相近色取出主导色(并对比 median-cut / k-means);再往上一档, 把整张图压成 CSS-LQIP / BlurHash / ThumbHash 这类「一团模糊预览」。可上传自己的图。

image placeholder 概率 · 编码 · 理论

平均数是个最优解

「取平均」=「最小化距离平方和」。拖候选值看 cost 曲线在均值处触底，换惩罚换出 mean / median / midrange，再延伸到最小二乘回归。

least-squares 概率 · 编码 · 理论

Bloom Filter 布隆过滤器

概率型集合：判定「不存在」必然正确，判定「存在」可能误报。不存储元素本身，仅用一组 bit 与 k 个哈希函数置位。

bloom-filter 概率 · 编码 · 理论

概率条件概率 / 贝叶斯

用方阵（一个点 = 一个人）将 P(A|B) 展开为可计数的格子，推导贝叶斯定理、复现 base-rate 假阳性悖论。

probability 概率 · 编码 · 理论

Huffman 编码树

为什么「高频字符用短编码」能实现无损压缩？用 priority queue 单步建树、逐 bit 沿树解码，并展示其在 gzip / PNG / JPEG 中的应用。

huffman 概率 · 编码 · 理论

LZ77 滑动窗口压缩

把重复片段换成「往回 distance、抄 length 个」的回引。单步走一遍最长匹配编码、再把三元组流解码还原（含 length > distance 的重叠回引），并理解它如何与 Huffman 组成 DEFLATE（gzip / PNG）。

lz77 概率 · 编码 · 理论

傅里叶变换从级数到 FFT

任何信号都可分解为正弦波之和。一条主线：正弦分量 → 傅里叶级数 → 复指数 epicycle → DFT → FFT → 采样定理。

fourier 概率 · 编码 · 理论

有限自动机 DFA / NFA / regex

状态机即「state + transition 表」。介绍 DFA / NFA，串联 regex → NFA → DFA → 最小 DFA 三个经典转换。

automata 概率 · 编码 · 理论

解析器从字符流到语法树

解析是「把线性的字符流还原成有层次的树」。各台引擎按确定性与通用性分作四个象限，外加编辑器真正依赖的那半边：容错、诊断、无损语法树与增量。

parser 概率 · 编码 · 理论

图灵完备从一条纸带到通用计算

无限纸带 + 读写头 + 指令表即可表达任何可计算函数。链路：图灵机 → 停机问题 → Brainfuck → Rule 110 → 意外图灵完备实例清单。

turing-complete 概率 · 编码 · 理论

Y 组合子匿名函数的递归构造

lambda 演算中函数均为匿名，如何实现递归？用真实的 β-归约引擎逐步推导 Y = λf.(λx.f(x x))(λx.f(x x))。

y-combinator 概率 · 编码 · 理论

稳定匹配 Gale–Shapley 与延迟接受

两组参与者按偏好配对至不存在 blocking pair。延迟接受机制：提议 + 暂时接受、遇更优提议则替换；man-optimal 定理揭示结果的不对称性。

stable-matching 概率 · 编码 · 理论

配额分配把整数名额按比例分下去

从「饼图百分比 round 后凑不齐 100%」出发：最大余额法 (Hamilton) 取 floor 再按余数补齐缺口；它隐藏的 Alabama 悖论（总名额变多反而有人变少）；以及除数法 (D'Hondt / Sainte-Laguë) 如何单调无悖论。

apportionment 概率 · 编码 · 理论

🧩谜题4

数独解题技巧人类推理策略

规则只有一条，难点全在推理。将常见叫法对应到标准术语：hidden / naked single、X-Wing、着色、AIC，最后衔接回溯算法；末尾用同一套技巧阶梯给谜面定难度，配一个可以实战的对局页。

sudoku

井字棋 OX 一个被完全解出的游戏

看似幼儿园游戏，却是博弈论里少数被完全解出的例子：双方最优必然平局。从可玩棋盘出发，看 minimax 如何向前看到底、为什么再也赢不了、不输的策略、整个状态空间有多大，最后用 WebRTC 做一个无后端也能跑的联机对战。

tic-tac-toe

五子棋连珠禁手与先手平衡

15×15 棋盘上「连成五子」的简单规则，藏着一个不舒服的事实：先手必胜。看自由规则为何失衡，连珠禁手（三三 / 四四 / 长连）与 Swap2 开局两条路怎么把先手抹平，顺便下一局、再用 WebRTC 做一个无后端的联机对战。

gomoku

国际象棋实战对局

一个能真下的国际象棋盘: 六档强度的 NPC (自研 negamax + alpha-beta, 低档位用温度采样模拟人类失误), 或者发一条链接跟朋友直连对战 (WebRTC, 不经服务器)。规则做全了 —— 王车易位、吃过路兵、升变, 以及逼和 / 50 步 / 三次重复 / 子力不足四种和棋。另附一套训练课 (子力安全 / 开局 / 战术图形 / 攻王 / 兑子 / 残局) 与局后逐手复盘: 每条结论都由这台引擎自己的实测数据背书。

chess

🔢数学10

函数 · 性质与基本初等函数

把函数当作一台「输入 x、输出 f(x)」的机器，先看它整体的两条性质——单调性（随 x 增大是升还是降）与奇偶性（图象关于 y 轴还是原点对称）；再逐个认识三类基本初等函数：幂函数 y = x^α、指数函数 y = aˣ 与它的反函数对数函数 y = log_a x。

functions

不等式 · 与函数图象的关系

把「解不等式」翻译成「读函数图象的高低」：f(x) > 0 就是图象落在 x 轴上方的那段 x，f(x) > g(x) 就是 f 的图象在 g 上方的那段。解集，是这些 x 在横轴上的投影。

inequalities

三角函数 · 从角到波

把角讲清楚：角是一条射线绕原点旋转扫出的量，逆时针为正、顺时针为负，可以超过一整圈。弧度制用弧长度量角，让 π rad = 180°、弧长 s = rθ 这类公式退到最简；再放上单位圆，终边与圆的交点坐标就是 (cos θ, sin θ)，旋转一圈把它「展开」便得到正弦、余弦曲线。

trigonometry

平面向量 · 从有向线段到数量积

向量是既有大小又有方向的量：几何上是一条有向线段，代数上是一对坐标 (x, y)。本系列从加减、数乘等线性运算出发，落到坐标表示，再到度量夹角与垂直的数量积 a·b。

vectors

概率与统计 · 从样本空间到用样本估计总体

把概率还原成样本空间上「有利结果占多少」的计数，沿古典概型、事件运算与独立性、频率、条件概率一路推进到随机变量的分布列与期望方差，再到二项 / 超几何 / 正态三大分布，最后回到用样本估计总体。

probability & statistics

集合论 · 关系、运算与映射

集合是数学的通用底座。从 ∈ / ∉ 与 ⊆ / ⊂ 起，在 Venn 图上演示 ∪ ∩ − △ 与补集，再到基数 |A|、笛卡尔积 × 与幂集 P(A)、映射 f:A→B 的像与原像，最后用 {x | P(x)} 与 ∀ / ∃ 把集合与逻辑接起来。

set

排列组合 · 计数、P(n,k) 与 C(n,k)

计数问题的两条主线：分步用乘法原理、分类用加法原理；在此之上，有序地取得到排列 P(n, k)，无序地取得到组合 C(n, k)，再由 Pascal 三角与二项式定理把 C(n, k) 串成一张网。

combinatorics

实数有理数 / 无理数

从数轴出发梳理 ℕ ⊂ ℤ ⊂ ℚ ⊂ ℝ:用长除法演示「有理数 ⟺ 有限或循环小数」,以反证法证明 √2 无理,再看实数如何填满数轴的缝隙。

real-numbers

几何 · 判定与构造

计算几何常见几类：点在多边形内（ray casting）、最近点对分治、贝塞尔控制点、Canvas/SVG 椭圆弧的两套参数、Sweep and Prune、Allen 区间代数、叉积定向、点集最小外接矩形（rotating calipers）。

geometry

Treemap 用面积铺满一块矩形

把一组带权重的项用矩形面积编码：面积 ∝ 权重、无重叠、铺满。难点不在铺满而在切成什么形状——从 slice-and-dice 的细长条到 squarify 的方正矩形（worst aspect ratio 贪心换行），再到层级嵌套 treemap。

treemap

🎨CSS 与布局23

逻辑属性把上下左右换成 block / inline

物理属性 top/right/bottom/left 钉死在屏幕上;逻辑属性改用随 writing-mode / direction 旋转的 block 轴与 inline 轴描述方位。讲轴模型、margin/padding/border 的 -block/-inline 写法、inset、inline-size/block-size,以及 text-align: start 与 inline 浮动——全程用 getComputedStyle 实测逻辑→物理的解析。

logical-properties 机制 / 值

滚动的三个面：行为、滚动条外观、海量数据虚拟滚动

滚动有三个面。一面管滚动怎么动:overscroll-behavior(传播 / 回弹)、scroll-behavior(平滑)、scroll-axis-lock(斜向手势要不要被投影到单轴)、overflow-anchor(防内容跳动)、scroll snap(整齐吸附)、scroll-state 容器查询(读出贴顶 / 吸附 / 可滚态);一面管滚动条长什么样:::-webkit-scrollbar / DOM / Canvas 三档自定义;还有一面管装得下多少:用虚拟滚动在浏览器里滚动十亿乃至万亿行。每页一个可交互 demo。

scroll 机制 / 值

How does CSS work 样式从哪来

未写任何 CSS 时 <h1> 已有更大字号与加粗——样式从何而来？四层链路：initial value → UA stylesheet → Normalize → Reset，用 getComputedStyle 实测。

how-css-works 机制 / 值

CSS 自定义属性 var() 的解析与陷阱

--gap 不是「真属性」，只是被存起来的原始 token，var() 在 computed value time 才代换。讲 fallback、IACVT、@property、空格 hack。

custom-properties 机制 / 值

CSS 函数值是「算」出来的

大量属性值形如 name(参数)，由浏览器求值得到最终值。14 类 115 个 value function 全景 + calc/min/max/clamp、round/mod/rem、tan(atan2()) 单位消除技巧，外加用 @function at-rule 定义你自己的带参函数。

css-functions 机制 / 值

Spacing 留白与间距

margin / padding / gutter / safe-area / grid / gap / line-height / letter-spacing / negative-space —— 设计与 CSS 里九种留白各自的名字与用途,逐个上手实测。

spacing 布局 / 定位

Flexbox 简写语义与对齐边界

两条主线：flex 简写如何展开成 grow/shrink/basis、flex: 1 的 basis 为何是 0% 而非 0、flex-basis vs width 优先级；以及对齐边界——居中溢出截断、safe center 回退、flex-wrap: balance。

flex 布局 / 定位

CSS Grid 二维布局与轨道模型

把容器划成二维轨道网格再放置项。讲解 fr 如何分配剩余空间、minmax / repeat / auto-fill vs auto-fit、基于网格线的放置与 dense、grid-template-areas、两轴对齐，以及 subgrid / display: contents 两种跨容器对齐解，收束于「三列对齐列表」四种实现对照。

grid 布局 / 定位

CSS Box Alignment 一套对齐属性横跨所有布局

对齐曾按布局各记一套（块级 margin:auto / 表格 vertical-align / Flex justify-*）；Box Alignment 把它抽象成一组与布局无关的属性，再由各模式规定生效范围与轴映射。讲统一模型（两组 × 两轴 + 五类取值关键字）、start / flex-start / self-start 的参照系之别，以及在 block / abspos / table / flexbox / grid / multicol 各模式的落地与边界。

box-alignment 布局 / 定位

Inline 与 inline-block 的布局异常

负 margin-bottom 反而使元素下移、<img> 下方多出数像素、两个元素之间存在空隙——根源都在 IFC 的 line box 与 vertical-align baseline。

inline-block 布局 / 定位

CSS stacking context 拆解

为什么 z-index:9999 有时仍被其他元素覆盖？核心规则、触发条件清单、isolation:isolate 与三个常见误区，实时查看真实 stacking order。

stacking-contexts 布局 / 定位

CSS Anchor Positioning 元素相对锚点定位

tooltip / 菜单的本质是「使 B 相对 A 定位」。纯 CSS 实现：anchor-name + anchor() / position-area + 溢出翻转，拖动锚点观察跟随行为。

anchor-positioning 布局 / 定位

Web 排版一行字怎么排布

从字符序列到规整版面的一系列决策：折行、断词、两端对齐、行距、字距调整、竖排转向，均由 CSS Text / Writing Modes 定义。

typesetting 文本 / 排版

文字装饰下划线、着重号与文字特效

下划线远不止 underline：线型 / 粗细 / 颜色 / offset / skip-ink 各自独立；还有中文 text-emphasis 着重号与 text-shadow 等特效。

text-decoration 文本 / 排版

字体特性 OpenType feature 开关

字体文件内置可由 CSS 启用的排印特性：font-variant-numeric 等宽数字、font-feature-settings 的 OpenType tag、text-autospace。

font-features 文本 / 排版

多行文本展开 / 收起一行 JS 都不写

卡片摘要那种「…展开 / 收起」交互全用 CSS 做：max-height 截断、float 占位把按钮钉右下角、input:checked 切状态、绝对定位 ::after 障眼法判断溢出自动隐藏按钮。

clamp-toggle 文本 / 排版

圆角三部曲从图片滑动门到 corner-shape

border-radius 之前圆角靠切图(SVG 转 PNG + 滑动门 / OOCSS 角对象);border-radius 一行写四角;之后 corner-shape 把圆弧扩展成 squircle / bevel / scoop / notch 的超椭圆家族。

rounded-corners 绘制 / 图形 / 动效

CSS Background 一张 `<image>` 的 size / position / clip

background 画的是一张 <image>——渐变或 url() 位图——由 size / position / repeat / background-clip 摆布。讲解简写七段、渐变色标硬切换、in oklab 插值色彩空间、radial / linear 几何、灌进字形与 border-area 渐变描边，以及雪碧图如何随 background-size 缩放定位。

css-background 绘制 / 图形 / 动效

CSS 里的 Path 一条路径的四种用途

path() / shape() / <basic-shape> 这类形状值应用于不同属性即呈现不同能力：clip-path 裁剪、shape-outside 环绕、offset-path 轨道、d 改写。

css-paths 绘制 / 图形 / 动效

SVG × CSS 可由 CSS 控制的图形文档

SVG 每个图形都是 DOM 节点，可被 CSS 选择器命中、响应 :hover、以 currentColor 着色。讲解嵌入方式矩阵、viewBox 视口映射、attr↔CSS 优先级、fill & stroke、*Units，以及 SVG 当前仍缺失的能力。

svg 绘制 / 图形 / 动效

CSS Transition 状态间的隐式动画

一组可交互 demo：从 transition 的四个子属性与简写，到可过渡性（离散 vs 插值）、timing-function、@starting-style 入场出场、半路打断的可逆性，以及 transition 与 animation 的取舍。

transition 绘制 / 图形 / 动效

CSS Animation 能力速览

一组可交互动画 demo:animation-* 八个子属性、缓动、scroll-driven、@starting-style、运动路径与 Web Animations API。

css-animation 绘制 / 图形 / 动效

iOS 26+ Liquid Glass 验证

MetaColor / FixedWrapper / safe-area 等一组在 iOS 26+ Safari 上的验证 demo，每页带 debug panel。

liquid-glass 绘制 / 图形 / 动效

🌐Web 平台 API14

HTML Parsing 能解析 ≠ 合法

HTML parser 对任意输入都产出确定 DOM、从不报错;<a> 里套 <a> 能跑,却仍是 non-conforming —— 解析容错与 conformance 是两层。

html-parsing

User-Agent 把 UA 字符串拆开

一条 Mozilla/5.0 (…) Chrome/… Safari/… 里藏着 browser·engine·os·device；用自研 @vega/user-agent 当场拆解，并识别 bot。

user-agent

HTML 表单控件 · 提交 · 校验

把 WHATWG「4.10 Forms」规范走一遍：键盘把按键变成字符 → <form> 与提交（form ownership、entry list、三种 enctype、reset 与 dirty value flag）→ 表单控件全家（input 的 22 种 type state、select / datalist、output / progress / meter、fieldset 的 disabled 传播、label）→ 原生控件的边界行为（range 伪元素、RCDATA、maxlength、inputmode、field-sizing）→ 约束校验（ValidityState、校验 API、:user-invalid）与文本选择 API、autocomplete → 实时 masking。每条规范细节都配一个可当场点 / 拖 / 输的原生 demo。

form

Temporal 新一代日期时间 API

传统 Date 将时刻 / wall-clock 时间 / 时长混杂在单一类型中；Temporal 将其拆分为职责明确、不可变的一组类型。

temporal

MessageFormat 2 · Unicode 本地化消息标准

复数、性别、插值、富文本一条消息搞定——Unicode MessageFormat 2.0 (MF2) 的语法、内置函数与 JS API 全覆盖。

mf2

Intl 浏览器内置的国际化 API

数字、日期、复数、排序的本地化格式无需手写——浏览器内置的 Intl（ECMA-402）提供完整实现。

intl

glob 路径匹配的迷你语言

**/*.test.ts 这类带星号的路径不是正则，而是为 / 分段路径定制的迷你匹配语言。

glob

URL 一条网址怎么拆开

https://…:8443/p?q#h 由 scheme·host·port·path·query·fragment 拼成；用原生 URL 逐段拆。

url-anatomy

Dialog / Popover 原生浮层

弹窗 / 抽屉 / 菜单等浮层可交由原生 top layer、<dialog> 与 Popover API 实现，无需手写遮罩。

dialog

事件循环宏任务 / 微任务 / 渲染时机

单线程依靠持续运转的事件循环：取一个宏任务 → 清空微任务队列 → 按需渲染 → 取下一个宏任务。

event-loop

Passkey / WebAuthn 用密钥替掉密码

passkey 并非更安全的密码，而是更换了认证模型：一对非对称密钥，私钥不出设备、绑定 origin、从机制上防御钓鱼。

passkey

Signals 响应式内核

Vue ref、Solid createSignal 底层同一套 push-pull 依赖追踪：改一个值，用到它的地方自动更新。

signals

RxJS 响应式流 · 从 Observable 契约到取消竞态

把「随时间陆续到来的多个值」建模成一条可组合、可取消的流：一个十几行就能手写的 Observable 契约，配上 operator，消掉回调地狱与请求竞态。

rxjs

UX 交互模式那些有名字的交互细节

Optimistic UI 先更新再请求、Yellow Fade 高亮变化、Snackbar 撤销优先、Safe Triangle / Hover Intent 读懂指针意图、Fitts's Law 点击热区、View Transitions 共享元素转场（含跨文档 MPA）——各自并排对照「有 / 没有」。