iA


A few new Boston.com projects

by Andy Boyle.

We’ve launched some cool projects recently at the Boston Globe. So I thought I’d show my work and chat about a few recent projects in the lull between primary election nights.

In the past few months, we’ve launched What Would Bill Say and a GOP Candidate Tracker, while also relaunching our Patriots Report Card. All three of these projects rely heavily on Javascript and are among the first projects I’ve written in the language. I’m a Django guy, so this front end stuff is scary. The design of these projects were done by my coworkers — I focused on the backend.

Patriots Report Card

This is week 14 of our Patriots Report Card. This was a tool previous developers at the Boston Globe worked on. It runs in Flash and updates a MySQL database. Six weeks ago, we switched it from the previous version. The new version reloads the page when you vote, and so we kept your voting information in the URL instead of saving it within the Flash program.

My coworker, the great Tom Giratikanon, worked on the Flash part. I write the JS that stores your vote in the URL and returns it so the Flash bits can use it, with an assist from Tom.

First a regex I found by Googling splits the various parts of the URL. Then a few variables are given the values from the URL and the SWF file. Lastly, it loads your new votes into a function called reportCardReload, so when you click the next button it reloads the page and keeps your vote information. I know, we don’t have to reload the page. But it’s what I was asked to do and I think it works nicely.

Not exactly the hardest thing in the world, but it was one of my first JS projects I did mostly on my own.

GOP Candidate Tracker

A few weeks ago, we launched our GOP Candidate Tracker. This project was quite difficult, as it uses a lot of brainier Javascript/jQuery and I am still a beginner. Thankfully, the aforementioned Tom and a few internet pals helped walk me through some of the concepts.

First, we have two interns in the newsroom who enter information into Google Docs using a Google Form. Then I download the latest events, paste them into a .csv and run a python script that turns it into JSON. I test it in a fake version of the live page that can only be seen inside the Globe — just to make sure no weird characters got in — and then I paste it into the live JSON file and upload that to cache.

I will be building a Django-based backend for this, so folks will enter the information in there instead of Google Docs in the future. Then the Django app will spit out a JSON file, similar in structure to what we’re already using.

It wasn’t built in Django first because we didn’t have an area to build Django projects at the time. Now we do, thanks to the hard work of our Ops team. So we will be switching that over in the future.

Anywho, this project had to do a few things: Parse a JSON file, sort it in various ways and allow you to click a button and show only a certain candidate (and make that appear as a hash in the URL so you could share the individual person’s dates). I used jQuery, underscore.jsdate.js and jQuery-BBQ, the latter built by a former Boston Globe staffer.

What Would Bill Say

As many folks may know, Bill Belichick keeps his quotes pretty bland and quite simplistic. Our sports team asked if we could make something that showed one of his random quotes. I countered with, “What if we allowed you to ask him a question and it answered with a real quote of his?”

This app works like this: You ask a question, it appends the question into the URL, generates a random number and appends that to the URL, too. The random number picks which photo/question to show from a list within the Javascript. It also looks to see if a question has been asked (aka shows up in the URL) and spit out the appropriate page information.  I used jQuery-BBQ again to help me parse the URL and jQuery Form Defaults to help with a few form issues.

My pal Dan Nguyen looked at an early version and found it had some cross-site scripting vulnerabilities because I wasn’t sanitizing my fields. Underscore.js helped me with this.

We wanted to keep everything in the URL so the original question and answer would be easily shareable on social media.

Lessons Learned

These projects mostly do everything inside of the browser, loading flat files (except the Patriots Report Card). While the Candidate Tracker has a wannabe-database backend in a Google doc, it ends up pulling in a flat JSON file. This means I don’t have to maintain an application server, a database server or a caching server. Me gusta. A year ago I probably would’ve set up a full Django stack for each of these projects.

Also, I am no longer scared of Javascript. So that’s a good thing. In the future, I’m going to try to make as many projects with just flat files. I’d also like to start learning more about using Raphael for graphics.