Demo

Pomodoro Technique

This is a time managemnt technique, which use a timer to break down your work into intervals of N minutes, take a short break(usually a few minutes) after each interval. I think this is good technique, because it make you think about what you going to do, and you can also measure yourself(to be able to improve something, most of the time it will require to measurement or quantify the things first), so you know more about yourself and make improvment. you can read more about it at Pomodoro Technique

Homemade Timer

It sounds very easy to implement a timer, All you need to do

  1. Set a time.
  2. Count it.
  3. Send notificaton when its finished.

so I set out to make one myself that will works in Browser. It turns out to be taken longer than I thought to implement, but as you can see from the demo, its able to set a time, start, pause and clear the timer, play a sounds and desktop notificaton when its finished.

To make it more productive and coming from Vim, I also made Shortcut keys(just press the following key on the page)

  • s - Start timer
  • p - Pause timer
  • c - Clear timer
  • Up arrow key - Increase timer by 1 minute
  • down arrow key - Decrease timer by 1 minute

Its also possible to set timer by url hash e.g adding #10 to the end of the url will set a 10 minutes timer.

Problems and Solutions

The timer seems to be slower when the tab is not focus, it seems really weird at first, because the code is correct and its runs fine when I lookiing at it.

After some search on Internet, it turns out Browsers slow on the execution of code in setInterval when the tab is not in foucs, which make sense (why should browser execute code when user is not looking at it).

The first solution is to make a web worker to do the counting, because browsers doesn’t impose timming restrictions on web works, now the main javascript will send message to the web worker and then received state/tick changes from web worker, so it can update the timer element on the page.

It works fine after I put all the code into web worker, but one day a friend of mine was trying it out in Safari and it didn’t work.

Then the improved soltion is make the timer use the clock on the computer when the tab is not focus, when the tab is focus, it will restore the countdown timer and use that instead. This turns out to be a good solution and it works on Chrome and Safari!

Things learned

I had fun and learned something, which is the most important thing. Here are the things I learned:

  • Timming is very important
  • Should try to time most of things, so it give you an idea how long it will take
  • Timer will remind you not to off task like wikipedia click hole
  • Browsers will slower down setInterval function when the tab is not active
  • Browser web worker