Tags: ad



Thursday, May 26th, 2022

dConstruct 2022 is happening!

dConstruct is back!

No, really, for real this time.

We had plans to do a one-off dConstruct anniversary event in 2020. It would’ve been five years since the event ran its ten year course from 2005 to 2015.

We all know what happened next. Not only was there no dConstruct in 2020, there were no live events at all. So we postponed the event. 2021 was slightly better than 2020 for live events, but still not safe enough for us.

Now, finally, the fifteenth anniversary edition of dConstruct is happening, um, on the seventeeth anniversary of dConstruct.

It’s all very confusing, I know. But this is the important bit:

dConstruct 2022 is happening on Friday, September 9th in the Duke of York’s picture house in Brighton.

Tickets are available now.

Or, at least some tickets are available now. Quite a lot of eager folks bought tickets when the 2020 event was announced and those tickets are still good for this 2022 event …which is the 2020 event, but postponed by two years.

I’m currently putting the line-up together. I’m not revealing anything just yet, but trust me, you will want to be there.

If you haven’t been to a dConstruct event before, it’s kind of hard to describe. It’s not a practical hands-on conference where you learn design or development skills. It’s brain food. It’s about technology, culutre, design, society, the future …well, like I said, it’s kind of hard to describe. Have a poke around the dConstruct archive and listen to the audio from previous talks to get some idea of what might be in store.

dConstruct 2022 is a one-off event. I wouldn’t want you to regret missing out, so grab your ticket now.

Wednesday, May 25th, 2022

Checked in at Jolly Brewer. Playing tunes! — with Jessica map

Checked in at Jolly Brewer. Playing tunes! — with Jessica

Alt writing

I made the website for this year’s UX London by hand.

Well, that’s not entirely true. There’s exactly one build tool involved. I’m using Sergey to include global elements—the header and footer—something that’s still not possible in HTML.

So it’s minium viable static site generation rather than actual static files. It’s still very hands-on though and I enjoy that a lot; editing HTML and CSS directly without intermediary tools.

When I update the site, it’s usually to add a new speaker to the line-up (well, not any more now that the line up is complete). That involves marking up their bio and talk description. I also create a couple of different sized versions of their headshot to use with srcset. And of course I write an alt attribute to accompany that image.

By the way, Jake has an excellent article on writing alt text that uses the specific example of a conference site. It raises some very thought-provoking questions.

I enjoy writing alt text. I recently described how I updated my posting interface here on my own site to put a textarea for alt text front and centre for my notes with photos. Since then I’ve been enjoying the creative challenge of writing useful—but also evocative—alt text.

Some recent examples:

But when I was writing the alt text for the headshots on the UX London site, I started to feel a little disheartened. The more speakers were added to the line-up, the more I felt like I was repeating myself with the alt text. After a while they all seemed to be some variation on “This person looking at the camera, smiling” with maybe some detail on their hair or clothing.

  • Videha Sharma
    The beaming bearded face of Videha standing in front of the beautiful landscape of a riverbank.
  • Candi Williams
    Candi working on her laptop, looking at the camera with a smile.
  • Emma Parnell
    Emma smiling against a yellow background. She’s wearing glasses and has long straight hair.
  • John Bevan
    A monochrome portrait of John with a wry smile on his face, wearing a black turtleneck in the clichéd design tradition.
  • Laura Yarrow
    Laura smiling, wearing a chartreuse coloured top.
  • Adekunle Oduye
    A profile shot of Adekunle wearing a jacket and baseball cap standing outside.

The more speakers were added to the line-up, the harder I found it not to repeat myself. I wondered if this was all going to sound very same-y to anyone hearing them read aloud.

But then I realised, “Wait …these are kind of same-y images.”

By the very nature of the images—headshots of speakers—there wasn’t ever going to be that much visual variation. The experience of a sighted person looking at a page full of speakers is that after a while the images kind of blend together. So if the alt text also starts to sound a bit repetitive after a while, maybe that’s not such a bad thing. A screen reader user would be getting an equivalent experience.

That doesn’t mean it’s okay to have the same alt text for each image—they are all still different. But after I had that realisation I stopped being too hard on myself if I couldn’t come up with a completely new and original way to write the alt text.

And, I remind myself, writing alt text is like any other kind of writing. The more you do it, the better you get.

Sunday, May 15th, 2022

Image previews with the FileReader API

I added a “notes” section to this website eight years ago. I set it up so that notes could be syndicated to Twitter. Ever since then, that’s the only way I post to Twitter.

A few months later I added photos to my notes. Again, this would get syndicated to Twitter.

Something’s bothered me for a long time though. I initially thought that if I posted a photo, then the accompanying text would serve as a decription of the image. It could effectively act as the alt text for the image, I thought. But in practice it didn’t work out that way. The text was often a commentary on the image, which isn’t the same as a description of the contents.

I needed a way to store alt text for images. To make it more complicated, it was possible for one note to have multiple images. So even though a note was one line in my database, I somehow needed a separate string of text with the description of each image in a single note.

I eventually settled on using the file system instead of the database. The images themselves are stored in separate folders, so I figured I could have an accompanying alt.txt file in each folder.

Take this note from yesterday as an example. Different sizes of the image are stored in the folder /images/uploaded/19077. Here’s a small version of the image and here’s the original. In that same folder is the alt text.

This means I’m reading a file every time I need the alt text instead of reading from a database, which probably isn’t the most performant way of doing it, but it seems to be working okay.

Here’s another example:

In order to add the alt text to the image, I needed to update my posting interface. By default it’s a little textarea, followed by a file upload input, followed by a toggle (a checkbox under the hood) to choose whether or not to syndicate the note to Twitter.

The interface now updates automatically as soon as I use that input type="file" to choose any images for the note. Using the FileReader API, I show a preview of the selected images right after the file input.

Here’s the code if you ever need to do something similar. I’ve abstracted it somewhat in that gist—you should be able to drop it into any page that includes input type="file" accept="image/*" and it will automatically generate the previews.

I was pleasantly surprised at how easy this was. The FileReader API worked just as expected without any gotchas. I think I always assumed that this would be quite complex to do because once upon a time, it was quite complex (or impossible) to do. But now it’s wonderfully straightforward. Story of the web.

My own version of the script does a little bit more; it also generates another little textarea right after each image preview, which is where I write the accompanying alt text.

I’ve also updated my server-side script that handles the syndication to Twitter. I’m using the /media/metadata/create method to provide the alt text. But for some reason it’s not working. I can’t figure out why. I’ll keep working on it.

In the meantime, if you’re looking at an image I’ve posted on Twitter and you’re judging me for its lack of alt text, my apologies. But each tweet of mine includes a link back to the original note on this site and you will most definitely find the alt text for the image there.

Saturday, May 14th, 2022


Checked in at Loam. Coffee and a sandwich — with Jessica

Wednesday, May 11th, 2022

Reinventing W3C Governance

To be honest, I’m not all that convinced by Robin’s arguments here about overhauling the governance model at the World Wide Web Consortium (partly because the way he describes the current model sounds pretty okay to me). But I’m very interested in what he has to say in the broader philosophical sense about using values to solve problems:

A value is worth something if it’s there to help you when the rubber hits the road and starts hydroplaning. Sure, you’ll need a handful of high-level lofty values as reminders, if only because there’s always a vocal guy (it’s always a guy) who thinks it’s just outrageous to put people before profits. But mostly you want Values You Can Use.

That might be the best description I’ve come across yet for design principles: values you can use.

When we say that engineering is about trade-offs, we’re saying that engineers solve their hardest problems using values (which they call “heuristics” because everyone’s entitled to be fancy some). In implementing a system, you might need to decide between an option that provides people with the best experience, another that delivers the greatest value to the shareholders, and yet a third one that makes the control centre blinkenlights dance in the prettiest way.

Friday, May 6th, 2022

wrong side of write

An opinionated blog about writing. I’ve subscribed in my feed reader.

Thursday, May 5th, 2022

Monday, May 2nd, 2022

Reading East West Street by Philippe Sands.

Buy this book

Saturday, April 30th, 2022

The Technium: 103 Bits of Advice I Wish I Had Known

I’m not usually that keen on lists of pithy aphorisms but some of these really resonated…

  • If you stop to listen to a musician or street performer for more than a minute, you owe them a dollar.
  • Efficiency is highly overrated; Goofing off is highly underrated. Regularly scheduled sabbaths, sabbaticals, vacations, breaks, aimless walks and time off are essential for top performance of any kind. The best work ethic requires a good rest ethic.
  • The biggest lie we tell ourselves is “I dont need to write this down because I will remember it.”
  • Buy used books. They have the same words as the new ones. Also libraries.
  • You can be whatever you want, so be the person who ends meetings early.
  • It’s thrilling to be extremely polite to rude strangers.

Wednesday, April 27th, 2022

Reading No One Is Talking About This by Patricia Lockwood.

Buy this book

Monday, April 25th, 2022

UI Pattern: Natural Language Form

I only just found this article about those “mad libs” style forms that I started with Huffduffer.

Sunday, April 24th, 2022

Reading On Tyranny by Timothy Snyder.

Buy this book

Wednesday, April 20th, 2022

Checked in at Jolly Brewer. Session ☘️🎶 — with Jessica map

Checked in at Jolly Brewer. Session ☘️🎶 — with Jessica

Friday, April 15th, 2022

Picture 1 Picture 2

Checked in at Kito Kito. Poke bowl — with Jessica

Wednesday, April 13th, 2022

Speaking at the Leading Design Conference, New York ‘22

The presentations themselves afforded a level of candor in personal narrative unlike any event I’ve been a part of thus far. We laughed, we cried (both quite literally), we were inspired — all, together. I can’t say enough about the vulnerability and courage of my fellow speakers, sharing their stories to move all of us — forward.

This is a lovely write-up of Leading Design New York from Justin.

The level of thought given to every nuance of this conference—from inclusiveness and safety, to privacy of discussed material and questions asked, to thoughtfulness of conference gear, to quality of the coffee via the on-premises baristas, to the well-conceived accompanying online program—were simply top-notch. Macro and micro. The event organizers and team: equally thoughtful and tremendous to work with.

Tuesday, April 12th, 2022

Starting and finishing

Someone was asking recently about advice for public speaking. This was specifically for in-person events now that we’re returning to actual live conferences.

Everyone’s speaking style is different so there’s no universal advice. That said, just about everyone recommends practicing. Practice your talk. Then practice it again and again.

That’s good advice but it’s also quite time-consuming. Something I’ve recommended in the past is to really concentrate on the start and the end of the talk.

You should be able to deliver the first five minutes of your talk in your sleep. If something is going to throw you, it’s likely to happen at the beginning of your talk. Whether it’s a technical hitch or just the weirdness and nerves of standing on stage, you want to be able to cruise through that part of the talk on auto-pilot. After five minutes or so, your nerves will have calmed and any audio or visual oddities should be sorted.

Likewise you want to really nail the last few minutes of your talk. Have a good strong ending that you can deliver convincingly.

Make it very clear when you’re done—usually through a decisive “thank you!”—to let the audience know that they may now burst into rapturous applause. Beware the false ending. “Thank you …and this is my Twitter handle. I always like hearing from people. So. Yeah.” Remember, the audience is on your side and they want to show their appreciation for your talk but you have to let them know without any doubt when the talk is done.

At band practice we sometimes joke “Hey, as long as we all start together and finish together, that’s what matters.” It’s funny because there’s a kernel of truth to it. If you start a song with a great intro and you finish the song with a tight rock’n’roll ending, nobody’s going to remember if somebody flubbed a note halfway through.

So, yes, practice your talk. But really practice the start and the end of your talk.

Picture perfect images with the modern img element - Stack Overflow Blog

Addy takes a deep dive into making sure your images are performant. There’s a lot to cover here—that’s why I ended up splitting it in two for the responsive design course: one module on responsive images and one on the picture element.

Reading The Testaments by Margaret Atwood.

Buy this book

“Design System Coverage,” an article from SuperFriendly

I completely agree with Dan that when it comes to design systems, completeness is an over-rated—and even counter-productive—goal:

Some organizations seem to hold up the ideal that, once a design system exists, everything in an interface can and should be built with it. Not only is that an unrealistic goal for most enterprises, but it can often be a toxic mindset that anything less than 100% coverage is misuse of a design system at best or utter failure at worst.