OpenReplay 博客
选择 JavaScript 模板引擎
比较 EJS、Handlebars、Pug 和 Nunjucks 在 Node.js 中的服务器端 HTML 渲染,涵盖语法、适用场景和安全提示。
五个可以用 CSS 替代的 Sass 特性
五个可用现代 CSS 替代的 Sass 功能:自定义属性、嵌套、color-mix()、@layer 和 @property。
如何在 React 中嵌入视频
在 React 中嵌入视频:自托管文件用 HTML5 video,YouTube 用 iframe,包含 autoplay 修复、响应式尺寸和 ReactPlayer 选择。
在浏览器中使用 Web Audio API 录制音频
使用Web Audio API在浏览器录音:通过getUserMedia获取麦克风输入,按需处理,并用MediaRecorder编码保存。
Web 端邮箱混淆技术
网页邮箱混淆技巧:比较HTML实体编码、JavaScript、应避免的CSS、联系表单和Cloudflare保护。
你可能错过的现代 SQLite 特性
现代SQLite功能解析:JSONB、STRICT表、RETURNING、支持OPFS的WASM和WAL模式,提升性能与并发能力。
使用 es-toolkit 处理日常 JavaScript 工具函数
es-toolkit 提供类型化、可 tree-shake 的 JavaScript 工具函数,作为轻量 Lodash 替代,可减小打包体积并便于迁移。
创建纯 CSS 工具提示
用 ::after、data-tooltip 和不透明度过渡实现纯 CSS 提示框,并说明 focus-visible 支持及可访问性限制。
相比 Fetch,Axios 仍然能为你提供什么
Axios vs Fetch:了解 Axios 在拦截器、自动 HTTP 错误处理、共享实例、上传进度和超时设置上的优势。
使用 boneyard 自动生成骨架屏
boneyard-js在开发时从真实组件布局自动生成skeleton loader,支持响应式.bones.json文件和Vite集成。
Kubernetes 实用概览
Kubernetes 概览:架构、Pods、Deployments、Services、Ingress 和 ConfigMaps,帮助在集群中运行并扩展 Web 应用。
如何使用 Stylelint 对 CSS 进行 Lint 检查
Stylelint CSS 检查的配置、规则和命令,帮助发现错误、统一规范,并集成 Prettier 和 CI。
用 npmx 浏览 npm 包的全新方式
npmx将npm包调研整合到一处,支持并排比较、包体积、模块格式、依赖关系和漏洞检查,方便快速评估。
使用 skills.sh 为 AI 智能体添加可复用能力
skills.sh 为 AI 代理添加可复用 skills,涵盖 SKILL.md、渐进式披露、CLI 安装和与 MCP 的比较。
JavaScript 打包工具的现状
2026年JavaScript打包工具对比:Webpack、Vite、Turbopack、Rspack、esbuild、Rollup和Parcel的定位与选择。
为代码块创建复制按钮
使用 Clipboard API 为代码块添加复制按钮,结合 textContent、try/catch、视觉反馈和可访问的 aria-label。
如何使用 OpenNext 在 Vercel 之外部署 Next.js
在 Vercel 之外部署 Next.js,可用自托管或 OpenNext 运行 AWS 和 Cloudflare。对比 Node.js、Docker 和新的 Adapter API。
一种应对 npm 供应链攻击的简单防御方法
通过 ignore-scripts=true、min-release-age 和 CI 检查在运行前阻止 npm 供应链攻击,及时发现新的安装脚本。
使用 ::search-text 美化 Ctrl+F 搜索结果
使用::search-text和:current为浏览器页面内搜索结果设置样式。涵盖CSS支持、可用属性及Chromium限制。
在 WordPress 中创建自定义文章类型
使用register_post_type、show_in_rest、插件式设置以及正确的归档和单页模板创建WordPress自定义文章类型。
使用 CSS 创意样式化列表的方法
使用语义化HTML、::marker、::before、计数器和@counter-style来美化CSS列表,实现自定义项目符号和编号,并兼顾可访问性。
在 Node.js 中防止路径遍历攻击
通过path.resolve和path.sep范围检查防止Node.js中的路径穿越,并用基于ID的文件查找替代用户输入。
如何从网络选项卡复制 API 请求
从 Chrome、Edge 或 Firefox 的 Network 选项卡复制 API 请求,使用 cURL、fetch 和 HAR 导出重放并排查错误。
使用 JavaScript Builder 模式灵活创建对象
JavaScript Builder Pattern 示例:逐步创建对象,支持流式 API、方法链、验证、默认值,以及更安全的 API 请求构建。