Tiny Project VIII: Time Keeper
Never miss a meeting across time zones.
Time Keeper is a powerful and user-friendly Chrome extension designed to help you manage time across multiple time zones effortlessly. Whether you’re a global professional (remote worker, freelancer, digital nomad, etc.), a frequent traveller, or simply someone who needs to keep track of time in different parts of the world, Time Keeper has got you covered.
Features
- Add and display clocks for any time zone around the world.
- Automatically detects and displays your current local time and date.
- Easily add or remove world clocks as needed.
- Continues to function even when temporarily offline.
Usage
- Install Time Keeper on the Chrome web store.
- Click on the Time Keeper icon in your Chrome toolbar to open the extension.
- Your local time, date, and location will be displayed at the top.
- Use the drop-down menu to select a country/time zone you want to add.
- Click “Add Timezone” to add the selected world clock to your display.
- To remove a world clock, simply click the trash icon next to it.
Demo
I recorded a short video to show how the Time Keeper extension works.
Design
I designed the UI to display the user’s local time, the current date, and their timezone. I also added a way for users to add new clocks for different countries and time zones.
Once added, each clock shows the country name, current time, and date, along with a remove icon to delete it from the list.
Development
I built the extension using HTML, CSS, and JavaScript, like all the previous ones I have built, and used the WorldTimeAPI to fetch accurate time data for different time zones.
When the extension starts, it sets up the user’s local clock, tries to get their location, populates the country dropdown, and loads any previously saved clocks.
Challenges
The first challenge I encountered was time accuracy. Initially, the clocks would drift over time, becoming increasingly inaccurate. I found a way to implement a periodic re-syncing mechanism that updates the time data from the API every hour to ensure long-term accuracy.
The second challenge was finding and detecting the user’s current location.
I used the BigDataCloud API for reverse geocoding, which allows the extension to detect accurate user location information using their longitude and latitude coordinates provided by Chrome’s geolocation permission.
The third challenge was offline functionality. The extension would fail to function when the internet connection was lost. I got a suggestion to introduce a caching system that stores the last known accurate time data. This allows the extension to continue functioning even when temporarily offline.
I encountered another challenge when dealing with incrementing numbers, specifically in displaying time counting up in seconds. I noticed that while the seconds were counting correctly, the entire date display was moving and flickering. Initially, I overlooked this issue, but unexpectedly, I stumbled upon the solution while browsing TikTok. I learned that applying the CSS propertyfont-variant-numeric: tabular-nums; would force all digits to have the same width, effectively preventing them from shifting positions. This simple adjustment resolved the flickering problem entirely.
Permissions
This extension uses two permissions: geolocation and storage.
Geolocation is used to automatically detect your current location and time zone, ensuring that your local time is always accurate, regardless of where you are.
The storage permission allows the extension to save your selected world clocks and remember your chosen time zones, so you don’t have to re-add them every time you open the extension.
It’s important to note that:
- Your location data is only used within the extension to display your local time and is never stored or shared externally.
- All time data is stored locally on your device using Chrome’s secure storage API.
Installation
I submitted the extension for review, and it has been published publicly, so you can install Time Keeper today and add it to your Chrome browser.
Hi, thanks for reading this piece! I’m Soliudeen Ogunsola. If you find this article interesting and want to connect with me, you can follow me on X (formerly known as Twitter) or check me out on LinkedIn.
