How we built (and iterated) North by Northwestern’s Year in Media 2015
North by Northwestern’s Year in Media is an annual collaborative and interactive project in which writers reflect on developments in news, tech, sports, politics, entertainment, and pop culture. Since we’ve never really stuck to a single design or workflow, this year was an opportunity to iterate and experiment. Here is how we built NBN’s Year in Media 2015 across timezones and behind firewalls.
Both the 2014 and 2015 Year in Media projects are built using Middleman, which is a static site generator that makes web development really easy (plus it’s the static site generator I’m most familiar with). Last year, I used the Middleman Google Drive gem to make our backend a shared Google spreadsheet, and while it allowed for easier collaboration, it also introduced a lot of confusion in terms of data entry. This resulted in formatting errors and missing tags (especially if editors copied and pasted text from Google Docs or Microsoft Word) that we scrambled to fix on the night of publishing. This year, it was important to make data entry way more straightforward.
I spent winter break visiting family in Shanghai, and I did not consider the technical limitations of this until I was behind the Great Firewall of China. I could only use my VPN sporadically, and even if I could connect to it, the speed was so slow that I couldn’t really gem install or npm install anything. This made it difficult to have Google Drive as a backend. Instead, I used Parse (which I could access without a VPN), a database in the cloud that can be set up in minutes using only JavaScript.
I spun up a really quick site with Bootstrap and jQuery.selection to make a submission form for Year in Media entries based on feedback from our editor-in-chief. I made the data entry guidelines clearer by using placeholder text to provide examples of valid input, and added some editing buttons that automatically wrapped text in em, p, and a tags because writers found that manually adding links was a pain. Submissions were all saved to Parse over the course of two days, and then I exported the data as a JSON file and used it in the Middleman app as the data file to generate dynamic pages.
I did the design and development using the data file, threw up a working version for final edits from the editor-in-chief (we did cross-continent texting for ~2 weeks with a 14 hour time difference between China and the States ALL WHILE ON VACATION), made those edits in the JSON file, and uploaded the finished project to S3.
Pros:
- Less human error in terms of data entry and kept data entry more consistent
- Had substantially fewer formatting errors compared to last year
- Editors found it easier and more straightforward to enter stories
Cons:
- Edits had to be relayed to me and made by hand because editors couldn’t collaborate or make updates in real-time (though this ended up not being as big a challenge because the editing process prior to submission was really thorough)
Edge cases:
- Painstakingly translating emoji for this one story on emoji, but shoutout to twemoji for supporting emoji across platforms