Journal

An interesting BBC podcast on the history and true nature of the cloud.

We connect to the cloud, think of it as place-less, a digital “elsewhere” for storing and retrieving our data, content and memories. But far from being immaterial, the cloud is a vast, physical network made up of concrete, silicon and steel, of earthbound server farms, subterranean data centres and cables beneath the sea. It is not a publicly owned space or digital 'commons'. It is a multi-billion dollar, private infrastructure dominated by some of the world’s most powerful companies—principally Amazon, Microsoft and Google. The cloud exists within the same geography that we do: a patchwork of national and legal jurisdictions, which determine—most of the time—what it can and cannot do.

The aria-label and aria-labelledby attributes do the same thing but in different ways. Sometimes the two attributes are confused and this has unintended results. This post describes the differences between them and how to choose the right one.

The key takeaways for me were:

• Many HTML elements have an accessible name (which we can think of as its “label”) and this can be derived from the element’s content, an attribute, or from an associated element;
• for aria-labelledby, use the id of another element and that will then use that element’s text as your first element’s accessible name;
• use native HTML over ARIA where possible, but when you need ARIA it’s better to reuse than duplicate so if an appropriate label already exists in the document use aria-labelledby; otherwise use aria-label;
• an ARIA attribute will trump any other accessible name (such as the element’s content)
• there are some elements on which these ARIA attributes do not work consistently so check these before using.

I watched Tenet again last night (in IMAX with Jamie) and second time round it all made sense.

My initial viewing was good but really confusing; but this time I knew what was going on and loved it! Based on the plot, it actually makes sense that you need to see it twice, too.

This film has its flaws, no doubt, but for sheer invention, visuals you’ve genuinely never seen before, combined with the overall look, sound and mood, Mr Nolan has me hook, line and sinker and TBH I will likely never tire of watching his films. I expect to revisit this one roughly another ten times in the next year!

Footnote: I’ve been enjoying some internet rabbit-holing to squeeze out every last nuance of the plot I might have missed. Here are some great articles and resources which have helped (with the usual “heavy spoilers” caveat):

• Adactio’s fantastic review and insights
• Vulture’s humorous plot appraisal
• Transcript on Scraps from the Loft. It’s neither official nor 100% accurate but does a job.

I’m available for limited logo design projects. Just the logo. Limited back-and-forth. Reasonable price. With a particular focus on elevating small businesses that can’t or don’t want to hire a full-blown agency. Let’s keep this simple.

I’m a long-time fan of Dan Cederholm and his work. If I wanted a new logo, this is where I’d go!

We’re excited to announce the first beta release and general availability of the Rome linter for JavaScript and TypeScript. This is the beginning of an entire suite of tools. Rome is not only a linter, but also a compiler, bundler, test runner, and more, for JavaScript, TypeScript, HTML, JSON, Markdown, and CSS. We aim to unify the entire frontend development toolchain.

A very ambitious project from the creator of Babel.

Sometimes you want to create a line break after an inline element, while retaining that inline element’s inline status.

A lovely trick from Andy Bell for breaking after an inline element (such as a form label) using a pseudo-element and the white-space property, so that we can avoid setting the element to display: block (thereby becoming full-width etc) when we don’t want that.

Here’s my own codepen for posterity.

Jakarta Sans is a nice-looking Open Source (so free to use) typeface which I reckon I could use at some point.

(via @css)

The lovely new portfolio website of my colleague, Josh, featuring some lovely articles and design touches.

Daniel Post shared a really cool performance-optimisation trick for Eleventy on Twitter the other day. When statically generating your site you can loop through your pages and, for each, use PurgeCSS to find the required CSS, then inline that into the <head>. This way, each page contains only the CSS it needs and no more!

Check out the code.

I’ve just installed this on my personal site. I was already inlining my CSS into the <head> but the promise of only including the minimum CSS that each specific page needs was too good to resist.

Turned out it was a breeze to get working, a nice introduction to Eleventy transforms, and so far it’s working great!

I’ve been thinking about Scott Jehl’s “simplest way to load external CSS asynchronously” technique. I’m interested in its use of an inline (onload) event handler for running JavaScript-based enhancements in the <head>, in the context of some broader ruminations on how best to progressively enhance UI elements with JavaScript (for example adding toggle show/hide) without causing layout jank.

One really interesting aspect of using inline event handlers to apply enhancements was highlighted by Chris Ferdinandi today: as JavaScript goes, it’s pretty resilient.

Because we’re dealing with an HTML element directly in the document, and because the relevant JS is inline on that element and not dependent on any external files, the only case where the JS won’t run is if someone has JS completely turned off – a sub-1% proportion. The other typical JavaScript resilience pitfalls – such as network connections timing out, CDN failure and JS errors elsewhere blocking your code from running – simply don’t apply here.