In late September, 2013, twelve web developers, designers, writers, standardistas, and technologists descended upon CERN — the birthplace of WWW and HTTP and the web browser — to spend two days rebuilding the line-mode browser. This is our story.
Making of LMB 2013
Rebuilding 20 year old software in a modern day browser
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?1)
In simulating the line-mode browser, we had a couple of rules.
- 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.
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
- The effect of the characters being drawn one by one onto the screen, as the browser parsed, and then rendered content character by character.
- 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.
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.
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.
- OK — that not entirreeeeely true. Remember how we said this wasn't the first browser? Well, the first browser was very pretty, and very graphical. It ran on the NeXT desktop and not only had style sheet support (!!) but also handled vector graphics.