# BroadcastChannel 实战：同源多标签页实时通信（登录态同步与状态广播）去年做后台管理系统的时候，我被一个 bug 折磨了整整一个下午。用户在 A 标签页点了退出登录，切到 B 标签页还能正常操作菜单，直到他点了某个按钮…
# PHP FFI 实战：在 PHP 里直接调用 C 函数（libc/自定义 so 与内存对齐）我第一次在 PHP 里调 C 函数的时候，满脑子都是「胶水层」的幻想——以为 FFI 就是个跨语言的透明胶水，PHP 这边写个函数名，那边 …
# CSS 容器查询实战：让组件响应自己的容器而非视口（@container 与 cqw）我记得特别清楚，去年做公司后台的"数据卡片"组件时，我自信满满地用 `@media` 写了三套断点：手机一列、平板两列、桌面三列。在组件库里单独预…
# Web Animations API 实战：用 JS 精确控制动画（play/pause/.currentTime 与 finished）老实说，我以前是 CSS `animation` 的死忠粉。什么 loading 转圈、按钮 …
# IndexedDB 前端数据库实战：离线应用与索引查询（增删改查与事务）我至今记得那个周五晚上十一点，运营同学在企业微信里甩过来一张截图：电商后台的商品列表页，点了搜索框的输入法候选都要顿一下，页面直接白屏卡死三秒。老板在群里问了一…
# 前端国际化实战：Intl API 与 i18n 架构（数字/日期/货币与动态切换）三年前我接了个"国际化"的需求，当时我天真的以为，国际化不就是把页面上的中文换成英文嘛？于是我在项目里洋洋洒洒写了一百多个 `lang === 'en…
![PHP 8 Attributes 注解实战：用 #[Route] 取代注释解析（反射读取与路由映射）](https://www.qianduange.cn/uploads/20261112/a3fac22a9d04b1bc3e23854da2e10245.png)
# PHP 8 Attributes 注解实战：用 #[Route] 取代注释解析（反射读取与路由映射）我当年第一次想把路由从配置文件里解放出来，是在一个写了三百多个 `switch ($uri)` 的老项目里。那时候我用的还是老办法：…
# PHP Swoole 协程实战：把串行的 IO 等待变成并发（go/Channel/WaitGroup）我第一次用 Swoole 协程的时候，犯过一个特别蠢的错。当时我想并发抓三个接口的数据，于是一口气写了三个 `curl_exec…
Web Components 实战：用原生 API 封装可复用自定义元素（Shadow DOM 与插槽全解析）
用原生 customElements 与 Shadow DOM、slot 从零封装可复用自定义元素，讲透样式隔离、内容分发与生命周期回调。
Canvas 2D 绘图入门：从画矩形到 requestAnimationFrame 动画
从 getContext 到 requestAnimationFrame，手把手讲透 Canvas 2D 绘图、状态管理与逐帧动画入门。
WebAssembly 入门：让前端也能跑接近原生的性能（instantiateStreaming 与线性内存）
从原理到实战讲透 WebAssembly：用 C/Rust 编译的 .wasm 在浏览器跑接近原生性能，详解 instantiateStreaming 与 instantiate 加载方式、线性内存 Memory 与 JavaScript 的数据交换，以及图像、加密、物理等适用场景。
Intersection Observer API 实战：高性能滚动触发动画与懒加载
用懒加载、滚动揭示动画、无限滚动三个实战，讲清 IntersectionObserver 的配置项与回调在主线程、防抖等关键注意事项。
CSS Grid 网格布局完全指南：从网格线到 auto-fit 响应式
CSS Grid 是二维网格布局系统，通过 grid-template 定义行列轨道、用网格线编号与 grid-area 命名区域定位，fr 分配剩余空间，repeat()+auto-fit+minmax() 实现零媒体查询的响应式自适应列。
CSS 变量（Custom Properties）实战：一行 var() 搞定全局主题切换
CSS 变量（Custom Properties）用 :root 定义、var() 取值，支持级联覆盖与 calc() 联动，配合 [data-theme] 一行切换即可实现全局主题与暗黑模式，比预处理器变量更动态。
PWA 离线应用实战：Service Worker 缓存策略与 manifest 配置
从零搭建可安装可离线的 PWA：详解 manifest.json 配置与 Service Worker 生命周期及 precache、stale-while-revalidate 缓存策略。
前端无障碍（Accessibility）指南：ARIA、键盘导航与对比度那些事
前端无障碍以语义化 HTML 为地基，配合 ARIA、键盘导航、对比度与屏幕阅读器测试，让残障及各类受限情境下的用户都能顺畅使用网页。
Three.js 零基础入门：四要素手搓一个会转的 3D 立方体
用场景、相机、渲染器、几何体加材质四要素手搓一个会转的 3D 立方体，零基础入门 Three.js 的世界。
Proxy 与 Reflect 元编程：从拦截器到 Vue3 响应式原理
一篇文章讲透 Proxy 的 13 个拦截陷阱与 Reflect 的正确转发姿势，并手撕迷你版 Vue3 响应式原理。
WebGPU 计算着色器实战：用 WGSL 在浏览器里跑并行计算（矩阵乘法与工作组）
# WebGPU 计算着色器实战：用 WGSL 在浏览器里跑并行计算（矩阵乘法与工作组）去年我做了个前端小工具，要把一堆图片做一次高斯模糊再加个色彩矩阵变换，数据量不大但算起来 CPU 直接原地去世——主线程卡成 PPT，风扇狂转，用户…
BroadcastChannel 实战：同源多标签页实时通信（登录态同步与状态广播）
# BroadcastChannel 实战：同源多标签页实时通信（登录态同步与状态广播）去年做后台管理系统的时候，我被一个 bug 折磨了整整一个下午。用户在 A 标签页点了退出登录，切到 B 标签页还能正常操作菜单，直到他点了某个按钮…
友情链接
- 1Web Components 实战：用原生 API 封装可复用自定义元素（Shadow DOM 与插槽全解析）41
- 2Canvas 2D 绘图入门：从画矩形到 requestAnimationFrame 动画35
- 3WebAssembly 入门：让前端也能跑接近原生的性能（instantiateStreaming 与线性内存）30
- 4Intersection Observer API 实战：高性能滚动触发动画与懒加载28
- 5CSS Grid 网格布局完全指南：从网格线到 auto-fit 响应式27
- 6CSS 变量（Custom Properties）实战：一行 var() 搞定全局主题切换27
- 7PWA 离线应用实战：Service Worker 缓存策略与 manifest 配置26
- 8前端无障碍（Accessibility）指南：ARIA、键盘导航与对比度那些事26
- 9Three.js 零基础入门：四要素手搓一个会转的 3D 立方体25
- 10Proxy 与 Reflect 元编程：从拦截器到 Vue3 响应式原理25
