The Koding Hacakathon

The Koding Hacakathon

I’ve always marveled at the staying power of the Lucid Agency tech team. We’ve been lucky enough to recruit fantastic developers – and once we get ’em, they seem to stay. I attribute it to the fact that our team is tight-knit. Each member of the team excels at something different, and we all support each other. It sounds like Pollyanna in Dev World, but it’s the truth. I love my team.

We put our close bond to the test this weekend by participating in the “World’s First Virtual Global Hackathon” hosted by Koding.

What is a hackathon?
I’ll admit, I didn’t know, as of last week. Samantha, our brilliant front-end dev who excels at CSS, map-creation, and looking uber-fashionable, introduced the idea to our team. She explained that a hackathon was a 2 day coding blitz. We would compete against 1,000 other teams, virtually, around the world. We would choose one out of a series of pre-selected topics, and code a minimum viable product to fit the theme that we chose. At the end of 2 days, we would submit our project, and wait to be judged!

This sounded fun enough to our team, so we agreed to give it a go, and chose our team name: Team ¯_(ツ)_/¯. At Lucid, we bandy this symbol about liberally. It’s the nature of everything we do.

EX:

Q: Why isn’t this working?
A: ¯_(ツ)_/¯
Q: OMG it works, I fixed it! How did I do that?
A: ¯_(ツ)_/¯

In all seriousness, our team is talented and we know what we’re doing – but sometimes you just have to throw code to the wall and see what sticks! And we knew we’d be doing a lot of this over the weekend, so the name was perfect.

…Or so we thought. It turns out that the “/” character in our team name is an escape character, and broke Koding’s JSON parser, and as a result, their entire 1000 team database. We didn’t mean it! We were just trying to be cool and shrugg-y! After 17 hours of confusion at Koding headquarters, the situation was righted when our name was forcibly changed to “Team Prince” – because, you know, our original name was a symbol. Kind of like Prince. Whatever the reason, it didn’t matter to us, because we all love Prince anyway. I even have a Prince ringtone (Anotherloverholeinyohead in case you were wondering). So clearly this was just another sign that my team was where we were meant to be – poised and ready to embark on some gooey hackathon goodness!

team-formerly

Somewhere between signing up for the Hackathon and actually participating in it, we moved offices from 3rd st to 5th st. Lots of craziness ensued with the end result of me catching pneumonia (yep, in Phoenix). What a time to be bedridden! I unfortunately had to help from home, while the rest of the team spent the weekend in the office, drinking, partying and – oh ya, coding. Luckily our new glass walls in our conference room came in handy – who needs a whiteboard?

whiteboarding

On Friday evening the team chose our theme:

No one reads the fine print (i.e. TOS, EULA, legal documents) anymore yet every site has them. Devise a creative/interactive solution for this problem.

We started brainstorming solutions to this problem and determined that we could make a parser that would allow any user to copy/paste the content of a legal document, and receive output. The output would scan for common terms, and highlight terms of interest. It would also assign graphic “badges” to the document that would make it easy for the user to understand.

Armed with our basic idea, everyone went home for the night. We returned Saturday morning (sans me, since I was still sick in bed) where Lauren, our PM-extraordinaire with a flair for design made everyone mimosas. We love you Lauren!

hacking

The team used our unique specialties throughout the project:

Lauren – Can design!
Lauren was in charge of branding. She designed all of our beautiful document badges and came up with an understated, modern color scheme based off of the 2015 Pantone Color of the Year, Marsala.

Palette

She created a simple, understated logo for our new product (Which we decided to call LEGALEASE), using the Google Web Font Nixie One.

It’s so rare to find a project manager who is great at communication but also understands aesthetics. It was really cool for me, as a manager, to see Lauren’s design vision shine through, since she doesn’t get a tremendous opportunity to do that on a daily basis. I really appreciated seeing another side of her!

By the final day, Lauren had created our “category” badges:

Badges-1024x1024
The simple, flat style feels modern.

Michael and Liz – The Research team
Michael and I waded through more Terms and Conditions and Privacy Policies than we ever cared to read in our lives. I will admit that it is the first time I’ve actually read one. I can’t even imagine how many I’ve blindly agreed to over the years. Together, we created a list of “common categories” that we saw across several documents. Examples include 30 day warranties, the service’s right to change the Ts and Cs at any time, user licenses, etc. Once we had our categories narrowed down, we collected specific “terms” for our parser to search in each category. For example, the words “subpoena” or “law enforcement” or “criminal investigation” in a Privacy document almost universally refer to a clause that says something about cooperating with an investigation. Check out this snippet from the Best Buy Privacy Policy for example:

“We may also share information to respond to a government request or when we believe disclosure is necessary or appropriate to protect the rights, property or safety of Best Buy, our customers, or others; to prevent harm or loss; or in connection with a criminal investigation of suspected or actual unlawful activity.”

That same clause – nearly verbatim – appears in nearly every policy we checked. With a list of terms that was specific yet broad enough to apply to multiple documents, we could reasonably assign our badges. I can’t really say that scanning through privacy policies was exciting, but it was eye-opening. Exactly 100% of the policies we saw included a clause like this:

“APPLE DOES NOT REPRESENT OR GUARANTEE THAT THE ITUNES SERVICE WILL BE FREE FROM LOSS, CORRUPTION, ATTACK, VIRUSES, INTERFERENCE, HACKING, OR OTHER SECURITY INTRUSION, AND APPLE DISCLAIMS ANY LIABILITY RELATING THERETO” – iTunes Terms of Service

It was interesting for me – and a little scary – to learn that every major company takes the time to spell out their zero liability stance on hacking. We made a special badge for this topic in our final product!

Meanwhile, Samantha found a translator library, Translate.js. She took the common phrases and terms that Michael and I had found, and created a dictionary file format that Michael and I could follow. Michael re-fromatted all of our terms into an extensive library that the parser could read. This portion was the most tedious, but at the end we had a dictionary over 200 lines long! Our finished application is actually coded to handle 3 times more than it is currently handling – we’ll be expanding it in the future!

Sloane – the front-end Beyonce
Completing a Hackathon without someone like Sloane must be difficult. Every day at work, Sloane is fluid – she can jump from one project to the next, knows multiple framweorks and technologies, and has an eye for design. Like Beyonce, there’s nothing she can’t do. She served the same role in our Hackathon. Whatever we needed, Sloane was there to plug-in and make it happen. She is responsible for much of the front-end work. We used a Bootstrap HTML theme template as our base, since we only had 2 days, after all. Sloane (with a little of my help) manipulated the template to work with our application, and performed all of the front-end fixes and CSS modifications.

front-page

She assisted Samantha with back-end research and developmet, and her all-around bubbly attitude kept everyone happy long after the mimosas were gone. One of my favorite Sloane-additions is the Xbox-like “achievement” that we threw in for fun if someone scrolls through the document too quickly:

speed-reader

Billy and Samantha – the buddy cop developers

The code name for our project, since the planning stage, was Legal Weapon 4. If you don’t get the joke, you haven’t seen enough 80s movies. Go watch the trailer.

If the Hackathon were a buddy cop movie, Samantha and Billy would be the main characters – the optimistic newcomer and the grizzled veteran, working together to tackle pair programming. Ok, so Samantha isn’t really a newcomer, and Billy’s not that grizzled, but it was great to see them play off of each other. Samantha is a front-end guru, and Billy has been working on back end applications for years. Together, they were able to pick up the slack where the other didn’t have an answer, and solve all of our major problems with the application in just 48 hours.

On day 1, Samantha integrated the WordNik API with the wordsmith plugin, which would allow users to highlight any words in their document and click to define it on dictionary.com.

Of course, no project goes off without a hitch – but adapting to challenges is what a hackathon is all about. Early on day 2, we realized that the Translate.js library just wasn’t going to work because it wouldn’t translate parts of strings, only whole strings. Samantha pivoted and settled on the ReplaceText plugin isntead. This meant that I had to go back through the tedious work of reformatting the dictionary to fit the new format – thank god for copy/paste!

copy-paste

Billy came up with the idea of how we would actually show badges on the results page. If a term was matched, we would append a span class to that term in order to show the badge, and also add a highlight to the matched term. Billy’s ability to cut through confusion and see a clear (lucid!) solution is one of the many reasons we love him. On the second day, he helped figure out an elegant way to handle our “demo text” samples that was easier to implement than our original concept. He also helped with styling the text that a user copy/pastes into the analysis window.

End Result
So you want to see our application in action? This is our official submission to the Hackathon and the git respository for the project. We are quite proud of it. This project taught me several things:

  • When our team is allowed to unleash our creativity and skills without a set client in mind, we’re able to just get things done. Obviously the nature of agency work is to create something for your clients (and we love our clients!) but there’s no denying that the back and forth that goes into creating someone else’s vision cuts down on the time spent actually working. It’s amazing what we can accomplish in such short order with a tight team.
  • When you work outside of your comfort zone, it brings you closer to your other team members
  • My team is capable of more than their day-to-day jobs. When you see someone day in and day out, and give them the same types of tasks every day, it’s easy to fall into a rut or pigeonhole them as a certain “type” of developer. During this project, we saw that Samantha can flex her back-end muscles, and our project manager has a real flair for design. Knowing my team’s complete skillset will help me guide them towards appropriate side projects or help us as a team to assign project resources efficiently.
  • We were so happy with the result, in fact, that we intend to expand on it during Lucid’s regular work hours. We’ve already purchased the legalweapon4.com domain name, and will look to fine-tune this code in the coming weeks.

Overall I would definitely recommend that you participate in a hackathon in the future if you ever get a chance. I was so proud of my team and our product, and can’t wait to find out on the 15th if we win anything! We didn’t do it for the prize – but who doesn’t like a little recognition? Wish us luck!

thank-you

Lucid Agency
[email protected]
No Comments

Sorry, the comment form is closed at this time.