KODING HACKATHON: RECAP

This past weekend was Koding International Hackathon which touted itself as the first virtual hackathon. There were plenty of applicants but we got ours in early, my backend dev and I were among the first people to use Koding for anything, and I dont even remember how we discovered Koding in the first place actually, but its one in a long line of virtual development environments like Cloud9, but Koding has a beautiful UI that makes angels weep. So I fell in love, as I do with everything that has beautiful design.

When I got the email for the hackathon I signed up immediately and to my surprise, despite being probably the least qualified in the world, I started a team at work. Before the hackathon began there were 20,000 applicants and only 2000 slots, my team was accepted within the first round of 200 which makes us true 1%ers.

This wasnt my first rodeo, but this was my first time as a team lead. So lets talk about the hackathon.

JSON AND ¯\_(ツ)_/¯

My team decided in a heated discussion on slack that the name that best embodied our team was ¯\_(ツ)_/¯ because Happy Developers and Team Toast really didnt encapsulate the feel of our team. I put together our github page and submitted it early because I thought that when I got the email from Koding to fork the day before thanksgiving that meant it was also due that day. However, if anyone has ever used JSON they also know that \ breaks JSON parsers because its an escape character, and it broke their JSON parser for teams.

For 17 hours.

They ended up renaming us to Team Prince so we could be added to the roster at all, Prince was due to my quip that we are a symbol and not a name, like the artist prince

So Team #Prince was born! I was actually pretty excited about this, as was my Project Manager Liz, since she loves Prince.

OUR PROJECT IDEA

My coding language dating sim was shot down completely and I was miffed about it but Sloane, my front end dev, pointed out that a lot of people would most likely take to the game project, so it was better that we were doing legal stuff. In retrospect I am very glad that we ended up doing the legal project because we got a finished project at the end that we were all proud of and it actually was much useful than dating OS tans.

There were a lot of problems I guess early on in the planning stage, I was already busy with projects at work, and outside of work too, so most of the planning was done right before we met at 4:00 to decide on the UI. I wrote out our features list in hopes that we could get them all, and sketched some things out on paper. I said a prayer when I left our pregame meeting, already at odds with team members on how the application would actually work.

HACKATHON DAY 1:

WHY WONT TRANSLATORS WORK ;

My designer, Lauren, brought us mimosas. So Day 1 started out with champagne and I think every hackathon should start out with champagne because the first few hours of a hackathon is like a coder party full of dreams and features that will all work beautifully together. I wrote up to do lists on the windows of the new office and put on courage the cowardly dog.

Lauren came prepared for everything, and she had a gorgeous color palette picked out for the site already:

She told me that she had based the color palette around the Pantone Color of the Year for 2015: Marsala. This would be the basis for the badge designs and all the other colors we would eventually pick for the website. Lauren is so incredibly talented, I would have never thought to connect something so current with our hackathon.

Our research team on the other hand had been hard at work already, and had combed through Terms of Services, Terms and Conditions, and Privacy Policies for many major corporations to find repetitive terms that we could use to base our grading system off of. This had to be the most tedious and terrible thing I could ask of a person, and I am ever grateful for their patience, Liz and Michael are stars.

Meanwhile, I found a great translator library called Translate.JS and because our front end developer was missing we used bootstrap to get started and had a lot of responsive front end development done before it was even noon.

However I quickly realized that if youre not communicating with your team, then they wont know what to do. Which seems obvious in retrospect, there was a lot more whiteboarding in the afternoon to get Michael back on doing research, I had him begin to take the common phrases and code them into a dictionary file that would work with Translate.JS.

By late afternoon Billy, my backend developer, and Sloane, my front end developer, both had come in to take some weight off my shoulders while I wrestled with the translation library that was translating absolutely nothing. Michael and Lauren had worked together to establish the badge system which she would be designing. Day 1 ended with everything on track, except for the translator.

I put it aside and integrated the WordNik API into our system so people could define words if they wanted, which was so easy with wordsmith, and I was quite proud of our progress by the end of Day 1. We had a great looking site, and everything was running along smoothly.

It didnt do much of anything but it looked great and you could highlight stuff, so it seemed like Day 2 would be a breeze. Translate.JS still wasnt working, but javascript libraries are fickle.

I deleted my repo on koding 3 times accidentally by losing focus on the terminal, and their systems were overloaded due to the high volume of people accessing it, but I really enjoyed reading what other teams were doing on their channels. I mostly stuck to vim.

DAY 2: GHOSTS AND LIGHTBOXES

Day 2 started out terribly, I woke up to the realization that the reason the translator wasnt working was because Translate.JS did not translate parts of strings, it would only translate whole strings. Which meant bad news for my idea of assigning badges out based on key terms that Liz and Michael had found. On a whim I found this ReplaceText plugin which meant I had to recode the entire dictionary from Translate.JSs format to ReplaceText. Most of Day 2s morning was spent copying and pasting.

Lauren lifted my spirits by completing the badge design that was everything I had imagined them to be

The badges were controlled by the dictionary, if a key term was found, I would append a span class to that term in order to show a badge (which was Billys idea, I swear he knows the easiest way to do everything aside from diagnosing Javascript errors) but we would also add a highlight to show people what they were graded on. I had initially set out to try and format heading titles through the dictionary too, but I realized after I viewed a few Terms and Conditions that everyone uses all caps all the times in a terms and conditions. I couldnt format anything beautifully without things looking ugly later on.

After I had finished the entire badge system I went back to the office with Sloane to complete the last of the system, which was mostly superficial stuff, and silly things I wanted like the xbox achievement that popped up when you scrolled too fast.

At my work we had just moved to a new office and there were strange screams heard from upstairs, but Sloane just insisted I turned up the music and hope that whatever was up there wasnt going to interrupt us.

Billy came late to help us add styling to the pasted text and helped me brainstorm a better idea for the demo text, which was a lot easier than I had made it out to be. I had coded out extensive regex to be applied for the styling, and a javascript text area replace, and he came up with a much more elegant solution for both.

Modals didnt work for hours due to the library that we were using for tooltips and when we got the modals to work finally they would never close. Bootstrap hates everything else that tries to take its place.

I deleted the git repo from Koding yet again thanks to the terminal losing focus. Im starting to think the problem lies between the computer and the chair -_-.

There was a lot of typos and lorem ipsum that we had to clean up but by around 9:00pm we had a gorgeous working site that would give pretty pictures to any legal document with our legal dictionary! Sloane and I spent a majority of the evening asking each other what anime the music we were listening to was from, and cleaning up small fixes. She chose the yellow for our logo which stood out better against the backdrop despite it not being in the color palette. Lauren chose Nixie One for our logo font…