The Time Keeper App

time keeper app - main screen

The main screen of Time Keeper

A few weeks ago I published the first version of Time Keeper for OSX, a time tracking desktop application written in Vanilla JavaScript. Yes, a desktop application written in Vanilla JavaScript is actually possible these days!

I chose to write it in JavaScript because building a desktop application was not the goal. The goal was to build an actual JavaScript application that I could make use of, on a daily basis. The fact that I wrote it as a desktop application was purely incidental to the fact that I had discovered NW.js (previously known as node-webkit) a few months before I started to write it. Without getting into any details about NW.js, let’s say that it allows you to write create desktop applications written in JavaScript, making use of Node.js modules, and calling them from the DOM of your application, just like in a web browser.

Diving deep into JavaScript

The reason why I wanted to write a JavaScript application was simple: I wanted to know the language better. I’ve already written quite some JavaScript and jQuery as part of my job and in some side projects, but coming from a background of PHP and mostly Java, I didn’t quite understand several aspects and nuances of the language, and often felt a bit lost when reading some online discussions, or when playing with certain frameworks, like AngularJS. Not because I didn’t understand or know how to do something, but rather, because I didn’t really know what was going under the hood, which made me rather uncomfortable.

So, I decided to start by grabbing some books to address that. Not just any book that explained how to do things. I was looking for something that also went into the inner details and nuances of the language. Something that explained not only how each mechanism works, but also why, as well as how and when to use each of them in the most effective way. I decided to give the You Don’t Know JS Series a try, and I think it was probably the best choice I could have made. Having read the first three books while I was writing the Time Keeper app, I can only recommend them to any dev that wants to actually understand JavaScript, beyond the occasional writing of some jQuery lines here and there.

Roadmap for the App

At the moment, Time Keeper (very inspired by Toggl Desktop, by the way) does something very simple. It lets you track the time spent on your daily tasks, be it on side projects, job work, or anything you want to consider a “task”. You can stop and resume work on time entries, and the app will automatically save to an internal database the total time spent on each task or entry, to let you review it at any point in the future.

I have a lot of ideas for future versions, some I’ll probably implement, and some others that might never happen. Since it’s a side project done mostly for the purpose of gaining a better knowledge and proficiency with JavaScript, there isn’t a clear roadmap for it, although I know I really want to add some other features to it, the most immediate ones being:

  1. Not a feature in itself, but a couple of code files need some refactor and clean up!
  2. More metadata to time entries, so that they can be attached to Projects and Clients.
  3. Redmine integration, so that certain time entries can be pushed directly to redmine. Handy to log the time spent in work-related tasks!
  4. Ability to automatically detect when a new version of the app is out, and update it.

There are some others, but those will get done mostly as I go throughout the rest of the YDKJS series books, and I don’t really have a timeline for them. However, if you fancy giving it a shot and have any suggestions, you’re welcome to open an issue in github.

Project page in github:

First release:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">