The History of HTML

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Douglas: Episode Four, The Metamorphosis of Ajax. All the world's a page and all the men and women merely pointers and clickers. So, we're gonna start this hour with Sir John Harrington. The poet, courtier, the saucy godson of Queen Elizabeth I of England, is best remembered today as being an inventor, and he invented one of the fundamental inventions which makes civilization at our scale possible.

[00:00:31]
Without his breakthrough, we could not live in cities, we could not be living in the density necessary for technological achievement. Great move forward, so this is a picture from his book of his invention. Can anybody identify it?
>> Speaker 2: A toilet.
>> Douglas: It is a flush toilet, indeed, just civilization couldn't work without them.

[00:00:55]
The Romans had flush technology, but it was lost when the Empire collapsed, but Harrington rediscovered it and he built one of these devices for the Queen and installed it in her residence. And, as usually happens with the really important inventions, she refused to use it. She complained that it made too much noise.

[00:01:18]
She didn't want everybody in the castle knowing when she was going about her Royal Business, so it never got used. But, he published a book about it, and eventually other inventors saw it and improved it. Over the next couple hundred years, people added other essential elements to it, including the float valve, and the S-trap, and siphon, and eventually we got-

[00:01:40]
>> Speaker 2: Where are the fish, though, I want fish in my toilet?
>> Douglas: Of course you do.
>> Speaker 2: Yeah.
>> Douglas: So, he wrote a book, and the title of the book was the Metamorphosis of Ajax, which he published in 1596, he called it The Ajax. Well, now flash forward a little bit, this is Jesse James Garrett.

[00:02:01]
He was a designer and consultant in San Francisco. He was on a project where he was consulting with the engineers of the company, and they told him that they had found this way of writing applications for the browser. That, instead of doing a page replacement each time the user clicks, instead they will send a little bit of data from the browser to the server.

[00:02:25]
The server will then send a small response back, JavaScript in the browser will then display it on the screen so that they can get much better user experiences using this technique, and it worked. The problem they were having was, they couldn't convince their own management that this was an acceptable thing to do.

[00:02:46]
So, they asked Garrett if he could please explain to management that this was a good idea. So, Garrett goes off and thinks about this problem, and thinks about, how do we present this idea? And, he says the solution came to him when he was in the shower. I think it would have been a better story if he had been on the throne going about his royal business, but he says he was in the shower when it occurred to him that he had to give it a name.

[00:03:14]
The name he gave it was Asynchronous JavaScript and XML, or Ajax, and he published a memo about this on his company's website in 2005 and it went viral almost overnight. Everybody was talking about Ajax and writing Ajax applications for the Web, and it completely transformed the way we think about browsers and JavaScript.

[00:03:35]
Sort of give some historical context for this, the Web comes from word processing, and word processing historically comes in two very distinct schools. There's the binary proprietary school, which started with standalone equipment, and then shared logic, and eventually personal computers, which was dominated at various times by companies like IBM, Wang, and today Microsoft.

[00:04:02]
Then, there is the textual open school in which everything is represented as text all the time. One of the first examples of this is a program called Runoff that was developed by MIT, and Runoff was intended for producing text that could be sent to various printers. So, here we've got an example of a Runoff file.

[00:04:26]
If a line starts with a period in column one, that means it's a command. So, in this case, we'll skip one line, and then we'll tab four, we'll offset four, and so on, and then the text between the commands will be filled into the margins. Now this was a very popular program, it was ported from one mainframe to another.

[00:04:46]
It moved all over the place, eventually got to Bell Labs, where its name was shortened to ROFF, and other versions of it were created, including NROFF and TROFF. TROFF was the way the Unix community did typesetting, made books for a long, long time. Meanwhile, there's an attorney at IBM named Charles Goldfarb.

[00:05:08]
He thinks he can do this stuff better, so he begins a project called Generalized Markup Language, and this is an example of a Generalized Markup Language kind of midpoint through its evolution. The markups got a little bit more complicated. Now he's got a colon in column one, followed by cryptic command, and then if the command is followed by a dot, he can then have content on the remainder of the line.

[00:05:34]
So, you're starting to mix up with the commands and the content, and if you're familiar with HTML, some of these commands might be eerily familiar to you, and that's not accidental. In fact, HTML comes out of this heritage, all of them except for EOL, but you can probably guess what that one means.

[00:05:54]
In fact, as EML went through its evolution, we got :e, and then ::, and then finally <>, and you know what happened after that. So, if you ever looked at HTML entities, we've got an ampersand, the cryptic code, and a semi-colon. You're wondering, in what bizarre universe does it make sense to have a piece of random punctuation, then a code, and another random piece of punctuation?

[00:06:24]
Where did that come from? This is where it came from, he ran out of angle brackets. There was no other way to make it look nice, so he went with the awful looking thing, so where did the angle brackets come from? The angle brackets were inspired by Scribe.

[00:06:40]
Brian Reid was an amazingly bright guy at Carnegie Mellon, who made Scribe, which he called a document compiler. This is the first time someone got the separation between content and formatting right. Scribe was a brilliant piece of work, Scribe could take documents and put them to all sorts of output devices, and it had an extremely nice language that there was one reserved character, which was the @ sign.

[00:07:08]
You'd say @, then the name of an environment, and then you'd have some quoted stuff, which would be affected by that environment, and he had six sets of quoting characters. So, you could pick the one that's guaranteed not to interfere with the content that you're putting inside, and you could nest these things as deeply as you wanted.

[00:07:24]
And, if the nesting got too deep, he had special forms with begin and end so that he didn't care about things accidentally matching. So, for long things like chapters and sections, you could enclose them like that, and Goldfarb looked at this and went, angle brackets, I didn't know you could do angle brackets, that's great.

[00:07:44]
So, he stole some ideas from this, unfortunately, he didn't steal enough ideas. So, one of the things that Scribe could do was bibliographies. Since it was developed in a university, it has to be able to deal with academic papers and such, so here we've got a description of a tech report and a book.

[00:08:04]
I believe that this is the very first time that a document format was being used as a representation for data because it looks like JSON, right? It's key value pair separated by commas, and it's really reasonable looking and even things like the details, like here equals 1972. There are no quotes around the year because requiring quotes around numbers would be insane, right?

[00:08:32]
It's just really good, so the GML community got the idea of attributes from this, but they didn't copy enough of the good stuff. It's a shame that Tim Berners Lee hadn't been more knowledgeable about text processing systems because, if he had based the Web on Scribe instead of on SGML, our lives today would be so much better, but he didn't do that.

[00:09:00]
So, we can see that Runoff inspires GML and Scribe, and Scribe helps inspire SGML, but not enough, and eventually that leads to HTML.