I had once the motivation to create a time calculator in pure JavaScript for myself. This calculator should tell me, from a start and a length input time, the right time to log out from work. That is easy, you say: just add 8 hours to the start and you are good to go. Not really.

What is calculated?

Interesting part from what my application comes from is, that in my old workplace you had to log in into the system, check in and check out.

Here are the steps in details:

• First you boot your system. This can take time, until then you are not checked in. Your system is then ready, you start the browser to log in into the time tracking application. And then you:
• Check-in. At that time, you are given 5 minutes for free, that this should take the boot and login time into account.
• The checkout simply spathe time art the click, no more added time for shutting down the system.

Let’s start from the first point: 5 minutes is a lot of time? - Not for standard HDDs. Add bigger updates until they finish, then good luck with the 5 minutes. Go grab some tee/coffee to start the day. I was lucky and got an SSD. This took less than a minute to boot and ~2 minutes until the check-in application. That was 3 minutes less. Nice run. With updates could be 5.

As mentioned on the check-in: you get 5 minutes added. I was a fast starter and liked the bonus time. What I had always to calculated then: beginning is not 8:00 but 7:55. If the checkout was at 16:00 then you got 5 minutes over, and who wants to work more than it should be?

The last part was troublesome at the beginning: every day you get a 45 minutes break included into your time frame. If you log out at 16:00 then you did not work 8 hours but only 7:15, because the break was stripped from your time. That means if you did not take a break (I almost never did!), you had to stay longer. I hated this the most. Even more funny: if your checkout was less than 6 hours of work, let me say 5:59 hours, then the break was not calculated. From 6 hours on you just worked automatically only 5:15 …

Now asking me why I hated it? I almost never took breaks, ate at the desk, didn’t needed it, still had to stay (felt like another hour) longer! That makes almost 9 hours. Not good for anybodys health. Do not forget to stay in the core time in the office from 9 till 16, and Friday from 9 till 12, there were some mixed calculations with mixed calculated hours every week if I wanted to get off earlier on Friday.

What is calculated now?

• Add 5 minutes at checkin
• Add 45 minutes if longer than 6 hours checked in

That’s it. The time tracking system tells you how much you are over your time and could take off earlier or even days with enough overwork. I took Friday off at 12.

These are the factors. Nothing difficult, right? Ok, how long should I stay if I check-in at 7:48? On Tuesday? I calculated this in my head, good for my brain, until I got lazy, like everybody, obviously.

After that I created this one simple application and it was great. Calculation was fast without errors. And then it happens what always happens: optimisation!

Optimisation

What was something wrong with the application? Nothing! I just did not like the way the code was written, set some new goals for myself, things like: how can I make the code as small as possible (compressed), make the CSS simpler, …?

At the beginning the application was structured as a mix of HTML input fields that were calculated with JavaScript. But because I always had to change some parts and did not want to write all code in multiple files, I just put it all into the JavaScript file and it took less hassle to manage the code.

I first started to look at some JavaScript patterns: standard coding (beginner), prototype, object, functions, self-invoked functions, etc. Then I let it out and at the end of the day(s, weeks) there were multiple scripts for the same functionality.

Lessons learned from it

We jump right to the end, no code shown as it was redone many times and I just wanted to tell you the result.

First: the application as an object can be the smallest of all. The problem was: all functions were short names by hand, you must investigate the comments to find the right variable or function. The more complex the application becomes the harder the code reading gets.

Second: prototype was not the right choice here for this application, still it was fun to learn some more JavaScript.

Third: simple coding pattern looked most of all promising, but I still started from an object. Do not say anything! As this went on, I checked the file size on every version, and that showed me, that this method is not well made, too, because it got bigger and bigger.

Minification to the rescue

I minified the code: objects with short keys were smaller in file size. What do?

To the point that on every version my code had to be invoked by a function I made the simple code version into a self-invoked function and see there to my surprise: the file got much smaller if minified. It was almost at the point of the object. I optimized that code and even started to track the time to make the code run faster as the next goal.

Sometimes it had to end

As I went on in my delusion to make this absurd simple application even better and faster, I lost the most important part of learning something: make it as good as it works, no more no less. Why? Because the application was small, optimizations were insignificant, compared to complex and big ones. I thought I still benefit from that experience.

Then I put it to a stop. I did not refactor it to an awesome, small, super-fast code. No, it went even bigger, it just happened because I found a better way for me to code, and at the end I did not care about size but manageable, controllable code that runs fast!

Now the application is an ugly set of input/select elements, looking at the styles.

After getting out of that company with this sorry state time tracking system I have not used it again.

What I really learned from it

JavaScript and calculation of time and dates. It is not as hard as I thought. Even if you copy and paste code from another source, you get more into the functionality of your application, you learn at the end why somebody did it this way.

And optimization do not really matter in small file size, but performance does. At this small application the performance was not measurable by the eye, and time tracking the application went at 3ms to start, who would give a cow?

What comes next?

Later I created my own password generator on this experience. This one must become a web extension and web application.