WorldWideWeb

Nine people came together at CERN for five days and made something amazing. I still can’t quite believe it.

Coming into this, I thought it was hugely ambitious to try to not only recreate the experience of using the first ever web browser (called WorldWideWeb, later Nexus), but to also try to document the historical context of the time. Now that it’s all done, I’m somewhat astounded that we managed to achieve both.

Want to see the final result? Here you go:

worldwideweb.cern.ch

That’s the website we built. The call to action is hard to miss:

Launch WorldWideWeb

Behold! A simulation of using the first ever web browser, recreated inside your web browser.

Now you could try clicking around on the links on the opening doucment—remembering that you need to double-click on links to activate them—but you’ll quickly find that most of them don’t work. They’re long gone. So it’s probably going to be more fun to open a new page to use as your starting point. Here’s how you do that:

  1. Select Document from the menu options on the left.
  2. A new menu will pop open. Select Open from full document reference.
  3. Type a URL, like, say https://adactio.com
  4. Press that lovely chunky Open button.

You are now surfing the web through a decades-old interface. Double click on a link to open it. You’ll notice that it opens in a new window. You’ll also notice that there’s no way of seeing the current URL. Back then, the idea was that you would navigate primarily by clicking on links, creating your own “associative trails”, as first envisioned by Vannevar Bush.

But the WorldWideWeb application wasn’t just a browser. It was a Hypermedia Browser/Editor.

  1. From that Document menu you opened, select New file…
  2. Type the name of your file; something like test.html
  3. Start editing the heading and the text.
  4. In the main WorldWideWeb menu, select Links.
  5. Now focus the window with the document you opened earlier (adactio.com).
  6. With that window’s title bar in focus, choose Mark all from the Links menu.
  7. Go back to your test.html document, and highlight a piece of text.
  8. With that text highlighted, click on Link to marked from the Links menu.

If you want, you can even save the hypertext document you created. Under the Document menu there’s an option to Save a copy offline (this is the one place where the wording of the menu item isn’t exactly what was in the original WorldWideWeb application). Save the file so you can open it up in a text editor and see what the markup would’ve looked it.

I don’t know about you, but I find this utterly immersive and fascinating. Imagine what it must’ve been like to browse, create, and edit like this. Hypertext existed before the web, but it was confined to your local hard drive. Here, for the first time, you could create links across networks!

After five days time-travelling back thirty years, I have a new-found appreciation for what Tim Berners-Lee created. But equally, I’m in awe of what my friends created thirty years later.

Remy did all the JavaScript for the recreated browser …in just five days!

Kimberly was absolutely amazing, diving deep into the original source code of the application on the NeXT machine we borrowed. She uncovered some real gems.

Of course Mark wanted to make sure the font was as accurate as possible. He and Brian went down quite a rabbit hole, and with remote help from David Jonathan Ross, they ended up recreating entire families of fonts.

John exhaustively documented UI patterns that Angela turned into marvelous HTML and CSS.

Through it all, Craig and Martin put together the accomanying website. Personally, I think the website is freaking awesome—it’s packed with fascinating information! Check out the family tree of browsers that Craig made.

What a team!

Have you published a response to this? :

Responses

Paul Downey

This absolutely brilliant project cheered me up no end after being told about a site removing links and deprecating HTML because it’s a “RESTful API”:

# Posted by Paul Downey on Saturday, February 16th, 2019 at 12:09pm

James Tait

I love this! I remember browsing with Mosaic and Netscape Navigator, but this is what the original looked like. And not just a browser, but an editor, too!

# Posted by James Tait on Saturday, February 16th, 2019 at 4:38pm

Jenn

There is something satisfying about being able to browse websites you made in almost 30 year old browser.adactio.com/journal/14821

# Posted by Jenn on Monday, February 18th, 2019 at 4:55pm

Ton Zijlstra

A team of people, including Jeremy Keith whose writings are part of my daily RSS infodiet, have been doing some awesome web archeology. Over the course of 5 days at CERN, they recreated the browser experience as it was 30 years ago with the (fully text based) WorldWideWeb application for the NeXT computer

Hypertext’s root, the CERN page in 1989

This is the type of pages I visited before inline images were possible. The cool bit is it allows you to see your own site as it would have looked 30 years ago. (Go to Document, then Open from full document reference and fill in your url) My site looks pretty well, which is not surprising as it is very text centered anyway.

Hypertexting this blog like it’s 1989

Maybe somewhat less obvious, but of key importance to me in the context of my own information strategies and workflows, as well as in the dynamics of the current IndieWeb efforts is that this is not just a way to view a site, but you can also edit the page directly in the same window. (See the sentence in all capitals in the image below.)

Read and write, the original premise of the WWW

Hypertext wasn’t meant as viewing-only, but as an interactive way of linking together documents you were actively working on. Closest come current wiki’s. But for instance I also use Tinderbox, a hypertext mindmapping, outlining and writing tool for Mac, that incorporates this principle of linked documents and other elements that can be changed as you go along. This seamless flow between reading and writing is something I feel we need very much for effective information strategies. It is present in the Mother of all Demos, it is present in the current thinking of Aaron Parecki about his Social Reader, and it is a key element in this 30 year old browser.

doןɟɐɹɹǝʇ@

WorldWideWeb the first ever Hypermedia browser/editor simulated in a modern browser. Time travel is possible! It took nine talented people collaborating at CERN to achieve this nostalgic and humbling magic. adactio.com/journal/14821

v2.diggingthedigital.com

Graven in digitale schatkisten, ik hou daar van. Niet voor niets schreef ik ooit Bloghelden en vertelde ik in de podcast met Erno Hannink waarom ik het belangrijk vind om zo nu en dan naar het verleden te kijken. Om daar weer van te leren voor de toekomst.

Dus toen ik vanochtend over het WorldWideWeb project las, maakte mijn hart wel een sprongetje. Jeremy Keith is een van de initiatiefnemers om de allereerste web browser ooit weer werkend te krijgen. En het is ze nog gelukt ook. De browser genaamd WorldWideWeb is door een team van programmeurs, designers en bouwers weer opgelapt en teruggebracht in de staat zoals deze begin jaren ’90 op de markt kwam. De browser is geen losse app, je gebruikt hem als een Javascript applicatie ín je browser. Ik kan je aanraden dit wel op een desktop of laptop te doen, ik denk dat het mobiel niet echt goed zal werken.

Op dit moment lijkt de site plat te liggen, vermoedelijk door internationale aandacht of sites als Reddit en Hacker News. Dus geef het wat tijd. Aan de andere kant, zo was het internet nu eenmaal mensen! Dan was de verbinding weg, moest je weer inbellen, deed de website het niet, had de schoonmaakster de stekker van de webserver er even uitgetrokken om te stofzuigen.

De browser werkt anders dan je nu gewend zou zijn van Firefox of andere browsers. Zo moet je dubbelklikken op links en is er niet een duidelijke adresbalk. Tip: Ga in het linkermenu naar Document > Open from full document reference en typ de URL in die je wilt zien. Deze blog ziet er trouwens nog verdomd leesbaar uit in zo’n oude browser!

Voor meer achtergrond informatie verwijs ik je naar de blogpost van Jeremy en de waanzinnig interessante achtergrond-artikelen bij CERN zelf. Check vooral bij Jeremy de uitleg hoe deze browser zowel voor consumptie (browsing) als productie (editing) was. Je maakte in de browser de documenten waar je dan later weer naar kon linken. Zo kon je de browser gebruken om naar je eigen documenten op je lokale harddisk te linken, maar eveneens naar pagina’s op de rest van het netwerk.

Veel speelplezier!

# Wednesday, February 20th, 2019 at 8:43pm

Garrett Williams

CERN recreated the experience of using the first ever web browser (called WorldWideWeb, later Nexus). From a historical context it’s amazing how far we’ve come. Today’s student should start here to understand the online world they find themselves in today. adactio.com/journal/14821

22 Shares

# Shared by Benjamin Read on Saturday, February 16th, 2019 at 12:22pm

# Shared by Chris Bush on Saturday, February 16th, 2019 at 12:30pm

# Shared by getify on Saturday, February 16th, 2019 at 12:57pm

# Shared by Peter 🗺️ 🌎 Rushforth on Saturday, February 16th, 2019 at 1:24pm

# Shared by Duane Sibilly on Saturday, February 16th, 2019 at 1:43pm

# Shared by Mo McRoberts 🦄 on Saturday, February 16th, 2019 at 2:28pm

# Shared by Scott Lett on Saturday, February 16th, 2019 at 2:45pm

# Shared by Emma Boulton on Saturday, February 16th, 2019 at 3:02pm

# Shared by Trys Mudford on Saturday, February 16th, 2019 at 4:38pm

# Shared by Lucia Conti on Saturday, February 16th, 2019 at 5:32pm

# Shared by inyigo on Saturday, February 16th, 2019 at 5:33pm

# Shared by Digital news on Saturday, February 16th, 2019 at 8:28pm

# Shared by Louis Maddox on Saturday, February 16th, 2019 at 9:39pm

# Shared by Mike Riethmuller on Saturday, February 16th, 2019 at 10:56pm

# Shared by graste on Sunday, February 17th, 2019 at 7:33am

# Shared by David Zuelke on Sunday, February 17th, 2019 at 7:38am

# Shared by Stefan Tilkov on Sunday, February 17th, 2019 at 7:53am

# Shared by Jens-Chr. Fischer on Sunday, February 17th, 2019 at 8:00am

# Shared by Thomas Madsen-Mygdal on Sunday, February 17th, 2019 at 8:24am

# Shared by Stuart Homfray on Sunday, February 17th, 2019 at 8:59am

# Shared by Alex Klimetschek on Sunday, February 17th, 2019 at 9:02am

# Shared by Keith Brophy on Sunday, February 17th, 2019 at 9:17am

71 Likes

# Liked by Chris Bush on Saturday, February 16th, 2019 at 12:45pm

# Liked by Kaspars on Saturday, February 16th, 2019 at 12:46pm

# Liked by Juan Fernandes on Saturday, February 16th, 2019 at 12:46pm

# Liked by Dr. David Mills on Saturday, February 16th, 2019 at 12:46pm

# Liked by Aaron Parecki on Saturday, February 16th, 2019 at 4:17pm

# Liked by Владимир Шамшеев on Saturday, February 16th, 2019 at 4:45pm

# Liked by Duane Sibilly on Saturday, February 16th, 2019 at 4:46pm

# Liked by nitriques on Saturday, February 16th, 2019 at 4:46pm

# Liked by Peter 🗺️ 🌎 Rushforth on Saturday, February 16th, 2019 at 4:46pm

# Liked by Trys Mudford on Saturday, February 16th, 2019 at 4:46pm

# Liked by Michael Scharnagl on Saturday, February 16th, 2019 at 4:46pm

# Liked by Brad Frost on Saturday, February 16th, 2019 at 4:46pm

# Liked by simonscarfe@mastodon.social on Saturday, February 16th, 2019 at 4:46pm

# Liked by Alex Flach on Saturday, February 16th, 2019 at 4:46pm

# Liked by Bryan Robinson on Saturday, February 16th, 2019 at 4:46pm

# Liked by James Tait on Saturday, February 16th, 2019 at 4:46pm

# Liked by Pat Hadley on Saturday, February 16th, 2019 at 4:46pm

# Liked by Prasun Pal on Saturday, February 16th, 2019 at 4:46pm

# Liked by Tom Loosemore on Saturday, February 16th, 2019 at 4:46pm

# Liked by getify on Saturday, February 16th, 2019 at 4:46pm

# Liked by Li Junkang on Saturday, February 16th, 2019 at 4:46pm

# Liked by Barry Pollard on Saturday, February 16th, 2019 at 4:46pm

# Liked by Zander on Saturday, February 16th, 2019 at 4:46pm

# Liked by Ryan Baumann on Saturday, February 16th, 2019 at 4:46pm

# Liked by Winston Fassett on Saturday, February 16th, 2019 at 4:46pm

# Liked by claus-michael on Saturday, February 16th, 2019 at 4:46pm

# Liked by Horahore on Saturday, February 16th, 2019 at 4:46pm

# Liked by Haroen on Saturday, February 16th, 2019 at 4:46pm

# Liked by Matthew Chwat on Saturday, February 16th, 2019 at 4:46pm

# Liked by Marcel Deelen on Saturday, February 16th, 2019 at 4:46pm

# Liked by Simon Collison on Saturday, February 16th, 2019 at 5:21pm

# Liked by Mike Bracken on Saturday, February 16th, 2019 at 5:57pm

# Liked by ෴ Lychee Cola ෴ on Saturday, February 16th, 2019 at 5:57pm

# Liked by Raquel Paiva Godinho on Saturday, February 16th, 2019 at 5:57pm

# Liked by Mrinmay Mukherjee on Saturday, February 16th, 2019 at 6:25pm

# Liked by Chris Coyier on Saturday, February 16th, 2019 at 7:44pm

# Liked by Lil Smooty on Saturday, February 16th, 2019 at 7:44pm

# Liked by Hugh Isaacs II on Saturday, February 16th, 2019 at 7:44pm

# Liked by Tim Walsh on Saturday, February 16th, 2019 at 8:19pm

# Liked by jail on Saturday, February 16th, 2019 at 9:19pm

# Liked by Roberto Tortolero S on Saturday, February 16th, 2019 at 9:54pm

# Liked by SmellLi on Saturday, February 16th, 2019 at 9:54pm

# Liked by Louis Maddox on Saturday, February 16th, 2019 at 9:54pm

# Liked by Richard Cunningham on Saturday, February 16th, 2019 at 9:54pm

# Liked by Justine Pocock on Saturday, February 16th, 2019 at 10:20pm

# Liked by Jaye Weatherburn on Saturday, February 16th, 2019 at 10:20pm

# Liked by Gaz Joyce on Saturday, February 16th, 2019 at 10:54pm

# Liked by versae on Saturday, February 16th, 2019 at 11:27pm

# Liked by Winnie Lim on Sunday, February 17th, 2019 at 12:54am

# Liked by Dan Brickley on Sunday, February 17th, 2019 at 1:21am

# Liked by scott kellum on Sunday, February 17th, 2019 at 4:24am

# Liked by Simon Evans on Sunday, February 17th, 2019 at 6:25am

# Liked by Radimir Bitsov on Sunday, February 17th, 2019 at 6:50am

# Liked by graste on Sunday, February 17th, 2019 at 7:52am

# Liked by Stefan Tilkov on Sunday, February 17th, 2019 at 8:29am

# Liked by Jens-Chr. Fischer on Sunday, February 17th, 2019 at 8:29am

# Liked by Thomas Madsen-Mygdal on Sunday, February 17th, 2019 at 8:29am

# Liked by Vincent De Oliveira on Sunday, February 17th, 2019 at 8:29am

# Liked by Michael Hastrich on Sunday, February 17th, 2019 at 8:57am

# Liked by Bert on Sunday, February 17th, 2019 at 9:26am

# Liked by Andy Smith on Sunday, February 17th, 2019 at 10:25am

# Liked by Matteo Collina on Sunday, February 17th, 2019 at 10:54am

# Liked by Mathew Trivett on Sunday, February 17th, 2019 at 11:27am

# Liked by Kaustubh on Sunday, February 17th, 2019 at 2:42pm

# Liked by nothingmuch on Sunday, February 17th, 2019 at 2:42pm

# Liked by Colin Johnston on Sunday, February 17th, 2019 at 5:41pm

# Liked by Mark Dittmer on Sunday, February 17th, 2019 at 6:15pm

# Liked by 7-kurgan-d on Monday, February 18th, 2019 at 6:41am

# Liked by Laurence Penney on Monday, February 18th, 2019 at 11:29am

# Liked by mikejthompson on Monday, February 18th, 2019 at 8:17pm

# Liked by Gennady Feldman on Thursday, February 21st, 2019 at 1:05am

Previously on this day

3 years ago I wrote Teaching in Porto, day three

Wednesday: interaction design.

5 years ago I wrote Tickets for the last Responsive Day Out

Get ready to pounce on March 3rd.

6 years ago I wrote Climbing Mount Responsive

Three days in Munich.

9 years ago I wrote New day rising

The present is a lumpy batter of the past and the future.

13 years ago I wrote Buddy icons

I’m a portrait taker, twisted portrait taker.

16 years ago I wrote The C in CSS

I’ve been tidying up the stylesheets around here. Everything should look exactly the same, just executed more economically.

18 years ago I wrote Olympic kid: 7-year-old's invention earns trip to Utah

That is one smart kid:

18 years ago I wrote BBC Winter Olympics 2002 Game

The television is on right now so that Jessica can keep track of what’s happening at the Winter Olympics.