Bradley Burgess
bradley-burgess.com
Tech Stack
- html
- sass
- javascript
- eleventy
- node
- docker
- postgres
- python
Lighthouse Scores
Project story
I've always loved the internet. I can remember the moment I fell in love with it — watching the scene in the original Mission Impossible movie when Ethan Hunt (Tom Cruise) is sending an email to Max (Vanessa Redgrave) in his hotel room. Such a simple thing in today's world, yet it blew my mind back then that that was possible.
Since then I've always tinkered with web technologies, and my personal site has taken many forms over the years. But I am most happy with this iteration. I wanted to create an online home that represents all my interests — as a musician, web developer, tinkerer, etc. — where people can come to find music but also learn about my web development journey, and where folks interested in my dev projects could hear a little Bach as well.
I wanted a clean, modern, sophisticated design, but that is also inviting. The emphasis is on the content, which is also why I've spent a good deal of time making sure the performance is lightning fast.
I also wanted to have everything in one place. I was using Gumroad to sell some scores, but I wanted the new site to have everything right there.
Tech decisions
Frontend
I spent a long time weighing different options for the frontend, and I ended up going with a static frontend built with Eleventy. I wanted to use as little Javascript as possible, as to make it perform well under any condition.
The real challenge was the shop. It definitely would have been easier to go all-in with Javascript — something like Next.js — and perhaps that would have been a better choice. But I also realized that, realistically, the e-commerce part of the site wasn't the main focus. I managed to get the shop working fully-featured without relying on Javascript at all for the "Buy Now" links — the only caveat being that you need Javascript for using the cart functionality.
I also created some Web Components / Custom Elements for the media players on the music page. They are progressively enhanced, and allow for the playlist functionality and "Now Playing" widget. Without Javascript, they operate as regular hyperlinks.
Backend
The backend is a Node.js / Express server wtih Postgres that's managed in Docker containers. I produce all the scores with Lilypond. I wrote an internal Python CLI to generate the pdfs programatically, create the sample images (with "sample copy" watermark), upload them to my self-hosted S3 storage, and sync with the Stripe API.
After a successful purchase, the scores are watermarked with the buyer's information for licensing, before being uploaded to my S3 storage. Presigned urls are then generated and sent with SendGrid. I use PostgreSQL to maintain my own records of purchases and also to log submissions from the contact page form — just in case something goes wrong with the transactional emails.
I also manage DB backups using a crontab
bed Python script.