What I learned from a hackathon at Vodafone
I bet everyone has heard what a hackathon is, but if you didn’t:
A hackathon is an event, usually hosted by a tech company or organization, where programmers, students and sometimes even professors get together for a short period of time to collaborate on a project.
Currently, as a contractor, I am working full time at Vodafone and get the chance on a regular basis to participate with the hackathons organized there.
I believe hackathons are a great way to break up your coding routine; develop applications using new technologies or approaches; adding value to the company and yourself.
The story
A couple of weeks ago I took part in one of the internal hackathons organized at Vodafone, where two teams were competing with each other.
My colleague Danielle Booysen and I were one of the teams and in less than 2 days we’ve been able to build a dev tools application named:
Web Console Recruiter.
The idea
As it’s not always easy to engage developers through the usual ways, through the classic recruitment process, we wanted to build something to help and improve this process.
We conceived an app which runs in the browser developer tools console allowing the company to engage and grab the attention of developers who explore the Vodafone website.
How Danielle and I captured the developers’ attention would have been essential. We wanted to develop something new, something a developer wouldn’t expect, something to have fun with and at the same time not invasive.
The Research
After some initial investigations, we soon acknowledged that few companies already do try to grab the attention of developers through unusual ways using the browsers developer tools. The approaches we have found were very simple. Most of the companies just print a plain black small logo and their ‘careers’ URL in the console and… that’s it!.
A great idea, using the console, but could it be improved? is it really engaging? We wanted to do something else and improve this approach.
How?
The core of our plan was building a game!
A technical quiz to be played in the console.
Planning
After our expedition on the internet, we planned our following two days.
Given that developing an application which runs inside the browser developer tools console was something new for us, we explored and tried some new javascript libraries and approaches to achieve our goals.
We had to decide if and how to use Ascii art, animations, and images in the console; create a way to let the developer interact with our quiz, style the text, architect a nice flow, writing the actual Q&A and last but not least prepare a nice presentation.
Tasks splitting
Once our plan was ready we defined and split the tasks, drew up an MVP and set time limits. We only had two days, half-day was already gone and we wanted to bring a working product which had the potential to be great!
The outcome
In less than 2 days we achieved everything we planned and more. Using Vanilla Javascript we build a mini technical quiz for developers which run in the browser developer tools console; inclusive of images, styled text, and customized commands to play it.
How it works
Briefly
1) When the developer opens the console for exploring the HTML elements, the network tab or for any other reason, they get a curious welcoming message in the console.
What is shown in the console is unexpected! It is colorful, styled with emojis, images and shows the company logo grabbing the developer’s attention.
2) The welcoming message is then followed by a text which explains the basic rules and the commands for playing the quiz.
The application is run through commands such as start() and reply() which the developer will have to use in order to finish the quiz replying to random questions taken from a collection we have control of.
Yes random. One of the features of our app is that the questions change and are shown in a different order every time the quiz starts. In this way inquisitive developers will not have the same quiz again.
3. Once the developer has replied successfully to all the questions a final congratulation message and the career URL are shown!
Why do I think the quiz works?
First of all, it is more than printing a URL or a white and black logo.
Our app prints images, styled text, colors, emojis. It prints something that the eyes of a developer are not used to see in a browser developer tools console adding value to the company.
Secondly, it is a mini quiz! Which requires the active participation of the developer and tend to be felt like a game, a fun challenge rather than a recruitment process.
In summary; looks great, has smooth user experience and works!
In the end
Other reasons why we have been really satisfied with our work is because it can be easily implemented in every web application. The code is clean and has minimal usage of JS packages! [Only one actually, which we’ve added for time reasons but that can be easily removed and replaced by one javascript function]
Furthermore, its style is flexible. The images, the company logo, the texts can be easily changed or restyled with CSS.
The quiz’ questions and their quantity can be modified as well.
We believe it could add value, has potentials to be improved and be more effective!
On top of that, we had fun and learned new things!
Finally, we won the hackathon which made us really happy and proud. We built a great tool and ran a great presentation.
Feel free to follow me!
