Pattern: Progressive enhancement for resilient web apps

Apps built with JavaScript-first approach break completely when JS fails to load, is blocked, or errors out.

Build core functionality in HTML/CSS, enhance with JavaScript:

1. Core experience works without JS:

<!-- Form works without JS: -->
<form action="/search" method="GET">
<input name="q" type="search" />
<button type="submit">Search</button>
</form>

<!-- JS enhances with autocomplete: -->
<script>
const form = document.querySelector('form');
// Add autocomplete, prevent full page reload, etc.
</script>

1. CSS features with fallbacks:

.grid {
display: flex; flex-wrap: wrap; / Fallback /
}
@supports (display: grid) {
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

1. Image loading:

<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="Descriptive text"
loading="lazy"
/>

1. Server-side rendering + hydration:

- Core content rendered as HTML (works immediately)
- JS hydrates for interactivity (enhances when loaded)
- If JS fails, content is still readable

Benefits:

• Works on slow connections (HTML loads first)
• Works with JS blocked (corporate firewalls, errors)
• Better SEO (content in HTML)
• Better accessibility (semantic HTML)
• Faster first paint (no JS needed for content)

Progressive enhancement ensures your app works for everyone, then gets better for those with modern browsers and fast connections.