Abstraction—Part I: Road to the WYSIWYG

Before Bravo

But what was word processing like before Bravo arrived on the scene?

Well, there were *typewriters* of course, going all the way back to 1874. Then in 1964 IBM released the Magnetic Tape/Selectric Typewriter (MT/ST), which was the first system marketed as a Word Processor. The MT/ST allowed the user to edit text without having to retype a document, which was cool, but not quite as cool as this ad that Jim Henson (yes, that Jim Henson) produced for the machine in 1967:

There were also mainframe editors like TECO, QED, and ED. The Wikipedia article for TECO (a precursor to the EMACS editor) uses the following example to illustrate what it would have been like to edit a program written in C using the TECO editor:

Given a file named hello.c with the following contents:

// C ADDITION EXAMPLE
int main(int argc, char **argv)
{
    int main(int argc, char **argv)

    printf("Hello world!\n");
    return 0;
}

...one could use the following TECO session (noting that the prompt is "*" and "$" is how ESC is echoed) to change "Hello" into "Goodbye":

! TECO session (change “Hello” → “Goodbye”) !
*EBhello.c$$
*P$$
*SHello$0TT$$
*-5DIGoodbye$0TT$$
*EX$$

To quote a ScienceBlogs post from 2006:

“...it's got the most god-awful hideous syntax ever imagined”.
—Worlds Greatest Pathological Language: TECO, goodmath

The Magic Word

Wait, what is syntax? I looked at a few definitions, but I think this one (which I modified slightly modified for brevity) is the most elegant:

“Syntax refers to the structural rules of a language”.
—What is Syntax, Codefacture blog

Machine Code

In the late 1940s and early 1950s, programming was commonly done in machine code, which is expressed in binary form. For example (hardware-dependent):

10111000 00000001 00000000 00000000 00000000
00000101 00000010 00000000 00000000 00000000

*NOTE: the processing of binary/machine code is hardware-dependent, so theoretically these instructions might work on some machines but not others

Not exactly easy on the eyes, I know. But let’s go through this by taking small bytes (sorry…again).

Starting with the first group of numbers–that is, the first byte–in the first row, we can see the opcode, which is what specifies the operation to be performed. In this case it’s equivalent to (in English per ChatGPT):

Copy a 32-bit immediate constant directly into a 32-bit general-purpose register

How about the second byte? That’s much easier–it’s the binary representation for the number 1! All right, there are no more instructions in row 1, so let’s move on to row 2.

In the second row, the first byte gives us opcode with the intent of:

Add a 32-bit immediate constant to the value in register EAX, and store the result back in EAX.

And then the second byte gives us the number 2 in binary.

Can we just take a moment to appreciate how the heck interacting with a computer got from this to #@!$ing TikTok?

Abstraction

It’s a silly question, but I think one of the answers lies in abstraction.

“In software, an abstraction provides access while hiding details that otherwise might make access more challenging.”
—Abstraction_(computer_science), Wikipedia

This is for real one of the most elegant statements I have ever read (at least concerning computer science). Abstraction allows you to do the thing without having to care about certain other things.

In Assembly language, instead of having to input 2 bytes like 10111000 00000001, you could now provide the much easier to read instruction of *mov eax, 1.

*NOTE this and other related examples are a bit anachronistic in that they show encodings for 80386 architecture (common in the 80s). Earlier machines used different encodings and register models.

I know, it's still quite different from the English translation, which again is:

Copy a 32-bit immediate constant directly into a 32-bit general-purpose register.

But this was surely life-changing for anyone programming computers at the time.

Similarly, let’s take the binary instruction of 00000101 00000010, meaning:

Add a 32-bit immediate constant to the value in register EAX, and store the result back in EAX.

In Assembly this becomes add eax, 2.

And the Next Layer

All right, so we’re no longer inputting binary, but we’re still having to dictate to processors precisely how each operation should be performed. What if things could be even easier for programmers? What if the assembly-level details could also be abstracted away?

Although there were earlier high-level languages (notably Plankalkül), FORTRAN entered the scene around 1957 and was the first widely used *high-level language.

*NOTE: here “high-level” refers to its abstraction of lower level details, in this case assembly language.

So let’s see what our 1+2 example looks like in FORTRAN:

// C ADDITION EXAMPLE
I = 1 + 2
PRINT 10, I
10 FORMAT(I2)
STOP
END

Nuts, right? In about 10 years, mov eax, 1 and add eax, 2 became this! No need to specify CPU registers to use or which opcodes to emit–the compiler handles all of it.

Review

So we started with raw bytes in binary like 10111000 00000001, which became more human readable instructions like mov eax, 1 in Assembly; and finally we’ve moved to FORTRAN, which gives us the practically English code of I = 1 + 2. Speaking in terms of abstraction layers, it goes something like:

*NOTE: technically Assembly is “assembled” into Object code, which is binary code that contains machine code instructions. I skipped over it for the sake of brevity.

Now it’s worth noting that we just looked at a tiny vertical slice of the history of programming. We could have looked at a desktop programming language like C# and traced its abstraction through Intermediate Language; or we could have looked at the…honestly weird path that JavaScript takes to get to machine language. But abstraction has been a fairly universal path in the evolution of code languages. And it makes sense–because abstraction is all about making things easier on the programmer!

Bridging Abstraction and the WYSIWYG

At this point it’s fair to ask: what on Earth does this have to do with Bravo? Or WordPress? Or Photoshop? In every case, the software’s goal is to deliver on the promise of what you see is what you get. Now how does this relate to abstraction?

As I was hitting ChatGPT with questions about the path from machine code to Assembly to FORTRAN, it spit out a cool little visual aid (which I’ve slightly altered for brevity):

I think this offers a helpful way to think about abstraction. The further we get away from the metal (and the bits), the easier it is to think naturally. Increasingly higher level programming languages like Assembly and FORTRAN did exactly this. They let the programmer think more conceptually and less “wait, which CPU register was it again?”.

WYSIWYGs do this, too…sort of. See, if we place a WYSIWYG on our visual aid, it might look like this:

But adding the WYSIWYG here is a bit like throwing an orange in with all the apples. A high-level language can act as an abstraction of Assembly, and Assembly is an abstraction of machine code. But a WYSIWYG–and any other application built in a high level language–is an abstraction of intent. That is, the WYSIWYG abstracts the user’s intent to edit something by providing a way to do it without having to engage directly with syntax.

So let's go back to our TECO example. We have the text printf("Hello world!\n"); from our C program. If we want to replace “Hello” with “Goodbye” we’d have to run the following commands:

! TECO session (change “Hello” → “Goodbye”) !               
*EBhello.c$$
*P$$
*SHello$0TT$$
*-5DIGoodbye$0TT$$
*EX$$

With Bravo (or any modern word processing software like Microsoft Word), the user can just…

• Move the mouse/cursor to the end of “Hello” in the text.
• Press Backspace 5 times to delete “Hello”.
• Type “Goodbye” to insert the new text.

How a WYSIWYG works

So let’s go back to Bravo, our first WYSIWYG. Bravo was originally written in BCPL (Basic Combined Programming Language), which compiled to O-code machine instructions. We could represent this as:

Again, it’s not quite accurate to say that Bravo is an abstraction of BCPL. Bravo is a user interface abstraction designed to make it easier to edit text.

Let's Talk

That’s it for the WYSIWYG…or is it? In my next post, I’ll ask: what if it’s not about what you see anymore? What if it’s about what you say?

Musical Coda

One last thing. Paul Krugman, one of my favorite Substack writers, has a habit of adding a “musical coda” to the end of his posts. I like this idea, so I’m stealing it.

I present Orbital’s “The Box” (starring Tilda Swinton):