OpenReplay 博客
深入 AST：工具如何理解代码
抽象语法树是 ESLint、Prettier 和 Babel 的核心驱动力,介绍解析器如何构建可遍历的节点,从而支撑代码检查、格式化与代码转换。
Valibot 入门指南
介绍在 TypeScript 中使用 Valibot 验证运行时数据,涵盖 schema 定义、类型推断与可组合 pipeline 构建,并保持较小的打包体积。
什么时候你可能需要在 JavaScript 中使用 BigInt?
JavaScript 的 BigInt 可解决超出安全数值范围的整数精度静默丢失问题,涵盖大型 ID 及 WebAssembly 64 位值等场景。
使用 Bun 搭建 TypeScript 应用
使用 Bun 搭建 TypeScript 项目,跳过构建步骤,通过简洁的运行时与包管理器工作流直接运行 TypeScript 文件。
将 Git 仓库转换为 LLM 就绪文本:快速指南
使用 Gitingest、Repomix 或 repo2txt,可将 Git 仓库转为结构化的 LLM 就绪文本,经过滤的代码库可直接输入 AI 模型,避免 token 浪费。
在 Web 应用中使用 Battery Status API
Battery Status API 可向 JavaScript 暴露电池电量与充电状态,用于构建自适应 Web 应用,同时需关注浏览器兼容性与隐私限制。
使用 Tailwind CSS 插件添加动画
梳理为 Tailwind CSS 添加动画的多种方案,涵盖内置工具类、插件以及 v4 自定义 keyframes,并兼顾无障碍访问需求。
Node.js 中的安全用户输入处理
结合 Zod、参数化查询与显式参数校验,可有效阻止 Node.js 中的 SQL 注入、原型污染及批量赋值攻击。
HTML Sanitizer API 初探
HTML Sanitizer API 将 XSS 防护能力内置于浏览器本身,对比安全方法与 DOMPurify 降级方案,并介绍如何有效配置允许列表。
现代 Web 应用的最佳 CDN
对比 Cloudflare Workers、Fastly Instant Purge、AWS CloudFront 与 Akamai Ion,为前端架构和边缘逻辑需求选型合适的 CDN。
如何通过文本查找 DOM 元素
介绍使用 querySelector 过滤、TreeWalker 遍历及 document.evaluate 的 XPath,实现按文本内容选取 DOM 元素。
Laravel Livewire 入门指南
通过编写 PHP 组件与 Blade 模板,使用 Livewire 构建动态 Laravel 界面,自动处理表单验证与响应式 DOM 更新。
探索 CSS random() 函数
CSS random() 函数可在样式表中原生生成数值,借助语法、缓存键和回退机制实现视觉变化,无需依赖 JavaScript。
使用 htmx SSE 扩展实现实时用户体验
借助 SSE 扩展、服务器发送事件和 HTML 属性,无需任何 JavaScript 框架即可为 htmx 项目添加实时 UI 功能。
使用现代 CSS 为 Select 元素添加样式
通过 appearance none 与 base-select 为 select 元素设置样式,配合 clip-path 和 focus spans,以现代 CSS 实现跨浏览器渐进增强。
为什么在 TypeScript 中使用 `!` 时应该谨慎
TypeScript 非空断言运算符只是让编译器沉默,并不提供运行时保护,会将编译期错误转变为难以追踪的空值崩溃。
CSS 相对颜色语法详解
CSS 相对颜色语法允许开发者以单一原始颜色为基础,借助 OKLCH 及其他现代颜色函数,派生出对应的色调、明暗变体与透明度变体。
使用 Promise.try 编写更简洁的异步链
Promise.try 可将同步抛出的异常转为 rejection,从而保持异步链的整洁。本文对比多种替代方案,并将其应用于条件数据加载模式。
什么是 Babylon.js?快速入门介绍
Babylon.js 是基于 WebGL 和 WebGPU 的开源 JavaScript 3D 引擎,介绍其与 Three.js 的对比及可构建的内容。
理解 CSS 中的动态视口单位
CSS 视口单位 svh、lvh 和 dvh 可修复移动端因浏览器界面遮挡导致的布局裁剪问题,针对响应式与全屏布局选择合适的单位至关重要。
如何保护 WordPress 网站安全
通过更新插件、启用双因素认证、正确设置文件权限以及部署 Cloudflare 或 Wordfence 等 WAF,可有效保障 WordPress 网站安全。
选择原生 JavaScript 而非框架的理由
评估原生 JavaScript、Web Components、ES modules 及浏览器原生 API 在特定前端项目中优于 React 或 Vue 的场景。
HTTP 响应中包含什么?
HTTP 响应由状态行、响应头和响应体三部分组成,理解每个部分有助于在 DevTools 中调试并更有效地处理 fetch 请求的结果。
Chrome DevTools 中的隐藏功能
介绍 Chrome DevTools 的进阶功能,涵盖 CSS Overview、Logpoints、Coverage 标签页及布局偏移调试,助力性能优化与工作流改进。