Making of LMB 2013

Preservationistas

We hear you ask: This is silly; rebuild a 20 year old browser? Why?

Computers are simultaneously boosted and hindered by their rapid obsolescence. So while the line-mode browser is a mere 20 years old (as of the writing of this), it's only viewable (and barely usable) on the odd terminal here in the closet of CERN. We've come so far in so few years that we're on the cusp of not being able to interact with the very software that got us here. As folks who believe deeply in — and owe much to — the web, this pains us. In rebuilding / simulating this origin browser, we hope to achieve a few goals.

First, we want to provide context for the web of today. From where did it come? Out of what did it grow? Despite being only 20 years old, the qualitative differences between then and now are shocking. It's nice to be able to time-travel back and peek at our roots.

Which brings us to the second reason: we want a version of the line-mode browser that anyone can run and, furthermore, point at contemporary websites. Our line-mode browser simulator not only allows you to view the first web pages ever placed online (on these very servers!), but will also render — as accurately as possible — any other website to which it's pointed. It may not always be pretty, but it's usually entertaining. (And heck, the web was never really meant to be that pretty, right?¹)

Our Rules

In simulating the line-mode browser, we had a couple of rules.

1. We wanted to be as true to the original rendering engine as possible. That meant not adding features or improving the display of elements in any way different than the original.

Our Guidelines

Beyond rendering early web content faithfully, as the linemode browser would have we, we also wanted to capture some of the experience of using this early browser on an old "dumb" terminal. This included

1. The effect of the characters being drawn one by one onto the screen, as the browser parsed, and then rendered content character by character.
2. The distinctive sound of the clunking keyboard typically associate with the dumb terminals used with the linemode browser

What tech did we use?

In short: We wrote an old browser in a new browser. Here are the details.

The approach we centered on was to use a proxy Node server. This allowed us to request arbitrary web resources (we’d run into CORS problems with many sites).

In the node app, we manipulate the DOM, disabling scripts and style (linked, embedded and inline). But, importantly, we leave the script, link and style elements in place. Why? we hear you ask. Because, dear reader, the original line mode browser would display contents of those tags. Its parsing rule was to strip the start and end tags off unknown elements, but display their content inline. So it would display the content of style, link and script elements, but would not be affected by them, which is why we disabled them. It may look messy but we're being as true as possible to the way the line-mode browser worked.

After the DOM is modified like this, we add links to the CSS and JavaScript files that drive the emulation, then serialise the document back into a string, and then send this to the browser.

The browser then parses the document, applies the CSS and runs the JavaScript, so you the user can experience the awesomeness that was the line mode browser.

The CSS was used for 90% of the appearance of the document, with JavaScript used for some positional aspects. For example, JS was used for visual tricks and runs the command line fixed to the bottom of the content. Technically, this would be possible with CSS, but the required features, including viewport units aren’t supported across all widely used browsers.

In addition we use the HTML5 audio element to bring you the sound of the keyboard (we even recorded the sounds of typing on an old IBM RS6000 keyboard we had at our disposal to work with an early version of the browser).

What hacks did we use?

Hacks! We do not hack. OK, maybe we did some hacky things, but thankfully nothing particularly grubby.

As mentioned, we used some JavaScript for calculating certain aspects of the page layout. We'd have preferred to have done this in pure CSS.

Actually, there's one hack that was pretty cool. As mentioned, the original browser parsed and then drew to the screen character by character. Which basically means you see the browser draw, quite quickly, but still very noticeably, each character to the screen,. We wanted to emulate this, as it is as much a part of the original experience as the monochrome screen, or monospace font used.

Our original idea was to use CSS animations for this. But, this would require wrapping every individual character in a span element, then showing each character one by one.

Then in most likely a caffeine fuelled brainstorm, we came up with the idea of covering the document with a black, opaque canvas, then repeatedly erasing a rectangle the size of a character column by column, line by line. This works really well because it's a monospace font, all displayed at the same font size, so we don't need to measure the size of each character we're erasing, as each will be identical in size. This ended up being far less work than the original approach, and after a bit of tweaking, works like a charm.

Will what we built today be usable in 10 years?

We hope so! One of the things we wanted to do is emulate how the line-mode browser would handle today’s web content. Even though, technically, the original line-mode terminals would choke on today's heavy pages — we're averaging about 1.2MB of content per page.

But we think — are pretty certain — that this bundle of HTML, CSS and JavaScript will be usable for more than 10 years. At least we hope so!