Archive: September, 2013

Even before a line of code was written for the line-mode browser simulator when we gathered together at CERN, there was a gleeful period of digital spelunking.

We poked at the markup of the first ever website…

• What’s that NEXTID element? Turns it out it’s something specific to the NeXT operating system.
• Why does the first iteration of HTML already contain H1 through to H6? It’s because they were lifted wholesale from a flavour of SGML—Standard Generalized Markup Language—that was already in use at CERN.

Oh, and Brian asked Robert Cailliau why they went with the term World Wide Web. “Well,” he said, “we had to call it something. And we thought we could always change it later.”

Then there was the story of the line-mode browser. It was created by Nicola Pellow, who was a student at CERN in 1990. She later worked on the Mac browser but her involvement with kickstarting the world wide web ended around 1993. She never showed up to any of the reunions.

We poked around in the (surprisingly short) source code of the line-mode browser. We found the lines that described how elements should be styled—the term “style sheet” appeared in a comment!

If you’ve fired up the line-mode browser simulator and run some websites through it, you’ll probably see occasions where a whole bunch of JavaScript—nestled between script tags in the head of the document—gets rendered to the screen.

We could’ve hidden that JavaScript, but we made a deliberate decision to display it. That’s what the line-mode browser would have done. The script element didn’t exist back then. Heck, JavaScript didn’t exist back then. So browsers would have handled the unknown element in the standard HTML way: ignore the opening and closing tags and just render what’s in-between them. That’s still the error-handling model for unrecognised elements in HTML.

This is why we used to write our JavaScript like this:

<script language="JavaScript" type="text/javascript">
<!--
(JavaScript goes here)
//-->
</script>

The HTML comments stopped the JavaScript from being rendered to the screen in older browsers (like the line-mode browser). Using the opening HTML comment <!-- is functionally equivalent to // single-line comments in JavaScript …although you still need to prefix the closing --> comment with a //.

I remember doing this when I first started making websites in the 90s. You can see it if you view source on the first version of this website.

Later on, we all switched to XHTML so we updated the syntax to make it valid XML.

<script type="text/javascript">
//<![CDATA[
(JavaScript goes here)
//]]>
</script>

The <![CDATA[ part stops an XML parser from trying to parse the JavaScript. But HTML parsers would choke on that because it starts with an angle bracket. Hence the JavaScript-style // comment.

Anyway, we don’t bother with HTML or XHTML comments at the start of our script blocks anymore. And that’s why the line-mode browser simulator renders the JavaScript to the screen.

Note that the JavaScript isn’t executed. That’s thanks to a clever little hack by Remy: the line-mode browser simulator changes the type attribute of every script element to text/plain, effectively defusing them. Smart!

One of the great pleasures of putting on Brighton SF right before last year’s dConstruct was how it allowed me to mash up two of my favourite worlds: the web and science fiction (although I don’t believe they’re that far removed from one another). One day I’m interviewing Jeff Noon about his latest book; the next, I’m introducing Tom Armitage on stage at the Brighton Dome.

Those two have since been collaborating on a new project.

You may have seen Jeff’s microspores—a collection of tweet-sized texts, each one an individual seed for a sci-fi story. Here’s Spore #50:

After the Babel Towers attack, lo-fi operators worked the edges of the language, forging new phrases from the fragments of literature. They filled boxes with word shards in the hope of recreating lost stories.

Tom has taken that as the starting point for creating a machine called the literary operator

It’s quite beautiful. It fits inside a suitcase. It has an LED interface. It has a puck that nestles into the palm of your hand. It comes with a collection of books. You take the puck in your hand, pass it over the spine of one of the books, and wait for the LEDs to change. Then you will receive a snippet of reconstructed text, generated Markov-style from the book.

As Tom says:

It is an object that is both entirely fictional, and entirely real. Not “design fiction”; just fiction.

You can use/play with the literary operator—and hear from Tom and Jeff—this Thursday evening, September 26th at the Brighton Museum as part of Digital Late. Sarah and Chris are also on the bill so don’t miss it: tickets are a fiver if you book ahead of time.

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.

And so we gathered in a war-room at CERN on the 18th and 19th of September to hack away at recreating the experience of using the line-mode browser in a modern browser—browserception!

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.

We made a thing

It will probably move from its current URL—line-mode.cern.ch—to a permanent home. In the meantime, why not grab the code and install a copy locally?

1. Install Node.js.
2. Clone the github repo to your machine.
3. Open up the Terminal, navigate to your cloned copy, and type: node .
4. 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:

line-mode.cern.ch/www/proxy?url=http://adactio.com

Or, if you’re running it locally:

localhost:8000/www/proxy?url=http://adactio.com

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.

Thanks to everyone who helped me test webmentions that I hacked together at Indie Web Camp last weekend.

Let me explain what web mentions are all about…

Basically, it’s an equivalent to pingback. Let’s say I write something here on adactio.com. Suppose that prompts you to write something in response on your own site. A web mention is a way for you to let me know that your response exists.

If you look in the head of any of my journal posts, you’ll see this link element:

<link rel="webmention" href="http://adactio.com/webmention.php" />

That’s my web mention endpoint: http://adactio.com/webmention.php …it’s kind of like a webhook: a URL that’s intended to be hit by machines rather than people. So when you publish your response to my post, you ping that URL with a POST request that sends two parameters:

1. target: the URL of my post and
2. source: the URL of your response.

Ideally your own CMS or blogging system would take care of doing the pinging, but until that’s more widely implemented, I’m providing this form at the end of each of my posts:

Either way, once you ping my web mention endpoint—discoverable through that link rel="webmention"—with those two parameters, I just need to confirm that your post does indeed contain a link to my post—by making a cURL request and parsing your source—and then I return a server response of 202 (Accepted).

Here’s the code for a minimum viable web mention in PHP.

That’s as far as I got at Indie Web Camp but it was enough for me to start collecting responses to posts.

The next step is to do something with the responses. After all, I’ve already got the source of each response from those cURL requests.

Barnaby has a written a nice straightforward microformats parser in PHP. I’m using that to check the cURLed source for any responses that have been marked up using h-entry. That’s one of the microformats 2 vocabularies—a much simpler way of writing structured content with microformats.

Aaron, Amber, and Barnaby all sent responses that were marked up with h-entry so now their responses appear in full.

So there you have it. Comments are now open on every journal post on adactio.com …the only catch is that you have to write the comment on your own site. And if you want the content of your post to appear here (instead of just a link) then update your blog post template to include a handful of h-entry classes.

Feel free to use this post as a test. Mark up your blog with h-entry, write a post that links to this URL, and enter the URL of your post in the form below.

It was a crazy time in Brighton last week: Reasons To Be Creative followed by Improving Reality followed by dConstruct followed by Maker Faire and Indie Web Camp. After getting some hacking done, I had to duck out of Indie Web Camp before the demos so that I could hop on a plane to Germany for Smashing Conference—the geek party was relocating from Brighton to Freiburg.

I was there to deliver the closing keynote and I had planned to reprise a talk that I had already given once or twice. But then Vitaly opened up proceedings by declaring that the event should be full of stories …and not just stories of success either; stories of failure. Then Elliot opened the show by showing some of his embarrassing early Flash websites. I decided that, in the spirit of Vitaly’s entreaty, I would try something similar. After all, I didn’t have anything quite as embarrassing as Atomic Kitten or Hilary Duff e-cards in my closet.

So I threw away my slidedeck and went Keynote commando. My laptop was connected to the projector but I only used it to bring up a browser to show embarrassing old sites like the first version of adactio.com complete with frames, tables for layout, and gratuitous DHTML animation. But I spent most of the time just talking, telling the story of how I first started making websites back when I used to live in Freiburg, and describing the evolution of The Session—a long-term project that’s given me a lot of perspective on how we often approach our work from too short a timescale.

It was fun. It was nice to be able to ditch the safety net of slides and talk off-the-cuff to a group of fellow geeks in the intimate surroundings of Freiburg’s medieval merchant’s hall.

I finished by encouraging people to look out the window of the merchant’s hall across to the splendid cathedral. The Freiburger Münster is a beautiful, magnificent creation …just like the web. But it’s made of sandstone and so it requires constant upkeep …just like the web. The Münsterbauverein are responsible for repairing and maintaining the building. They can only ever work on small parts at a time, but the overall result—over many generations—is a monument that’s protected for the future.

I hope that when we work on the web, we are also contributing to a magnificent treasure for the future.

If you were at dConstruct last week (lucky you!), you will have heard this music during the breaks. All of these tracks are licensed under a Creative Commons Attribution Licence.

• Novia En Venus by The Satellite
• Melting Sky by Kaminishi
• Safe and Sound (Loon Calls) by Daughters and Orchids
• Fabula by Ghost Orchid
• …I No Longer Know What I Say by ANOA
• A-5 by Elipsys
• Sorrow by Salter Cane

Yes, that last one is from my band—a little bit of audio nepotism.

dConstruct 2013 …wow! I could try to describe it but you kind of had to be there.

At the after-party—which was held right there in the Brighton Dome; a new twist which worked out great—I kept hearing people enthuse that it was the best dConstruct yet (although dConstruct 2012 was pretty bloody amazing). People congratulated and thanked me, which made me feel like a bit of a fraud because, frankly, I was very selfish in my curation: I got the speakers I wanted to see, talking about the topics that I wanted to hear.

I’ll admit that it was very gratifying to find out that trusting my gut worked. Let’s face it, it wasn’t exactly a safe or typical line-up for a tech conference. I’m feeling vindicated (and very relieved) that the risks paid off. And how!

Every single speaker was amazing. Seriously, I’m trying to think of how I can thank each of them, but I keep coming up short. Words alone can’t express how grateful I am to all of them. Each of them put in so, so much effort …I was truly gobsmacked.

The cumulative effect was astounding. There were emergent themes and strands that were woven throughout the day, resulting in the perfect balance. The two over-riding feelings were fear and fun. The audience were, by turns, terrified and entertained.

The topic of “Communicating With Machines” resonated wonderfully with other Brighton Digital Festival events too: dConstruct, Improving Reality, and Immaterials felt like they were all tackling the tricky task of making the invisible visible—networks, power structures, technologies—but the dConstruct speakers did it with bucketloads of entertainment value thrown in. I can’t remember the last time I laughed so much at an all-day event.

Mind you, it didn’t feel like a long day. The time just flew by! I thought it was just me but then lots of other people said the same thing at the after-party. That’s quite something when nine talks just whizz by without a single dip in quality.

Seriously, I am blown away by the generosity and talent of the speakers.

Amber, Luke, Nicole, Simone, Sarah, Keren, Maciej, Dan, and Adam: thank you so, so much!

Video and audio from dConstruct 2013 will be available soon …but you kind of had to be there. And if you were there …thank you!

Once again, @dconstruct was amazing.

— gregone (@gregone) September 6, 2013

Leaving Brighton with that familiar post-@dconstruct “I remember how to be excited about things now” feeling.

— Alex Muller (@alexmuller) September 6, 2013

.@dconstruct exceeded my expectations as a first-timer; fantastic speakers and topics!

— Adam Brewer (@adamcbrewer) September 7, 2013

Great day @dconstruct yesterday. I’d pick a highlight but the whole thing was brilliant.

— Laura McCartney (@laufofbread) September 7, 2013

Yesterday’s dConstruct was the best yet, and the most entertaining conference I’ve ever attended. Thanks @adactio and co

— Mark Kirby (@markirby) September 7, 2013

#dconstruct was once again very inspiring, best conference of the year. @adambuxton must be an alien or sutin

— Ciaran Park (@ciaranpark) September 6, 2013

So, dConstruct was superb. That is all.

— Paul Wilson (@paulanthonywils) September 6, 2013

I’m at Indie Web Camp and we’re onto the second day, which involves hacking on stuff (the first day involved discussing stuff).

I’ve had my head down attempting to implement webmentions on my site—basically a simpler form of pingback.

This probably won’t work, and this is the first basic step, but if you write a reply to this post on your own site, you should be able to ping me by entering your post’s URL into the form under this post.

Now, this is just a first run so all I’m doing is gathering the pings—I’m not actually going to fetch and parse your post; that step can come later. But if you want to help me kick the tires on this, write something on your site that links to this post and then enter your post’s URL below.

If you’re already in Brighton for dConstruct this week, there are two art shows you might want to check out:

Timo Arnall and friends are presenting their Immaterials exhibit at Lighthouse, 28 Kensington Street. Timo has written a few words about the exhibit. The exhibition is open from tomorrow, September 5th until October 13th, and the opening is tonight, Wednesday, at 6pm.

Just around the corner at the Ink-d gallery on North Road, the opening of Jon Burgerman’s exhibit is happening at exactly the same time: 6pm this evening. His Failure of Judgement exhibition runs from tomorrow, September 5th to October 6th.

Jon’s opening will also include the debut of the world’s first “Jon Burgerman Veggie Burger” courtesy of Burger Brothers next door.

And if you haven’t gorged yourself too much on art after this evening, don’t forget that there’s a whole programme of different art shows running this month at 68 Middle Street.

It’s dConstruct week—just a few more sleeps to go! The speakers are starting to arrive into town, the conference badges have been delivered, and the epic task of applying hundreds of stickers to hundreds of badges has begun.

The Brighton Digital Festival is already in full swing. Reasons To Be Creative kicked off yesterday so the town is already full of geeks hanging out, drinking coffee, listening to talks and discussing them afterwards over a beer, and generally having a good time—exactly the kind of Brighton behaviour that curmudgeons like Andy and Colly love to hate.

The Immaterials exhibit headed up by Timo is opening at Lighthouse tomorrow. I’ve been walking past in the mornings coming into work and it’s looking fantastic. Although it did lead to a moment of cognitive synaesthesia:

Listening to an @stml podcast, I walked into @TimoArnall’s exhibit being readied at @LighthouseArts. http://t.co/tmxA6Y5JDv #NetworkRealism

— Jeremy Keith (@adactio) August 30, 2013

Meanwhile over at 68 Middle Street—soon to be Clearleft’s new home—an exhibition of The New Sublime is already underway.

There’s so much going on this week: Reasons To Be Creative from Monday to Wednesday, Improving Reality on Thursday, Maker Faire and Indie Web Camp on the weekend, and, of course, dConstruct on Friday.

I’m so excited about this year’s event! It’s definitely not your typical web conference and it’s certainly not your typical conference line-up. It’s going to be a blast spending the day in the company of such splendid speakers.

If you’re coming to town for dConstruct—or for any of the other wonderful events going on—here are a few tips on some places to eat…

The Guardian recently published a list of the top 10 10 budget restaurants and cafes in Brighton. Seems like a pretty fair sampling. The Seven Bees cafe is recommended for its fry-up—a recommendation endorsed by Lomokev who has eaten and photographed just about every fry-up in Brighton and beyond.

Chris has put together a Foursquare list of places to try.

On the weekend, the Brighton and Hove Food Festival will be running its market on New Road and Jubilee Street, right by the locations of Maker Faire and Indie Web Camp, so there’ll be no shortage of tasty treats on offer.

On the day of dConstruct itself, we won’t be providing lunch, but we have arranged for some discounts at nearby cafés and restaurants. Also, it’s a Friday and that means Street Diner will be happening just up the road from the Brighton Dome.

Alas, the weather forecast is looking pretty damp for Friday—even though it’s going to be gloriously sunny until then—so be sure to bring your brolly.