From the OpenReplay Blog
How to Persist State in Local Storage with React
Persist React state in localStorage with a reusable hook: lazy useState init, JSON try/catch, SSR guards, and cross-tab sync.
Understanding CIDR Notation and IP Ranges
CIDR notation, IP ranges, and subnet math explained for IPv4 and IPv6. See how to read prefixes, size networks, and avoid overlap and open rules.
In-Browser Editing with contentEditable
Contenteditable editing in the browser: turn on inline text editing, capture input events, handle execCommand limits, and prevent XSS.
5 JavaScript APIs Every Frontend Developer Should Know
5 native JavaScript APIs for frontend developers: IntersectionObserver, ResizeObserver, AbortController, Clipboard API, and View Transitions.
How to Fix 'ERR_TOO_MANY_REDIRECTS'
Fix ERR_TOO_MANY_REDIRECTS with a diagnosis-first guide to redirect loops, HTTP to HTTPS mismatches, Cloudflare SSL, and proxy settings.
Using AI Agents to Automate Repetitive Project Tasks
Use Claude Code skills to automate repetitive project tasks, capture setup and deploy steps, and keep team workflows versioned and reliable.
Testing API-Driven Components in Storybook
Use MSW in Storybook 10 to test API-driven components with loading, error, empty, and success states, then turn stories into component tests.
Common CSS Shorthand Properties
CSS shorthand cheatsheet for margin, padding, border, font, background, and flex, with reset rules, value order, and silent bug fixes.
Doing Real Geometry in the Browser with Geometric.js
Geometric.js brings polygon intersection, bounds, point-in-polygon tests, and path interpolation to browser charts, maps, SVG, and Canvas.
3 Type Systems That Aren't TypeScript
Compare JSDoc + @ts-check, ReScript, and Flow as TypeScript alternatives for JavaScript, with trade-offs on soundness, build steps, and adoption.
MDN Is Now an MCP Server
MDN’s MCP server gives AI coding agents live search, documentation, and browser-compatibility data, plus setup steps and privacy caveats.
What bunx Is and When to Use It
bunx explained: how Bun runs npm binaries without a global install, when to use --bun, and when npx is still the safer choice.
How to Truncate Text in CSS
Truncate text in CSS with text-overflow: ellipsis for one line or line-clamp for multiple lines, plus flex and grid fixes.
5 Useful Bookmarklets for Developers
Five useful bookmarklets for developers: live-edit pages, debug layout, reveal password fields, pick colors, and inject eruda mobile DevTools.
Testing Svelte 5 Components with Vitest
Test Svelte 5 components with Vitest using mount, testing-library, or browser mode, plus the right setup for runes, effects, and snippets.
Getting Started with npm Workspaces
npm workspaces setup, commands, and limits: manage a monorepo, link sibling packages, and know when to add Turborepo or Nx.
How to Back Up a WordPress Site
Back up a WordPress site with mysqldump, tar, cron, and rclone. Covers files, database, off-site storage, and restore testing.
Automatic Code Reviews with CODEOWNERS
Set up GitHub CODEOWNERS, avoid silent failures, and enforce code review with the right patterns, permissions, and branch protection.
Reviewing AI-Generated Code with Difftastic
Use Difftastic to review AI-generated code with structural diffs, install it in git, and isolate behavior changes from reformatting noise.
3 JavaScript Gotchas Explained
Three JavaScript gotchas explained: floating-point math, NaN checks, and await in loops, with the right fixes for each.
Fetching Data Inside React Server Components
Fetch data in React Server Components with async functions, understand Next.js 15/16 caching defaults, and avoid waterfalls with Promise.all.
Browser Tab Synchronization with BroadcastChannel
BroadcastChannel syncs tabs in real time with structured-clone messages, cleanup, fallback support, and practical patterns for auth, cart, and theme state.
Using Text Expanders for Git, PRs, and AI Prompts
Espanso snippets for Git, PRs, and AI prompts: use shell, clipboard, and cursor hints to build context-aware text expanders.
How to Animate display: none Without JavaScript Hacks
Animate display none with CSS using allow-discrete and @starting-style, plus dialog popover overlay handling and browser support notes.