Website: SPJ 4.26 Day of Giving
Client: Society of Professional Journalists
Technologies used: HTML, SQL, PHP, RSS, XSLT, JavaScript, ASP, CSS, the color hot pink
Contributions: Built the whole thing — front end, back end, the databases needed to make it all work, and the translators needed to bring the data from one place to the other.
Live demo: 2017 version [archive.org] • 2018 version

In 2017, the Society of Professional Journalists wanted to host a Day of Giving, which is an event non-profits and universities host when they want to rally would-be donors into donating en masse at the same time (and, consequently, inspiring others who might not otherwise donate to follow their lead). Where April 26, 2017 once was just a Wednesday, now it was one of the bigger days of SPJ’s year.

A website was needed to act as the sun around which donations, live events and other activity would orbit. So I built one. And to look at it, it seems like a simple job — some nice copy up here, a couple of tables with data down below, a chart in between and some big pretty buttons our would-be donors can click or tap to become true-blue donors.

Beneath the surface, though, it’s a frightful mess — the kind of mess you hide in your closet and under the bed when you’re a hopeless slob and you’re informed with 30 minutes warning that company is coming over.

SPJ’s site runs on a less-than-popular coding language and, due to the hosting setup there, it doesn’t allow me access to create and manage databases, which the Day of Giving site would need in order to display, sort and calculate all that data. Nor, after creating those databases on a different server that speaks a different language, is there an easy way for SPJ’s site to communicate with those databases and pull and display the information it needs.

Fortunately, there’s a needlessly difficult way: (a) creating a PHP script that feeds those databases into RSS, (b) parsing that RSS data on SPJ’s site using yet another language, XLST, (c) converting those snippets of XLST into HTML, which Javascript can pick up and turn into variables, and (d) utilizing and displaying those variables everywhere they need to go on the page (the donation totals, the leaderboards, the circle graph, the peer challenge codes in the drop-down menu on the donation form, and more). Yep, it’s just that easy.

If you don’t understand 99% of what any of that means, don’t worry — the folks tasked with managing the site during the event didn’t either, and they didn’t need to. They didn’t even know such entanglements were necessary. The back-end interface I built gave them a drop-dead easy way to enter/edit donations and peer challenges as they came in, and the site did the translating, calculating, sorting and displaying all by itself and without showing off that mess in the closet. It even threw a little Javascript confetti in the air when we doubled our goal by day’s end.

We reused the site again in 2018 for a second annual event, and while the page design received a couple of nominal tweaks — where there was a video introduction in 2017, there were rotating testimonial graphics in 2018 — all the functionality returned pretty much unchanged (dead simple for the user, a duct-taped horror show if you looked at the code) and fulfilled its mission for a second straight year.