Here are the slides and links from the talk I just gave at the Delta V conference. I had ten minutes, but to be honest, just saying the name of the talk tells you everything.
Friday, May 11th, 2018
Wednesday, May 2nd, 2018
Service worker resources
At the end of my new book, Going Offline, I have a little collection of resources relating to service workers. Here’s how I introduce them:
If this book were a podcast, then this would be the point at which I would be imploring you to rate me on iTunes (or I’d be telling you about a really good mattress). Instead, I’d like to give you some hyperlinks so that you can explore some of the topics in this brief book in more detail.
It always feels a little strange to publish a list of hyperlinks in a physical book, so I figured I’d republish them here for easy access…
- Mariko Kosaka wrote and illustrated an explanation of service workers in a post on her site called “Service Worker, what are you?” (https://kosamari.com/notes/Service-Worker-what-are-you).
- Mariko also wrote and illustrated an explanation of promises called “The Promise of a Burger Party” (https://kosamari.com/notes/the-promise-of-a-burger-party).
- Ire Aderinokun wrote a clear guide to “The Service Worker Lifecycle” (https://bitsofco.de/the-service-worker-lifecycle/).
- Yoav Weiss has an explanation of different kinds of caching in “A Tale of Four Caches” (https://blog.yoav.ws/tale-of-four-caches/).
- Lyza Gardner wrote a step-by-step guide for Smashing Magazine on “Making A Service Worker: A Case Study” (https://www.smashingmagazine.com/2016/02/making-a-service-worker/).
- Jake Archibald has collected a series of service worker strategies into an “offline cookbook” (https://jakearchibald.com/2014/offline-cookbook/).
- Jake also recorded an excellent online video series that you can enjoy for free (https://www.udacity.com/course/offline-web-applications—ud899).
- Mike Riethmuller has on offline page on his site that shows articles you’ve previously visited (https://madebymike.com.au/writing/service-workers/).
- Ethan Marcotte has a similar offline page, but he also shows metadata for each article (https://ethanmarcotte.com/wrote/going-offline/).
- Una Kravets allows you to choose which pages on her site you want to save for reading offline (https://una.im/save-offline/).
Progressive web apps
- Alex Russell answers the question “What, Exactly, Makes Something A Progressive Web App?” (https://infrequently.org/2016/09/what-exactly-makes-something-a-progressive-web-app/).
- Ada Rose Cannon goes into the details of “The Building Blocks Of Progressive Web Apps” (https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/).
- Aaron Gustafson quite rightly points out that “Yes, That Web Project Should Be a PWA” (https://alistapart.com/article/yes-that-web-project-should-be-a-pwa).
- Jason Grigsby outlines “The Business Case for Progressive Web Apps” (https://cloudfour.com/thinks/the-business-case-for-progressive-web-apps/).
- Google released a collection of scripts and tools for going offline called Workbox (https://developers.google.com/web/tools/workbox/).
- To get started with your manifest and service worker, you can paste your website’s URL into PWA Builder (http://preview.pwabuilder.com/).
- Lighthouse is a great testing tool for progressive web apps that’s now bundled into Chrome’s Developer Tools under the Audits panel (https://developers.google.com/web/tools/lighthouse/).
Friday, April 6th, 2018
This is so great! I don’t just mean the Kickstarter project itself, but this write-up of the origins of pitas.com—it’s a fascinating, heartfelt, genuine piece of web history.
The whole point behind Pitas was, and is, being a simple way to blog. You just open the site, type something into the entry box, and click POST.
And now it’s coming back …if this project gets funded.
I guess if the site gets infested by Nazis we’ll probably not do anything about it for 10 years, then make a bunch of wimpy statements, do nothing, maybe finally request free help from the community and still do nothing about it.
Just kidding, their asses will be kicked off immediately.
Wednesday, April 4th, 2018
When I’m asked to give an example of a beautiful piece of design, perfect in form and function, I often respond with “the URL.”
I love every word of this beautifully-written love letter from Brendan.
Friday, March 30th, 2018
A deep dive into the
:focus pseudo-class and why it’s important.
Wednesday, March 21st, 2018
Links from a talk
In two weeks time, I’ll be in Seattle for An Event Apart. I’ll be giving a brand new talk. The title is The Way Of The Web (although perhaps a more accurate title would be The Layers Of The Web).
Here’s the description:
There’s a direct evolution line from my previous talks—Resilence and Evaluating Technology—to this new one. (Spoiler: everything I talk about is in some way related to progressive enhancement …even if I never use the words “progressive" or “enhancement" in the talks.)
I’ve been preparing this new talk for months. It started with a mind map—an A3 sheet of paper with disconnected thoughts, like something from the scene in the crime movie where they enter the lair of the serial killer and find a crazy wall.
Then I set it aside and began procrastinating. But it was the good kind of procrastinating, right? I mean, I had made a start and all those thoughts were now bubbling around in my head.
Eventually I forced myself to put things in some sort of order and started creating slides. That’s the beginning of the horrible process bouncing between thinking “this is pretty good!” and “this is absolute crap!” To be honest, I never actually know if a talk is any good until I give it in front of an audience (practice runs at work are great for getting feedback but they’re not the same as doing the talk for real).
Anyway, I think the talk is ready to roll. If you see me giving this talk and you’re interested in diving deeper into the topics raised, I’ve gathered together some of sources I used.
- Pace Layering: How Complex Systems Learn and Keep Learning by Stewart Brand
- The Human Computer’s Dreams Of The Future (PDF) by Ida Rhodes
- 3D Glasses On Reality by Kim Stanley Robinson
- The Rule of Least Power by Tim Berners-Lee and Noah Mendelsohn
- Everything Easy Is Hard Again by Frank Chimero
- Over-engineering is under-engineering by Baldur Bjarnason
- The Burden of Precision by Daniel Eden
- The work I like by Ethan Marcotte
- A Sound Of Thunder (PDF) by Ray Bradbury
Related posts on adactio.com
- 02018-03-06 Minimal viable service worker
- 02017-12-23 Ubiquity and consistency
- 02017-11-02 The dConstruct Audio Archive works offline
- 02017-03-15 Progressive Web App questions
- 02017-01-11 Making Resilient Web Design work offline
- 02016-10-18 Choice
- 02015-11-15 Home Screen
Progressive Web Apps
- Make It So by Nathan Shedroff and Christopher Noessel
- How Buildings Learn by Stewart Brand
- Time Travel by James Gleick
Saturday, March 10th, 2018
Saturday, February 3rd, 2018
I love these kinds of deep dives into one seemingly simple pattern; in this case it’s a download link with the humble
Tuesday, January 9th, 2018
The philosophy behind these tools matches my own philosophy (which I think is one of the most important factors in choosing a tool that works for you, not against you).
Thursday, December 7th, 2017
Great advice on keeping your hyperlinks accessible.
Wednesday, November 29th, 2017
Many, many years ago, Tim Berners-Lee wrote this page of answers to (genuinely) frequently asked questions he got from school kids working on reports. I absolutely love the clear straightforward language he uses to describe concepts like hypertext, packet switching, and HTTP.
Monday, November 20th, 2017
An associative trail
Every now and then, I like to revisit Vannevar Bush’s classic article from the July 1945 edition of the Atlantic Monthly called As We May Think in which he describes a theoretical machine called the memex.
A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.
It consists of a desk, and while it can presumably be operated from a distance, it is primarily the piece of furniture at which he works. On the top are slanting translucent screens, on which material can be projected for convenient reading. There is a keyboard, and sets of buttons and levers. Otherwise it looks like an ordinary desk.
1945! Apart from its analogue rather than digital nature, it’s a remarkably prescient vision. In particular, there’s the idea of “associative trails”:
Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. The lawyer has at his touch the associated opinions and decisions of his whole experience, and of the experience of friends and authorities.
Many decades later, Anne Washington ponders what a legal memex might look like:
My legal Memex builds a network of the people and laws available in the public records of politicians and organizations. The infrastructure for this vision relies on open data, free access to law, and instantaneously availability.
As John Sheridan from the UK’s National Archives points out, hypertext is the perfect medium for laws:
Despite the drafter’s best efforts to create a narrative structure that tells a story through the flow of provisions, legislation is intrinsically non-linear content. It positively lends itself to a hypertext based approach. The need for legislation to escape the confines of the printed form predates the all major innovators and innovations in hypertext, from Vannevar Bush’s vision in ” As We May Think“, to Ted Nelson’s coining of the term “hypertext”, through to and Berners-Lee’s breakthrough world wide web. I like to think that Nelson’s concept of transclusion was foreshadowed several decades earlier by the textual amendment (where one Act explicitly alters – inserts, omits or amends – the text of another Act, an approach introduced to UK legislation at the beginning of the 20th century).
That’s from a piece called Deeply Intertwingled Laws. The verb “to intertwingle” was another one of Ted Nelson’s neologisms.
There’s an associative trail from Vannevar Bush to Ted Nelson that takes some other interesting turns…
Picture a new American naval recruit in 1945, getting ready to ship out to the pacific to fight against the Japanese. Just as the ship as leaving the harbour, word comes through that the war is over. And so instead of fighting across the islands of the pacific, this young man finds himself in a hut on the Philippines, reading whatever is to hand. There’s a copy of The Atlantic Monthly, the one with an article called As We May Think. The sailor was Douglas Engelbart, and a few years later when he was deciding how he wanted to spend the rest of his life, that article led him to pursue the goal of augmenting human intellect. He gave the mother of all demos, featuring NLS, a working hypermedia system.
Later, thanks to Bill Atkinson, we’d get another system called Hypercard. It was advertised with the motto Freedom to Associate, in an advertising campaign that directly referenced Vannevar Bush.
And now I’m using the World Wide Web, a hypermedia system that takes in the whole planet, to create an associative trail. In this post, I’m linking (without asking anyone for permission) to six different sources, and in doing so, I’m creating a unique associative trail. And because this post has a URL (that won’t change), you are free to take it and make it part of your own associative trail on your digital memex.
Sunday, November 19th, 2017
A history of hypertext, from the memex to HyperCard.
Wednesday, July 26th, 2017
Posting to my site
I was idly thinking about the different ways I can post to adactio.com. I decided to count the ways.
This is the classic CMS approach. In my case the CMS is a crufty hand-rolled affair using PHP and MySQL that I wrote years ago. I log in to an admin interface and fill in a form, putting the text of my posts into a
textarea. In truth, I usually write in a desktop text editor first, and then paste that into the
textarea. That’s what I’m doing now—copying and pasting Markdown from the Typed app.
Directly from my site
If I’m logged in, I get a stripped down posting interface in the notes section of my site.
This is how I post links. When I’m at a URL I want to bookmark, I hit the “Bookmark it” bookmarklet in my browser’s bookmarks bar. That pops open a version of the admin interface tailored specifically for links. I really, really like bookmarklets. The one big downside is that they don’t work on mobile.
This is something I knocked together at Indie Web Camp Brighton 2015 using the Twilio API. It’s handy for posting notes if I’m travelling somewhere and data is at a premium. But I don’t use it that often.
Thanks to Aaron’s OwnYourGram service—and the fact that my site has a micropub endpoint—I can post images from Instagram to my site. This used to happen instantaneously but Instagram changed their API rules for the worse. Between that and their shitty “algorithmic” timeline, I find myself using the service less and less. At this point I’m only on their for the doggos.
OwnYourGram and OwnYourSwarm are very similar and could probably be abstracted into a generic service for posting from third-party apps to micropub endpoints. I’d quite like to post my check-ins on Untappd to my site.
Other people’s admin interfaces
rel="me" and IndieAuth, I can log into other people’s posting interfaces using my own website as the log-in, and post to my micropub endpoint, like this. Quill is a good example of this. I don’t use it that much, but I really should—the editor interface is quite Medium-like in its design.
Anyway, those are the different ways I can update my website that I can think of right now.
In terms of output, I’ve got a few different ways of syndicating what I post here:
- RSS feeds for my journal, links, articles, and notes.
- JSON feeds for my journal, links, articles, and notes.
- Twitter accounts for my journal, links, articles, and notes (that one is my main Twitter account).
- I syndicate most of my my photos to my Flickr account.
- I syndicate most of my journal posts and articles to my Medium account.
- I used to syndicate my links to my Delicious account but at some point that became fairly pointless.
- Whenever I post a link, The Internet Archive gets pinged and makes a copy for the wayback machine. Here’s an example of a recent link.
- I syndicate just about everything to my Facebook account using If This, Then That recipes (RSS to Facebook posts). Facebook is a roach motel. I never post any original content there—everything starts here on my site.
Just so you know, if you comment on one of my posts on Facebook, I probably won’t see it. But if you reply to a copy of one of posts on Twitter or Instagram, it will show up over here on adactio.com thanks to the magic of Brid.gy and webmention.
Friday, June 2nd, 2017
…a full one-third of my window is covered by a pop-over trying to get me to sign in or sign up for Facebook. I will go out of my way to avoid linking to websites that are hostile to users with pop-overs. (For example, I’ve largely stopped linking to anything from Wired, because they have such an aggressive anti-ad-block detection scheme. Fuck them.)
Facebook forbids search engines from indexing Facebook posts. Content that isn’t indexable by search engines is not part of the open web.
And then there’s this:
And in the same way they block indexing by search engines, Facebook forbids The Internet Archive from saving copies of posts.
Wednesday, May 24th, 2017
To navigate the web is to beat a path through a labyrinth of links left by others, and to thereby create associative links yourself, unspooling them like a guiding thread onto a floor already carpeted with such connections. Each thread of connection is unique, individualized: everyone draws their own map of the network as they navigate it.
Monday, March 20th, 2017
There’s something very endearing about this docudrama retelling of the story of the web.
Monday, October 24th, 2016
Research on evaluating technology
I’ve spent the past few months preparing a new talk for An Event Apart San Francisco (and hopefully some more AEAs after that). As always happens, I spent the whole time vacillating between thinking “this is good!” and thinking “this is awful!” I’m still bouncing between those poles. I won’t really know whether the talk is up to snuff until I actually give it to a live audience.
Over the past few years, my presentations have built upon one another. Two years ago, my talk was called Enhance! and it set the groundwork for using a layered approach to web design and development. My 2016 talk, Resilience, follows on with a process and examples for that approach (I also set myself the challenge of delivering a talk about progressive enhancement without ever using the phrase “progressive enhancement”).
My new talk goes a bit meta, but in my mind, it’s very much building on the previous talks. The talk is all about evaluating technology. I haven’t settled on a final title, but I was thinking about something obtuse, like …Evaluating Technology.
Here’s my hastily scribbled description:
As ever, I’ll begin and end with a long-zoom pretentious arc of history, but I’ll dive into practical stuff in the middle. That’s become a bit of a cliché for my presentations, but the formula works as a sort of microcosm of a good conference—a mixture of the inspirational and the practical, trying to keep a good balance of both.
For this new talk, the practical focus will be on some web technologies that are riding high on the hype cycle right now: service workers, web components, progressive web apps. I’ll use them as a lens for applying broader questions about how we make decisions about the technologies we embrace, and the technologies we reject.
Technology. Now there’s a big subject. It’s literally the entirety of human history. I had to be careful not to go down too many rabbit holes. I’m still not sure if I’ve succeeded, but I’ve already had to ruthlessly cull some darlings.
One of the nice things that the An Event Apart crew started doing was to provide link lists for each talk to attendees. That gives me an opportunity to touch briefly on a topic in the talk itself, but allow any interested attendees to dive deeper at their leisure.
For this talk on evaluating technology, I’ve put together this list of hyperlinks for further reading, watching, listening, and researching…
- Design Principles
- The Extensible Web Manifesto
- Developer Fallacies
Progressive Web Apps
- Home Screen
- Regressive Web Apps
- The Progressive Web App Dev Summit
- The Imitation Game
- Progressive Web Apps: Escaping Tabs Without Losing Our Soul by Alex Russell
- The Building Blocks of Progressive Web Apps by Ada Rose Edwards
- Progressive Web Apps: The Long Game by Remy Sharp
- What, Exactly, Makes Something A Progressive Web App? by Alex Russell
- Reports and Working Notes on DNA by Rosalind Franklin
- I, Pencil by Leonard E. Read
- HTML Design Principles edited by Anne van Kesteren and Maciej Stachowiak
- Sketch of The Analytical Engine Invented by Charles Babbage by L. F. Menabrea with notes upon the memoir by the translator Ada Augusta, Countess of Lovelace
- The Coming Technological Singularity: How to Survive in the Post-Human Era by Vernor Vinge
- The Real World of Technology by Ursula M. Franklin @ the CBC Massey Lectures, 1989
- The Triumph Of Technology by Lord Sir Alec Broers @ the BBC Reith Lectures, 2005
- How Technology Evolves by Kevin Kelly @ TED, 2005
- When Ideas Have Sex by Matt Ridley @ TED, 2010
- How I Built A Toaster—From Scratch by Thomas Thwaites @ TED, 2010
- Admiral Shovel and the Toilet Roll by James Burke @ dConstruct, 2012
- Unexpected Item In The Bagging Area by Dan Williams @ dConstruct, 2013
- Hypertext As An Agent Of Change by Mandy Brown @ dConstruct 2014
- The Humane Representation Of Thought by Bret Victor @ the UIST and SPLASH conferences, 2014
- Our Comrade The Electron by Maciej Cegłowski @ Webstock, 2014
- Step Off This Hurtling Machine by Alex Feyerke @ JSConf.au, 2014
- The Moral Economy of Tech by Maciej Cegłowski @ the Society For The Advancement Of Socio-Economics, 2016
- The Real World Of Technology by Ursula M. Franklin
- The Rational Optimist by Matt Ridley
- What Technology Wants by Kevin Kelly
- The Inevitable by Kevin Kelly
- Where Good Ideas Come From: The Natural History of Innovation by Steven Johnson
- How We Got To Now: Six Innovations That Made The Modern World by Steven Johnson
- 101 Unuseless Japanese Inventions: The Art of Chindogu by Kenji Kawakami
- The Toaster Project (Or A Heroic Attempt to Build a Simple Electric Appliance from Scratch) by Thomas Thwaites
- Connections by James Burke
Thursday, July 21st, 2016
Fight the scourge of performance-killing redirect-laden t.co links in Twitter’s web interface with this handy Chrome extension.
Tuesday, May 31st, 2016
Turbolinks intercepts all clicks on
a hreflinks to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using
XMLHttpRequest, and then renders the HTML response.
During rendering, Turbolinks replaces the current
bodyelement outright and merges the contents of the
documentobjects, and the HTML
htmlelement, persist from one rendering to the next.
Here’s the mustard it’s cutting:
It depends on the HTML5 History API and Window.requestAnimationFrame. In unsupported browsers, Turbolinks gracefully degrades to standard navigation.
This approach matches my own mental model for building on the web—I might try playing around with this on some of my projects.