Week 848

Week beginning Monday, 14th April 2025.

Experience CS

Chris L and Seb continued to make good progress on customizing the Scratch IDE to improve the user experience, particularly on narrower screens. The immediate goal is to have a sample project we can share with teachers to give them confidence it will be a suitable replacement for the Scratch IDE in Google’s CS First and not suffer from some of the safe-guarding issues in MIT’s Scratch IDE. Wanting to minimize changes to the Scratch source code and the fact that it only seems to have been designed to work on desktop screen widths make this a lot more complicated than it sounds! 🧱

Seb finished up the work that he and I had started last week on isolating our Scratch-related code from the rest of the web app. As Chris R mentioned last week, we’ve separated the code, its packages, and its build steps out into a Rails engine which lives in a sub-directory of the Rails app. This Rails engine can render a single page containing our customized version of the Scratch IDE and the parent app renders this page within an <iframe>. 🪟

There were some thorny issues to overcome, e.g. how to make the assets (i.e. images, etc) provided by the scratch-gui package available at the expected URL path. I suspect Seb now knows more about webpack configuration options than he ever wanted to! One advantage of wrapping the IDE in an iframe is that the “blue screen of death” initialization animation no longer takes over the whole page. I felt bad that I started this work with Seb last week, but left him to deal with the gnarlier bits - thanks, Seb! ❤️

Chris R and I continued work on being able to create a “remix” of an existing public project and save it to your RPF account. In order to do this, we have to hook into scratch-gui both to trigger a “save” and to configure where the Scratch program is saved. We then need to provide API endpoints in the Rails app to handle the requests from scratch-gui. On top of this, we also need to integrate with existing RPF apps and libraries, e.g. a single sign-on service and its client library, and the backend API for RPF’s Code Editor for Education. It feels like we’re pretty close to having it all working! 🤞

Anyway, given the inevitable disruption of the Easter holidays, I’m pleased with how much progress we’ve made. 🚀

Mission Patch

Mission Patch is a long-running company side project, launched in 2019, which was originally built using a combination of Rails, Elm (!) and the AWS CDK. In recent years, Chris L & Chris R (Chris²) have indulged me in using it as a bit of a playground for trying out new technologies and approaches. As such it’s been through a number of re-writes over the years and I’ve been meaning to write all this up, but it’s got to the point where there’s so much I’d want to cover that I keep procrastinating. ⏱️

However, when the three of us met up recently, Chris² encouraged me to focus on writing something about the last big change which involved moving Mission Patch from SvelteKit to “modern” Rails with a particular focus on building a progressively enhanced user interface with Hotwire Stimulus and Turbo Streams. I think this is a good idea and last weekend I started working on it. 💡

I decided I wanted to generate videos (or ideally animated gifs) of the user interface with JavaScript both enabled and disabled. However, I always struggle producing screencasts manually, because I keep making small mistakes and feeling like I need to re-work them. So in classic developer style, rather than crack on with writing something, I decided to procrastinate further and try automating the process. I started off using Playwright which we already use in the project for end-to-end testing, but I found that the quality of the captured video was poor and it was challenging to simulate and display mouse movements, clicks, and other user interactions. 🐭

I then experimented with AppleScript to perform scripted user interactions in combination with the MacOS Screenshot app, but I’ve never really got on with AppleScript and the Screenshot app can’t generate animated GIFs directly. So I decided to try out cliclick, a MacOS CLI tool for emulating mouse and keyboard events in combination with CleanShot X, a screen recording tool recommended by Max Elkins (Senior Designer at RPF). I’m quite pleased with how this is working and hope to make some more progress on actually writing the article soon! 🪶

Improving Rails docs

While Chris R recently experimented with deploying a Rails v8 application to a Digital Ocean droplet using the recommended approach with Kamal, I recently played around with deploying a Rails v8 application to a PaaS, i.e. Render and Heroku. I know the canonical deployment approach is now Kamal, and it’s possible I’m looking back with rose-tinted spectacles, but I was quite disappointed with how awkward it was. 🧐

I’ve been meaning to write this up too (you may detect a recurring theme here!), but I did at least submit a Rails documentation pull request with some learnings I took away from the experience. However, unfortunately after some initial build system problems and an initial flurry of activity (and seeming general approval), it now seems to have fallen into a pull request review void! 😞

Until next time.

– James