BC Cheese Advent Calendar

“May your holidays be cheesy and bright.”

This was a really fun one. Unfortunately it doesn’t seem to be online anywhere any more.

It showed the front of a tall building with many windows, each of which would slide open with an SVG animation on mouse over or when activated. Each window would reveal a different cheese depicted in a fun-shaped picture frame on a brightly-coloured wall.

When clicked, a modal would open with details about that particular cheese including what to pair it with, with carousel functionality to easily get to the next or previous window.

Depending on browser viewport size, the building would have a different number of windows across so that no awkward zooming was needed.

On the roof, xmas lights blinking different colours. Over the top of everything, snowflakes falling.

My brief didn’t involve any animations for the windows; each window was originally provided to me as a pair of static raster images – closed and open – but I thought it’d be much better (and a lighter download) to make vector animations for the windows opening. This went down well, the agency and client agreeing that it was a big improvement.

It made sense for the build output to be static files. Since the site was multilingual (three different English regions plus one French), I made a set of internationalized templates in Pug, and a different Yaml localization file for each region.

The scope was so small that I wanted absolute minimal dependencies. The only dependencies are Node, Pug, a Yaml parser, and Imagemagick, and these are used only at build time.

The build command was a Node script which would build the template and fill it with each localization, plus a shell script which produces all the necessary image transformations for the responsive images, along with WebP versions.

I just wish I’d been paid in cheese for this one.