Binary Calculator

Uli Troyo

To make the most of my background as a digital illustrator, I've been playing around with the idea of using SVG to make GUIs for web-based JavaScript apps. This binary calculator is a little prototype for what I had in mind: an inline SVG with attached JavaScript event listeners and an internal state machine engine to handle state and logic. The app can handle both mouse and keyboard input. Try it yourself!

The prototype is successful in its intended role, and as you can see, it's functional. There are a number of things I learned in its implementation that I would do differently now: I would structure my SVG markup in a way that would make it easier to parse, and I would group elements in a way that makes it easier to manipulate them in sync. For that matter, the calculator illustration I used here is pretty much as-is from Affinity Designer, briefly passed through SVGOMG to help minify the markup a bit, but ideally, I would've flattened the skew() and translate() transforms manually, truncated the path values more, and used <use> elements on all the buttons.

Another thing I've since improved in my designs is to allow the CSS to do more. In this app, I am hard-setting styles and then removing them, and frequently— basically every button press triggers this behavior. I would now create a suite of helper CSS classes that would handle transforms and animations instead of hard-coding individual values. In general, I now let CSS do a lot more of the heavy lifting.

The use of state machines for this app was probably the most successful thing I did, logic-wise. I know David Khourshid is now well-known for popularizing them with his X-State library, and indeed I took a lot of inspiration from a tutorial he did on implementing them in JavaScript, but I first heard about state machines from Pieter Hintjens and have since been obsessed with them. I really think they are the proper way of handling state in web applications, both for the practicality of their use and the elegance of their design.

Encapsulating both the state machine and the makeshift JavaScript enums I used with Object.seal() and Object.seal() respectively is... perhaps superfluous in an app this small, but I've been trying to find ways to make more resilient browser logic in raw JS. None of my apps are yet large enough for me to consider them battle-tested, but I have a project called Dvorak.app which will be (descriptively enough) an app for learning the Dvorak keyboard layout, which will implement most of the features first tried here on a full-scale application.