I made a fun hack for importing images. I'm using (part) of the Hotwire stack for the dynamic portions of Tanzawa. Most dynamic web applications today use client side rendering, which means the server sends a json data structure and your browser has code/templates/logic to instruct it how to turn it into html for display. Hotwire is "html over the wire", so all of your logic and rendering happens on the server and the browser just displays the result.

APIs traditionally return JSON. The image import api I wrote about yesterday also returned json, because that's what apis do. I was thinking the Javascript I need to write to update the page after an element has been imported when it hit me – if each photo in the list is wrapped in a turbo-frame, my api can return html, and all of my logic and rendering is in one place on the server. Perfect!

My plan was to then just write some Javascript that would traverse my list of images and call the api one by one. Then take the html response and replace the existing item.  But then I noticed that Turbo frames can have a source url i.e. I could put my import api url as the source for the frame and Turbo would automatically call it for me.

Turbo also support lazy loading. Which means that it's not going to load the frame until it shows up on the page. Which means I can import all of my images by just scrolling down the page.

So rather than have a bunch of Javascript to control a queue to make an api call to manually modify some html/css on the front end, I just have a list of images that you scroll down and each call is automatically made with the results are automatically updated on the page. Simple is best.