Journal

This is a nice whistle-stop tour of the the Guardian’s current digital design system. Apart from looking great, some of the terminology is interesting (fronts, kickers and thrashers) and I like the way they have different Card types for different types of article, “each having its own flavour and tone”.

Some simple but inspiring work here from Seattle-based web developer Katherine Kato. I really like the use of space, the typography, the colour palette and the use of CSS grid for layout.

Previously classified cockpit audio, recorded by the astronauts themselves, gives a unique insight into their fears and excitement as they undertake the mission. And dramatic reconstruction brings those recordings to life, recreating the crucial scenes that were never filmed - the exhilarating launch, the first sight of the moon, the dramatic touchdown and nail-biting journey home.

Original archive footage from the Apollo programme is combined with newly shot film and cinematic CGI to create the ultimate documentary of the ultimate human adventure.

This can only be described as a stunning audiovisual experience and a fantastic tribute on the 50-year anniversary of the Apollo 11 mission!

Farewell Rutger Hauer; famous for his roles in Bladerunner, The Hitcher and the Guinness ads. And those were undoubtedly great, however… in 1989, for 13-year-old me at the height of my ninja obsession, he was the man as Nick Parker in Blind Fury, a film about a blind war veteran who is implausibly handy with a samurai sword and goes on to defeat Sho Kuzugi in the final showdown. It was daft, but I loved it.

Over 8,400 NASA Apollo moon mission photos, online, in high-resolution.

Sometimes, for reasons unknown, we find that clicking or tapping an element just isn’t working. Here’s a CSS-based approach that might help.

I’ve recently encountered the scenario – usually in reasonably complex user interfaces – where I have an anchor (or ocassionally, a button) on which clicks or taps just aren’t working, i.e. they don’t trigger the event I was expecting.

On further investigation I found that this is often due to having an absolutely positioned element which is to some extent overlaying (or otherwise interfering with) our target clickable element. Alternatively, it may be because we needed a child/nested element inside our anchor or button and it is this element that the browser perceives as being the clicked or tapped element.

I’ve found that setting .my-elem { pointer-events: none; } on the obscuring element resolves the problem and get you back on track.

Here’s some more information on CSS pointer events.

I’ll tell you wot – that woz a propa’ poolside page-turner and no mistake. Nice work Russ Forman.

Polypane is a browser built specifically for developing responsive websites. It can present typical device resolutions side-by-side (for example iphone SE next to iphone 7 next to iPad) but also has some nice features such as automatically creating views based on your stylesheet’s media query breakpoints.

It’s a subscription service and at the moment I’m happy using a combination of Firefox Nightly and Chrome so I think I’ll wait this one out for the time being. But I’ll be keeping my eye on it!

The HTML attribute aria-current allows us to indicate the currently active element in a sequence. It’s not only great for accessibility but also doubles as a hook to style that element individually.

By using [aria-current] as your CSS selector (rather than a .current class) this also neatly binds and syncs the way you cater to the visual experience and the screen reader experience, reducing the ability for the latter to be forgotten about.

As Léonie Watson explains, according to WAI-ARIA 1.1 there are a number of useful values that the aria-current attribute can take:

• page to indicate the current page within a navigation menu or pagination section;
• step for the current step in a step-based process;
• date for the current date.
• time for the current time.

I’ve been using the aria-current="page" technique on a couple of navigation menus recently and it’s working well.

Also: my thanks go to Ethan Marcotte, David Kennedy and Lindsey. Ethan recently suggested that the industry should try harder regarding accessibility and recommended subscribing to David Kennedy’s a11y Weekly newsletter. I duly subscribed (it’s great!) and one of the issues linked to Lindsey’s article An Introduction to ARIA states in which I learned about aria-current.

It’s a collection of shared patterns and practices that allow our team to build quality user interfaces consistently and quickly.