博客

优化前：卡得不行 上周上线了个新功能——引导说明（onboarding walkthrough），就是那种用户首次进入页面时，高亮某个按钮、弹个小气泡、带箭头指向、点击下一步的交互。本来以为就几行 C...

谁更灵活？谁更省事？ 我做响应式组件快六年了，从最早手写媒体查询+JS监听 resize，到后来用 Bootstrap 栅格、Tailwind 的断点类，再到最近几个项目里试水 CSS Contain...

我的写法，亲测靠谱 Props 设计这事，我干了快六年，从 Vue 2 到 Vue 3，再到 React 18 + TS，踩过的坑比组件还多。最开始我真以为 props 就是“传个值”，结果上线后被产...

又踩坑了，Table里嵌套滚动区域 touchmove 失效 今天上线前测到一个诡异问题：Table组件里某列渲染了一个自定义的「标签选择器」，里面用了横向滚动容器（overflow-x: auto）...

谁更灵活？谁更省事？ 历史记录这个功能，说小不小，说大不大。做后台系统、表单编辑器、可视化搭建工具时几乎绕不开——用户点错了、填错了、删错了，总得有个「撤回」按钮吧？我去年在做一个低代码画布组件时，光...

我的写法，亲测靠谱 在线状态（online/offline）这玩意儿看着简单，但真用到项目里，我踩过至少三轮坑——第一次是以为 navigator.onLine 能实时反映网络状态，结果用户断网后页面...

我的写法，亲测靠谱 transform3d 这玩意儿，我最早是拿它搞轮播图卡顿优化的。后来发现，只要一上 touchmove + translate3d，iOS 上立马丝滑，安卓反而偶尔抽风——但抽风...

先看效果，再看代码 我上周在做一个营销页的“立即领取”按钮时，发现点击后有 300ms 延迟——用户点下去没反应，等半秒才弹出 toast。不是 bug，是 Safari 默认的 click 延迟。但...

我的写法，亲测靠谱 主题定制这事，我干过不下七八个项目，从纯 CSS 变量切换，到运行时 JS 注入样式，再到 Webpack 构建时多主题打包——最后发现，最稳、最易维护、最不容易半夜被 QA 打电...

我的写法，亲测靠谱 消息推送这玩意儿，看起来就一个 Notification.requestPermission() + new Notification()，但真上生产环境跑三个月，你就会发现：权限...

优化前：卡得不行 我们团队用 GitHub Actions 跑前端 CI/CD，项目是 Vue 3 + Vite 构建的管理后台，代码量中等（约 12w 行），组件不算特别多但用了不少第三方 UI 库...

又踩坑了，SessionStorage 里存对象居然拿不出来 今天上线前测一个表单页，用户填了一半切到别的标签页，再切回来——草，数据全没了。我第一反应是：不是写了 sessionStorage.se...

项目初期的技术选型 去年下半年接手一个内部运营后台，目标是把原来散落在七八个 Vue 2 单页里、逻辑重复又难维护的「活动配置模块」抽出来，做成一套可复用的组件库。一开始团队还讨论过要不要上 Web ...

谁更灵活？谁更省事？Third-party Cookie替代方案实战对比 我去年在做一个广告投放效果归因系统时，被Third-party Cookie的消失干懵了。Chrome 125一开，默认禁用第...

又踩坑了，页面卸载前没清理掉 touch 事件监听器 今天上线前 QA 突然提了个 bug：用户从 A 页面快速跳转到 B 页面，再点返回，A 页面的 touchmove 会“幽灵式”触发——明明 A...

我的写法，亲测靠谱 Reanimated 3 我用了一年多，从 v2 迁移到 v3 的时候被搞懵过两次，现在基本摸清了它的脾气。最核心的一条：它不是 React 的状态驱动系统，它是独立的、带时间线的...

我的写法，亲测靠谱 VR/AR 在前端里真不是炫技玩具——去年我接手一个房产展厅项目，客户要求用 WebXR 做轻量级样板间漫游，不装 App、不扫码、点开即进。结果上线前一周，iOS Safari ...

又踩坑了，Terser 把我的 console.log 全干掉了，但线上报错却找不到源 今天上线前做最后的 build 检查，发现一个诡异问题：本地开发一切正常，console.log 都在；但生产环...

Inspect里元素明明在DOM里，却死活找不到对应节点 今天上线前做最后的兼容性检查，打开 Chrome DevTools 的 Elements 面板，想快速定位一个 class 为 order-s...

简要介绍 在现代网页设计中，动态背景效果已成为提升用户体验和视觉吸引力的重要手段。本文所解析的代码实现了一个极具科技感与艺术性的「动态渐变流动背景」，完全基于纯CSS技术构建，无需JavaScript...