How it's made: A Christmas Gif

Matthew Mirzai
By Matthew MirzaiDeveloper
5 minutes to read

The room cheered. Ednog was dead. No one would miss it. But what would we replace it with?

When we first started brainstorming our annual Christmas campaign, there were a lot of good ideas. The one that stood out though was a Christmas themed gif generating website. It sounded fun, it was drastically different from anything we’d done before and that meant we’d be able to get stuck in with loads of new technology.

Making the gifs

Once we’d decided on which of our favourite Christmas scenes we wanted to use, we set about trying to make it work. We needed to find a way to crop images, manipulate them around a canvas and then compile the frames into a gif.

We found a great open source cropper plugin which made it easy for us to crop our lovely Paid Search Exec Dylan’s face (sorry Dylan!). Magick.NET, a.NET version of ImageMagick, then helped us to achieve the other steps.

After much trial, error and a little bit of computer abuse, we successfully managed to crop the image and add a frame on top. We then flattened it and assigned coordinates to each frame including width, height and rotation. These were then fine-tuned and turned into the polished gifs you can download from the site.

Presenting the gifs

Once we created the gifs, we were then presented with the problem of how to deliver these back to the user.

We’d heard a lot about Microsoft’s SignalR but never had an opportunity to use it. SignalR allows real time communication between the user and our server which means that instead of waiting for the gifs to be loaded, users get to quickly see the first gif sent back whilst extra gifs loaded seamlessly.

SignalR didn’t compromise ease for quality. It allowed us to quickly set up the project whilst simultaneously delivering fantastic results. We like it so much that we’re actively looking to use it in future projects.

Storing the gifs

By this point we were surprised with how well our gif maker was turning out, if you’ve seen EDnog you’ll understand why. We conducted some internal testing and quickly realised that once our festive juggernaut went live, the traffic could cause our servers to go haywire.

To make sure we didn’t have a total meltdown, we chose Microsoft’s cloud platform Azure to host our gifs. Azure comes with built in auto-scaling so the heavier the traffic, the more computing power becomes available to us meaning we would avoid a catastrophe.

In terms of bug fixing, Visual Studio made it a breeze. As soon as an issue cropped up, we could quickly publish and deploy fixes at the press of a button.

As our gifs are shareable, we needed to store them on the server file system. Internal testing quickly filled this up with many hilarious and questionable gifs, so we pushed our file storage to Azure Blob storage. Blob storage is essentially just fancy file store but it means that as our file space increases, we don’t have to worry about how much space we have left. This means more gifs of Dylan as Cliff Richard!

Releasing the gifs

Azure made the release of our Christmas gift very easy. With the click of a few buttons, the live URL was in place and ready to deploy our master branch.

We monitored the performance, ran a bit more internal testing and were then happy to unleash it upon the public.

A decent amount of blood, sweat and tears went into creating our gif generator and we are all pretty proud of it. We’ve used some new technology that we’re really excited about using in the future and have a new found sympathy for Santa’s workshop elves.

Merry Christmas, here’s our Christmas Gif to you http://achristmasgif.enjoy-digital.co.uk/

 

We love all that networking and connection making, but let’s face it, you can’t beat a good old-fashioned chat over a cuppa. Just give us a call, we’ll put the kettle on.

Get in touchArtboard 1
comments powered by Disqus

Articles by Matthew Mirzai

Matt has 10 years experience in the development field and is a back end developer here at Enjoy Digital, specialising in Umbraco (and Mario Kart!)