The Pomodoro Technique is a method to manage work time through work and break intervals. It was developed by Francesco Cirillo in the 1980s. Traditionally, the timer goes through four sessions of work (25 minutes), three short breaks (5 minutes), and one long break (15 minutes). One pomodoro equals one complete work session. After a work session a short break starts, and after four pomodoros are complete, a long break starts. After that, the timer restarts fresh to the beginning with no pomodoros complete, restarting the cycle. Its purpose is to build discipline by enforcing sessions of work with no distractions and breaks to relax before continuing with work.
- Session - Work time. One finished session equals one complete pomodoro.
- Break - Short break before continuing with another session.
- Respite - Long break after four sessions (pomodoros) are complete.
- Play/Pause - Play or pause the timer.
- Stop - Reset the currently selected time (this will not reset any pomodoros).
- Reset - Reset the timer, including all pomodoros.
Change time length in the settings.
- Begin your work session. Focus 100% on the task, try not to get distracted.
- You finished your work session. One pomodoro complete. Relax on your short break.
- Short break over. Repeat steps 1-2 until you are on your fourth work session.
- You are now on your last pomodoro before the long break. Work hard and push through.
- Last pomodoro complete, it's time for the long break. If studying, go over what you learned in your head. Take a walk or sit down, whatever helps you.
- Repeat the process at step 1 until you are done with working.
- Controls
- SPACE - Play/Pause
- S - Stop (current time reset)
- R - Reset (current time & pomodoros reset)
- Time Options
- P - Session
- B - Break
- L - Respite
Install all the required packages:
npm installBasic Express.js server that serves up static files. Run the server with nodemon:
npm run serverIn this folder are several bash scripts for git to speed up committing, pushing, merging, etc. You might find them useful.
This is where all the application development files reside. All these files are streamed to the dist folder with gulp.js. The files here are concatenated and minified; they do include map files. Start up automatic building:
npx gulp watchAny HTML, CSS, or JavaScript file modified in client will now automatically run the default gulp task. Check out all the tasks in the Gulp Tasks section below.
Before adding and committing with git, generate the correct files for a production build:
npx gulp productionIt is similar to npx gulp except it wraps JavaScript files in a self-executing function. This is to prevent polluting the global namespace and save space in the browser.
Run tasks with "npx gulp", e.g. "npx gulp build"- Development
- concat - Concatenate all scripts and stylesheets.
- copy - Copy all needed files.
- build - concat + copy
- cleanAll - Remove all files from dist, excluding .git and CNAME.
- cleanVendor - Remove all files from vendor.
- default - cleanAll + build
- watch - Watch all HTML, CSS, and JavaScript files for changes. On change, runs default.
- Production
- concatProduction - Same as development, except with scripts and vendor scripts wrapped in a self-executing function.
- buildProduction - concatProduction + copy
- production - cleanAll + buildProduction
- Customizable Times - From one minute up to one hundred hours.
- Pre-built Color Themes - Choose from a variety of hand-picked themes.
- Custom Themes - Make a theme with any colors you want!
- Keyboard Shortcuts - For faster use.
- Preferences - Customize the timer in the settings menu.
- Notifications - Get alerted when a time session finishes.
- Local Storage - All preferences are saved locally.
- Express - Simple web server to serve static files.
- Gulp - Streaming build system. Automates concatenating and minifying files.
- Spectrum - Color picker used to make custom themes.
The majority of the application is made in vanilla HTML, CSS, and JavaScript.