Take a peek at the code that powered The Verge 50

Last December, The Verge published The Verge 50, one of our earliest examples of our Editorial Apps system built by VP of Technology Pablo Mercado during last October's VAX hackathon, inspired by the work done by the NPR Visuals team.

In a nutshell, our Editorial Apps system consists of a static Middleman site, which is populated from one or more Google Spreadsheets at build time (using our middleman-google-drive extension, which we'll talk about in a future article), and then deployed to Chorus by doing a git push and using git post-receive hooks, in a way not unlike deploying an app to Heroku.

This system allows our designers and developers to build out complex layouts 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. This stops designers, developers, and writers from stepping on each others' toes while working on the project by keeping the content and the layout separated, and making changes to the content becomes as easy as updating the spreadsheet and republishing the feature.

Today, we're making the source code for The Verge 50 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.