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:
That’s the website we built. The call to action is hard to miss:
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:
- Select
Documentfrom the menu options on the left. - A new menu will pop open. Select
Open from full document reference. - Type a URL, like, say
https://adactio.com - Press that lovely chunky
Openbutton.
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.
- From that
Documentmenu you opened, selectNew file… - Type the name of your file; something like
test.html - Start editing the heading and the text.
- In the main
WorldWideWebmenu, selectLinks. - Now focus the window with the document you opened earlier (adactio.com).
- With that window’s title bar in focus, choose
Mark allfrom theLinksmenu. - Go back to your
test.htmldocument, and highlight a piece of text. - With that text highlighted, click on
Link to markedfrom theLinksmenu.
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.
Responses
Related posts
A curl in every port
Postel’s port numbers.
Design sprint?
It looks like a design sprint, and quacks like a design sprint. But is it a design sprint?
A memex in every web browser
Show me my associative trails.
Web Share API test
Figuring out how Safari on iOS uses the Web Share API.
Install prompt
Browsers are still trying to figure out how to highlight progressive web apps.
Related links
Yax.com · Blog · Out of the Matrix: Early Days of the Web (1991)
Thirty years later, it is easy to overlook the web’s origins as a tool for sharing knowledge. Key to Tim Berners-Lee’s vision were open standards that reflected his belief in the Rule of Least Power, a principle that choosing the simplest and least powerful language for a given purpose allows you to do more with the data stored in that language (thus, HTML is easier for humans or machines to interpret and analyze than PostScript). Along with open standards and the Rule of Least Power, Tim Berners-Lee wanted to make it easy for anyone to publish information in the form of web pages. His first web browser, named Nexus, was both a browser and editor.
Networked information services: The world-wide web [PDF]
A 1992 paper by Tim Berners-Lee, Robert Cailliau, and Jean-Françoise Groff.
The W3 project is not a research project, but a practical plan to implement a global information system.
Tagged with pdf web history worldwideweb cern paper hypertext networks
WWW:BTB — History (Overview)
This history of the World Wide Web from 1996 is interesting for the way it culminates with …Java. At that time, the language seemed like it would become the programmatic lingua franca for the web. Brendan Eich sure upset that apple cart.
Tagged with worldwideweb history timeline hypertext internet arpanet cern www java
The First Web Apps: 5 Apps That Shaped the Internet as We Know It
A great bit of web history spelunking in search of the first websites that allowed users to interact with data on a server. Applications, if you will. It’s well written, but I take issue with this:
The world wide web wasn’t supposed to be this fun. Berners-Lee imagined the internet as a place to collaborate around text, somewhere to share research data and thesis papers.
This often gets trotted out (“the web was intended for scientists sharing documents”), but it’s simply not true that Tim Berners-Lee was only thinking of his immediate use-case; he deliberately made the WWW project broad enough to allow all sorts of thitherto unforeseen uses. If he hadn’t …well, the web wouldn’t have been able to accommodate all those later developments. It’s not an accident that the web was later used for all sorts of unexpected things—that was the whole idea.
Anyway, apart from that misstep, the rest of the article is a fun piece, well worth reading.
Tagged with web history webapps internet arpanet interaction cern mosaic browsers forms interactivity wikis gopher software distribution html hypertext
Tim Berners-Lee ~ The World Wide Web - YouTube
There’s something very endearing about this docudrama retelling of the story of the web.
Tagged with youtube video tbl timbernerslee www documentary history technology hypertext cern links internet arpanet networking networks worldwideweb
Previously on this day
10 years ago I wrote Teaching in Porto, day three
Wednesday: interaction design.
12 years ago I wrote Tickets for the last Responsive Day Out
Get ready to pounce on March 3rd.
13 years ago I wrote Climbing Mount Responsive
Three days in Munich.
16 years ago I wrote New day rising
The present is a lumpy batter of the past and the future.
20 years ago I wrote Buddy icons
I’m a portrait taker, twisted portrait taker.
23 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.
25 years ago I wrote Olympic kid: 7-year-old's invention earns trip to Utah
That is one smart kid:
25 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.