A great description of a solid architectural approach to building on the web (and not just for accessibility either).
February 1st, 2016
January 30th, 2016
January 29th, 2016
The slides from Calum’s presentation at Front-end London.
Thing wot I just learned: “Header append Vary User-Agent” in your Apache/.htaccess config may have unexpected Service Worker side effects.
My Service Worker is working a treat in the latest version of Firefox …but is now behaving buggily in the latest version of Chrome. :-/
January 28th, 2016
This is intriguing—a Pinboard-like service that will create local copies of pages you link to from your site. There are plug-ins for WordPress and Drupal, and modules for Apache and Nginx.
Amber is an open source tool for websites to provide their visitors persistent routes to information. It automatically preserves a snapshot of every page linked to on a website, giving visitors a fallback option if links become inaccessible.
A great piece of near-future sci-fi from James.
I enforce from orbit, making sure all the mainframes that used to track and store every detail of our lives are turned off, and stay off. And as the sun comes up over Gloucestershire this morning, there they are, resplendent in the mist-piercing light of RITTER’s multispectral sensors: terabytes of storage laid out around the scalped doughnut of the former GCHQ building. Enough quantum storage to hold decades of the world’s pillow talk. Drums of redundant ethernet cable stacked stories-high. Everything dismantled, disconnected, unshielded. Everything damp with morning dew.
There’s a fox making ungodly noises in the street outside.
That song is total bullshit.
January 27th, 2016
Waiting for the gift of sound and vision.
Whenever I hit inbox zero, I always think there should be a Quake-style audio announcement.
Huffduffing for podcasters
The logic behind Huffduffer’s bookmarklet goes something like this…
- Find any
aelements that have
hrefvalues ending in “.mp3” or “.m4a”.
- If there’s just one audio on the page, use that.
- If there are multiple audio, offer a list to the user and have them choose.
If that doesn’t work…
- Look for a
linkelement with a
relvalue of “enclosure”.
- Look for a
propertyvalue of “og:audio”.
- Look for
audioelements and grab either the
srcattribute of the element itself, or the
srcattribute of any
sourceelements within the
If that doesn’t work…
- Try to find a link to an RSS feed (a link that looks like “rss” or “feed” or “atom”).
- If there is a feed, parse that for
enclosureelements and present that list to the user.
If you have a podcast and you want your episodes to be sharable and huffduffable, you have a few options:
Have a link to the audio file for the episode somewhere on the page, something like:
That’s the simplest option. If you’re hosting with Soundcloud, this is pretty much impossible to accomplish: they deliberately obfuscate and time-limit the audio file, even if you want it to be downloadable (that “download” link literally only allows a user to download that file in that moment).
If you don’t want a visible link on the page, you could use metadata in the
head of your document. Either:
<link rel="enclosure" href="/path/to/file.mp3">
<meta property="og:audio" content="/path/to/file.mp3">
And if you want to encourage people to huffduff an episode of your podcast, you can also include a “huffduff it” link, like this:
<a href="https://huffduffer.com/add?page=referrer">huffduff it</a>
You can also use
?page=referer—that misspelling has become canonised thanks to HTTP.
There you go, my podcasting friends. However you decide to do it, I hope you’ll make your episodes sharable.
Adrian documents how he’s using Service Workers on Soundslice. I could imagine doing something similar for The Session.
January 26th, 2016
A very handy tool for figuring out breakpoints for responsive images.
Upload an image in its largest size, play around with the settings, and then generate the breakpoints, the markup, and the resized images for each breakpoint.
A nifty tool from Brad to help calculate and allocate performance budgets. Click around and edit the numbers.
Howard Jones The Duck.
Remember when I mentioned that you can get free certificates from Amazon now? Well, Oliver has written an in-depth step-by-step description of how he got his static site all set up with HTTPS.
More of this please! Share your experiences with moving to TLS—the more, the better.