GitHub Repo stars
TypeScript 的 Partial、Required、Pick、Omit 和 Readonly 五种工具类型,可转换类型并减少代码中的接口重复。

Oct 8, 2025, 5 min read

5个你应该了解的 TypeScript 实用工具类型

根据页面数量、JavaScript渲染需求及内部链接情况,分析XML网站地图、网站地图索引或无网站地图哪种方案更适合当前站点。

Oct 7, 2025, 4 min read

2025年你还需要网站地图吗？

使用 Faker.js 生成真实的测试数据,涵盖数据库填充、模拟 API 和表单测试,并支持本地化配置与可复现的种子值。

Oct 7, 2025, 4 min read

使用 Faker.js 生成真实的测试数据

通过WOFF2格式、font-display属性、字体子集化、预加载及可变字体等技术优化Web字体,减少布局偏移并提升核心Web指标。

Oct 6, 2025, 4 min read

现代Web字体加载策略优化性能

结合 ShadCN UI、React Hook Form 与 Zod 验证构建无障碍表单,自动处理 ARIA 属性、错误通知及键盘导航支持。

Oct 6, 2025, 4 min read

如何使用 ShadCN UI 创建无障碍表单

对比 WebSockets、SSE 与 Long Polling 三种实时数据传输方案,分析其在聊天应用、仪表板及实时通知场景中的适用性。

Oct 5, 2025, 3 min read

WebSockets vs. SSE vs. Long Polling：你应该选择哪种技术？

TanStack DB 为 TanStack Query 添加了集合与实时查询功能,通过差分数据流实现快速响应式 UI,且样板代码极少。

Oct 5, 2025, 4 min read

开始使用 TanStack DB 构建响应式 UI

介绍如何使用 map、filter、reduce、slice、concat 等非变异数组方法,避免 React 应用中的副作用与错误。

Oct 4, 2025, 4 min read

非变异数组：编写更安全的 JavaScript 代码

使用渐变、条纹图案和可复用纹理创建纯 CSS 背景效果,消除图片 HTTP 请求,提升 Core Web Vitals 分数。

Oct 4, 2025, 4 min read

无需图片的现代 CSS 背景效果

用原生 Intl API 替代 Moment.js、date-fns 和 numeral.js,无需第三方库即可处理日期、货币与数字格式化,同时缩减打包体积。

Oct 3, 2025, 4 min read

轻量级国际化：用 Intl API 替代第三方库

通过 CSS Custom Highlight API 为文本范围添加样式,无需 DOM 包装元素,可提升搜索界面、文本编辑器和注释工具的性能。

Oct 3, 2025, 4 min read

使用 CSS Custom Highlight API 为文本添加样式

通过 fetchpriority、scheduler.yield 及图片尺寸设置技术,提升 LCP、INP 和 CLS 评分,保持主线程响应流畅、布局稳定。

Oct 2, 2025, 4 min read

提升 Core Web Vitals 评分的实用前端技巧

通过生成 SSH 密钥、将公钥添加到 GitHub 设置并验证 SSH 连接,修复 Permission denied publickey 错误。

Oct 2, 2025, 3 min read

修复推送到 GitHub 时的 'Permission denied (publickey)' 错误

介绍节流、防抖、ResizeObserver 及 CSS 媒体查询等方案,规避 JavaScript resize 事件的常见陷阱,防止布局抖动并提升性能。

Oct 1, 2025, 4 min read

避免JavaScript中resize事件的常见陷阱

使用纯 CSS 的 backdrop-filter、rgba 背景与柔和阴影构建玻璃拟态 UI 效果,同时兼顾浏览器兼容性与无障碍访问。

Oct 1, 2025, 3 min read

如何使用纯 CSS 创建玻璃拟态 UI 效果

对比 Microsoft Live Preview 与 Live Server,讲解 VS Code 实时浏览器重载的配置方法及静态站点开发中工作区路径错误的修复。

Sep 30, 2025, 4 min read

VS Code 中的实时浏览器预览：快速指南

介绍如何配置 Astro i18n 路由、组织语言目录,并结合 Paraglide 处理动态 UI 字符串,构建生产可用的多语言 Astro 站点。

Sep 30, 2025, 4 min read

Astro 网站本地化快速指南

容器查询、级联层、CSS 自定义属性和 :has 选择器可帮助开发者编写响应式、易维护的 CSS,无需依赖框架。

Sep 29, 2025, 4 min read

每个开发者都应该了解的 5 个现代 CSS 特性

使用 Intersection Observer API 替代滚动事件监听器,高效检测元素可见性,实现懒加载、动画触发及视频自动播放。

Sep 29, 2025, 4 min read

使用 Intersection Observer 检测元素进入视口

从性能、安全性与成本三个维度对比 Eleventy 与 WordPress,助力为 Web 项目选择合适的静态或动态架构。

Sep 28, 2025, 4 min read

11ty 与 WordPress 现代 Web 项目对比

对比 CSS 动画、GSAP 与 Web Animations API,通过优化路径和智能元素复用,构建高性能且具备无障碍支持的 SVG 动画。

Sep 27, 2025, 4 min read

现代 SVG 动画技术

结合 HTML5 验证属性与服务端内联反馈,借助 htmx 构建更简洁的表单,无需编写大量 JavaScript 代码。

Sep 26, 2025, 4 min read

使用 htmx 简化表单验证

介绍如何结合原生 Popover API、CSS 定位技术与 ARIA 属性,构建具备完整键盘导航与焦点管理能力的无障碍弹出框组件。

Sep 26, 2025, 4 min read

使用现代 CSS 和 JS 创建无障碍弹出框

借助语义化 HTML 与 Schema.org 标记构建 AI 就绪的网站,使 Comet、Edge Copilot 等 AI 浏览器能够高效解析页面内容。

Sep 25, 2025, 4 min read

AI 浏览器与 Web 开发的未来