hrtzc is a simple webpage to quickly compare different heart rate training zones models.
- experiment with mobile-first page design
- modern web dev tooling instead of dropping a couple of CDN
scripttags
The page is available here. It's built and deployed using GitHub Actions and makes use of GitHub Pages.
Some useful one-liners are available as package scripts; run npm run to see a list.
Built with Chart.js, Bootstrap, and Vite + PurgeCSS.
Some notes on how I arrived at this combination:
- Popularity - I'm not a web developer (and have no interest in becoming one) so I chose Bootstrap and Vite because they are popular and look like will be around for a while. I had an OK time figuring out Bootstrap's mobile-first approach, and I don't have enough experience with web build tools to tell if Vite was the right choice.
- Power and comfort - I would have loved to use this project to learn D3: it's a simple stacked horizontal bar chart and the dataset recalculation is trivial. Still, I felt like I would need to invest a decent chunk of time before I could produce something close to what Chart.js offers out-of-the-box. I instead chose to experiment with another part of my toolbox.
Part of this project was bringing in a build tool (Vite) to try and improve page performance. A couple of metrics were recorded before and after restructuring the project using the Lighthouse Firefox plugin on the GitHub Pages deployment:
| Payload | FCP (mobile) | FCP (desktop) | TBT (mobile) | TBT (desktop) | |
|---|---|---|---|---|---|
| before | 113 KiB | 1.8 s | 0.6 s | 170 ms | 20 ms |
| Vite | 73 KiB | 1.5 s | 0.5 s | 50 ms | 0 ms |
| + PurgeCSS | 60 KiB | 1.3 s | 0.4 s | 10 ms | 0 ms |
However, it turns out there's a lot of building that Vite is not doing -- I achieved an 89% size reduction of the CSS bundle by using PurgeCSS.