19 March 2019
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.
18 March 2019Very cool free, web-based tool which detects a photo’s background and removes it, leaving only the subject on a transparent canvas.
17 March 2019
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.
12 March 2019
@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.
12 March 2019
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.
He has also recently written about how he used CSS Grid to create a complex, poster-style layout for gig listings.
12 March 2019
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:
- topspin your first shot, then when you get a chop back (it’ll be heavier-than-expected backspin);
- push your second shot, then when you get a push back (it’ll be float or even light topspin);
- attack strongly with a flatter topspin.
The recipe for success is to practice against players with long pimps!
10 March 2019
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.
09 March 2019
Accessible modal dialogues in 2019
I previously noted Keith J Grant’s article on the HTML
dialogelement which promised a native means of handling popups and modal dialogues.
I’ve not yet used
dialogin 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.
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!
08 March 2019
Box Shadow around the full box
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-shadowto the whole box for a simple but nice effect.
box-shadow: 0 0 4px #ccc;
06 March 2019
Grey Scales – something fishy with SVG
Last Sunday I spent a free afternoon
messing around withlevelling 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.
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.