The browser is smarter than you think

Modern browsers are remarkably capable. But years of 'we need full control' thinking have led developers to reach for JavaScript for things the browser does better, faster, and more accessibly on its own.

Native Form Validation

<input
    type="email"
    required
    minlength="5"
    maxlength="255"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
/>

Browser validation: works without JavaScript, accessible by default, shows localized error messages in the user's language, doesn't require an event listener. Use it before you write validation logic.

Intersection Observer

Lazy loading images? Infinite scroll? Animating elements when they enter the viewport? Before 2018 you needed scroll event listeners with manual calculations. Now:

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
});

document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));

No scroll events. No getBoundingClientRect() calculations. No performance problems.

HTTP Caching

Cache-Control: public, max-age=31536000, immutable

For static assets with hashed filenames, this single header tells the browser to cache the file for a year and never revalidate it. Your CDN serves it. The browser never asks the server again. No JavaScript required.

The dialog Element

Modals, alerts, confirmation dialogs—the <dialog> element handles these natively with built-in focus management and accessibility:

const dialog = document.getElementById('confirm-dialog');
dialog.showModal(); // Opens modal with proper focus trap
dialog.close();     // Closes and returns focus

The Pattern

Before adding JavaScript for a browser interaction problem, ask: does the platform already have a solution? The browser is not your enemy. It's on your side.