View on GitHub

Folds

Download this project as a .zip file Download this project as a tar.gz file

Fork Your Own Adventure

This writing sample combines the Custom Directives feature, which AngularJS borrows from the W3C Web Components specification, with jsFiddle to show how an author could easily create a short story in the form of a classic "Choose Your Own Adventure". What is important here is that:

  1. If you look at the "HTML" tab, these are not regular HTML tags. Custom Directives allows me to create my own tags called Choose and Aside;
  2. Because this sample is hosted on jsFiddle and GitHub, if you want to change the story, you can fork it and change the ending;
  3. When Web Components is built into Firefox and Chrome browsers, the web is going to get a lot more exciting.

Click "Result" or "Edit in jsFiddle" to view demonstrator.

The original World-Wide Web was successful for a variety of reasons. A critical success factor was the "View Page Source" feature, which was provided by the first web browsers. This allowed developers and enthusiasts to self-educate and share code. This viral effect which contributed to early traction. One of the things I loved about the OLPC laptop, for instance, is a button that allows me to drop out of whatver I am currently doing and see the underlying Python code. Because of the way that JavaScript is included in HTML pages, the script portion of a page has historically been harder to see than the HTML. This difficulty increased with the advent of higher order libraries like JQuery and Prototype, but now, libraries can easily be hosted on GitHub and Google's Content Distribution Network (CDN), making it easy once again to open the hood and see what is happpening.

Essentially, "Fork me on GitHub" is the "View Page Source" for the next iteration of the World-Wide Web.

Using AngularJS to create a mashup

The Pig and the Box is a children's book written and drawn by a Canadian writer, producer and programmer known as "MCM", as a reaction to Access Copyright's Captain Copyright campaign directed at kids. Written in July 2006, it describes the negative side of Digital Rights Management (DRM). [Wikipedia]

The text itself is now available through Creative Commons, so I thought it would be entirely appropriate to turn it into a "mad lib", using my technologies of choice, AngularJS, a somewhat magical Javascript framework developed by a team at Google, and jsFiddle, a pastebin that operates on some of the same principles as GitHub.

Click "Result" or "Edit in jsFiddle" to view demonstrator.

What is important about the original text is both the message and the medium. There is clearly a statement here about interrogating copyright, and challenging our own assumptions about fairness of use; but more than this, truly this is an internet text, written through, within and about the internet; originally available through print on demand, now remixed and mashed up.

I think what is really important about this example is the way that jsFiddle allows you to easily "view source" the HTML, Javascript, and CSS that was used to create the example, which you can then tweak, fork, and reuse to your heart's content. This reveals an intersection between narrative, technology and presentation; content and context.

Taking this further, we need to question why we are taught as developers to separate concerns of presentation and business logic, into CSS and JavaScript, for instance; yet technologically it becomes difficult to separate branding in the same way. I should be able to access a document or a text stripped of any branding if I so choose, but in fact, the most catastrophic events that happen to the internet are when services like AdWords are interrupted, because they permeate so many sites and pages.

We need to better our understanding of how technology can operate with Open and Closed Brands and with Identity. I have written about Open Branding on my own site, and in an interview with the author of The Pig in The Box, on the O'Reilly Broadcast network.