Hit For Six,

Website for a podcast

A blazing fast Gatsby site for an impressive cricket podcast.

I built this for some friends, and really it’s a proof-of-concept that jamstack sites can be put together extremely quickly and cheaply.

Screenshot of the Hit For Six website.
The Hit For Six landing page.

How’s it built?

  • Gatsby is the frontend framwork (Gatsby/Image is a dream)
  • Netlify CMS makes editing wonderfully straightforward
  • Bulma CSS, while not cutting edge, saved a lot of time (and it doesn’t ship that much CSS with PurgeCSS)

Why I used Spotify player embeds

A podcast site needs a podcast player.

All the big embeddable <iframe> players are bad for performance.

The obvious choice for performance was to pull episodes from the podcast feed and roll our own HTML5 audio player using hosted MP3 files.

On closer inspection, this has minor shortcomings.

  • podcast feeds are bad at series/episode data (those S03E12 Interview with Will Part 2 title strings)
  • while it’s cool to be all indie and decentralised, the point here is to get people to subscribe in podcast apps
  • in fact, it’s a pretty whacky use case to expect users to wander about listening to a podcast in a web browser

So maybe a player embed is the way to go? Why Spotify?

  • it’s the most platform-agnostic option
  • for Spotify users, the audio plays in app, not from the web page
  • for everyone else, it still works
  • there’s a subscribe button

And what about performance? On page load, the browser loads a static mock-up of the player using the srcdoc attribute. When the user presses play, the real embed is loaded and starts to run.

Our ‘lazy loading’ Spotify embed