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 don’t even remember how we discovered Koding in the first place actually, but it’s 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 wasn’t my first rodeo, but this was my first time as a team lead. So let’s 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 didn’t 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 it’s 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

2xodqcy

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 won’t translators work ;n;

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.

img_7625-e1418020657808

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

palette

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 you’re not communicating with your team, then they won’t 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.

img_7632-e1418021141569

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 didn’t 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 wasn’t 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 wasn’t 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.JS’s format to ReplaceText. Most of Day 2’s morning was spent copying and pasting.

screen-shot-2014-12-07-at-11-21-47-pm-1024x472

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

badges-1024x1024

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 Billy’s 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 couldn’t 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.

screen-shot-2014-12-07-at-11-40-01-pm

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 wasn’t 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 didn’t 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 it’s place.

I deleted the git repo from Koding yet again thanks to the terminal losing focus. I’m 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

xeyyzpa

2rayyad

Final Thoughts and Stumbling Blocks

I honestly had started out this project hoping to reformat legal documents and the badge system was secondary, but I found quickly that it was actually really hard to reformat documents without anything but a CTRL+C and CTRL+V from the user, to the badge system took center stage.

Why are so many things in legal documents in caps lock?

Why did I pick the name LegalEASE for our product, when I always misspell it?

Why does every company say “if we’re hacked, it’s not our fault?”

A lot of the people on my team told me that I had done the majority of the work but I feel like I couldn’t have done any of this without Liz and Michael researching terms and combing over the copy for stupid typos, or Billy wiring up the backend to actually work in a simple and elegant manner that I could have never thought of, or Lauren being so forward thinking in design, and Sloane being with me in the final hours before submission and crying over javascript errors.

If I was to lead a hackathon again I feel like I’d be a bit better at it, managing people was definitely tough, especially with half my team being in and out everyday and the real manager having pneumonia. Everyone really supported the project and was happy with the end result. That’s all I care about. I feel like it made our development team a bit stronger because we went out of our comfort zones a bit.

If I had more time in this hackathon, I’d probably expand our badge system a bit, I coded the possibility for triple of what we have right now, and I would definitely try to find a way to format the actual text better, I wish I would have spent less time messing around with Translate.JS when it was nothing like what I wanted.

Legalease is simple, purposeful, and quite beautiful in it’s minimalism. I am very proud of my team for what we have accomplished, and I hope that Koding holds another hackathon again! I learned a lot from this one: leadership, strings, and more importantly, how great my coworkers are in their fields.

If you’re interested you can play with our application here or you can view it on github here.