Journal

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.

The internet’s source of freely usable images. Powered by creators everywhere.

I’ve seen a couple of other developers use photos from Unsplash in their demos, and it just came in handy for me recently when needing some free food photography for a website.

It’s choc-full of lovely – and free – high-res photographs, offers a simple URL-based pattern for embedding, and has an API so will be really useful.

A couple of weeks ago I was kindly asked to provide a guest DJ mix for the Vic’s Sunday Soundclash show on Radio Magnetic.

You can listen to the show on demand.

Here’s the tracklist for my mix:

• Black Uhuru - Chill Out
• Jackie Mittoo - Oboe
• Joe Higgs - There’s A Reward For Me
• UBrown - Me Chat You Rock
• Riddim Tuffa ft OBF - Food Dub Ninja
• Mosca - Prento
• The Royals - My Sweat Turns To Blood
• Tatham/Ranks/Lord/Mensah - Private Life
• Freddie McGregor w/ Sound Dimension - Africa Here I Come
• Carlton Patterson w/King Tubby - King At The Controls
• King Tubby - Herbal Dub
• Carlton Coffie - Chant Away
• Fabian - Prophecy
• Prophecy Dub

I really enjoyed the chance to pull together reggae, dub and dancefloor favourites (old and new) for the mix. Cheers for the invite, Vicky!

You can catch Vic’s Sunday Soundclash on the first Sunday of each month at 2pm on Radio Magnetic.

Here’s a comprehensive and great-looking CSS reference featuring lots of examples.

While these days I normally reach for MDN Web Docs to keep me right on any given CSS feature, I’ve been thinking that with the recent explosion of new CSS features and syntax it’d be great to do a refresher course by working my way through a structured list of features—just like I did with Eric Meyer’s CSS: The Definitive Guide back in the day—and Codrops’ reference could be the perfect place.

In a similar vein, the CSS-Tricks Almanac looks good and cssreference.io is worth bookmarking, too.

Sliders (or carousels) are a fairly common practical requirement in web projects. Here, Chris Coyier shows us how far we can get in 2019 with HTML and CSS alone.