From the OpenReplay Blog
Exploring the CSS random() Function
The CSS random() function generates native numeric values in stylesheets, replacing JavaScript for visual variation using syntax, caching keys, and fallbacks.
Styling Select Elements with Modern CSS
Style select elements with appearance none and base-select, apply clip-path and focus spans, and progressively enhance across browsers with modern CSS.
Real-Time UX with the htmx SSE Extension
Add real-time UI to htmx projects using the SSE extension, server-sent events, and HTML attributes alone, with no JavaScript framework required.
Why You Should Be Careful with `!` in TypeScript
The TypeScript non-null assertion operator silences the compiler without adding runtime protection, turning compile-time errors into hard-to-trace null crashes.
Relative Color Syntax in CSS Explained
CSS relative color syntax lets you derive tints, shades, and opacity variants from a single origin color using OKLCH and other modern color functions.
Writing Cleaner Async Chains with Promise.try
Promise.try catches synchronous throws as rejections, keeping async chains clean. Compare it to alternatives and apply it to conditional data loading patterns.
What Is Babylon.js? A Quick Introduction
Babylon.js is an open-source JavaScript 3D engine built on WebGL and WebGPU. See how it compares to Three.js and what you can build with it.
Understanding Dynamic Viewport Units in CSS
CSS viewport units svh, lvh, and dvh fix mobile layout clipping from browser chrome. Choose the right unit for responsive and full-screen layouts.
How to Secure a WordPress Site
Secure your WordPress site by updating plugins, enabling 2FA, setting file permissions correctly, and deploying a WAF like Cloudflare or Wordfence.
The Case for Vanilla JavaScript Over Frameworks
Evaluate when vanilla JavaScript, Web Components, ES modules, and native browser APIs outperform React or Vue for your specific frontend project needs.
What's Inside an HTTP Response?
HTTP responses contain a status line, headers, and a body. Knowing each part helps you debug in DevTools and handle fetch results more effectively.
Meet UnJS: Framework-Agnostic JavaScript Tools
Meet the UnJS ecosystem and understand how tools like Nitro, h3, ofetch, and unplugin handle JavaScript infrastructure across runtimes independently.
Hidden Gems in Chrome DevTools
Go beyond the basics with Chrome DevTools features like CSS Overview, Logpoints, Coverage tab, and Layout Shift debugging to improve performance and workflow.
How OpenUI Is Shaping Web Components
OpenUI standardizes UI patterns via the Popover API, Invoker Commands API, and customizable select CSS to reduce custom JavaScript overhead.
Essential npm Commands Every Developer Should Know
The npm CLI covers dependency auditing, script execution, and transitive dependency pinning. Apply these commands to debug trees and fix vulnerabilities.
How to Lazy Load Components in Svelte
Lazy load Svelte components using dynamic imports and conditional rendering to keep initial bundles lean across SvelteKit and Vite-based projects.
How to Fix 'Cannot use import statement outside a module'
Fix the cannot use import statement outside a module error in Node.js, browsers, and Jest by diagnosing your module system mismatch correctly.
Chrome's Local Network Access (LNA) Permission Explained
Chrome Local Network Access permission gates public sites from reaching local devices. See what triggers the LNA prompt and how to handle it in your web app.
ASCII Art in the Browser and Terminal
How pixel brightness maps to characters, how Unicode Braille and block elements extend ASCII art, and how Canvas, WebGL, and ANSI terminals render it all.
How to Type API Responses in TypeScript
Typing API responses in TypeScript with interfaces, Zod schemas, and OpenAPI generation prevents runtime data mismatches and keeps types accurate.
Reactivity Models Compared: React, Vue, Angular, Svelte
Compare how React, Vue, Angular, and Svelte handle reactivity, from coarse-grained render cycles to fine-grained signals and compiler-driven DOM updates.
Ripple: A New TypeScript UI Framework to Watch
Ripple is a compiler-driven TypeScript UI framework that eliminates virtual DOM diffing and manual dependency tracking with fine-grained reactive primitives.
How to Implement Drag and Drop in Svelte
Implement drag and drop in Svelte using the native HTML5 API or svelte-dnd-action to handle animations, touch support, and multi-list boards.
Use Cases for JavaScript Generators
JavaScript generators produce values on demand for lazy iteration, async pagination, and composable pipelines using the Iterator Helpers API.