October 11, 2014
From Mozilla to new making

Yesterday was my last day as an employee of the Mozilla Foundation. I’m leaving my position as VP, Webmaker to create an interactive web series about privacy and the economy of the web.

I’ve had the privilege of being a “crazy Mofo” for nearly five years. Starting in early 2010, I worked with David Humphrey and researchers at the Center for Development of Open Technology to create Popcorn.js. Having just completed “Rip!”, I was really interested in mashups - and Popcorn was a mashup of open web technology questions (how can we make video as elemental an element of the web as images or links?) and formal questions about documentary (what would a “web native” documentary look like? what can video do on the web that it can’t do on TV?). That mashup is one of the most exciting creative projects I’ve ever been involved with, and lead to a wonderful amount of unexpected innovation and opportunity. An award winning 3D documentary by a pioneer of web documentaries, the technological basis of a cohort of innovative(and fun) startups, and a kick ass video creation tool that was part of the DNA of Webmaker.org - which this year reached 200,000 users and facilitated the learning experience of over 127,200 learners face to face at our annual Maker Party.

Thinking about video and the web, and making things that aim to get the best of both mediums, is what brought me to Mozilla - and it’s what’s taking me to my next adventure.

I’m joining my friends at Upian in Paris (remotely, natch) to direct a multi-part web series around privacy, surveillance and the economy of the web. The project is called Do Not Track and it’s supported by the National Film Board of Canada, Arte, Bayerischer Rundfunk (BR), the Tribeca Film Institute and the Centre National du Cinéma. I’m thrilled by the creative challenge and humbled by the company I’ll be keeping - I’ve wanted to work with Upian since their seminal web documentary Gaza/Sderot and have been thrilled to watch from the sidelines as they’ve made Prison Valley, Alma, MIT’s Moments of Innovation project, and the impressive amount of work they do for clients in France and around the world. These are some crazy mofos, and they know how to ship.

Fake it Till You Make it

Mozilla gave me a wonderful gift: to innovate on the web, to dream big, without asking permission to do so. To in fact internalize innovation as a personal responsibility. To hammer into me every day the belief that for the web to remain a public resource, the creativity of everyone needs to be brought to the effort. That those of us in positions of privilege have a responsibility to wake up every day trying to improve the network. It’s a calling that tends to attract really bright people, and it can elicit strong feelings of impostor syndrome for a clueless filmmaker. The gift Mozilla gave me is to witness first hand that even the most brilliant people, or especially the most brilliant people, are making it up every single day. That’s why the web remains as much an inspiration to me today as when I first touched it as a teenager. Even though smart people criticize sillicon valley’s hypercapitalism, or while governments are breeding cynics and mistrust by using the network for surveillance, I still believe the web remains the best place to invent your future.

I’m very excited, and naturally a bit scared, to be making something new again. Prepare yourself - I’m going to make shit up. I’ll need your help.

Working With

source

“Where some people choose software projects in order to solve problems, I have taken to choosing projects that allow me to work with various people. I have given up the comfort of being an expert , and replaced it with a desire to be alongside my friends, or those with whom I would like to be friends, no matter where I find them. My history among this crowd begins with friendships, many of which continue to this day.

This way of working, where collegiality subsumes technology or tools, is central to my personal and professional work. Even looking back over the past two years, most of the work I’ve done is influenced by a deep desire to work with rather than on. ” - On Working With Instead of On

David Humphrey, who wrote that, is who I want to be when I grow up. I will miss daily interactions with him, and many others who know who they are, very much. "In the context of working with, technology once again becomes the craft I both teach and am taught, it is what we share with one another, the occasion for our time together, the introduction, but not the reason, for our friendship.”

Thank you, Mozilla, for a wonderful introduction. Till the next thing we make!

February 13, 2012
Popcorn and Documentary

In this post I explore how Popcorn follows the tradition of technology influencing the form of documentary. This post was created with Popcorn Maker.

February 8, 2012
Mozilla Popcorn aka The Meme Generating Machine

meme ( /ˈmiːm/) “an idea, behavior or style that spreads from person to person within a culture.”

"A meme is an idea that behaves like a virus—that moves through a population, taking hold in each person it infects." - Malcolm Gladwell”

We need Mozilla Popcorn to become a virus.

Hear us out here.

In our early iterations of Popcorn Maker, we’ve been tackling the problem of how to make it easy for non-programmers to create Popcorn experiences. It remains the central focus of the project, and we’ve fleshed out our User Stories to imagine the full experience that a user might have. Ben has described these stories in a recent blog post.

During our Popcorn Maker sprint, we put a lot of thought into imagining how our users’ creations will get shared and disseminated on the web. Ben has blogged about how Popcorn.js is a gateway drug to learning JavaScript (Also of the good sort. Stay with us). Similarly, we want Popcorn Maker to be a tool for injecting the Maker meme onto the web.

Fork my meme

To do this, we’ll need to do a few things. First, we need to make it easy for Popcorn makers to embed their creations on their own blogs, Tumblrs and websites. This means offering <iframe>embeds.

More interestingly, we want to give viewers the ability to fork others’ Popcorn productions. If you’ve watched Jonathan MacIntosh’s Buffy Vs Edward pop-up video remix, for example, wouldn’t you love the ability to easily clone his creation and add to it?

Each Popcorn creation needs a post-roll that offers viewers the ability to 1) Replay, 2) Share and embed, and 3) Fork this creation.

Popcorn Gallery

To build WordPress-like community scaffolding, we need the ability for every single creation to be made available in the Popcorn Gallery. When users choose to [Share] from Popcorn Maker they have an option to share to the Gallery that is checked by default. While the Gallery will favour our default templates, it will become a jumping off point for new creators to get started with Popcorn. It will solidify the notion that creating on the web is generative. The act of creation will start by building on someone else’s work.

We think Popcorn will be a good bug to catch. Like getting the chicken pox when you were a kid. Or maybe more like taking an interest in photography. We’re sure this is the right metaphor. Note: knock knock jokes, box stores and lolcats were all considered as alternatives while titling this post. Go meme or go home.

April 2, 2011
Video: What is Mozilla?

I’ve been working on and off for many months on a video to explain Mozilla to the uninitiated. The home for the video is now on the Get Involved page of the mozilla.org site, and I’m excited that it will be part of a process for getting people excited about pitching in at Mozilla. You can watch it below: mega hats off to Rainer Cvillink, Mozilla’s in-house video wizard, for all the great camera work, and to Jenn Strom for editing and motion grapnics.

March 30, 2011
Videoblog: Buttercamp

Everyone is still recovering a bit from Buttercamp. Anna Sobiepanek beat us all to it with a great recap of the event, but let me say how thankful I am for the extraordinary effort the participants put into the day. We learned a lot about how to do events like these, and definitely left wanting to do more.

As Anna mentioned in her blog, our biggest lessons were a) the need for designers to be present, and b) that we should probably do these over two days. Scott Downe benefited from teaming with Zach Liberman, and mentioned that 2 developers are crucial for a team, so that if one struggles with a blocker, the other can forge ahead. Well noted.

Demos:

Note: these demos will all require a modern browser, may not work for you at all, and are the product of one day’s work.
GML + Popcorn:

http://scotland.proximity.on.ca/sdowne/popcornGML/gml+popcorn/
Integrating the Graffiti Markup Language (GML) XML standard with timed popcorn events.

Robots:
An experiment with “node” style decision forking using popcorn
http://robothaus.org/robots/

#18daysinEgypt:
To have popcorn events appear in specific locations on a full screen video, Brian Chirls wrote a popup video plugin. Video events that appear cause the main video to lower volume and loop.
http://code.chirls.com/buttercamp/

Digital Diaspora Road Show:
Accompanying the feature documentary Through A Lens Darkly, filmmaker Thomas Allen Harris creates “Roadshows” were participants explore how photography connects them to their heritage. This demo made extensive use of the Butter application, and to facilitate multiple editors, Boaz Sender added import/export functionality to the edge version of Butter.
http://dev.webmademovies.org/lensdarkly/
note: this demo does not work in Firefox due to mp4 only source.

Kapor Center Mural Unveiling
Trevor Parham used Butter initially for data entry, but then decided to focus on CSS and layout to create this compelling use case for popcorn: an annotated version of a recent event at the Kapor Center.
http://kaporcenter.org/files/video/

TubeyLoops
A modified version of PatternSketch, which controls videos via popcorn to create a video remix machine.
http://www.tubeyloops.com/tubeyloops/
note: use keyboard keys Q W E R to control video.

In addition to these demos, other plugins, connections, and starts of new projects were forged. Thanks to ITP, the Center for Development of Open Technology, Bocoup and Eyebeam for helping facilitate this meeting of great minds.

Buttercamp was:

Michael McCarthy Henrik Moltke Yasmin Elayat Kirby Ferguson Peter Asaro Peter Kaufman Ann Bennet Thomas Allen Harris Woo Cho Anna Sobiepanek Baowen Huang Ben Moskowitz Boaz Sender Bobby Richter Brett Gaylor Brian Chirls Elad Schanin Fred Truman Greg Dorsainville Ingrid Kopp Jeff Howard Jeremy Diamond Jonathan McIntosh Matt Thompson Rick Waldron Scott Downe Todd Carter Trevor Parham Yujin Yi Zachary Leiberman

March 24, 2011
Welcome Bobby Richter

I’m very happy to announce that Bobby Richter is joining the Web Made Movies team as Creative Technical Lead. Already a Mozilla contributor, having worked with the #audio team on a variety of demos and libraries, Bobby is joining us to, as he writes on his about page, “make Web Made Movie’s ideas tangible as quick as possible”. Bobby’s job will be diverse: contributing to the popcorn.js community, advancing the Butter platform, and helping to create magnetic productions as outlined in our 2011 goals.

Bobby brings a range of experience – from helping to create the NFB’s award winning Out My Window, to a stint at Electronic Arts, Bobby has both skill and experience that all of us on the media team are thrilled to have among our nascent group.

During our recruiting conversations, I was particularly excited about his experience with WebGL, and these discussions manifested themselves in a demo. Please check it out here – its an early peek at integration WebGL and Popcorn, via an homage to Mozilla’s JavaScript jedi master Brendan Eich.

Say hello to Bobby over at his blog, and you can find him on irc.mozilla.org in the #popcorn channel as “richter”, or sometimes under has super hero name, secretrobotron. Welcome, Bobby!

March 1, 2011
Butter screencast

As a part of our webmademovies.org relaunch, I thought I’d create a screencast of Butter, the authoring environment for popcorn.js. What do you think?

February 26, 2011
Web Made Movies at BAVC

Two things I learned this week:

1) Exercise caution when giving 12 high school students access to an etherpad that is projected against a wall

2) The Bay Area Coalition (BAVC)’s Factory program for youth is srs bizness

Mozilla has partnered up with the Bay Area Video Coalition and Zero Divide to implement the technologies coming out of Web Made Movies into the current curriculum of The Factory, a video collective for motivated youth in the Bay.

Ben Moskowitz and I came to meet members of the collective, and were joined by our Mozilla colleagues Atul Varna and Lukas Blakk. Lukas had recently been working with teenage girls at the Dare 2 B Digital Conference, addressing the gender gap in computer science, and Atul has been working on the Hackasaurus project with Drumbeat, a set of tools to encourage kids to hack the web. The 2 days at BAVC were for us a way to test some of our thinking about “web literacy”, to test the Butter authoring tool, and to meet the youth at BAVC. We were hoping that they’d understand what we were banging on about after the two days and would be inspired to bring a hacker ethic to their projects.

Our first excercise was to wake the HACKASAURUS. Everyone checked out the X-Ray Goggles, a fantastic tool that lets you see how a web page is put together, and modify elements of it. Paired with HTMLpad.org, which renders HTML typed into an Etherpad of the same name (try it - its awesome), the Hackasaurus tools teach the user that the web really is made up of many simple parts. To help visualize things, students printed out their favourite websites, cut them up, pasted them back together, and re-created their cutups in HTML. Its a great basis on which to start playing with popcorn.js - it puts one in the mindspace to consider “how can I hack this video?”. IMG_9852.jpg IMG_9861.jpg

Fortunately, our friends at Bocoup had pushed some last minute changes to Butter, the authoring tool for popcorn, and it was ready enough to be tested by the group. We loaded up one of their productions from last year, “The List”, which was a dramatization of the military recruitment that happens when students take standardized tests. There was a lot of factual information in the video, so it was a perfect test bed for popcorn.

IMG_9870.jpg
IMG_9875.jpg

The students formed groups and each took a section of The List and pulled it into Butter. They added semantic data, some hacked with Ben a method for displaying images on top of the frame, others linked to an HTML page that let users opt-out of recruitment, others brought in photos from flickr, articles from Wikipedia and maps of their school on Google Maps. Lukas wrote a quick script that would chain the videos together, and then we had a screening at the last minute!

IMG_9889.jpg
IMG_9886.jpg

You can watch the completed movies here - keep in mind these were created in two hours by a group that had never written any HTML, so we were well impressed.

One of the great things that came out of the workshop was a huge list of bugs for popcorn and butter created by the students that we can now bring back to the development community. We’re looking forward to coming back in April and working with The Factory through till the fall! IMG_9879.jpg IMG_9904.jpg

February 17, 2011
Web Made Movies 2011

Along with my other colleagues at Mozilla, I’ve been doing a lot of work lately thinking about what the rest of 2011 holds. It’s been great to read posts by Ben Moskowitz, Phillip Smith and Nathaniel James as they describe and forecast their work on the Knight/Mozilla Technology Partnership. It’s painting a great picture of Mozilla’s commitment to transforming media and journalism - I thought I’d share my plans as well in the video above.

January 31, 2011
Yes we did!

This past week, I was fortunate to be part of a great collaboration between Mozilla and the PBS Newshour team, creating an annotated version of Barack Obama’s State of The Union Speech using popcorn.js. While the demo itself is fairly humble, its actually quite an accomplishment given that we had only met the Newsroom staff the day of the speech during a meeting at the Corporation For Public Broadcasting. I think the Newshour team experienced the power of the open web first hand - a talented group of developers were able to collaborate quickly and produce something of high quality (not unlike a tv newsroom). So much so that we’ve begun a conversation on PBS to use popcorn.js in all of their future analysis.

The whole experience was a great example of the kind of innovation that we’re trying to foster with Web Made Movies: video producers come up with new use cases for technology , and the resulting code is put in a repository for future use. It’s proof that HTML5 video is a great space to be exploring.

David Humphrey and PBS Newshour recently blogged about their experiences. I thought I’d provide a blow by blow.

January 25th, 2011
Washington, DC: Ben Moskowitz, Nicholas Reville, Geoffrey MacDougall and myself are pacing around a presentation room at the Corporation for Public Broadcasting. We’ve come to express why we think there is natural alignment between public media and the open web.

10:00
A little bleary from travel, a previous day of meetings, and bad breakfast joint coffee, we meet a room full of people involved in American public media - PBS affiliate stations, the PBS Newshour team, National Public Radio, and others.

We had created some demos over the previous 2 weeks - including this popcorn treatment of a PBS Newshour piece on Hait (only the first several minutes are annotated). We also experimented with the WGBH Open Vault, creating a parser for their metadata schema that would translate into popcorn data (due to mp4 video, works only in webkit browsers. Ben and his cousin created this example video report, based on lesson plans in the PBS Newshour piece on Haiti. Nicholas at PCF also showed the results of a translation party that Universal Subtitles had hosted with PBS Newshour.

We felt the presentation went well - the room was definitely thinking about the possibilities present in popcorn, and immediately grasped the advantage of adopting Universal Subtitles.

11:30
After the speech, PBS Newshour correspondent Hari Sreenivasan remarked how they wished they had it for the State of The Union address. “Isn’t that tonight? Someone asked” Hari nods. A wireframe is sketched out.

3:00
We’re with Travis Daub, the Newshour’s digital producer. He’s on the phone getting the run down on when the video of the president’s speech will be on Youtube. He says midnight, and analysis will come in throughout the evening These news people stay up all night, too!

We hop on the popcorn irc channel (link). I ask David Humphrey at CDOT if he is up for bringing popcorn.js to the State of The Union. He laughs, of course he is. He asks if Anna Sobiepanek and Scott Downe who are co-op students at Seneca if they are in - you bet. Rick Waldron, a javascript ninja at Bocoup picks up on what is happening and starts writing code immediately based on the spec. Ben Moskowitz and I rush to keep up, posting wireframes, and communicating with Dean Jensen at PCF / Universal Subtitles who is co-ordinating the transcript that will be instumental in timing the analysis. Travis logs into IRC from his iphone in a cab.

7:00
Robert Bole for the Corporation for Public Broadcasting orders some Chinese food.

9:00
75% of the code necessary to convert PBS’ annotation system to popcorn. The wireframes are posted. Its gonna pull in twitter, have chapter selectors, wash your car, and email Obama. This is going to be easy. Lets watch the speech.

10:30
Travis starts uploading the video.

11:00
Snag. The encoded video doesn’t have audio. Travis will have to start again, and do it twice for browser compatability. Ouch. The video is so long that the encoding process is painful.

11:15
New snag. Servers seem to be failing.

1:00
Multiple snags. Grumpiness sets in. Travis valiantly posting new versions. Popcorn hackers have the analysis working with a dummy video - just waiting for the pieces to come together.

3:00 
The pieces are not coming together. The night is called.

The next day
A snow storm, a train travel, multiple taxis and subways, a hamburger at a breakfast spot - next thing you know its midnight again. Is it working yet? No, it is not. Inconsistencies in the transcript. Hotel Wifi killing us. Must sleep.

With a final push, and additional work in the morning, the bugs are ironed out. Vanessa Dennis at PBS Newshour adds styling and pushes to their blog on the front page. My favourite quote from theirblog:

“The Web is changing, and we at the PBS Newshour are changing with it through experiments like these.”

Experiments like these can be exhausting, but the thing I love about working with Mozilla is that we make change by building things. It feels great that Web Made Movies is really starting to accomplish this.

Liked posts on Tumblr: More liked posts »