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 framework (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, but all the 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. …but, the idea is to get people in a podcast app and subscribed, so while a cool decentralised player would make me happy, it’s not the goal here.

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

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

And 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