KBSwings
Wed, Jan 15, 2025
This project, much like my others, is a personal exploration into vanilla JavaScript. I wanted to build a simple, functional application to track my kettlebell swings, and honestly, the Web Platform provided everything I needed.
One interesting aspect of this app is the integration of Chart.js. While the core functionality relies on vanilla JavaScript and localStorage, I opted to use Chart.js for visualizing my progress. Seeing the line graph dip on days I skip workouts provides a surprisingly effective motivational nudge. It’s a simple visual cue that’s helped me stay consistent. That said, the graph currently displays all data, which is less than ideal. I’m planning to refine it by aggregating data weekly or monthly, to provide a clearer overview of trends.
A feature I’m particularly proud of is the data synchronization. Building on my experience with localStorage and a desire to avoid direct file downloads/uploads like in Hypedocs, I implemented a sync up/sync down mechanism. This feature leverages a PHP endpoint and a SQLite database. When I sync up, all my swing data from localStorage is sent to the endpoint, stored in the database, and a unique sync code is returned. I can then use this code on another device or browser to sync down the data. The data is either deleted immediately after a successful sync down or after 24 hours.
This approach allows for seamless data transfer between devices without relying on file exports. I’m considering integrating this sync functionality into Hypedocs as well.
The UI, while minimalist, is more polished than my previous projects. The calendar and list views offer flexible ways to track progress, and the toggle button provides a straightforward way to switch between them. The date-based localStorage keys simplify data retrieval and display.
Another interesting aspect is the dynamic calendar generation. The generateCalendar function efficiently constructs the calendar grid, highlighting the current date and displaying swing counts for each day.
And last, a couple of smaller things I was able to explore here are the use of the Popover API - in this case it’s just a simple tooltip - and CSS scroll behavior. You can see this in action using your up/down arrow keys, your space bar, or your mouse wheel/trackpad. And this got me thinking about possibly creating a CSS-only slide deck. Here’s a quick proof of concept on CodePen that I hope to explore more in-depth soon.
While this project may not have much utility for anyone else, I really dug making it if for no other reason than it got me thinking creatively about aspects like the sync feature and CSS scroll behavior. Nothing ground breaking or truly innovative, but it was fun.
You gotta move…