Wednesday, April 18th, 2018
Friday, April 13th, 2018
Table of Contents for Going Offline
A few people on Twitter have asked about the table of contents for my new book about service workers, Going Offline. Fair enough—why not see the menu before placing your order?
- Introducing Service Workers Does what is says on the tin. It also talks about switching to HTTPS. This chapter is online at A List Apart so you can try before you buy.
- Making Fetch Happen Yes, this chapter title is a Mean Girls reference; fight me. The chapter explains
fetchevents and shows how a service worker can intercept them.
- Cache Me if you Can This puntastic chapter is all about caching, and shows you can use caches in your service worker script.
- Service Worker Strategies This is the heart of the book, where you get decide what kind of strategy you want to implement—when to go to the network, when to go a cache, and so on. And as a last resort, you can have a custom offline page.
- Refining Your Service Worker Building on the previous chapter, this one looks at how you can use different strategies for different kinds of files—images, pages, etc.
- Tidying Up This chapter is about good service worker hygiene like deleting old caches. It also introduces some more coding style options.
- The Offline Experience By this chapter, the service worker script is done. But there’s still plenty of room for enhancements on that custom offline page, including the use of offline storage.
- Progressive Web Apps The book finishes with an explanation of progressive web apps, and a step-by-step guide to creating your own web app manifest.
Sound good? Pre-order your copy of the book now and you’ll have it in your hands ten days from now.
Tuesday, March 27th, 2018
A terrific piece by Rob that is simultaneously a case study of Pro Publica work and a concrete reminder of the power of separating structure and presentation (something that I worry developers don’t appreciate enough).
Don’t get stuck on what different types of information are “supposed” to look like. They can take whatever shape you need them to.
Monday, March 12th, 2018
What was once a rich selection of blogs and websites has been compressed under the powerful weight of a few dominant platforms. This concentration of power creates a new set of gatekeepers, allowing a handful of platforms to control which ideas and opinions are seen and shared.
Tim Berners-Lee on the 29th anniversary of Information Management: A Proposal.
Two myths currently limit our collective imagination: the myth that advertising is the only possible business model for online companies, and the myth that it’s too late to change the way platforms operate. On both points, we need to be a little more creative.
While the problems facing the web are complex and large, I think we should see them as bugs: problems with existing code and software systems that have been created by people — and can be fixed by people.
Monday, February 12th, 2018
Always mark-up first. Regardless of what the kids are doing these days, I stick by my guns and start with mark-up first. A fun experiment (maybe not for you, but definitely for me) is to see how your site reads on Lynx. It does serve as a good gauge of whether the content on the site is structured properly or not.
Sunday, January 28th, 2018
A nice analogy to help explain what it’s like to navigate with a screen reader—and how much well-structured markup can help make it easier.
Thursday, July 20th, 2017
It’s all very admirable, but it also feels a little bit 927.
Friday, May 12th, 2017
Ben points to a new product aiming to ease the pain of connected devices bumping up against the harsh realities of shearing layers:
By exposing the ‘hardwiring’ of our electrical systems, Conduct emphasises how much we rely on existing systems to power our ‘new’ technology – the rate of change and advancement in our traditional technologies moves at a much slower pace than our mobile app-based world and there are physical limitations as a result of this hardwired legacy.
I am—unsurprisingly—in favour of exposing the seams like this.
Monday, May 1st, 2017
A documentary by Matt Parker (brother of Andy) that follows in the footsteps of people like Andrew Blum, James Bridle, and Ingrid Burrington, going in search of the physical locations of the internet, and talking to the people who maintain it. Steven Pemberton makes an appearance in the first and last of five episodes:
- What is the Cloud vs What Existed Before?
- Working out the Internet: it’s a volume game
- The Submarine Cable Network
- How Much Data Is There?
The music makes it feel quite sinister.
Tuesday, April 25th, 2017
Is the emergence of a technologically advanced civilisation necessarily contingent on the easy availability of ancient energy? Is it possible to build an industrialised civilisation without fossil fuels?
This thought experiment leads to some fascinating conclusions.
So, would a society starting over on a planet stripped of its fossil fuel deposits have the chance to progress through its own Industrial Revolution? Or to phrase it another way, what might have happened if, for whatever reason, the Earth had never acquired its extensive underground deposits of coal and oil in the first place? Would our progress necessarily have halted in the 18th century, in a pre-industrial state?
Sunday, April 16th, 2017
A thoroughly impractical—but fun to imagine—alternative to a space elevator:
Analemma inverts the traditional diagram of an earth-based foundation, instead depending on a space-based supporting foundation from which the tower is suspended. This system is referred to as the Universal Orbital Support System (UOSS). By placing a large asteroid into orbit over earth, a high strength cable can be lowered towards the surface of earth from which a super tall tower can be suspended. Since this new tower typology is suspended in the air, it can be constructed anywhere in the world and transported to its final location.
The construction might sound like Clarke’s The Fountains Of Paradise, but I imagine life in the tower would be more like Ballard’s High Rise.
Monday, March 6th, 2017
The conference starts tomorrow so I’ve had a day or two to acclimatise and explore. Seeing as Google are footing the bill for travel and accommodation, I’m staying at a rather nice hotel close to the conference venue in Tribeca. There’s live jazz in the lounge most evenings, a cinema downstairs, and should I request it, I can even have a goldfish in my room.
Today I realised that my hotel sits in the apex of a triangle of interesting buildings: carrier hotels.
Looming above my hotel is 32 Avenue of the Americas. On the outside the building looks like your classic Gozer the Gozerian style of New York building. Inside, the lobby features a mosaic on the ceiling, and another on the wall extolling the connective power of radio and telephone.
The same architects also designed 60 Hudson Street, which has a similar Art Deco feel to it. Inside, there’s a cavernous hallway running through the ground floor but I can’t show you a picture of it. A security guard told me I couldn’t take any photos inside …which is a little strange seeing as it’s splashed across the website of the building.
I walked around the outside of 60 Hudson, taking more pictures. Another security guard asked me what I was doing. I told her I was interested in the history of the building, which is true; it was the headquarters of Western Union. For much of the twentieth century, it was a world hub of telegraphic communication, in much the same way that a beach hut in Porthcurno was the nexus of the nineteenth century.
For a 21st century hub, there’s the third and final corner of the triangle at 33 Thomas Street. It’s a breathtaking building. It looks like a spaceship from a Chris Foss painting. It was probably designed more like a spacecraft than a traditional building—it’s primary purpose was to withstand an atomic blast. Gone are niceties like windows. Instead there’s an impenetrable monolith that looks like something straight out of a dystopian sci-fi film.
Brutalist on the outside, its interior is host to even more brutal acts of invasive surveillance. The Snowden papers revealed this AT&T building to be a centrepiece of the Titanpointe programme:
They called it Project X. It was an unusually audacious, highly sensitive assignment: to build a massive skyscraper, capable of withstanding an atomic blast, in the middle of New York City. It would have no windows, 29 floors with three basement levels, and enough food to last 1,500 people two weeks in the event of a catastrophe.
But the building’s primary purpose would not be to protect humans from toxic radiation amid nuclear war. Rather, the fortified skyscraper would safeguard powerful computers, cables, and switchboards. It would house one of the most important telecommunications hubs in the United States…
Looking at the building, it requires very little imagination to picture it as the lair of villainous activity. Laura Poitras’s short film Project X basically consists of a voiceover of someone reading an NSA manual, some ominous background music, and shots of 33 Thomas Street looming in its oh-so-loomy way.
A top-secret handbook takes viewers on an undercover journey to Titanpointe, the site of a hidden partnership. Narrated by Rami Malek and Michelle Williams, and based on classified NSA documents, Project X reveals the inner workings of a windowless skyscraper in downtown Manhattan.
Bruce widens our horizons with this in-depth look at where and how people are accessing the web around the world.
In this article, we’ve explored where the next 4 billion connected people will come from, as well as some of the innovations that the standards community has made to better serve them. In the next part, we’ll look at some of the demand-side problems that prevent people from accessing the web easily and what can be done to overcome them.
Friday, March 3rd, 2017
World of Concrete: Inside the Industry That’s Building Trump’s America Brick by Brick - The Atlantic
Fear and concrete in Las Vegas: a great piece of infrastructure reportage by Georgina.
Tuesday, November 8th, 2016
A really clear introduction to the pieces of a URL by Vera, who is setting out on her career as a front-end developer.
Thursday, October 13th, 2016
A good overview of ideas and techniques for structuring CSS and naming classes.
Tuesday, July 12th, 2016
Depending on how you’re currently structuring your CSS and class attributes, web components might not make all that much of a difference to your workflow.
Wednesday, October 28th, 2015
It was only last week that myself and Ellen were brainstorming ideas for a combined workshop. Our enthusiasm got the better of us, and we said “Let’s just do it!” Before we could think better of it, the room was booked, and the calendar invitations were sent.
The topic was “story.”
No wait, maybe it was …”narrative.”
That’s not quite right either.
Basically, here’s the issue: at some point everyone at Clearleft needs to communicate something by telling a story. It might be a blog post. It might be a conference talk. It might be a proposal for a potential client. It might be a case study of our work. Whatever form it might take, it involves getting a message across …using words. Words are hard. We wanted to make them a little bit easier.
We did two workshops. Ellen’s was yesterday. Mine was today. They were both just about two hours in length.
Get out of my head!
Ellen’s workshop was all about getting thoughts out of your head and onto paper. But before we could even start to do that, we had to confront our first adversary: the inner critic.
You know the inner critic. It’s that voice inside you that says “You’ve got nothing new to say”, or “You’re rubbish at writing.” Ellen encouraged each of us to drag this inner critic out into the light—much like Paul Ford did with his AnxietyBox.
Each of us drew a cartoon of our inner critic, complete with speech bubbles of things our inner critic says to us.
In a bizarre coincidence, Chloe and I had exactly the same inner critic, complete with top hat and monocle.
With that foe vanquished, we proceeded with a mind map. The idea was to just dump everything out of our heads and onto paper, without worrying about what order to arrange things in.
I found it to be an immensely valuable exercise. Whenever I’ve tried to do this before, I’d open up a blank text file and start jotting stuff down. But because of the linear nature of a text file, there’s still going to be an order to what gets jotted down; without meaning to, I’ve imposed some kind of priority onto the still-unformed thoughts. Using a mind map allowed me get everything down first, and then form the connections later.
There were plenty of other exercises, but the other one that really struck me was a simple framework of five questions. Whatever it is that you’re trying to say, write down the answers to these questions about your audience:
- What are they sceptical about?
- What problems do they have?
- What’s different now that you’ve communicated your message?
- Paint a pretty picture of life for them now that you’ve done that.
- Finally, what do they need to do next?
They’re straightforward questions, but the answers can really help to make sure you’re covering everything you need to.
There were many more exercises, and by the end of the two hours, everyone had masses of raw material, albeit in an unstructured form. My workshop was supposed to help them take that content and give it some kind of shape.
The structure of stories
Ellen and I have been enjoying some great philosophical discussions about exactly what a story is, and how does it differ from a narrative structure, or a plot. I really love Ellen’s working definition: Narrative. In Space. Over Time.
This led me to think that there’s a lot that we can borrow from the world of storytelling—films, novels, fairy tales—not necessarily about the stories themselves, but the kind of narrative structures we could use to tell those stories. After all, the story itself is often the same one that’s been told time and time again—The Hero’s Journey, or some variation thereof.
So I was interested in separating the plot of a story from the narrative device used to tell the story.
To start with, I gave some examples of well-known stories with relatively straightforward plots:
- Star Wars,
- Little Red Riding Hood,
- Your CV,
- Jurassic Park, and
I asked everyone to take a story (either from that list, or think of another one) and write the plot down on post-it notes, one plot point per post-it. Before long, the walls were covered with post-its detailing the plot lines of:
- Toy Story,
- Back To The Future,
- The Three Little Pigs, and
- Pretty Woman.
Okay. That’s plot. Next we looked at narrative frameworks.
Begin at a crucial moment, then back up to explain how you ended up there.
e.g. Citizen Kane “Rosebud!”
Instead of describing the action directly, have characters tell it to one another.
In Media Res
Begin in the middle of the action. No exposition allowed, but you can drop hints.
e.g. Mad Max: Fury Road (or Star Wars, if it didn’t have the opening crawl).
Begin with a looooong zooooom into the past before taking up the story today.
e.g. 2001: A Space Odyssey.
Just the facts with no embellishment.
e.g. A police report.
You get the idea.
In a random draw, everyone received a card with a narrative device on it. Now they had to retell the story they chose using that framing. That led to some great results:
- Toy Story, retold as a conversation between Andy and his psychiatrist (dialogue),
- E.T., retold as a missing person’s report on an alien planet (distancing effect),
- Elf, retold with an introduction about the very first Christmas (backstory),
- Robocop, retold with Murphy already a cyborg, remembering his past (flashback),
- The Three Little Pigs, retold with the wolf already at the door and no explanation as to why there’s straw everywhere (in media res).
Once everyone had the hang of it, I asked them to revisit their mind maps and other materials from the previous day’s workshop. Next, they arranged the “chunks” of that story into a linear narrative …but without worrying about getting it right—it’s not going to stay linear for long. Then, everyone is once again given a narrative structure. Now try rearranging and restructuring your story to use that framework. If something valuable comes out of that, great! If not, well, it’s still a fun creative exercise.
And that was pretty much it. I had no idea what I was doing, but it didn’t matter. It wasn’t really about me. It was about helping others take their existing material and play with it.
That said, I’m glad I finally got this process out into the world in some kind of semi-formalised way. I’ve been preparing talks and articles using these narrative exercises for a while, but this workshop was just the motivation I needed to put some structure on the process.
I think I might try to create a proper deck of cards—along the lines of Brian Eno’s Oblique Strategies or Stephen Andersons’s Mental Notes—so that everyone has the option of injecting a random narrative structural idea into the mix whenever they’re stuck.
At the very least, it would be a distraction from listening to that pesky inner critic.
Thursday, October 22nd, 2015
I’m loving Ellen’s thoughts on taking storytelling to the next level.
Let’s say that we’ve got a lot of useful storytelling models for design now. Achievement unlocked. Let’s move on to discuss narrative structure, in space, over time.
Wednesday, August 26th, 2015
For almost a century and a half the West Pier has been Britain’s most iconic pier. Renowned for its wonderful architectural style, it has been visited and enjoyed by millions. Even today with its sculptural remains casting an eerie beauty over the seafront, the West Pier is still the most photographed building in Brighton.