CERN and the line-mode browser
I remember when Mark took me aside to tell me about the project he was working on with CERN to restore the first ever website to its original URL. Needless to say, I was extremely pleased. After all, cool URIs don’t change.
Then, more recently, Mark told me about a follow-up project they were planning: to recreate the experience of using one of the first web browsers. He asked if I could help organise a hackday-style gathering to accomplish this. I jumped at the chance.
Together with Dan Noyes from the web team at CERN, we assembled a dozen people. Half of them were invited experts and half were chosen from applications. Because I was ostensibly involved in organising the event (although I didn’t really do much), I got a free pass.
Just to be clear, the line-mode browser wasn’t the world’s first web browser. That honour goes to Tim Berners-Lee’s WorldWideWeb programme. But whereas WorldWideWeb only ran on NeXT machines, the line-mode browser worked cross-platform and was, therefore, instrumental in demonstrating the power of the web as a universally-accessible medium.
Just being at CERN was amazing. It’s like double Disneyland for me: not only is it home to the greatest experiment conducted in the history of our species, it’s also the birthplace of the web itself. We all felt quite humbled to be there.
That feeling was amplified when we had a very special guest show up at the start of the event—Robert Cailliau, co-conspirator with Tim Berners-Lee in getting the web off the ground. He gave us a history lesson in the early days of the web; the ideas, the people, and the principles that drove it. At one point, he passed around his notarised copy of the document that put the web into the public domain twenty years ago. “Be careful with that,” he half-joked. “CERN don’t know where their copy is anymore.”
We had another guest from the early days of the web with us for the duration of our hacking: an IBM RS/6000 machine from the early nineties running the line-mode browser.
I drew on my experience from hack farm and Science Hack Day to get the ball rolling. I was acutely aware that some of us felt pretty unsure about what we could contribute, so I suggested splitting into two teams: one to work on building the line-mode browser simulator, and the other to work on telling the story of its history. That seemed to work out pretty well.
Remy and Brian L. did the really hard work, implementing a simulation of the line-mode browser in Node.js. Lea, Kimberly and John made sure the output looked and felt right. Meanwhile Brian S. had the crazy idea of trying to recreate the font from the IBM machine …by taking a photo of the screen and drawing the glyphs from the photo! Of course Mark jumped on that.
Craig headed up the story-telling side of things with Martin and Angela. My contribution consisted of writing some explanatory words and doing a bit of image optimisation. It would be easy to feel inadequate in the company of such talented developers, but as the hacking went on, it was clear that all those little contributions really add up.
- Install Node.js.
- Clone the github repo to your machine.
- Open up the Terminal, navigate to your cloned copy, and type:
- Open localhost:8000 in a browser.
You can read more about the project but I’m guessing what you’ll really want to do is fire up the line-mode browser. By default it loads a copy of the first ever web page, but you can also navigate other websites by changing this query string:
Or, if you’re running it locally:
You can also grab a bookmarklet from the resources page. Drag it to your bookmarks bar, pull up whatever page you want to view, and hit the bookmarklet to see it line-mode style.
All the little details—the font, the animation, the sound—add up to an experience that I find quite immersive. In some ways, it’s a silly little project, but it’s also trying to convey an important message. I really love the final result. I feel incredibly honoured to have been involved—in a small way—in its creation.
Oh, and we also got to go down into the heart of the Large Hadron Collider to see the LHCb experiment. That was, in the truest sense of the word, awesome.
6 min read
It’s been over a month since I returned from my trip to CERN to participate in the line-mode browser hack days and I’m finally getting my photos and my notes in order. If you haven’t read much about the event, Jeremy wrote an excellent summary of the whole experience.
I was on the “coding” team and spent a good deal of time reading through and tracing the logic of the line-mode browser (LMB) source code. It felt like every few minutes I was finding something new or interesting, and pointing it out to the rest of the team, so we could be sure to make note of a feature we needed to implement or something that might be a pitfall. I referred to this work as “code archaeology”. Here are some of my more interesting findings:
- The earliest style sheet (compiled into the browser) had six styles: normal, list, glossary, monospace, address, and heading. (Heading had a further seven nested styles for TITLE and H1-H6.) What changed with each of these styles? Left indent (two levels), right margin, alignment, capitalize states (two, one for each left indent), double spacing, number of blank lines before and number of blank lines after.
- There’s code in place to handle H0 as a heading level. It was mapped to the title heading style — so if both TITLE and H0 were present, H0 would overwrite what was shown in the TITLE location (at the top right of the screen (see picture).
- If you’ve been doing web development for long enough, you’ll probably recall the ISINDEX element — and perhaps, like me, wondered it was supposed to do. If it existed in a page, it added a keyword command to the list of options in the prompt (see picture). It doesn’t look like this feature was fully implemented in the LMB — I don’t see any code that would return a list of pages matching the query. In addition, the LMB only recognized ISINDEX if the opening tag was in all caps.
- Here’s an HTML element that was new to most of us: LISTING, which is supposed to render plain text. The LMB code we were looking at had a bug, however: only the opening tag was parsed and any closing
tag was left to render in the page (see picture).
- Another element that we’d never heard of before was HP, for highlighted phrase. HP comes from SGML. It had the effect of forcing text into all caps. The LMB that we reviewed parsed
- Because of the way the LMB parses a document, HTML comments (e.g.
) are ignored — even though there were no comments in any of the early HTML documents we reviewed. In fact, any unknown tag is thrown away as a “junk tag”, yet its contents (what’s between the opening and closing tags) are still rendered to the screen. Thus, a modern web page with a
block would end up showing the user a whole lot of code!
I’m not sure that we explicitly discussed it, but it soon became clear that we were building a simulator that we expected could render both current web pages as well as the earliest markup found in the first web site. This led to review of some very old markup, written by Tim Berners-Lee himself, and lots of experimentation with the old IBM system we had with us, which was running the LMB. Some more fun discoveries:
- The HEAD element doesn’t yet appear in HTML — it would have been parsed out as a “junk tag”. That said, in some old HTML documents, you’ll find HEADER tags surrounding the TITLE and NEXTID. Fortunately modern browsers handle this old markup pretty well, so we didn’t have to code anything special for our simulator.
- These days, we’re used to surrounding paragraphs of text with opening and closing tags… and, back in the day, we just putt hem at the start of paragraphs. Originally
tags were used as paragraph separators, to create space between paragraphs. This made the work of writing the simulator CSS, to render both old and new code correctly, a little tricky.
- The LMB indicated a hyperlink by placing a number in brackets following the link text, e.g. . If your link text was more than one word, it might be confusing or hard to determine what text was part of the hyperlink. That said, the list command would show all of the hyperlinks in a document… but it was only helpful if your URLs were descriptive (see picture). The LMB could be started with flags to disable the showing of hyperlinks, which may have been useful when also running in non-interactive mode — perhaps when trying to cat contents to files for storage or printing.
As I’ve expressed before, I’m concerned that many web professionals don’t understand the history of the web and thus are doomed to repeat past mistakes. My biggest hope is that anyone who writes code for the web today will spend just a few minutes using the LMB simulator to browse the first web site as well as to check out their own site — and notice, at the very least, that well-marked up content was and still must be the foundation of the web, in order to have a decent experience, regardless of browser capabilities. Good markup never goes out of style.Additional references you should check out
- W3C Historical Archives, where loads of old source code and reference materials have been stored.
- The Lost Tags of HTML, a long document analyzing the evolution of the language. I can’t vouch entirely for its accuracy but it’s worth a review.
- Line Mode Browser 2013, the site and resources we produced while at CERN.