In this short and absolutely-not-technical post, I'll take a look at the choice of software used to create AnotherPomodoro. No code here, it's more about the choices I made for the technology stack and a bit of talk about static sites being capable of doing a lot.
So I knew I wanted to build a Pomodoro timer (here's why I decided to do that). The question was: where do I distribute the app? Do I build a mobile app or a desktop app? Do I really need to build something that users should install at all?
Web page it is, then. But I did not want to write HTML files because as the app would get bigger, so would its maintenance become more difficult.
Before starting out with AnotherPomodoro I've found that there's something that makes it even easier to build a Vue app: Nuxt.js.
Nuxt allows me to create websites that just work: no need to set up things like a router (what to do when the user types in
That's what I wanted, so I focused on building a fully static website. I probably cannot list all the benefits of using something like Nuxt.js and it might not be too interesting either: they are most noticeable to me, a developer. Among a lot of advantages, I can easily separate my app into components - like how the three styles of timers are just different components: when you switch between them, they get swapped. This makes it really easy to build more stuff into the app without it getting too bloated (like having thousands of lines of code in a single file).
Right, web technologies are cool. Nuxt.js is really cool. How do I make it even easier to develop a web app? Well, let's get ourselves a UI library first to create a beautiful app quickly!
At first, I tried Vuetify. I loved it because it allowed me to build an app without having to know how to style stuff and program things like a modal (dialog) window. I just wrote
v-dialog and I had a modal window with beautiful material design looks.
In the end, I felt that it slowed the app down and without effort, the whole site started to look really generic. I then decided to switch to Tailwind CSS (kind of the opposite of what Vuetify provides) and refreshed the app's looks with a hand-crafted design. There were no ready-made components any more but it's really easy to create whatever you want using Tailwind. I just write
p-4 border border-gray-200 shadow and I have a box that now looks like a card: it has padding inside it, a grey border and a shadow. Awesome!
Later on, some more plug-ins were added to the site: I needed an app that can be translated into different languages (thanks nuxt-i18n and vue-i18n!), I wanted it to save the settings so when the user comes back they are reloaded (thanks vuex-persistedstate!), I did not want to write my own date and time formatting functions (thanks Day.js!) and so on. You can find the full list of modules I used on the project's GitHub page! There's a lot and they all helped make AnotherPomodoro what it is now.
Once the app was sort-of ready, I needed a place where I could host it so that it has a URL address and anyone can access it without having to execute commands on their computers. Normally one would say that you cannot host your website without paying for a hosting service. Sure, when you want to build an app with a database and extra logic and authentication (register and log in) - anything that requires some extra work on the server's side - that's not necessarily free. Or if it is free, you'd soon reach the free tier's limits, anyway.
AnotherPomodoro is equipped with features that one could easily say would require a "proper" server: storing your settings and tasks, for example. Thanks to frameworks like Nuxt.js and their static site generation functionality, this can be avoided in a lot of cases. You can even build a blog or a news site with static site generation! Since there's no authentication (you edit the code of your site on your machine, not the content in some database on the internet) there's also a lot less space for attacks. Just be sure to protect the source code and your materials properly.
Static site generation is not some universal magic wand to avoid databases and more complex servers, though. Since no data is stored on servers, AnotherPomodoro is not able to synchronize your settings and tasks across your devices: if your browser does that for you, all the better. There's no way to create leaderboards, either. In fact, sharing any user-generated content (think social media posts, for example) through a static app is without any supporting server is (mostly) impossible, if not tricky. To me, these things were never really important, anyway. I am willing to spend 30 seconds to configure the app and I don't think that Pomodoro apps need leaderboards. I can build a statistics module into the app, though 🙂
The key is to recognize when the features you want in your app actually might not require more than what a static website can provide. It might be tempting to include a login feature just to share data across devices but in some cases that might be overkill. In AnotherPomodoro's case, a quick setup page is being made to set the app up for first use even quicker so users will not need to delve into the settings that much. This also helps avoid having to sync settings across multiple browsers.
The app's source code (along with more technical information) is available at the project's GitHub page.
Free and open-source Pomodoro application, right in your browser.
What is it?
AnotherPomodoro is a very creatively named Pomodoro timer application running in the browser. It helps you manage your time so that you can spend more time doing work in exchange for time spent on watching videos of cute cats
Quickstart: your schedule
When working with AnotherPomodoro, you'll be moving between three types of sections:
▶Work. Do what you gotta do.
⏸(Short) Pause. Take a short rest, stand up from your computer and drink some water.
⏸Long pause. Having worked some time now, take a longer break. You can grab a cup of coffee, watch some memes and scroll social media.
Typically, every third break will be a long one. With the default settings that means:
- 25 minutes of work
- 5 minutes short pause
- 25 minutes of work
- 5 minutes short pause
Thanks for reading this little snippet of the making of AnotherPomodoro. If you haven't yet, check out the app at https://another-pomodoro.netlify.app!
This blog post was originally shared on my Buy Me a Coffee page.