Redesign and rewrite of playtest printer

Years ago, when the pandemic was boring me out of my mind, I created a small one-page web app as part of my website. It allowed dragging images from computer to the web page and when the page was printed out, it would print the images in such size that when cut, they’d fit right into a standard size card sleeve.

It’s a good example of one of my home-cooked software that I built for myself. It’s original design, that lasted unchanged for years, wasn’t gonna win any design awards. Here’s what it looked like for a long time:

This spring, I got an idea to add a new functionality to it: a way to add multiple cards at once. I designed it to work based on a filename prefix and added a checkbox to turn the feature on/off. Once I got into writing some code for it, a few days later I decided to add another feature: double clicking to remove a card.

And as so often happens, when you get back to an old project, you start to get more new ideas.

I decided to do a complete redesign and rewrite and graduate the project from a subpage on the website to its own subdomain.

There were a couple of things I wanted to change. First off, I wanted to get rid of the purple drop zone and be able to drag and drop images anywhere on the page. And since I’m the only user, I wanted to simplify the design further and have a simple options bar at the top and get rid of the heading and instructions from the main UI.

I added a help button on the top right that reveals a panel of help text.

Thanks to this Stack Overflow answer, I was able to adjust the code to accept drops anywhere on the page. It’s quite genius: there’s a hidden overlay that gets stretched out to the entire page when dragenter event triggers (and hides it again on dragleave). I adjusted it to also hide when the drop event triggers.

As part of the promotion to its own subdomain, I also extracted the project to its own repository and published the code at https://github.com/hamatti/playtest-printer.

It’s been fun getting back to the project these past few weeks, implementing new features and redesigning the UX. One of the best parts of hobby projects is that you don’t have to justify rewrites or redesigns that don’t offer any new functionality. You can do it just because you enjoy it.