Archive: September, 2022

I wrote recently about making the switch to logical properties over on The Session.

Initially I tried ripping the band-aid off and swapping out all the directional properties for logical properties. After all, support for logical properties is green across the board.

But then I got some reports of people seeing formating issues. These people were using Safari on devices that could no longer update their operating system. Because versions of Safari are tied to versions of the operating system, there was nothing they could do other than switch to using a different browser.

I’ve said it before and I’ll say it again, but as long as this situation continues, Safari is not an evergreen browser. (I also understand that problem lies with the OS architecture—it must be incredibly frustrating for the folks working on WebKit and/or Safari.)

So I needed to add fallbacks for older browsers that don’t support logical properties. Or, to put it another way, I needed to add logical properties as a progressive enhancement.

“No problem!” I thought. “The way that CSS works, I can just put the logical version right after the directional version.”

element {
  margin-left: 1em;
  margin-inline-start: 1em;
}

But that’s not true in this case. I’m not over-riding a value, I’m setting two different properties.

In a left-to-right language like English it’s true that margin-inline-start will over-ride margin-left. But in a right-to-left language, I’ve just set margin-left and margin-inline-start (which happens to be on the right).

This is a job for @supports!

element {
  margin-left: 1em;
}
@supports (margin-inline-start: 1em) {
  element {
    margin-left: unset;
    margin-inline-start: 1em;
  }
}

I’m doing two things inside the @supports block. I’m applying the logical property I’ve just tested for. I’m also undoing the previously declared directional property.

A value of unset is perfect for this:

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, when the property is an inherited property, and like the initial keyword in the second case, when the property is a non-inherited property.

Now I’ve got three CSS features working very nicely together:

1. @supports (also known as feature queries),
2. logical properties, and
3. the unset keyword.

For anyone using an up-to-date browser, none of this will make any difference. But for anyone who can’t update their Safari browser because they can’t update their operating system, because they don’t want to throw out their perfectly functional Apple device, they’ll continue to get the older directional properties:

I discovered that my Mom’s iPad was a 1st generation iPad Air. Apple stopped supporting that device in iOS 12, which means it was stuck with whatever version of Safari last shipped with iOS 12.

As you can probably tell from the stuff I’ve been linking to today and today’s Clearleft newsletter, I’ve got design systems on my mind.

What I like about design systems is they encourage systems thinking …in theory. I mean, it’s right there in the name, right? But in practice I see design sytems focusing on the opposite of systems thinking: analytical thinking.

Okay, I realise that’s a gross oversimplification of both systems and thinking and analytical thinking, but why stop now?

Analytical thinking is all about breaking a big thing down into its constituent parts. By examining the individual parts you gain an understanding of the whole.

This is a great approach to understanding the world, particularly when it comes to phenonema that work the same everywhere in the universe. But it doesn’t work so well with messy phenonema like, say, people doing things together.

Systems thinking takes the opposite approach. You look at the bigger picture with the understanding that the individual parts are all interconnected somehow and can’t really be viewed in isolation.

To put it very bluntly, analytical thinking is about zooming in whereas systems thinking is about zooming out.

When it comes to design systems—or design in general—you need to have a mix of both.

If you neglect the analytical thinking, you may end up with a design system that has well-documented processes for how it operates, but is lacking the individual components.

If you neglect the systems thinking, you may end up with a design system that’s a collection of components, but with no understanding of how they’re supposed to work together.

Ideally, you want a good mix of both.

But I’ve got to be honest: if I had to err on one side more than the other, I think I’d rather have less analytical thinking and more systems thinking.

I keep thinking about this blog post I linked to last week by Jacob Kaplan-Moss. It’s called Quality Is Systemic:

Software quality is more the result of a system designed to produce quality, and not so much the result of individual performance. That is: a group of mediocre programmers working with a structure designed to produce quality will produce better software than a group of fantastic programmers working in a system designed with other goals.

I think he’s on to something. I also think this applies to design just as much as development. Maybe more so. In design, there’s maybe too much emphasis placed on the talent and skill of individual designers and not enough emphasis placed on creating and nurturing a healthy environment where anyone can contribute to the design process.

Jacob also ties this into hiring:

Instead of spending tons of time and effort on hiring because you believe that you can “only hire the best”, direct some of that effort towards building a system that produces great results out of a wider spectrum of individual performance.

I couldn’t agree more! It just one of the reasons why the smart long-term strategy can be to concentrate on nurturing junior designers and developers rather than head-hunting rockstars.

As an aside, if you think that the process of nurturing junior designers and developers is trickier now that we’re working remotely, I highly recommend reading Mandy’s post, Official myths:

Supporting junior staff is work. It’s work whether you’re in an office some or all of the time, and it’s work if Slack is the only office you know. Hauling staff back to the office doesn’t make supporting junior staff easier or even more likely.

Hiring highly experienced designers and developers makes total sense, at least in the short term. But I think the better long-term solution—as outlined by Jacob—is to create (and care for) a system where even inexperienced practitioners will be able to do good work by having the support and access to knowledge that they need.

I was thinking about this last week when Irina very kindly agreed to present a lunch’n’learn for Clearleft all about inclusive design.

She answered a question that had been at the front of my mind: what’s the difference between inclusive design and accessibility?

The way Irina put it, accessibility is focused on implementation. To make a website accessible, you need people with the necessary skills, knowledge and experience.

But inclusive design is about the process and the system that leads to that implementation.

To use that cliché of the double diamond, maybe inclusive design is about “building the right thing” and accessibility is about “building the thing right.”

Or to put it another way, maybe accessibility is about outputs, whereas inclusive design is about inputs. You need both, but maybe we put too much emphasis on the outputs and not enough emphasis on the inputs.

This is what made me think of Jacob’s assertion that quality is systemic.

Imagine someone who’s an expert at accessibility: they know all the details of WCAG and ARIA. Now put that person into an organisation that doesn’t prioritise accessibility. They’re going to have a hard time and they probably won’t be able to be very effective despite all their skills.

Now imagine an organisation that priorities inclusivity. Even if their staff don’t (yet) have the skills and knowledge of an accessibility expert, just having the processes and priorities in place from the start will make it easier for everyone to contribute to a more accessible experience.

It’s possible to make something accessible in the absence of a system that prioritises inclusive design but it will be hard work. Whereas making sure inclusive design is prioritised at an organisational level makes it much more likely that the outputs will be accessible.

I was refactoring some CSS on The Session over the weekend. I thought it would be good to switch over to using logical properties exclusively. I did this partly to make the site more easily translatable into languages with different writing modes, but mostly as an exercise to help train me in thinking with logical properties by default.

All in all, it went pretty smoothly. You can kick the tyres by opening up dev tools on The Session and adding a writing-mode declaration to the body or html element.

For the most part, the switchover was smooth. It mostly involved swapping out property names with left, right, top, and bottom for inline-start, inline-end, block-start, and block-end.

The border-radius properties tripped me up a little. You have to use shorthand like border-start-end-radius, not border-block-start-inline-end-radius (that doesn’t exist). So you have to keep the order of the properties in mind:

border-{{block direction}}-{{inline-direction}}-radius

Speaking of shorthand, I also had to kiss some shorthand declarations goodbye. Let’s say I use this shorthand for something like margin or padding:

margin: 1em 1.5em 2em 0.5em;

Those values get applied to margin-top, margin-right, margin-bottom, and margin-left, not the logical equivalents (block-start, inline-end, block-end, and inline-start). So separate declarations are needed instead:

margin-block-start: 1em;
margin-inline-end: 1.5em;
margin-block-end: 2em;
margin-inline-start: 0.5em;

Same goes for shorthand like this:

margin: 1em 2em;

That needs to be written as two declarations:

margin-block: 1em;
margin-inline: 2em;

Now I’ve said it before and I’ll say it again: it feels really weird that you can’t use logical properties in media queries. Although as I said:

Now you could rightly argue that in this instance we’re talking about the physical dimensions of the viewport. So maybe width and height make more sense than inline and block.

But along comes the new kid on the block (or inline), container queries, ready to roll with container-type values like inline-size. I hope it’s just a matter of time until we can use logical properties in all our conditional queries.

The other place where there’s still a cognitive mismatch is in transforms and animations. We’ve got a translateX() function but no translate-inline(). We’ve got translateY() but no translate-block().

On The Session I’m using some JavaScript to figure out the details of some animation effects. I’m using methods like getBoundingClientRect(). It doesn’t return logical properties. So if I ever want to adjust my animations based on writing direction, I’ll need to fork my JavaScript code.

Oh, and one other thing: the aspect-ratio property takes values in the form of width/height, not inline/block. That makes sense if you’re dealing with images, videos, or other embedded content but it makes it really tricky to use aspect-ratio on elements that contain text. I mean, it works fine as long as the text is in a language using a top-to-bottom writing mode, but not for any other languages.

dConstruct 2022 happened last Friday, September 9th.

And what an event it was! All eight talks were superb. To have eight speakers and not a single dud is pretty great. To have eight speakers and each one be absolutely brilliant is more than I could’ve hoped for.

Hidde has written a summary of the talks. I loved each and every one. I got to sit there in the front row of the beautiful Duke of York’s cinema and watch these supersmart people blow my mind.

With six of the eight speakers having spoken at previous dConstructs, there was a lot of nostalgia in the air on Friday.

It was the last dConstruct.

A lot of people seemed surprised by this even though I kept saying it was a one-off event. Really, the last dConstruct happened in 2015. This year’s event was a one-time-only anniversary event.

Obviously because the day was so great, people expressed sadness and disappointment that there wouldn’t be another. But like I said, if a band like The Velvet Underground reforms to do one last gig, that’s pretty cool; but if a band like The Velvet Underground reforms to go on endless tours, that’s kind of sad. It’s time to move on. Have one last blow-out and go out in style.

And who knows? Maybe there’ll be some other kind of dConstructy gathering in a different format. Perhaps an evening salon event is more suited to this kind of interdisciplinary mish-mash. But as a one-day conference, dConstruct is now officially over.

To be honest, there was never any doubt that dConstruct 2022 would be an excellent day of talks. I knew that each of the speakers would deliver the goods. I played it somewhat safe with the line-up. Because this was a kind of “best of” event, I could draw upon speakers from previous years who were guaranteed to be mesmerising.

In a weird way, that also highlights the biggest problem with this year’s dConstruct. Even though every individual talk was terrific, when you pull back and look at the line-up in aggregate, you can’t help but notice its lack of diversity.

That’s on me.

I could show you the list of people I tried to get. I could talk you through the spots that fell through. But all I’d be doing is giving you excuses. I could show that my intentions were good, but intentions don’t matter as much as actions. The proof of the pudding is in the eating, and what we ate last Friday was wonderful but also sadly representative of dConstruct’s homogenous history. For that reason alone, it’s time to draw a line under dConstruct.

It was a bittersweet send-off. On the one hand, I got to enjoy a day of brilliant talks. On the other hand, I’m pretty disappointed in myself that the line-up wasn’t more diverse. I can make all the claims I want about valuing diversity, but they’re hollow without meaningful results.

So that’s enough looking to the past. I’m bidding farewell to dConstruct and setting my sights on the future, a future that features more and different voices.

If you came along to dConstruct 2022, thank you! If you enjoyed attending dConstruct just half as much as I enjoyed hosting it …well, then I enjoyed it twice as much as you.

I’m taking a nice long weekend break after dConstruct on Friday (I will of course have more to say on that—I’m collecting my thoughts still—but it was a wonderful day).

On Saturday I did absolutely nothing. It was just as well really, considering that I may have over-indulged in the pub on Friday evening after dConstruct was done. So a day of lounging around idly playing mandolin was just the ticket.

Yesterday, Sunday, I had one of those perfect leisurely days.

It began with a good bout of lazing about in the morning. Then, as lunchtime approached, Jessica and I went to a nearby pub for a Sunday Roast. In this case it was the Dover Castle. It turned out to be an excellent choice—top notch roasts!

While we were enjoying our lunch, Jessica spotted a poster on the wall for Bark In The Park, a local fun day of dog-centred activities. We were sure it had already happened earlier in Summer, but the poster said it was rescheduled to …yesterday!

So after lunch we went to the park and spent the next few hours in the sunshine, petting very good dogs and enjoying the spectacle of such catgories as “fancy dress”, “best rescue”, and “sausage catching.” We left shortly before the announcement of “best in show”—my money was on Mayhem—so I could nip home, grab my mandolin, and head to The Bugle pub for the weekly 4pm Irish music session.

After two hours of jigs’n’reels, I headed home. The weather was still lovely. The forecast was for cloudy weather, but it was unexpectedly sunny. So I fired up the outdoor grill.

We grilled: one aubergine, halved and scored; one yellow courgette, halved; one green courgette, halved; half a hispe cabbage, quartered. Once they were nicely charred outside and soft within, we ate them with a drizzle of tahini sauce, accompanied by a green salad.

By that time the sun had gone down and it was time for a nice evening spent watching the latest episode of The Rings Of Power and drinking a nice cup of tea.

Like I said, a perfect leisurely day.

Just one more sleep until dConstruct—squee!

Not that I anticipate getting much sleep. My sleepnessness will partly be like that of a child on the night before Christmas. But my sleepnessness will also inevitably be that of an adult neurotically worrying about trifling details.

In reality, everything is all set. Thanks to the stellar Clearleft events team, I don’t need to lose any sleep. But my stupid brain can’t help but run a conveyer belt of potential problems through my mind: what about dongles? Power? Timings? What if there’s an impromptu rail strike? A deluge? Other emergencies you can’t even imagine?

I try to ignore those pestering pointless questions and instead think about the fantastic talks we’re going to get. I’m genuinely excited about each and every speaker. I’m pretty sure that once the day begins, I’ll forget all my worries and bliss out to the mind-expanding presentations.

The day before a conference feels kind of like the build-up to a battle. All the strategic decisions have been made, everything is in place, and now there’s nothing to do but wait.

I’ve communicated (or maybe over-communicated) all the relevant details to the speakers. And one week ago I sent one final email to the attendees with details of the schedule and some suggestions for lunch.

I also included this request:

Could you do me a favour? Would you mind getting a hold of a Covid test sometime in the next week and taking a test a day or two before dConstruct? (And if you test positive, please don’t come to the event.)

If you can’t get hold of a test (I know it can be tricky), then could you please bring a mask to wear when inside the venue?

I think asking everyone to take a test is a reasonable request, and nobody has objected to it. I worry that it’s yet another form of hygiene theatre (like providing anti-bacterial handwash for an airborne virus). After all, the antigen tests are most effective when you’ve already got symptoms. Taking a test when you don’t have symptoms might well give a negative result, but it doesn’t necessarily mean you don’t have Covid. Still, it’s a little intervention that might catch an infection that otherwise would’ve spread further.

I’m assuming that everyone coming to dConstruct is vaccinated. Maybe that’s naive on my part, but I figure if you’re intelligent enough to get a dConstruct ticket, you’re intelligent enough to protect yourself and others. So we won’t be requesting proof of vaccination. I hope my naivety aligns with reality.

See, this is all one more thing for my brain to gnaw on when I should be thinking about what a fantastic day of talks I’ve got ahead of me. Roll on tomorrow!