After the data update I did last month, the next step – obviously – was refactoring code, right? Right.

In seriousness, this was pretty old code for me and I’ve learned a lot in the last year, so it was a good project to refactor. I wrote it, but I also knew I could write it better today. And so, the new, updated cider tasting site … which looks exactly the same on the outside. On the inside, though:

• codebase moved to Github for better version control
• data converted to JSON from XML
• HTML cleanup (indentations, spacing, etc)
• modularized and commented code
• cleaner, faster script execution

That last one I want to talk about for a minute because it goes to show that there are many possible solutions to a given problem, but they aren’t always equal. In this case the old method (which used a lot of jQuery $.find) worked – but it was slow and it was extremely literal-minded: “find this, append it. Find that, append it…” For a project this small that didn’t really affect pageload in terms of usability, but it wasn’t really ideal.

Now, though, the same function which renders the data is using jQuery $.each to iterate over the array of objects that is my dataset and render each table row much faster. Simple, easier to read, much more scalable … and cuts the script execution time down by a factor of eight according to my devtools. I could have gone for a straight-JS foreach or for loop, but since I already made the choice to load jQuery, I thought it was better to keep using it.

Next: extending functionality? I’ve never been really enthusiastic about the tasting notes going invisible on mobile, but I haven’t found an elegant solution to making them visible without making the mobile experience frustrating. Time to experiment.