I thought it was about time I started blogging again.Let’s see if I can actually turn this into a habit and post more than once a year.This is probably the happiest I’ve been with anything I’ve designed in a while, at least. So I’ve got that going for me, which is nice.

Last night I spoke for the first time at the London Accessibility Meetup.I talked about how we build inclusive online forms across government, using a fictional GOV.UK service as an example.To those who weren’t able to make it, the talk is available on YouTube.In putting it together I found myself pulling together information from loads of different blog posts, previous talks, and from pull requests and issues from GitHub.This is an attempt to link out to all of those things, for anyone that wants to find out more.Update: I gave this talk again at MK Geek Night on 5 September 2019, as ‘Government services that work for everyone’. This version of the talk has been updated slightly to include new changes since February, and to adapt it for a more general audience. I’ve tried to document what was changed.Have I missed something out here? Feel free to edit this post on GitHub and raise a pull request..embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden

In an effort to stay sane whilst practising social distancing, Emily and I tried using a camera, tripod and Google Meet to play Pandemic with our friends Emma and Chris, remotely.I thought it was worth sharing how we did it.It’s very specific to the equipment that we have available to us (a Canon DSLR, and a Mac) but I hope it’s a useful starting point.The hardwareThe softwareThe barwareThe gameThe resultThe hardwareWe used a Canon 80D with a 10-18mm lens, mounted upside-down on a Benro Slim CF tripod[1], and connected to my MacBook Pro via USB.We set the tripod up on our dining room table, and laid out Pandemic underneath.Because we were playing at night, and had the tripod positioned directly under the dining room light, we also used a desk lamp to illuminate the board and get rid of the shadows from the tripod.I was expecting to have to change the camera battery during the game, but it held up pretty well, with a little under 50% left after a good couple of hours of gameplay. I’d de

These iOS Shortcuts allow you to control a SureFlap Cat Flap Connect or Pet Flap Connect using Siri. You can use them to:find out whether your pets are inside or outsideupdate your pet’s location, for example if they enter or leave the house via a door or windowThese shortcuts were created by me, and use the SurePet API which as far as I can tell is undocumented[1]. I am not associated with SureFlap, other than being a happy customer.They may well have bugs – at one point whilst creating these shortcuts SureFlap thought one of my cats went outside in the future.Use them at your own risk.Before you startConnecting Shortcuts to SurePetSet up a shortcut to find the location of your petsSet up shortcuts to update the location for your pets (optional)Using Shortcuts with HomePodBefore you startInstall the Shortcuts App from the iOS App StoreEnable ‘Allow untrusted shortcuts’ in the Shortcuts settingsConnecting Shortcuts to SurePetTo start with, we’re going to log in to SurePet using the ema

Having well-tested code helps you find bugs easily, and gives you the confidence to be able to make and ship changes whilst knowing that you (probably) haven’t broken anything.In GOV.UK Frontend, a lot of the logic that we care about is in our Sass, so we’ve found some techniques that we can use to test our Sass using Jest. I thought I’d write them up here in case they’re useful to someone else.You can find a repo with working examples on GitHub at 36degrees/sass-jest-examples. I’ve also provided links to the GOV.UK Frontend repo that show how we’re applying these techniques there.All of these examples assume that you’re using node-sass.First, let’s create a helper which wraps up sass.render into a Promise with some sensible default config, in a function which we can include from our tests:// helpers.jsconst util = require('util')const sass = require('node-sass')const sassRender = util.promisify(sass.render)module.exports.render = (options) => { return sassRender({ // Where node-sass s

Jumping on the weeknotes bandwagon, because why not. I mean, it passes the time, doesn’t it?MondayShipped a new version of GOV.UK Frontend.The headline feature was a new cookie banner component, which was a challenging component to build. We needed to try and work out how to support both server-side and client-side implementations, and after testing there were some difficult ‘least-worst option’ decisions to make around accessibility. Many of the things we were bumping up against really felt like they should be solved problems by now.Found some other interesting bugs whilst we were testing, including one which consistently made the WebKit process crash in Safari – something to try and report next week.Two other interesting things in the release worth calling out:a fix to stop a service’s session cookies being wiped when opening the print dialog in IE – one of those 🤯 bugs that honestly I’m impressed they got to the bottom ofan update to the character component to use tabular numbers f...

5 things that happened1. Proposed a change to the ARIA specOff the back of our team’s work around conditional reveals, we raised an issue on the ARIA repo to propose extending support for aria-expanded to radios.I’d like to see us doing more things like this going forward, where appropriate. We spend so much time trying to paper over the cracks in the various technologies the web is built on[1]. It’d be good to invest time now to try and improve things for our future selves.2. Reported a couple of bugsWhilst working on the cookie banner component we found that hiding the cookie banner in our review app would consistently crash the Safari WebKit process if you were using VoiceOver. This didn’t happen in the prototype we’d built.After a bit of investigation, we tracked it down to the :before pseudo-element on the <body> which shows us the active breakpoint – without the pseudo-element it didn’t happen.I also noticed that when the WebKit process crashes and the tab is reloaded, the notifi

Short one this week.Last week was a week of two halves – found the first half tough, but the second was better.End of year means it’s time to ask those around me for feedback, and the first few bits have found their way to my inbox. Not for the first time, delegation appears as a common theme in things to work on. I’ve just never been good at it.Have bought a few books to read with the intention of trying to turn that around, but I also know the next couple of weeks are going to busy. We’re preparing for our service assessment which is somehow a week next Thursday (how is it already March?).Ironically, if I was better at delegating it would probably feel less intimidating. But hopefully I can pick this thread up again afterwards.Outside of work, I’ve been:reading The House in the Cerulean Sea 📖watching The Magicians 📺eating West African-style chicken peanut stew 🥣listening to ‘Honey’ by Gentleman’s Dub Club 🎧fussing our cats 😻trying to get out and enjoy some fresh air, and the ear...

Last night as I was heading out to do some grocery shopping, I thought I’d try using the reminders app to keep track of our shopping list. I wanted to use the reminders app on my watch, so that I didn’t have to keep getting my phone out and unlocking it[1].However, our shopping list was in a note in the Notes app. I expected to be able to copy and paste the list into the Reminders app, but no – it just created a single reminder with the entire shopping list in it.This is definitely something that should just work, and it seems like a real oversight that it doesn’t, but at least it gave me something to do on my Saturday afternoon…I decided to try and use Automator to create a Quick Action to easily turn a text list into Reminders..embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin: 50px 0; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 1

Things that happenedPrepared for our live assessment next weekNext week I’m one of a few people representing the team for the Design System’s live service assessment.On Wednedsay we had a dry-run of the presentation part of the assessment, and on Friday we had our technical pre-call.It’s been interesting trying to find the right balance of information to include in the assessment itself, versus the pre-call. Compared to a typical service that might be assessed, the technical choices our team make have a much more fundamental impact on the products we deliver. And so it seems important to set the context effectively, to ensure the right discussions take place.Equally, we need to make sure we still have time to have a wider discussion and to answer questions. And I need to make sure that the content is accessible to the whole panel, not just the tech assessor.Daring to feel cautiously optimistic.Joined the cross-government design system weekly chatI joined the weekly cross-government des

I recently had a lot of fun working on some changes to the link styles on GOV.UK. Here’s everything I learned about text decoration in the process.We made two subtle but important changes to links.We moved underlines further away from the text, and made them consistently 1px thick, regardless of font size. This makes the link text easier to read, as the shape of each word is easier to discern.We made the hover state clearer, by thickening the underline to 3px when a user hovers over the link.This addresses a usability issue originally raised in an audit carried by the Digital Accessibility Centre way back in May 2019. They said:“The colour change when a user hovers over a link is not clear and this was especially difficult for low vision users to determine.Ensuring that the state change is distinctive would benefit low vision users in particular, while benefiting all mouse users in general.”You might not think that moving an underline a few pixels and changing its thickness is particul

I recently had the pleasure of working with Tring Theatre Company to light their amateur production of Calendar Girls The Musical at The Court Theatre in Tring.I’m always disappointed at the lack of useful information when Googling for anything to do with theatre lighting – especially from other folks involved with am-dram – so I thought it would be worth writing up what I did, what worked and what I’d want to improve.At the very least, it’ll be useful for me to come back to when it comes to my next production!The ShowThe cast on stage surrounded by sunflowers during the final scene, taken during one of the performances. Photo by Aldcroft Photography.After Annie’s husband John dies from leukaemia, her friend Chris has an idea – the ladies of the Knapeley Women’s Institute should create an ‘alternative’ calendar, to raise money to buy a new sofa for the hospital relative’s room. And by alternative, she means nude!After a couple of years of lockdown and restrictions, it was a delight to

In October 2021, Ian, a fellow frontend developer at GDS posted a message in our support channel for the GOV.UK Design System on Slack:“Just wondered if you were aware that the Safari Technology Preview is doing some quite strange things to the header, beta banner and buttons.”Safari Technology Preview is a version of the Safari browser designed to ‘give an early look at upcoming web technologies in macOS and iOS’. Most browser vendors provide similar versions of their browsers that developers can use to test new features.Prompted by Ian’s message, we took a look at the Design System using Safari Technology Preview.We could see the strange things that Ian had mentioned happening in the header, the beta banner, and the buttons. The last word within each of these elements was wrapping on to a new line when it didn’t need to.Why getting the bug fixed was importantSafari’s desktop market share is about 15%. Additionally, every browser on iOS, including Chrome, Edge and Firefox, uses the sa