OpenReplay 博客
认识 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 的差异,修复移动端视口裁剪问题,并在合适场景下应用各单位以实现稳定的全高度布局。
JavaScript 生成器的使用场景
JavaScript 生成器按需产出值,适用于惰性迭代、异步分页以及基于 Iterator Helpers API 构建可组合的数据管道。
如何在 TypeScript 项目中组织类型定义
在 TypeScript 项目中有效组织类型定义,通过明确的同置策略,覆盖内联文件、共享目录与 ambient 声明文件三类场景。
MCP Apps:为 AI 对话添加交互式 UI
MCP Apps 支持在 AI 对话中嵌入交互式 UI 组件,介绍 MCP 服务器如何通过 ext-apps SDK 标准渲染仪表盘与表单。
使用 Koa 构建你的第一个 API
通过配置路由、解析 JSON 请求体并应用中间件级联模型,使用 Koa 构建 REST API,实现 GET 与 POST 端点的处理。
在 VS Code 中使用 Error Lens 更好地查看错误
Error Lens 将 ESLint 和 TypeScript 的诊断信息内联显示于 VS Code 中,助前端开发者无需离开编辑器即可快速发现并修复错误。
何时使用 user-select: none(以及何时它会成为 UX/可访问性陷阱)
深入辨析 CSS user-select: none 在交互控件中的合理用途,以及它对可访问性、翻译工具和依赖文本选择的用户造成的潜在危害。
如何测量 JavaScript 性能
借助 DevTools、Performance API 和 Core Web Vitals 分析 JavaScript 执行,识别性能瓶颈并准确测量真实用户的 INP。
虚拟滚动:构建高性能界面
虚拟滚动只渲染可见的 DOM 节点,使大型数据集保持流畅。介绍窗口化、overscan 机制以及 TanStack Virtual 等库的工作原理。
OpenClaw:一个新的开源 AI 助手
OpenClaw 是可自托管的 AI 智能体,可在自有硬件上执行 shell 命令、控制浏览器,并集成 Slack、Telegram 和 WhatsApp。
为 Web 开发者解释 Streams
通过 Web Streams API、ReadableStream 和 TransformStream 对 fetch 响应逐块处理,可降低内存压力并提升性能。
键值数据库(如 Redis、Memcached)的工作原理
Redis、Memcached 等键值数据库基于内存哈希表实现快速查找,广泛用于前端后端系统的缓存与会话存储。
使用 abs() 处理 CSS 中的绝对值
CSS 的 abs() 函数可安全处理带符号的自定义属性,适用于间距、动画时序和布局计算,无需借助 JavaScript 实现。