Journal

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.

Here’s a list of useful (Mac-based) Sketch tips for my reference and yours.

Commands Quick Reference

Key Concepts

Starting with an Artboard

The initial canvas is infinite so we need a fixed frame (representing a device screen) on which to work.

Steps:

1. Add an artboard.
2. From the top-right choose one of the options (presets) e.g. Responsive Web > Desktop (1024 × 1024) or select “Custom”.
3. Rename your layer to something appropriate for the overall task, e.g. News Article.

Creating something

• Show rulers.
• Add markers by clicking in the horizontal ruler at the top to provide gutters. Create them at, say, 32px from each side.
• Add a text element, with lateral boundaries snapped to your markers. If it’s for body text, type my lorem0 shortcut ¹.

Appendix

1. the lorem0 shortcut accesses “lorem ipsum” text which I previously saved into Mac > Preferences > Keyboard > Text.

Bram Stein, a software architect at Adobe, wrote the book on Webfonts, so it’s no surprise that his own website showcases some pretty beautiful typography.

Type is set in Expo Serif Pro, Expo Sans Pro and Source Code Pro.

webmention.app is a great new project by Remy Sharp. He created it because he noticed that while adding webmentions to your site is relatively straightforward, sending outgoing webmentions is less so.

At the moment my personal website is Perch-based and I have webmentions enabled, so let’s see what happens when I link to Remy’s explainer article.