OpenReplay 博客
使用 htmx 的智能加载模式
介绍如何将 htmx 的懒加载、视口触发器和渐进增强等加载模式应用于仪表盘开发,通过推迟慢查询的执行时机,有效提升页面响应速度与整体加载性能。
文档 Head 中究竟应该放什么
详解 HTML 文档 head 中应包含的内容,涵盖 charset、viewport、社交元数据、资源提示及结构化数据的排列顺序。
在现代 JavaScript 中使用严格模式的好处
JavaScript 严格模式规则、ESM 自动启用机制以及更安全的 this 绑定,有助于预防错误并更从容地调试旧有代码。
使用 diff 理解代码变更
解读统一 diff 格式、Git diff 命令、Difftastic 等语义化工具及 AI 辅助摘要,帮助自信地审查前端代码变更。
保持 Node.js 项目整洁和最新的工具
介绍如何使用 Renovate、Dependabot、nvm 及审计工具管理 Node.js 项目的依赖项、运行时版本与漏洞风险,保持项目安全且持续更新。
无需框架的响应式:原生 JS 今天能做什么
Proxy、EventTarget 及浏览器观察者 API 可在原生 JavaScript 中实现响应式 UI 状态追踪与 DOM 更新,无需引入框架依赖。
使用 CSS xywh() 函数绘制布局友好的形状
CSS xywh() 函数通过位置与尺寸参数定义矩形,适用于响应式 clip-path 布局,本文对比其与 inset() 在现代浏览器中的差异。
托管现代 JavaScript 应用的最佳平台
对比 Vercel、Netlify、Cloudflare、Render、Fly.io 与 Railway,为框架或容器化应用选择合适的 JavaScript 托管平台。
如何创建和发布 npm 包
使用 ESM、TypeScript 和 npm Trusted Publishing 创建并发布 npm 包,借助 GitHub Actions OIDC 实现无令牌自动化发布。
JavaScript 自定义事件开发指南
介绍如何创建与派发 JavaScript 自定义事件,通过 detail 载荷传递数据,并以 composed 选项控制 Shadow DOM 的事件传播。
5 个让前端工作更快的终端命令
五个终端命令涵盖 ripgrep、fzf 和 fd,帮助前端开发者更快地搜索代码库、浏览文件并快速找回构建命令。
何时需要自定义日期选择器(以及何时不需要)
对比原生 HTML 日期输入与 React Aria、Radix 等自定义日历组件,帮助选择适合日期范围选择场景的工具。
2025 年应该停止在 JavaScript 中使用的做法
梳理过时的 JavaScript 模式,以原生 ESM、现代 CSS、Temporal API 及当前语言特性替代,从而交付更快、更精简的代码。
Standard Schema 详解:无供应商锁定的灵活验证
Standard Schema 定义了共享的 TypeScript 接口,使 Zod、Valibot 和 ArkType 无需重写适配器即可与兼容工具协同工作。
修复 JavaScript 中的 'Maximum call stack size exceeded' 错误
调试 JavaScript 中的栈溢出错误,修复 React 和 Node.js 中的无限递归问题,并运用迭代方案防止调用栈崩溃。
现代 CSS 特性让你不再需要 JavaScript
CSS容器查询、滚动驱动动画、Popover API以及has选择器,现已可在无需JavaScript的情况下实现交互式UI模式。
使用 Node.js 构建终端界面
使用 Ink、neo-blessed 及 raw mode 原语构建 Node.js 终端界面,实现支持键盘交互的 CLI 仪表盘与实时数据展示。
测试中的时间处理:异步和延迟的可靠模式
使用 fake timer 模式修复 Jest、Vitest、React Testing Library、Playwright 和 Cypress 中因计时器与异步时序引发的不稳定测试问题。
每个开发者都应该掌握的 10 个 Git 命令
介绍十个核心 Git 命令,包括 git switch、git restore 和 git reflog,帮助开发者自信地管理日常工作流。
使用 Cron 作业自动化重复任务
介绍使用正确语法、绝对路径、日志记录及防重叠机制调度 cron 作业脚本,并涵盖 systemd timers 与 Kubernetes CronJobs 的使用指南。
Next.js 中的智能缓存:部分渲染与可复用组件
当服务端组件自主管理缓存策略时,Next.js App Router 的 Data Cache、Full Route Cache 与 Partial Prerendering 行为将更具可预测性。
GitHub Actions 调试技巧与窍门
通过启用调试日志、使用 actionlint 验证工作流、借助 nektos/act 在本地测试以及正确限定制品范围,可修复失败的 CI/CD 流水线。
JavaScript 陷阱:你会反复遇到的五个问题
通过识别破坏生产代码的常见模式,避免类型强制转换,this 绑定,变量提升,异步误用及意外数据变更等 JavaScript 陷阱。
使用 WASM 运行高性能代码
WebAssembly 3.0 引入了 GC、线程、Memory64 和 SIMD 支持,介绍如何组织 WASM 模块以优化前端计算热点的性能。