OpenReplay 博客
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 标签页及布局偏移调试,助力性能优化与工作流改进。
认识 UnJS:框架无关的 JavaScript 工具集
介绍 UnJS 生态系统,解析 Nitro、h3、ofetch 和 unplugin 如何在各类运行时中独立处理 JavaScript 基础设施。
每个开发者都应该掌握的 npm 核心命令
npm CLI 涵盖依赖审计、脚本执行与传递依赖版本锁定等核心功能,合理运用这些命令可有效调试依赖树结构,并针对已知安全漏洞进行修复处理。
OpenUI 如何塑造 Web 组件
OpenUI 通过 Popover API、Invoker Commands API 和可定制 select CSS 规范 UI 模式,降低自定义 JavaScript 开销。
如何修复 'Cannot use import statement outside a module' 错误
针对 Node.js、浏览器及 Jest 中的 'cannot use import statement outside a module' 错误,通过正确诊断模块系统不匹配问题加以修复。
如何在 Svelte 中懒加载组件
通过动态导入和条件渲染实现 Svelte 组件的懒加载,在 SvelteKit 和基于 Vite 的项目中保持初始打包体积精简。
Chrome 的本地网络访问 (LNA) 权限详解
Chrome 本地网络访问权限用于阻止公共网站访问本地设备,介绍触发 LNA 提示的条件及在 Web 应用中的处理方式。
浏览器和终端中的 ASCII 艺术
介绍像素亮度到字符的映射原理,以及 Unicode 盲文符号与块元素对 ASCII 艺术的扩展,并说明 Canvas、WebGL 和 ANSI 终端的渲染方式。
响应式模型对比:React、Vue、Angular、Svelte
对比 React、Vue、Angular 与 Svelte 的响应式实现方式,涵盖粗粒度渲染周期、细粒度 signals 机制及编译器驱动的 DOM 更新策略。