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.
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
Dependencies are voluntarily restricted to:
cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.jsfor easy DOM maniupation
fonts.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
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