Simon Willison's Weblog: progressive-enhancement

Quoting Rodrigo Arias Mallo

2025-11-30T14:32:11+00:00

The most annoying problem is that the [GitHub] frontend barely works without JavaScript, so we cannot open issues, pull requests, source code or CI logs in Dillo itself, despite them being mostly plain HTML, which I don't think is acceptable. In the past, it used to gracefully degrade without enforcing JavaScript, but now it doesn't.

— Rodrigo Arias Mallo, Migrating Dillo from GitHub

Tags: browsers, github, progressive-enhancement

Building Websites With Lots of Little HTML Pages

2025-03-10T00:38:32+00:00

Building Websites With Lots of Little HTML Pages

Jim Nielsen coins a confusing new acronym - LLMS for (L)ots of (L)ittle ht(M)l page(S). He's using this to describe his latest site refresh which makes extensive use of cross-document view transitions - a fabulous new progressive enhancement CSS technique that's supported in Chrome and Safari (and hopefully soon in Firefox).

With cross-document view transitions getting broader and broader support, I’m realizing that building in-page, progressively-enhanced interactions is more work than simply building two HTML pages and linking them.

Jim now has small static pages powering his home page filtering interface and even his navigation menu, with CSS view transitions configured to smoothly animate between the pages. I think it feels really good - here's what it looked like for me in Chrome (it looked the same both with and without JavaScript disabled):

Watching the network panel in my browser, most of these pages are 17-20KB gzipped (~45KB after they've decompressed). No wonder it feels so snappy.

I poked around in Jim's CSS and found this relevant code:

@view-transition {
  navigation: auto;
}

.posts-nav a[aria-current="page"]:not(:last-child):after {
  border-color: var(--c-text);
  view-transition-name: posts-nav;
}

/* Old stuff going out */
::view-transition-old(posts-nav) {
  animation: fade 0.2s linear forwards;
  /* https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/ */
  height: 100%;
}

/* New stuff coming in */
::view-transition-new(posts-nav) {
  animation: fade 0.3s linear reverse;
  height: 100%;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

Jim observes:

This really feels like a game-changer for simple sites. If you can keep your site simple, it’s easier to build traditional, JavaScript-powered on-page interactions as small, linked HTML pages.

I've experimented with view transitions for Datasette in the past and the results were very promising. Maybe I'll pick that up again.

Bonus: Jim has a clever JavaScript trick to avoid clicks to the navigation menu being added to the browser's history in the default case.

Via lobste.rs

Tags: css, progressive-enhancement, view-transitions

Quoting GOV.UK service manual

2024-09-29T00:32:10+00:00

If you use a JavaScript framework you should:

be able to justify with evidence, how using JavaScript would benefit users

be aware of any negative impacts and be able to mitigate them

consider whether the benefits of using it outweigh the potential problems

only use the framework for parts of the user interface that cannot be built using HTML and CSS alone

design each part of the user interface as a separate component

Having separate components means that if the JavaScript fails to load, it will only be that single component that fails. The rest of the page will load as normal.

— GOV.UK service manual

Tags: javascript, progressive-enhancement, gov-uk

Reckoning

2024-08-18T16:37:41+00:00

Reckoning

Alex Russell is a self-confessed Cassandra - doomed to speak truth that the wider Web industry stubbornly ignores. With this latest series of posts he is spitting fire.

The series is an "investigation into JavaScript-first frontend culture and how it broke US public services", in four parts.

In Part 2 — Object Lesson Alex profiles BenefitsCal, the California state portal for accessing SNAP food benefits (aka "food stamps"). On a 9Mbps connection, as can be expected in rural parts of California with populations most likely to need these services, the site takes 29.5 seconds to become usefully interactive, fetching more than 20MB of JavaScript (which isn't even correctly compressed) for a giant SPA that incoroprates React, Vue, the AWS JavaScript SDK, six user-agent parsing libraries and a whole lot more.

It doesn't have to be like this! GetCalFresh.org, the Code for America alternative to BenefitsCal, becomes interactive after 4 seconds. Despite not being the "official" site it has driven nearly half of all signups for California benefits.

The fundamental problem here is the Web industry's obsession with SPAs and JavaScript-first development - techniques that make sense for a tiny fraction of applications (Alex calls out document editors, chat and videoconferencing and maps, geospatial, and BI visualisations as apppropriate applications) but massively increase the cost and complexity for the vast majority of sites - especially sites primarily used on mobile and that shouldn't expect lengthy session times or multiple repeat visits.

There's so much great, quotable content in here. Don't miss out on the footnotes, like this one:

The JavaScript community's omertà regarding the consistent failure of frontend frameworks to deliver reasonable results at acceptable cost is likely to be remembered as one of the most shameful aspects of frontend's lost decade.

Had the risks been prominently signposted, dozens of teams I've worked with personally could have avoided months of painful remediation, and hundreds more sites I've traced could have avoided material revenue losses.

Too many engineering leaders have found their teams beached and unproductive for no reason other than the JavaScript community's dedication to a marketing-over-results ethos of toxic positivity.

In Part 4 — The Way Out Alex recommends the gov.uk Service Manual as a guide for building civic Web services that avoid these traps, thanks to the policy described in their Building a resilient frontend using progressive enhancement document.

Tags: accessibility, alex-russell, government, html, javascript, progressive-enhancement, web-performance, gov-uk

My approach to HTML web components

2024-04-30T11:02:48+00:00

My approach to HTML web components

Some neat patterns here from Jeremy Keith, who is using Web Components extensively for progressive enhancement of existing markup.

The reactivity you get with full-on frameworks [like React and Vue] isn’t something that web components offer. But I do think web components can replace jQuery and other approaches to scripting the DOM.

Jeremy likes naming components with their element as a prefix (since all element names must contain at least one hyphen), and suggests building components under the single responsibility principle - so you can do things like <button-confirm><button-clipboard><button>....

He configures these buttons with data- attributes and has them communicate with each other using custom events.

Something I hadn't realized is that since the connectedCallback function on a custom element is fired any time that element is attached to a page you can fetch() and then insertHTML content that includes elements and know that they will initialize themselves without needing any extra logic - great for the kind of pattern encourages by systems such as HTMX.

Tags: javascript, jeremy-keith, progressive-enhancement, web-components

How we built JSR

2024-04-12T15:49:03+00:00

How we built JSR

Really interesting deep dive by Luca Casonato into the engineering behind the new JSR alternative JavaScript package registry launched recently by Deno.

The backend uses PostgreSQL and a Rust API server hosted on Google Cloud Run.

The frontend uses Fresh, Deno’s own server-side JavaScript framework which leans heavily in the concept of “islands”—a progressive enhancement technique where pages are rendered on the server and small islands of interactivity are added once the page has loaded.

Via Hacker News

Tags: javascript, postgresql, progressive-enhancement, rust, deno

HTML Web Components: An Example

2023-11-17T16:33:24+00:00

HTML Web Components: An Example

Jim Nielsen provides a clear example illustrating the idea of the recently coined "HTML Web Components" pattern. It's Web Components as progressive enhancement: in this example a <user-avatar> custom element wraps a regular image, then JavaScript defines a Web Component that enhances that image. If the JavaScript fails to load the image still displays.

Via Hacker News

Tags: javascript, progressive-enhancement, web-components

Responsive Components: a Solution to the Container Queries Problem

2018-02-27T13:21:27+00:00

Responsive Components: a Solution to the Container Queries Problem

Philip Walton uses Chrome’s new ResizeObserver API (best described as document.onresize for elements, currently a W3C Editor’s Draft, not yet supported by other browsers) to implement a media-query style mechanism for applying CSS based on the size of the parent container. This is really clever. In the absence of ResizeObserver (which can be polyfilled) it can fall back to showing the narrowest design, which is probably best for mobile anyway. Desktop browsers are better equipped to run the polyfill.

Via @philwalton

Tags: css, mediaqueries, progressive-enhancement, polyfill

What are all the advantages of jQuery?

2010-10-27T16:35:00+00:00

My answer to What are all the advantages of jQuery? on Quora

jQuery's API is astonishingly well designed. It's extremely consistent once you learn its rules (e.g. methods often take one argument to read a value and two arguments to set one, e.g. .css(), .attr(), .width(), .height()) and its functionality is so complete that the last few major releases of the library have hardly added any new methods at all.

jQuery's performance improves noticeably with every release, with the API staying exactly the same.

jQuery plays extremely well with other code. It doesn't extend any built-in JavaScript objects, and it only adds one symbol to the global namespace (the jQuery symbol) - it aliases $ as well, but you can undo that with jQuery.noConflict().

Even discounting browser differences, jQuery is an enormous improvement on the DOM. It makes DOM manipulation extremely easy, which means it's much easier to implement things using progressive enhancement - taking existing DOM elements on the page and enhancing their behaviour.

Tags: jquery, progressive-enhancement, quora

Official Google Webmaster Blog: A proposal for making AJAX crawlable

2009-10-08T17:52:31+00:00

Official Google Webmaster Blog: A proposal for making AJAX crawlable

It's horrible! The Google crawler would map url#!state to url?_escaped_fragment_=state, then expect your site to provide rendered HTML that reflects that state (they even go as far as to suggest running a headless browser within your web server to do this). Just stick to progressive enhancement instead, it's far less hideous. It looks like the proposal may have originated with the GWT team.

Tags: ajax, crawling, google, gwt, javascript, progressive-enhancement, search-engines, seo

Capital Radio's London Guide

2008-08-29T01:48:30+00:00

Capital Radio's London Guide

Worth pointing out: the search / map interface on this page is one of the best examples of progressive enhancement I’ve ever seen. Try disabling JavaScript and see what happens. It seems like most developers just can’t be bothered with this kind of attention to detail these days, which disappoints me.

Tags: accessibility, capitalradio, google-maps, javascript, londonguide, progressive-enhancement, unobtrusive-javascript

SWFUpload

2007-05-16T16:12:45+00:00

SWFUpload

Fantastic Flash widget for handling multiple file uploads with progress indicators; degrades gracefully to a regular HTML upload field.

Tags: flash, gracefuldegradation, progressive-enhancement, swfupload, upload

Neighbourhood Fix-It

2007-02-17T17:05:24+00:00

Neighbourhood Fix-It

Report problems to your council across the UK. The most detailed Ordinance Survey maps anywhere online, and a superb example of progressive enhancement in action—the maps work without JavaScript, and the site even works without images!

Tags: barcamplondon2, javascript, maps, matthew-somerville, mysociety, progressive-enhancement