Dynamic Squarespace elements without Javascript
Arielle asked me to write a program for her the other day. Something that would embed images of the books she’s marked as “currently reading” on Goodreads in her website. Something like this:
Shouldn't be an issue, I thought, nothing a little Javascript can’t accomplish. There is one issue though. Her website is hosted by Squarespace and Squarespace doesn’t let users use Javascript. Not unless they pay an extra $7 per month for the business plan. It doesn’t let users use the <iframe> tag to embed other websites in their websites either. There go plans A and B. How can we do this statically? What if we just pointed her website at some known image URLs and some other program changed the contents of those URLs behind the scenes?
The silliest way to save $7 per month
This was my initial design. I would write a script that runs every day and does a few things:
- Fetches her currently reading list from Goodreads
- Fetches high resolution covers for all of the books in the list
- Uploads those images to known URLs on an image hosting site
From there all her website needs to do is point to those known URLs. When the images are updated, her website will update too. Unfortunately plan C quickly ran aground as well: I couldn’t find an image host that will let you replace images at known URLs.
My first thought for image hosting was Imgur. Imgur has a nice API and I’m not worried about it disappearing tomorrow. It’s easy to upload images programmatically through the API, but as far as I can tell there’s no way to upload a new image at an existing URL. You can only upload images to new URLs. This makes sense – you wouldn’t want to save a link to an image you found online only to revisit it later and find it’s been replaced with something vile – but it doesn’t work for my purposes.
Enter Git
I am not a very adept web programmer. I’m comfortable admitting that. I have spent my career thus far working in videogames and dev tools and backend services. I have dabbled, don’t get me wrong. I have a personal website, a Wordle variant, a blog/newsletter, and some other random experiments. I love the web. I love to buy domain names and imagine what might live behind them. Still, I do not consider myself a web programmer, so when I work on web stuff I tend to fall back on the old tools I’ve been using for years. Like Github Pages.
Github Pages is a feature of Github, where you can turn any repository into a website for free. I wanted a place to store images with known URLs, so why not Github Pages? One reason, and I don’t really want to get into the details here but you can look it up if you’re curious, is that you aren’t really supposed to store images in git. Especially images that are going to change often. Storing images can quickly balloon a git repository to unmanageable sizes, and Github has a limit of 2GB per repository.
I did the math and it turned out that if I went down this path Arielle could add around 32,000 books to her currently reading list before Github gets mad at me. Sounds reasonable enough. Here was the new model of the system:
After hooking my script up to run every day through one of the major cloud providers, I could see the finish line! We embedded the images in her website and they looked good!
But there was one more issue: what to do with the books Arielle is not currently reading.
Single white pixels
Her website points to known URLs. I want there to be enough URLs to accommodate lots of books she might read simultaneously. Sometimes she won’t be reading that many books. If she’s reading 3 books at a given time, and I accommodate for up to 10, what do I do with books 4 through 10?
After trying some more clever ideas that didn’t work, I decided to just replace those images with single white pixels (matching the color of the background of her website). It’s a hack, but it works! You’d only realize they are there if you highlight the element:
So now it’s a little easter egg :)
My script for doing all of this is pretty messy, so I haven’t published it anywhere. If you’re interested in doing a similar thing, please let me know! I’m happy to clean it up and share if other people would find it useful.