Vanilla javascript and CSS with no 3rd party libraries (except Maps).
The site is designed to be as small as possible so it will load quickly and smoothly on even the shittiest internet connections. You only download 60kb of data on page load (yes, including fonts).
Using MapboxGL JS to display some shmancy vector maps with my Strava data for "fun" visualisations of my one and only hobby.
Server
python3 -m http.server
Styles
sass --watch scss/main.scss:css/style.min.css --style compressed
Scripts
terser js/photos.js js/map.js js/bucket.js js/script.js --source-map -m -o js/script.terser.js
Things I used during the development process.
- svgo-cli - svg optimisation
- sqip - svg based polygonal placeholders for photos
- Clippy - CSS
clip-pathplayground - Rides scraped via the Strava API.
- Encoded polyline algorithm to reduce size of all coordinates by over 95%.
- Sqoosh - A better png compressor to strip unused colours out of images
- Easings
SASS source files in the scss directory. All JS files in the js directory, then combined and minified for production.
Map related functions are in js/maps.js but the request to get latest versions of MapboxGL from the CDN is in js/scriptj.s.