Cycling route viewer
A hobby project to replace Strava embeds on my personal website
github.com/tomomiq/cycling-ripplet ↗Description
A workflow to create GPX route embeds for cycling trip pages on my website. Each ride is a self-contained HTML file hosted on GitHub Pages and embedded via an iframe.
The code is available on Github.
Intent
I want to replace the Strava embeds because it has a lot of extraneous UI and no way to control them.
Constraint: do it without upgrading my Squarespace plan.
Update: I’ve since moved my site to Astro but continue to use the same iframe embeds.
Workflow
- Export .gpx file from Strava
- Run the script to generate a HTML file
- Push it to a GitHub Page
- Use the iframe code on my website
What it looks like
What I learned
- Separating the planning and building process: I spent time working out the right technical approach and documenting a PRD. A few weeks later, I used that as the starting point for implementation, and made a few changes to the UI and created a publishing workflow once I had a working version that I was happy with. This separation of work / modes felt just right.
- Extending Squarespace: Being on Squarespace is very limiting in terms of extending my website. It’s pretty cool to be able to add snippets of code, even with the constraints of the Personal plan.
- Bypassing Strava: It’s a pity that platforms no longer invest in their HTML widgets… my preference would have been to continue using the Strava widget but it doesn’t get any love (I wouldn’t be surprised if it gets sunset one day) so the do-it-yourself route it is.
- Modular project-building: It was good hygiene to consider this its own project, with its own repo, separate from my website.
- Proactive workflow tooling: I added a script to generate a text file with all of the embed codes. It kicks off once the HTML files are ready, so I could just copy-paste the code once everything was on Github. One less step, and remove the room for any errors.
- Manual operations: For some rides, there is missing mileage noted in the ride description because I’d forgotten to turn on Strava. The km count is not editable on Strava, and I always felt a bit cheated about that :P To cover for this, I added a variable in the HTML file, to which I could manually add the missing km, so that the stat bar in the iframe would be correct.