We kicked off our first-ever MLSDev Hack Day last month! The idea was to give our developers a chance to experiment and work on creative projects. We started the morning by taking over the conference room with wires and monitors. We ate bagels and listened to each person describe their plans for the day. Developers divided up, donned headphones, and started coding. The day passed rapidly with pizza, snacks, and beer. The next morning we gathered for a bit of show and tell. Here are some of the ideas and prototypes that were created in less than 24 hours.

DynamoDB acceleration by @jdslatts

Justin developed a process to use Amazon Web Services’ DynamoDB NoSQL database as a MySQL replication slave for de-normalized query data. This allowed him to replace the backend for EOS, the MLS API, with DynamoDB as a low latency, highly scalable back-end for data stored in MySQL by our CMS. A completely unscientific benchmark showed roughly a 40X improvment in uncached query performance. The prototype was built using Python, Node.js, and MySQL triggers.

Draftr by @hansyg and @sorensen

Hans and Beau developed Draftr, a real-time representation of a player draft, such as MLS SuperDraft. They built an the interface that allows for teams to go “on the clock” with a countdown ticker and timeout options. Once a player is chosen, administrators broadcast out the pick (top right box). Admins can also broadcast one-way color-commentary to users in the box below. Draftr also allows for the pick order to be reorganized based on trades. All moves, trades and commentary are in real time and are broadcast to any user connected on the client side. The prototype is built in node.js and websockets (sockjs).

Visual Schedule by @brycekahle

Bryce reimagined the season schedule for MLSSoccer.com. This project was done almost entirely in CSS and is an entirely new way to browse the match schedule. Users can see the entire year in a traditional wall calendar month-by-month view, with matches displayed as a pair of colors to represent each team. Clicking on a day brings up a close-up view of that match week. Then by clicking a club logo on the left, the schedule will quickly display that team’s fixtures using opponent logos and indicating home matches.

Ooyala Hero Videos by @LouisAJimenez

Louis’s hack day project was designed to integrate video into the hero section on the homepage. It allows editors to select video nodes and place them into the nodequeue, just like normal. Instead of rendering the thumbnail, it will render the embed code with the video. It supports various hero layouts (1, 3, and 4 articles or videos) and allows the embed to play in all spots. Louis was able to integrate the display area with our video player in order to hide the title overlay once the video starts playing to ensure an unimpeded video experience.

Design and templates by @chrisbettin

Chris decided to focus on hacking out design improvements to our Drupal 6 CMS. He built three major new features: Full screen video player, video integration into article content types, and mobile web optimizations. Check out the before and after GIFs below.

The team had some fun and ‘horsed around’ for a bit.