It all started with FlappyArms.sexy.

For those not in the know, it’s an experiment by the NYTimes’ Alastair Coote to clone FlappyBird — the twist being that, instead of using arrow keys or swipes on a phone, you load the game in a desktop/laptop browser, then connect to it with your phone. Using the sensors in your phone, it detecs when you flap your arms and moves the bird accordingly. I came across it when he tweeted out a link, and immediately played it for an hour.

About a week later, Managing Editor Randy Parker dropped by to ask what I was going to do at our booth at the 2014 edition of the York County Fair. Previously, reporters and editors used their time at the booth to connect with the community in their own ways. Politics reporters might interview a politician live, our graphic artist offered up sketches one year, and this year our photo editor planned a photo walk, taking members of the public around the fair and explaining some of the basic concepts of photojournalism (and helping them compose great shots).

Parker specifically said he wanted to make sure that people were doing something that really spoke to what they did/their interests.

I wasn’t lying when I replied with, “Well, the only thing I can think of doing is throwing up FlappyBird and showing people the possibilities of technology.” He even would have let me go along with it, too, I bet.

Then Community News Coordinator Joan Otto told me about an idea she had for the fair. She envisioned a setup whereby people could tell us the things they thought that made York County special, then display them on a big screen throughout the fair. Show poeple what journalism is, what interactive journalism can be.

Show them it’s not all “a reporter shows up, talks to people, goes away and later something appears on the website/in the paper.” Show them that journalism can be curation from the public, soliciting input and feedback instanteously, that comes together in a package with our deep knowledge and library of photos of the area.

And I thought, “Damn. That sounds like FlappyArms.sexy, except actually relevant to journalism. I gotta get in on that.”

Together on a Tuesday, we worked out that we’d need a submission form and a display (pictured above and below) for the answers, a curated set of photos from our archives and the #yorkfair feed from Instagram. She also wanted to incorporate it long-term into her blog, Only in York County, which we did here.

Oh, and the Fair started Friday morning.

Photo by Joan Otto

Photos by Joan Otto

The Build

Everything actually went fairly quickly. After looking at a number of jQuery image slider plugins, I ultimately wound up building my own owing to the fact that a) none of them did full-screen very well, since the plugins were by and large designed to work on actual sites, not what amounts to a display, and b) I wanted to be able to insert the newest answers immediately, if I had time to build the feature.

We could have done a quick-and-dirty build that was tech-heavy in operation, but we wanted to leave the display/capture running even when we weren’t there, and that required making things a little more user-friendly. The data was stored in Google Sheets (something we’re likely to move away from in the future, as I ran into a number of problems with Google Apps Scripts’ ability to work with selected cells on a sheet. That bug in and of itself isn’t a huge problem, but that it hasn’t been addressed in so long is worrisome in the extreme), with a custom function for updating or deleting entries (since we were using push and not refreshing the page).

The Instagram API was, as ever, a dream to work with, and a cinch to pull stuff in (cited and referenced back to Instagram properly, of course).

Even the part I was worried about, the Push notification, was a cinch to institute thanks to Pusher. Highly recommended, if you can afford it — we could, because this required a relatively small number of push clients open (just the display computer + anything I was testing on at a given time, so we used the sandbox plan). There are a number of self-hosted open-source options — though, if we have need of one and I can’t convince them to pay for Pusher, I’m going to consider Slanger, which uses the Pusher libraries. (Seriously, cannot push Pusher enough).

In fact, the biggest challenge of the buildout was how to handle multiple push notifications that came in either at the same time or relatively close to each other. The easiest route was to just have the second message override the first, the third push out the second, etc. But the entire point of the exercise was to show people that they could be a part of the journalism immediately, and we didn’t want to discourage multiple people from submitting at once.

Thus, the dequeue() function was born — on the first submission, set a timeout that will restart the interval that was paging through the extant items. If a push comes in while that timeout is set, queue the data, get the time remaining, set a new timer (same variable) for the time remaining to fire dequeue again. If no new pushes come before then, take the item out of the queue, use it, and set a new timer to dequeue again (if there’s anything else in it) or restart your main action if there’s not.

Resources

FlappyArms.sexy — Fun tech experiment w/ mobile
Pusher — hosted push
Dequeue — Gist for the dequeue() function
Slanger — open-source server that’s compatible with Pusher libraries
Instagram API