An interactive quine

At the Recurse Center, I thought a lot about computers. In a group I facilitated, the subject of the Dynabook came up: Alan Kay and Adele Goldberg’s vision for a programmable personal computer. When I read the paper it was remarkable to me: Here was a computer that was so simple, a child could learn it, but so powerful a child could learn how to program it.

As Easy As View-Source

When I was a child, I learned how to build websites by copying other people’s code. Code obfuscation was not so common back then, so when I clicked “View Source” I could get to where all the source code was. I could copy it and (maybe) have it running on my own website.

It’s that immediacy that got me into coding. Not an IDE, not even syntax highlighting! Just the ability to easily peek behind the curtain.

I don’t think modern software looks like this anymore. These days I find it hard to open up source code, even though the tooling is much better. Simple things are abstracted over and over again for the sake of making code easier to write, but at the expense of making it much harder to read.

Quines

I’ve always been fascinated by the concept of a quine: A computer program whose output is its own source code, or in other words, a computer program whose purpose is to reproduce itself. A lifeform in code form.

It’s not accurate to describe this as an HTML quine, because to make this work involves HTML, CSS, and JavaScript.

An HTML/CSS quine has been done before, so I wanted to up the ante: it would be an interactive quine that could change its own source code and accept input.

Naturally, the quine takes the shape of a todo list. Like a todo list, it lets you mark tasks as done; it lets you create new ones; and it lets you delete your tasks. This is all done through a user interface that allows you to manipulate an underlying data structure.

The difference here is that the underlying data structure is the very source code of the program itself.

Saving your todos becomes an act of copying and pasting the source code to a file on your computer (But there’s even a built-in save button.) Exporting your todos to HTML becomes an act of… copying the HTML.

And most importantly, you can figure out how it all works. I’ve left some comments in the code, an attempt at literate programming.

A constructive quine

To me, coding up this quine was a lot easier to wrap my head around than a standard constructive quine. A constructive quine has a template that contains some formatting instructions, and code that prints according to the format string.

This quine works similarly, but the “template” here is the HTML file itself, and the construction code walks the entire HTML source tree and reproduces tags using information it gets from the HTML DOM. (Finally, some CSS is added for formatting and to make the script and styles visible.) I did have to write my HTML in a constrained style for this.

When I added interactivity, I made sure that the code to construct the quine would apply again after every interaction. I make use of a WeakMap to make sure that I don’t walk through nodes I’ve already seen.

Discussion

Contenteditable does a lot of heavy lifting: For those who don’t know, contenteditable is an attribute that allows you to make the contents of an HTML element editable. It’s a form of WYSIWYG editing that goes back all the way to the days of Dreamweaver.

HTML does a lot of heavy lifting: Scripts and styles are not hidden by default, especially if embedded into the page. They are HTML elements like anything else, they are just hidden by default through styling! You can even edit the stylesheet of the quine, including removing the rules that make the quine a quine!

Literate programming and understandable programming: We have to make our code readable. A culture where we do not read code leads to exploits, it leads to wrong assumptions, it leads to illiteracy!

As Easy As View-Source?: View source means you can read what the code does. And when I got the code for the quine working, I found myself able to really understand what exactly was going on. I wish that it was the same to interact with any computing system.