Archive: October, 2015

142

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th     
12am                  
4am  
8am            
12pm                              
4pm                                          
8pm                                    

Saturday, October 31st, 2015

The Okinawa missiles of October | Bulletin of the Atomic Scientists

Pssst! Wanna read something scary for Halloween? Well, this should make you shit your pants.

Seriously though, if the event described here turn out to be true, it is one of the most frightening moments in the history of our species.

Caffeinating.

Caffeinating.

Surfacing

An interactive map of the world’s undersea cables, to accompany Nicole Starosielski’s book The Undersea Network.

Some Thoughts on Hope, Cynicism, and the Stories We Tell Ourselves | Brain Pickings

Critical thinking without hope is cynicism. Hope without critical thinking is naïveté.

Echoing Margaret Atwood’s observation:

If we abandon hope, we’re cooked. If we rely on nothing but hope, we’re cooked. So I would say judicious hope is necessary.

Friday, October 30th, 2015

Hello, San Francisco.

Going to San Francisco. brb

Thursday, October 29th, 2015

The inspirational @rosaemerald closing out @bytesconf.

The inspirational @rosaemerald closing out @bytesconf.

Listening to @lottejackson give a great presentation on pattern libraries.

Listening to @lottejackson give a great presentation on pattern libraries.

Listening to @iamjohnellison open up @bytesconf.

Listening to @iamjohnellison open up @bytesconf.

Delivering Responsibly

The full transcript of Scott’s excellent presentation on performance and progressive enhancement.

The Last Man - YouTube

Gavin Rothery’s wonderfully grim and atmospheric short film.

Wednesday, October 28th, 2015

<input> I ♡ you, but you’re bringing me down – Monica Dinculescu

The sad history of input elements.

I wish I could share in the closing optimism:

Now imagine the future where Web Components are supported natively, and someone else is allowed to write a <better-input>, an element that is a real, encapsulated DOM element, and not just a div soup. Imagine using this <better-input> that isn’t implemented differently in each browser, that looks the same everywhere, and that probably also knows how to bake you a cherry pie.

But I all I can think is:

Now imagine the future where Web Components are supported natively, and everyone is allowed to write a million variations of <my-idea-of-a-better-input>, an element that is an inaccessible div soup under the hood.

Patterns & Modules: The Toast — 2015 Redesign

I really like the way that you can literally flip between the source code and the output in this styleguide for The Toast.

Vietnamese duck.

Vietnamese duck.

Vietnamese Brussels sprouts.

Vietnamese Brussels sprouts.

It’s the IMP

There are Inception-like layers of nostalgia here: firstly, this web series of web pages made by Matt are a throwback to an earlier era, and secondly, the story being told goes all the way back to the birth of the ARPAnet.

Results of this morning’s narrative workshop…

Dialogue: http://clearleft.com/thinks/334

Backstory: http://clearleft.com/thinks/335

Storyforming

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.

Workshopping

The topic was “story.”

No wait, maybe it was …”narrative.”

That’s not quite right either.

“Content,” perhaps?

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.

Drawing our inner critic inner critics

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.

mind mapping

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:

  1. What are they sceptical about?
  2. What problems do they have?
  3. What’s different now that you’ve communicated your message?
  4. Paint a pretty picture of life for them now that you’ve done that.
  5. 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
  • Ghostbusters.

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:

  • Robocop,
  • Toy Story,
  • Back To The Future,
  • Elf,
  • E.T.,
  • The Three Little Pigs, and
  • Pretty Woman.

Okay. That’s plot. Next we looked at narrative frameworks.

Narrative frameworks as Oblique Strategies.

Flashback

Begin at a crucial moment, then back up to explain how you ended up there.

e.g. Citizen Kane “Rosebud!”

Dialogue

Instead of describing the action directly, have characters tell it to one another.

e.g. The Dialogues of Plato …or The Breakfast Club (or one of my favourite sci-fi short stories).

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).

Backstory

Begin with a looooong zooooom into the past before taking up the story today.

e.g. 2001: A Space Odyssey.

Distancing Effect

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.

Tried out a brand new workshop on my @Clearleft colleagues this morning. Nobody died.

Tried out a brand new workshop on my @Clearleft colleagues this morning. Nobody died.

Narrative frameworks as Oblique Strategies.

Narrative frameworks as Oblique Strategies.

Be comfortable looking like an idiot by Charlotte Jackson

I was talking to Charlotte recently about public speaking, confidence, and overcoming fear. She really hit the nail on the head when she said “I need to get comfortable with feeling like an idiot.”

Words to live by—especially if you’re working on the web.

Tuesday, October 27th, 2015

The Radiation Threat to “The Martian” (PDF)

This is something that has been bugging me ever since reading the book:

While Andy Weir does a good job of representing the risks faced by Mark Watney, stranded on Mars and confronting one life-threatening challenge after another, he is silent on the threat of radiation, not just to Mark but particularly to the crew of the Hermes as they contemplate executing a daring rescue mission that more than doubles their time in deep space.

Well, this paper answers all my questions.

Teaching at @CodebarBrighton this evening was immensely rewarding …yet again.

A Jekyll generator for automatically crossposting to Medium

Aaron has created a nice straightforward way to allow to POSSE posts from your Jekyll website to Medium.

What are the odds that @ChloeFinlayson and I would have the same inner critic? Complete with top hat and monocle.

What are the odds that @ChloeFinlayson and I would have the same inner critic?

Complete with top hat and monocle.

Drawing our inner critics.

Drawing our inner critics.

Collaborating.

Collaborating.

Workshopping.

Workshopping.

Enjoying @eldevri’s excellent workshop on structuring content.

Enjoying @eldevri’s excellent workshop on structuring content.

Monday, October 26th, 2015

Veggie feast for meatless Monday.

Veggie feast for meatless Monday.

EnhanceConf — Call For Proposals

There’s going to be a conference about progressive enhancement. It’ll happen in London in March of next year. You should speak at it.

You’ve got until December 20th to submit your proposal. What have you got to lose?

Cache-bustin’ makes me feel good.

From Radio to Porn, British Spies Track Web Users’ Online Identities

This profile of GCHQ’s “Karma Police” programme is as maddening as it is insightful: the sheer unashamed brazenness of these bastards deserves our collective anger …not the collective apathy which has been the UK’s response so far.

There is one glimmer of hope in this litany of affronts to decency:

In recent years, the biggest barrier to GCHQ’s mass collection of data does not appear to have come in the form of legal or policy restrictions. Rather, it is the increased use of encryption technology that protects the privacy of communications that has posed the biggest potential hindrance to the agency’s activities.

Death to Analytics — The Brooks Review

I concur with this sentiment:

If you are starting a new blog, or have one already, the best thing you can do is turn off all analytics.

Especially true for your own personal site:

Just turn them off now. Then, write about whatever the fuck you want to write about.

Using Quantity Queries to write content-aware CSS - tomango

Another take on the kind of quantity queries that Charlotte has been experimenting with for a while now. It all goes back to the nth-child stuff that Heydon was talking about at Responsive Day Out

Sunday, October 25th, 2015

Kailan.

Kailan.

The Internet Of Things That Change Their Own Clocks.

IOTTCTOC

Pronunciation: Eye Oh Teetok Catok

That one’s free.

You’re welcome

Saturday, October 24th, 2015

Waiting to play.

Waiting to play.

Eating toast.

Friday, October 23rd, 2015

Presentation

Rosa and Charlotte will both be speaking at Bytes Conf here in Brighton next week (don’t bother trying to get a ticket—it’s all sold out).

I’ve been helping them in their preparation, listening to them run through their talks, and offering bits of advice on the content and delivery. Charlotte said she was really nervous presenting to just the two of us. I said “I know what you mean.”

In the past I’ve tried giving practice run-throughs of upcoming conference talks to some of my co-workers at Clearleft. I always found that far more intimidating than giving the talk to room filled with hundreds of strangers.

In fact, just last night I did a practice run of my latest talk at Brighton’s excellent Async gathering, and seeing both Charlotte and Graham in attendance increased my nervousness.

Why is that?

I’ve been thinking about it, and I think it comes down to self-presentation.

We like to think that we have one single personality, but the truth is that we adjust our behaviour constantly to suit the situation. I behave differently when I’m interacting with a shopkeeper than when I’m interacting with my co-workers than when I’m interacting with my family. We adjust how we present ourselves, in subtle and not-so-subtle ways.

If you’re presenting a talk at a conference, it helps to present yourself differently than how you’d present yourself when you’re hanging out with your friends. There’s an element of theatricality—however subtle—in speaking in front of a room full of people. It can really help to slip into a more confident persona.

But if you’re presenting that same talk in a small room to a group of friends, it feels really, really strange to slip into that persona. It feels as strange as interacting with your family as though you were interacting with a shopkeeper.

I think that’s what’s at the root of the discomfort I feel when I try testing a talk on my co-workers. If I present myself in the informal mode I’d usually take with these people, the talk feels all wrong. But if I present myself in my stage persona, it feels weird to do that with these people. So either way, it’s going to feel really strange. Hence the nervousness.

Thing is …I’m not sure if being aware of this helps in any way.

A visual summary of my upcoming talk for @AnEventApart San Francisco.

A visual summary of my upcoming talk for @AnEventApart San Francisco.

System shock — Medium

This is such a delightful story of a brilliant mistake—true typographic nerdery and nostalgia.

Read all the way through for a free gift.

Thursday, October 22nd, 2015

Thoroughly enjoyed talking at this evening’s @AsyncJS—great Q&A afterwards too.

The State of JavaScript on Android in 2015 is… poor - Discourse Meta

There’s something quite Kafkaesque about reading through the comments on Jeff Atwood’s request for an alternative to Ember.js …for rendering some text on a screen.

Every now and then someone pipes up with “server-rendered HTML?”, there’s a pause, and then a response of “naahhhhh.”

Surreal.

Advanced storytelling: Narrative. In space. Over time. | Ellen de Vries

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.

Today’s twinsies.

Today’s twinsies.

Wednesday, October 21st, 2015

Bavette, quinoa, lentil, fennel, spring onion, tomato and feta with tahini.

Bavette, quinoa, lentil, fennel, spring onion, tomato and feta with tahini.

I’m really looking forward to hearing @MWichary speak at @AmpersandConf:

http://2015.ampersandconf.com/

Just over one month to go!

Looking at the line-up for @FullStackCon 2015: 3 days of 3 tracks with 66 speakers …62 men and 4 women.

Monday, October 19th, 2015

Periodic Table of Storytelling

Combining the molecules of narrative tropes to create stories.

UX Brighton - Lightning Edition

Andy P. is taking the reigns for the next UX Brighton event and it’s going to feature an ensemble cast delivering 5 minute lightning talks. Got something you want to talk about? Don’t be scared! Drop Andy a line.

Brightonians—Homebrew Website Club is on Wednesday, 6pm @68MiddleSt

https://indiewebcamp.com/events/2015-10-21-homebrew-website-club

Now seems like an opportune time to revive this suggestion:

https://adactio.com/journal/6439

SETI: A Networked Galaxy?

A fascinating guest post by Brian McConnell on Centauri Dreams: what if there’s a galactic equivalent to the internet, allowing civilisations to communicate with a system analogous to packet switching.

Unfortunately this kind of focussed signalling would be hard to detect. But on the other hand, it could explain the Fermi paradox.

Sunday, October 18th, 2015

Syndicating to Medium

When I brainpuked my thoughts on Google’s AMP project, I finished up by saying it was one more option for the Indie Web approach to syndication:

When I publish something on adactio.com in HTML, it already gets syndicated to different places. This is the Indie Web idea of POSSE: Publish (on your) Own Site, Syndicate Elsewhere. As well as providing RSS feeds, I’ve also got Twitter bots that syndicate to Twitter. An If This, Then That script pushes posts to Facebook. And if I publish a photo, it goes to Flickr. Now that Medium is finally providing a publishing API, I’ll probably start syndicating articles there as well. The more, the merrier.

Until Medium provided an API, I didn’t see much point in Medium. Let me clarify: I didn’t see much point in it for me. I’ve already got a website where I can publish whatever I like. For someone who doesn’t have their own website, I guess Medium—like Facebook, Twitter, Tumblr, etc.—provides a place to publish. I think this is what people mean when they use the word “platform” in a digital—rather than a North Sea oil drilling—sense.

Publishing exclusively on somebody else’s site works pretty well right up until the day the platform turns out to be a trap door and disappears from under you.

But I’m really puzzled by people who already have their own website choosing to publish on Medium instead. A shiny content farm is still a content farm.

“It’s the reach!” I’m told. That makes me sad. The whole point of the World Wide Web is that everybody has an equal opportunity to share their thoughts. You don’t need to ask anyone for permission. The gatekeepers of the previous century—record labels, book publishers, film producers—can’t stop you from making whatever you want and putting it out there for the world to see. And thanks to the principle of net neutrality baked into the design of TCP/IP, no one gets preferential treatment.

Notice that I said “people who already have their own website choosing to publish on Medium instead.” That last bit is important. Using Medium to publish copies of what you’ve already published on your own site gives you the best of both worlds: ownership and reach. That’s what Kevin does, for example. And Jeffrey. Until recently that was quite a pain in the ass, requiring a manual copy’n’paste process.

Back when Medium first launched, Dave Winer said:

Let me enter the URL of something I write in my own space, and have it appear here as a first class citizen. Indistinguishable to readers from something written here.

It still isn’t quite that simple, but now that Medium has a publishing API, it’s relatively straightforward to syndicate copies of your posts to Medium at the moment you publish on your own site.

Here’s what I did…

First of all, I signed up for a Medium account. For the longest time, even this simple step was off-limits for me because Medium used to require authentication using Twitter. By itself, that’s not a problem. The problem was that Medium demanded write permissions for my Twitter account. Just say no.

Now it’s possible to sign up for Medium using email so that rudeness is less of an issue (although I’d really like to see Medium stop being so demanding when it comes to Twitter permissions, especially as the interface copy bends over backwards to promise that Medium would never post to Twitter on my behalf …so why ask for permission to do just that?).

Once I had a Medium account, I needed two pieces of secret information in order to use the API.

The first piece is an access token.

I went to my settings on Medium and scrolled all the way to the bottom to the heading “Integration tokens”. I entered a description (“Syndication from adactio.com”) and pressed the “Get integration token” button.

Now I could use that token to get the second piece of information: my user ID.

I opened up a browser tab and went to this URL: https://api.medium.com/v1/me?accessToken= …adding my new secret integration token to the end.

That returns a JSON response. One of the fields in the JSON object has the name “id”. The value of that field is my user ID on Medium.

With those two pieces of information, I could make an authenticated POST request using cURL. Here’s the PHP code I’m using. It’s probably terrible but please feel free to use it, copy it, fork it, or do anything else you want with it.

When I run that code, I get a JSON response back from Medium’s API. Assuming I get a successful response, I can store the URL of the Medium copy and link out to it from here. That copy on Medium has a corresponding link rel="canonical" in the head of the document pointing back here to adactio.com.

That’s pretty much it. I added a checkbox to my posting interface so that sending a copy of a post to Medium is just a toggle away. I’ll tick that checkbox when I post this. You could be reading this on my site or you could be reading the copy on Medium.

The code I wrote is pretty similar to how I post notes to Twitter and photos to Flickr. In fact, posting to Medium is more straightforward: Flickr requires three bits of secret information; Twitter requires four.

What would make this cross-posting with Medium really interesting would be if it could work in both directions. Then I’d be able to use the (very nice) writing interface on Medium to publish on adactio.com.

That’s not so far-fetched. I’ve already got a micropub endpoint here on my site (here’s the code). That’s how I’m able to use Instagram to post photos to my own site (using OwnYourGram). I let Instagram keep a copy of my photo. I’d be happy to let Medium keep a copy of my post.

We could make history:

We need to break out of the model where all these systems are monolithic and standalone. There’s art in each individual system, but there’s a much greater art in the union of all the systems we create.

Sunday roast.

Sunday roast.

Arbitrary Number Generator

Need an arbitrary—but not random—number? Here you go.

No numbers available? Top up the stock by providing some arbitrary numbers.

London Accessibility Meetup #1 - London Accessibility Meetup

The inaugural London accessibility meet-up is happening on October 28th with two great presenters: Robin Christopherson and Julie Howell—that’s right; she’s coming out of retirement for one last talk!

The Martian and ET:

A botanist stranded on a harsh planet must “science the shit” out of their situation using only available materials.

Mind set

Whenever I have a difference of opinion with someone, I try to see things from their perspective. But sometimes I’m not very good at it. I need to get better.

Here’s an example: I think that users of small-screen touch-enabled devices should be able to pinch-to-zoom content on the web. That idea was challenged twice in recent times:

  1. The initial meta viewport element in AMP HTML demanded that pinch-to-zoom be disabled (it has since been relaxed).
  2. WebKit is removing the 350ms delay on tap …but only if the page disables pinch-to-zoom (a bug has been filed).

In both cases, I strongly disagreed with the decision to disable what I believe is a vital accessibility feature. But the strength of my conviction is irrelevant. If anything, it is harmful. The case for maintaining accessibility was so obvious to me, I acted as though it were self-evident to everyone. But other people have different priorities, and that’s okay.

I should have stopped and tried to see things from the perspective of the people implementing these changes. Nobody would deliberately choose to remove an important accessibility feature without good reason, so what would those reasons be? Does removing pinch-to-zoom enhance performance? If so, that’s an understandable reason to mandate the strict meta viewport element. I still disagree with the decision, but now when I argue against it, I can approach it from that angle. Instead of dramatically blustering about how awful it is to remove pinch-to-zoom, my time would have been better spent calmly saying “I understand why this decision has been made, but here’s why I think the accessibility implications are too severe…”

It’s all too easy—especially online—to polarise just about any topic into a binary black and white issue. But of course the more polarised differences of opinion become, the less chance there is of changing those opinions.

If I really want to change someone’s mind, then I need to make the effort to first understand their mind. That’s going to be far more productive than declaring that my own mind is made up. After all, if I show no willingness to consider alternative viewpoints, why should they?

There’s an old saying that before criticising someone, you should walk a mile in their shoes. I’m going to try to put that into practice, and not for the two obvious reasons:

  1. If we still disagree, now we’re a mile away from each other, and
  2. I’ve got their shoes.

Saturday, October 17th, 2015

Steak, wine and cheese.

Steak, wine and cheese.

The Fifth Dragon on Tor.com

A short story by Ian McDonald set in the same universe as his new novel Luna: New Moon.

Porterhouse with onions and mushrooms.

Porterhouse with onions and mushrooms.

Accelerated Mobile Pages - I’ve Got More Questions than Answers by Andy Davies

Andy examines Google’s AMP project from a performance perspective and is left puzzled by its reliance on JavaScript and custom elements for rendering media.

But he shares my hope that AMP could serve as a demo of what the web could be if we developers had the will and political clout to see it through:

I wonder if what AMP really does is remind us how we’ve failed to build a performant web… we know how to, but all too often we just choose not to (or lose the argument) and fill our sites with cruft that kills performance, and with it our visitors’ experience.

Day 70: Jeremy’s Got Slack Socks

Yeah, you’re jealous.

Official Google Webmaster Central Blog: Deprecating our AJAX crawling scheme

It’s official: hash bang URLs are an anti-pattern, and if you want your content indexed by Google, use progressive enhancement:

Since the assumptions for our 2009 proposal are no longer valid, we recommend following the principles of progressive enhancement.

Friday, October 16th, 2015

Friday afternoon table tennis at beer o’clock in @Clearleft Towers.

Friday afternoon table tennis at beer o’clock in @Clearleft Towers.

Flat white.

Flat white.

Thursday, October 15th, 2015

The Utopia Of Records: Why Sound Archiving Is Important

The significant challenges in archiving audio.

Liking @qwertykate’s wookie hair cut. (note: no wookies—or other species—were harmed in the making of this coat)

Liking @qwertykate’s wookie hair cut.

(note: no wookies—or other species—were harmed in the making of this coat)

Someone will read this

After Responsive Field Day I had the chance to spend some extra time in Portland. I was staying with one Andy, with occasional welcome opportunities to hang out with the other Andy.

Over an artisanal, hand-crafted, free-range lunch one day, I took a moment to thank Andy B. I thanked him for a link. Links are very much his stock-in-trade, but there was one in particular that he had shared which stuck in my soul.

It started when he offered a bribe for a good link:

Paul Thompson won the bounty:

The link was to a page on Tilde Town, one of the many old-school web rings set up in the spirit of Paul Ford’s Tilde Club. The owner of this page had taken it upon himself to perform a really interesting—and surprisingly moving—experiment:

  1. Find blog posts where people have written “no one will ever read this”, and
  2. Read them aloud.

I’ve written before about how powerful the sound of a human voice can be. There was something about hearing these posts—which were written with a resigned acceptance of indifference—being given the time and respect to be read aloud. I listened to every single one, sometimes bemused, sometimes horrified, always fascinated.

You should listen to all of them too. They deserve it.

One in particular haunted me. It was written in 2008. After listening to it, I had to know more. I felt creepy and voyeuristic, but I transcribed a sentence from the audio file and pasted it in to Google.

I found her blog on the old my-diary.org domain. She only wrote nine entries in total. Her last one was in November 2009.

That was six years ago. I wonder how things turned out for her. I wonder if life got better for her when she left her teenage years behind. I wonder if she ever found peace.

I hope she’s okay.

Performance Budget Calculator

A handy little for calculating your performance budget based on how long you want your page to take to load on a particular connection.

Her Code Got Humans on the Moon—And Invented Software Itself | WIRED

A profile—published on Ada Lovelace Day—of Margaret Hamilton’s work on the Apollo project.

Static AMP page

Maciej has created a version the AMP Project homepage that’s faster, more performant, and more …um …straight-talkin’.

Wednesday, October 14th, 2015

Trying not to get irritated by people hinting that the KIC 8462852 anomaly could by a Dyson sphere—a Dyson sphere occludes all the light!

The Internet’s Dark Ages - The Atlantic

The promise of the web is that Alexandria’s library might be resurrected for the modern world. But today’s great library is being destroyed even as it is being built.

A fascinating account of one story’s linkrot that mirrors the woeful state of our attitude to cultural preservation on the web.

Historians and digital preservationists agree on this fact: The early web, today’s web, will be mostly lost to time.

Exciting things are afoot with the @Clearleftintern project.

Exciting things are afoot with the @Clearleftintern project.

Responsive News — AMP and Responsive Web Design

Tom’s thoughts on what AMP means for developers and publishers. He was initially sceptical but now he’s cautiously optimistic. Like me, he’s hoping that AMP can force the hand of those third-party advertisers to get their act together.

Publisher’s development teams are very capable of creating fast experiences for mobile users, but they don’t have the clout to coordinate all the additional cruft that is added to the page. However, if all the different publishers dev team’s got together and put their weight behind a single implementation, then we can force third parties to change their habits.

Responsive Field Day

All the videos from the excellent Responsive Field Day are now available. Even better, the audio is also available for your huffduffing pleasure!

All the presentations and panels were great. Sophie Shepherd’s terrific talk has really stuck with me.

Jeremy Keith - Responsive Field Day 2015 - YouTube

Here’s the 20 minute talk I gave at the inaugural Responsive Field Day in Portland.

Tuesday, October 13th, 2015

Rosa and Dot

Today is October 13th. It is Ada Lovelace Day:

Ada Lovelace Day is an international celebration of the achievements of women in science, technology, engineering and maths (STEM).

Today is also a Tuesday. That means that Codebar is happening this evening in Brighton:

Codebar is a non-profit initiative that facilitates the growth of a diverse tech community by running regular programming workshops.

The Brighton branch of Codebar is run by Rosa, Dot, and Ryan.

Rosa and Dot are Ruby programmers. They’ve poured an incredible amount of energy into making the Brighton chapter of Codebar such a successful project. They’ve built up a wonderful, welcoming event where everyone is welcome. Whenever I’ve participated as a coach, I’ve always found it be an immensely rewarding experience. For that, and for everything else they’ve accomplished, I thank them.

Brighton is lucky to have them.

BBC iWonder - Who made the web so hard to control?

A great little primer on the origins of the internet and the web, by Aleks.

The Most Mysterious Star in Our Galaxy - The Atlantic

The most interesting anomaly uncovered by a Zooniverse project since Hanny’s Voorwerp.

Foreword to Adaptive Web Design by Aaron Gustafson

The foreword to the second edition of the book.

Monday, October 12th, 2015

Tangram Bendy Map

BWAAAAMP! It’s Brighton …Inceptionised.

Here’s Peter’s code.

The problem with our data-driven world by Alexis C. Madrigal

I really like this comparison between Waldsterben and the current situation with the web after years of pervasive tracking.

The Be Nice AMP Project

An alternate version of AMP HTML that works in more parsers and user agents.

The AMP project have “A new approach to web performance” making your website dependent on Google. The Be Nice AMP Project follow the old approach: Make your site fast following best practice guidelines and be independent of Google.

Lentils, endive, blue cheese, walnut and roasted grape salad.

Lentils, endive, blue cheese, walnut and roasted grape salad.

Listening to @jvbates.

Listening to @jvbates.

Jon and Richard.

Jon and Richard.

Judgement day.

Judgement day.

Whatfettle ⁓ Note to self: write more

You read a lot and like the idea of writing. You know the best way to get better at writing is to write, so write!

Histography - Timeline of History

A nice navigable timeline of historical events from Wikipedia.

Using @Medium’s new API to syndicate posts from https://adactio.com/journal/ to https://medium.com/@jeremykeith

Sunday, October 11th, 2015

Meat ’n’ two veg, Sunday roast.

Meat ’n’ two veg, Sunday roast.

A lovely hand-crafted calendar from @MonikaBansal28.

A lovely hand-crafted calendar from @MonikaBansal28.

Saturday, October 10th, 2015

Questioning the AMP HTML folks inventing arbitrary attributes…

https://github.com/ampproject/amphtml/issues/517#issuecomment-146737491

Steak, salad and corn.

Steak, salad and corn.

Carving the steak.

Carving the steak.

AMPed up

Apple has Apple News. Facebook has Instant Articles. Now Google has AMP: Accelerated Mobile Pages.

The big players sure are going to a lot of effort to reinvent RSS.

That may sound like a flippant remark, but it’s not too far from the truth. In the case of Apple News, its current incarnation appears to be quite literally an RSS reader, at least until the unveiling of the forthcoming Apple News Format.

Google’s AMP project looks a little bit different to the offerings from Facebook and Apple. Rather than creating a proprietary format from scratch, it mandates a subset of HTML …with some proprietary elements thrown in (or, to use the more diplomatic parlance of the extensible web, custom elements).

The idea is that alongside the regular HTML version of your document, you provide a corresponding AMP HTML version. Because the AMP HTML version will be leaner and meaner, user agents can then grab the AMP HTML version and present that to the end user for a faster browsing experience.

So if an RSS feed is an alternate representation of a homepage or a listing of articles, then an AMP document is an alternate representation of a single article.

Now, my own personal take on providing alternate representations of documents is “Sure. Why not?” Here on adactio.com I provide RSS feeds. On The Session I provide RSS, JSON, and XML. And on Huffduffer I provide RSS, Atom, JSON, and XSPF, adding:

If you would like to see another format supported, share your idea.

Also, each individual item on Huffduffer has a corresponding oEmbed version (and, in theory, an RDF version)—an alternate representation of that item …in principle, not that different from AMP. The big difference with AMP is that it’s using HTML (of sorts) for its format.

All of this sounds pretty reasonable: provide an alternate representation of your canonical HTML pages so that user-agents (Twitter, Google, browsers) can render a faster-loading version …much like an RSS reader.

So should you start providing AMP versions of your pages? My initial reaction is “Sure. Why not?”

The AMP Project website comes with a list of frequently asked questions, which of course, nobody has asked. My own list of invented frequently asked questions might look a little different.

Will this kill advertising?

We live in hope.

Alas, AMP pages will still be able to carry advertising, but in a restricted form. No more scripts that track your movement across the web …unless the script is from an authorised provider, like say, Google.

But it looks like the worst performance offenders won’t be able to get their grubby little scripts into AMP pages. This is a good thing.

Won’t this kill journalism?

Of all the horrid myths currently in circulation, the two that piss me off the most are:

  1. Journalism requires advertising to survive.
  2. Advertising requires invasive JavaScript.

Put the two together and you get the gist of most of the chicken-littling articles currently in circulation: “Journalism requires invasive JavaScript to survive.”

I could argue against the first claim, but let’s leave that for another day. Let’s suppose for now that, sure, journalism requires advertising to survive. Fine.

It’s that second point that is fundamentally wrong. The idea that the current state of advertising is the only way of advertising is incredibly short-sighted and misguided. Invasive JavaScript is not a requirement for showing me an ad. Setting a cookie is not a requirement for showing me an ad. Knowing where I live, who my friends are, what my income level is, and where I’ve been on the web …none of these are requirements for showing me an ad.

It is entirely possible to advertise to me and treat me with respect at the same time. The Deck already does this.

And you know what? Ad networks had their chance. They had their chance to treat us with respect with the Do Not Track initiative. We asked them to respect our wishes. They told us get screwed.

Now those same ad providers are crying because we’re installing ad blockers. They can get screwed.

Anyway.

It is entirely possible to advertise within AMP pages …just not using blocking JavaScript.

For a nicely nuanced take on what AMP could mean for journalism, see Joshua Benton’s article on Nieman Lab—Get AMP’d: Here’s what publishers need to know about Google’s new plan to speed up your website.

Why not just make faster web pages?

Excellent question!

For a site like adactio.com, the difference between the regular HTML version of an article and the corresponding AMP version of the same article is pretty small. It’s a shame that I can’t just say “Hey, the current version of the article is the AMP version”, but that would require that I only use a subset of HTML and that I add some required guff to my page (including an unnecessary JavaScript file).

But for most of the news sites out there, the difference between their regular HTML pages and the corresponding AMP versions will be pretty significant. That’s because the regular HTML versions are bloated with third-party scripts, oversized assets, and cruft around the actual content.

Now it is in theory possible for these news sites to get rid of all those things, and I sincerely hope that they will. But that’s a big political struggle. I am rooting for developers—like the good folks at VOX—who have to battle against bosses who honestly think that journalism requires invasive JavaScript. Best of luck.

Along comes Google saying “If you want to play in our sandbox, you’re going to have to abide by our rules.” Those rules include performance best practices (for the most part—I take issue with some of the requirements, and I’ll go into that in more detail in a moment).

Now when the boss says “Slap a three megabyte JavaScript library on it so we can show a carousel”, the developers can only respond with “Google says No.”

When the boss says “Slap a ton of third-party trackers on it so we can monetise those eyeballs”, the developers can only respond with “Google says No.”

Google have used their influence like this before and it has brought them accusations of monopolistic abuse. Some people got very upset when they began labelling (and later ranking) mobile-friendly pages. Personally, I’ve got no issue with that.

In this particular case, Google aren’t mandating what you can and can’t do on your regular HTML pages; only what you can and can’t do on the corresponding AMP page.

Which brings up another question…

Will the AMP web kill the open web?

If we all start creating AMP versions of our pages, and those pages are faster than our regular HTML versions, won’t everyone just see the AMP versions without ever seeing the “full” versions?

Tim articulates a legitimate concern:

This promise of improved distribution for pages using AMP HTML shifts the incentive. AMP isn’t encouraging better performance on the web; AMP is encouraging the use of their specific tool to build a version of a web page. It doesn’t feel like something helping the open web so much as it feels like something bringing a little bit of the walled garden mentality of native development onto the web.

That troubles me. Using a very specific tool to build a tailored version of my page in order to “reach everyone” doesn’t fit any definition of the “open web” that I’ve ever heard.

Fair point. But I also remember that a lot of people were upset by RSS. They didn’t like that users could go for months at a time without visiting the actual website, and yet they were reading every article. They were reading every article in non-browser user agents in a format that wasn’t HTML. On paper that sounds like the antithesis of the open web, but in practice there was always something very webby about RSS, and RSS feed readers—it put the power back in the hands of the end users.

Some people chose not to play ball. They only put snippets in their RSS feeds, not the full articles. Maybe some publishers will do the same with the AMP versions of their articles: “To read more, click here…”

But I remember what generally tended to happen to the publishers who refused to put the full content in their RSS feeds. We unsubscribed.

Still, I share the concern that any one company—whether it’s Facebook, Apple, or Google—should wield so much power over how we publish on the web. I don’t think you have to be a conspiracy theorist to view the AMP project as an attempt to replace the existing web with an alternate web, more tightly controlled by Google (albeit a faster, more performant, tightly-controlled web).

My hope is that the current will flow in both directions. As well as publishers creating AMP versions of their pages in order to appease Google, perhaps they will start to ask “Why can’t our regular pages be this fast?” By showing that there is life beyond big bloated invasive web pages, perhaps the AMP project will work as a demo of what the whole web could be.

I’ve been playing around with the AMP HTML spec. It has some issues. The good news is that it’s open source and the project owners seem receptive to feedback.

JavaScript

No external JavaScript is allowed in an AMP HTML document. This covers third-party libraries, advertising and tracking scripts. This is A-okay with me.

The reasons given for this ban are related to performance and I agree with them completely. Big bloated JavaScript libraries are one of the biggest performance killers on the web. I’m happy to leave them at the door (although weirdly, web fonts—another big performance killer—are allowed in).

But then there’s a bit of an about-face. In order to have a valid AMP HTML page, you must include a piece of third-party JavaScript. In this case, the third party is Google and the JavaScript file is what handles the loading of assets.

This seems a bit strange to me; on the one hand claiming that third-party JavaScript is bad for performance and on the other, requiring some third-party JavaScript. As Justin says:

For me this is loading one thing too many… the AMP JS library. Surely the document itself is going to be faster than loading a library to try and make it load faster.

On the plus side, this third-party JavaScript is loaded asynchronously. It seems to mostly be there to handle the rendering of embedded content: images, videos, audio, etc.

Embedded content

If you want audio, video, or images on your page, you must use propriet… custom elements like amp-audio, amp-video, and amp-img. In the case of images, I can see how this is a way of getting around the browser’s lookahead pre-parser (although responsive images also solve this problem). In the case of audio and video, the standard audio and video elements already come with a way of specifying preloading behaviour using the preload attribute. Very odd.

Justin again:

I’m not sure if this is solving anything at the moment that we’re not already fixing with something like responsive images.

To use amp-img for images within the flow of a document, you’ll need to specify the dimensions of the image. This makes sense from a rendering point of view—knowing the width and height ahead of time avoids repaints and reflows. Alas, in many of the cases here on adactio.com, I don’t know the dimensions of the images I’m including. So any of my AMP HTML pages that include images will be invalid.

Overall, the way that AMP HTML handles embedded content looks like a whole lot of wheel reinvention. I like the idea of providing custom elements as an option for authors. I hate the idea of making them a requirement.

Metadata

If you want to provide metadata about your document, AMP HTML currently requires the use of Google’s Schema.org vocabulary. This has a big whiff of vendor lock-in to it. I’ve flagged this up as an issue and Aaron is pushing a change so hopefully this will be resolved soon.

Accessibility

In its initial release, the AMP HTML spec came with some nasty surprises for accessibility. The biggest is probably the requirement to include this in your viewport meta element:

maximum-scale=1,user-scalable=no

Yowzers! That’s some slap in the face to decent web developers everywhere. Fortunately this has been flagged up and I’m hoping it will be fixed soon.

If it doesn’t get fixed, it’s quite a non-starter. It beggars belief that Google would mandate to authors that they must make their pages inaccessible to pinch/zoom. I would hope that many developers would rebel against such a draconian injunction. If that happens, it’ll be interesting to see what becomes of those theoretically badly-formed AMP HTML documents. Technically, they will fail validation, but for very good reason. Will those accessible documents be rejected?

Please get involved on this issue if this is important to you (hint: this should be important to you).

There are a few smaller issues. Initially the :focus pseudo-class was disallowed in author CSS, but that’s being fixed.

Currently AMP HTML documents must have this line:

<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

shudders

That’s a horrible conflation of JavaScript availability and CSS. It’s being fixed though, and soon all the opacity jiggery-pokery will only happen via JavaScript, which will be a big improvement: it should either all happen in CSS or all happen in JavaScript, but not the current mixture of the two.

Discovery

The AMP HTML version of your page is not the canonical version. You can specify where the real HTML version of your document is by using rel="canonical". Great!

But how do you link from your canonical page out to the AMP HTML version? Currently you’re supposed to use rel="amphtml". No, they haven’t checked the registry. Again. I’ll go in and add it.

In the meantime, I’m also requesting that the amphtml value can be combined with the alternate value, seeing as rel values can be space separated:

rel="alternate amphtml" type="text/html"

See? Not that different to RSS:

rel="alterate" type="application/rss+xml"

POSSE

When I publish something on adactio.com in HTML, it already gets syndicated to different places. This is the Indie Web idea of POSSE: Publish (on your) Own Site, Syndicate Elsewhere. As well as providing RSS feeds, I’ve also got Twitter bots that syndicate to Twitter. An If This, Then That script pushes posts to Facebook. And if I publish a photo, it goes to Flickr. Now that Medium is finally providing a publishing API, I’ll probably start syndicating articles there as well. The more, the merrier.

From that perspective, providing AMP HTML pages feels like just one more syndication option. If it were the only option, and I felt compelled to provide AMP versions of my content, I’d be very concerned. But for now, I’ll give it a whirl and see how it goes.

Here’s a bit of PHP I’m using to convert a regular piece of HTML into AMP HTML—it’s horrible code; it uses regular expressions on HTML which, as we all know, will summon the Elder Gods.

Friday, October 9th, 2015

Links from a talk

I’m coming to a rest after a busy period of travelling and speaking. In the last five or six weeks I’ve been to Copenhagen, Freiburg, Prague, Portland, Seattle, and Austin.

The trip to Austin was lovely. It was so nice to be there when it wasn’t South by Southwest (the infrastructure of the whole town creaks under the sheer weight of the event). I wasn’t just there to eat tacos and drink beer in the sunshine. I was there to talk at An Event Apart.

Like I said months before the event:

Everyone in the line up is one of my heroes.

It was, as always, a great event. A personal highlight for me was getting to meet Lara Hogan for the first time. She was kind enough to sign my copy of her fantastic book. She gave an equally fantastic talk at the conference, featuring some of the most deftly-handled Q&A I’ve ever seen.

I spoke at the end of the conference (no pressure!), giving a brand new talk called Resilience—I gave a shortened version at Coldfront and Smashing Conference but this was my first chance to go all out with an hour long talk. It was my chance to go full James Burke.

I assembled some related links for the attendees. Here they are…

Books

References

Resources

Related posts on adactio.com

Here’s a readlist of those links.

Further reading

Here’s a readlist of those links.

See also: other links tagged with “progressive enhancement” on adactio.com

Wednesday, October 7th, 2015

Spinning up the FTL drive, about to make a direct jump from Austin’s nascent spaceport back to the prime meridian.

Spinning up the FTL drive, about to make a direct jump from Austin’s nascent spaceport back to the prime meridian.

Farewell, Austin. I have enjoyed your sunshine and tacos.

Farewell, Austin.

I have enjoyed your sunshine and tacos.

Rise of the meta-platforms and the new ‘web browser’ - Tales of a Developer Advocate

Paul compares publishing on the web to publish on proprietary platforms, and concludes that things aren’t looking great right now.

Performance is the number one selling point for each of these new content platforms.

Frito pie.

Frito pie.

The Internet of Things Won’t Work Because Things Don’t Work « The Royal Frontier

But we are promised and shown a world where technology is gorgeous and streamlined and helpful and light and unobtrusive. We don’t live in that world. That world is a fantasy. The hope that the Internet of Things will allow us to be free from daily headaches and logistical errors is naive.

”What is best in life?”

”What is best in life?”

Brightonians: Homebrew Website Club is happening at @68MiddleSt, from 6pm—7:30pm.

Tuesday, October 6th, 2015

Done! I’m going to Easy Tiger for a beer. See you there.

This is not a DM fail.

Showtime.

Showtime.

About to speak at An Event Apart Austin, where I plan to go full James Burke.

Nervous about how this is going to go down.

W00t! Missock accomplished! Thanks, @Mathowie.

W00t! Missock accomplished!

Thanks, @Mathowie.

Getting distracted by @teleject’s awesome 2001: A Space Odyssey screensaver at An Event Apart Austin.

Monday, October 5th, 2015

The toxic side of free. Or: how I lost the love for my side project (part 1)

Have a read through all of Remy’s posts on his frustrating—but still rewarding—time running JS Bin.

  1. The start of the DDoS
  2. Spam
  3. Registered users wreaking havoc
  4. The cost
  5. Police

So happy I got my copy of Designing For Performance signed by @Lara_Hogan.

https://twitter.com/lara_hogan/status/651153887273947136

“100 Words 100” by Kyle Halleman • Nineteen Twenty-Seven

Kyle Halleman completed one hundred days of writing one hundred words. Respect! I know how hard that is.

Have a read from the first entry onwards.

20 questions to ask children about ghosts — Medium

Just when I think that I don’t get the point of Medium, along comes Dan to show me the light. This thought-provoking thinkpiece isn’t quite on the same level of his seminal groundbreaking kittens work, but I guarantee it will stay with you.

Austin at night.

Austin at night.

Jessica and Ethan.

Jessica and Ethan.

Going under the bridge.

Going under the bridge.

Sunday, October 4th, 2015

Ape Shall Not Kill Ape. cc @Malarkey

Ape Shall Not Kill Ape.

cc @Malarkey

Thoroughly enjoyed The Martian, which was basically Science Hack Day: The Movie.

Coffee and breakfast tacos.

Coffee and breakfast tacos.

adactio’s jams | This Is My Jam

I absolutely love the way that my archive is presented here. Matt and Hannah have set the bar in how to shut down a service in an honest, dignified way.

That feeling when you’ve just seen a great band (TV On The Radio) and you go to make it your jam on thisismyjam.com and then you remember…

Saturday, October 3rd, 2015

Tacos for breakfast, then a stroll down South Congress, then (Torchy’s) tacos for lunch.

Now thinking about having tacos for dinner.

Hanging out with the doggies in the dog park.

Hanging out with the doggies in the dog park.

Jessica at Torchy’s Tacos.

Jessica at Torchy’s Tacos.

Jessica.

Jessica.

Austin Farmers’ Market.

Austin Farmers’ Market.

Surf’n’turf.

Surf’n’turf.

Grilled octopus.

Grilled octopus.

Hanging out, Storey style.

Hanging out, Storey style.

Jessica in Austin.

Jessica in Austin.

Thursday, October 1st, 2015

Goodbye, Seattle.

See you soon, Austin!

Jeb's dumplings.

Jeb’s dumplings.

Wall o'gum.

Wall o’gum.

Miranj: Collateral Damage

Websites should not come with minimum software requirements.

Wondering if any of my Austin friends are planning to see The Martian this weekend @DraftHouse.

cc. @TrentWalton @SamKap @GoatsAndBacon