GBBO 2021

https://gbbo-2021.netlify.app/

Each year at my previous job, I ran a Great British Bake Off sweepstake for a bit of fun. As part of this, I would create a site listing each baker, some more information about them and the progress of the competition. This year I'm in a new position, and whilst not yet sure of myself enough to do a sweepstake, I've still put together another site.

To be honest, it's felt this year like the pressure was off a little bit, and that I could try a few new things I'd been interested in recently in the knowledge that nobody else is going to see this!

The stack

Astro

I decided to give Astro a go on this project. Astro is a modern static site builder that encourages building with HTML and shipping less JavaScript, two things I love!

There’s a simple secret to building a faster website — just ship less.

There are a few points that drew me to trying Astro.

  • Bring your own framework - I have been learning more about React for work, so having the choice of using this was great.
  • Static HTML, no JS - Rendeers emtire page to HTML, no JavaScript shipped.
  • On-demand components - Only hydrate components when/if the user wants to see them. If they never use it, never load it.

In all honesty, I ended up mainly using the structure Astro enables as glorified includes in the end. However, I loved using it and how easy it made getting things set up and leveraging a modern workflow and it's definitely something I'll be using again.

I'm drafting a separate post on my first use of it, so I'll go into more detail then.

GSAP

I've been learning some GSAP over the last 6 months or so, and recently attended an excellent SVG workshop run by Cassie Evans and wanted to add some animations with it to this site.

Each of my bakers animates in when they enter the viewport. To handle this I used the handy scrollTrigger plugin. One of the many things I love about Greensock is how much it handles behind the scenes for you, and deals with many of the cross-browser SVG inconsistencies for you. Such an invaluable tool in the SVG/animation toolbelt.

I also tried to recreate an SVG scroll-based line draw-in, another excellent and inspiring pen from Cassie and The Keyframers. This is something I need to work on though, as in Firefox and Safari this causes the page to be janky as heck when scrolling. Some fun performance debugging to dig into on it anyway.

Netlify

Couldn't not mention Netlify. I host all of my little side projects/experiments on there, as well as this site. it makes it ridiculously easy to spin up and a site from your git repo and then configure a multitude of settings.

All-in-all this year was definitely a rush job, and I need to tidy it up a bit but was glad to get to use some new tooling and do some designing in the browser. It's great to let that creativity flow sometimes with no set design to be constrained by and helps keep design trend/UX skills sharper than blunt.