Hi.

A great resource from Dave Rupert, whose work on accessible components I’ve been meaning to write about since I saw his talk “The Four Devine Beasts of Accessibility” at An Event Apart last August.

It came to mind as I prepare to code a navigation menu with dropdown submenus in the most accessible way I can for a client project.

Dave has also written about the ideas behind creating these cards, and provided a few working demos.

Very cool free, web-based tool which detects a photo’s background and removes it, leaving only the subject on a transparent canvas.

A Book Apart have a new book – Everyday Information Architecture by Lisa Maria Martin.

I love this promotional website for the book, created by Mat Marquis. It’s a really simple but striking design.

@beep writes: “WebAIM has published an accessibility analysis of the top one million home pages and the results are abysmal”.

To address the issue he recommends we start small (picking up new accessibility tips regularly) and work together.

I agree. The web is supposed to be universal. We developers – or more accurately developers, designers, managers i.e. all of us – need to up our collective game to get things back on track.

I’ve always been interested in web accessibility and tried to do my best… but I can do better. I’ve just subscribed to David Kennedy’s A11y Weekly newsletter and plan to work through some sections of https://a11yproject.com/ as soon as possible.

Brooklyn-based designer and music nerd Rob Weychert has created a lovely “live music diary” website, featuring information about nearly every show he has attended. It’s browsable by genre, artist, venue, city, state, and year.

It also features a ton of interesting design, animation and layout features.

In Introducing Tinnitus Tracker Rob describes the initial concept and technology stack (Jekyll plus Javascript).

He has also recently written about how he used CSS Grid to create a complex, poster-style layout for gig listings.

Inspirational work!

Good, straightforward coaching video by Tom Lodziak.

The effects of long pimps are a little counter-intuitive, but they are predictable.

• Chops come to you with heavy backspin.
• Blocks come to you floaty / spin-free.
• Pushes come floaty or with a little topspin.

So here are some tactics:

1. topspin your first shot, then when you get a chop back (it’ll be heavier-than-expected backspin);
2. push your second shot, then when you get a push back (it’ll be float or even light topspin);
3. attack strongly with a flatter topspin.

The recipe for success is to practice against players with long pimps!

In this article, Scott Jehl suggests managing performance differently for new and returning visitors and that we could use a service worker (rather than a cookie) as a means of having the browser tell the server which category the request falls under.

I previously noted Keith J Grant’s article on the HTML dialog element which promised a native means of handling popups and modal dialogues.

I’ve not yet used dialog in production, partly because of spotty browser support (although there is a polyfill) and partly because – for reasons I couldn’t quite put my finger on after reading the spec – it just didn’t feel like the finished article.

Fast forward to March 2019 and Scott O’Hara has written an excellent piece describing why it’s still not ready. There are a combination of factors: lack of browser support, reliance on JavaScript; and multiple accessibility issues.

The good news is: having dug deeper into Scott’s work I see that among the many accessible components he has shared with the world is a custom, accessible modal dialogue. So next time the need arises, I think I’ll start there. Thanks, Scott!

Sometimes when coding a UI element you want a shadow around the whole box.

However, most CSS box-shadow examples/tutorials tend to show inset box-shadows or ones that otherwise sit off to the side.

Here’s how to apply box-shadow to the whole box for a simple but nice effect.

box-shadow: 0 0 4px #ccc;

Last Sunday I spent a free afternoon messing around with levelling up my skills with SVG.

I’d been meaning to finish reading Chris Coyier’s book Practical SVG for a while and although it goes pretty deep, I finally achieved it. Much of it focuses on using SVG within an icon system.

I have a number of thoughts I’ll share soon regarding my preferences on when to use inline SVG and when to use SVG as a background image.

In the meantime, here’s some fun I had implementing one of the many design tricks from the book – nesting a photo within an <svg> element then applying i) a greyscale filter; and ii) a black-to-white gradient mask to transition the photo from colour to black and white.

Since the photo’s subject is a lovely piece of fish, I’m calling my remix Grey Scales.

Check out Grey Scales on CodePen.

PS the original photo is courtesy of my talented wife. Clair – sorry for ruining your lovely photo and for yet another in a long line of fish puns.