Markup APIs and the Read/Write Web

In my previous post on how Web Components should inform the Mozilla Webmaker roadmap I make mention of ‘widgets, buttons, and badges.’ The context behind this grouping of things is Kin Lane‘s exploration of ‘Embeddable API Strategy‘ contributing to his work on defining API Building Blocks.

When Twitter first came out with their suite of embeddable widgets, it occurred to me that this was a way in which  web services could be democratized for hacking by the masses. I haven’t seen very many web startups build comprehensive widget offerings on top of their APIs, but the ones I have seen often tweak my personal vision for what the web can be.

I also haven’t seen very much written on the best practices of building an embeddable API strategy, and I think this is because we’re still in the early days of the practice. I also think Web Components finally landing could be the catalyst that changes this. Every consumer facing company with an API will want to make their users data available for mixing into the web. And if they don’t, their users may very well do it for them. Either way, Apps with APIs will be growing veins into the rest of the web more and more.

Last week Mozilla’s Atul Varma wrote up some thoughts in a post titled ‘Building Bridges Between GUIs and Code With Markup APIs‘ which not only upgrades our use of ‘widgets, buttons, and badges’ with the fantastic term ‘Markup API,’ but adds some serious clarity to how Markup APIs can preserve the accessibility of a read/write web as the web continues to Appify. This is some seriously important stuff!

A few weeks ago, I sent an email to Kin Lane and some people at Singly to talk about some of these ideas and how Webmaker could be an opportunity to define an embeddable API strategy for the entire web. I targeted Singly specifically because of how their dedication to personal data ownership is leading the development of their ‘API Fabric’ platform which generalizes an increasing number of APIs into a single sane API for developers to work with. A Singly Markup API would lower the learning threshold for anyone interested in remixing all of their personal information together in new ways.

Check out all the web services accessible via Singly’s API explorer: https://singly.com/explore

Now imagine if personal data from all of these services were available within Webmaker via Markup APIs.

I think Singly would make an excellent partner on Webmaker for this and many other reasons. Kin Lane and I are going to keep developing these ideas to see if this is a real opportunity.

In my previous post on this topic, I suggested that the x-tags registry could be thought of as a prototype for a Thimble Widget Directory. I stand by this idea.. but seeing as things keep evolving, I’m now going to call it a Webmaker Markup API Gallery prototype. We’ll see how long this moniker sticks around.

Speaking of ideas continuing to evolve, the Webmaker team got together this past week for some intensive hacking and yielded some exciting new prototypes which you can check out on Brett Gaylor’s blog! They are all extremely exciting, but the thing that stuck in my head was the ‘Save for Later’ experiment which provides a potential vector for integrating Webmaker with Firefox through the collection of web content intended for remix. Markup APIs should definitely be a collectible content type!

Furthermore, it would be super cool if there was a way for a Markup API to declare an interface for being hacked on within Webmaker. Imagine for instance if the Popcorn Maker timeline UI element was a hidden part of every Popcorn video or webpage with Popcorn content. Webmaker wouldn’t necessarily need to have Popcorn Maker code within the core application because the UI module for editing temporal based web content would come with content.

In this way, the content itself, once collected, extends the UI of Webmaker within the editing interface for ease of editing. Webmaker’s UX could be infinitely extensible this way, and it defines an avenue for getting everyone with an API in on the Webmaker vision for an accessible read/write web!

Aside from integration with ‘Save for Later’ prototypes, there’s another area where Markup APIs can help integrate Webmaker with Firefox: through Apps.

If a user installs an App with an API into their web browser, that user should have automatic access to their personal data through that API. And if an installed App has a Markup API, those widgets should automatically be a part of that users Webmaker experience.

The implication is that with every single App you install in your browser/OS, your ability to learn and make the web should grow.

Web Components and Mozilla Webmaker

A few days ago, Brett Gaylor posted a Popcorn presentation with some proposed use cases to inform the technical roadmap for Mozilla Webmaker. I’m actually jumping up and down right now because I’ve literally had this blog post (the one you’re reading at this very moment) ready to go for two weeks and the timing couldn’t possibly be better!

(I’d like to thank Jonathan Wilde and Daniel Buchner for looking this post over! I may be technical, but I’m not a developer by any stretch..)

The Web is advancing rapidly, and Mozilla is one of the major organizations driving it. In many ways, the web has been moving haphazardly from being document based toward being app based. For this and many other reasons, Mozilla is pushing hard in making sure the Web Platform is mature enough to support a web of apps. So much is happening at once it’s hard to keep track of it all! Nevertheless, I try and do just that. Once a futurist, the trendspotting never ceases!

There are some potential technical converges coming down Mozilla’s pipeline that I think need to happen much much sooner than later. These convergent opportunities lie between Mozilla Webmaker and the forthcoming Web Components model.

The Web Components model is one of the more exciting advancements coming to HTML5. Using this model, web developers will be able to create their own HTML tags thus making the web more extensible. Among its many benefits, Web Components will make it easier to develop Apps because Widgets will be more modular and have greater reusability. This essentially gives everyone the means to prototype extensions to HTML5.

By enabling the kinds of encapsulation of code currently managed by cutting edge javascript frameworks, Web Components is clearly going to enhance web developer ecosystems in ways impossible to foresee.

My intent here is not to explain Web Components, but to explore the potential implications for Mozilla Webmaker applications. If you’d like some additional background, are some good resources I’ve found.

The best video I could find!

The shortest video I could find!

The official WC3 introduction to Web Components.
WC3 documentation on Web Component use cases.
News on Web Components via Google+

Time for Popcorn!

As I’ve written before, Popcorn.js is a javascript library that brings a temporal dimension to the web. So far, the web has been a predominantly 2d medium. While WebGL brings the possibility for 3d graphics to the web, Popcornjs makes me think time itself could become the web’s natural third dimension. What does this mean in practical terms?

The way Popcorn Maker (a Mozilla product that lets you remix video with web content) currently works is by giving you a library of web content widgets called Events. The app lets you attach Popcorn Events directly to specific points of time in a video file. This is great for when you are doing post-process work on a video, but what if you want to start working on your web content before video editing has been finished? What if you wanted to start working on your web content before you’ve even begun shooting video?

Web Components would give us the ability to define more descriptive anchor points for Popcorn Events than is provided by the single static timeline of a video file. HTML gives us all sorts of <h> tags, <p> tags, <divs>, etc etc that describe spatially rendered relationships within a document. Perhaps it’s time we prototyped some markup for temporal layout.

I don’t know what kind of vocabulary would be best for describing temporal markup, but it strikes me that video production and stage play conventions provide some great inspiration. Imagine tags for segmenting time into sections such as <act></act>, <chapter></chapter>, <scene></scene>, and <commercial>. We could also have tags to describe the <transitions> between <scenes>.

Note that our markup vocabulary might go in a completely different direction if we used musical notation as our inspiration. These are artistic and technical questions for a future date.

If we were to create this kind of markup, how might we utilize it? Temporal markup would open up new avenues for development of Popcorn Maker toward professional application across the life-cycle of a production. It would allow us to segment media into discrete temporal segments so that we could manipulate groupings of events relative to one <scene> or another rather than relative to the beginning of a video. I think this could be a powerful way to develop the ideas Brett Gaylor proposes such as creating indexes (dvd style or otherwise), sequencing, and keyframing.

Furthermore, Web Components could help us create tools to for the flexible organization of Popcorn Events before even entering the Popcorn Maker editing interface.

Use case: Air Mozilla

Here’s a use case I really really really want to see happen: Popcorn for live video!

Mozilla has a weekly all-hands meeting that is streamed and archived by the Air Mozilla team. Each meeting has an agenda accessible via the Mozilla Wiki. Imagine if each meeting’s agenda was compiled with temporal markup. Let’s call this hypothetical app ‘Popcorn Agenda’.

Every item added to the Popcorn Agenda would be transformed into a Popcorn Event. People who are scheduled to speak could have a Popcorn Event linking to their appropriate online profile, while projects they are discussing could have relevant links prepped to pop up throughout the live video stream. If a speaker has a slide deck, these slides could also be added as Popcorn Events. When a meeting is set to begin, the live video feed would start streaming through an app we’ll call ‘Popcorn Streamer’.

Popcorn Streamer takes the content from Popcorn Agenda and layers it on top of the live video stream. Because meetings never run according to schedule, the Air Mozilla team could use Popcorn Streamer to manually step through Popcorn Events to make sure they align with what’s actually happening during the meeting. Once the meeting has ended, the video can be archived online with all the Popcorn annotation work having been done up front.

Mozilla Thimble

One of the questions in my mind regarding Mozilla Webmaker is how to bridge the gap between learning the web, and advancing the web. We don’t want to just make learning the web stack more accessible, we also want to make the deliberative processes by which the web evolves more accessible. When combined with Mozilla Thimble and MIT Media Lab’s Scratch, I believe Web Components could play an important role in making this happen.

Right now, Thimble is a simple tool for creating and hacking away at simple Web pages. What if we were to throw Scratch into the mix? Looks like we’re already exploring this direction! Awesome! Now, what if Thimble were to take a page from Popcorn Maker and generate embeddable content? What if this embeddable content was structured through Web Components?

Suddenly, not only would new Webmakers be learning how to make web content and javascript widgets they can share, they’d suddenly be learning how to create their own web markup! What was once the domain of standards bodies is now accessible to anyone and everyone.

Of course, this implies a fourth content type I’d like to propose for Webmaker: discrete and embeddable javascript widgets.

Use Case: a Thimble Widget Directory

Imagine a directory of the best reusable web elements created by and for Webmakers everywhere. Actually, there’s no need for imagination here because just a few hours ago Mozilla’s X-tags team launched a new version of their project site which includes an X-tags Web Components Registry. You might consider this a prototype for a Thimble Widget Directory. I propose the scope of the X-tags project should be expanded beyond the scope of infrastructure for FirefoxOS development to really turbocharge Webmaker programming.

X-Ray Goggles

For the bonus round, here’s an idea for X-Ray Goggles: A tool for content collection. Beyond mere poking and prodding web pages to see what makes them tick, X-Ray Goggles could become a mechanism for collecting Web Component powered widgets for reuse in Mozilla Thimble and Popcorn. This could turn learning web development into, well.. a collecting game experience not unlike Pokemon or LittleBigPlanet! There are some potential content ownership issues here, but perhaps this would be an opportunity to start discussing how infrastructure for attribution might fit into the Webmaker mix.

Conclusion

I’ll be exploring this collection of ideas (teaching javascript, asset inventories, showcasing galleries of widgets, buttons, and badges, etc) in more detail in another post.

If I had to offer some advice to the lizard, it would be to throw more resources at the X-tag project team so that they can collaborate closely with the various Webmaker software development teams. Web Components may not yet have landed on the web proper, but I think it’s imminent enough that Webmaker roadmapping efforts will be made much stronger by starting to take them into account now.

As an aside, I think exploring the synergies between Webmaker and Web Components at this early point could help create some strategic clarity in the longterm (2014+) relationship between Mozilla Webmaker and the Mozilla Developer Network. Webmaker should evolve into a platform that gives learners pathways toward many forms of creativity on the Web. One of these pathways clearly leads deep into app-land.