Bruce Lawson’s personal site

Reading List 279

prefers-reduced-motion and browser defaults

All the omens were there: a comet in the sky; birds fell silent; dogs howled; unquiet spirits walked the forests and the dark, empty places. Yes, it was a meeting request from Marketing to discuss a new product page with animations that are triggered on scroll.

Much as a priest grasps his crucifix when facing a vampire, I immediately reached for Intersection Observer to avoid the browser grinding to a halt when watching to see if something is scrolled into view. And, like an exoricst sprinkling holy water on a demon, I also cleansed the code with a prefers-reduced-motion media query.

prefers-reduced-motion looks at the user’s operating system settings to see if they wish to suppress animations (for performance reasons, or because animations make them nauseous–perhaps because they have a vestibular disorder). A responsible developer will check to see if the user has indicated that they prefer reduced motion and use or avoid animations accordingly.

Content images can be made to switch between animated or static using the <picture> element (so brilliantly brought to you by a team of gorgeous hunks). Bradbury Frosticle gives this example:

<picture>
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)">
  <img srcset="animated.gif alt="brick wall"/>
</picture>

Now, obviously you are a responsible developer. You use alt text (and don’t call it “alt tags”). But unfortunately, not everyone is like you. There are also 639 squillion websites out there that were made before prefers-reduced-motion was a thing, and only 3 of them are actively maintained.

It seems to me that browsers could do more to protect their users. Browsers are, after all, user agents that protect the visitor from pop-ups, malicious sites, autoplaying videos and other denizens of the underworld. They should also protect users against nausea and migraines, regardless of whether the developer thought to (or had the tools available to).

So, I propose that browsers should never respect scroll-behavior: smooth; if a user prefers reduced motion, regardless of whether a developer has set the media query.

Animated GIFs (and their animated counterparts in more modern image formats) are somewhat more complex. Since 2018, the Chromium-based Vivaldi browser has allowed users to deactivate animated GIFs right from the Status Bar, but this isn’t useful in all circumstances.

My initial thought was that the browser should only show the first five seconds because WCAG Success Criterion 2.2.2 says

For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it

But this wouldn’t allow a user to choose to see more than 5 seconds. The essential aspect of this success criterion is, I think, control. Melanie Richards, who does accessibility on Microsoft Edge browser, noted

IE had a neat keyboard shortcut that would pause any GIFs on command. I’d be curious to get your take on the relative usefulness of a browser setting such as you described, and/or a more contextual command.

I’m doubtful about discoverability of keyboard commands, but Travis Leithead (also Microsoft) suggested

We can use ML + your mic (with permission of course) to detect your frustration at forever looping Gifs and stop just the right one in real time. Or maybe just a play/pause control would help… +1 customer request!

And yes, a play/pause mechanism gives maximum control to the user. This would also solve the problem of looping GIFs in marketing emails, which are commonly displayed in browsers. There is an added complexity of what to do if the animated image is a link, but I’m not paid a massive salary to make web browsers, so I leave that to mightier brains than I possess.

In the meantime, until all browser vendors do my bidding (it only took 5 years for the <picture> element), please consider adding this to your CSS (by Thomas Steiner)


@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

I am not an MBA, but it seems to me that making your users puke isn’t the best beginning to a successful business relationship.

Reading List 278

Random Expo.io tips

I’m doing some accessibility testing on a React Native codebase that uses Expo during development. If you’ve done something seriously wrong in a previous life and karma has condemned you to using React Native rather than making a Progressive Web App, Expo is jolly useful. It gives you a QR code that you can scan with Android or iOS to ‘install’ the app on your device and you get live reload of any changes. It’s like sinking in a quagmire of shit but someone nice is bringing you beer and playing Abba while it happens. (Beats me why that isn’t their corporate strapline.)

Anyway, I struggled a bit to set it up so here are some random tips that I learned the hard way:

Who knows? One day, Apple may decide not to hamstring PWAs on iOS and we can all use the web to run on any device and any browser, just as Sir Uncle Timbo intended.

On Kangen water, snakeoil and the New Age far right

Kangen water is a trademark for machine-electrolysed water, owned by Enagic. Similar water is also variously known as Electrolyzed Reduced Alkaline Water, Alkaline Water, Structured Water, or Hexagonal Water. It’s popular among new-age influencers and their followers, because it raises the vibrational frequency of their chakras and kundalinis, thereby energising the Qui so that Gemini shines in their quantum auras, or something. Of course, none of these are verifiable –because they’re all fictional.

Enagic itself is careful not to over-promise; their website says that their water can be used for preparing food, making coffee, watering plants, washing your pets, face, hair – who knew?! It rather confusingly tells you “Take your medicine with this water” (Archived web page):


while their FAQ tells you

Kangen Water® is intended for everyday drinking and cooking rather than for drinking with medication. The Japanese Ministry of Health, Labor and Welfare gives the following directions: Do not take medication with machine-produced water. (Archived page)

Alkaline water’s health benefits

As for health benefits, Enagic simply claims that Kangen water is

perfect for drinking and healthy cooking. This electrolytically-reduced, hydrogen-rich water works to restore your body to a more alkaline state, which is optimal for good health.

The mechanism by which it makes your body more alkaline is not explained, nor why a more alkaline state should be “optimal for good health”. In its article Is alkaline water a miracle cure – or BS? The science is in, The Guardian cites Dr Tanis Fenton, an adjunct professor at the University of Calgary and an evidence analyst for Dietitians of Canada:

Fenton stresses, you simply can’t change the pH of your body by drinking alkaline water. “Your body regulates its [blood] pH in a very narrow range because all our enzymes are designed to work at pH 7.4. If our pH varied too much we wouldn’t survive.”

Masaru Emoto and Water memory

The swamps of social media are full of people selling magic Water to each other, making all sorts of outlandish unscientific claims, such as water has “memory”:

water holds memory

This hokum was popularised by Masuru Emoto, a graduate in International Relations who became a “Doctor” of Alternative Medicine at the Open International University for Alternative Medicine in India, a diploma mill which targeted quacks to sell its degrees and was later shut down.

(The idea that water holds memory is often cited by fans of homeopathy. They agree: there is none of the actual substance remaining in this water because it’s been diluted out of existence, but it does its magical healing because the water *remembers*. Cosmic, maaan.)

Mr Emoto’s results have never been reproduced, his methodology was unscientific, sloppy and subjective. Mr Emoto was invited to participate in the James Randi Educational Foundation’s Million Dollar Challenge in which pseudo-scientists are invited to replicate their results in properly controlled scientific methods, and get paid $1 million if they succeed. For some inexplicable reason, he didn’t take up the challenge.

Hexagonal water hydrates better

It’s also claimed that this magical water forms hexagonal “clusters” that somehow make it more hydrating because it’s more readily absorbed by cells. This is nonsense: although water clusters have been observed experimentally, they have a very short lifetime: the hydrogen bonds are continually breaking and reforming at timescales shorter than 200 femtoseconds.

In any case, Water molecules enter cells through a structure called an aquaporin, in single file. If they were clustered, they would be too big to enter the cell.

Electrolyzed Reduced Alkaline Water and science

Let’s look at what real scientists say. From Systematic review of the association between dietary acid load, alkaline water and cancer:

Despite the promotion of the alkaline diet and alkaline water by the media and salespeople, there is almost no actual research to either support or disprove these ideas. This systematic review of the literature revealed a lack of evidence for or against diet acid load and/or alkaline water for the initiation or treatment of cancer. Promotion of alkaline diet and alkaline water to the public for cancer prevention or treatment is not justified.

In their paper Physico-Chemical, Biological and Therapeutic Characteristics of Electrolyzed Reduced Alkaline Water (ERAW), Marc Henry and Jacques Chambron of the University of Strasbourg wrote

It was demonstrated that degradation of the electrodes during functioning of the device releases very reactive nanoparticles of platinum, the toxicity of which has not yet been clearly proven. This report recommends alerting health authorities of the uncontrolled availability of these devices used as health products, but which generate drug substances and should therefore be sold according to regulatory requirements.

In short: machine-produced magic water has no scientifically demonstrable health benefits, and may actually be harmful.

Living structured water?

So why do people make such nonsensical claims about magic water? Some do it for profit, of course. Enagic sells via a multi-level marketing scheme, similar to Amway but for Spiritual People, Lightworkers, Starseeds and Truth-Seakers. (Typo intentional; new-age bliss ninnies love to misspell “sister” as “SeaStar”, for example, because the Cosmos reveals itself through weak puns, and —of course— the Cosmos only speaks English. You sea?)

Doubtless many customers and sellers actually genuinely believe in magic water. It would be tempting to think of this as just some harmless fad for airheads who enjoy sunning their perineums (it was Metaphysical Meagan’s instagram that first introduced me to Magic water machines; of course, she has a “water business”)

But it’s not harmless. The same people who promote magic water also bang on about “sacred earth“, claim Trump won the 2020 election, Covid is a “plandemic” and show a disturbing tendency towards far right politics. The excellent article The New Age Racket and the Left (from 2004 but still worth reading in full) sums it up brilliantly:

At best, then, New Age is a lucrative side venture of neoliberalism, lining the pockets of those crafty enough to package spiritual fulfillment as a marketable product while leaving the spiritually hungry as unsated as ever. At worst, though, it is the expression of something altogether more sinister. Rootedness in the earth, a return to pure and authentic folkways, the embrace of irrationalism, the conviction that there is an authentic way of being beyond politics, the uncritical substitution of group- identification for self-knowledge, are all of them basic features of right-wing ideology…

Many New Agers seem to feel not just secure in but altogether self-righteous about the benevolence of their world-view, pointing to the fact, for example, that it ‘celebrates’ the native cultures that global capitalism would plow over. To this one might respond, first of all, that celebration of native cultures is itself big business. Starbucks does it. So, in its rhetoric, does the Southeast Asian sex-tourism industry. Second, the simple fact that New Age is by its own lights multicultural and syncretistic is by no means a guarantee that it is safe from the accusation of being, at best, permissive of, and, at worst, itself an expression of, right-wing ideology. The Nazis, to return to a tried and true example, were no less obsessed with Indian spirituality than was George Harrison.

Conclusion

Kangen water and its non-branded magical siblings are useless nonsense that wastes resources as it requires electricity. Enagic gives contradictory advice about whether it’s safe to use it to take (real) medicines with. Water machines might make the source water worse because the device releases very reactive nanoparticles of platinum. Most people who extol its virtues want of your money, and they might also be an anti-scientific quasi-fascist.

Reading List 277

Accessibility visualisation with Tota11y 2

TL;DR: I’ve forked the splendid but dated Tota11y accessibility visualisation toolkit, added some extra stuff and corrected a bug, and my employer has let me release it for Global Accessibility Awareness Day.

screenshot of Tota11y on this blog, showing heading structure

A while ago, my very nice client (and now employer), Babylon Health, asked me to help them with their accessibility testing. One plan of attack is an automated scan integrated with the CI system to catch errors during development (more about this when it’s finished). But for small content changes made by marketing folks, this isn’t appropriate.

We tried lots of things like Wave, which are great but rather overwhelming for non-technical people because they tend to cover the page being analysed with arcane symbols, many of which are beyond a CMS content editor’s control anyway. There are lots of excellent accessibility checks in Microsoft Edge devtools, but to a non-technical user, this is how devtools look:

an incredibly elaborate 1980s-style control panel for a nucelar power station

Then I remembered something I’d used a while ago to demo heading structures, a tool called Tota11y from Khan Academy, which is MIT licensed. Note, this is not designed to check everything. Tota11y is a simple tool to visualise the most widespread web accessibility errors in a non overwhelmingly-techy way. It aims to give content authors and editors insights into things they can control. It’s not a cure-all.

There were a few things I wanted to change, specifically for Babylon’s web sites. I wanted the contrast analyser to ignore content that was visually hidden using the common clip pattern and to correct a bug whereby it didn’t calculate contrast properly on large text, and reported an error where there isn’t one. False positives encourage people to ignore the output and this erodes trust in tools. The fix uses code from Firefox devtools; thank you to the Mozilla people who helped me find it. There’s loads of other small changes.

Khan Academy seemed to have abandoned the tool, so I forked it. Here it is, if you want to try it for Global Accessibility Awareness Day. Drag the attractive link to your bookmarks bar, then activate it and inspect your page. The code is on GitHub–don’t laugh at my crap JavaScript. It was also an “interesting” experience learning about npm, LESS, handlebars and all the stuff I’d managed to avoid so far.

Feel free to use it if it helps you. Pull requests will be gratefully received (as long as they don’t unnecessarily rewrite it in React and Tailwind), and I’ll be making a few enhancements too. Thanks to Khan Academy for releasing the initial project, to my colleagues for testing it, to Jack Roles for making it look pretty, and to Babylon for letting me release the work they were nice enough to pay me for.

Update: Version 1.1 released

17 June 2021: I’ve made some tweaks to the Tota11y UI. A new naming convention replaces “adjective+animal I’ve never eaten”. V 1+ are “adjective+musical instrument I’ve never tried to play”. V1.1 is “Rusty Trombone”.

The making of Which Three Birdies?

Since Stuart Langridge and I released Which Three Birdies, it has taken the web by storm, and we’ve been inundated with requests from prestigious institutions to give lectures on how we accomplished this paradigm shift in non-arbitrary co-ordinates-to-mnemonic mapping. Unfortunately, the global pandemic and the terms of Stuart’s parole prevent us from travelling, so we’re writing it here instead.

The name

A significant advance on its predecessors was achievable because Bruce has a proper degree (English Language and Literature with Drama) and has trained as an English Language teacher. “Which” is an an interrogative pronoun, used in questions about alternatives. This might sound pedantic, but if a service can’t make the right choice from a very limited set of interrogative pronouns, how can you trust it to choose the correct three mnemonics? Establishing trust is vital when launching a tool that is destined to become an essential part of the very infrastructure of cartography.

The APIs

The mechanics of how the service locates and maps to three birds is extensively documented. Further documentation has been provided at the request of the Nobel Prize committee and will be published in due course

Accessibility

The Web is for everyone and anyone who makes sites that are inaccessible is, quite simply, not a proper developer and quite possibly a criminal or even a fascist. Therefore, W3B offers users the chance to hear the calls of the most prevalent birds in their location, and also provides a transcript of those calls.

screenshot of transcripts

Given that there are 18,043 species of birds worldwide, transcribing each one by hand was impractical, so we decided to utilise –nay, leverage– the power of Machine Learning.

Birdsong to Text via Machine Learning

Stuart is, by choice, a Python programmer. Unfortunately, we learned that pythons eat birds and, out of a sense of solidarity with our feathered friends, we decided not to progress with such a barbaric language so we sought an alternative.

Stuart hit upon the answer, due to a fortuitous coincidence. He has a prison tattoo of a puffin on his left buttock (don’t ask) and we remembered that the trendy “R” language is named after call of a Puffin (usually transcribed as “arr-arr-arr”).

Stuart set about learning R, but the we hit another snag: we couldn’t use the actual sounds of birds to train our AI, for copyright reasons.

Luckily, Bruce is also a musician with an extensive collection of instruments, including the actual kazoo that John Cale used to record the weird bits of Venus In Furs. Here it is in its Sotheby’s presentation case:

a kazoo in a presentaton box

Whereas the kazoo is ideal for duplicating the mellifluous squawk of a corncrake, it is less suitable to mimic the euphonious peep of an osprey. Stuart listens to AC/DC and therefore has no musical sense at all, so he wasn’t given an instrument. Instead he took the task of inhaling helium out of childrens’ balloons in order to replicate the higher registers of birdsong. Here’s a photo of the flame-haired Adonis preparing to imitate the melodious lament of the screech owl:

Pennywise the clown from IT, with a red balloon

After a few evenings re-creating a representative sample of birdsong, we had enough avian phonemes in the bag to run a rigorous programme of principal components analysis, cluster analysis and (of course) multilinear subspace learning algorithms to learn low-dimensional representations directly from tensor representations for multidimensional data, without reshaping them into higher-dimensional vectors.

All known birds can now reliably be transcribed with 94% accuracy, except for the Crested Anatolian Otter-Catcher. We suspect that the reason for this is the confusion introduced by the Turkish vowel harmony and final-obstruent devoicing. In practice, however, this exception doesn’t affect the utility of the system, because the Crested Anatolian Otter-Catcher is now very rare due to its being extensively hunted in the 19th century. (Fun fact, the bird was once so famous and prevalent that the whole region was known as the Otter-munch Empire.)

Hopefully, this in-depth breakdown of how Which Three Birdies? works will encourage other authors of revolutionary new utilities to open-source their work as we have done for the betterment of all humanity. We’d like to thank the nice people at 51Degrees for commissioning Which Three Birdies?, giving us free rein, and paying us for it. The nutters.

CSS Zen Garden turns 18

Saturday 8 May was the 18th birthday of the famous CSS Zen Garden. To quote the Web Design Museum

The project offered a simple HTML template to be downloaded, the graphic design of which could be customized by any web designer, but only with the help of cascading styles and one’s own pictures. The goal of the project was to demonstrate the various possibilities of CSS in creating visual web design. The CSS Zen Garden gallery exhibited hundreds of examples of diverse web design, all based on a single template containing the same HTML code.

I too designed a theme, which never made it to creator Dave Shea’s official list, but did the rounds on blogs in its day. For a long time, it languished rather broken, because Dave had rejigged the HTML to use HTML5 elements and changed the names of the classes and IDs that I had used as selectors for styling. To mark the occasion, I spent a while reconstructing it. You can enjoy its glory at Geocities 1996 (Seizure warning!). (You might want to use Vivaldi browser which allows you to turn off animated GIFs).

After I tweeted the link on Saturday to celebrate CSS Zen Garden’s birthday, a number of people noted that the site isn’t responsive, so looks broken on mobile. This is because there weren’t any mobile devices when I wrote it in 2003! Sure, I could rewrite the CSS and use Grid and all the modern cool stuff, but that wasn’t my intent. Apart from class and ID names, the only things I changed were the mechanism of hiding text that’s replaced by images. Tt’s now color:transparent as opposed to floating h3 span off screen, as Dave got rid of the spans. The * html hacks for IE6 are still there. (If you don’t know what that means, lucky you. It was my preferred way to target IE6, which believed there was an unnamed selector above the html element in the tree, so * html #whatever would select that ID only in IE6. I liked it because it was valid CSS, albeit nonsensical.)

It’s there as a working artefact of web development in the early 2000s, in the same way as its “exuberant” design is a fond homage to the early web aesthetic that I first discovered in 1996. And what better accolade can there be than this:

Dave’s project opened the eyes of many designers and sent a message across our then-small community of Web Standards wonks that CSS was ready for prime-time. I’m told by many that the Zen Garden is still used by educators, 18 years later. Thank you, Dave Shea!

Reading List 276