5 years of DevFest Countdown — Part 1

jefBinomed
Dec 10, 2018 · 7 min read

I organize the DevFest Nantes as a volunteer of GDG Nantes for 7 years already.

If you don’t know what “DevFest” is, it’s a worldwide event lead by the GDG community. You can have a look here DevFest With Google.

Each year we work very hard to provide the best experience for our attendees. We try to make DevFest Nantes the most accessible (only 90€ for 2 days with food, goodies, party, conference, …). And one of the things I’m responsible for is the Countdown! Indeed, if you already go to Google I/O, you know that when you are waiting for the launch of the keynote, Google prepares a nice Countdown animation to let you play with the other attendees! We love so much this experience that we tried to create ours to keep that spirit. In this article, I will try to share those countdown and try to explain to you what I’ve learned with each of them.

Before 2014

Image for post
Image for post

Before I started to write my own Countdown, I first reused a public countdown created for Google IO 2011: HTML5 Countdown Finale. It works pretty well but it was not linked to our graphical Theme. That’s why I started in 2014 to create my own countdown

2014

Image for post
Image for post

The idea

The basic idea of this Countdown was to animate the DevFest Nantes t-shirt.

Image for post
Image for post

This project allowed me to think about the mandatory steps of Countdown :

  1. Play music until the countdown is over
  2. Launching a video when the countdown is over

Behind this 2 steps is hidden a basic complexity. How to check the current time without blocking the UI? How to play both music and video?

Time management

Playing a song

Graphical challenge

You will have this CSS:

This gives you this result

Image for post
Image for post

And the last thing to do was to animate the text at the bottom of the tower. I used the marquee tag because it’s targeted to animate text in a box! Here, the problem comes to the fact that I have 2 faces in my tower and I want to give the impression that the text “slides” around the tower. To create this effect, I had to use 2 marquee and play a timeout that corresponded to the duration of the move of the text.

Here is the result :

Image for post
Image for post

As you can see, there are lots of things to enhance. But it does the job, a unique countdown linked to DevFest Nantes identity!

Code & demo

If you want to see it in action, have a look here CountDown 2014

2015

Image for post
Image for post

The idea

Image for post
Image for post

The idea was to simulate a real “Space Invaders”. As the t-shirt shows a space invader destroying Google technologies logos. I tried to animate the spaceship in order to destroy the last logo at the last second.

New Challenges

Or have a look at this conference from Jake Archibald about event loop:

Image for post
Image for post

Resources management

Image for post
Image for post

When you deal with ‘sprites’ images, you have to position your cursor when you draw. With this technique, you will minimize the number of assets loaded in memory and gain time on your first load.

Image for post
Image for post

The main idea is to position your cursor and draw it your context:

In my case, I created a map to have a reference for each logo in the sprite. This map allowed me animate each logo and keep a reference of its original position in the sprite :

Using a key will let me have a reference of each sprite.

Animate the matrix

Image for post
Image for post

So to play with the grid, I kept a reference of all the logos in a matrix.

A good practice is to separate the data processing and the data rendering!

In my case, I just want to render a snapshot of the grid. So when I start the initialization the countdown, I start several setInterval. Each one has its purpose and will separate the different logics.

As you can see, runAnimation is the only method that renders something on the screen and that’s very important because, I don’t have to do complex calculation, or complex code! In this method, I’m just focused on the rendering.

The destruction of a logo

  • The interval between each destruction : (Now — Final time) / Number of logos
  • The maximum duration in which a spaceship will be under the current logo
  • A random order of destruction that will construct a dynamic stack of destructions orders (one row at a time).

All those calculations let me have a dynamic countdown that will destroy everything at the right time!

Code & Demo

If you want to see it in action, have a look here CountDown 2015

CodeShake

Learnings and insights from SFEIR community.

jefBinomed

Written by

Jean-Francois Garreau, I’m working for Sfeir and I’m a frontend developper, GDE Web, Organizer of GDG Nantes & WTM Nantes

CodeShake

CodeShake

Learnings and insights from SFEIR community.

jefBinomed

Written by

Jean-Francois Garreau, I’m working for Sfeir and I’m a frontend developper, GDE Web, Organizer of GDG Nantes & WTM Nantes

CodeShake

CodeShake

Learnings and insights from SFEIR community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store