Products We Shipped
Built Vox.com in 9 Weeks
“At our first meeting, we knew we were going here,” he said. “They had the technology we thought we were inventing.” - Ezra Klein, Vox.com Editor-in-Chief Vox.com Launch - April 6, 2014
The Verge Responsive
There’s no more mobile site, no tablet site, no desktop site — there’s just one Verge for everything. And everything loads much, much faster than it used to.
Vox Media was running Ruby Enterprise Edition 1.8.7 and Rails 2.3 from July 2010 until April 25, 2014, when we simultaneously upgraded Ruby to 2.1 and Rails to 3.2. There is lots of excellent existing literature on upgrading Rails apps, but we took some time to talk about some of the techniques we used to enable other Chorus projects to be actively developed and deployed to production while we worked on this upgrade.
Eater needed a new way to highlight and display deeply reported and labor-intensive content while also obsessively tracking the news of the day. This new site - powered by Vox Media's proprietary platform Chorus - makes that happen.
In a routine standup meeting we were challenged to come up with creative ways to increase visibility of our custom ad products. We got to work setting up a new placement for our ads when we recognized the opportunity to experiment with a full bleed ad experience. By the next week’s meeting we had built a framework in Hymnal, and performed a test with a house ad served to a small segment of users. It worked! So less than a week after that, we had our first Prelude live on a site.
To help us improve the performance of Chorus, we implemented and became contributors to the open source project Thumbor, which handles the processing of around 1.5 million images per day on all our sites (at a rate of around 20-30 requests per second) and lets us do all sorts of cool stuff such as file size optimization, resizing, cropping, stylized filters, and more, while maintaining a processing time of under one second for 90% of the requests it receives.
Our brave Operations team accomplished incredible things this year. They shipped an entirely new physical and logical network stack; built out a private virtual cloud implementation; convinced our accountants to finance, and our developers to use, a sweet log aggregation service; and last but not least, migrated all servers, services, and data in our datacenter from Arizona to Virginia just in time for the massive traffic event that was the World Cup, with no downtime. No big deal.
- Grew to 66 members
- Created a native brand advertising platform
- Began serving our ads with Google's Doubleclick for Publishers platform
- Created over 600 ads on Hymnal, our ads creation platform
- Pushed 19,056 commits to Chorus, with 1,104,778 lines of code added, and 987,300 deleted
Open Source Projects
In December 2013 The Verge published The Verge 50, one of our earliest examples of our Editorial Apps system built by VP of Technology Pablo Mercado during our second VAX hackathon, inspired by the work done by the NPR Visuals team. We made the source code public, with the hope that people may learn from it and the methods we used to build it, and use them to tell their own stories.
Vox often uses images on social media to give users more context than a normal tweet or Facebook post. We found that if we added a quote or interesting fact to an image that more users would share it. But having designers craft each image every time we wanted to do that was a huge time suck.
Here at Vox media, we are constantly finding new ways to create engaging, shareable content. One of our newest authoring tools is a quiz generator that offers thorough explanations of topics in enticing, concise and interactive ways. The tool also automates the process for creating an interactive quiz without involving a developer writing repetitive code.
Middleman Google Drive
This is an extension for Middleman which allows you to load data from a Google Spreadsheet into your app’s template data. This system allows our designers and developers to build out complex layouts in Middleman while our editorial team works on the content separately in a Google Drive spreadsheet; writing their copy as structured data in a spreadsheet provides a way for the application to pull it and incorporate it into the design programatically.
Here's the thing about a hack week: at its most basic, it's really just a decision to set an artificial deadline on making the things your team has been dreaming of for a while. A really harsh deadline, for sure, and one that isn't backed by any serious driving need. It's not like the end of a political campaign where you sprint as fast as you can to the finish line because there's no second chance. It's not part of a business cycle, holiday season, or year-end close out process. It's a simple call made together by a team: "Hey, let's make some things."
The Verge Hackweek
Hack week exploded two Vox Media cliques for at least a few days in August, forcing writers from the Verge (and across Vox) and developers and designers from the Product team to engage with each other face-to-face. It was weird and uncomfortable, scary even. But man, was it worth it.
On Thursday, October 9th, 2014, Vox Media held our first product-focused event at our DC headquarters. Entitled All Aboard: A Discussion on Shipping Digital Products, we invited designers, developers, and managers from various DC-based companies to come discuss their teams, process, and how they celebrate.
How would you save Earth from a deadly asteroid? On October 23rd, we posed that very question to five brave designers in a series of four timed challenges during Vox Media's first ever Pixel Punch. Over 100 attendees came to watch Victor Ware, Joseph Le, Josh Mahan, Danielle Theroux and Peter Verastegui save our planet from destruction by way of their best design skills while being judged by leading local and industry talent - Jason Santa Maria, Carolyn Sewell, Nicki Dlugash, and Terry Biddle.
Making Work Cooler
As you know, our beloved CampfireBot is an integral part of our organization, but it's been missing something after all these years: a personality. And so, we built snarkov, a Sinatra-based Markov-chain chatbot, and hooked it up to our Slack. We think the results speak for themselves, just ask cfbot.
The category is "Time Wasters." The answer is "this Slack integration uses the jService.io API to allow us to play Jeopardy in Slack."
What is trebekbot?
Product blog on Chorus
You may be asking, "What took so long? Why didn't Vox Product use its own platform to write blog posts?" If so, you've got a bright future as an investigative journalist. The truth is, we just needed to shut up and ship it.
While having kittens or Vanilla Ice as placeholder images in our prototypes has come in handy in many occasions, we felt we deserved to have much better placeholders, so we built voxholder and filled it with photos of the Product Team so we could look at each other while building websites.
New cfbot Commands
We love cfbot so much, we moved it to Slack when we made the switch from Campfire, optimized all of its existing commands to work better with Slack's formatting, and even made it an actual bot user so we could invite it into our private groups and DM with it all day.
Like What You See?
We're building great things and we need your talent. There are many openings on the Product Team and across Vox Media, so have a look and apply.