In summary, it's a short and direct mention of the four main points of this system: the product, the author, the resources and the project planning and its results.
The product is a system that counts down from a number of minutes specified by the user in the free configuration or uses default minutes. The goal is to facilitate the management of effort and productivity with tracking statistics and flexible configuration.
Based on the Pomofocus website, the system offers specific personalization for the project author.
Designed to be used in the loopback direction of a single host, the system's objective is to provide a simple solution for the requirements.
The requirements are:
- Count down from a selected number of minutes.
- Iterate over iterations separated by short breaks and over cycles by a long break.
- Decide the number of iterations per cycle.
- Decide the number of minutes for short-breaks and for the long-break.
- Access to session statistics.
In these terms, the system is a perfect excuse to practice the implementation of web code based on HTML, CSS, and JavaScript, as well as graphic design and conceptual design.
Antmanzz, that is to say myself who writes this writing, is a junior software developer with a short experience in the development of system software projects. I'm student in Uned, a spanish university whose name is an acronym for National University of Distance Education, in spanish 'Universidad Nacional de Educación a Distancia'.
I was planning to finish my studies the last year, in 2024, but i could not conclude and defend my final degree project. In this situation I have a lot of time until the next call-up date. So, I thought it was a good idea to keep working on different projects, which allow me improve my skills. Besides, the development of the systema is also motioned by the high frequency with which I use the pomodoro technique during my working time.
During the working time, it has been possible to access various bibliographic resources. I would like to highlight the book 'El gran libro de HTML, CSS3 y JavaScript' by J.D Gauchat, third edition, 'Eloquent JavaScript' by Marijn Haverbeke, fourth edition, and the book 'Aprendiendo Git y GitHub' by @midudev, which are titled 'The big book of HTML, CSS3 and JavaScript', 'Eloquent JavaScript' and 'Learning Git and GitHub' in English.
As environment to code the system, I used the Visual Studio Code text editor because it provides me with all tools I need for code languages I was going to use. These are, HTML, CSS and JavaScript. Additionally, it supports Git; the most popular version control system and support to Markdown, language in which this text is written.
The web browser in which the system in its different versions has been tested is Microsoft Edge, and the HTTP server system on which the system is expected to run is Apache Tomcat, because i'm a frequent user of the Java programming language. Although no compatibilty analysis has been made, it's expected that the system, due to its simplicity, will run on other HTTP servers and web browsers. However, it's certain that the web browser must support JavaScript Web Workers API or the app won't be able to perform.
Finally, Three audio tracks with license Common Creative 0 have been used. The tracks were downloaded from the Freesound web (https://freesound.org/), the user who uploaded these tracks is called Rudmer_Rotteveel. You can find de readme and license of these tracks in the audio directory of the project.
The project called 'Chronodoro, mi reloj de pomodoro' is a play on words that merges the term 'Chrono' from the Greek term for 'time' and the suffix 'doro' from the term 'pomodoro' and also from the Greek term for 'gift', the remains is translated to English as 'mi pomodoro watch'. This project was initiated on December 21, 2024 and it was concluded on January 16, 2025. So, the development lasted approximately four weeks, equivalent to one month.
Chronodoro was planned to finish its development on two weeks; however, the development lasted two weeks longer. The plan was based on an agile development process, aiming to satisfied requirements one by one without complex analysis or a deep design. The sequence of step was as follows:
- Build the HTML document following the conceptual map of a pomodoro watch.
- Build the CSS file associated with the HTML document, declaring styles for each concept in it.
- Select a color palette to complete the CSS file and create the website icon logo.
- Build the behaviour web by defining the JavaScript instructions in the JavaScript files.
- Add tracking statistics.
- Add configuration options.
Each step was accompanied by brief studies of the participating technologies and quick investigation of the tecniques needed, thanks to today's advances in AI.
- Improve the component design using the Flexbox model for both desktop and mobile.
- Research and implement a solution for notification features that improve usability.
- Indicate the units of measure for the time statistics.
- Improve the UI design to enhance the user experience.
- Configuration of the countdown with second precision.
- Add a timing block between phases with an option to proceed to the next step.
- Add an option to activate and deactivate the timing block between phases.
- Add options to change the website's color palette theme.
-
1.1.0: Modularization and abstraction to divide the index.js file into the three files: index.js, dispositivo.js and temporizador.js. The last two files are placed in the app.antman.reloj directory, and the first one is placed in the app.antman.chronodoro directory. These changes are made to implement the execution of the countdown in the background by using the Web Workers API. These changes stand out for the absence of notification features. The app can pass to the background and it won't run the audio alarm tracks until it is brought back to the foreground, even though the countdown would remain consistent with real time. While the notification feature is absent, you can run the app on an extended monitor to always listen to the audio alarm tracks at the precise time.
-
1.1.1: Fixed the cycles counter; previously, it counted cycles per accumulation. Also, there are fixed the index name of the issue 1.1.0, which was previously labeled as 1.0.1.