Recently the FED team have started a new monthly coding challenge, which we’ve called the Code-off. It’s been a great way to experiment, allows us to get creative and introduces a dollop of healthy competition too.

In our busy agency lives it can sometimes be difficult to find time to experiment with new technologies and tools, or to look into a new framework that might have caught your eye. The idea behind the Code-off is to encourage everyone in the FED team to look at new and interesting stuff, and also to give the agency a bit more visibility of some of the cool things that are possible on the web nowadays.

So once a month a challenge will be set — the vaguer the better — and we’ll see what everyone can come up with in a few hours. It’s meant to encourage a bit of experimentation, so entries are expected to be a bit rough round the edges. We all post our entries as Codepen links into a Slack channel and then show the love for our favourite with a heart.

The prize for the winner is simply bragging rights. What, that’s not a good enough prize? Fine! We’ll buy a trophy then! Plus, the winner also gets to choose the topic of the next challenge. 
So far we’ve had two rounds of Code-off and the variety of the entries has been really good. Let’s take a little peek at a few of the highlights.

Hint: Click “Rerun” on any of the windows if they aren’t doing anything…

Code-off #1

Here’s a Codepen collection of all entries for #1

The challenge for #1 was quite simply, “What can you do with one <span>?” We weren’t allowed any more HTML than one empty span element, but could use as much CSS and JavaScript as we wanted.

Brandon hooked up his laptop’s webcam to stream directly into the span, and also pixelated the output to create a nice effect. (If you don’t have a webcam you won’t get the full effect of this one, so here’s a pic of me with a brew).

Craig paid tribute to the endless office nerf wars that take place with his entry.

But in a close fought inaugural Code-off, James was the winner with his Bowie inspired CSS animation.

Code-off #2

Here’s a Codepen collection of all entries for #2

For #2 James provided us with a set of SVGs, including a load of random icons, and the letters that make up the Redweb logo.

Liam’s entry draws out the Redweb logo as you scroll down.

Kiri’s entry has a nice gradient fading through the letters of our logo.

But the newest member of the team, Matt, was the runaway winner with this…

Code-off #3

So as Matt was victorious he’s set our next challenge. Tune in next time to see what we come up with!