Vox Pop

Development — Software, Personal, or Otherwise

This website is being deprecated. All archives and new writing is being moved over to MatthewReinbold.com.

Tradegrade Hackathon Day 3

JQuery Mobile Muli-Page Madness

I had another minor panic attack this morning in the shower. This particular freak out is because today I cross the midpoint of time I set aside to "complete" this project... and I have yet to produce anything I can hit in a browser. The time has not been idle, as anyone who has been following this series knows. But a vast majority of that work has been building up back end systems and design concepts. Today will require a big push to get to a minimally viable product.

Work begins with an export of the design items I had been working on in Codiqua. Even though they're not "finished" I need to begin converting the static files to a dynamically data driven site. Almost immediately, however, I was ensnared in the administrative weeds: collecting registration information, tracking down where the Italian domain name registration (tradegrade.it) had gone wrong, digging up image assets for Facebook and Twitter pages, seeding accounts with the initial follows, etc.

With that done was it time for the site work? Nope: MORE DATA PROCESSING! Since average draft position (or ADP) of a player is vital toward the site functionality and I didn't have anything yet to draw from, it needed to be added. Since the ADP information was from different sources than previous player data the new process exposed data consistency problems (either players that are with new teams this year or, less often but more embarrassing - spelling mistakes).

Early Interface on IOS

Now it was evening. It would surely be a simple matter of slicing up the export from Codiqa and being on my merry way, correct? Double daily nope. What I didn't realize at the time is that the Codiqua export was what jQuery Mobile refers to as a "multi-page template". This is where all the "pages" that would normally exist as separate files in every other project are instead in a single file. Each view that the user sees is contained within its own <div> tag and transitions between them are handled by Javascript.

I understand why this is valuable from a static site standpoint: on a mobile device speed is at a premium. With a multi-page template only one request, the initial one, is made. Every subsequent click executes like lightning since the entire site is already in the user's hand. Any <a href='...'> references include a hashtag: these aren't named anchors, but triggers for the jQuery Mobile to apply its transitions to when clicked.

Unfortunately, this is problematic when on a dynamic site. When I click on a player's name I need to load the latest information (within cached reason) for that player. I spent way too much time trying to get jQuery's Dynamic Page Injection to work.

Frustrated and behind schedule I uploaded what I did have working to a staging server I could hit with hardware (both Android and IOS devices). The initial thrill of seeing a rudimentary site was quickly quashed by how much I had left to do. Those issues went into Github, which I'm quickly coming to like better than Trac's wiki bug tracking system. I've used Trac for years but for rapid fire documentation of increasing humility, Github rules!