So, coming back to my GPX map, this evening I had some free time to integrate lazy-loading using Stimulus-Use useIntersection mixin, and it seems to work great. I’ll test this functionality in the coming days, and hopefully, go for another long walk and try out the Open GPX Tracker.
So here it is, GPX route interactive visualization! There are still some things to be implemented like lazy loading, activity type, and CMS integration but I’m happy with the early result. So, I ended up using the Leaflet and Leaflet GPX plugin which works great out-of-the-box, as soon as I can I’ll test out the Open GPX Tracker which should allow me to easily track and download my …
Show moreMeanwhile, for tracking itself I found Open GPX Tracker for iOS instead of using Strava, which is a free app that does everything I need.
Actually, after some lurking around the internet I found this interesting Leaflet plugin that parses the GPX data for displaying interactive maps, it’s exactly what I had in my mind. I also found this GPXParser.js library which might be useful… I’ll try to build a simple prototype and if it’s something that could work for this section.
Show moreI tracked today’s walk with Strava and thought about adding a map with a route to my status posts using GPX data which would make a much nicer UX than sharing a photo, but unfortunately, Strava lets you export data only from their website which makes it a little bit arduous. And TinaCMS doesn’t let you upload *.gpx files making it even more arduous. If I find solutions to these …
Show moreA much-needed Sunday-long walk! I walked 8.4km, probably the most I have done since the start of this year, and finished the last fraction of the router with a small run and a few squats.
I tried uploading multiple images from my iPhone but apparently, there is a bug in TinaCMS that rotates every image to the left. It works correctly only from a PC.
Testing a status post with an image upload.
Another status post with a simple code example in JavaScript and CSS:
const sayHello = (name) => {
return `Hi ${name}!`;
};
.heading {
text-transform: uppercase;
text-shadow: #FC0 1px 0 10px;
font-size: 22px;
}
Another status post using TinaCMS. Had some problems with the date field, should work now.