CERN and the line-mode browser

Along with housing the LHC, the most energetic machine (sort of) ever built by humankind, CERN is also the birthplace of the Web 1. Earlier this year, CERN restored the first ever webpage to its original URL 2, and now a great group of web-folk, have rebuilt the first readily available browser called the line-mode browser 3. Jeremy Keith, who worked on the project, has written extensively about it.As one might expect, the line-mode browser, launched in 1993, is very primitive compared to the web browsers of today. It recognises only few HTML tags, no images, video, fancy transitions or javascript. Navigation is entirely keyboard-based, sort of like a command-line. The font is the default monospace available on the computer.Ironically, the creators of this emulation used some pretty shiny new technology like Node.js, canvas and audio elements to make this beautiful window into the web’s past. Actually you can read this article on line-mode!A portal through timeIt is quite amazing that a 20-year old browser, with its now obsolete technology, can read most webpages created today. At the same time, modern web browsers can still read the very first webpage in history. How is this possible?…an important part of the web is the fact that it was released for free into the public domain.—Jeremy KeithThe HTML standard is maintained and developed by W3C, a public community which includes developers and browser-makers. Any recommendation in the HTML standard is, thus, reached by consensus amongst people who use and contribute to the Web.Another aspect is, HTML is designed to fail gracefully. If a browser does not recognise some element then it simply writes out the contents as text, instead of freezing completely 4. Also, if some elements of the markup are considered obsolete, browsers still support them in some way. This approach, makes HTML very flexible and yet quite robust. So even though, HTML and the technology around it evolves, there is never anything that is completely out-of-date and unreadable. The worst possible case, is that you have to read it as text; in fact I am writing this HTML in a text editor right now!Foundation of the webSince the days of line-mode, the Web has acquired many more layers; images, video, scripts and other fancy things to enhance the experience. But line-mode is able to ignore all those additional layers and show you the text content.A couple of times people have tried to replace HTML with these fancier tools. For a few years most websites were made entirely in Flash as animations. In the heyday of the Web 2.0 fad, I was once on a web-team that followed the latest trend and used Javascript to fill up an empty webpage with content. Even at the time, it seemed excessive and bothered me. Now, these experiments have made me realise, we were killing the very essence of what makes the Web so great—HTML and its accessibility!5This project serves as a good reminder that there are people who still have a text-based browsing experience.—Kimberly BlessingNeither Flash nor AJAX generated webpages have the versatility of HTML. These pages are completely inaccessible to older browsers, screen readers, web crawlers, smart-watches, face-glasses, eyeball-computers…What devices will access the Web in the future? 6The best way to build a scalable, accessible web is to base it on HTML for meaningful, semantic content and use other technologies as enhancement layers. If some device can not interpret these fancy things, it can skip directly to the HTML content. This progressive enhancement style, makes the content accessible to everyone, everywhere and ‘everywhen’.HTML is awesomeThe first webpage and line-mode browser experiments have given me a greater appreciation for the beauty and power of HTML. HTML is constantly evolving, and is, I think, immensely underutilised.The web is undeniably one of the most important tools democratizing our ability to take a piece of text — an idea — push it out there…—Craig ModThe Web is the printing press of our times; an amazing piece of technology facilitating a free and wide-scale dissipation of our thoughts and ideas. And all of it is based on this near 20-year old, yet timeless idea of the Hyper Text Markup Language.ReferencesTwenty years of a free, open web at CERN.Restoring the first website at CERN.Line Mode Browser 2013 at CERN.Notes on invalid documents in the HTML4.01 recommendation.on Replacing HTML by Ian Hickson on Google+.This is the web by Brad Frost. All quotes from interviews with the makers of the Line Mode Browser 2013Cover photo: Matrix by elleizarra on Flickr.

Code Archaeology: Dusting Off the Line Mode Browser

6 min read

The line mode browser (LMB) info page, running on the line mode browser.

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 and only.
• 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 or block would end up showing the user a whole lot of code!

My handwritten notes tracing the logic of the LMB, with Tim Berners-Lee’s original proposal in the background

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. [1]. 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.

You, too, can get the line-mode browser source code and read through the main file (www.c). See what jumps out at you!

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.

• 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.

#obiwankimberly #browsers #webdevelopment #linemodebrowser #lmb #cern #history

Just had a GREAT lunch and learn from @adactio on the history of the WorldWideWeb, a project he did 5 years ago to recreate the Worlds second Web Browser, and his more recent project to create the Worlds first Web Browser.adactio.com/journal/6507adactio.com/links/14823

CERN 2019 WorldWideWeb Rebuild project worldwideweb.cern.ch … and some background info > adactio.com/journal/6507 ^ via @adactio’ @FutureSyncConf talk #FutureSync20