Tags: f1

64

sparkline

Thursday, August 26th, 2021

Checked in at ViCafé Münsterplatz. Coffee on the square — with Jessica map

Checked in at ViCafé Münsterplatz. Coffee on the square — with Jessica

Sunday, August 22nd, 2021

Checked in at Christ Church Gardens. Playing with Cider — with Jessica map

Checked in at Christ Church Gardens. Playing with Cider — with Jessica

Friday, July 16th, 2021

Checked in at Hand in Hand. Craft beer — with Jessica map

Checked in at Hand in Hand. Craft beer — with Jessica

Checked in at Bison Beach Bar. Porterhouse! — with Jessica map

Checked in at Bison Beach Bar. Porterhouse! — with Jessica

Friday, July 2nd, 2021

Checked in at Pelicano. Flat white — with Jessica map

Checked in at Pelicano. Flat white — with Jessica

Friday, April 30th, 2021

Checked in at Bison Beach Bar. Beer on the beach — with Jessica map

Checked in at Bison Beach Bar. Beer on the beach — with Jessica

Tuesday, April 20th, 2021

map

Checked in at The Hartington. Having a pint and a read. 🍺 📖

Saturday, April 3rd, 2021

Principles and the English language

I work with words. Sometimes they’re my words. Sometimes they’re words that my colleagues have written:

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 also work with web technologies, usually front-of-the-front-end stuff. HTML, CSS, and JavaScript. The technologies that users experience directly in web browsers.

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.

  1. Never use a metaphor, simile, or other figure of speech which you are used to seeing in print.
  2. Never use a long word where a short one will do.
  3. If it is possible to cut a word out, always cut it out.
  4. Never use the passive where you can use the active.
  5. Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent.
  6. 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.

Tuesday, March 9th, 2021

March

March 2020 was the month when the coronavirus really hit the fan for much of Europe and North America.

It’s now March 2021. People are understandably thinking about this time last year. Tantek wrote about this anniversary:

We reached our disembarkation stop and stepped off. I put my mask away. We hugged and said our goodbyes. Didn’t think it would be the last time I’d ride MUNI light rail. Or hug a friend without a second thought.

I recently added an “on this day” page to my site. Now that page is starting to surface events from this time last year.

Today, for example, is the one year anniversary of the last talk I gave in a physical space. Myself and Remy travelled to Nottingham to give our talk, How We Built The World Wide Web In Five Days.

The next morning, before travelling back to Brighton (where we’ve been ever since), we had breakfast together in a nice café.

I wrote:

Eating toast with @Rem.

Usually when I post toast updates, it’s a deliberate attempt to be banal. It harks back to the early criticism of blogging as just being people sharing what they’re having for lunch.

But now I look back at that little update and it seems like a momentous event worth shouting from the rooftops. Breaking bread with a good friend? What I wouldn’t give to do that again!

I can’t wait until I can be together with my friends again, doing utterly ordinary things together. To “wallow in the habitual, the banal” as the poet Patrick Kavanagh put it.

I miss hanging out with Tantek. I miss hanging out with Remy. I miss hanging out.

But I’m looking forward to being in a very different situation in March 2022, when I can look back at this time as belonging to a different era.

Between now and then, there’ll be a gradual, bumpy, asynchronous reintroduction of the everyday social pleasures. I won’t take them for granted. I’ll be posting about toast and other everyday occurrences “wherever life pours ordinary plenty.”

Thursday, February 25th, 2021

Fifty

Today is my birthday. I am one twentieth of a millenium old. I am eighteen and a quarter kilo-days old. I am six hundred months old. I am somewhere in the order of 26.28 mega-minutes old. I am fifty years old.

The reflected light of the sun that left Earth when I was born has passed Alpha Cephei and will soon reach Delta Aquilae. In that time, our solar system has completed 0.00002% of its orbit around the centre of our galaxy.

I was born into a world with the Berlin Wall. That world ended when I turned eighteen.

Fifty years before I was born, the Irish war of independence was fought while the world was recovering from an influenza pandemic.

Fifty years after I was born, the UK is beginning its post-Brexit splintering while the world is in the middle of a coronavirus pandemic.

In the past few years, I started to speculate about what I might do for the big Five Oh. Should I travel somewhere nice? Or should I throw a big party and invite everyone I know?

Neither of those are options now. The decision has been made for me. I will have a birthday (and subsequent weekend) filled with the pleasures of home. I plan to over-indulge with all my favourite foods, lovingly prepared by Jessica. And I want the finest wines available to humanity—I want them here and I want them now.

I will also, inevitably, be contemplating the passage of time. I’m definitely of an age now where I’ve shifted from “explore” to “exploit.” In other words, I’ve pretty much figured out what I like doing. That is in contrast to the many years spent trying to figure out how I should be spending my time. Now my plans are more about maximising what I know I like and minimising everything else. What I like mostly involves Irish traditional music and good food.

So that’s what I’ll be doubling down on for my birthday weekend.

Sunday, February 7th, 2021

Sanguine nation

I have mostly been inside one building for the best part of a year. I have avoided going inside of any other buildings during that time. I have made the occasional foray into shop buildings but rarely and briefly.

Last week I went into another building. But it was probably the safest building to enter. I was there to give blood. Masking and distancing were the order of the day.

I try to give blood whenever I can. Before The Situation, my travelling lifestyle made this difficult. It was tricky to book in advance when I didn’t know if I’d be in the country. And sometimes the destinations I went to prevented me from giving blood on my return.

Well, that’s all changed! For the past year I’ve been able to confidently make blood donation appointments knowing full well that I wasn’t going to be doing any travelling.

On video calls recently, a few people have remarked on how long my hair is now. I realised that in the past year I’ve gone to give blood more often than I’ve been to the hairdresser. Three nill, if you’re keeping score.

But why not do both? A combined haircut and blood donation.

Think about it. In both situations you have to sit in a chair doing nothing for a while.

I realise that the skillsets don’t overlap. Either barbers would need to be trained in the art of finding a vein or health workers would need to be trained in the art of cutting hair while discussing last night’s match and whether you’re going anywhere nice this year.

Anything that encourages more blood donations is good in my books. Perhaps there are other establishments that offer passive sitting activities that could be combined with the donation process.

Nail salons? You could get one hand manicured while donating blood from the other arm.

Libraries and book shops? Why not have a combined book-reading and blood donation? Give a pint and get a signed copy.

Airplanes? You’re stuck in a seat for a few hours anyway. Might as well make it count.

Dentists? Maybe that’s too much multitasking with different parts of the body.

But what about dentistry on airplanes? Specifically the kind of dentistry that requires sedation. The infrastructure is already in place: there are masks above every seat. Shortly after take off, pull the mask towards you and let the nitrous oxide flow. Even without any dentistry, that sounds like a reasonable way to make the hours stuck in an airplane just fly by.

None of us are going to be taking any flights any time soon, but when we do …build back better, I say.

In the meantime, give blood.

Monday, January 4th, 2021

Speaking online

I really, really missed speaking at conferences in 2020. I managed to squeeze in just one meatspace presentation before everything shut down. That was in Nottingham, where myself and Remy reprised our double-bill talk, How We Built The World Wide Web In Five Days.

That was pretty much all the travelling I did in 2020, apart from a joyous jaunt to Galway to celebrate my birthday shortly before the Nottingham trip. It’s kind of hilarious to look at a map of the entirety of my travel in 2020 compared to previous years.

Mind you, one of my goals for 2020 was to reduce my carbon footprint. Mission well and truly accomplished there.

But even when travel was out of the question, conference speaking wasn’t entirely off the table. I gave a brand new talk at An Event Apart Online Together: Front-End Focus in August. It was called Design Principles For The Web and I’ve just published a transcript of the presentation. I’m really pleased with how it turned out and I think it works okay as an article as well as a talk. Have a read and see what you think (or you can listen to the audio if you prefer).

Giving a talk online is …weird. It’s very different from public speaking. The public is theoretically there but you feel like you’re just talking at your computer screen. If anything, it’s more like recording a podcast than giving a talk.

Luckily for me, I like recording podcasts. So I’m going to be doing a new online talk this year. It will be at An Event Apart’s Spring Summit which runs from April 19th to 21st. Tickets are available now.

I have a pretty good idea what I’m going to talk about. Web stuff, obviously, but maybe a big picture overview this time: the past, present, and future of the web.

Time to prepare a conference talk.

Wednesday, December 16th, 2020

npm ruin dev

This was originally published on CSS Tricks in December 2020 as part of a year-end round-up of responses to the question “What is one thing you learned about building websites this year?”

In 2020, I rediscovered the enjoyment of building a website with plain ol’ HTML, CSS, and JavaScript—no transpilin’, no compilin’, no build tools other than my hands on the keyboard.

Seeing as my personal brand could be summed up “so late to the game that the stadium has been demolished”, I decided to start a podcast in 2020. It’s the podcast of my agency, Clearleft, and it has been given the soaringly imaginative title of The Clearleft Podcast. I’m really pleased with how the first season turned out. I’m also really pleased with the website I put together for it.

The website isn’t very big, though it will grow with time. I had a think about what the build process for the site should be and after literally seconds of debate, I settled on a build process of none. Zero. Nada.

This turned out to be enormously liberating. It felt very hands-on to write the actual HTML and CSS that will be delivered to end users, without any mediation. I felt like I was getting my hands into the soil of the site.

CSS has evolved so much in recent years—with features like calc() and custom properties—that you don’t have to use preprocessors like Sass. And vanilla JavaScript is powerful, fully-featured, and works across browsers without any compiling.

Don’t get me wrong—I totally understand why complicated pipelines are necessary for complicated websites. If you’re part of a large team, you probably need to have processes in place so that everyone can contribute to the codebase in a consistent way. The more complex that codebase is, the more technology you need to help you automate your work and catch errors before they go live.

But that set-up isn’t appropriate for every website. And all those tools and processes that are supposed to save time sometimes end up wasting time further down the road. Ever had to revisit a project after, say, six or twelve months? Maybe you just want to make one little change to the CSS. But you can’t because a dependency is broken. So you try to update it. But it relies on a different version of Node. Before you know it, you’re Bryan Cranston changing a light bulb. You should be tweaking one line of CSS but instead you’re battling entropy.

Whenever I’m tackling a problem in front-end development, I like to apply the principle of least power: choose the least powerful language suitable for a given purpose. A classic example would be using a simple HTML button element instead of trying to recreate all the native functionality of a button using a div with lashings of ARIA and JavaScript. This year, I realized that this same principle applies to build tools too.

Instead of reaching for all-singing all-dancing toolchain by default, I’m going to start with a boring baseline. If and when that becomes too painful or unwieldy, then I’ll throw in a task manager. But every time I add a dependency, I’ll be limiting the lifespan of the project.

My new year’s resolution for 2021 will be to go on a diet. No more weighty node_modules folders; just crispy and delicious HTML, CSS, and JavaScript.

Wednesday, July 22nd, 2020

Wildlife Photographer Of The Year on the Clearleft podcast

Episode three of the Clearleft podcast is here!

This one is a bit different. Whereas previous episodes focused on specific topics—design systems, service design—this one is a case study. And, wow, what a case study! The whole time I was putting the episode together, I kept thinking “The team really did some excellent work here.”

I’m not sure what makes more sense: listen to the podcast episode first and then visit the site in question …or the other way around? Maybe the other way around. In which case, be sure to visit the website for Wildlife Photographer Of The Year.

That’s right—Clearleft got to work with London’s Natural History Museum! A real treat.

Myself and @dhuntrods really enjoyed our visit to the digitisation department in the Natural History Museum. Thanks, Jen, Josh, Robin, Phaedra, and @scuff_el!

This episode of the podcast ended up being half an hour long. It should probably be shorter but I just couldn’t bring myself to cut any of the insights that Helen, James, Chris, and Trys were sharing. I’m probably too close to the subject matter to be objective about it. I’m hoping that others will find it equally fascinating to hear about the process of the project. Research! Design! Dev! This has got it all.

I had a lot of fun with the opening of the episode. I wanted to create a montage effect like the scene-setting opening of a film that has overlapping news reports. I probably spent far too long doing it but I’m really happy with the final result.

And with this episode, we’re halfway through the first season of the podcast already! I figured a nice short run of six episodes is enough to cover a fair bit of ground and give a taste of what the podcast is aiming for, without it turning into an overwhelming number of episodes in a backlog for you to catch up with. Three down and three to go. Seems manageable, right?

Anyway, enough of the backstory. If you haven’t already subscribed to the Clearleft podcast, you should do that. Then do these three things in whichever order you think works best:

Friday, July 17th, 2020

Checked in at Pelicano. Iced latte — with Jessica map

Checked in at Pelicano. Iced latte — with Jessica

Thursday, July 16th, 2020

Hey now

Progressive enhancement is at the heart of everything I do on the web. It’s the bedrock of my speaking and writing too. Whether I’m writing about JavaScript, Ajax, HTML, or service workers, it’s always through the lens of progressive enhancement. Sometimes I explicitly bang the drum, like with Resilient Web Design. Other times I don’t mention it by name at all, and instead talk only about its benefits.

I sometimes get asked to name some examples of sites that still offer their core functionality even when JavaScript fails. I usually mention Amazon.com, although that has other issues. But quite often I find that a lot of the examples I might mention are dismissed as not being “web apps” (whatever that means).

The pushback I get usually takes the form of “Well, that approach is fine for websites, but it wouldn’t work something like Gmail.”

It’s always Gmail. Which is odd. Because if you really wanted to flummox me with a product or service that defies progressive enhancement, I’d have a hard time with something like, say, a game (although it would be pretty cool to build a text adventure that’s progressively enhanced into a first-person shooter). But an email client? That would work.

Identify core functionality.

Read emails. Write emails.

Make that functionality available using the simplest possible technology.

HTML for showing a list of emails, HTML for displaying the contents of the HTML, HTML for the form you write the response in.

Enhance!

Now add all the enhancements that improve the experience—keyboard shortcuts; Ajax instead of full-page refreshes; local storage, all that stuff.

Can you build something that works just like Gmail without using any JavaScript? No. But that’s not what progressive enhancement is about. It’s about providing the core functionality (reading and writing emails) with the simplest possible technology (HTML) and then enhancing using more powerful technologies (like JavaScript).

Progressive enhancement isn’t about making a choice between using simpler more robust technologies or using more advanced features; it’s about using simpler more robust technologies and then using more advanced features. Have your cake and eat it.

Fortunately I no longer need to run this thought experiment to imagine what it would be like if something like Gmail were built with a progressive enhancement approach. That’s what HEY is.

Sam Stephenson describes the approach they took:

HEY’s UI is 100% HTML over the wire. We render plain-old HTML pages on the server and send them to your browser encoded as text/html. No JSON APIs, no GraphQL, no React—just form submissions and links.

If you think that sounds like the web of 25 years ago, you’re right! Except the HEY front-end stack progressively enhances the “classic web” to work like the “2020 web,” with all the fidelity you’d expect from a well-built SPA.

See? It’s not either resilient or modern—it’s resilient and modern. Have your cake and eat it.

And yet this supremely sensible approach is not considered “modern” web development:

The architecture astronauts who, for the past decade, have been selling us on the necessity of React, Redux, and megabytes of JS, cannot comprehend the possibility of building an email app in 2020 with server-rendered HTML.

HEY isn’t perfect by any means—they’ve got a lot of work to do on their accessibility. But it’s good to have a nice short answer to the question “But what about something like Gmail?”

It reminds me of responsive web design:

When Ethan Marcotte demonstrated the power of responsive design, it was met with resistance. “Sure, a responsive design might work for a simple personal site but there’s no way it could scale to a large complex project.”

Then the Boston Globe launched its responsive site. Microsoft made their homepage responsive. The floodgates opened again.

It’s a similar story today. “Sure, progressive enhancement might work for a simple personal site, but there’s no way it could scale to a large complex project.”

The floodgates are ready to open. We just need you to create the poster child for resilient web design.

It looks like HEY might be that poster child.

I have to wonder if its coincidence or connected that this is a service that’s also tackling ethical issues like tracking? Their focus is very much on people above technology. They’ve taken a human-centric approach to their product and a human-centric approach to web development …because ultimately, that’s what progressive enhancement is.

Wednesday, June 17th, 2020

Friday, April 10th, 2020

Checked in at Sheepcote Valley. with Jessica map

Checked in at Sheepcote Valley. with Jessica

Monday, March 2nd, 2020

Picture 1 Picture 2
map

Checked in at The Winding Stair. Lunch in Dublin — with Jessica

Sunday, March 1st, 2020

map

Checked in at America Village Apothecary. with Jessica