TL;DR - This pomodoro timer uses colors from Green to Black to tell you that time flies.
My friend @Julien_Mottet told me he would like a tool to help him focus on his work and give him very short deadlines to commit to. But he didn’t want an obnoxious countdown timer, too much distracting.
I decided to build it and it took me only 2 hours to get it live in “production”. At zero cost. Without any sysadmin work.
Idea
The Pomodoro Technique says you should work in batches of 25 minutes, and then take a 5 minutes break. The idea is to get a visual feedback of where we are in this 25-minute interval with color. I chose 6 colors from Flat UI Colors, Emerald, Peter River, Sun Flower, Pumpkin, Pomegranate and Black.
Having those, we want to use Emerald for the first half of 25 minutes, then Peter River for the first half of the remaining, etc… We should see the current color twice as less time than the color before. The last 45 seconds should be black.
One HTML file app
The app is a simple HTML (ssaunier/colortimer on GitHub), with some javascript to handle the dynamic change of background colors.
Dependencies are voluntarily restricted to:
cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.jsfor easy DOM maniupationfonts.googleapis.com/css?family=Lato:100for pretty fonts :)
I also implemented a simple feature: matching the favicon color to the body background. This is a pattern we see more and more as it gives you feedback of a tab status without focusing on this particular tab. Buffer does that using tommoor/tinycon.
var canvas = document.createElement("canvas");
var size = 16 * (window.devicePixelRatio || 1);
canvas.width = size;
canvas.height = size;
var context = canvas.getContext("2d");
context.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
context.fillStyle = $('body').css('background-color');
context.fill();
// Having in <head />: <link id="favicon" href="" rel="icon" type="image/x-icon">
$('#favicon').attr('href', canvas.toDataURL(0)).remove().appendTo('head');
Please note that the app is fully responsive thanks to the use of vh units.
Hosting
Github Pages is a great hosting solution for
these little hacks. Just create a gh-pages branch from master, and push it.
Keeping it in sync with master will be equivalent to deploying a new version.
$ git checkout master
$ git checkout -b gh-pages
$ git push origin gh-pages
This way you get a nice github.io or use your own CNAME.
Try it here:
sebastien.saunier.me/colortimer !