650Vue Part 1: Origin Story
Every now and then, I get curious about an unfamiliar language or framework. My usual procedure is to read through a spec or a bunch of tutorials, convince myself that I've "got it", and then promptly forget everything I'd just "learned". I've found that unless I go through the process of writing actual code, I won't really learn anything. It was time to start writing some Vue.
I worked through some other techniques—conditional rendering, list iterations, two-way
binding—but I kept playing with that silly counter. After a while, I bound a button click to
setInterval() and ended up with the timer component in Figure 2. This timer has
four buttons (in glorious Bootstrap colours): I kept the increment button for testing, and added
start, stop, and reset buttons. At this point, I thought I had the basis for a simple Vue
app—perhaps a stopwatch or an alarm clock.
I decided to go ahead with the clock idea, and to give the app a little bit of flair, I opened up a pixel editor and drew these:
Actually, I just drew the '8' and then darkened segments to make the other numbers. I cheated a little by drawing straight-up-and-down segments; it's common to see 7-segment displays laid out at a slight oblique angle but right angles are easier to draw. Something about these numbers reminded me of a machine I had as a kid, the Fidelity Chess Challenger 7, shown in Figure 3. At level 7, this machine played at an ELO rating of about 1300, so it was a good challenge for me when I was still a novice chess player. The machine averaged about three minutes per move, though, and I spent a lot of time staring at that display, waiting for the computer to make a decision. Those LEDs are burned into my brain. (Incidentally, Stockfish evaluates the position in Figure 3 as even.)
The Chess Challenger could refer to any square on the chessboard by its name in algebraic chess notation, so in addition to numeric digits, it could also display the letters 'A' through 'H'. You can see an 'E' and a 'C' in the displays in Figure 3. I had no intention of writing a chess computer as a Vue app, so I didn't really need all those letters, but one of my earlier counter experiments used hexadecmial, and hex digits require 'A' through 'F'. I thought a digital clock with a hexadecimal display might be an interesting novelty—if I could find a good way to represent time in hex. So I opened up the pixel editor again, and made these:
There's more than one way to represent time in hexadecimal, including Nystrom's proposal from 1863, and there are numerous other non-standard ways to represent time, enough to keep me distracted for quite a while. I found myself so immersed in research and experiment that I never got around to finishing the clock app, although I did end up spending a lot of time with the hexadecimal LED digits that I had drawn. The hex LEDs reminded me of the 6-digit display of another machine, the KIM-1, pictured in Figure 4. This machine would become my inspiration for my Vue app.