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.

Webmaker Planning Season: “We know we’re winning if…”

It’s planning season over at Mozilla, and Executive Director Mark Surman is leading a discussion on their next year of Webmaker programming.

On the Webmaker mailing list, Mark continues the discussion in a number of threads. One line in the thread ‘2013 plans: audience‘ stood out where he wrote:

“We know we’re winning if: more and more people use, expect and demand the technical and creative freedoms offered by open technologies. We want 5 million users, 1 million webmakers and 25,000 mentors by 2014. (<–this still feels a little unambitous)”

I’d like to explore the qualitative aspects of the question regarding ambition. I think this is an important question to get right because of how core it is to telling the Mozilla portion of the Webmaker story.

I love the work Doug Belshaw is doing on defining web literacies! From the current wiki version of the web literacy white paper he’s working on:

“At it’s most basic, ‘literacy’ is the ability to read and write something. As we’re focusing on Web Literacies the ‘thing’ that we’re reading and writing is the web. In addition to this, however, as people become more literate we expect them to think critically and be able to look at the world from more than one perspective. For someone to be ‘literate’ they have to be aware that they are literate and be accepted within a wider community of literate peers.”

This actually got me wondering about other definitions of ‘literacy’ which led me to discover something interesting.. the UNESCO definition of literacy. UNESCO is of course the United Nations Educational, Scientific and Cultural Organization. They define literacy as:

“the ability to identify, understand, interpret, create, communicate, compute and use printed and written materials associated with varying contexts. Literacy involves a continuum of learning in enabling individuals to achieve their goals, to develop their knowledge and potential, and to participate fully in their community and wider society.”

If we want to discuss ambition, the UN isn’t a bad place to start. 🙂 I kept digging and found some other interesting things.

The UN’s ‘Official Source of Literacy Data’ sounds useful.

UNESCO’s ‘vision of literacy’ seems very compatible with Mozilla’s emerging vision of web literacy.

UNESCO has something called the ‘Education for All Movement’ that publishes a yearly ‘Global Monitoring Report’. The focus of their 2006 report was on literacy.

Chapter five of this report entitled ‘Why Literacy Matters’ seems highly relevant to this discussion. The opening blurb:

“This chapter explores the case for literacy,especially for youth and adults. It summarizes the foundations of the right to literacy through a review of international agreements, noting that literacy is both a right in itself and an instrument for achieving other rights. The chapter then reviews the broader benefits that result from literacy, in human, economic, social and cultural terms. Since literacy is a key outcome of education, it is difficult to separate the right to literacy from the right to education or the benefits of literacy from those of education.”

Here’s a link to the 11 page pdf for chapter 5. Definitely check it out, and for fun pretend every instance of the word ‘literacy’ is actually ‘web literacy’:

One thing that’s clear while reading this document is just how much research has gone into the impact of literacy!

Which begs the multi-million dollar question: What is the impact of web literacy specifically?

Given that the development of the web platform is a moving target, the impact of web literacy itself becomes a bit of a meta question relating to how we as a civilization deal with accelerating technological change. This isn’t just Singularity stuff.. this is who of humanity gets to benefit from the Singularity stuff. But I digress…

What’s striking to me about UNESCO’s education initiatives is how steeped they are in old paradigm thinking regarding education. Their 2013 report, in progress, is titled ‘Learning and Teaching for Development’ and lists curriculum, assessment, and achievement as priorities. Very 20th century. (They’d probably love it if FirefoxOS came bundled with a proprietary MOOC.)

While UNESCO acknowledges the importance of digital literacy, they lack the understanding and expertise to develop the metrics necessary to measure it.. let alone inform the UN’s policies impacting digital citizenship. This expertise must come from the bleeding edge where maker culture is rapidly prototyping the future of learning.

Moving forward, I think comprehensive research around web literacy along measures of socioeconomic impact should be a priority. This task is perhaps too big for Mozilla to take on alone, but potential for partnerships in this endeavor abound.. and the UN’s data on global literacy (linked above) might be a strong starting point for exploration.

All of this probably doesn’t help us come up with metrics for Webmaker success in 2013, but would certainly help frame it as an impactful initiative that makes the case for an Open Web more tangible to the world at large.

Sooo.. here’s my take on ‘how we know we’re winning’ at Mozilla!

We know we’re winning if:

  • More people see technology that doesn’t ‘work like the web’ as either fundamentally broken or unfinished prototypes of web technology. (Qualitative..)
  • Webmaker is used as a tool that expresses learning beyond web literacy. (Potentially hard to quantify.)
  • Webmaker becomes a channel that amplifies Mozilla’s ability to mobilize responses when the Open Web is being threatened. (Quantifiable!)
  • Webmaker development bridges the literacy gap with the Mozilla Developer Network and then swallows it whole! (Raawwwrrr!!)

CrisisCamp Boston and developing an app: InnCrisis

Last weekend I attended CrisisCamp Boston organized by the Hurricane Hackers out of the MIT Media Lab. I went primarily to work on the meta-community organizing stuff (as is my custom) but also ended up working on a crisis response app with some really cool peeps.

Before I get to that, a few links.

Many of you know that I use Evernote for absolutely everything.. but this was the first event where I experimented with publishing my personal notes as a means of public engagement. I found this really helpful for both communicating with collaborators as well as keeping my head on straight. My notes: http://j.mp/sandyboston

I ended up on video for this blog post. (I still find it awkward seeing myself on video.)

I was asked to follow up with a blog post on the Hurricane Hackers blog talking about how having  CrisisCamp events can help build disaster preparedness. I found the Occupy movement’s Occupy Sandy efforts to be especially inspiring, so I used them as a case study.

And now, onto the app!

Last weekend the NYC Office of Emergency Management put in a request for a hotel availability platform to streamline the process of sheltering people displaced by disasters like hurricane Sandy. A bunch of us naturally gravitated toward this project, and off we went!

We encountered a number of challenges (technical, legal, etc) along the way, and a few conceptual shifts.. but we ultimately decided on an app that:

  1. collects donations
  2. searches for hotel room availability with filters such as low cost
  3. enables hotel room booking using donations

We call it InnCrisis. Rather than deploying this app ourselves, we intend for InnCrisis to be a white label application that can be deployed by aid organizations to augment their existing placement efforts for people suddenly in need of shelter.

This app will be made possible by mashing up a few 3rd party API’s:

  • Kinvey as the app’s backbone
  • WePay for collecting donations
  • A hotel search and booking API. We’re currently looking at Cleartrip and Expedia‘s API offerings.

Over the course of the day, we were able to prototype the donation portion of the app. Here’s a video of Ryan Kahn presenting InnCrisis at the end of CrisisCamp Boston.

Blog  post with this video and additional notes at the Hurricane Hackers blog.

Ryan Kahn, Jonathan Wilde and I decided we want to continue working on this project, so we’re getting together today to discuss next steps.

If you’d like to track the progress of InnCrisis development, check out this google doc. And if you’re interested in helping out shoot me a tweet, or just start hacking away out our code on github.

being Clark Kent, investigative blogger

As I’m beginning to write this blog post, I see breaking news that the ‘New 52’ version of Clark Kent is quitting his job at the Daily Planet. I haven’t been following the development of this particular incarnation of the Man of Steel, but this turn of events feels right given the slowly ongoing agonizing death of print journalism.

As it turns out, I’ve been thinking about the dual identify of Clark Kent/Superman for the past few days.

Everyone wants to be Superman, myself included at one point or another. Over the past few years, I’ve been trying to act like Superman: capable of doing anything and everything. Oftentimes all at once. Reality check, I can’t.

But perhaps, neither can Superman..

A much explored theme in the DC multiverse: What’s it like to be Superman? He is essentially a beneficent demigod. He hears EVERYTHING and carries the weight of the world on his shoulders.. sometimes literally.

As Clark Kent, he has a completely different set of powers. He is a journalist. Whereas Superman is the focus of attention wherever he goes, Clark Kent has the power to direct attention. Superman is the stuff of legend, but Clark Kent is a storyteller who can actually write legend.

It just occurred to me that the lines of power between Clark Kent and Superman are beginning to blur in one key aspect: Clark Kent also hears everything. No, not because of his superpowered hearing, but because of Hootsuite.

Of COURSE Clark Kent uses Hootsuite! He’s a 21st century journalist and as of the latest comic book issue, he just up and quit the Daily Planet! Here comes Clark Kent, investigative blogger!

Clark Kent’s social network is more important than ever to not only grant him access to important happenings and secure his dual-identity cover, but also to maximize his unique brand of heroic impact. Social media is a valuable source of near-realtime information that would totally complement Superman’s super-powered hearing. Hootsuite is how Clark Kent would engage this power.

Superman may be as all powerful as he usually is, but Clark Kent continues to become more powerful as information technology continues to advance.

Clark Kent is becoming more powerful because we all are. Superman can hear everything and increasingly, so can we. Can we bear the same mantle of responsibility these abilities represent?

Social media represents an explosion of potential opportunities to do good, and even great things to make the world a better place. But how do you sort through it? How do you choose who and where to help when there is only one of you and a whole world in need? How do you decide where to most effectively focus your personal power? This is the same terrible issue Superman constantly has to wrestle with. No wonder he needs a Fortress of Solitude.

I’ve often found myself paralyzed by this very question. In fact, I’ve spent the past few months trying to get out of a personal rut that stems from not knowing how to answer this question for myself. Now that I’ve decided that writing will be my primary focus for the near future, the evolving character of Clark Kent is very much on my mind.

Ultimately what makes Superman who he is, aren’t his superpowers but the strength of his character. This is what makes Clark Kent especially interesting to me right now. He’s not only a journalist, he’s now a free agent at large! His powers are constantly growing with the strength of his social network and technological innovation continues to augment that network.

If ever Superman lost his powers, investigative blogger Clark Kent would still be the heart and moral compass of the Justice League. And yet he’d still face the same fundamental dilemma: How do you decide where your help is needed most?

I still don’t have a personal answer to this question, but I do know that no matter where I am or what I’m doing, I’ll always be ready to do my part when it’s time to form an organization like the Justice League. All of us are stronger than one of us …even if you’re Superman. And especially if you’re Clark Kent.

rambling on fractal automata

I’m fascinated with the idea of Stem Cells and everything they represent. Not only in the realm of the scientific, nor merely the new horizons of medicine they promise. Stem cells are the perfect metaphor for my particular brand of futurism. They encapsulate everything that propels me irrationally forward through a life that I might otherwise choose to perceive as nihilistically meaningless. Stem cells are pure potential. The key to unlocking the secrets of time. To me they represent the promise of a rebellious syntropic universe fighting against the dying light of entropy.

I should be clear that I’m not just talking about biological Stem Cells here. I’m talking about a more general set of patterns that can be found across scales of reality. I’m talking about people, startups, cities, and planets.

I’m talking about patterns of renewal that build upon the scaffolding of history.

The Roots of Inspiration

Let’s take this from the top. New ideas can lead to bursts of creativity that define us. Over the past decade, few ideas have captured my imagination as much as that of STEM (Space, Time, Energy, Matter) compression. John Smart explains this concept in a blog post titled “The Race to Inner Space“:

As Carl Sagan famously argued in the Cosmic Calendar metaphor of Big History, life on Earth has been engaged in a continual acceleration of structural and functional complexity emergence since its birth 3.8 billion years ago. At the same time, each newly emergent complex system, from stars to cities, from prokaryotes to computers, uses vastly smaller quantities universal space, time, energy, and matter or STEM, per novel information production, computation, or physical transformation, than the system that came before it. We may call this phenomenon STEM efficiency and density increase, or STEM compression, and we can see and measure it in spatial, temporal, energetic, and material terms. Over time, the leading edge systems use ever less of the resources of “Outer Space” to generate ever more novelty, intelligence, and capability in “Inner Space”, an exciting and apparently universal process. If this astonishing trend continues, our and other universal civilizations may eventually reach black hole level computational efficiency and density  and transcend our universe, a topic I’ve speculated on in the Transcension hypothesis.

While the Transcension Hypothesis and the Technological Singularity are fun to think about, I’m less interested in arguing about where STEM compression might be taking us and more interested in exploring the how. This conceptual framework gives us a trajectory we can explore use to identify key opportunities for growth.


It’s striking how STEM compression seems to manifest by breaking through thresholds of emergent complexity. The big bang, single celled organisms, multicellular organisms, people, cities, mobile apps… there’s always a threshold of life (for lack of a better term) during which the same ol’ stuff keeps happening for a relatively long period of time.. until the dam breaks and a whole new order of complexity emerges on top of everything that came before. A new scale of reality is born. A new zoom level to explore and navigate.

Present at every scale are these ‘patterns of renewal’ I mentioned earlier.

I’m not entirely sure if these patterns are full contributors in or mere byproducts of passing through these thresholds (perhaps a bit of both), but I believe it’s when these patterns are formalized and aligned across multiple scales of life that threshold breakthroughs can occur.

Patterns of Renewal

If we identify the automata that make up these patterns of renewal perhaps we can replicate them across different scales of life and align them.

An example of what I mean: What can we learn about ecosystems that support biological Stem Cells that might inform how we construct ecosystems that support Startup businesses?

And then, what happens when we align our biological ecosystems with our business ecosystems? What happens when we merge information technology with our biological processes? Align the health of our internal organs with knowledgeable communities of practice?

Btw, this is already beginning to happen. Nike+ was just the beginning. When you combine cheap biosensor hardware, mobile web apps, cloud computing and medical practices focused on personalized medicine, a radical new vision for healthcare begins to emerge.

Here’s one interesting group focused on driving this change: RockHealth

The political dialogue around healthcare reform doesn’t yet take the fact into account the fact that we’re well on our way toward becoming fully integrated iCyborgs over the next few years and decades. Maybe it should?

Back to Startups! They’re hard! They take a long time! Sure, the cost of bootstrapping a web startup has dropped to mere thousands of dollars from the millions that typified the original dotcom boom, but building infrastructure to start a new business still takes a lot of time and effort! Where are we at in the maturity of our Startup ecosystems, and where will the next breakthroughs come from that speed up our collective ability to innovate, profit and build a better world?

As Startups are where the majority of economic growth comes from, we should see them as a source for hope. In fact, I see Startups as the diametric opposition to Terrorist cells. I intend to develop this idea further in future posts. So much of the discussion regarding national and global security is purely reactionary. This is extremely counterproductive and I have a feeling that Startup ecosystems could and should form the backbone of proactive global security strategy.

Cities! Of everything I learned during my time working with John Smart, perhaps the most valuable has been this phrase: “Density is Destiny.” Cities exemplify STEM compression like nothing else! The speed at which things happen in a city with strong rapid transit and high population density is astonishing. Between Atlanta (my home city) and Boston (my current city) it’s like night and day! As humans, we tend to clump together, and we’ve already passed the half-way mark in terms of populations clumping in and around cities worldwide.

The discussion regarding global sustainability is tightly linked to that of local resilience, so it’s clear that developing strong Startup ecosystems is key pattern of renewal at multiple subscales.

Renewal of the Spirit

At the core of all this is the exploration is the human spirit and the drive toward creative expression. We’re hardwired for it. We like to explore our limitations and break through our boundaries. We fall in love and make things. Sometimes these labors of love take the form of art, business, technological doohickies, and other times, children.

I saw a meme the other day which struck me. It went something like: “Food is healthcare, Medicine is lifecare.” This made me think about the Native American (or at least Lakota?) notion of ‘true medicine’: continual growth and renewal in harmony with nature. It makes me think of the Japanese principle of ‘Kaizen‘ and the Zen Buddhist principle of ‘Beginner’s Mind‘. These are all things that have inspired me and remind me what I find to be important.

We live in exciting times of unprecedented opportunity, but taking full advantage of them requires a mindset shift. And then another. And another..

I suppose in a sense, I’m not writing about renewal of the human spirit in a general sense as much as I’m writing about my own. It’s important to shed old skins, and over the past few months I’ve gotten stuck trying to wear some old ones instead of moving onto the new. Oftentimes, it takes a return to basics to make this happen. That’s what this post is for me.. a personal but public reminder of what’s important to me and what drives my curiosity and everything else that I do.

I’ve spent the past decade learning a great many things while working with a number of inspiring people. I’ve been driven by the question of how to make the world a better place, and this past decade has primarily been an exploration of this question. I didn’t fully expect to, but I ended up finding answers to my questions! Then I froze for a bit. 🙂

Now, before I’m able to move on to applying what I’ve learned in my short (nearly) 28 years, I know I need to synthesize much of it in writing and share it. So, that’s what I’m up to.

So, here’s to the spirit of renewal! For the foreseeable future (the next few weeks/months) I’ll be defining myself as a writer and exploring these ideas in more detail. And who knows what after that?