Jeremy Keith's Blog, page 92

Testing

It’s tempting to think of testing with screen-readers as being like testing with browsers. With browser testing, you’re checking to see how a particular piece of software deals with the code you’re throwing at it. A screen reader is a piece of software too, so it makes sense to approach it the same way, right?

I don’t think so. I think it’s really important that if someone is going to test your site with a screen reader, it should be someone who uses a screen reader every day.

Think of it this way: you wouldn’t want a designer or developer to do usability testing by testing the design or code on themselves. That wouldn’t give you any useful data. They’re already familiar with what problems the design is supposed to be solving, and how the interface works. That’s why you need to do usability testing with someone from outside, someone who wasn’t involved in the design or development process.

It’s no different when it comes to users of assistive technology. You’re not trying to test their technology; you’re trying to test how well the thing you’re building works for the person using the technology.

In short:

Don’t think of screen-reader testing as a form of browser testing; think of it as a form of usability testing.

One day in London

I don’t get up to London all that often���maybe once every few weeks; just long enough for the city’s skyline to have changed again. Yesterday was one of those days out in the big smoke.

I started with a visit to the Royal College of Art to see the work in progress exhibition that’s running until Sunday. Specifically, I wanted to see the project by Monika, who was one third of the immensely talented internship collaboration at Clearleft that produced notice.city. Her current project is called Watching the Watchers, all about undersea cables, surveillance, and audio���right up my alley. I think Ingrid, James, Dan, and Georgina would like it.

After that, I entered a metal tube to be whisked across the city to the Hospital Club, where a room had been booked for a most enjoyable Clearleft event. Anna had organised a second of her roundtable gatherings. This time the theme was “going responsive.”

The idea is to gather people together for one afternoon to share experiences and challenges. Anna invited people from all sorts of organisations, from newspapers to e-commerce and everything in between. Some of them were people we already knew, but most of them had no connection to Clearleft at all.

Everything happened the Chatham House Rule so I can’t tell you the details of who said what, but I can tell you that it was very productive afternoon. Some of the companies represented were in the process of switching to responsive, some had already done it, and some were planning it, so it was a perfect mix.

We began with a variation on the lean coffee technique. Splitting into groups, everyone jotted down some topics that they wanted to discuss. We shared those, grouped them, and voted on which order we would discuss them. Each topic got 5 to 10 minutes of discussion. In my group, we discussed strategy, workflow, tools, and more. We could’ve easily talked for longer. Some outcomes (very badly summarised):

The vision and strategy for a responsive redesign needs to be communicated (and sold) up the chain to stakeholders as well as to the designers and developers in the trenches.
“Mobile-first” For The Win! Solve the harder problems first.
Multi-disciplinary teams For The Win! Works well with Agile too.
A pattern libraries is probably the best tool you can have. So pattern libraries For The Win too!

After a break, we switched over in to a sort of open space exercise. Anyone who has a burning question they want answered writes that question down on an oversize post-it and slaps it on the wall. Now we’ve got a room with questions written on different parts of the wall. If you want to take a stab at answering any of those questions, you write it down on a post it note and slap it next to the question. Everyone does this for a while, going from question to question and having lots of good discussion. Then, at the end, we go from question to question, with the person who originally posted the question taking ownership of summarising the answers.

Some of the questions were:

How to help people to stop thinking “desktop first”?
Should designers code? Should developers design? Or Both?
How do you start to deploy a responsive version of an existing site?
How do you do responsive ads?
What is the best tool to use to create responsive designs?
Would every project benefit from a design system? Is it always worth the investment?

You get the idea. The format worked really well; it was the first time any of us had tried it. We slightly over-ran the time we had allotted for the afternoon, but that’s mostly because there was so much meaty stuff to discuss.

With that productive afternoon done, I made my way to the Bricklayer’s Arms, where by lucky coincidence, a Pub Standards meet-up was happening. I went along for a pint and a chat while I waited for rush hour to ease off: I wanted to avoid the crush before I started making my way back to Brighton. See you next time, Londinium.

Separated at death

September 13th, 2007:

Jeremy Keith looks a bit like Alan Rickman’s Severus Snape in Harry Potter.

February 25th, 2009:

I have to start off by saying���and maybe this will come as no surprise���but you look a lot to me like the guy who plays Snape on Harry Potter. Do you get that? Do you get that a lot?

January 24th, 2013:

I just figured out who @adactio looks exactly like. Try and guess.

��� Amber Weinberg (@amberweinberg)

@amberweinberg Please don���t say Severus Snape.

��� Jeremy Keith (@adactio)

@adactio lololol I admit, last night when you were bundled up in a scarf you looked SO like him that’s exactly why I thought

��� Amber Weinberg (@amberweinberg)

April 24th, 2013:

Another conference, another person telling me I remind them of Severus Snape.

Never Alan Rickman, mind ���only ever Alan Rickman as Snape.

��� Jeremy Keith (@adactio)

January 14th, 2016:

RIP Alan Rickman :-(

I always thought he looked a bit like @adactio

��� Ian Devlin (@iandevlin)

Homebrew header hardening

I’m at Homebrew Website Club. I figured I’d use this time to document some tweaking I’ve been doing to the back end of my website.

securityheaders.io is a handy site for testing whether your website’s server is sending sensible headers. Think of it like SSL Test for a few nitty-gritty details.

adactio.com was initially scoring very low, but the accompanying guide to hardening your HTTP headers meant I was able to increase my ranking to acceptable level.

My site is running on an Apache server on an Ubuntu virtual machine on Digital Ocean. If you’ve got a similar set-up, this might be useful…

I ssh’d into my server and went to this folder in the Apache directory

cd /etc/apache2/sites-available

There’s a file called default-ssl.conf that I need to edit (my site is being served up over HTTPS; if your site isn’t, you should edit 000-default.conf instead). I type:

nano default-ssl.conf

Depending on your permissions, you might need to type:

sudo nano default-ssl.conf

Now I’m inside nano. It’s like any other text editor you might be used to using, if you imagined what it would be like to remove all the useful features from it.

Within the block, I add a few new lines:

Header always set X-Xss-Protection "1; mode=block"
Header always set X-Frame-Options "SAMEORIGIN"
Header always set X-Content-Type-Options "nosniff"

Those are all no-brainers:

Enable protection against cross-site-scripting.
Don’t allow your site to be put inside a frame.
Don’t allow anyone to change the content-type headers of your files after they’ve been sent from the server.

If you’re serving your site over HTTPS, and you’re confident that you don’t have any mixed content (a mixture of HTTPS and HTTP), you can add this line as well:

Header always set Content-Security-Policy "default-src https: data: 'unsafe-inline' 'unsafe-eval'"

To really up your paranoia (and let’s face it, that’s what security is all about; justified paranoia), you can throw this in too:

Header unset Server
Header unset X-Powered-By

That means that your server will no longer broadcast its intimate details. Of course, I’ve completely reversed that benefit by revealing to you in this blog post that my site is running on Apache on Ubuntu.

I’ll tell you something else too: it’s powered by PHP. There’s some editing I did there too. But before I get to that, let’s just finish up that .conf file…

Hit ctrl and o, then press enter. That writes out the file you’ve edited. Now you can leave nano: press ctrl and x.

You’ll need to restart Apache for those changes to take effect. Type:

service apache2 restart

Or, if permission is denied:

sudo service apache2 restart

Now, about that PHP thing. Head over to a different directory:

cd /etc/php5/fpm

Time to edit the php.ini file. Type:

nano php.ini

Or, if you need more permissions:

sudo nano php.ini

It’s a long file, but you’re really only interested in one line. A shortcut to finding that line is to hit ctrl and w (for “where is?”), type expose, and hit enter. That will take you to the right paragraph. If you see a line that says:

expose_php = On

Change it to:

expose_php= Off

Save the file (ctrl and o, enter) then exit nano (ctrl and x).

Restart Apache:

service apache2 restart

Again, you might need to preface that with sudo.

Alright, head on back to securityheaders.io and see how your site is doing now. You should be seeing a much better score.

There’s one more thing I should be doing that’s preventing me from getting a perfect score. That’s Public Key Pinning. It sounds a bit too scary for a mere mortal like me to attempt. Or rather, the consequences of getting it wrong (which I probably would), sound too scary.

Without delay

When I wrote about mobile Safari adding support for touch-action: manipulation, I finished with this snarky observation:

Anyway, I���m off to update my CSS even though this latest fix probably won���t land in mobile Safari until, oh ���.probably next October.

Historically, Apple have tied mobile Safari updates to iOS version number increments, and they happen about once a year. But this time, it looks like my snark was unfounded:

On Safari for iOS, the 350 ms wait time to detect a second tap has been removed to create a ���fast-tap��� response. This is enabled for pages that declare a viewport with either width=device-width or user-scalable=no. Authors can also opt in to fast-tap behavior on specific elements by using the CSS touch-action property, using the manipulation value.

That’s from the release notes for Safari 9.1���a point release.

I’m very pleased to have been absolutely wrong with my prediction of Apple’s timing.

Small lessons, loosely learned

When Charlotte published her end-of-year report, she outlined her plans for 2016, which included “Document my JavaScript learning journey.”

I want to get into the habit of writing one JavaScript post every week to make sure I keep up with learning it. Even if it’s just a few words about some relevant terminology; it can be as long or short as desired or time allows, as long as it happens.

An excellent plan! If you really want to make sure you’ve understood something, write down an explanation of it. There’s nothing quite like writing to really test your grasp of an idea. Even if nobody else ever reads it, it’s still an extremely valuable exercise for yourself.

Charlotte has already started. Here’s a short post on using JavaScript to pick a random an item at random from an array:

Math.floor(Math.random() * (array.length - 1))

It might seem like a small thing, but look what you have to understand:

How Math.floor works (pretty straightforward���it rounds a floating point number down to the nearest whole number).
How Math.random works (less straightforward���it gives a random number between zero and one, meaning you have to multiply it to do anything useful with the result).
How array.length works (seems straightforward���it gives you the total number of items in an array, but then catches you out when you realise there can never be an index with that total value because the indices are counted from zero …which gives rise to an entire class of programming error).

I really like this approach to learning: document each small thing as you go instead of waiting until all those individual pieces click together. That’s the approach Andy took when he was learning CSS and it led to him writing a book on the subject.

When it comes to problem-solving in general (and JavaScript in particular), I have a similar bias towards single-purpose solutions. Rather than creating a monolithic framework that attempts to solve all possible problems, I prefer a collection of smaller scripts that only do one thing, but do it really well; the UNIX philosophy.

Take, for example, Remy’s bind.js. It does two-way data-binding and nothing else. If you only need one-way data-binding, there’s Simulacra.js, which takes a similar minimalist, hands-off approach.

This approach of breaking large problems down into a collection of smaller problems also came up in a completely unrelated discussion at work recently. I floated the idea of starting a book club at Clearleft. Quite a few people are into the idea, but they’re not sure they could commit the time to reading a book on a deadline. Fair enough. Perhaps we could have the book club on a chapter-by-chapter basis? I don’t think that would work all that well for novels, but it did make me think of something related to Charlotte’s stated goal of learning more JavaScript…

Graham has been raving about the You Don’t Know JS book series by the supersmart Kyle Simpson. I suggested to Charlotte that we read through the books at the rate of one chapter a week. The first book is called Up and Going and our first chapter will be Into Programming, starting this week. Then at the end of the week we’ll get together to compare notes.

I’m hoping that by doing this together, there’s more chance that we’ll actually see it through to completion:

Why can I hit deadlines imposed by others, but not those imposed by myself?

The Force Awakens

I’d like to talk about The Force Awakens (I mean, really, how can I not?) so there will be inevitable spoilers. Bail now if you haven’t seen the film.

Star Wars was a big part of my childhood. By extension���and because I’ve never really grown up���Star Wars has always been part of my identity, at least in the shallow sense of what I’d list under “hobbies and interests” on a theoretical form. Still, I could relate to Michael’s feelings in the run-up to the new film’s release:

Despite much evidence to the contrary, I don’t hang too many of my wants and needs on Star Wars or its continuing life as a franchise. I���m the fan-equivalent of a deep history archeologist, not a pundit or an evangelist.

While I’ve always been a big fan of Star Wars: The Films, I’ve never cared much about Star Wars: The Franchise. When my local pub quiz for nerds���The Geekest Link���has a Star Wars night, I enter with a prayer of “please no ‘Expanded Universe’, please no ‘Expanded Universe’.”

When I heard that Lucasfilm had been sold to Disney, I was intrigued���this could get interesting! When I heard that J.J. Abrams would be directing Episode VII, I was pretty happy���I like his work, and he’s a safe pair of hands. But I didn’t want to get too excited. Partly that’s because I’ve been burnt before���although I’m something of a prequels apologist in comparison to the hatred they inspired in most people. Mostly though, it’s because I’m aware that when it comes to something that doesn’t yet exist���whether it’s a Star Wars film, a forthcoming album, or an upcoming project at work���the more hope you place on its shoulders, the more unlikely it is to be able to fulfil those over-inflated expectations.

But as The Force Awakens drew closer and closer, despite my best intentions, I couldn’t help but get excited. Jessica and I watched and re-watched the trailers. The day that tickets went on sale, the website for my cinema of choice crashed, so I picked up the phone and waited in a queue to secure seats for the minute-past-midnight first showing (if you know how much I dislike telephonic communication, you’ll appreciate how unusual that action was for me).

I began to literally count down the days. In the final week, Jessica and I re-watched the Star Wars films in Machete Order, which I can highly recommend. That culminated on the evening of December 16th with a gathering ‘round at Andy’s to eat some food, watch Return Of The Jedi, and then head to the cinema before midnight. By the time I was sitting in my seat surrounded by equally enthusiastic fans, I was positively aquiver with excitement.

When the fanfare blasted and the Star Wars logo appeared, I was grinning from ear to ear. Then I experienced something really wonderful: I had no idea what was going to happen next. Going into this film with no knowledge of plot details or twists was the best possible way to experience it.

I didn’t know what the words of the opening crawl would be. I didn’t know who any of the characters were. I didn’t know what anybody was going to say. I know that sounds like a weird thing to fixate on���after all, didn’t we get that with the prequel films too? Well, not really. Because they were all backstory, there were clearly-delineated constraints on what could and couldn’t happen in those films. But with these new films, anything is possible.

I really, really, really enjoyed watching The Force Awakens. But in order to truly evaluate the film on its own merits, I knew I’d have to see it again in more normal circumstances (and who am I kidding? I didn’t need much of an excuse to see it again).

I’ve seen it three times now. I loved it every time. If anything, the things that slightly bothered me on first seeing the film have diminished with subsequent viewings. It stands up to repeat watching, something that isn’t necessarily true of other J.J. Abrams films���I enjoyed Star Trek Into Darkness when I first saw it, but with every time I see it again, it grows a little weaker.

As I said, there were things that slightly bothered me and I’ll get to those, but my overwhelming feelings about this film are very, very positive. I think the world-building is really good. I think the film itself is superbly crafted, as described in this excellent point-by-point analysis by Chris Dickinson. But above all, what I love the most about The Force Awakens are the characters.

Rey. What can I say? She is quite simply a wonderfully-written character brought to life by an astonishingly good performance. And of course I’m going to join in the chorus of people who are glad that we finally get a lead role for a woman in this galaxy. Granted, Star Wars: The Force Awakens isn’t exactly Mad Max: Fury Road, but still, how great is it that 2015 has given us both Rey and Furiousa?

(You know what it is? It’s a good start.)

Likewise with Finn: great character; great performance. Throw in Kylo Ren, Poe Dameron and even BB8 …I’m sold. I’m invested in their stories now. I want to know what happens next. I want to spend time with them.

But The Force Awakens wasn’t just about new heroes and villains. As audacious as it would be to start from an entirely clean slate, it also needed to tie in to the beloved original films. On the whole, I think this film did a good job of balancing the past and the future.

Paul came along to that midnight viewing; a ticket became available at the last minute. But he was prepared not to enjoy it, or even understand it, given that he’s never really watched Star Wars.

“Actually”, I said, “I’d be really interested to find out what you think of it.”

I’m too close to the source material; I can’t objectively judge whether the new film could stand on its own, as opposed to be being the latest episode in an existing saga.

As it turned out, Paul really enjoyed it. Sure, there was stuff he was aware he was missing out on, but interestingly, there was even more stuff that we were all missing out on: the script is filled with references to events that happened in the intervening decades between the old films and the new. I liked that a lot. It helped solidify this as being simultaneously a brand new chapter and also just one sliver of a larger ongoing narrative.

The Force Awakens is very much a bridging piece between the old and the new. The torch was passed on with dignity, and surprisingly, it was Harrison Ford’s Han Solo that made it a convincing handover.

I say “surprisingly” because remember, we had just watched Return Of The Jedi before The Force Awakens and it is so clear that Harrison Ford really didn’t want to be in that film. I know Han Solo is supposed to be somewhat sarcastic, but it was dialled up to 11 for Jedi, and I’m pretty sure it was a very, shall we say, “naturalistic” performance. But here he is over thirty years later, really breathing life into the character.

Through the stewardship of Harrison Ford, we were lovingly taken from the original films that we know so well into a new story. Han Solo picked up the audience like it was a child that had fallen asleep in the car, and he gently tucked us into our familiar childhood room where we can continue to dream. And then, with a tender brush of his hand across the cheek, he left us.

In many ways, Han Solo in The Force Awakens is Ben Kenobi in Star Wars …but with a much more fleshed-out history and a more interesting personal journey. Now he’s the one saying that the Force is real (and he does it in the very spot where he originally ridiculed Kenobi). It’s as if Scully were to slowly come around to Mulder’s worldview and finally intone “I want to believe.”

The biggest gripe that other people have with The Force Awakens is how much the plot resembles that of the original Star Wars. It’s undeniable. The question is how much that matters, and a result, how much it bothers you. It really bothered Khoi. It somewhat bothered Andy. It didn’t bother me much, but it was definitely an aspect that prevented the film from being a complete triumph. But it’s also one of those issues that diminishes with repeated viewing.

Those bothered by the echoes between Star Wars and The Force Awakens are going to be really pissed off when they find out about World War One and World War Two. “Britain and America fight Germany again? Really!?” (Probably best not to even mention any of the Gulf wars).

I get the feeling though that the people who are bothered by the plot are perhaps overplaying the similarities and underplaying the differences.

So yes, in one sense Rey in The Force Awakens is like Luke in Star Wars���a young person on a desert planet far from the action. But then there are the differences: where Luke was whining about his situation, Rey is mastering hers. And of course there’s the fact that he in 1977 is now she in 2015. “That doesn’t make any difference!” you may cry, and you’d be exactly right: it shouldn’t make any difference …so why has it taken us four decades to get to this?

The casting of Rey and Finn is simultaneously unimportant and monumental. It’s unimportant in that it makes no difference to the story whether Rey is a woman or Finn is black. It’s monumental in that they are the main characters in what everyone knew would be the biggest film of the century so far.

One of the other complaints that people have with The Force Awakens is the unclear political background. Here’s Michael again:

The rebels killed the Emperor and won, but now they���re ���the resistance���? Why? They���re backed by the republic, so why aren���t they just the armed forces of the republic? The First Order strikes against the republic (looked like Coruscant, but apparently wasn���t). How big is the First Order? Big enough to build Starkiller Base, but what does that mean? Do they control systems? Do they have support inside the republic? Is this like a separatists thing? How long have they been around? How are they funded?

This certainly bugged me. It was the kind of issue that could have been fixed with one explanatory scene. Sure enough, it turns out that such a scene was shot but then cut from the film. Mostly that was to keep the film’s running time down, but I suspect that after the dull talkiness of the prequels, there may also have been some overcompensating course-correction away from anything with even a whiff of politics. Alas, that phobia of trade routes and senators resulted in an unclear backstory. It wasn’t until my third viewing that I realised that Hux’s speech is the closest thing to a blackboard scene for the galactic geopolitics: there’s a proxy war between wannabe extremists looking to set up a caliphate (think ISIS) and a resistance (think the Kurds) being funded by the dominant power (think America) …up until The First Order carry out a 9-11/Pearl Harbour/Vulcan scale attack, leaving the balance of power wide open���the next film could take it in any direction.

One of the most impressive achievements of The Force Awakens is that after seeing it, I didn’t want to think about how it tied back to the original films, as I expected I would want to do. Instead, I was entirely preoccupied with questions of what’s going to happen next.

Everyone is talking about Rey. Where is she from? What is her parentage? The most popular theories are currently:

She is Luke Skywalker’s daughter.
She is Han and Leia’s daughter, the secret sister of Kylo Ren.
She is Ben Kenobi’s granddaughter.

Personally, I’d like it if her parentage were unremarkable. Maybe it’s the socialist in me, but I’ve never liked the idea that the Force is based on eugenics; a genetic form of inherited wealth for the lucky 1%. I prefer to think of the Force as something that could potentially be unlocked by anyone who tries hard enough.

But there are too many hints at Rey’s origins for her parentage to go unexplained. All the signs point to her having some kind of connection to existing bloodlines. Unless…

Lawrence Kasdan has been dropping hints about how odd Episode VIII is going to be, mostly because it has Rian Johnson at the helm. He gave us the terrific Looper. One of the most unsettling aspects of that film was the presence of a child with buried potential for destruction through telekinetic powers. For everyone’s safety, the child is kept far from civilisation.

Okay, I know it’s a stretch but what if Rey is on Jakku for similar reasons? Her parents aren’t Skywalkers or Kenobis, they’re just scared by the destructive episodes they’ve experienced with their Force-sensitive infant. With enormous reluctance���but for the greater good���they deposit her on a faraway world.

No?

Okay, well, if you don’t like that theory, you’re going to hate this one:

What if Rey is the daughter of Luke and Leia?

Eww! I know, I know. But, hey, you can’t say the signs weren’t there all along. And the shame of an incestuous union could be the reason for the child’s secret exile.

It’s preposterous of course. Even in a post-Game Of Thrones landscape, that would be going too far, even for Rian Johnson …or would it?

Now I’ve planted the idea in your head. Sorry about that.

Still, how great is it that we we’re all talking about what’s going to happen next?

Some people have asked me where I think The Force Awakens ranks in comparison to the other Star Wars films, and I wasn’t prepared for the question. I honestly haven’t been thinking about it in the context of the original films. Instead I’ve been thinking about the new characters and the new storyline. As Maz Kanata would say:

The belonging you seek is not behind you, it is ahead.

Year���s end

I usually write a little post at the end of each year, looking back at the previous 365 days. But this time I feel like I���ve already done that. I���ve already written about my year of learning with Charlotte, which describes what I���ve been doing at work for the last twelve months.

Apart from that, there isn���t much more to say about 2015. And that���s a good thing. 2014 was a year tainted by death so I���m not complaining about having just had a year with no momentous events.

The worst that could be said of my 2015 is that Clearleft went through a tough final quarter of the year (some big projects ended up finishing around the same time, which left us floundering for new business���something we should have foreseen), but in the grand scheme of things, that���s not exactly a tragedy.

Mostly when I think back on the year, my memories are pleasant ones. I travelled to interesting places, ate some great food, and spent time with lovely people���Jenn and Sutter���s wedding being a beautiful blend of all three.

So instead of doing a year-end roundup of my own, I���ll just point to some others: James, Alice, Laura, Eliot, Remy, and Brad.

I look forward to reading more posts on their websites in 2016. I hope that you���ll be publishing on your website this year too.

Happy new year!

Delay

Mobile browser vendors have faced a dilemma for quite a while. They’ve got this double-tap gesture that allows users to zoom in on part of a page (particularly handy on non-responsive sites). But that means that every time a user makes a single tap, the browser has to wait for just a moment to see if it’s followed by another tap. “Just a moment” in this case works out to be somewhere between 300 and 350 milliseconds. So every time a user is trying to click a link or press a button on a web page, there’s a slight but noticeable delay.

For a while, mobile browsers tried to “solve” the problem by removing the delay if the viewport size had been set to non-scalable using a meta viewport declaration of user-scalable="no". In other words, the browser was rewarding bad behaviour: sites that deliberately broke accessibility by removing the ability to zoom were the ones that felt snappier than their accessible counterparts.

Fortunately Android changed their default behaviour. They decided to remove the tap delay for any site that had a meta viewport declaration of width=device-width (which is pretty much every responsive website). That still left Apple.

I discussed this a couple of years ago with Ted (my go-to guy on the inside of the infinite loop):

He���d prefer a per-element solution rather than a per-document meta element. An attribute? Or maybe a CSS declaration similar to pointer events?

I thought for a minute, and then I spitballed this idea: what if the 300 millisecond delay only applied to non-focusable elements?

After all, the tap delay is only noticeable when you���re trying to tap on a focusable element: links, buttons, form fields. Double tapping tends to happen on text content: divs, paragraphs, sections.

Well, the Webkit team have announced their solution. As well as following Android’s lead and removing the delay for responsive sites, they’ve also provided a way for authors to declare which elements should have the delay removed using the CSS property touch-action:

Putting touch-action: manipulation; on a clickable element makes WebKit consider touches that begin on the element only for the purposes of panning and pinching to zoom. This means WebKit does not consider double-tap gestures on the element, so single taps are dispatched immediately.

So to get the behaviour I was hoping for���no delay on focusable elements���I can add this line to my CSS:

a, button, input, select, textarea, label, summary {
touch-action: manipulation;
}

That ought to do it. I suppose I could also throw [tabindex]:not([tabindex="-1"]) into that list of selectors.

It probably goes without saying, but you shouldn’t do:

* { touch-action: manipulation; }

or:

body { touch-action: manipulation; }

That default behaviour of touch-action: auto is still what you want on most elements.

Anyway, I’m off to update my CSS even though this latest fix probably won’t land in mobile Safari until, oh ….probably next October.

Pseudo and pseudon���t

I like CSS pseudo-classes. They come in handy for adding little enhancements to interfaces based on interaction.

Take the form-related pseudo-classes, for example: :valid, :invalid, :required, :in-range, and many more.

Let���s say I want to adjust the appearance of an element based on whether it has been filled in correctly. I might have an input element like this:

Then I can write some CSS to put green border on it once it meets the minimum requirements for validity:

input:valid {
border: 1px solid green;
}

That works, but somewhat annoyingly, the appearance will change while the user is still typing in the field (as soon as the user types an @ symbol, the border goes green). That can be distracting, or downright annoying.

I only want to display the green border when the input is valid and the field is not focused. Luckily for me, those last two words (���not focused���) map nicely to some more pseudo-classes: not and focus:

input:not(:focus):valid {
border: 1px solid green;
}

If I want to get really fancy, I could display an icon next to form fields that have been filled in. But to do that, I���d need more than a pseudo-class; I���d need a pseudo-element, like :after

input:not(:focus):valid::after {
content: '���';
}

���except that won���t work. It turns out that you can���t add generated content to replaced elements like form fields. I���d have to add a regular element into my markup, like this:

So I could style it with:

input:not(:focus):valid + span::after {
content: '���';
}

But that feels icky.

Update: See this clever flexbox technique by Hugo Giraudel for a potential solution.