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.


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.

newest oldest
Notify of

There actually is a temporal markup: Synchronized Multimedia Integration Language (SMIL): http://en.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language. Portions of SMIL are incorporated into SVG, and as of HTML5, SVG is part of HTML, so there are SMIL elements that work in browsers now. Whether or not they do what is needed for Popcorn is another matter, of course, as their intent is for SVG animation.

On the other hand, we’re seeing bits of SVG re-purposed already for CSS, so it’s not out of the realm of possibility. The elements you propose have higher semantic clarity than , but another possibility would be to use Web Components to define or using for the implementation in the Shadow DOM.

I’m a big fan of x-tags, but they’re only a shim over the custom components of Web Components, without the support of templates, decorators, and (most important) the shadow DOM. I really can’t wait for the real thing to land.

Captain Lyre Calliope

Sooooo… SVG is one of the trigger words that throws me into geektastic ranting!

I grew up a huge animation fan. I still go to Samurai Jack every once in awhile for inspiration. I’m also really into art nouveau and vector art and stencils and and and..

I don’t know enough about the toolkits available for vector animation other than some vague awareness that Adobe has had the most widely used. But I’m really really excited about the possibilities of having SVG as part of HTML5 because I don’t think we’ve even scratched the surface of what will be possible aesthetically.

I’m constantly imagining a world in which the animation I grew up with becomes hackable web technology, and I must admit that whenever I watch something like Avatar: The Last Airbender or the new My Little Pony I’m imagining a near present where what I’m watching is not just a 2d virtual world/game but a fully interactive and distributed social web experience that I can jump into for cocreation and remixing. (Yes, I experience all animation as metaversal sci-fi: a 2d Snow Crash extrapolated from today’s open web.)

All that to explain one of the scenarios that’s on my mind when I make proposals like this. I didn’t know about SMIL, but it makes total sense that this is ground that’s been tread before. I’m definitely looking forward to seeing how temporal markup evolves once Web Components lands specifically because of the level of creativity I know it can unlock for the web!


Well, I can relate to these sentiments on several levels. Awhile back I was writing an OS X app for easily sketching animations, which could export to SVG, and which I’m planning to rewrite (and complete some missing bits from) for the web to just use SVG directly. (http://livingcode.org/projects/drawingboard/)

My main project these days (outside of my work at Mozilla) is http://waterbearlang.com/ and one of my dreams is to have a Saturday Morning-style cartoon where the Waterbear and his pals solve problems by breaking them down into subproblems and then solving the subproblems (essentially, teaching programming). Not only do I want Waterbear to be the first programming tool to have its own animation series, but each episode should be open content, remixable with Popcorn (or Thimble or Waterbear) so kids have a big pool of components for making their own animations.

Whenever I see people using game engines to make machinima, I think, what if they had tools specifically to make animations with, rather than having to jury-rig movies from Halo or whatever. Moviestorm and Xtranormal are interesting moves in that direction, but there is plenty of room to go further.

Good discussion, happy to know you’re excited about these directions too.

Captain Lyre Calliope

I am so in! I’d like to help write scenarios. I’d also like to be an animated character.

Educational children’s media was definitely on my mind when I decided to take the name ‘Captain Lyre Calliope’ three years ago. My warped sense of reality will be webbified. I’ve got it all planned out..


[…] 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 […]

Michelle Thorne

Thanks for this really thoughtful post! I love the very concrete experiments we could try plus the broader implications of Web Components + Webmaker. The widget directory is also brilliant, as it’d encouraging sharing and remixing.

CaptainCalliope is Live on Twitch