I love side projects

I love a side project. A while back I had to figure out how to screenshot a node, and in my most recent side project I’ve got the chance to do some things I knew about but have never used, as well as learning some new things I had never heard of.

My son has recently qualified as a personal trainer so I built him a website. You can see it at https://jordanjohnson.pt/ if you’re interested. Thankfully the design wasn’t left up to me and my friend Thomas worked his magic.

Here’s what I did for the first time:

• How to link to Whatsapp and Messenger conversations. It’s the easiest thing on the list but I didn’t even know it was possible before so happy that people can go from his website to a chat app they’re comfortable in.
• Loading third-party resources with the Intersection Observer API. The ‘Book now’ button on the website opens a Calendly modal interface, and I decided it would be best if Calendly code doesn’t load unless the button is in the visible viewport. I found the API to be intuitive and everything worked on the first try, which is a rarity for JavaScript and me. As it turns out the initial payloads are small and I’d be comfortable with them loading on hover or touchstart in a future enhancement.
• The blue bars and the the bottoms of the hero images have a 2° angle. I fiddled around with clip-path but my calc()s and sums wer getting knotty and buggy, so I searched (duckduckwent?) and found a Stack Overflow answer explaining how to use a CSS mask. Very nifty, and I didn’t know it existed. Last time I heard of masks was when Photoshop was the design tool du jour. I tried to apply 2 masks to the testimonial image and nothing happened, then found mask-composite:intersect on CSS Tricks which applied both. Cool!
• The final thing was the hardest by a country mile. I wanted to put this site on Cloudflare Pages to see how it compares to Netlify, and did so early on when it was just HTML with text content. I was unpleasantly suprised to find out Cloudflare doesn’t have an easy way to put a form on the page and get a notification on each form submission. I had to use this tutorial and now form submissions are going from an HTML form to a Cloudlfare Worker to an Airtable base. The mother and father of all faffs, especially compared to Netlify. However I’m loathe to use some iframe’d service and its mountains of code.

Despite that last point, I still love a side project and if you’re in need of some fun dev and want to try out some interesting techniques to make life easier for the people who use it, I can’t recommend it enough.