Time Tracking Like There Is No Tomorrow (with Javascript and HTML5)

A few weeks ago I found out the awesome time tracking setup that Sacha Chua has in her homepage. Although I'm a regular at her blog and I follow her RSS feed, I had not seen it "live" yet. My inner geek yelled "gimme gimme" and I asked her what mobile software is she using for time tracking. Sadly (well, sadly), it is Android only app. Oh well. I don't want another device. So how can I track my time always, when the only thing I have always with me is either an iPad Touch or an iPad?

There is a problem with the App Store. Usually, as the advertisement says there's an app for that. The problem is that I'm very picky. I want an app that does exactly this and that, but I don't care about this other fluff or this nice buzzword.

I asked myself what I wanted for a time tracking app. In the end, I want just one thing: timestamps and subjects. Nothing else. Something that may look like:
20111105 2103 2125 blog

Simple, isn't it?
Date | start time | end time| subject

I don't need graphing, or aggregating, or Dropbox syncing, or any other such thing in my iPod Touch. I don't even need length, because this can be recomputed later. I can do all these things far more effectively with Python and R and/or Google Fusion tables in my computer, for example. I could even do it with Python and Gnuplot, or if I was truly desperate, awk and Gnuplot.

Now, the funny thing is that even if I don't have a developer account with Apple, or iOS development knowledge (yet), there's a quick way to create a program that does exactly this for my iDevices (in fact, for almost any device with a browser).

HTML5+Javascript (using localStorage and cache mode). Simple, isn't it? Now I have a small app to track my time in my iPod Touch. Just a few lines of Javascript and a few buttons:
  • A button to timestamp, press it again to end the timestamp
  • A button to dump all the data from localStorage and show on screen
  • A button to clear the data from localStorage
  • A button to mail the data
Nothing else. Nothing more.

Each time the timestamp button is pressed, a nicely formatted string gets saved into localStorage, making sure everything works even when I lose the local cache copy due to refreshes. The dump data button is to know what I have already logged, before mailing. And of course, even if 5MB is quite a lot, I don't want to fill it so I need to clean up when I send.

For now, I need to refactor the code before posting it. I finished it in two batches of 20 minutes, and in the second I gave up on refactoring, and clean a little the functionality. But it's simple and it works, I have already tracked more than a week of data. Now I only need to find the time to write the analysing code. So far I have a Python function to generate the spans from the time stamps, but I'm still not sure how I want to analyse everything. If I want to generate aggregate data from Python (I'm more fluent) or in R (more versatile, and I will do the graphing here).
Written by Ruben Berenguel