Creating a Creator: English Heritage Roman Face Pot Creator
Remit: The Roman Face Pot Creator should feel engaging from the moment it is first interacted with, and certainly shouldn’t appear daunting or overwhelming. These points must apply to users of all demographics and technical abilities. This, of course, is in sharp contrast to creative industry software products, such as Adobe Photoshop, which takes years to master and reach the point where you'd be proud to share your creation with the open web.
Phew. Technical challenges over? Certainly not.
Transforming elements
Bounding box UI example
Bearing the most resemblance to other digital editors — including the aforementioned industry behemoth — would be the "bounding box". This is the UI box indicating "control" over a visual element, inferring freedom of movement, rotate, scale, to name a few.
We searched, compared, and decided upon the promising React-Moveable library. On the surface, this was great and allowed for multiple transformation and selection functionalities and, just as importantly, all capabilities were "opt-in", allowing us to remain simple by default and add only what was necessary.
Barring some style override roughness and other bespoke state-related workarounds, everyone was very impressed by the library. Being such a crucial aspect of the editing experience it got the project off to a great start.
Next, we needed something to play around with in the editor.
Handling dozens of assets efficiently
Example from the Vite website, on Glob Imports
We knew early on that we only intended to provide a limited number of assets for users to pick from and apply to their respective canvas. This was a fortunate opportunity to flex another tool we opted to use for the project, called Vite — a lightning-fast development server with great out-of-the-box features, that enables developers to move faster than ever before.
Specifically, the feature I’m referring to is called "glob imports", which allows us to pull in folders of assets all at once, as long as the file path matches our pass "glob pattern" and the imports stay up-to-date after changes/additions to said asset folder. This is opposed to pulling in assets one by one as named imports. The assets are also loaded async by default, meaning users don’t download anything which isn’t needed, leading to an improved user experience.
Awesome. We could now load and arrange fun graphic elements on our canvas. Saving them should be a breeze, right? Wrong.
Capturing designs
To our disbelief, the most common way to take a snapshot of an area of the browser (we went with a library called "dom-to-image"), which under the hood renders everything to an HTML Canvas, doesn’t support some modern CSS features and masking techniques. This effectively meant some of the design was missing in the output, and elements were "bleeding" outside of the face pot container!
With progress firmly halted, we had to scramble for workarounds.
Multiple heartaches later, we concluded the surefire solution was to simply make cutouts for the asset backgrounds for each pot. Each background, for each pot. Certainly not ideal, but it had to be done. But wait, now things weren’t capturing in the Safari browser?! Oh, my achy-breaky heart.
With heads in our hands, we read through the library’s Github issues forums to find a user who noted that twice calling the function that captures the image makes it work in Safari?! To all manners of logic and code, this made no sense at all. It simply shouldn’t be the case. Nonetheless, we weren’t going to complain, because now we finally had a way for all users to capture their amazing creations.
So, what’s the deal with users uploading their face pots?
Content management
Thankfully, we’ll end by talking about another of the platforms/tools which eased the project along. We opted to use Sanity for content management. Sanity offers a rich and flexible dashboard experience called "Sanity Studio", built atop React (which we already knew), so things could be customised to our heart's content. To summarise our experience using it:
- Simple setup
- Reasonable pricing
- Auto-scaling
- Great docs
- Zero hosting necessary on our end
Moreover, since we’re allowing for people to upload all manners of imagery, we needed to implement some lightweight moderation into the platform. Within the Face Pots gallery view, users have the option of marking a face pot as "inappropriate", which’ll then be flagged in Sanity Studio and ultimately show up in a filtered list. In this view admins get to review and remove if they see fit. Great!
All in all, building the Roman Face Pot Creator taught us many things, but we come away happy that we built something that's easy to have fun with — a job well done in our book. It certainly brings a smile every time we visit the gallery to see what weird and wonderful things people have created!
Try it out yourself: https://roman-face-pots.english-heritage.org.uk/
