Jeremy Keith's Blog, page 21

Button types

I���ve been banging the drum for a button type="share" for a while now.

I���ve also written about other potential button types. The pattern I noticed was that, if a JavaScript API first requires a user interaction���like the Web Share API���then that���s a good hint that a declarative option would be useful:

The Fullscreen API has the same restriction. You can���t make the browser go fullscreen unless you���re responding to user gesture, like a click. So why not have button type=���fullscreen” in HTML to encapsulate that? And again, the fallback in non-supporting browsers is predictable���it behaves like a regular button���so this is trivial to polyfill.

There���s another ���smell��� that points to some potential button types: what functionality do browsers provide in their interfaces?

Some browsers provide a print button. So how about button type="print"? The functionality is currently doable with button onclick="window.print()" so this would be a nicer, more declarative way of doing something that���s already possible.

It���s the same with back buttons, forward buttons, and refresh buttons. The functionality is available through a browser interface, and it���s also scriptable, so why not have a declarative equivalent?

How about bookmarking?

And remember, the browser interface isn���t always visible: progressive web apps that launch with minimal browser UI need to provide this functionality.

��ime Vidas was wondering about button type="copy��� for copying to clipboard. Again, it���s something that���s currently scriptable and requires a user gesture. It���s a little more complex than the other actions because there needs to be some way of providing the text to be copied, but it���s definitely a valid use case.

button type="share"button type="fullscreen"button type="print"button type="bookmark"button type="back"button type="forward"button type="refresh"button type="copy"

Any more?

Days of style and standards

I first spoke at CSS Day in Amsterdam back in 2016. Well, technically it was the HTML Day preceding CSS Day, when I talked about the A element. I spoke at CSS Day again last year, when I gave a presentation about alternative histories of styling.

One of the advantages to having spoken at the event in the past is that I���m offered a complementary ticket to the event every year. That���s an offer I���ve made the most of.

I���ve just returned from the latest iteration of CSS Day. It was, as always, excellent. I���ve said it before and I���ll say it again, but I just love the way that this event treats CSS with the respect it deserves. I always attend thinking ���I know CSS���, but I always leave thinking ���I learned a lot about CSS!���

The past few years have been incredibly exciting for the language. We���ve been handed feature after feature, including capabilities we were told just weren���t possible: container queries; :has; cascade layers; view transitions!

As Paul points out in his write-up, there���s been a shift in how these features feel too. In the past, the feeling was ���there���s some great stuff arriving and it���ll be so cool once we���ve got browser support.��� Now the feeling is finally catching up to the reality: these features are here now. If browser support for an exciting feature is still an issue, wait a few weeks.

Mind you, as Paul also points out, maybe that���s down to the decreased diversity in rendering engines. If a feature ships in Chromium, Webkit, and Gecko, then it���s universally supported. On the one hand, that���s great for developers. But on the other hand, it���s not ideal for the ecosystem of the web.

Anyway, as expected, there was a ton of mind-blowing stuff at CSS Day 2023. Most of the talks were deep dives into specific features. Those deep dives were bookended by big-picture opening and closing talks.

Manuel closed out the show by talking about he���s changing the way he writes and thinks about CSS. I think that���s a harbinger of what���s to come in the next year or so. We���ve had this wonderful burst of powerful new features over the past couple of years; I think what we���ll see next is consolidation. Understanding how these separate pieces play well together is going to be very powerful.

Heck, just exploring all the possibilities of custom properties and :has could be revolutionary. When you add in the architectural implications of cascade layers and container queries, it feels like a whole new paradigm waiting to happen.

That was the vibe of Una���s opening talk too. It was a whistle-stop tour of all the amazing features that have already landed, and some that will be with us very soon.

But Una also highlighted the heartbreaking disparity between the brilliant reality of CSS in browsers today versus how the language is perceived.

Look at almost any job posting for front-end development and you���ll see that CSS still isn���t valued as its own skill. Never mind that you could specialise in a subset of CSS���layout, animation, architecture���and provide 10x value to an organisation, the recruiters are going to play it safe and ask you if you know React.

Rachel Nabors and I were chatting about this gap between the real and perceived value of modern CSS. She astutely pointed out that CSS is kind of a victim of its own resilience. The way you wrote CSS ten years ago still works, and will continue to work. That���s by design. Yes, you can write much better, more resilient CSS today, but if those qualities aren���t valued by an organisation, then you���re casting your pearls before swine.

That said, it���s also true that the JavaScript you wrote ten years ago also continues to work today and will continue to work in the future. So why is it that devs seem downright eager to try the latest JavaScript hotness but are reluctant to use CSS that���s been stable for years?

Or perhaps that���s not an accurate representation of the JavaScript ecosystem. It may well be that the eagerness only extends to libraries and frameworks. There���s reluctance to embrace native JavaScript APIs like Proxy or web components. There���s a weird lack of trust in web standards, and an underserved faith in third-party libraries.

Una speculated that CSS needs a rebranding, like we did back in the days of CSS3, a term which didn���t have any technical meaning but helped galvinise excitement.

I���m not so sure. A successful rebranding today becomes a millstone tomorrow. Again, see CSS3.

Una finished with a call-to-action. Let���s work on building the CSS community.

She compared the number of ���front-end��� conferences dedicated to JavaScript���over 50 listed on one website���to the number of conferences dedicated to CSS. There���s just one. CSS Day.

Heydon wrote:

It occurs to me there are two types of web conferences: know-your-craft conferences and get-ahead conferences. It’s no coincidence there are simultaneously more get-ahead conferences and more JS-framework conferences.

Una encouraged us to organise more gatherings. It doesn���t need to be a conference. It could just be a local meet-up.

I think that���s an excellent suggestion. As Manuel puts it:

My biggest takeaway: The CSS community needs you!

For me, the value of CSS Day was partly in the excellent content being presented, but it was also in the opportunity to gather with like-minded individuals and realise I���m not alone. It���s also too easy to get gaslit by the grift of ���modern web development���, which seems to be built on a foundation of user-hostile priorities that don���t make sense to me���over-engineering, intertwingling of concerns, and developer experience ��ber alles. CSS Day was a welcome reminder to fuck that noise.

Sunday

Today was a good day. The weather was beautiful.

Jessica and I did a little bit of work in the garden���nothing too sweaty. Then Jessica cut my hair. It looks good. And it feels good to have my neck freed up.

We went for a Sunday roast at the nearest pub, which does a most excellent carvery. It was tasty and plentiful so after strolling home, I wanted to do nothing more than sit around.

I sat outside in the back garden under the dappled shade offered by the overhanging trees. I had a good book. I had my mandolin to hand. I���d reach for it occassionally to play a tune or two.

Coco the cat���not our cat���sat nearby, stretching her paws out lazily in the warm muggy air.

It was a good day.

Reaction

It all started with a trip into the countryside one Sunday a few weeks back.

The weather has been getting better and better. The countryside was calling. Meanwhile, Jessica was getting worried about her newly-acquired driving skills getting rusty. She has her license, but doesn���t get the chance to drive very often. She signed up to a car club that lets her book a hybrid car for a few hours at a time���just enough to keep in practice, and also just enough for a little jaunt into the countryside.

We went for Sunday lunch at the Shepherd and Dog in Fulking, near to Devil���s Dyke (I swear that sentence makes sense if you live ���round these parts). It was a lovely day. The Sunday roast was good. But it was on the way back that things started to go wrong.

We had noticed that one of the front tyres was looking a little flat so we planned to stop into a garage to get that seen to. We never made it that far. The tell-tale rhythmic sounds of rubber flapping around told us that we now had a completely flat tyre. Cue panic.

Fortunately we weren���t too far from a layby. We pulled in on the side of the busy road that runs by Saddlescombe Farm.

This is when the Kafkaesque portion of the day began. Jessica had to call the car club, but reception was spotty to put it mildly. There was much frustration, repitition, and hold music.

Eventually it was sorted out enough that we were told to wait for someone from the AA who���d come by and change the tyre in a few hours. To be fair, there are worse places to be stuck on a sunny Summer���s day. We locked the car and walked off across the rolling hills to pass the time.

The guy from the AA actually showed up earlier than expected. We hurried back and then sat and watched as he did his mechanical mending. We got the all-clear to drive the car back to Brighton, as long we didn���t exceed 50 miles per hour.

By the time we got home, we were beat. What a day! I could feel the beginnings of a headache so I popped some ibuprofin to stave it off. Neither of us could be bothered cooking, so we opted for a lazy evening in front of the telly eating takeaway.

I went onto Deliveroo and realised I couldn���t even manage the cognitive overhead of deciding what to eat. So I just went to my last order���a nice mix of Chinese food���and clicked on the option to place exactly the same order again.

And so we spent our Sunday evening munching on Singapore fried noodles and catching up on the most excellent Aussie comedy series, Colin From Accounts. It was just what I needed after an eventful day.

I had just finished my last bite when I felt I needed to cough. That kicked off some wheezing. That was a bit weird. So was the itchy sensation in my ears. Like, the insides of my ears were itchy. Come to think of it, my back was feeling really itchy too.

The wheeziness was getting worse. I had been trying to pass it off, responding to Jessica���s increasingly worried questions with ���I���m grand, I���ll be f������ Sorry, had to cough. Trying to clear my throat. It feels a bit constricted.

When Jessica asked if she should call 111, I nodded. Talking took a bit of effort.

Jessica described my symptoms over the phone. Then the operator asked to speak to me. I answered the same questions, but in a much wheezier way.

An ambulance was on its way. But if the symptoms got worse, we should call 999.

The symptoms got worse. Jessica called 999. The ambulance arrived within minues.

The two paramedics, Alastair and Lucy, set to work diagnosing the problem. Let���s go into the ambulance, they said. They strapped a nebuliser onto my face which made breathing easier. It also made everything I said sound like a pronouncement from Bane.

They were pretty sure it was anaphylaxis. I���ve never been allergic to anything in my life, but clearly I was reacting to something. Was it something in the Chinese food? Something in the countryside?

In any case, they gave me a jab of antihistamine into my arm and took us to the emergency room.

By the time we got there, I was feeling much better. But they still needed to keep me under observation. So Jessica and I spent a few hours sitting in the hallway. Someone came by every now and then to check on me and offer us some very welcome cups of tea.

Once it was clear that I was fully recovered, I was discharged with a prescription for an EpiPen.

I picked up the prescription the next day. Having an EpiPen filled with adrenaline was reassuring but it was disconcerting not knowing what caused my anaphylactic reaction in the first place.

After that stressful weekend, life went back to normal, but with this cloud of uncertainty hovering above. Was that it? Would it happen again? Why did it happen?

The weather stayed nice all week. By the time the next weekend rolled around, I planned to spend it doing absolutely nothing. That was just as well, because when I woke up on Saturday morning, I had somehow managed to twist something in my shoulder. I guess I���m at that age now where I can injure myself in my sleep.

I took some neproxin, which helped. After a while, the pain was gone completely.

Jessica and I strolled to the park and had brunch in a nice local caf��. Then we strolled home and sat out in the garden, enjoying the sunshine.

I was sitting there reading my book when I noticed it. The insides of my ears. They were getting itchy. I swallowed nervously. Was it my imagination or did that swallowing sensation feel slightly constricted. And is that a wheeze I hear?

It was happening again.

The symptoms continued to get worse. Alright, it was time to use that EpiPen. I had read the instructions carefully so I knew just what to do. I did the EpiPen mambo: hold, jab, press.

It worked. We called 999 (as instructed) and were told to go the emergency room. This time we went by taxi.

I checked in, and then sat in the waiting room. I noticed that everyone else had white wristbands, but mine was red. I guess my place in the triage was high priority.

As I sat there, I could feel some of those symptoms returning, but very slowly. By the time we saw someone, there was no mistaking it. The symptoms were coming back.

I was hooked up to the usual instruments���blood pressure, heart rate, blood oxygen���while the hospital staff conferred about what to do. I was getting a bit clammy. I started to feel a bit out of it.

Beep, beep! One of those numbers���blood oxygen?���had gone below a safe threshold. I saw the staff go into action mode. Someone hit a button���the red light in the ceiling started flashing. Staff who had been dealing with other patients came to me.

Instructions were spoken clearly and efficiently, then repeated back with equal clarity and efficiency. ���Adrenaline. One in ten thousand.��� ���Adrenaline. One in ten thousand.��� They reclined my chair, elevated my legs, pulled down my trousers, and gave me my second shot in one day.

It worked. I started to feel much better straight away. But once again, I needed to be kept under observation. I was moved to the ���recus��� ward, passing through the corridor that was so familiar from the previous weekend.

This time we���d spend a grand total of twelve hours in the hospital. Once again, it was mercifully uneventful. But it gave us the opportunity to put two and two together. What was the common thread between both episodes?

Ibuprofin. Neproxin. They���re both non-steroidal anti-inflammatory drugs (NSAIDS). That fits

Foods are the most common trigger in children and young adults, while medications and insect bites and stings are more common in older adults. ��� Any medication may potentially trigger anaphylaxis. The most common are ��-lactam antibiotics (such as penicillin) followed by aspirin and NSAIDs.

The doctors agreed���the connection looked pretty clear. I saw my GP a few days later and she���s reffered me to an allergy-testing clinic to confirm it. That might take a while though. In the meantime, I also got another prescription for more EpiPens.

Hopefully I won���t need them. I���m very, very glad that I don���t appear to be allergic to a foodstuff. I���d rather do without ibuprofin and aspirin than have to vigilantly monitor my diet.

But I do need to get into the habit of making sure I���ve got at least one EpiPen with me wherever I go. I���ll probably never need to use it. I feel like I���ve had enough anaphylaxis in the past couple of weeks to last me a lifetime.

Oh, and one more thing. I know everyone says this after dealing with some kind of health emergency in this country, but I���m going to say it anyway:

The NHS is easily the best thing ever invented in the UK. Everyone I dealt with was fantastic. It was all in a day���s work for them, but I am forever in their debt (whereas had this happened in, say, the USA, I would forever be in a much more literal debt).

Thank you, NHS!

Accessibility audits for all

It���s often said that it���s easier to make a fast website than it is to keep a website fast. Things slip through. If you���re not vigilant, performance can erode without you noticing.

It���s a similar story for other invisible but important facets of your website: privacy, security, accessibility. Because they���re hidden from view, you won���t be able to see if there���s a regression.

That���s why it���s a good idea to have regular audits for performance, privacy, security, and accessibility.

I wrote about accessibility testing a while back, and how there���s quite a bit that you can do for yourself before calling in an expert to look at the really gnarly stuff:

When you commission an accessibility audit, you want to make sure you���re getting the most out of it. Don���t squander it on issues that you can catch and fix yourself. Make sure that the bulk of the audit is being spent on the specific issues that are unique to your site.

I recently did an internal audit of the Clearleft website. After writing up the report, I also did a lunch���n���learn to share my methodology. I wanted to show that there���s some low-hanging fruit that pretty much anyone can catch.

To start with, there���s keyboard navigation. Put your mouse and trackpad to one side and use the tab key to navigate around.

Caveat: depending on what browser you���re using, you might need to update some preferences for keyboard navigation to work on links. If you���re using Safari, go to ���Preferences���, then ���Advanced���, and tick ���Press Tab to highlight each item on a web page.���

Tab around and find out. You should see some nice chunky :focus-visible styles on links and form fields.

Here���s something else that anyone can do: zoom in. Increase the magnification to 200%. Everything should scale proportionally. How about 500%? You���ll probably see a mobile-friendly layout. That���s fine. As long as nothing is broken or overlapping, you���re good.

At this point, I reach for some tools. I���ve got some bookmarklets that do similar things: tota11y and ANDI. They both examine the source HTML and CSS to generate reports on structure, headings, images, forms, and so on.

These tools are really useful, but you need to be able to interpret the results. For example, a tool can tell you if an image has no alt text. But it can���t tell you if an image has good or bad alt text.

Likewise, these tools are great for catching colour-contrast issues. But there���s a big difference between a colour-contrast issue on the body copy compared to a colour-contrast issue on one unimportant page element.

I think that demonstrates the most important aspect of any audit: prioritisation.

Finding out that you have accessibility issues isn���t that useful if they���re all presented as an undifferentiated list. What you really need to know are which issues are the most important to fix.

By the way, I really like the way that the Gov.uk team prioritises accessibility concerns:

The team puts accessibility concerns in 2 categories:

Theoretical: A question or statement regarding the accessibility of an implementation within the Design System without evidence of real-world impact. Evidenced: Sharing new research, data or evidence showing that an implementation within the Design System could cause barriers for disabled people.

The team will usually prioritise evidenced issues and queries over theoretical ones.

When I wrote up my audit for the Clearleft website, I structured it in order of priority. The most important things to fix are at the start of the audit. I also used a simple scale for classifying the severity of issues: low, medium, and high priority.

Thankfully there were no high-priority issues. There were a couple of medium-priority issues. There were plenty of low-priority issues. That���s okay. That���s a pretty good distribution.

If you���re interested, here���s the report I delivered���

Accessibility audit on clearleft.comColour contrast

There are a few issues with the pink colour. When it���s used on a grey background, or when it���s used as a background colour for white text, the colour contrast isn���t high enough.

The SVG arrow icon could be improved too.

RecommendationsMedium priorityChange the pink colour universally to be darker. The custom property --red is currently rgb(234, 33, 90). Change it to rgb(210, 20, 73) (thanks, James!)Low priorityThe SVG arrow icon currently uses currentColor. Consider hardcoding solid black (or a very, very dark grey) instead.Images

Alt text is improving on the site. There���s reasonable alt text at the top level pages and the first screen���s worth of case studies and blog posts. I made a sweep through these pages a while back to improve the alt text but I haven���t done older blog posts and case studies.

RecommendationsMedium priorityMake a sweep of older blog posts and case studies and fix alt text.Low priorityImages on the contact page have alt text that starts with ���A photo of������ ��� this is redundant and can be removed.Headings

The site is using headings sensibly. Sometimes the nesting of headings isn���t perfect, but this is a low priority issue. For example, on the contact page there���s an h1 followed by two h3s. In theory this isn���t correct. In practice (for screen reader users) it���s not an issue.

RecommendationsLow priorityOn the home page, ���UX London 2023��� should probably be h3 instead of h1.On the case studies index page we���re currently using h3 headings for the industry sector (���Charities���, ���Education��� etc.) but these should probably not be headings at all. On the blog index page we use a class ���Tags��� for a similar purpose. Consider reusing that pattern on the case studies index page.On the about index page, ���We���re driven to be��� is an h3 and the subsequent three headings are h2s. Ideally this would be reversed: a single h2 followed by three h3s.Link text

Sometimes the same text is used for different links.

RecommendationsLow priorityOn the home page the text ���Read the case study��� is re-used for multiple links. It would be better if each link were different e.g. ���Read about The Natural History Museum.���Forms

The only form on the site is the newsletter sign-up form. It���s marked up pretty well: the input has an associated label, although a visible (clickable) label would be better.

Tabbing order

The site doesn���t use JavaScript to mess with tabbing order for keyboard users. The source order of elements in the markup generally makes sense so all is good.

The focus styles are nice and clear too!

Structure

The site is using HTML landmark elements sensibly (header, nav, main, footer, etc.).

Five questions

In just a couple of weeks, I���ll be heading to Bristol for Pixel Pioneers. The line-up looks really, really good ���with the glaring exception of the opening talk, which I���ll be delivering. But once that���s done, I���m very much looking forward to enjoying the rest of the day���s talks.

There are still tickets available if you fancy joining me.

This will be my second time speaking at this conference. I spoke at the inaugural conference back in 2017 when I gave a talk called Evaluating Technology. This time my talk is called Declarative Design.

A few weeks back, Oliver asked me some questions about my upcoming talk. I figured I���d post my answers here���

Welcome back to Pixel Pioneers! You return with another keynote - how do you manage to stay so ever-enthusiastic about designing for the web?

Well, I���d say my enthusiasm is mixed with frustration. And that���s always been the case. Just as I���ve always found new things that excite me about the World Wide Web, there are just as many things that upset me.

But that���s okay. Both forces can be motivating. When I find myself writing a blog post or preparing a talk, the impetus might be ���This is so cool! Check this out!��� or it might be ���This is so maddening! What���s happening!?��� ���or perhaps a mix of both.

But to answer your question, the World Wide Web never stays still so there���s always something to get excited about. Equally, the longer the web exists, the more sense it makes to examine the fundamental bedrock���HTML, accessibility,progressive enhancement���and see how they���re just as important as ever. And that���s also something to get excited about!

Without too many spoilers, what can we expect to take away from your talk?

I���m hoping to provide people with a lens that they can use to examine their tools, processes, and approaches to designing for the web. It���s a fairly crude lens���it divides the world into a binary split that I���ve borrowed from the world of programming; imperative and declarative languages. But it���s a surprisingly thought-provoking angle.

Along the way I���ll also be pointing out some of the incredible things that we can do with CSS now. In the past few years there���s been an explosion in capabilities.

But this won���t be a code-heavy presentation. It���s mostly about the ideas. I���ll be referencing some projects by other people that I���m very excited by.

What other web design and development tools, techniques and technologies are you currently most excited about?

Outside of the world of CSS���which is definitely where a lot of the most exciting developments are happening���I���m really interested in the View Transitions API. If it delivers on its promise, it could be a very useful nail in the coffin of uneccessary single page apps. But I���m a little nervous. Right now the implementation only works for single page apps, which makes it an incentive to use that model. I really, really hope that the multipage version ships soon.

But honestly, I probably get most excited about discovering some aspect of HTML that I wasn���t aware of. Even after all these years the language can still surprise me.

And on the flipside, what bugs you most about the web at the moment?

How much time have you got?

Seriously though, the thing that���s really bugged me for the past decade is the increasing complexity of ���modern��� frontend development when it isn���t driven by user needs. Yes, I���m talking about JavaScript frameworks like React and the assumption that everything should be a single page app.

Honestly, the mindset became so ubiquitous that I felt like I must be missing something. But no, the situation really has spiralled out of control, much to the detriment of end users.

Luckily we���re starting to see the pendulum swing back. The proponents of trickle-down developer convenience are having to finally admit that it���s bollocks.

I don���t care if the move back to making websites is re-labelled as ���isomorphic server-rendered multi-page apps.��� As long as we make sensible architectural decisions, that���s all that matters.

What’s next, Jeremy?

Right now I���m curating the line-up for this year���s UX London conference which is the week after Pixel Pioneers. As you know, conference curation is a lot of work, but it���s also very rewarding. I���m really proud of the line-up.

It���s been a while since the last season of the Clearleft podcast. I hope to remedy that soon. It takes a lot of effort to make even one episode, but again, it���s very rewarding.

Add view transitions to your website

I must admit, when Jake told me he was leaving Google, I got very worried about the future of the View Transitions API.

To recap: Chrome shipped support for the API, but only for single page apps. That had me worried:

If the View Transitions API works across page navigations, it could be the single best thing to happen to the web in years.

If the View Transitions API only works for single page apps, it could be the single worst thing to happen to the web in years.

Well, the multi-page version still hasn���t yet shipped in Chrome stable, but it is available in Chrome Canary behind a flag, so it looks like it���s almost here!

Robin took the words out of my mouth:

Anyway, even this cynical jerk is excited about this thing.

Are you the kind of person who flips feature flags on in nightly builds to test new APIs?

Me neither.

But I made an exception for the View Transitions API. So did Dave:

I think the most telling predictor for the success of the multi-page View Transitions API ��� compared to all other proposals and solutions that have come before it ��� is that I actually implemented this one. Despite animations being my bread and butter for many years, I couldn���t be arsed to even try any of the previous generation of tools.

Dave���s post is an excellent step-by-step introduction to using view transitions on your website. To recap:

Enable these two flags in Chrome Canary:

chrome://flags#view-transitionchrome:...

Then add this meta element to the head of your website:

You could stop there. If you navigate around your site, you���ll see that the navigations now fade in and out nicely from one page to another.

But the real power comes with transitioning page elements. Basically, you want to say ���this element on this page should morph into that element on that page.��� And when I say morph, I mean morph. As Dave puts it:

Behind the scenes the browser is rasterizing (read: making an image of) the before and after states of the DOM elements you���re transitioning. The browser figures out the differences between those two snapshots and tweens between them similar to Apple Keynote���s ���Magic Morph��� feature, the liquid metal T-1000 from Terminator 2: Judgement Day, or the 1980s cartoon series Turbo Teen.

If those references are lost on you, how about the popular kids book series Animorphs?

Some classic examples would be:

A thumbnail of a video on one page morphs into the full-size video on the next page.A headline and snippet of an article on one page morphs into the full article on the next page.

I���ve added view transitions to The Session. Where I���ve got index pages with lists of titles, each title morphs into the heading on the next page.

Again, Dave���s post was really useful here. Each transition needs a unique name, so I used Dave���s trick of naming each transition with the ID of the individual item being linked to.

In the recordings section, for example, there might be a link like this on the index page:

The Banks Of The Moy

Which, if you click on it, takes you to the page with this heading:

The Banks Of The Moy

Why the span? Well, like Dave, I noticed some weird tweening happening between block and inline elements. Dave solved the problem with width: fit-content on the block-level element. I just stuck in an extra inline element.

Anyway, the important thing is that the name of the view transition matches: recording-7812.

I also added a view transition to pages that have maps. The position of the map might change from page to page. Now there���s a nice little animation as you move from one page with a map to another page with a map.

That���s all good, but I found myself wishing that I could just have those enhancements. Every single navigation on the site was triggering a fade in and out���the default animation. I wondered if there was a way to switch off the default fading.

There is! That default animation is happening on a view transition named root. You can get rid of it with this snippet of CSS:

::view-transition-image-pair(root) { isolation: auto;}::view-transition-old(root),::view-transition-new(root) { animation: none; mix-blend-mode: normal; display: block;}

Voila! Now only the view transitions that you name yourself will get applied.

You can adjust the timing, the easing, and the animation properites of your view transitions. Personally, I was happy with the default morph.

In fact, that���s one of the things I like about this API. It���s another good example of declarative design. I say what I want to happen, but I don���t need to specify the details. I���ll let the browser figure all that out.

That���s what���s got me so excited about this API. Yes, it���s powerful. But just as important, it���s got a very low barrier to entry.

Chris has gathered a bunch of examples together in his post Early Days Examples of View Transitions. Have a look around to get some ideas.

If you like what you see, I highly encourage you to add view transitions to your website now.

���But wait,��� I hear you cry, ���this isn���t supported in any public-facing browser yet!���

To which, I respond ���So what?��� It���s a perfect example of progressive enhancement. Adding one meta element and a smidgen of CSS will do absolutely no harm to your website. And while no-one will see your lovely view transitions yet, once browsers do start shipping with support for the API, your site will automatically get better.

Your website will be enhanced. Progressively.

Talks and workshops at UX London 2023

Back in November of last year I announced that UX London would be returning in 2023 and that I���d be curating the line-up again. That���s where I���ve been putting a lot of my energy over the last six months.

The line-up is complete. If I step back and try to evaluate it objectively, I���ve gotta say ���hot damn, that���s a fine roster of speakers!

Imran Afzal, Vimla Appadoo, Daniel Burka, Trine Falbe, Vitaly Friedman, Mansi Gupta, Stephen Hay, Asia Hoe, Amy Hupe, Paul Robert Lloyd, Stacey Mendez, Ignacia Orellana, Stefanie Posavec, Hannah Smith, and David Dylan Thomas.

Take a look at the complete schedule���a terrific mix of thought-provoking talks and practical hands-on workshops.

On day one, you���ve got these talks:

Designing your design process,Thinking differently about digital sustainability,Let���s choose empathy,The lies we tell ourselves about design systems, andWhat if people weren���t the product? Building a web that loves humanity.

Then on day two:

The necessity and practice of women-centric design,Time team: Documenting decisions and marking milestones,User experience beyond screens,Can designers save lives? Not by themselves, andGhosts in the machine: AI, design, and ethics.

And that���s just the talks! You���ve also got these four excellent workshops on both days:

Practical, ethical design,Designing for complex UIs,Strategies for creating and evolving design systems, andDataviz sketching session.

That���s a lot of great stuff packed into two days!

In case you haven���t guessed, I am very excited about this year���s UX London. I would love to see you there.

As an appreciation for you putting up with my child-like excitement, I���d like to share a discount code with you. You can get 20%���that���s one fifth!���off the ticket price using the code CLEARLEFT20.

But note that the standard ticket pricing ends on Friday, May 26th so use that code in the next week to get the most bang for your buck. After that, there���ll only be last-chance tickets, which cost more.

Looking forward to seeing you at Tobacco Dock on June 22nd and 23rd!

Nailspotting

I���m sure you���ve heard the law of the instrument: when all you have is a hammer, everything looks like a nail.

There���s another side to it. If you���re selling hammers, you���ll depict a world full of nails.

Recent hammers include cryptobollocks and virtual reality. It wasn���t enough for blockchains and the metaverse to be potentially useful for some situations; they staked their reputations on being utterly transformative, disrupting absolutely every facet of life.

This kind of hype is a terrible strategy in the long-term. But if you can convince enough people in the short term, you can make a killing on the stock market. In truth, the technology itself is superfluous. It���s the hype that matters. And if the hype is over-inflated enough, you can even get your critics to do your work for you, broadcasting their fears about these supposedly world-changing technologies.

You���d think we���d learn. If an industry cries wolf enough times, surely we���d become less trusting of extraordinary claims. But the tech industry continues to cry wolf���or rather, ���hammer!������at regular intervals.

The latest hammer is machine learning, usually���incorrectly���referred to as Artificial Intelligence. What makes this hype cycle particularly infuriating is that there are genuine use cases. There are some nails for this hammer. They���re just not as plentiful as the breathless hype���both positive and negative���would have you believe.

When I was hosting the DiBi conference last week, there was a little section on generative ���AI��� tools. Matt Garbutt covered the visual side, demoing tools like Midjourney. Scott Salisbury covered the text side, showing how you can generate code. Afterwards we had a panel discussion.

During the panel I asked some fairly straightforward questions that nobody could answer. Who owns the input (the data used by these generative tools)? Who owns the output?

On the whole, it stayed quite grounded and mercifully free of hyperbole. Both speakers were treating the current crop of technologies as tools. Everyone agreed we were on the hype cycle, probably the peak of inflated expectations, looking forward to reaching the plateau of productivity.

Scott explicitly warned people off using generative tools for production code. His advice was to stick to side projects for now.

Matt took a closer look at where these tools could fit into your day-to-day design work. Mostly it was pretty sensible, except when he suggested that there could be any merit to using these tools as a replacement for user testing. That���s a terrible idea. A classic hammer/nail mismatch.

I think I moderated the panel reasonably well, but I have one regret. I wish I had first read Baldur Bjarnason���s new book, The Intelligence Illusion. I started reading it on the train journey back from Edinburgh but it would have been perfect for the panel.

The Intelligence Illusion is very level-headed. It is neither pro- nor anti-AI. Instead it takes a pragmatic look at both the benefits and the risks of using these tools in your business.

It has excellent advice for spotting genuine nails. For example:

Generative AI has impressive capabilities for converting and modifying seemingly unstructured data, such as prose, images, and audio. Using these tools for this purpose has less copyright risk, fewer legal risks, and is less error prone than using it to generate original output.

Think about transcripts of videos or podcasts���an excellent use of this technology. As Baldur puts it:

The safest and, probably, the most productive way to use generative AI is to not use it as generative AI. Instead, use it to explain, convert, or modify.

He also says:

Prefer internal tools over externally-facing chatbots.

That chimes with what I���ve been seeing. The most interesting uses of this technology that I���ve seen involve a constrained dataset. Like the way Luke trained a language model on his own content to create a useful chat interface.

Anyway, The Intelligence Illusion is full of practical down-to-earth advice based on plenty of research backed up with copious citations. I���m only halfway through it and it���s already helped me separate the hype from the reality.

Hosting DIBI

I was up in Edinburgh for the past few days at the Design It; Build It conference.

I was supposed to come back on Saturday but then the train strikes were announced so I changed my travel plans to avoid crossing a picket line, which gave me an extra day to explore Auld Reekie.

I spoke at DIBI last year so this time I was there in a different capacity. I was the host. That meant introducing the speakers and asking them questions after their talks.

I���m used to hosting events now, what with UX London and Leading Design. But I still get nervous beforehand. At least with a talk you can rehearse and practice. With hosting, it���s all about being nimble and thinking on your feet.

I had to pay extra close attention to each talk, scribbling down potential questions to ask. It���s similar to the feeling I get when I���m liveblogging talks.

There were some line-up changes and schedule adjustments along the way, but everything went super smoothly. I pride myself on running a tight ship so the timings were spot-on.

When it came to the questions, I tried to probe under the skin of each presentation. For some talks, that involved talking shop���the finer points of user research or the design process, say. But for the big-picture talks, I made sure to get each speaker to defend their position. So after Dan Makoski���s kumbaya-under-capitalism talk, I gave him a good grilling. Same with Philip Lockwood-Holmes who gave me permission beforehand to be merciless with him.

It was all quite entertaining. Alas, I think I may have put the fear of God into the other speakers who saw me channeling my inner Jeremy Paxman. But they needn���t have worried. I also lobbed some softballs. Like when I asked Levon Sharrow from Patagonia if there was such thing as ethical consumption under capitalism.

I had fun, but I was also aware of that fine line between being clever and being an asshole. Even though part of my role was to play devil���s advocate, I tried to make sure I was never punching down.

All in all, an excellent couple of days spent in good company.

Hosting was hard work, but very rewarding. I���ve come to realise it���s one of those activities that comes relatively easy to me, but it is very hard (and stressful) for others. And I���m pretty gosh-darned good at it too, false modesty bedamned.

So if you���re running an event but the thought of hosting it fills you with dread, we should talk.