OpenReplay 博客
探索 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 更新策略。
如何在 TypeScript 中为 API 响应添加类型
使用接口、Zod schemas 及 OpenAPI 生成工具为 API 响应添加类型,可防止运行时数据不匹配,并确保类型始终准确。
如何在 Svelte 中实现拖放功能
介绍如何使用原生 HTML5 API 或 svelte-dnd-action 在 Svelte 中实现拖放功能,涵盖动画、触摸支持及多列表看板。
Ripple:一个值得关注的新型 TypeScript UI 框架
Ripple 是一款编译器驱动的 TypeScript UI 框架,通过细粒度响应式原语消除虚拟 DOM 差异比对与手动依赖追踪。
当 100vh 说谎时:修复移动端视口问题
通过理解 svh、dvh、lvh 与 vh 的差异,修复移动端视口裁剪问题,并在合适场景下应用各单位以实现稳定的全高度布局。