Tags: download

21

sparkline

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.

I guess this is JAMstack. Though, given that the J stands for JavaScript, the A stands for APIs, and I’m not using either, technically it’s Mstack.

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 href attribute.

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 clearleft-audio.s3.amazonaws.com—the download attribute will be ignored and the mp3 files will play in the browser instead of downloading.

Trys pointed me to the solution. It turns out that Netlify can do some server-side processing. It can do redirects.

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

Dams Public Website

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

Standard Ebooks: Free and liberated ebooks, carefully produced for the true book lover.

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

Building a Good Download… Button? | CSS-Tricks

I love these kinds of deep dives into one seemingly simple pattern; in this case it’s a download link with the humble A element.

Tuesday, August 13th, 2013

Anton Peck Illustration - Gather eBook

You can download the PDF of Anton’s graphic novel Gather for free.

Monday, June 10th, 2013

Request Quest

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

Sirens | Aaron Mentele

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

CASH Music: Calexico

Download Calexico live in Nuremburg, licensed under a Creative Commons attribution non-commercial share-alike license.

Thursday, January 21st, 2010

Dewey Music

A treasure trove of music from Archive.org.

Tuesday, June 30th, 2009

droidMAKER: DROIDMAKER book now downloadable, FREE!

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

Bloomsbury Academic

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

Amazon.com MP3 Downloads: Free Indie Sampler Bonanza

Indie compilations for you to download for free.

Sunday, December 7th, 2008

Music Till I Die

Fellow Powncers: authenticate here before December 15th to partake of the musical love that has been shared.

Wednesday, May 7th, 2008

The day the music died [dive into mark]

Excellent explanation of DRM by Mark Pilgrim, prompted by MSN Music's gunshot to the head.

Tuesday, April 1st, 2008

Radiohead/ Remix/ Nude

Ever wanted to remix a Radiohead song? Me neither. But for those who do, they now can.

Monday, January 14th, 2008

MacHeist » Bundle

The asking price of $49 for all these apps together is a bargain. CSSEdit alone is easily worth that much.

Monday, October 1st, 2007

The Bygone Bureau » "Rainbows" Reveals a Brighter Tomorrow

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

Fiction Liberation Front--The Goods

Science-fiction author Lews Shiner is releasing many of his short stories online for free (HTML or PDF).

Thursday, June 21st, 2007

Peter Saville Graphic Design - fonts

Peter Saville is releasing some of his fonts for free. I'm grabbing the beautiful serif typeface used on the front of Joy Division's "Closer"; it's gorgeous.

Thursday, March 2nd, 2006

Getting Real: The smarter, faster, easier way to build a successful web application

The PDF book of the T-shirt of the philosophy from 37 Signals. There are 4 chapters online for you to sample.