Myles Skinner's Development Portfolio: 650Vue

I currently work with Info-Tech Research Group, where we primarily use Ruby on Rails for application development. Some time ago, Vue.js emerged as our preferred front-end framework, edging out both Angular and React in a lengthy evaluation process. I think Vue was absolutely the right choice to pair with Rails at the time (although the landscape is always changing!), but it is fair to say that I have never been a Javascript guy. In fact, I've always viewed Javascript with a bit of suspicion. After all, I was online before Javascript even existed, and I lived through many of its early teething pains.

I figured that if we're going to use this framework, I should have at least a passing acquaintance with it. Armed with such knowledge, I could at least make semi-intelligent comments on peer reviews, even if I never ended up writing a line of Javascript myself. But you can't really learn about a thing without developing at least some of interest in it, and it wasn't long before I was doing a lot of reading and watching tutorial videos. None of this media was really sinking in; as it turns out, I don't really learn a language or framework until I start writing actual code. I started playing around with simple Vue components to deepen my understanding.

What happened next was unexpected and strange but not atypical of my creative process. A pattern emerged from my early Vue experiments, and before long my experimentation came into focus. I wasn't just goofing around anymore; I had a direction. I was building a single-page application, which evolved into 650Vue, a simulated 6502-based computer built in Vue and capable of running non-trivial software on a virtual machine in the browser.

This development journal documents the process of creating 650Vue, and is divided into several sections:

• Part 1 – Origin Story: How the heck did we get here?
• Part 2 – The 6502: The brains of the outfit.
• Part 3 – KIM-1: Architecture and Modelling.
• Part 4 – A Passion for Design: Finding a look that invokes the time period.
• Part 5 – Registers, Memory, and Vuex: Keeping track of machine state.
• Part 6 – Segmented Registral Displays: Rendering the CPU registers in the browser.
• Part 7 – Status Register Bit Displays: A row of lights to display processor status flags.
• Part 8 – Running the Machine: Rudimentary control logic.
• Part 9 – Machine-Language Monitor: Communicating with 650Vue through a terminal and Vuepermon.