storage.estimate() in service workers to figure out how much gets pre-cached.
Friday, December 18th, 2020
Wednesday, December 2nd, 2020
There’s no browser support yet but that doesn’t mean we can’t start adding
prefers-reduced-data to our media queries today. I like the idea of switching between web fonts and system fonts.
Monday, August 17th, 2020
Netlify redirects and downloads
Making the Clearleft podcast is a lot of fun. Making the website for the Clearleft podcast was also fun.
Design wise, it’s a riff on the main Clearleft site in terms of typography and general layout. On the development side, it was an opportunity to try out an exciting tech stack. The workflow goes something like this:
- Open a text editor and type out HTML and CSS.
Comparing this to other workflows I’ve used in the past, this is definitely the most productive way of working. Some stats:
- Time spent setting up build tools: 00:00
- Time spent wrangling the pipeline to do exactly what you want: 00:00
- Time spent trying to get the damn build tools to work again when you return to the project after leaving it alone for more than a few months: 00:00:00
I have some files. Some images, three font files, a few pages of HTML, one RSS feed, one style sheet, and one minimal service worker script. I don’t need a web server to do anything more than serve up those files. No need for any dynamic server-side processing.
Netlify suits my hosting needs nicely. It also provides the added benefit that, should I need to update my CSS, I don’t need to add a query string or anything to the
link elements in the HTML that point to the style sheet: Netlify does cache invalidation for you!
The mp3 files of the actual podcast episodes are stored on S3. I link to those mp3 files from
enclosure elements in the RSS feed, which is what makes it a podcast. I also point to the mp3 files from
audio elements on the individual episode pages—just above the transcript of each episode. Here’s the page for the most recent episode.
I also want people to be able to download the mp3 file directly if they want (or if they want to huffduff an episode). So I provide a link to the mp3 file with a good ol’-fashioned
a element with an
I throw in one more attribute on that link. The
download attribute tells the browser that the URL in the
href attribute should be downloaded instead of visited. If you give a value for the
download attribute, it will over-ride the file name:
<a href="/files/ugly-file-name.xyz" download="nice-file-name.xyz">download</a>
Or you can use it as a Boolean attribute without any value if you’re happy with the file name:
<a href="/files/nice-file-name.xyz" download>download</a>
There’s one catch though. The
download attribute only works for files on the same origin. That’s an issue for me. My site is
podcast.clearleft.com but my audio files are hosted on
download attribute will be ignored and the mp3 files will play in the browser instead of downloading.
I added a file called
_redirects to the root of my project. It contains one line:
/download/* https://clearleft-audio.s3.amazonaws.com/podcast/:splat 200
That says that any URLs beginning with
/download/ should redirect to
clearleft-audio.s3.amazonaws.com/podcast/. Everything after the closing slash is captured with that wild card asterisk. That’s then passed along to the redirect URL as
:splat. That’s a new one on me. I hadn’t come across that terminology, but as someone who can never remember the syntax of regular expressions, it works for me.
Oh, and the
200at the end is the status code: okay.
Now I can use this
/download/ path in my link:
<a href="/download/season01episode06.mp3" download>Download mp3</a>
Because this URL on the same origin, the
download attribute works just fine.
Thursday, April 30th, 2020
I had the great pleasure of visiting the Museum Plantin-Moretus in Antwerp last October. Their vast collection of woodblocks are available to dowload in high resolution (and they’re in the public domain).
14,000 examples of true craftmanship, drawings masterly cut in wood. We are supplying this impressive collection of woodcuts in high resolution. Feel free to browse as long as you like, get inspired and use your creativity.
Saturday, August 3rd, 2019
Books in the public domain, lovingly designed and typeset, available in multiple formats for free. Great works of fiction from Austen, Conrad, Stevenson, Wells, Hardy, Doyle, and Dickens, along with classics of non-fiction like Darwin’s The Origin of Species and Shackleton’s South!
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, August 13th, 2013
You can download the PDF of Anton’s graphic novel Gather for free.
Monday, June 10th, 2013
A terrific quiz about browser performance from Jake. I had the pleasure of watching him present this in a bar in Amsterdam—he was like a circus carny hoodwinking the assembled geeks.
I guarantee you won’t get all of this right, and that’s a good thing: you’ll learn something. If you do get them all right, either you are Jake or you are very, very sad.
Friday, January 13th, 2012
Some very interesting results from testing background image downloads contained within media queries or overridden with media queries: it turns out that, in iOS at least, the browser is getting smarter and smarter.
Thursday, July 15th, 2010
Download Calexico live in Nuremburg, licensed under a Creative Commons attribution non-commercial share-alike license.
Thursday, January 21st, 2010
A treasure trove of music from Archive.org.
Tuesday, June 30th, 2009
A free PDF of the inside story of George Lucas, his intensely private company, and their work to revolutionize filmmaking. Discover the birth of Pixar, digital video editing, videogame avatars, THX sound, and a host of other icons of the media age.
Friday, May 1st, 2009
Lawrence Lessig's newest book, Remix: Making art and commerce thrive in the hybrid economy, is now available as a free PDF download.
Sunday, March 29th, 2009
Indie compilations for you to download for free.
Sunday, December 7th, 2008
Fellow Powncers: authenticate here before December 15th to partake of the musical love that has been shared.
Wednesday, May 7th, 2008
Excellent explanation of DRM by Mark Pilgrim, prompted by MSN Music's gunshot to the head.
Tuesday, April 1st, 2008
Ever wanted to remix a Radiohead song? Me neither. But for those who do, they now can.
Monday, January 14th, 2008
The asking price of $49 for all these apps together is a bargain. CSSEdit alone is easily worth that much.
Monday, October 1st, 2007
Radiohead are distributing their next album themselves. You'll be able to download it for the princely sum of... whatever you feel like paying.
Wednesday, July 4th, 2007
Science-fiction author Lews Shiner is releasing many of his short stories online for free (HTML or PDF).