Jeremy Keith's Blog, page 13

Hosting

I haven���t spoken at any conferences so far this year, and I don���t have any upcoming talks. That feels weird. I���m getting kind of antsy to give a talk.

I suspect my next talk will have something to do with HTML web components. If you’re organising an event and that sounds interesting to you, give me a shout.

But even though I���m not giving a conference talk this year, I���m doing a fair bit of hosting. There was the lovely Patterns Day back in March. And this week I���m off to Amsterdam to be one of the hosts of CSS Day. As always, I���m very much looking forward to that event.

Once that���s done, it���ll be time for the biggie. UX London is just two weeks away���squee!

There are still tickets available. If you haven���t got yours yet, I highly recommend getting it before midnight on Friday���that���s when the regular pricing ends. After that, it���ll be last-chance passes only.

Browser support

There was a discussion at Clearleft recently about browser support. Rich has more details but the gist of it is that, even though we were confident that we had a good approach to browser support, we hadn���t written it down anywhere. Time to fix that.

This is something I had been thinking about recently anyway���see my post about Baseline and progressive enhancement���so it didn���t take too long to put together a document explaining our approach.

You can find it at browsersupport.clearleft.com

We���re not just making it public. We���re releasing it under a Creative Commons attribution license. You can copy this browser-support policy verbatim, you can tweak it, you can change it, you can do what you like. As long you include a credit to Clearleft, you���re all set.

I think this browser-support policy makes a lot of sense. It certainly beats trying to browser support to specific browsers or version numbers:

We don���t base our browser support on specific browser names and numbers. Instead, our support policy is based on the capabilities of those browsers.

The more organisations adopt this approach, the better it is for everyone. Hence the liberal licensing.

So next time your boss or your client is asking what your official browser-support policy is, feel free to use browsersupport.clearleft.com

Reading patterns

I can���t resist bookshelves.

If I���m shown into someone���s home and left alone while the host goes and does something, you can bet I���m going to peruse their bookshelves.

I don���t know why. Maybe I���m looking for points of commonality. ���Oh, you read this book too?��� Or maybe it���s the opposite, and I���m looking for something new and���pardon the pun���novel. ���Oh, that book sounds interesting!���

I like it when people have a kind of bookshelf on their website.

Mandy���s reading list is always worth browsing.Remy has a comprehensive record of his reading history.Maggie has her library and her anti-library.Molly White has one shelf for fiction and another shelf for non-fiction.

Here���s my ad-hoc bookshelf, which is manually mirrored on Bookshop.org.

I like having an overview of what I���ve been reading. One of the reasons I started keeping track was so that I could try to have a nice balance of fiction and non-fiction.

I always get a little sad when I see someone���s online reading list and it only consists of non-fiction books that are deemed somehow useful, rather than simply pleasurable. Cameron wrote about when he used to do this:

I felt like reading needed to have some clear purpose. The topic of any book I read needed to directly contribute to being an ���adult���. So I started to read non-fiction ��� stuff that reflected what was happening in my career. Books on management, books on finance, books on economics, books on the creative process. And for many years this diet of dry, literary roughage felt wholesome ��� but joyless. Each passage I highlited in yellow marker was a point for the scoreboard, not a memory to be treasured.

Now he���s redressing the imbalance and rediscovering the unique joy of entering other worlds by reading fiction.

For a while, I forced myself to have perfect balance. I didn���t allow myself to read two non-fiction books in a row or two fiction books in a row. I made myself alternate between the two.

I���ve let that lapse now. I���m reading more fiction than non-fiction, and I���m okay with that.

But I still like looking back on what I���ve been reading and seeing patterns emerge. Like there���s a clear boom in the last year of reading retellings of the Homeric epics (all kicked off by reading the brilliant Circe by Madeline Miller).

I also keep an eye out for a different kind of imbalance. I want to make sure that I���m not just reading books by people like me���middle-aged heterosexual white dudes.

You may think that a balanced reading diet would emerge naturally, but I���m not so sure. Here���s an online bookshelf. Here���s another online bookshelf. Plenty of good stuff in both. But do either of those men realise that they���ve gone more than a year without reading a book written by a woman?

It���s almost certainly not a conscious decision. It���s just that in the society we live in, the default mode tends towards what���s been historically privileged (see also films, music, and painting).

It���s like driving in a car that subtly pulls to one side. Unless you compensate for it, you���ll end up in the ditch without even realising.

I feel bad for calling attention to those two reading lists. It feels very judgy of me. And reading is something that doesn���t deserve judgement. Any reading is good reading.

Mind you, maybe being judgemental is exactly why I���m drawn to people���s bookshelves in the first place. It might be that I���m subsconsciously looking for compatibility signals. If I see a bookshelf filled with books I like, I���m bound to feel predisposed to like that person. And if I see a bookshelf dominated by Jordan Peterson and Ayn Rand, I���m probably going to pass judgement on the reader, even if I know I shouldn���t.

Applying the four principles of accessibility

Web Content Accessibility Guidelines���or WCAG���looks very daunting. It���s a lot to take in. It���s kind of overwhelming. It���s hard to know where to start.

I recommend taking a deep breath and focusing on the four principles of accessibility. Together they spell out the cutesy acronym POUR:

PerceivableOperableUnderstandableRobust

A lot of work has gone into distilling WCAG down to these four guidelines. Here���s how I apply them in my work���

Perceivable

I interpret this as:

Content will be legible, regardless of how it is accessed.

For example:

The contrast between background and foreground colours will meet the ratios defined in WCAG 2.Content will be grouped into semantically-sensible HTML regions such as navigation, main, footer, etc.Operable

I interpret this as:

Core functionality will be available, regardless of how it is accessed.

For example:

I will ensure that interactive controls such as links and form inputs will be navigable with a keyboard.Every form control will be labelled, ideally with a visible label.Understandable

I interpret this as:

Content will make sense, regardless of how it is accessed.

For example:

Images will have meaningful alternative text.I will make sensible use of heading levels.

This is where it starts to get quite collaboritive. Working at an agency, there will some parts of website creation and maintenance that will require ongoing accessibility knowledge even when our work is finished.

For example:

Images uploaded through a content management system will need sensible alternative text.Articles uploaded through a content management system will need sensible heading levels.Robust

I interpret this as:

Content and core functionality will still work, regardless of how it is accessed.

For example:

Drop-down controls will use the HTML select element rather than a more fragile imitation.I will only use JavaScript to provide functionality that isn���t possible with HTML and CSS alone.

If you���re applying a mindset of progressive enhancement, this part comes for you. If you take a different approach, you���re going to have a bad time.

Taken together, these four guidelines will get you very far without having to dive too deeply into the rest of WCAG.

Another speaker for UX London

UX London is just three weeks away! If you haven���t got your ticket yet, dally not.

There���s a last-minute addition to the line-up: Peter Boersma.

Peter is kindly stepping into the slot that Kara Kane was going to be occupying. Alas, since a snap general election was recently announced, Kara isn���t able to give her talk. There���s an abundance of caution in the comms from gov.uk in this pre-election period.

It���s a shame that Kara won���t be able to speak this time around, but it���s great that we���ve got Peter!

Peter���s talk is perfect for day three. Remember, that���s the day focused on design ops and design systems. Well, Peter lives and breathes design ops. He���ll show you why you should maintain a roadmap for design ops, and work with others to get the initiatives on it done.

You can get a ticket for an individual day of talks and workshops, or go for the best-value option and come for all three days. See you there!

Trust

In their rush to cram in ���AI��� ���features���, it seems to me that many companies don���t actually understand why people use their products.

Google is acting as though its greatest asset is its search engine. Same with Bing.

Mozilla Developer Network is acting as though its greatest asset is its documentation. Same with Stack Overflow.

But their greatest asset is actually trust.

If I use a search engine I need to be able to trust that the filtering is good. If I look up documentation I need to trust that the information is good. I don���t expect perfection, but I also don���t expect to have to constantly be thinking ���was this generated by a large language model, and if so, how can I know it���s not hallucinating?���

���But���, the apologists will respond, ���the results are mostly correct! The documentation is mostly true!���

Sure, but as Terence puts it:

The intern who files most things perfectly but has, more than once, tipped an entire cup of coffee into the filing cabinet is going to be remembered as “that klutzy intern we had to fire.”

Trust is a precious commodity. It takes a long time to build trust. It takes a short time to destroy it.

I am honestly astonished that so many companies don���t seem to realise what they���re destroying.

InstAI

If you use Instagram, there may be a message buried in your notifications. It begins:

We’re getting ready to expand our AI at Meta experiences to your region.

Fuck that. Here���s the important bit:

To help bring these experiences to you, we’ll now rely on the legal basis called legitimate interests for using your information to develop and improve AI at Meta. This means that you have the right to object to how your information is used for these purposes. If your objection is honoured, it will be applied going forwards.

Follow that link and fill in the form. For the field labelled ���Please tell us how this processing impacts you��� I wrote:

It���s fucking rude.

That did the trick. I got an email saying:

We���ve reviewed your request and will honor your objection.

Mind you, there���s still this:

We may still process information about you to develop and improve AI at Meta, even if you object or don���t use our products and services.

Speculation rules and fears

After I wrote positively about the speculation rules API I got an email from David Cizek with some legitimate concerns. He said:

I think that this kind of feature is not good, because someone else (web publisher) decides that I (my connection, browser, device) have to do work that very often is not needed. All that blurred by blackbox algorithm in the browser.

That���s fair. My hope is that the user will indeed get more say, whether that���s at the level of the browser or the operating system. I���m thinking of a prefers-reduced-data setting, much like prefers-color-scheme or prefers-reduced-motion.

But this issue isn���t something new with speculation rules. We���ve already got service workers, which allow the site author to unilaterally declare that a bunch of pages should be downloaded.

I���m doing that for Resilient Web Design���when you visit the home page, a service worker downloads the whole site. I can justify that decision to myself because the entire site is still smaller in size than one article from Wired or the New York Times. But still, is it right that I get to make that call?

So I���m very much in favour of browsers acting as true user agents���doing what���s best for the user, even in situations where that conflicts with the wishes of a site owner.

Going back to speculation rules, David asked:

Do we really need this kind of (easily turned to evil) enhancement in the current state of (web) affairs?

That question could be asked of many web technologies.

There���s always going to be a tension with any powerful browser feature. The more power it provides, the more it can be abused. Animations, service workers, speculation rules���these are all things that can be used to improve websites or they can be abused to do things the user never asked for.

Or take the elephant in the room: JavaScript.

Right now, a site owner can link to a JavaScript file that���s tens of megabytes in size, and the browser has no alternative but to download it. I���d love it if users could specify a limit. I���d love it even more if browsers shipped with a default limit, especially if that limit is related to the device and network.

I don���t think speculation rules will be abused nearly as much as client-side JavaScript is already abused.

Fluid

I really like the newly-launched website for this year���s XOXO festival. I like that the design is pretty much the same for really small screens, really large screens, and everything in between because everything just scales. It���s simultaneously a flyer, a poster, and a billboard.

Trys has written about the websites he���s noticed using fluid type and spacing: There it is again, that fluid feeling.

I know what he means. I get a similar feeling when I���m on a site that adjusts fluidly to any browser window���it feels very ���webby.

I���ve had this feeling before.

When responsive design was on the rise, it was a real treat to come across a responsive site. After a while, it stopped being remarkable. Now if I come across a site that isn���t responsive, it feels broken.

And now it���s a treat to come across a site that uses fluid type. But how long will it be until it feels unremarkable? How will it be until a website that doesn���t use fluid type feels broken?

Speculation rules

There���s a new addition to the latest version of Chrome called speculation rules. This already existed before with a different syntax, but the new version makes more sense to me.

Notice that I called this an addition, not a standard. This is not a web standard, though it may become one in the future. Or it may not. It may wither on the vine and disappear (like most things that come from Google).

The gist of it is that you give the browser one or more URLs that the user is likely to navigate to. The browser can then pre-fetch or even pre-render those links, making that navigation really snappy. It���s a replacement for the abandoned link rel="prerender".

Because this is a unilateral feature, I���m not keen on shipping the code to all browsers. The old version of the API required a script element with a type value of ���speculationrules���. That doesn���t do any harm to browsers that don���t support it���it���s a progressive enhancement. But unlike other progressive enhancements, this isn���t something that will just start working in those other browsers one day. I mean, it might. But until this API is an actual web standard, there���s no guarantee.

That���s why I was pleased to see that the new version of the API allows you to use an external JSON file with your list of rules.

I say ���rules���, but they���re really more like guidelines. The browser will make its own evaluation based on bandwidth, battery life, and other factors. This feature is more like srcset than source: you give the browser some options, but ultimately you can���t force it to do anything.

I���ve implemented this over on The Session. There���s a JSON file called speculationrules.js with the simplest of suggestions:

{ "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }]}

The eagerness value of ���moderate��� says that any link can be pre-rendered if the user hovers over it for 200 milliseconds (the nuclear option would be to use a value of ���immediate���).

I still need to point to that JSON file from my HTML. Usually this would be done with something like a link element, but for this particular API, I can send a response header instead:

Speculation-Rules: ���/speculationrules.json"

I like that. The response header is being sent to every browser, regardless of whether they support speculation rules or not, but at least it���s just a few bytes. Those other browsers will ignore the header���they won���t download the JSON file.

Here���s the PHP I added to send that header:

header('Speculation-Rules: "/speculationrules.json"');

There���s one extra thing I had to do. The JSON file needs to be served with mime-type of ���application/speculationrules+json���. Here���s how I set that up in the .conf file for The Session on Apache:

Header set Content-type application/speculationrules+json

A bit of a faff, that.

You can see it in action on The Session. Open up Chrome or Edge (same same but different), fire up the dev tools and keep the network tab open while you navigate around the site. Notice how hovering over a link will trigger a new network request. Clicking on that link will get you that page lickety-split.

Mind you, in the case of The Session, the navigations were already really fast���performance is a feature���so it���s hard to guage how much of a practical difference it makes in this case, but it still seems like a no-brainer to me: taking a few minutes to add this to your site is worth doing.

Oh, there���s one more thing to be aware of when you���re implementing speculation rules. You have the option of excluding URLs from being pre-fetched or pre-rendered. You might need to do this if you���ve got links for adding items to shopping carts, or logging the user out. But my advice would instead be: stop using GET requests for those actions!

Most of the examples given for unsafe speculative loading conditions are textbook cases of when not to use links. Links are for navigating. They���re indempotent. For everthing else, we���ve got forms.