A great selection of links about design systems, collected and categorised.
Saturday, November 10th, 2018
Monday, October 22nd, 2018
Monday, August 6th, 2018
This seventeen year old profile of Tim Berners-Lee is fascinating to read from today’s perspective.
Wednesday, July 11th, 2018
Links, tags, and feeds
A little while back, I switched from using Chrome as my day-to-day browser to using Firefox. I could feel myself getting a bit too comfortable with one particular browser, and that’s not good. I reckon it’s good to shake things up a little every now and then. Besides, there really isn’t that much difference once you’ve transferred over bookmarks and cookies.
Unfortunately I’m being bitten by this little bug in Firefox. It causes some of my bookmarklets to fail on certain sites with strict Content Security Policies (and CSPs shouldn’t affect bookmarklets). I might have to switch back to Chrome because of this.
I use bookmarklets throughout the day. There’s the Huffduffer bookmarklet, of course, for whenever I come across a podcast episode or other piece of audio that I want to listen to later. But there’s also my own home-rolled bookmarklet for posting links to my site. It doesn’t do anything clever—it grabs the title and URL of the currently open page and pre-populates a form in a new window, leaving me to add a short description and some tags.
If you’re reading this, then you’re familiar with the “journal” section of adactio.com, but the “links” section is where I post the most. Here, for example, are all the links I posted yesterday. It varies from day to day, but there’s generally a handful.
Should you wish to keep track of everything I’m linking to, there’s a twitterbot you can follow called @adactioLinks. It uses a simple IFTTT recipe to poll my RSS feed of links and send out a tweet whenever there’s a new entry.
Or you can drink straight from the source and subscribe to the RSS feed itself, if you’re still rocking it old-school. But if RSS is your bag, then you might appreciate a way to filter those links…
All my links are tagged. Heavily. This is because all my links are “notes to future self”, and all my future self has to do is ask “what would past me have tagged that link with?” when I’m trying to find something I previously linked to. I end up using my site’s URLs as an interface:
At the front-end gatherings at Clearleft, I usually wrap up with a quick tour of whatever I’ve added that week to:
Well, each one of those tags also has a corresponding RSS feed:
…and so on.
That means you can subscribe to just the links tagged with something you’re interested in. Here’s the full list of tags if you’re interested in seeing the inside of my head.
This also works for my journal entries. If you’re only interested in my blog posts about frontend development, you might want to subscribe to:
Here are all the tags from my journal.
You can even mix them up. For everything I’ve tagged with “typography”—whether it’s links, journal entries, or articles—the URL is:
The corresponding RSS feed is:
You get the idea. Basically, if something on my site is a list of items, chances are there’s a corresponding RSS feeds. Sometimes there might even be a JSON feed. Hack some URLs to see.
Meanwhile, I’ll be linking, linking, linking…
Friday, May 11th, 2018
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.
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.