I really like this experiment that Jim is conducting on his own site. I might try to replicate it sometime!
Monday, August 22nd, 2022
Thursday, April 22nd, 2021
This video is a charming trip down to memory lane to the early days of the public internet:
It wasn’t quite the World Wide Web yet, but everybody started hearing about this thing called “the Internet” in 1993. It was being called the Information Superhighway then.
Saturday, April 3rd, 2021
Principles and the English language
One of my roles at Clearleft is “content buddy.” If anyone is writing a talk, or a blog post, or a proposal and they want an extra pair of eyes on it, I’m there to help.
I think a lot about design principles for the web. The two principles I keep coming back to are the robustness principle and the principle of least power.
When it comes to words, the guide that I return to again and again is George Orwell, specifically his short essay, Politics and the English Language.
Towards the end, he offers some rules for writing.
- Never use a metaphor, simile, or other figure of speech which you are used to seeing in print.
- Never use a long word where a short one will do.
- If it is possible to cut a word out, always cut it out.
- Never use the passive where you can use the active.
- Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent.
- Break any of these rules sooner than say anything outright barbarous.
These look a lot like design principles. Not only that, but some of them look like specific design principles. Take the robustness principle:
Be conservative in what you send, be liberal in what you accept.
That first part applies to Orwell’s third rule:
If it is possible to cut a word out, always cut it out.
Be conservative in what words you send.
Then there’s the principle of least power:
Choose the least powerful language suitable for a given purpose.
Compare that to Orwell’s second rule:
Never use a long word where a short one will do.
That could be rephrased as:
Choose the shortest word suitable for a given purpose.
Or, going in the other direction, the principle of least power could be rephrased in Orwell’s terms as:
Never use a powerful language where a simple language will do.
Oh, I like that! I like that a lot.
Saturday, March 6th, 2021
Having only the content I want to see only be shown when I want to see it with the freedom to jump between readers as I please, all with no ads? For me, no other service comes close to the flexibility, robustness, and overall ease-of-use that RSS offers.
Wednesday, February 3rd, 2021
Two-factor authentication is generally considered A Good Thing™️ when you’re logging in to some online service.
The word “factor” here basically means “kind” so you’re doing two kinds of authentication. Typical factors are:
- Something you know (like a password),
- Something you have (like a phone or a USB key),
- Something you are (biometric Black Mirror shit).
Asking for a password and an email address isn’t two-factor authentication. They’re two pieces of identification, but they’re the same kind (something you know). Same goes for supplying your fingerprint and your face: two pieces of information, but of the same kind (something you are).
None of these kinds of authentication are foolproof. All of them can change. All of them can be spoofed. But when you combine factors, it gets a lot harder for an attacker to breach both kinds of authentication.
The most common kind of authentication on the web is password-based (something you know). When a second factor is added, it’s often connected to your phone (something you have).
Every security bod I’ve talked to recommends using an authenticator app for this if that option is available. Otherwise there’s SMS—short message service, or text message to most folks—but SMS has a weakness. Because it’s tied to a phone number, technically you’re only proving that you have access to a SIM (subscriber identity module), not a specific phone. In the US in particular, it’s all too easy for an attacker to use social engineering to get a number transferred to a different SIM card.
Still, authenticating with SMS is an option as a second factor of authentication. When you first sign up to a service, as well as providing the first-factor details (a password and a username or email address), you also verify your phone number. Then when you subsequently attempt to log in, you input your password and on the next screen you’re told to input a string that’s been sent by text message to your phone number (I say “string” but it’s usually a string of numbers).
There’s an inevitable friction for the user here. But then, there’s a fundamental tension between security and user experience.
In the world of security, vigilance is the watchword. Users need to be aware of their surroundings. Is this web page being served from the right domain? Is this email coming from the right address? Friction is an ally.
But in the world of user experience, the opposite is true. “Don’t make me think” is the rallying cry. Friction is an enemy.
With SMS authentication, the user has to manually copy the numbers from the text message (received in a messaging app) into a form on a website (in a different app—a web browser). But if the messaging app and the browser are on the same device, it’s possible to improve the user experience without sacrificing security.
If you’re building a form that accepts a passcode sent via SMS, you can use the
autocomplete attribute with a value of “one-time-code”. For a six-digit passcode, your
input element might look something like this:
<input type="text" maxlength="6" inputmode="numeric" autocomplete="one-time-code">
With one small addition to one HTML element, you’ve saved users some tedious drudgery.
There’s one more thing you can do to improve security, but it’s not something you add to the HTML. It’s something you add to the text message itself.
Let’s say your website is example.com and the text message you send reads:
Your one-time passcode is 123456.
Add this to the end of the text message:
So the full message reads:
Your one-time passcode is 123456. @example.com #123456
The first line is for humans. The second line is for machines. Using the @ symbol, you’re telling the device to only pre-fill the passcode for URLs on the domain example.com. Using the # symbol, you’re telling the device the value of the passcode. Combine this with
autocomplete="one-time-code" in your form and the user shouldn’t have to lift a finger.
I’m fascinated by these kind of emergent conventions in text messages. Remember that the @ symbol and # symbol in Twitter messages weren’t ideas from Twitter—they were conventions that users started and the service then adopted.
You can add a URL for
/.well-known/change-password which redirects to the form a user would use to update their password. Browsers and password managers can then use this information if they need to prompt a user to update their password after a breach. I’ve added this to The Session.
Oh, and on that page where users can update their password, the
autocomplete attribute is your friend again:
<input type="password" autocomplete="new-password">
If you want them to enter their current password first, use this:
<input type="password" autocomplete="current-password">
All of the things I’ve mentioned—the
autocomplete attribute, origin-bound one-time codes in text messages, and a well-known URL for changing passwords—have good browser support. But even if they were only supported in one browser, they’d still be worth adding. These additions do absolutely no harm to browsers that don’t yet support them. That’s progressive enhancement.
Tuesday, December 18th, 2018
Charlotte’s opening talk at the Material conference was really excellent—a great narrative at the intersection of code and creativity.
Thursday, March 1st, 2018
For the shortest month of the year, February managed to pack a lot in. I was away for most of the month. I had the great honour of being asked back to speak at Webstock in New Zealand this year—they even asked me to open the show!
I had no intention of going straight to New Zealand and then turning around to get on the first flight back, so I made sure to stretch the trip out (which also helps to mitigate the inevitable jet lag). Jessica and I went to Hong Kong first, stayed there for a few nights, then went on Sydney for a while (and caught up with Charlotte while we were out there), before finally making our way to Wellington. Then, after Webstock was all wrapped up, we retraced the same route in reverse. Many flat whites, dumplings, and rays of sunshine later, we arrived back in the UK.
As well as giving the opening keynote at Webstock, I did a full-day workshop, and I also ran a workshop in Hong Kong on the way back. So technically it was a work trip, but I am extremely fortunate that I get to go on adventures like this and still get to call it work.
Saturday, October 7th, 2017
I’ve written before about how I use apps on my phone:
If I install an app on my phone, the first thing I do is switch off all notifications. That saves battery life and sanity.
The only time my phone is allowed to ask for my attention is for phone calls, SMS, or FaceTime (all rare occurrences). I initiate every other interaction—Twitter, Instagram, Foursquare, the web. My phone is a tool that I control, not the other way around.
To me, this seems like a perfectly sensible thing to do. I was surprised by how others thought it was radical and extreme.
I’m always shocked when I’m out and about with someone who has their phone set up to notify them of any activity—a mention on Twitter, a comment on Instagram, or worst of all, an email. The thought of receiving a notification upon receipt of an email gives me the shivers. Allowing those kinds of notifications would feel like putting shackles on my time and attention. Instead, I think I’m applying an old-school RSS mindset to app usage: pull rather than push.
Don’t get me wrong: I use apps on my phone all the time: Twitter, Instagram, Swarm (though not email, except in direst emergency). Even without enabling notifications, I still have to fight the urge to fiddle with my phone—to check to see if anything interesting is happening. I’d like to think I’m in control of my phone usage, but I’m not sure that’s entirely true. But I do know that my behaviour would be a lot, lot worse if notifications were enabled.
I was a bit horrified when Apple decided to port this notification model to the desktop. There doesn’t seem to be any way of removing the “notification tray” altogether, but I can at least go into System Preferences and make sure that absolutely nothing is allowed to pop up an alert while I’m trying to accomplish some other task.
It’s the same on iOS—you can control notifications from Settings—but there’s an added layer within the apps themselves. If you have notifications disabled, the apps encourage you to enable them. That’s fine …at first. Being told that I could and should enable notifications is a perfectly reasonable part of the onboarding process. But with some apps I’m told that I should enable notifications Every. Single. Time.
Of the apps I use, Instagram and Swarm are the worst offenders (I don’t have Facebook or Snapchat installed so I don’t know whether they’re as pushy). This behaviour seems to have worsened recently. The needling has been dialed up in recent updates to the apps. It doesn’t matter how often I dismiss the dialogue, it reappears the next time I open the app.
In the grand scheme of things, it’s not a big deal, but I would appreciate some respect for my deliberate choice. It gets pretty wearying over the long haul. To use a completely inappropriate analogy, it’s like a recovering alcoholic constantly having to rebuff “friends” asking if they’re absolutely sure they don’t want a drink.
I don’t think there’s malice at work here. I think it’s just that I’m an edge-case scenario. They’ve thought about the situation where someone doesn’t have notifications enabled, and they’ve come up with a reasonable solution: encourage that person to enable notifications. After all, who wouldn’t want notifications? That question, if it’s asked at all, is only asked rhetorically.
I’m trying to do the healthy thing here (or at least the healthier thing) in being mindful of my app usage. They sure aren’t making it easy.
The model that web browsers use for notifications seems quite sensible in comparison. If you arrive on a site that asks for permission to send you notifications (without even taking you out to dinner first) then you have three options: allow, block, or dismiss. If you choose “block”, that site will never be able to ask that browser for permission to enable notifications. Ever. (Oh, how I wish I could apply that browser functionality to all those sites asking me to sign up for their newsletter!)
That must seem like the stuff of nightmares for growth-hacking disruptive startups looking to make their graphs go up and to the right, but it’s a wonderful example of truly user-centred design. In that situation, the browser truly feels like a user agent.
Monday, July 10th, 2017
I like words. I like the way they can be tethered together to produce a satisfying sentence.
Jessica likes words even more than I do (that’s why her website is called “wordridden”). She studied linguistics and she’s a translator by trade—German into English. Have a read of her post about translating Victor Klemperer to get an inkling of how much thought and care she puts into it.
Given the depth of enquiry required for a good translation, I was particularly pleased to read this remark by John Le Carré:
No wonder then that the most conscientious editors of my novels are not those for whom English is their first language, but the foreign translators who bring their relentless eye to the tautological phrase or factual inaccuracy – of which there are far too many. My German translator is particularly infuriating.
That’s from an article called Why we should learn German, but it’s really about why we should strive for clarity in our use of language:
Clear language — lucid, rational language — to a man at war with both truth and reason, is an existential threat. Clear language to such a man is a direct assault on his obfuscations, contradictions and lies. To him, it is the voice of the enemy. To him, it is fake news. Because he knows, if only intuitively, what we know to our cost: that without clear language, there is no standard of truth.
It reminds me of one of my favourite Orwell essays, Politics and the English Language:
Political language — and with variations this is true of all political parties, from Conservatives to Anarchists — is designed to make lies sound truthful and murder respectable, and to give an appearance of solidity to pure wind.
But however much I agree with Le Carré’s reprise of Orwell’s call for clarity, I was brought up short by this:
Every time I hear a British politician utter the fatal words, “Let me be very clear”, these days I reach for my revolver.
Le Carré’s text was part of a speech given in Berlin, where everyone would get the reference to the infamous Nazi quote—
Wenn ich Kultur höre … entsichere ich meinen Browning—and I’m sure it was meant with a sly wink. But words matter.
Words are powerful. Words can be love and comfort — and words can be weapons.
Saturday, December 10th, 2016
A fascinating piece by Eleanor on the typographic tweaking that the Wellcome team did to balance the competing needs of different users.
Wednesday, July 20th, 2016
Shamefully, I haven’t been doing one-to-ones with my front-end dev colleagues at Clearleft, but I’m planning to change that. This short list of starter questions from Lara will prove very useful indeed.
Sunday, June 26th, 2016
Thursday, December 4th, 2014
As something of a science geek, I’m a big fan of the work of the Wellcome Trust:
We support the brightest minds in biomedical research and the medical humanities. Our breadth of support includes public engagement, education and the application of research to improve health.
I was very excited when Clearleft had the opportunity to work with them—we redesigned the Wellcome Library a while back. That was a fun responsive project, and an early use of a pattern portfolio as the deliverable.
We’ve been working with them on some other projects since then. We helped out with Mosaic, their terrific magazine site. I really enjoyed popping in to their fantastic building to chat with their talented designers.
The most recent Clearleft/Wellcome collaboration is something called Mindcraft. This started as a completely open-ended project—no one was quite sure what form the finished result would take. Over time it developed into a narrative-based series of historical events brought to life with browser technologies.
I didn’t work on this project but I loved watching it come together. The source material made for an interesting work environment.
The press release for Mindcraft describes it as “immersive” which immediately sets alarm bells ringing in expectation of big, scrolljacking pages …and to be honest, Mindcraft does have elements of that. It’s primarily intended to be visited on a large screen with a fast connection (although it’ll work on any sized-screen). But I think it manages to strike a pretty healthy balance of performance and “richness.” It certainly doesn’t feel gratuitous. The use of sound, imagery, and interaction is all in service to the story.
And boy, what a story!
Mindcraft explores a century of madness, murder and mental healing, from the arrival in Paris of Franz Anton Mesmer with his theories of ‘animal magnetism’ to the therapeutic power of hypnotism used by Freud.
I suggest you put on some headphones, make your browser window fullscreen, and start your journey.
It’s creepy, atmospheric, entertaining, and educational, all at the same time. I really like it. And I’m not just saying that because of Clearleft’s involvement. Like I said, I’m a science geek.
Tuesday, March 4th, 2014
I did some consulting with the Wellcome Trust on this new magazine-like project, and it’s great to see it go live—excellent stories of science, all published under a Creative Commons licence.
Tuesday, January 7th, 2014
The annual round-up.
Saturday, July 27th, 2013
Caterina Fake takes a heartfelt look at the history of online communities:
The internet is full of strangers, generous strangers who want to help you for no reason at all. Strangers post poetry and discographies and advice and essays and photos and art and diatribes. None of them are known to you, in the old-fashioned sense. But they give the internet its life and meaning.
Monday, July 9th, 2012
Technology - Howard Rheingold - What the WELL’s Rise and Fall Tell Us About Online Community - The Atlantic
The history of the WELL, a truly remarkable community.
Saturday, June 30th, 2012
The trailer for a documentary on flutemaker Patrick Olwell. The film should be done later this year.
Sunday, February 26th, 2012
I love these sketchnotes from my presentation at Webstock.
Tuesday, February 21st, 2012
I can’t fave this picture enough. One moment of Webstock captured by Michael B. Johnson.