Tags: list

While I’ve been listening to Hounds Of Love, I’ve also been reading Orbital by Samantha Harvey.

Here’s a passage from an early chapter as the crew of the International Space Station watch a typhoon forming:

How wired and wakeful the earth seems suddenly. It’s not one of the regular typhoons that haphazardly assault these parts of the world, they agree. They can’t see it all, but it’s bigger than projections had previously thought, and moving faster. They send their images, the latitudes and longitudes. They are like fortune tellers, the crew. Fortune tellers who can see and tell the future but do nothing to change or stop it. Soon their orbit will descend away to the east and south and no matter how they crane their necks backward at the earth-viewing windows the typhoon will roll out of sight and their vigil will end and darkness will hit them at speed.

They have no power – they have only their cameras and a privileged anxious view of its building magnificence. They watch it come.

The penultimate track on Hounds Of Love is the magnificent Hello Earth with its eerie Georgian chant for a chorus, and magnificent uilleann piping from the late great Liam Óg O’Flynn on the bridge. It too features a narrator watching from space:

Watching storms

Start to form

Over America.

Can’t do anything.

Just watch them swing

With the wind

Out to sea.

All you sailors, (“Get out of the waves! Get out of the water!”)

All life-savers, (“Get out of the waves! Get out of the water!”)

All you cruisers, (“Get out of the waves! Get out of the water!”)

All you fishermen,

Head for home.

Matching the song to the book feels like pairing a fine wine with a delicious morsel.

When I was talking about monitoring web performance yesterday, I linked to the CrUX data for The Session.

CrUX is a contraction of Chrome User Experience Report. CrUX just sounds better than CEAR.

It’s data gathered from actual Chrome users worldwide. It can be handy as part of a balanced performance-monitoring diet, but it’s always worth remembering that it only shows a subset of your users; those on Chrome.

The actual CrUX data is imprisoned in some hellish Google interface so some kindly people have put more humane interfaces on it. I like Calibre’s CrUX tool as well as Treo’s.

What’s nice is that you can look at the numbers for any reasonably popular website, not just your own. Lest I get too smug about the performance metrics for The Session, I can compare them to the numbers for WikiPedia or the BBC. Both of those sites are made by people who prioritise speed, and it shows.

If you scroll down to the numbers on navigation types, you’ll see something interesting. Across the board, whether it’s The Session, Wikipedia, or the BBC, the BFcache—back/forward cache—is used around 16% to 17% of the time. This is when users use the back button (or forward button).

Unless you do something to stop them, browsers will make sure that those navigations are super speedy. You might inadvertently be sabotaging the BFcache if you’re sending a Cache-Control: no-store header or if you’re using an unload event handler in JavaScript.

I guess it’s unsurprising the BFcache numbers are relatively consistent across three different websites. People are people, whatever website they’re browsing.

• The Session
• WikiPedia
• The BBC

Where it gets interesting is in the differences. Take a look at pre-rendering. It’s 4% for the BBC and just 0.4% for Wikipedia. But on The Session it’s a whopping 35%!

That’s because I’m using speculation rules. They’re quite straightforward to implement and they pair beautifully with full-page view transitions for a slick, speedy user experience.

It doesn’t look like WikiPedia or the BBC are using speculation rules at all, which kind of surprises me.

Then again, because they’re a hidden technology I can understand why they’d slip through the cracks.

On any web project, I think it’s worth having a checklist of The Invisibles—things that aren’t displayed directly in the browser, but that can make a big difference to the user experience.

Some examples:

• A web application manifest JSON file to help people install your website.
• A service worker, even if it’s just to cache static assets.
• Open Graph meta elements in the head of documents so they “unroll” nicely when the link is shared.
• An appropriate content security policy header.
• A Speculation-Rules header that points to a JSON file.
• An OpenSearch XML file if your site has search functionality.
• An icon, or as us olds call it, a favicon.
• A lang attribute on the body of every page.

If you’ve got a checklist like that in place, you can at least ask “Whose job is this?” All too often, these things are missing because there’s no clarity on whose responsible for them. They’re sorta back-end and sorta front-end.

Ever since Salter Cane recorded the songs on Deep Black Water I’ve been itching to play them live. At our album launch gig last Friday, I finally got my chance.

It felt soooo good! It helped that we had the best on-stage sound ever (note to the bands of Brighton, Leon at the Hope and Ruin is fantastic at doing the sound). The band were tight, the songs sounded great live, and I had an absolute blast.

I made a playlist of songs to be played in between bands. It set the tone nicely. As well as some obvious touchstones like 16 Horsepower and Joy Division, I made sure to include some local bands we’re fond of, like The Equitorial Group, Mudlow, Patients, and The Roebucks.

Design for a Small Planet – Scott Jenson

So, let’s start with a simple premise: how can we make design less opaque and encourage teams to make small changes more efficiently? Not every product decision needs to be a big, complicated design process.

This checklist, in four parts, is meant to be a simple, lightweight way for the team to get the ‘gist’ of the issue and make a shared decision quickly. It’s a starting point, a way to get the critical information in once place so the entire team can understand and discuss. The four parts are:

• Gather: Bring the right info together into a single place
• Impact: List the size of the problem and possible risks
• Sketch: Create a preliminary sketch of a solution
• Team Huddle: Get the product team to discuss and agree on a solution.

mirisuzanne/track-list: Enhance a list of audio tracks with playlist controls

This is very nice HTML web component by Miriam, progressively enhancing an ordered list of audio elements.

The datalist element is good. It was a bit bumpy there for a while, but browser implementations have improved over time. Now it’s by far the simplest and most robust way to create an autocompleting combobox widget.

Hook up an input element with a datalist element using the list and id attributes and you’re done. You can even use a bit of Ajax to dynamically update the option elements inside the datalist in response to the user’s input. The browser takes care of all the interaction. If you try to roll your own combobox implementation, it’s almost certainly going to involve a lot of JavaScript and still probably won’t account for all use cases.

Safari on iOS—and therefore all browsers on iOS—didn’t support datalist for quite a while. But once it finally shipped, it worked really nicely. The options showed up just like automplete suggestions above the keyboard.

But that broke a while back.

The suggestions still appeared, but if you tapped on one of them, nothing happened. The input element didn’t get updated. You had to tap on a little downward arrow inside the input in order to see the list of options.

That was really frustrating for anybody on iOS using The Session. By far the most common task on the site is searching for a tune, something that’s greatly (progressively) enhanced with a dynamically-updating datalist.

I just updated to iOS 18 specifically to see if this bug has been fixed, and it has:

Fixed updating the input value when selecting an option from a datalist element.

Hallelujah!

But now there’s some additional behaviour that’s a little weird.

As well as showing the options in the autocomplete list above the keyboard, Safari on iOS—and therefore all browsers on iOS—also pops up the options as a list (as if you had tapped on that downward arrow). If the list is more than a few options long, it completely obscures the input element you’re typing into!

I’m not sure if this is a bug or if it’s the intended behaviour. It feels like a bug, but I don’t know if I should file something.

For now, I’ve updated the datalist elements on The Session to only ever hold three option elements in order to minimise the problem. Seeing as the autosuggest list above the keyboard only ever shows a maximum of three suggestions anyway, this feels like a reasonable compromise.

75 Best Sci-Fi Books of All Time - What Is The Best Science Fiction Book Ever Written?

This is a damned fine list.

Should I remove this blog from Google Search?・The Jolly Teapot

There was life before Google search. There will be life after Google search.

Google is not a huge source of traffic and visibility. I get most of my visits from RSS readers, other people’s links including fellow bloggers, or websites like Hacker News. It’s hard to tell at this point since I don’t track anything, but that’s an educated guess.

Removing my website from Google would have very little impact, so I was wondering if I should just do it.

The 21 best science fiction books of all time – according to New Scientist writers | New Scientist

I’ve read 16 of these and some of the others are on my to-read list. It’s a pretty good selection, although the winking inclusion of God Emperor Of Dune by the SEO guy verges on trolling.

The deskilling of web dev is harming the product but, more importantly, it’s damaging our health – this is why burnout happens – Baldur Bjarnason

A depressing but accurate description of the economics of web development.

These are my jams · Paul Robert Lloyd

I like how Paul has recreated his own version of This Is My Jam and I really like how he’s done it with an HTML web component.

siderea | I Blame the W3C’s HTML Standard for Ordered Lists [tech, soc, Patreon]

Gosh! And I thought I had strong opinions about markup!

Educational Sensational Inspirational Foundational

A historical record of foundational web development blog posts.

Every one of these 42 articles are gold!

It warms my heart to see Resilient Web Design included in this list.

Just normal web things.

A plea to let users do web things on websites. In other words, stop over-complicating everything with buckets of JavaScript.

Honestly, this isn’t wishlist isn’t asking for much, and it’s a damning indictment of “modern” frontend development that we’ve come to this:

• Let me copy text so I can paste it.
• If something navigates like a link, let me do link things.
• …

Imagining a Future with Surgically Inserted Earbuds and Whale Concerts – Rolling Stone

Annalee Newitz:

When we imagine future tech, we usually focus on the ways it could turn humans into robotic workers, easily manipulated by surveillance capitalism. And that’s not untrue. But in this story, I wanted to suggest that there is a more subversive possibility. Modifying our bodies with technology could bring us closer to the natural world.

Accessibility for designer: where do I start? by Stéphanie Walter - UX Researcher & Designer.

Stéphanie has gathered a goldmine of goodies:

Articles, resources, checklists, tools, plugins and books to design accessible products

From ABC’s to 9999999 – Eric’s Archived Thoughts

See, about a year or so ago, I took inspiration from Kevin Smokler to set about listening through my entire music library alphabetically by song title.

I think I’m going to do this! I have a paltry 10,602 songs so it should take a mere 29 days of continuous listening.

This Is My Jam was a lovely website. Created by Hannah and Matt in 2011, it ran until 2015, at which point they had to shut it down. But they made sure to shut it down with care and consideration.

In many ways, This Is My Jam was the antithesis of the prevailing Silicon Valley mindset. Instead of valuing growth and scale above all else, it was deliberately thoughtful. Rather than “maximising engagement”, it asked you to slow down and just share one thing: what piece of music are you really into right now? It was up to you to decide whether “right now” meant this year, this month, this week, or this day.

I used to post songs there sporadically. Here’s a round-up of the twelve songs I posted in 2013. There was always some reason for posting a particular piece of music.

I was reminded of This Is My Jam recently when I logged into Spotify (not something I do that often). As part of the site’s shutdown, you could export all your jams into a Spotify playlist. Here’s mine.

Listening back to these 50 songs all these years later gave me the warm fuzzies.

WriteFreely

I hadn’t come across this before: a barebones blogging tool with built-in fediverse support—neat!

Tree views in CSS

Styling a list of nested details elements to create a beautiful lokking tree view, all in CSS, all nicely accessible.