TimerX3

TimerX3 is a cooking timer for the modern web.

I take no responsibility for any burned food (or worse 🔥) caused by an application failure 😒

Features

Set up to three timers at the same time, from the same screen
Save presets of timers you use often
Remembers duration of last timer set
Fast to download and use
Works offline
Get notified on timer finish by:
- Visual alarm with a pulsing red color
- Alarm sound
- Window title change
- Desktop notification, when the app is not visible (works in Chrome, Firefox 22+ and Firefox OS)
- Vibration (works in Firefox for Android and Firefox OS)

Why?

Does the world need another timer? Probably not. But my motivation for building this app was to learn what it would be like to not use a framework like jQuery and instead use plain JavaScript. Also to learn about some new web technologies and tools used by this app.

Web Standards

Here is a list of web standards used by the app and supported by modern web browsers:

HTML5
- Offline Web applications: used to make the app work offline
- Semantic HTML elements, such as <header>
- Audio element: used for the alarm sound
CSS
- CSS Transforms: used to open the side panel, provides better performance on mobile
- CSS Animations: used for the pulse animation
- Box-sizing: used for implementing the responsive layout
Web Storage: used for saving duration of last set timer and for storing the presets
Web Notifications: used for showing the desktop notifications
Push API: for using browser back button to close side panel
Vibration API: used for vibrating on mobile devices
SVG: used for the side panel toggle button
Page Visibility: used for determining if app is visible and not show notifications
Touch Events: used for faster responsiveness on touch devices compared with normal click events. Also for the swipe gesture to reveal the side panel
Web Application Manifest Format and Management APIs: used for installing site as an app

Tools

Yeoman: provided the initial app scaffold
Grunt: used for building, previewing, deploying the app and other tasks
Bower: used for installing the third-party libraries
SASS + Compass: used for making CSS authoring easier

Libs

The following are the only JavaScript libraries I used, mainly because it would be quite complicated to do it myself. You can also see what I used in the component.json file.

normalize.scss: used for normalizing browser default styles
hammer.js: used for the tap and swipe touch gestures
page.js: used for implementing routing

How to get it

The usual way of the web

Just visit http://alefteris.github.io/timerx3/ in your browser. Bookmark it if you like it.

Install it as an app

To install it as an app, go to the app settings in the side panel. This is supported in desktop Chrome and Firefox.

Install it from an web app store

Install it as an app from the Firefox Marketplace or the Chrome Web Store.

Browser support

The list of browsers I have tested with are:

Chrome
Firefox
Firefox OS
Firefox for Android
Android 4.1 browser

For the last two browsers on Android, when the app goes into the background, the timers stop. Notifications also do not work on Android. So, there is little point in running the app in this platform.

Build Instructions

You will need to have Node.js installed in your system.

npm install -g grunt-cli bower
git clone git://github.com/alefteris/timerx3.git
cd timerx3
npm install
bower install
grunt server

erinther / timerx3