Frequency a page is viewed (as a percentage of total views) vs. pages (ordered by frequency); data taken over the last 90 days. I guess there’s something to this “long tail” stuff after all.
January 26, 2012
Greg Wilson
Our Long Tail
Never Mind the Content, What About the Format?
I’m still gnawing on the problem of how to construct content for 21st Century learning—or, more prosaically, what I should use to build the next version of Software Carpentry. My starting point is the need to serve several different kinds of users [1]:
- Zuzel likes textbooks. More specifically, she likes prose that she can read and re-read at leisure. She’ll use a tablet, but would rather listen to music while she learns than to someone lecturing.
- Yeleina prefers interactive learning. She wants to see things evolve on the whiteboard or on the screen; recordings of live coding sessions with voiceover are OK, but slide after slide of bullet points puts her to sleep. She also wants to be able to share ideas about learning content with her peers.
- Xanthe is a surfer, not a diver—she wants to skim the pages that Giggle searches turn up and piece things together herself. Bullet points and brief sentences work well for her, particularly in areas she’s already familiar with.
- Wafiya teaches programming at a city library. She needs to remix content created by other educators to meet her learners’ needs, but doesn’t have a lot of time to do so. She also needs to be able to find content that fits into her (individualized and group) learning plans.
- Veronique is a programmer who is passionate about teaching. She spends several hours a week writing short tutorials, answering questions in Stuck Underflow and other online forums, and occasionally recording screencasts. She’d like to do more with less effort (she finds today’s tools frustrating), to make the content she’s creating more useful, and to get more feedback from its users.
Their learning options today are:
- Textbook: big blocks of prose in some narrative order, with pictures, either printed or electronic, read at the learner’s pace, alone.
- Zuzel likes this.
- Yeleina doesn’t.
- Xanthe uses content out of order via the index or search bar.
- Wafiya remixes content from several textbooks to create lessons (by photocopying, merging PDFs, or whatever). Like Zuzel, she has read content in order, but like Xanthe, she mainly uses the index now.
- Veronique has thought about writing one, but (a) doesn’t think she has that much to say about any single topic, and (b) is put off by the effort that would be required.
- Note: the comments below about the difficulty of copying, pasting, and altering also apply to electronic textbooks, as do the proposed remedies.
- Static slideshow: a page-by-page dump of a PowerPoint deck, possibly accompanied by a transcript of what the lecturer would say when delivering it.
- Zuzel uses this as if it were a badly-written textbook, with the transcript as the prose and the slides as diagrams.
- Yeleina finds it distracting to switch attention back and forth from slides to transcript.
- Xanthe searches the transcript to find what she wants, then curses because her search engine can’t “see” the text in the slides. She also hates the fact that she can’t copy and paste the code in the slides (since they’re PNGs embedded in a web page).
- Wafiya remixes this content like any other. She’s too polite to curse, but she finds it tedious to re-type the code that’s shown in the slides (but isn’t duplicated as text in the accompanying transcript). She’s also finds it wearying to have to re-do diagrams: since the slides are PNGs, it’s difficult for her to copy part of a slide, move its elements around, and add a few of her own.
- Veronique doesn’t create material in this format because she thinks it’s old-fashioned and not useful.
- Note: source code can be made available as copy-and-pasteable text directly in the page, or for download; diagrams can similarly be made available as SVGs to facilitate remixing. Doing either currently requires considerable extra work on the part of content creators.
- Voice-over slideshow screencast: a video recording of the slides (as they would appear on screen in a lecture) with someone speaking over them, and subtitles.
- Zuzel ignores the video and reads the transcript as if it were a static slideshow. If a transcript isn’t available, she (reluctantly) watches the video.
- Yeleina prefers this to a static slideshow, but prefers the doodling screencast described below even more.
- Xanthe hits the “back” button as soon as she realizes it’s a video (unless there’s a transcript, in which case she curses because she can’t copy and paste code out of a video).
- Wafiya directs students like Yeleina to these, but finds them harder to remix than other formats.
- Veronique thinks this format is also old-fashioned and not useful.
- Note: I’m assuming the subtitles are duplicated as a transcript, or available in some other searchable form. I’m also assuming that code is available for donwload or duplicated in the page for coying and pasting, though all of this requires extra work.
- Voice-over doodling screencast: a Khan Academy-style recording of someone doodling on a tablet or coding live.
- Zuzel treats this like a slideshow screencast.
- Yeleina likes this format a lot, particularly if she can add comments at specific points and see her peers’ comments.
- Xanthe has mixed feelings: she dislikes explanations delivered this way, but frequently watches “how to” videos, since they’re more likely to be accurate and complete than written descriptions.
- Wafiya treats these like slideshow screencasts.
- Veronique creates these fairly regularly: they’re easy to do, and easy to re-do when systems change or she discovers a mistake.
- Note: I’m making the same assumptions about transcripts, code, and diagrams as above.
- Recorded whiteboard lecture: someone with a camera has recorded someone giving a lecture in a lecture hall, and spliced that with whatever was on the lecturer’s screen.
- Zuzel treats this like any other screencast.
- Yeleina prefers this to doodling screencasts because she can see the speaker’s body language.
- Xanthe treats these like any other screencast, i.e., she’ll use it if there’s a searchable transcript and things to copy and paste, or if it’s a recording of a live “how to” coding session.
- Wafiya treats these like slideshow screencasts.
- Veronique doesn’t create these, partly because of the setup required, but also because she doesn’t think seeing her adds value—the lesson’s supposed to be about the stuff.
- Note: I’m assuming an electronic whiteboard, since video of someone writing on an actual whiteboard is usually illegible.
- Radio drama: a voice-only podcast-style presentation.
- Zuzel ignores the audio and reads the text transcript.
- Ditto for Yeleina.
- Ditto for Xanthe.
- Ditto for Wafiya.
- Veronique doesn’t create these.
- Note: but for Ursula, who is blind, this is the only format—all the others fold into it. She doesn’t need code samples as text for copying and pasting: she needs them so that her screen reader can tell her what’s that code contains.
- Star Wars: high-quality video with custom animations, cut scenes, and other special effects.
- Zuzel watches these sometimes, but doesn’t learn any more from them than she would from a slideshow.
- Yeleina enjoys these, which means she pays more attention to them, which means she learns more (but no more than she’d learn from an engaging lecturer).
- Xanthe doesn’t see the point. Unless something blows up.
- Wafiya likes their high production values, and remixes the special effects segments frequently.
- Veronique can’t afford to produce this kind of material.
- Note: again, I’m making assumptions about transcripts, copy-and-pasting, etc.
- Write your own adventureexploration: typically a set of connected ideas or challenges with explicit dependency information (i.e., you should/must learn A and B before tackling C).
- Zuzel finds the lack of narrative difficult.
- Yeleina enjoys these if each node in the graph is in one of her preferred formats. She enjoys them even more if she is exploring with peers.
- Xanthe ignores the ordering and searches for what (she thinks) she needs. If content is locked down—i.e., if the system won’t let her see or search C until she’s “completed” A and B—she writes an angry tweet and moves on.
- Wafiya likes this format for several reasons, but only if everything is always visible. First, it tells her how other teachers think ideas connect (something that is missing or out-of-band for other delivery formats). Second, it’s easy to remix: again, providing it’s open, she can reorder things as she thinks best for particular learners.
- Veronique would like to do this, but has discovered that creating the metadata about dependencies and recommended paths is as hard as writing a textbook.
- Wander aroundexploration: lots of little snippets, but no explicit dependency information.
- Zuzel finds this even more difficult.
- Yeleina likes this less than the “write your own adventure” format: she thinks it’s no different than just using Giggle to find things.
- Xanthe likes this because it’s just like using Giggle searches. In fact, she uses every other format as if it were this one.
- Wafiya feels the same way as Yeleina: she likes having stuff to remix, but she has to do that remixing before this material is useful to those of her students who aren’t as independent as Xanthe.
- Veronique creates content like this almost without realizing it by answering questions at Stuck Underflow.
- Jam session: a bunch of learners in a room working through material simultaneously.
- Zuzel doesn’t like it: it’s too noisy for her to concentrate, and she can’t go back at her own pace to review.
- Yeleina thinks this is the best… thing… ever.
- Xanthe is Giggling for information as soon as the presenter tells people what the topic is, but will stop and watch carefully when the presenter is typing live on screen.
- Wafiya can only book space to do this occasionally, and even then, she doesn’t enjoy improv teaching.
- Veronique enjoys doing this—she’s volunteers with a local free-range learning group—but can only find time once every couple of months.
- Note: in theory this can be combined with any of the formats above. In practice, it’s almost always short, live lectures interspersed with hands-on practical work.
- Personal tutoring: one-to-one instruction, a.k.a. “pair learning”.
- Zuzel doesn’t mind this, but she really does prefer books…
- Yeleina actually prefers jam sessions, since they tend to be more lively.
- Xanthe likes having someone available to answer questions on demand, but is happy Giggling on her own for most of what she needs.
- Wafiya wishes she could do this with every one of her learners, but there simply aren’t enough hours in the day. The personalized lesson plans she draws up are the closest approximation she can manage.
- Veronique does this a lot, but is frustrated that it doesn’t scale—she really wants to help more than one person at a time.
I’m sure some of the above is inconsistent or just plain wrong, but here are my takeaways:
- Different people want content in different formats. Yeah, OK, we knew that already, but:
- Everybody needs first-class content, in the programming sense of the term. In practice, it means that every kind of content can be copied and pasted without losing its meaning. A bunch of colored pixels in an image that look like letters aren’t actually letters; if you copy a region of an image and paste it into a text editor, you don’t get the text [2]. Similarly, search engines like Giggle can’t “see” code evolving line-by-line in a video, so you can’t search for that. Together, I think that point #1 and point #2 imply that:
- We need model-view separation in learning content. I apologize for the computerese, but I don’t know any other way to say it. A model (more fully, data model) is how information is stored, while a view is how people interact with it. Models should be designed to be easy for computers to work with; views should be designed to meet human needs, and the plural there is important: different people want to interact with information in different ways, and even a single person may want to use different ways at different times. Search engines want the information that’s in the model, such as the captions on the boxes in a diagram, not some arbitrary view of it (like a bunch of pixels in a PNG). People usually want that as well when they’re remixing, since their goals are to combine that information with information from other sources, and/or to present that information in different ways (i.e., views).
- We also need first-class metadata. I haven’t been able to find a standard format for summarizing and exchanging lesson objectives, learning dependencies, and everything else needed to stitch individual facts together. The closest thing seems to be SCORM, but I’d rather stick a fork in my eye [3]: it’s bloated, it mixes data models with meta-models with presentation layers with everything else its authoring committee could think of, and did I mention the fork? I could provide metadata as data, e.g., put a point-form list at the top of a lesson saying, “Here’s what you need to know before tackling this,” but that mixes model and view: since it’s just a convention, computers will have a hard time stitching things together accurately.
- Finally, we need social learning. Even the Zuzels of this world learn best in collaboration with other people: peer learners are often better at understanding and clearing up misconceptions than instructors, and having a “running partner” helps people stay focused and motivated. This isn’t really a matter of format, though, but of the tooling used to deliver content, so I’ll skip over it below.
OK, so how well do today’s tools and/or formats do by these measures? The fact that “PowerPoint” is both a tool and a format is one indication that the answer is going to be, “Not well.”
- Plain textis highly searchable and remixable, plays nicely with accessibility aids (i.e., screen readers), and runs everywhere, but:
- it doesn’t do diagrams (unless you count ASCII art);
- it doesn’t directly support metadata (except by convention); and
- it doesn’t separate models from views
- HTML is also highly searchable and remixable—until you start doing dynamic updates with Javascript, at which point today’s search tools (and accessibility aids) can’t keep track of what’s going on. Unlike text, it provides standard ways to include other media, so we’ll delay discussion of images and video. And while it doesn’t offer a standard way of providing metadata out of the box, HTML5′s custom data attributes were designed with exactly this kind of use in mind. And modern HTML partially separates models from views: I can use CSS to tell the rendering engine (e.g., a web browser) to display things differently for different use cases.
- DocBook, LaTeX, and wiki text separate models from views even more than HTML does. What’s in the file is a description of content, information about the content, and just enough formatting to make things pretty when viewed in specific ways, e.g., “Break the page here to avoid an orphaned line.” Diagrams and metadata can be handled the same way as it is for HTML; in fact, I can’t see any advantage these formats have over modern HTML any longer [4], so I’m going to take them off the table.
- PNG and other raster formats: fail the searchability and copy-and-paste tests.
- SVG and other vector formats: do better. Since (some of) the content and relationships are explicit, search engines can find things in SVGs, and you can actually select and copy a box or an arrow, rather than a region of pixels. It only goes so far—Visio-style information about “this arrow connects the box labeled A to the box labeled B” is mostly implicit—but it’s better than raster. I’ve seen people do entire lessons as a series of SVGs, or as one large SVG with progressive reveal; I’ll talk about this more below.
- PowerPointand its kin: model, view, and authoring tool are inextricable from one another. You can copy and paste things, and modern search engines understand the format well enough to index textual content, but metadata is just a convention, and remixing takes a lot of work (even if the version you have is the original, rather than an exported ZIP file containing an HTML page that references PNG representations of the slides). That said, authoring rich presentations is easier than it is with HTML+SVG:
- You use the same tool to create textual and graphical content, rather than having to switch between tools and stitch content together.
- You can connect textual and graphical content, i.e., you can draw a circle around a word in one of your bullet points, then connect it with an arrow to a particular box in a diagram, just as you would when writing freehand on a whiteboard. This is what HTML-based slideshow packages lack: right now, they force authors to segregate text and graphics, which I view as a throwback to the era of hot metal typesetting.
The fact is, most presenters continue to use PowerPoint (or something similar) because it makes it easy to create a reasonably good presentation in a reasonable amount of time [5]. HTML slideshow packages fail this test: authors must sacrifice the quality of the presentation (e.g., skip graphics, or embed segregated graphical files), and do a lot of non-content typing (tags, page IDs, and so on).
- Video: fails all the “first-class content” tests [6], and isn’t effective [7] unless:
- authors have the resources to produce Star Wars-quality content [8], or
- they’re showing learners how to do something, like dissecting a frog or using a debugger.
So after all of this, what do I actually want?
- I want content stored in HTML5 with purely semantic markup, so that it can be searched, copied and pasted, and styled for presentation in a variety of ways [9].
- I want an agreed-upon
metaanddata-*vocabulary for educational metadata, like dependencies, introduction of key terms, questions and answers, and so on. I want a similar vocabulary for commenting and other social interactions that plays nicely with things like the Salmon protocol. - I want an authoring tool (note the singular there) that lets me:
- I want to be able to animate my drawings and text, which is emphatically not the same as “embed video” (though I may want to do that too). Instead of recording the pixels drawn on the screen as I type Python into an editor, I want to record and play back the text that’s being created, so that learners can pause the animation, copy the text, and paste it somewhere else. Equally, instead of painting pixels to fool your eyes into believing that a box just moved off the screen, I want to move the damn box; once again, if you pause the animation, you should be able to click on the box, attach a comment to it, paste it into your own drawing, etc.
Freeling mixing drawings and text feels like it ought to be doable today: we could either put the text in blocks inside a canvas element, or layer a transparent canvas over the page and dynamically resize it. Anchoring drawings to the underlying text (e.g., keeping the arrow from a term to the corresponding bit of the diagram in the right place) is “just” Javascript (for some value of “just”). Making it all WYSIWYG is just more Javascript [10].
But animation… Ah, that’s a big one. It’s an intrinsically hard problem, but canned effects can do a lot to put simple things within reach [11]. The big question is, how far do we push it? If I want to show you how to use a debugger, or how to draw something with a painting program, I can’t re-create the whole UI—I’m going to have to record pixels off a screen.
Or am I? I know this is never going to happen—we’re not that organized a species—but just imagine what the world would be like if every interface was built using HTML5 and CSS. Any tool at all could export widget descriptions and a semantic trace of what they did (i.e., “the file menu was pulled down” rather than “the cursor moved to pixel (132,172) and the user clicked”), and any other tool could consume it and play it back. The consuming tool might draw the widgets differently, or display the interactions in its own way, but that would be exactly the same as applying a different skin to the original tool [12].
Returning to this universe for a moment, we can store things as HTML5 right now—I’m already using it for Version 5 of Software Carpentry. I could create a vocabulary for instructional metadata, but I’m not an information architect. WYSIWYG authoring tools for HTML5 abound, though the HTML5 they produce can be idiosyncratic (and doesn’t play nicely with version control, but that’s fixable). I haven’t seen a WYSIWYG tool that supports freehand drawing mixed freely with text, or one that supports parallel content streams, but I think half a dozen people working could deliver something substantial in half a dozen months [13].
As for animation, I think we’re stuck with video for now: prototyping an HTML5/SVG/Javascript animation framework for use in a learning tool would be a great research project, but we really do need to build a couple to throw away to find out if it’s workable. If you’d lke to tackle it, please let me know—I’d be happy to be your alpha tester.
Notes
[1] There was a lot of talk in the 1980s and 1990s about different people having different learning styles, inspired in part on Gardner’s theory of multiple intelligences. The idea has mostly been discredited, but like many memes, it lives on in popular culture.
[2] Although I bet someone’s working on an Emacs mode to do that…
[3] I’ve actually done this, so I know whereof I speak.
[4] Except that LaTeX and wiki text require slightly less typing than HTML, but if you’re using a smart editor, even that advantage goes away.
[5] Please don’t quote Tufte’s complaints about PowerPoint at me—I don’t think it encourages bad presentations any more than the tangled rules of English spelling and grammar encourage bad writing.
[6] In particular, almost all video content makes life harder for the visually impaired: a screencast in which someone talks over themselves typing in an editor or sketching on a tablet is tantalizing but useless to someone who can’t see the pixels. I committed this sin when I created Version 4 of Software Carpentry; I’d like to do better in Version 5, and would like to see high-profile online learning sites make some kind of effort as well.
[7] But wait a second: if video isn’t effective, why do MIT Open Courseware and the Khan Academy work so well? The short answer is, they mostly don’t: if you take out the 15% of people who can learn almost anything, no matter how it’s presented, watching videos and doing drill exercises works less well than other options. The longer answer is, watching a good teacher (and Khan is a great teacher) work through a problem, instead of just presenting the answer, moves the content into the “how to” category that video is well suited to.
[8] Research dating back to the early 1990s shows that higher-quality material improves student retention. I don’t know whether it improves it enough to justify its higher production costs, though.
[9] HTML5 will also help with version control, since I expect HTML5-aware diff-and-merge tools to start appearing Real Soon Now. Of course, I’ve been saying that for almost ten years…
[10] These days, you can wave away almost any technical objection with “it’s just more Javascript”.
[11] In my mind, the animation interface looks more like Scratch than it does like PowerPoint’s menus and dialogs. It definitely doesn’t require people to type in code, unless they want to create and share an entirely new kind of animation effect.
[12] We could even call that format XUL…
[13] “6×6″ is as big a team/timescale as I’m able to contemplate these days.
Web Made Movies
Buffy slays Twilight: how to make pop-up video mayhem
Remember those awesome pop-up videos on VH1? Thanks to Mozilla Popcorn, the new HTML5 tool for supercharging web video, the pop-up format is about to get a whole new lease on life.
Exhibit A: this wicked “Buffy the Vampire Slayer vs. Edward from Twilight” remix, created by the mash-up maestro from Rebellious Pixels. Check it out here. Then get started making your own pop-up video here.
“Hacking pop culture”
First posted in its original form in 2009, the “Buffy vs. Edward” remix video has garnered over 4 million views, been subtitled into 30 languages, and received media attention from NPR radio to Vanity Fair (“Buffy Could Kick Edward Cullen’s Precious Sparkly Emo Ass“).
The new Mozilla Popcorn-powered “pop-up” version adds a new interactive layer over top, with added annotations, commentary, and tips on protecting yourself from real-life stalkers.
The video’s creator, “pop culture hacker” Jonathan McIntosh, says the remix is all about hacking gender roles and Hollywood cultural coding — a theme he’s explored in other projects like the hilarious “Gendered Advertising Remixer,” now also available in HTML5 format.
Create your own pop-up video with Mozilla Popcorn
Want to add annotations and pop-ups to your own videos? Popcorn Maker is designed to make the power of Mozilla Popcorn more accessible to non-developers and mere mortals. Popcorn Maker’s “pop-up video” template makes it (fairly) easy for you to add annotations and context to just about any video on the web.
The software is still in early alpha version, so there’s still lots of rough edges. But you can check it out and get started now. Just pick “Pop Video” from the “Choose a Template” menu. Or have a look at the Popcorn Maker user manual here.
Matt Thompson
Buffy slays Twilight: how to make pop-up video mayhem
Remember those awesome pop-up videos on VH1? Thanks to Mozilla Popcorn, the new HTML5 tool for supercharging web video, the pop-up format is about to get a whole new lease on life.
Exhibit A: this wicked “Buffy the Vampire Slayer vs. Edward from Twilight” remix, created by the mash-up maestro from Rebellious Pixels. Check it out here. Then get started making your own pop-up video here.
“Hacking pop culture”
First posted in its original form in 2009, the “Buffy vs. Edward” remix video has garnered over 4 million views, been subtitled into 30 languages, and received media attention from NPR radio to Vanity Fair (“Buffy Could Kick Edward Cullen’s Precious Sparkly Emo Ass“).
The new Mozilla Popcorn-powered “pop-up” version adds a new interactive layer over top, with added annotations, commentary, and tips on protecting yourself from real-life stalkers.
The video’s creator, “pop culture hacker” Jonathan McIntosh, says the remix is all about hacking gender roles and Hollywood cultural coding — a theme he’s explored in other projects like the hilarious “Gendered Advertising Remixer,” now also available in HTML5 format.
Create your own pop-up video with Mozilla Popcorn
Want to add annotations and pop-ups to your own videos? Popcorn Maker is designed to make the power of Mozilla Popcorn more accessible to non-developers and mere mortals. Popcorn Maker’s “pop-up video” template makes it (fairly) easy for you to add annotations and context to just about any video on the web.
The software is still in early alpha version, so there’s still lots of rough edges. But you can check it out and get started now. Just pick “Pop Video” from the “Choose a Template” menu. Or have a look at the Popcorn Maker user manual here.
January 25, 2012
Greg Wilson
The Big Picture
I’m trying to be systematic about re-designing the core curriculum of Software Carpentry. So far, I’ve identified 11 common questions:
| Q01: | How can I write a simple program? |
| Q02: | How can I make the program I’ve written easier to reuse? |
| Q03: | How can I reuse code that other people have written? |
| Q04: | How can I share my work with other people? |
| Q05: | How can I keep track of what I’ve done? |
| Q06: | How can I tell if my program is working correctly? |
| Q07: | How can I find and fix bugs when it isn’t? |
| Q08: | How can I get data into my program? |
| Q09: | How can I manage my data? |
| Q10: | How can I automate this task? |
| Q11: | How can I make my program faster? |
whose answers depend on three fundamental principles:
| F01: | It’s all just data. |
| F02: | Programming is a human activity. |
| F03: | Better algorithms are better than better hardware. |
These break down into 11 more specific principles:
| P01: | Code is just a kind of data. |
| P02: | Metadata makes data easier to work with. |
| P03: | Separate models and views. |
| P04: | Trade human time for machine time and vice versa. |
| P05: | Anything that’s repeated will eventually be wrong somewhere. |
| P06: | Programming is about creating and composing abstractions. |
| P07: | Programming is about feedback loops at different timescales. |
| P08: | Good programs are the result of making good techniques a habit. |
| P09: | Let the computer decide what to do and when. |
| P10: | Sometimes you copy, sometimes you share. |
| P11: | Paranoia makes us productive. |
which in turn translate into 11 recommendations:
| R01: | Use the right algorithms and data structures. |
| R02: | Use a version control system. |
| R03: | Automate repetitive tasks. |
| R04: | Use a command shell. |
| R05: | Use tests to define correctness. |
| R06: | Reuse existing code. |
| R07: | Design code to be testable. |
| R08: | Use structured data and machine-readable metadata. |
| R09: | Separate interfaces from implementations. |
| R10: | Use a debugger. |
| R11: | Design code for people to read. |
Here’s how I see all this mapping onto the curriculum (assuming we replace agile development with number crunching):
- The Shell: files and directories; creating things; pipes and filters; permissions; shell scripts; finding things; variables; loops
- Q03: How can I reuse code that other people have written?
- Q10: How can I automate this task?
- P04: We can trade human time for machine time and vice versa.
- P06: Programming is about creating and composing abstractions.
- R03: Automate repetitive tasks.
- R04: Use a command shell.
- R06: Reuse existing code.
- Version control: update, edit, commit, and history; merging conflicts; recovering old versions; setting up a repository
- Q04: How can I share my work with other people?
- Q05: How can I keep track of what I’ve done?
- Q09: How can I manage my data?
- F01: It’s all just data.
- F02: Programming is a human activity.
- P01: Code is just a kind of data.
- P02: Metadata makes data easier to work with.
- P05: Anything that’s repeated will eventually be wrong somewhere.
- P07: Programming is about feedback loops at different timescales.
- P11: Paranoia makes us productive.
- R02: Use a version control system.
- R03: Automate repetitive tasks.
- R08: Use structured data and machine-readable metadata.
- Basic Programming in Python: variables and assignment; repeating things; lists; reading and writing; conditionals; nesting control structures; design patterns
- Q01: How can I write a simple program?
- Q02: How can I tell if my program is designed well?
- Q08: How can I get data into my program?
- P04: We can trade human time for machine time and vice versa.
- P05: Anything that’s repeated will eventually be wrong somewhere.
- P06: Programming is about creating and composing abstractions.
- R01: Use the right algorithms and data structures.
- R11: Design code for people to read.
- Interlude: aliasing
- P10: Sometimes you copy, sometimes you share.
- Interlude: text
- F01: It’s all just data.
- Interlude: Booleans and while loops
- R11: Design code for people to read.
- Interlude: Using a debugger
- Functions and Libraries in Python: how functions work; aliasing (again); multiple arguments; returning values; libraries; standard libraries; functions as objects
- Q01: How can I write a simple program?
- Q02: How can I tell if my program is designed well?
- Q02: How can I make the program I’ve written easier to reuse?
- F01: It’s all just data.
- P05: Anything that’s repeated will eventually be wrong somewhere.
- P06: Programming is about creating and composing abstractions.
- P10: Sometimes you copy, sometimes you share.
- R06: Reuse existing code.
- R09: Separate interfaces from implementations.
- R11: Design code for people to read.
- Interlude: provenance
- Program Development: creating a grid; randomness; neighbors; handling ties; putting it all together; fixing bugs; refactoring
- Q01: How can I write a simple program?
- Q02: How can I tell if my program is designed well?
- Q11: How can I make my program faster?
- F02: Programming is a human activity.
- P06: Programming is about creating and composing abstractions.
- P07: Programming is about feedback loops at different timescales.
- P08: Good programs are the result of making good techniques a habit.
- R01: Use the right algorithms and data structures.
- R06: Reuse existing code.
- R07: Design code to be testable.
- R09: Separate interfaces from implementations.
- R11: Design code for people to read.
- Interlude: configuring programs
- F01: It’s all just data.
- Interlude: assertions; exceptions
- P11: Paranoia makes us productive.
- Testing: goals; tests as specifications; structuring unit tests; using a unit testing framework; design for test
- Q02: How can I tell if my program is designed well?
- Q06: How can I tell if my program is working correctly?
- Q07: How can I find and fix bugs when it isn’t?
- Q10: How can I automate this task?
- F02: Programming is a human activity.
- P01: Code is just a kind of data.
- P07: Programming is about feedback loops at different timescales.
- P08: Good programs are the result of making good techniques a habit.
- P09: Let the computer decide what to do and when.
- P11: Paranoia makes us productive.
- R03: Automate repetitive tasks.
- R05: Use tests to define correctness.
- R07: Design code to be testable.
- Sets and Dictionaries: sets; storage; dictionaries; simple examples; longer examples
- Interlude: numbers
- F01: It’s all just data.
- Number Crunching; basics; indexing; linear algebra; making recommendations; statistics
- Q03: How can I reuse code that other people have written?
- Q11: How can I make my program faster?
- F03: Better algorithms are better than better hardware.
- P04: We can trade human time for machine time and vice versa.
- P09: Let the computer decide what to do and when.
- R01: Use the right algorithms and data structures.
- R06: Reuse existing code.
- Databases: selecting; removing duplicates; calculating new values; filtering; sorting; aggregation; joins; missing data; nested queries; transactions; programing with databases
- Q08: How can I get data into my program?
- Q09: How can I manage my data?
- F01: It’s all just data.
- P02: Metadata makes data easier to work with.
- P03: Separate models and views.
- P05: Anything that’s repeated will eventually be wrong somewhere.
- P09: Let the computer decide what to do and when.
- R08: Use structured data and machine-readable metadata.
Comments and suggestions would be very welcome.
January 24, 2012
Greg Wilson
Take Out Agile, and Add…What?
Based on the feedback we’ve received so far (both as comments and by email), it looks like we should take development methodologies (i.e., agile development) out of the core curriculum and replace it with two hours on:
- Nothing: there’s already too much in the core.
- Spreadsheets: because many scientists use them badly.
- NumPy and/or Pandas: because many of them are crunching matrices/doing stats.
- Visualization: which in practice would mean the basics of matplotlib.
- Image manipulation: because it’s fun as well as useful, and lets us talk about binary vs. text data.
I am quite arbitrarily limiting options to those five. Please cast your vote (one vote, not three out of five) in comments. We’d be grateful if you could include a brief explanation as well.
Test-Driven Public Speaking
Once again, Cameron Neylon explains things much better than I ever could:
“The impact factor of a journal is a better predictor of the chances of a paper being retracted than…of the number of citations.”
Michelle Thorne
Popcorn Hack Jams — First Cut at a HowTo
As described in the last post, we’re working on general event types that can plug in Mozilla’s programmatic content. See the Mozilla Event Menu Lite for more background.
Brett Gaylor and I took a first stab at a hack jam kit for video-makers. This kit builds on previous workshops run by Brett & the Popcorn team together with partners like Independent Television Service (ITVS) and Bay Area Video Coalition (BAVC). This piece in WIRED summarized the recent ITVS jam quite well.
This is the draft we sent to a few film festivals and other video-related programs looking to host hack jams for Popcorn. You can also grab the PDF or check out the wiki page. Let us know what you think — and if you’re interested in getting involved!
Mozilla Hack Jam for Video-Makers
What
A Mozilla Hack Jam for Video Makers is a two-day event that teams up video makers with web developers. Interactive video projects are built from concept to running code over the course of the event, using open tools and collaborative design.
Every team is expected to make a “minimum viable product” that works, albeit roughly, by the end of the hack jam.
The motto: Less yak, more hack!
Participants will learn about the power of web cinema, how to develop projects based on their interests, and about the benefits of collaboration and working in the open.
Hack jams can be hosted in partnership with Mozilla, who provides facilitation experience and extensive knowledge of key software, in particular Popcorn.js, a Javascript library for HTML5 video.
Mozilla will work with partners to ensure participants leave with both a deeper understanding of the web as a storytelling medium and improved video projects.
Hack jams can also be self-organized following this handy guide! PDF
Who
Teams consist of:
- Video-makers with an existing project
- Web developers skilled in Javascript
Each video project is paired with at least one developer. Facilitators and web designers are also key roles at the hack jam.
How
Pre-Hack Jam Engagement
Mozilla and partners identify the participating video projects. Ideal candidates are video-makers with existing video and a vision for improving it with interaction on the web.
Through lightweight interviews, each video-maker is paired with a web developer whose interests and skill-set meets the video-maker’s vision.
The newly-formed team discusses the vision determine if any further preparation should be done in advance of the hack jam.
Agenda
All the participants and facilitators meet on Day 1 for a group briefing. Demos of web cinema, including common templates and plugins, are shown and discussed. If needed, a quick crash-course on Popcorn will be provided. Each project presents it’s vision for the hack jam.
The group breaks into the small teams and determine how they’ll work together. Some might use napkin-sketches to quickly test ideas and interfaces. Some might already have code prepared. Some might address shared problems and team up. This is where facilitators can be especially helpful ensuring each team makes the most out of the time together.
Two-thirds through Day 1, projects should be writing code and creating the broad strokes of their experience. Day 1 ends with a group recap of where each project stands and would like to achieve the next day.
Day 2 opens with a quick welcome, and teams go to work on their project. The remainder of the day is a “sprint to the finish”, always with the expectation that teams will “ship” a final project at a screening and party.
A screening and party is held in the evening of Day 2 to demo final projects, collect feedback, and to celebrate all the hard work.
Before leaving, participants should decide on next steps for their projects. Examples include: continue hacking at an upcoming event, fold outcomes into an existing project, or publish results from the hack jam. Decisions on next steps are shared with the group and key stakeholders.
Resources
- At least one computer per team.
- Video-editing software as well as a fast, modern browser.
- Popcorn.js installed.
- Video files for each project.
- Reliable wifi.
- Power outlets.
- Projector with suitable adapters
- Meals – events must be catered
- Amenities such as coffee, water, and snacks.
- Travel support to the hack jam, where needed.
Case Studies
Independent Television Service (ITVS) + Mozilla, San Francisco. http://www.wired.com/underwire/2011/10/coders-filmmakers-popcorn/all/1 Video: http://mozillapopcorn.org/the-living-docs-hack-day/
“ButterCamp”, NYC, March 2011. http://mozillapopcorn.org/videoblog-buttercamp/
Mozilla Festival, London. November 2011. http://mozillapopcorn.org/what-we-made-at-mozfest/
Bay Area Video Coalition + Mozilla (For youth), San Francisco. http://mozillapopcorn.org/bavc/
Photos: CC BY-NC-SA by Jonathan Mcintosh
Laura Hilliger
Every laboratory needs a mad scientist
First, a contextual clarification: Facilitation is herein used in the context of learning. For me, facilitation is teaching, but there’s a difference in connontation for most people. For most people, “teaching” is a kind of directive transfer method while facilitation is more learner focused. There’s a nice raging debate on the topic, actually. “Teachers” who self identify as such might not be too happy with the term “Facilitator” because some think it depreceates their education and training. Meanwhile, a new wave of educators are perfectly happy calling themselves “Facilitators”; they just think of it as “facilitating learning”.
I’ve been trying to figure out whether or not being a good facilitator is something any and everyone can do. I like to think it is, but at the same time, I’ve been to a lot of sessions, workshops, conferences, classes, events and themed backyard barbeques. Ok, the themed backyard barbeques might be stretching it a bit, but the fact remains – I’ve been on both sides, facilitator and facilitatee.
As a facilitatee, I have to come to the conclusion that being a good facilitator is a personality trait.
As a facilitator, I have to come to the conclusion that any one can do it.
Facilitating learning is a personality trait because a monotone, disinterested, mentally dissociated space cadet who sounds like a prerecorded message can have a clear, concise, well crafted lesson plan and full on fail to transfer the learning objectives while an enthusiastic, spastic, sporadic social butterfly can have a random stream of consciousness unfit for human consumption because of its ridiculous disorder that changes perceptions and inspires real growth and learning. Do not underestimate FUN.
Facilitating learning can be done by anyone if they just let the fun in.
At the moment, we’re working on repackaging the Hackasaurus Hacktivity Kit to fit with the P2PU Challenges structure. The Hacktivity Kit was designed to help any and everyone learn how to run a Hackasaurus Hackjam. It inspires an almost natural teaching method that helps facilitators run sessions that use constructivist theories to build knowledge about remixing the web. The curriculum is coming along nicely.
At first, I wrote the curriculum using a fairly complex and strange narrative. However, after talking to an eighth grade English teacher working in a public school in the USA, I decided to get rid of the narrative and just focus on the process of organizing and running a hackjam. After I hashed out the draft, I started to wonder how we could create a challenge that helps a person develop the, in my mind fully necessary, personality trait of guided crazy.
Surman-san had a post yesterday called “Every event is a laboratory.” He detailed the Hive Popup they ran in Tokyo last week and talked about lessons learned. My premise in this post is that facilitation is key. I congratulate the Hive members who inspired those kids to play, hack, and remix the web. I’m pretty sure that “fun” component I told you not to underestimate played a huge part in the success of the Tokyo popup.
So. Every laboratory needs a mad scientist to facilitate the twists and turns the human psyche needs to make in order to learn. Every laboratory needs that special mixture of knowledge and enthusiasm. The question is, can the madness be taught? And should we try and create a challenge for it?
Related articles
- Hackjam Parking Lot (zythepsary.com)
- Every event is a laboratory (commonspace.wordpress.com)
Michelle Thorne
Mozilla Event Menu Lite
With a little over a week of digestion since the Mozilla Foundation All-Hands, I’ve revised the event menu shared a few weeks back.
The most resounding feedback was: “great to see this overview, but there’s too much stuff!”
So much of the revisions in version 0.2 are about cutting back. We asked ourselves what are the clear calls to action for participants versus an overview of all the event types the Mozilla Foundation is working on.
Version 0.2
To that end, this new version is a cleaned-up, “lite” menu (pdf).** Rather than paralyzing people with too many choices, it’s about giving simple options — which of course can be hacked and remixed as preferred. This is hopefully a step towards making this model more accessible and scalable.
Together with colleagues Jess Klein, Ben Simon & Matt Thompson, we spent a while crafting the language. Let us know what you think!
Criteria
Criteria for the event names included:
- Comprehension. Mozilla has a history of rapid neologisms. We tried to stick with words commonly used, even outside of the Mozilliverse. While we are assigning specific meaning to some of the terms, many people can at least grasp part of the word and decipher what the term as a whole could mean. This is especially important for events, which will invite in a lot of new people who may not be familiar with our jargon.
- Current Usage. That said, we didn’t want to default to names not in use at Mozilla. So we tried to strike a balance between quick comprehension and currency among existing projects. That’s why “fireside chat”, “learning lab”, and “hack jam” have been retained: we’re already using these terms in our programs.
- Localization-friendly. We recognize parts of the event names are a little Anglo-centric, but we hope that at least the general term is readily translatable into other languages. If you have suggestions or feedback about this aspect, that is particularly helpful. We hope that these events are accessible across many languages and cultures as well.
Event Types
We’ve kept the same structure as Version 0.1, but focused on five events, instead of a baker’s dozen:
- Meet Up — A fun, local gathering for people with shared interests in webmaking. Meet friends, new and old, to discuss projects in a relaxed setting. 2hr – until drinks run out.
- Fireside Chat — Thoughtful, informal presentation from a subject matter expert followed by discussion. Learn about a program or webmaking idea. Online or in person. 1 hour.
- Learning Lab — A simple learning activity for the classroom, a workshop, or the pub. Learners become teachers. Suitable as a one-off or part of a curriculum. 15 minutes – 1 day.
- Hack Jam — Design, code, and build solutions to real-world challenges. Bring skills together. Test and iterate with users. Share outputs with global community. 2hr – 2 days.
- Mozilla Festival — A yearly celebration of webmaking that blends the activities above and then some. It brings together hundreds of passionate people to explore the open web and to chart the way for the future.
Each of these events will have resources that pull from Mozilla’s webmaking programs: journalism, video-making, and youth education.
As an example, you can do a Hack Jam for video-makers by plugging in the Popcorn module into the general hack jam kit. We’ll provide quick recipes for how to do that. If you’re feeling ambitious, you can then remix the event further by adding in a youth education module or a Learning Lab kit, depending on your need and interests.
At events Mozilla directly organizes, we’ll also follow the same recipes, which not only makes life easier, but also helps us understand if these tools and resources work. Dogfooding the menu, if you will. ^^
What’s Next
My goal over the next month is to work with community members and colleagues to scope the supporting resources and the platform around events so that organizers and participants have a simple way to get involved, give feedback, and run with this stuff.
A huge thanks to Henrik Mitsch and Alina Mierlus for their suggestions on this version!
Next up, I’ll share an alpha version of the Hack Jam for video-makers kit, plus give an update about the Mozilla event calendar and plans for make.mozilla.org, our new home for webmaking galore.
Images: “Meet the Makers” by Mozilla Popcorn team and “Paper Prototyping at NYSCI hack jam” by Mozilla Hackasaurus
Greg Wilson
Badging
One of the things we need to do in the next six months along with running boot camps and updating our online content is to create some sort of badging to recognize people’s skills and contributions. As we said in the proposal to the Sloan Foundation, “A badge program will provide near-term incentives for both learning and mentoring; a framework to support viral, peer-driven engagement with the program; and facilitate recognition by partner institutions and potential employers.”
We’re going to rely on Mozilla’s Open Badges project to handle the mechanics of storing and validating badges, so we only have three questions to answer:
- What do we award badges for?
- How do we determine that someone has earned one?
- What do they look like?
The obvious answer to the first (and most important) question would be, “You get a badge for completing the core curriculum.” However, one of the purposes of badging is to provide a finer-grained inventory of people’s knowledge and skills, so there’s an argument to be made for giving one badge per topic, e.g., a version control badge, a Unix shell badge, a basic imperative programming badge, and so on. The argument for is that their meaning will be clearer: if I say, “Jane knows the basics of Subversion,” that’s more immediately understandable than, “Jane has completed the core of Software Carpentry.” The argument against is that if someone has collected two hundred small badges, we’re going to aggregate them anyway (“Jane knows basic software development skills”), so why not just do that in the first place.
I’ve gone back and forth on this, but currently think that one badge for the core curriculum (“Basic Software Carpentry”) will work best. We will offer two other badges as well: one for organizing a boot camp, and one for contributing a medium-sized chunk of content (on the scale of one 5-minute video episode).
Having decided that, the next challenge is to determine when someone has earned a particular badge. The “Boot Camp Organizer” and “Content Contributor” badges are straightforward; telling when someone has mastered the core skills is not. We can tell that you’ve attended the boot camp and viewed the videos, but how can we tell how much you’ve actually learned? “Solve this problem and email us the result” isn’t good enough: you could get someone to do it for you [1], and even if you’re honest, we can’t tell how quickly you did it, how many blind alleys you went down, how often you did something in ten steps instead of one, and so on. In the short term, I think the solution is to do assessment in real time using desktop sharing, i.e., you share your desktop with me, I give you the problem to solve, and I watch you do it. This won’t scale to hundreds or thousands of learners, but it’ll get us through the next six months.
What will badges look like? A badge is just a small PNG file with a digital signature embedded in it (it’s a neat little hack), so the graphic design is up to us. I like our current logo, but (a) it doesn’t size down well, and (b) I’ve been wanting to redesign it anyway, since the blue-to-white fade in the background doesn’t print well on t-shirts, coffee mugs, and other media. In keeping with our carpentry theme (“We’re not teaching people how to build the Channel Tunnel, we’re teaching them how to hang drywall”), I’d like an image that combines tools like hammers and saws with something like 1′s and 0′s to represent software, but I’m a lousy graphic designer—if any of our readers would like to take a crack at it, please let me know.
Finally, and most importantly, how can we get existing institutions—specifically universities—to recognize badges in some way? As much as we’d like people to value skills for their own sake, everyone is always busy, and always has more to do than time to do it. Can we persuade a few schools to list badges as non-credit items on students’ transcripts (just as they might presently list a short course in presentation skills or entrepreneurship that doesn’t count toward degree requirements, but required some work on the student’s part)? If so, it would give people an extra incentive to complete the core curriculum, organize a workshop, or create some content for us, particularly in a tight job market where every small distinction counts.
[1] It’s unlikely that someone would cheat on a Software Carpentry exercise, but in general, if badges take off and actually start to matter, the people who sell college students essays on Steinbeck at $30 a pop will start offering to write their online exams for $50 each.
Mark Surman
Every event is a laboratory
This weekend’s Hive Pop Up Tokyo reminded me that every event is a laboratory. Events are a great places to test our products and our ideas. They provide a chance to iterate quickly, improving our products fast. And, they can be a pipeline for new ideas. This kind of labby goodness is one of the reasons I’m committed to do more and better Mozilla learning events this year.
The Hive Pop Up format offers a particular kind of lab: one where you bang different products and ideas together. Format-wise, it’s a mash up of a workshop and a science fair. Building on MacArthur Foundation’s Hive learning network concept, the event recipe is:
- Find six to ten groups that teach some kind of web making lesson.
- Set up shop in a big room for a day on weekend or school holiday. Give each group their own area.
- Invite young people who are keen to play and make with technology. Schedule them in waves / cohorts (e.g. 3 hours).
- Quickly intro the kids to each program, then let them move to whichever stations they like, making and learning as they go.
- Watch for patterns. Take notes. Have fun.
We’ve done two of these now. One in London, another in Tokyo. Both of them have focused on late primary and middle school kids, but you could do this for older ages too.
Apart from the actual fun and learning that goes on (that’s our actual goal and also why the kids showed up), the Pop Ups provide and opportunity for experiments, pattern recognition and quick improvement of our learning offerings.
One experiment we ran in Tokyo was to combine Mozilla’s basic Hackasaurus lesson with a short workshop on MIT Media Lab’s Scratch. I’ll do another post detailing this, but bottom line is that we found a way to mash these two things together: the kids ‘busted a hack’ by embedding their Scratch game in their favourite gaming web site. The kids seem to enjoy this. A bunch of them kept working on these pages for an hour after we’d wrapped up the session. More importantly from a lab perspective, we found a way to combine two important web making concepts — ‘the web is lego that you can take apart and remix’ and ‘the basics of telling a computer to do something’ — into a single hour.
There were more wins from the ‘many learning experiments loosely joined’ experience of Hive Pop Up Tokyo. We learned about a cool paper-protyping-for-interface-design Firefox add on called Domova that Keio University and Mozilla Japan have created. This is something we can roll into other learning events. We had a chance to see Jono’s Run Jump Build HTML5 side scroller in the wild as something kids were excited to play with (thanks, Jono!). We flagged the idea of mashing up Run Jump Build w/ the SVG animation elements of Mozilla Japan’s ParaPara. And, we identified a number of improvements for both the Xray Goggles and the Hackasaurus curriculum. Phewph. Lots of good and meaty stuff.
Not every Mozilla learning event should be a Hive Pop Up. In fact, the most important thing we can do right now is package up the basic Hackasaurus Hackjam so lots of people can be running those in their own local community. But we definitely should do a few more Pop Ups this year: they offer a rich way to test out our thinking and bring new ideas. These are both things we need as we critically need as we solidify our webmaker learning offerings in 2012.
PS. Hugest thanks to the Mozilla Japan for taking the leadership to make Hive Pop Up Tokyo happen. Special thanks go to Tetsuya Kosaka who really rocked it as organizer and thought partner. I look forward to doing more stuff like this with all of you in future.
Filed under: drumbeat, education, learning, mozilla
January 23, 2012
Greg Wilson
Revising the Curriculum
I’ve been thinking some more about what the foundation and core of Software Carpentry actually are (and not just because Jon Pipitone keeps pestering me to do so). My last attempt had a foundation of seven principles and dozen topics in the core. I think I can slim that down even further; in fact, I think three big principles form the foundation of computational thinking:
- It’s all just data, whose meaning depends on interpretation. This subsumes the notions that programs are a kind of data (which is the basis of things as diverse as functional programming and version control), and that we should separate models from views (because the most efficient ways for people and computers to interpret data are different). It doesn’t really include the distinction of copy vs. reference, but I’m going to lump it in here because that idea doesn’t seem big enough to deserve a heading of its own.
- Programming is a human activity. The only way to build large programs (or even small ones) is to create, compose, and re-use abstractions, because our brains can only understand a few things at a time. Similarly, good technique (specifically version control, testing, task automation, and some rules for collaborating, be they agile or sturdy) is necessary because everyone is tired, bored, or out of their depth at least once in a while.
- Better algorithms are better than better hardware. Computational complexity determines what’s doable and what isn’t, and no aspect of program performance makes sense without some understanding of it.
I also think we can reduce the core topics to just nine, though I can already hear protests from the back of the room about some of the omissions. I got this list by asking, “What’s the minimum I think a graduate student needs to know to contribute to the computational work in a typical lab?” My answer is:
- The Unix shell
- Includes: basic commands (from
lsandcdtosortandgrep); files and directories; the pipe-and-filter model. - Because: it’s still the workhorse of scientific computing (and is experiencing a resurgence as cloud computing becomes more popular).
- Illustrates: “lots of little pieces loosely joined” is a good way to introduce modularity and tool-based computing; it lets us talk the human time vs. machine time tradeoff.
- Omissions:
find; shell scripts (particularlyforloops); SSH.
- Includes: basic commands (from
- Version control
- Includes: update/edit/commit; merge (with rollback as a special case).
- Because: it’s a key technique.
- Illustrates: the idea of metadata; programming as a human activity (the hour-long red-green-refactor-commit cycle).
- Omissions: branching; distributed version control.
- The common core of programming
- Includes: variables; loops; conditionals; lists; functions; libraries; memory model (aliasing).
- Because: we can’t teaching validation, associative data structures, or program design without this common core.
- Illustrates: programming as a human activity (programs must be readable, testable, etc.).
- Omissions: object-oriented programming; matrix programming.
- Validation
- Includes: structured unit tests; test-driven development; defensive programming; error handling; data validation.
- Because: defense in depth is key to building large programs, and trustworthy programs of any scale.
- Illustrates: trustworthy programs come from good technique.
- Omissions: testing floating-point code (since we don’t really know how to).
- Program construction
- Includes: piecewise refinement; refactoring; design for test; first-class functions; using a debugger.
- Because: knowing the syntax of a programming language doesn’t tell you how to create a program.
- Illustrates: creating and composing abstractions; interface vs. implementation.
- Omissions: structured documentation.
- Associative data structures
- Includes: sets (as a prelude); dictionaries; why keys must be immutable.
- Because: useful in so many places.
- Illustrates: how the right algorithms and data structures make programs more efficient.
- Omissions: implementation details.
- Databases
- Includes: select; sort; filter; aggregate; null; join; accessing a database from a program.
- Because: useful in many contexts.
- Illustrates: separation of models and views; a different model of computation
- Omissions: sub-queries; object-relational mapping; database design.
- Note: we could illustrate many of the same ideas with spreadsheets, but they’re not as easy to connect to programs.
- Development methodologies
- Includes: agile practices (the usual Scrum+XP mix); sturdy (plan-driven) lifecycles.
- Because: ties many other lessons together.
- Illustrates: good technique makes good programs.
- Omissions: code review.
If we use a two-day boot camp to start, and follow up over six weeks with one lesson per week, I think we can cover:
| Topic | Boot Camp | Online | |
| 1. | Unix shell | ls and cd;files and directories |
sort and grep; pipes |
| 2. | Version control | update/edit/commit; merge | rollback |
| 3. | Core programming | all of it (but see below) | not needed (but see below) |
| 4. | Validation | unit tests; TDD | defensive programming; error handling; data validation |
| 5. | Program construction | One extended example; one demo of a debugger |
More examples; design for test; first-class functions |
| 6. | Associative data structures | none | everything |
| 7. | Databases | none | everything |
| 8. | Development methodologies | overview of agile | sturdy (plan-driven) lifecycle; evidence-based software engineering |
Topic #3, core programming, is the hardest to manage. If people have programmed in Python before, it can be a quick review (or omitted altogether). If they’ve programmed in some other interactive language, it can also be covered pretty quickly, but if they’ve never programmed before, or took one freshman course ten years ago, there’s no way to teach them enough to make a difference in half a day. Even if there was, the other learners would undoubtedly be bored. The only solutions I can see are to restrict participation to people who can already do a simple exercise in some language, or to run one day of pre-boot camp training for non- or weak programmers. Neither option excites me…
Coming back to content, this plans means that we’ll leave out a lot of useful things:
- Spreadsheets: lots of scientists use spreadsheets badly, but while we’d like to show them how to do so well, the only one they actually use, Excel, isn’t open source or cross platform, and it’s much harder to build programs around spreadsheets than around databases.
- Make: is very hard to motivate unless people are working with compiled languages—we’ve tried showing people how to build data pipelines using Make, but it’s too clumsy to be compelling. Plus, Make’s syntax makes a hard problem worse…
- Systems programming: knowing how to walk directory trees and/or run sub-processes is useful, but we think people can pick these up on their own once they’ve mastered the core.
- Matrix programming: really important to some people, irrelevant to others, and the people it’s important to will probably have seen the ideas in something like MATLAB before we get them.
- Multimedia programming (images, audio, and video): people can learn basic image manipulation on their own; audio and video are harder, mostly due to a lack of documentation, but they aren’t important enough to enough people to belong in our core.
- Regular expressions: are a great way to illustrate the idea that programs are data, and are very useful, but everything in the core seems more important, and it’ll be hard enough to get through all that in the time we have. This is probably the one I most regret taking out…
- HTML/XML: there are lots of excellent tutorials on writing HTML, and while XML processing is a good way to introduce recursion (and, if XPath is included, to talk about programs as data once again), I believe once again that it’s not important enough to displace any of the material in the core.
- Object-oriented programming: is probably the omission that raises the most eyebrows. We can introduce it fairly naturally when talking about design for test (more specifically, about interface vs. implementation), but in practice, most people get along fine using lists, dictionaries, and the classes that come with the standard library without creating new classes of their own. Plus, showing people how to do OOP properly takes a lot more time than just showing them how to declare a class and give it methods.
- Desktop GUIs: an excellent way to introduce reactive (event-driven) programming and program frameworks, but is less important than it was ten years ago (most people would rather have a web interface these days).
- Web programming: the only thing we can teach people in the time we have is how to create security vulnerabilities.
- Security: the principles are easy to teach, but translating them into practice requires more knowledge (especially of things like web programming) than we can assume our learners have.
- Visualization: everybody wants it, but nobody can agree what it means. Should we show people how to use a specific library to create 3D vector flows? Or the principles of visual design so that they can make nicer 2D charts? And no matter what we teach, will they actually learn enough to make a difference?
- Performance and parallelism: the most important lesson, which is in the core, is that the right data structures and algorithms can speed programs up more than any amount of code tuning. Everything after that is either inextricably tied to the specifics of a particular langauge implementation (performance tuning), or offers no low-hanging fruit (parallelism). The one exception is job-level parallelism, which could be included in the material on the Unix shell if an appropriate cross-platform tool could be found.
- C/C++, Fortran, C#, or Java: more to introduce fixed typing and compilation, but these are relatively low priority topics.
We’re going to start implementing this plan (or some derivative of it) at the beginning of February, to be ready for workshops starting at the end of that month. We’d welcome feedback; in particular, have we taken something out of the core that you think is more important than something that’s in, and that could be taught in the time that’s actually available? If you have thoughts, please let us know.
January 20, 2012
Ben Simon
Just sent: “You made it happen”
I haven’t done too much SOPA/PIPA writing in this space this week due to a combination of it being well-handled elsewhere and time. However, a quick note to say: Woohoo!
This fight is most definitely not over, but being put back on the shelf in an election year is a pretty darn good start.
So, congrats to everyone who worked tirelessly to make this happen, including tons of folks here at Mozilla and even more out there in the broader interwebz land.
Here’s the victory (for now) email we just sent out:
From: Me
Subject: You made it happen
Hi there,
Great news — this morning, Congressional leaders announced that votes on both the Stop Online Piracy Act and the PROTECT IP Act have been postponed!
Make no mistake — you made this happen.
This week, more than 13 million people spoke out against these disastrous pieces of legislation, and there is no doubt in anyone’s mind that it’s your protest and your action that made it happen.
To see some of the awesome numbers from Mozillians this week, check out this blog post, and you can see some internet-wide stats here.
There will be more that we need to do in the future on this — this fight is not over — but, for now: Thank You.
Ben
P.S. — We couldn’t do this without financial support from people like you. Can you chip in $5 or more so we’re prepared for whatever comes next?
–
Ben Simon
Join Mozilla Lead
Mozilla Foundation
Greg Wilson
The First Boot Camp of 2012
We just wrapped up the first boot camp of 2012 at the Space Telescope Science Institute. 14 scientists with a wide variety of computational backgrounds spent two days learning about testing, version control, program structure, the basics of Python, and the psychology of learning and programming. We’re following up with 6 weeks of online material, partly because that’s what fits everyone’s schedules, and partly to see whether a blended approach works better than either strategy on its own.
And on a completely different topic, this diagram from the Discover magazine web site sums up every scientist-vs-journalist debate ever:

January 19, 2012
Laura Hilliger
Letter to the Senator
Yesterday, along with the rest of you, I protested SOPA and PIPA by blacking out my website. I also wrote this letter to Senator Sherrod Brown a Democrat from Ohio and cosponsor of PIPA:
I am writing as your constituent in the 12th Congressional district of Ohio. I oppose S.968 – PROTECT IP Act of 2011, and am tracking it using OpenCongress.org, the free public resource website for government transparency and accountability.
I can reference the data showing how much money you have taken from interest groups that support S.968, but instead of guilt tripping you, I’m going to try to appeal to your rationality.
This bill will take away first amendment rights, negatively affect the economy, innovation and the USA’s ability to compete in the global technology market. It will take away the people’s ability to be creative and share knowledge. The US has criticized China, Iran, and Syria for this kind of censorship.
Google, Yahoo, Human Rights Watch, the EFF, Mozilla, Wikipedia and a mess of other companies that have changed the way we live and work in the Digital Age oppose this bill and so should you.
I don’t care how much money or what kind of perks the lobbyists are throwing your way. You have a responsibility to us, the people. Please vote no on S.968, for the good of the Internet and our way of life.
Sincerely,
Laura Hilliger
I received this response, which wasn’t all to comforting to me. Sounds pretty non committal:
Dear Mrs. Hilliger:
Thank you for sharing your thoughts about legislation to combat online infringement and digital theft.
Last Congress, the Senate considered, but did not pass, legislation entitled the Combating Online Infringement and Counterfeits Act (COICA). The aim of this legislation was to assist the Department of Justice in tracking and shutting down “rogue websites.” These sites provide unauthorized downloads, streaming, or direct sale of copyrighted material. Similar legislation, entitled the Preventing Real Online Threats to Economic Creativity and Theft of Intellectual Property (PROTECT IP) Act, has been introduced in the Senate. The PROTECT IP Act narrows the definition of “rogue website” in an effort to target only the most egregious purveyors of digital theft and counterfeit crime.
In an age of advancing technology, it is critical we have laws that protect internet users from unfair, deceptive, or fraudulent marketplace practices. Too many consumers today purchase goods over the internet that may pose a significant threat to their health and wellbeing. For example, a consumer may unknowingly purchase counterfeit prescription drugs online that contain incorrect amounts of active ingredients, and thus pose a serious risk to ill individuals.
Additionally, illegal file sharing and unauthorized copying of digital material prevents musicians, producers, filmmakers, software designers, and many others from reaping the fruits of their labor. Such activity has the potential to stifle artistic creativity and compromise electronic innovation. Ultimately, intellectual property theft costs our economy billions of dollars and can result in hundreds of thousands of lost jobs.
However, I have also heard from individuals with concerns about the scope of this legislation, as well as its First Amendment implications. I take these concerns seriously. Should this legislation come before the full Senate for a vote, I will keep your views in mind. Thank you again for getting in touch with me.
Sincerely,
Sherrod Brown
United States Senator
I urge you, especially Ohioans, to call your Senators and let them know your views.
Matt Thompson
Crowdsourcing the State of the Union
Mozilla partners with public media to empower citizen engagement in U.S. election coverage
Tuesday’s State of the Union Address from U.S. President Barack Obama will include something special: crowdsourced captions and subtitles provided by everyday citizens around the world.
Using new web tools from Mozilla and the Participatory Culture Foundation, participants will transcribe and translate the President’s speech into dozens of languages in a matter of hours, making it more accessible to those with disabilities and in other countries across the globe.
Launching “Open Election 2012″
The event marks the launch of “Open Election 2012,” a new partnership between Mozilla, PBS NEWSHOUR, the Corporation for Public Broadcasting (CPB) and Participatory Culture Foundation.
Open Election 2012 will showcase how new open web technologies and citizen participation can make election coverage more accessible to diverse audiences, and provide new ways to engage with the news.
Adding context and interactivity with Mozilla Popcorn
Throughout the election, PBS NEWSHOUR will also use “Mozilla Popcorn,” a new HTML5 media tool Fast Company recently called “the future of online video.”
Popcorn makes it possible to pull other content and context from across the web right into the story, providing new ways for viewers to interact with video news.
Engaging and inspiring audiences
“It is part of the mission of public media to make our content available to everyone,” explained Hari Sreenivasan, Correspondent and Director of Digital Partnerships for PBS NEWSHOUR.
“From Chinese to Dutch, the speech translation is a true service for those for whom English is a second language and the hard of hearing. We hope to engage and inspire audiences too often forgotten.”
Learn more
- Read the CPB press release on “PBS NEWSHOUR Open Election 2012″
- Learn more or get involved with Mozilla Popcorn
- Learn more or get involved with Universal Subtitles
Open Video Alliance
Continuing the Fight against SOPA / PIPA
Yesterday we joined the largest online protest in history, adding our site to hundreds of others that went dark in a statement against SOPA and PIPA. We blew up twitter from 106,500 mentions of the term “SOPA” to more than 3.5 million today (cool visual here). Politicians took notice, and even Orrin Hatch removed his co-sponsorship despite receiving almost $1.2 million from large media companies and pro-PIPA groups.
As you likely know by now, SOPA and PIPA attempt to combat piracy at the expense of massive changes to the way the web works. For a refresher on the problems SOPA and PIPA pose, check out these great multimedia explainers or this breakdown from the Washington Post. You can also read about the bills, including viewing their full text, on OpenCongress: SOPA and PIPA.
The blackout effort was designed to educate users about the power these bills have to completely shut down sites that may contain one problematic page or link among thousands. While public opinion has turned on this legislation and support for SOPA is waning, the fight is far from over. The PROTECT IP Act, a.k.a. PIPA, is still up for a Senate floor vote on January 24. Though SOPA itself may be shelved for the time being, we’re likely to see it, or perhaps a more palatable form of the same problematic legislation, reappear in the future.
That’s why we need to keep up debate and discussion of the underlying issues driving SOPA. While some assert that lawmakers and content creators simply don’t understand the way the internet works, it’s also arguable that supporters of this bill do understand what they are potentially creating: a “consumption-only internet” that “locks down this emerging ecosystem” of openly available, user-driven content. Maplight offers a breakdown and infographic demonstrating the disproportionate financial support coming from the entertainment industry compared to funds from Silicon Valley opposing the bill. These purveyors of traditional forms of content and content delivery have yet to comment on changing public opinion towards SOPA, with MPAA CEO Chris Dodd instead opting to bizarrely slam blackouts that simulate the potential outcome of a censored internet as “abuse[s] of power.”
The Open Video Alliance seeks to support free expression over heavy-handed copyright regimes that trump creativity and shared cultural resources. At the time of last year’s Open Video Conference, tech entrepreneurs and activists were just beginning to respond to PIPA. Meanwhile, we covered topics at the conference like alternative copyright education (session notes here) and defensive patent licensing (session notes here) — constructive alternatives to protecting creative work that keep the web open for makers of all kinds.
Check back over the days to come for more information and statements from Open Video Alliance members on SOPA and PIPA. Join us in the comments and on Twitter with your thoughts on this legislation and suggestions for action.
Michelle Levesque
What I’m Working On
“So….,” Ben Simon paused, eyebrow raised, “what is it exactly that you do?”
He was not the first person to ask that this week, so I decided it might be worthwhile to talk a little bit about what I’m working on, especially in the context of the grand Mozilla Foundation vision that I blogged about yesterday.
Last week at the all-hands we had to come up with some first-half-of-year goals, and the education group brainstormed some full-year goals for ourselves. Based on these, here are some of the things I’m going to be thinking about in the months to come:
- Finalize and test the first set of web literacy skills
- Help our existing offerings integrate those skills
- Identify where our offerings fall short in skills we believe people should learn
- Develop scaffolding/activation strategy for non-Mofo instructors
- Develop a community for non-Mofo instructors to share best practices for teaching these skills (“hackable templates”), etc.
- Develop a community for the learners (makers)
- Help build a compelling story for why people (potential makers and instructors) should care
- Develop a set of metrics for measuring success. And measure it. Iterate to improve.
Wow, worst elevator pitch ever. Unless you’re climbing the CN Tower.
January 18, 2012
Matt Thompson
SOPA and “The Great Firewall of America:” what it is and how to kill it
This will be remembered as the day the web went dark. Today, Mozilla is joining other public interest organizations, everyday internet users around the world, and tech companies from Wikipedia to Reddit to Google.
Together we’re going on “virtual strike” to shine a light on proposed censorship legislation that could effectively create a “Great Firewall of America.”
And we need your voice to help stop it.

What’s going on?
The U.S. Congress is trying to pass legislation that threatens free speech and innovation on the Internet, under the banner of anti-piracy efforts.
This legislation, the PROTECT IP Act (PIPA) and its companion legislation in the US House, the Stop Online Piracy Act (SOPA), would give the US government and private business incredible global censorship powers, damage the Internet’s security, and discourage innovation and investment worldwide.
Learn more:
- PIPA/SOPA and Why You Should Care — Mozilla’s Chief Lizard Wrangler, Mitchell Baker
- Mozilla to Join Tomorrow’s Virtual Protests of PIPA/SOPA — Mozilla Privacy and Public Policy Lead, Alex Fowler
- Mozilla and PIPA/SOPA — Mozilla CEO, Gary Kovacs
Take action:
There’s a week left until Senators return to Washington from their districts, when their vote is scheduled on the PROTECT IP Act. We need to make one last big push by contacting their local offices and asking them not to support PIPA.
If you’re in the U.S.:
- Call your Senator here: http://stopthewall.us/
- Or email them here: https://blacklists.eff.org/
If you’re outside the U.S.:
- Forward this on to anyone you know in the U.S.
- Sign this petition to get your message to the US State Department: http://americancensorship.org/modal/state-dept-petition
Other ways to get involved
- Change your profile picture to join the #BlackoutSOPA campaign: http://www.blackoutsopa.org/
Mozilla FAQ on SOPA
What’s this about?
The U.S. Congress is trying to pass legislation that threatens free speech and innovation on the Internet, under the banner of anti-piracy efforts.
What’s at risk?
These new laws would give the US government and private business incredible global censorship powers, damage the Internet’s security and discourage innovation and investment worldwide.
The result?
Your favorite websites, both inside and outside the US, could be blocked based on a single infringement claim, without any due process of law.
How is it done?
The US will be able to block a site’s web traffic, ad traffic and search traffic.
What about piracy?
Piracy is a problem but there are better ways to address it that don’t stifle innovation, knowledge and creativity, or give the US such unchecked power over the global Internet.
What is Mozilla doing exactly?
We’ll be redirecting our main mozilla.org and mozilla.com English web sites to an action page for 12 hours on Wednesday, January 18th (8:00 am – 8:00 pm US Eastern Time). Also, the Firefox default start page will be blacked out so 100% of en-US visitors will see our call to action. Usage of Firefox is not limited or effected.
Why not a full blackout?
We hope the blackout of our US sites will educate people about this important issue. Mozilla believes that the individuals’ security on the Internet is fundamental and cannot be treated as optional. Access to the latest and most secure version of Firefox ensures user security. Thus some of the site functionality will stay in place during the blackout.
How long have you been involved in anti SOPA activities?
Mozilla has been actively involved in the stop SOPA activities from the start with our first public facing activities rallying for support in November.
Why does this matter to Mozilla?
The Mozilla project is a global community of people who believe that openness, innovation, and opportunity are key to the continued health of the Internet. These new laws would give the US government and private business incredible censorship powers that would have effects globally, damage the Internet’s security and discourage innovation and investment worldwide.
Is this just a matter for Americans to care about?
The laws will have effects globally, damaging the Internet’s security and discouraging innovation and investment in web technology worldwide. As it is a proposed US law, our call to action focuses on US citizens, asking them to reach out to their representatives.
January 17, 2012
Michelle Levesque
What the Mozilla Foundation is Up To This Year
Last week we had a great Mozilla Foundation all-hands that led to far too much bad karaoke, my little pony viewings, and massive deforestation in the form of hundreds of sticky notes. But we also had the opportunity to finally meet each other, and understand not only what we’re all working on individually, but also how it fits together as a whole.
As Dan Sinker mentioned in our final roundup: “I feel like I have colleagues now! And that’s awesome!”
So this is my rough-sketch approximation of how it all fits together!
(I’m starting with myself, because that’s the piece I know best.
)

We develop a theory of what we believe to be important web literacy skills.

These web literacy skills are exposed through a series of badges that people can earn. The use of badges allows us to certify what people have learned. We essentially expose what skills Mozilla believes to be important in webmaking via our badges.

But we’re not just building badges for our own use case. Instead, we’re building a generic federated Open Badge Infrastructure for use by other groups as well. In this way, we’re challenging the assumption that learning has to be in traditional classroom environments.
So now that we have these skills, now what? Well, we put them to the test.

We already have projects and partnerships with groups that teach webmaking, like Hive for youth and OpenNews (formerly Mojo) for journalists.
Specifically, these are all groups that teach web literacy using our philosophy: these skills should be learned in a context that’s relevant to the audience, and the learning happens stealthily, almost by accident, in the process of making things.
In these environments, we can try teaching these skills and learn some valuable lessons along the way. But that’s just our initial playground.

Aside from these pilots, we’re also going to lay the scaffolding and support for others who want to take these skills, apply them to their own contexts, and teach them.

In this way, we’re not just teaching webmaking, we’re helping to build a community for those who want to join our mission of teaching and learning these skills. By providing low-barrier-to-entry toolkits for people who want to run events, hackjams, etc., we can help new groups get off the ground. This community can share ideas, best practices and resources, far beyond anything that Mozilla alone would be able to create.
But we’re here to help too.

We’re busy creating tools to help this community with teaching some of these skills. Learning-by-making resources like hackasaurus, popcorn, paladin and others. These tools are growing and evolving in direct response to the needs of the community that they serve.

And that’s how we all sort of fit together!
One big, happy, world-domination-scheme family.
What do you think?
Webmaker Instructor Conference?
Okay well first of all, it would need a better name than that.
I was chatting with Ryan Seashore this morning about the value that Mozilla could bring to the digital literacy space, and we both agreed that one of Mozilla’s strengths is the ability to bring groups of people together and mobilize them towards a common goal.
Throughout our conversations we each listed off easily over a dozen groups who are distributed around the world teaching people coding, computers, web literacy, web making, etc.
How cool would it be, we thought, if we could bring all of these instructors together to actually chat with each other, learn from each other’s mistakes and insights, and unite under this common goal!
There could be geographic hubs — the bay area, Toronto, New York, London, etc., all dialed in to each other to form a sorta meta-conference taking place simultaneously around the world to start the communication happening beyond geographic boundaries and help people realize that they’re part of something huge and global and awesome.
My big question to you, fair reader, would be: what would the advantage of a conference be over asynchronous online conversations, or other ways of bringing this group together?
Laura Hilliger
Offline, Offroad, Off my Rocker
Missed me, didn’t you? Two full weeks of me not writing you and telling you the things floating around in my brain must have been excruciating. I mean, really, it’s not just self importance, now is it?
I’ve got a couple of things to tell you, but I promised Mark Boas and Laurian Gridinoc that I would write about my excursions in Peru. Thus, if you are looking for a post about something relevant to technology, education or art…well, read on. It all has its place in my psychotic attempts to kill myself in South America.
I started my trip with an Amazonian boat that took me an hour down the Madres de Dios to what I like to call a “Luxury Camping” facility. If there’s no Internet, it’s called camping. I’ve been camping for weeks. I did some day trips and wandered into the Amazon where I learned that touching things is bad. I was tattooed purple by the Huito fruit, had my mouth numbed by some crazy plant (can’t remember the name), and did some interesting dance moves to avoid having my head bashed in by Brazil Nuts (which are encased in giant shells like coconuts). When the rain starts, the rushing river of mud that will begin under your feet can suck your shoes off and push you face first into the tropical mud pie that used to be the Earth. You have to be awake in the jungle, lest the snakes or caimans decide you look tasty or threatening. Good lesson: If you are about to be attacked by a bushmaster, take off some clothes, throw them at the snake, and run like hell to avoid a painful death.
During this total lack of Internet, I felt withdrawals every evening when I wanted to learn more about something I had experienced during the day. I couldn’t fact check if the toad I saw that was literally bigger than my head was normally even bigger. Without a connection to quickly Wikipedia whether that tarantula could hurt me if I touched it, I was forced to try and remember whether or not tarantulas can puncture human skin with their itty bitty teeth. They can, by the way, but most tarantulas are harmless to humans – their poison isn’t poisoness enough. I couldn’t remember at the time, and just looked at the big hairy monster when I really wanted to touch it.
My memory fail reminded me to wonder (again) whether we’re better off having all information at our fingertips. This discussion has been had, but it’s never really been rectified, has it? Does the access some of us now have to the ever expanding knowledge bank mean that our brains are becoming less capable of storing information that might keep us out of harm’s way? Or are we storing the same amount of information, just absorbing it differently? Someone point me to non-boring medically research articles about the growth of the hippocampus in relation to the usage of the WWW.
After five days of jungle, I began what was one of the most exhilarating experiences of my life – a four day trek on the Inca Trail to Machu Picchu. We started the trail by biking 55km down from 4300m to 1800m on mountain bikes, which was extremely beautiful and really fast. We were going faster than cars on the road. One misjudged turn or bend and you might plummet a few thousand meters. It was amazing to ride through the fog, into the clouds, get drenched by the rain and then descend the Andes through 60 different microclimates. Eye opening. Afterwards, we white water rafted a piece of the river and hiked about 300m straight up before coming to our first evening which was in a mud house belonging to an Incan who’s father had been the cook for Che Guevara.
He told us a story in Quechuan, which was translated into English by a guide who could understand the ancient Incan language but not speak it. The story was an Incan legend about the beginning. He said:
“Unlike the story in the Bible, we believe that in the beginning there was Light. Only light.”
The story was about duality. Light and dark. Day and night. Love and hate. It was a really good story, which established a reasoning for the Incan belief in worshipping the Sun. I thought about how this experience underlined my previous knowledge. I thought about how I, as a webist, need to remember that personal interaction is worth ten times digital interaction. How learning is inspired by a real connection to something. It made me think about how creating that connection with people, through your content, is important. It made me wonder if I am connecting with you. It’s hard to know if we’re connecting because you are over there, and I am over here.
The next day we hiked 8 hours on the Incan trail. It was unbelievable. In my favorite Tom Robbins book (Fierce Invalids Home from Hot Climates) the main character says that South America is “too goddamn vivid”. This is true. The trail is a hard one, not for the faint of heart. The sheer altitude of a lot of the trail, combined with the breadth and steepness made it more than a hike. There were passes that were about a foot wide with a cliff to oblivion on the one side. There are plenty of places to fall to your death – plenty of rickity bridges, slippery slopes and, at one point, there’s a cable car crossing the raging river that didn’t actually feel all that safe.
That evening I had a conversation with a few Irish elementary school teachers. Three guys, 25 years old – they didn’t know anything other than Facebook and Google. They had no idea what the Open Web was, basic web literacy things, what privacy online should mean, how to use a computer in the classroom, resources that exist for teachers, how learning can be supported using digital tools and techniques. I asked them about Ireland’s digital literacy initiatives and one of them said “I don’t know dick, and neither do my students. No one cares about this.” Web = Facebook. Search = Google. Mozilla = Firefox. Digital Skills = Not Important.
We working here in this realm have our work cut out for us.
When we arrived at Manchu Picchu at 5am a day later, it was like nothing I’ve ever felt before. When I recovered from the 500m vertical climb up ancient stone steps (read: twisty, turny, totally not regulation, varying heights of a mess of steps that took about an hour to climb), I had an absolutely a spiritual experience, not because of the amazing ruins there, but because of what it took to get there.
I couldn’t see the ruins at 5am. The fog collects, you can’t see anything not even the iconic mountain behind the ruins. It didn’t matter. I genuinely didn’t care. And I didn’t cry because I couldn’t see the ruins from our perch at the top of the hill. I cried because I had an epiphany of understanding. I cried because I understood something that most people will never understand. Only 75000 people hike the Inca Trail per year. That’s 0.0000125% of the population, and I belong to that percentage. I can’t explain what I now understand. I can’t teach it to you. But it’s about respect and encompasses the three Incan principles (Love. Work. Study.) of a good life.
Later in the morning the fog began to clear, but it still wasn’t about the destination. The tourists started to show up on buses. Bus after bus arrived. People came and took pictures and were loud and generally annoying. People littered! They freaking littered at Machu Picchu! WTF!? People oohed and awed at the ruins. I just stood there, mouth open, trying to figure out what I’m supposed to do now.
January 15, 2012
Greg Wilson
Why Is This Hard?
I’ve been teaching scientists to program since 1998 (or 1986, if you want to start with my first lunch-and-learn for grad students in physics at the University of Edinburgh). Technology has advanced by leaps and bounds in that time, but I don’t think it’s any easier than it used to be to get basic software skills into people’s heads. What makes it hard?
Programming is intrinsically difficult. It’s fashionable to claim otherwise, but abstract thinking is a fairly recent innovation in evolutionary terms, and our brains still find it hard. On the other hand, I don’t believe that state machines and data transformations are any harder than high school algebra, and everyone we’re trying to help has long since mastered that.
Today’s languages and tools make it more difficult. Setup (particularly installation) is, if anything, harder than it was twenty years ago, and even the cleanest languages are full of accidental complexity (particularly in their libraries). (And if you think otherwise, try running a programming workshop for non-programmers working on half a dozen different operating systems, with two or three slightly different versions of your favorite language installed, and then post your dissenting comment.) It’s heartening to see that people are finally reviving research from the 1970s and 1980s into the usability of programming languages, but as we found out the hard way, it will be a long time before computer “scientists” start accepting scientific answers to these questions, much less acting on them.
Our students’ diverse backgrounds make teaching more difficult too. Our recent workshop at the University of Toronto had students from linguistics through chemistry to astronomy. Some of them had never used a command shell before; others were their labs’ unofficial sys admins, and we saw similar variation in almost every other aspect of their computing knowledge. The solution, of course, would be to divide them into levels by topic, but—
We don’t have resources to teach widely or deeply. Tens of thousands of people could teach scientists and engineers basic computing skills [1], but we have no way to reach them—yet. One of our goals for the next six months/five years is to increase the pool of instructors by several orders of magnitude [2]. Even on a five-year timescale, though, we’ll have to continue to rely mostly on volunteers, because—
There’s no room for computing in the curriculum. More precisely, faculty won’t make room, because they think computing is less important than thermodynamics, phonology, or whatever other subjects make up the core of their discipline. I used to grumble about this, but I now accept that it’s a rational choice: unless and until journal reviewers and grant agencies start asking hard question about how scientists produce their computational results, investing time in improving computational skills is a cost with uncertain rewards. And yes, there are a few exceptions here and there, but until we move to five- or six-year undergraduate degrees, they’ll continue to be exceptions. Realistically, I think the best we can hope for in the next decade is that computing has the same standing as statistics, i.e., everybody has to know the basics because their other work depends on it, but more advanced knowledge is acquired on a discipline-specific need-to-know basis.
Follow-through is hard. OK, so you just spent a couple of days at some kind of workshop: what now? If you’re lucky, you learned enough about Python or the shell to start automating a few data analysis tasks, so a positive feedback loop will kick in. But if the problem in front of you is to speed up 80,000 lines of legacy C++, those two days probably aren’t going to make a big difference. Yes, there are a lot of tutorials online that are supposed to help you, but in practice, you’ll probably find those more frustrating than anything else they assume a lot of background knowledge you don’t have, so you’re not sure which ones actually move you closer to your goal. The proposed Computational Science area at Stack Exchange might help here, if it takes off, and we’re hoping that running lesson-a-week online classes after workshops will help too, but it will always be hard for people to find time for “deep” learning, which is precisely what will make the next problem they run into easier to solve.
Most of today’s online teaching tools implement bad models of teaching. We’ve known for decades—literally, decades—that watching a video and doing some exercises is a lousy way to teach (see recent posts by Frank Noschese and Scott Gray for discussion). In programming terms, the root of the problem is that canned instruction assumes the teacher can accurately predict how learners are going to interpret and mis-interpret lessons—in software engineering terms, it’s plan-driven rather than adaptive. In practice, different learners will mis-interpret lessons in different (and hard-to-predict) ways; in order to be effective, teaching needs some sort of agile feedback loop to correct for this, but that’s exactly what most approaches to web-based teaching take out of the equation [3].
So, is it hopeless? Of course not: over the next six months, and (hopefully) the next five years, I believe we can make real progress on several fronts. We can certainly recruit and train more workshop organizers and instructors, and experiment with different kinds of online learning to see which will make follow-through easiest and most effective (which in turn depends on us coming up with ways to assess the impact we’re having). If you’d like to help, please get in touch.
[1] I get “tens of thousands” by taking a million competent programmers, multiplying by 10% (the proportion who can teach), and then multiplying by 10% again (the proportion who might be interested). Your made-up stats may vary.
[2] The other reason this has to be a priority is that our learners’ needs are as diverse as their backgrounds. Our learners want to jump straight from “what’s a for loop?” to “how do I detect glottal stops in lo-fi audio?” or “how do I visualize turbulent flow of interstellar gas?” We’re never going to be able to cover these with just a handful of content creators.
[3] Note that I’m using “online” to mean recorded and/or automated, i.e., things that learners can do when they want. Other approaches that deliver traditional lectures or seminars over the web synchronously and interactively are a bit better, but don’t scale: no webinar system I’ve ever seen gives the instructor the kind of feeling for the room that s/he’d get in a regular lecture hall.
January 13, 2012
Matt Thompson
Who owns “you” online?

There’s a battle going on for your online soul. 2012 will be a year where the good guys take some important steps forward in that battle.
Mitchell Baker and Ben Adida‘s posts on online identity and what Mozilla is doing to empower users are important reading for anyone who cares about where the web is headed.
As Mitchell notes, all of us are now creating and sharing more and more of our personal data online. This opens exciting possibilities, but also serious questions: How do you protect and empower yourself in the cloud? Who can you trust? And who ultimately owns the online version of “you?”

Who makes the rules? The architecture of “you”
You are valuable. Your online data, decisions and content are worth something to yourself and others. As thinkers like Ben Cerveny have pointed out, each of us leaves a trail behind us as we travel through the “luminous bath” that is the web. This data says something about you, leaving a set of footprints others can potentially follow. Your data is unique, and it has value.
So who makes the rules around how your data gets used? As Mitchell writes:
The ability of big data and cloud service providers to monitor, log, store, use, correlate and sell information about who we are and what we do has huge implications for society and for individuals.
Right now there’s no convenient way for me to share information about myself and maintain control over that information. I share information about myself by putting it someplace where someone else makes all the rules.
This is bigger than just Google and Facebook. The question of “who makes the rules” is a more fundamental question about the architecture of user data and the Internet itself.
This architecture boils down to some fundamental design questions about how your data is shared. Do you decide, setting the rules once, then pushing them out across your online experience? Or are you instead subject to a confusing mishmash of different rules for your data, each set by whatever application or service you happen to be using at the time?
Putting you at the center
Mozilla believes you need to be at the center of your online experience, with the option to store your data in the cloud and then set the rules for how it it accessed across the web. This means you get to set the rules, instead of other sites deciding for you. Mitchell writes:
To really help people with the way we use and share data today, Mozilla will need to offer people the choice of storing data in the cloud in a way that allows services to access it with your permission. This will be a new thing for Mozilla. It will involve new challenges. It’s important that we take these on and address them well. If we develop an offering that handles user data in the cloud properly we will help ensure choice and user sovereignty in new areas of online life.
Identity that answers to no one but you
Concretely, as Ben Adidad explains, this means Mozilla will ramp up work on a host of “user-centric” (I think of them as “you-centric”) services this year, including an innovative approach to identity, a mobile web-based operating system, and an app store. As a non-profit answerable only to you, we’re in a unique position to take this on, without ulterior motives or fine print. Mitchell writes:
No other organization has both the ability to do something totally focused on user sovereignty rather than financial profit, and the ability to have wide impact. A Mozilla presence in the cloud will allow us to to fulfill our mission in important new areas of online life.
The web you deserve
A web that recognizes “you,” knows who you are, and can respond accordingly is an exciting thing — so long as you’re the one in control of the experience.
That requires a trusted, ideally non-profit broker to help you manage your identity and set the rules for your data — with no ulterior motives or fine print.
This is different than the “bait and switch” model that now seems common in the cloud, luring us in with shiny services and products, only to reveal hidden costs, nasty fine print, or a cavalier approach to our personal data down the road.
The web — and you — deserve better. I’m excited that Mozilla is leading that charge in 2012.
Michelle Thorne
Video! Mozilla Event Menu
In preparation for the Mozilla Foundation All-Hands this week in Toronto, we were asked to make a video explaining what we’re working on. The goal was both to produce a snappy, visual artifact and to play around with Popcorn Maker, a web authoring tool for interaction.
Together with the talented Anna Lena, we converted the Mozilla Event Menu into a stop-motion video.
We had a lot of fun producing the video: we found a good iPhone app, iTime-Lapse, to take the pics, and thanks to Tom from Betahaus/Open Design City, we drilled together a tripod to hold the phone above our scene. Then, after a scavenger hunt to find all the props, we shot the video.
(Score! That’s the first time I’ve used the < video > tag on my blog.)
I hope to keep hacking on a Popcorn-ified version of the video over the coming weeks, plus the next iteration of the event menu, thanks to a lot of great feedback from the Mozilla community.
A huge thanks to Anna Lena for all the help and to Betahaus’ Open Design City for all the gear and the create, inspiring environment.
Music: “Hustle” by Kevin MacLeod / CC BY 3.0 Unported Video: “Mozilla Events” by Michelle Thorne & Anna Lena Schiller, CC BY 3.0 Unported
Greg Wilson
The What, Why, and How of Boot Camps
We’ve just added a single-page description of the two-day boot camps we’re planning to run in the next six months. In brief, their aim is to ensure that people have a few core skills, so that they can tackle our online material productively, and to help them get past startup hurdles such as software installation. If you have questions, comments, or suggestions, please add them to that page; if you’d us to help you organize and run a boot camp, please get in touch.
January 12, 2012
Philipp Schmidt
Flash Grant for Hackerschool
One of the many cool things about being a Shuttleworth Foundation fellow is that I get to give away a “Flash” grant each year to people who are doing cool stuff. It’s a no strings (almost) attached 5000 USD and could be a first step towards a full fellowship application.
I decided to give my Flash grant to David Albert who started something called Hackerschool in New York City. I liked that Hackerschool shares a lot of similar spirit with P2PU and yet it is completely different at the same time.
Read the FAQ for all the details, but in a nutshell – David (and his collaborators) run an intensive face-to-face immersion course for web developers, he compares it to a writers workshop, with an interesting sustainability model. The school itself is free for participants, but companies desperate to hire developer talent pay Hackerschool for recommendations and referrals. Brilliant idea and since they are about to launch round 3 it seems to be working.
Speaking of round 3, applications are open! (And if you have a space in Manhattan or Brooklyn that they could use, send them an email! They were at NYU and Spotify in the past. You’ll be in good company.)
Congratulations to David for his success, and a shout out for the Shuttleworth Fellowship. The Flash grants are a nice addition to an already terrific model.
January 11, 2012
Greg Wilson
Sloan Foundation Grant to Software Carpentry and Mozilla
We are very pleased to announce that the Sloan Foundation has generously agreed to fund six months of work by Software Carpentry and the Mozilla Foundation. The proposal we submitted, which outlines what we’re going to try to do, is included below—it’s a lot of work, but we’re very excited to have the opportunity to move Software Carpentry forward.
Teaching Scientists to Think Like the Web:
Accelerating Scientific Discovery Through the Effective Use of Technology
1. What is the main issue, problem or subject and why is it important?
Sharing information on the web, automating common processes, managing large volumes of data, and similar tasks are no longer the sole preserve of professional programmers. Increasingly, journalists, filmmakers, educators, artists, and other “end user programmers” find it necessary not just to use, but to create new software. This is especially true for scientists, yet the training available is usually outmoded, overly complex, or focused on the wrong skills. Mozilla and Software Carpentry hope to change all this.
A decade after Udell’s seminal report Internet Groupware for Scientific Collaboration, only a small minority of scientists use computers and the web to their full potential. The hidden costs of this are painful: tasks that should take minutes wind up taking hours, insights are missed, and collaboration is impeded. A 2008 survey found scientists spend 30% of their time wrestling with software, and most expect this figure to increase.
The root cause is a lack of the basic skills that allow scientists to create and customize software or use the web as more than a publishing medium. But it does not have to be like this: open source software and browsers’ ubiquitous “View Source” allow everyone to “look under the hood” to see how things are done. Scripting languages, HTML5, GitHub, and the like permit a Lego-like approach to programming that can allow scientists to manipulate data sets, crowdsource solutions, and share findings Ñ if they know how.
2. What is the major related work in this field?
A number of studies on how scientists use computers and the web have appeared in the past decade. The largest, by Hannay et al., found that most scientist learn what they know about using computers and the web through osmosis, which leads to crippling gaps in their skills. On the education and training side, only a handful of the more than one hundred papers presented at [SIGC11] focused specifically on scientists. Those that did invariably asked, “How can we use computers to teach science?” rather than, “How can we teach scientists to make technology do what they want?”
Many recognize that this lack of skills is slowing scientists down, but most existing training meant to address the problem is flawed in one or more ways:
- Does not target scientists’ specific needs. Most “Computing 101″ courses are run for students from a range of disciplines, so applications and examples often fail to engage students from the sciences.
- Too much emphasis on programming. Programming is only one part of building useful software and using the web. Scientists almost always have to figure out “the other 90%” (discussed below) on their own.
- Too much emphasis on calculation. Number crunching is also only one part of how scientists use computers today. Managing data and sharing ideas with colleagues are already key to effective practice, and becoming more so every day.
- Too much emphasis on “big iron”. Scientific computing is often identified with high-performance computing, which skews discussion and training toward the concerns of a small (but vocal) minority.
Dr. Wilson’s Software Carpentry project first started working to address these shortcomings in 1997. Now in its fourth major revision, the Software Carpentry web site has an active user base of 350 to 1000 individuals per day and its content regularly appears in courses delivered at laboratories and universities. Dr. Wilson’s experience indicates that a modest investment in training can increase scientists’ productivity significantly, while making their technology-based work more reliable and shareable. Hard data is difficult to obtain, but follow-on surveys, qualitative feedback, and testimonials often report “order[s] of magnitude” improvement in productivity; even the most conservative of these are typically phrased as “saving [me] a day a week”.
The key to increasing productivity is to focus on fundamental skills such as version control, testing, task automation, data management, and program design. While these are not as exciting as things with “cloud” and “peta” in their name, they are what actually empower scientists to solve today’s problems efficiently and tackle new ones tomorrow. Our initiative will build on Software Carpentry’s experience, and on Mozilla’s efforts to make technology easy to understand and use through its work on Firefox, standards-based computing, and the Mozilla Developer Network.
3. Why is the proposer qualified to address the issue or subject for which funds are being sought?
Mozilla Foundation
Mozilla is a non-profit, 501(c)3 organization dedicated to promoting openness, innovation, and opportunity online. Best known as the maker of Firefox, we work to empower individuals to use and shape technology to their own ends. The principal activity of the Mozilla Foundation is teaching “webmaking” to non-programmers, such as scientists. The activities detailed in this proposal will build on three, existing Mozilla programs that support this objective:
- School of Webcraft (SoW): A partnership with P2PU and an online platform to support self-, peer-, and expert-led instruction and study groups. The program will house the online training developed and delivered under this initiative.
- Mozilla Developer Network: A large repository of DIY resources and best practices on how to build and create with the technology and tools of the open web. More than 10 million people visited the MDN web site in the last year.
- Open Badges: A distributed accreditation framework to support the award and display of badges by peers, experts, and institutions. Badges are a key mechanism through which to incent, recognize, and expand participation in distributed, peer-led, and other forms of learning.
Dr. Greg Wilson
Dr. Wilson is a 25-year veteran of the software industry who received ComputerWorld Canada’s “IT Educator of the Year” award in 2010 and was co-winner of the Jolt Award for Best General Technical Book in 2008. His Software Carpentry initiative, which began as a training course at Los Alamos National Laboratory, has been accessed by more than 100,000 visitors since May 2007. The materials are freely available and have been used in courses at over a dozen universities and labs in six different countries.
4. What is the approach being taken?
A Five-Point Approach
To turn scientists from passive consumers of software into empowered users and makers, a successful approach must:
- Target graduate students. Their time is more flexible than that of undergraduates, but they are still focused on learning. They are often face-to-face with the challenge of making computers and the web work for them, instead of the other way around.
- Provide peer- and institutionally-recognized rewards to encourage students to make acquiring these skills, and passing them on, a priority.
- Solve immediate problems. Scientists always have pressing deadlines, so any training must be seen by them to solve problems that they realize they have.
- Use face-to-face instruction as a complement to online learning. A 2010 report from the US Department of Education found that combining the two produced better results than either on its own, which is consistent with our experience.
- Engage scientists in a larger learning community, so that they will pass their skills on to an ever-larger circle of colleagues.
Institutional Engagement
Much of Mozilla’s work seeks to challenge and transform established practices within various fields. Borrowing from agile development methodology, Mozilla builds, launches, and tests new programs in short, iterative cycles; projects are allowed to experiment, fail, and regroup without significant up-front planning. Traditionally, this innovation takes place outside of institutional contexts to avoid potential pitfalls: burdensome process requirements, never-ending calls for “more research”, and continual re-design at the planning stage. However, the nature of this project Ð working with graduate students Ð provides an impetus and opportunity for Mozilla to explore how to overcome these obstacles and engage with formal institutions. We have allocated a significant portion of the budget to engage computer science faculty in the delivery of the training content. Once we have established a successful framework, we will work with existing faculties and institutions to see the program become a standard component of their scientific training. Our hope is that the resulting exchange will provide a model to facilitate future collaboration between Mozilla and academic institutions.
The Resulting Program Framework
Under the experienced leadership of Dr. Wilson, Mozilla will:
- Migrate existing and produce new training materials that directly address the technology learning needs of scientists;
- Design and launch the first iteration of a self- and peer-led learning and badge program through the SoW;
- Organize and document the results of 4 in-person workshops; 2 through grassroots, peer-based instruction and 2 through conventional coursework at universities;
- Work with at least 4 institutions to examine their requirements for formal engagement and the necessity of this engagement to affecting the desired learning outcomes; and
- Gather and document the project findings to underpin future program iterations.
Training Materials: The materials available through MDN and Software Carpentry will be framed to the specific needs of scientists. Mozilla community members will produce screencasts showing how to perform tasks of use to scientists. The resulting videos will be enriched with instructional and reference metadata using Mozilla’s Popcorn.js technology, which allows for the integration of web content and video.
Online Learning: Self- and peer-led courses will be offered through the School of Webcraft. Participants will complete learning challenges, find support, ask questions, and connect with the broader community of scientists across disciplines and institutions. A badge program will provide near-term incentives for both learning and mentoring; a framework to support viral, peer-driven engagement with the program; and facilitate recognition by partner institutions and potential employers.
In-person Workshops: We will run 4 in-person workshops at colleges and universities across the United States, Canada, and the United Kingdom. (Letters from universities and colleges indicating their support for this are appended to this proposal.) The workshops will be hands-on, interleaving short tutorials with live coding sessions. Two workshops will follow a peer-led, grassroots model and take place at universities but outside of formal, faculty engagement. Two additional workshops will be offered in concert with faculty at universities. The resulting baseline will facilitate a comparison to inform future efforts. We presently have strong expressions of interest in hosting such workshops from:
- University of Wisconsin – Madison
- Michigan State University
- Georgia Tech
- University of British Columbia
- Utah State University
- Indiana University
- Queen Mary University London
- University of Toronto
5. What will be the output from the project?
- New, tailored technology training materials for scientists. Workshop curriculum and instructional materials. 15 hours of “how-to” video content produced by the Mozilla community and enriched with Popcorn.js enabled metadata.
- Online training in ‘webmaking for scientists’. A minimum of 80 students completing 10 self-led learning challenges, and a badge program offered through the SoW and supported by the Mozilla community.
- Pilot implementations of in-person workshops. Two workshops delivered through a grassroots, peer-led approach, and two additional workshops delivered in concert with university faculty, both continued online through the self-led learning challenges mentioned above. Documented analysis of the relative success of each approach, as well as comparisons to the online-only workshops.
- Recommendations and plan for institutional engagement. Results and feedback from institutions and computer science faculty regarding their interest and requirements to engage in future iterations of the project. Evidence-based recommendations regarding the importance of this approach.
Metrics
The ultimate measure of our success will be whether scientists can do more research in less time and tackle problems they could not have tackled before. Both are difficult to measure, especially in the short term, so we will use several proxy metrics to gauge the project’s success:
- Repeat participation and peer recruitment. The percentage of online course participants that offer or plan to offer in-person workshops and study groups on their own, as well as recommend the online courses to their peers.
- Badge display and associated reputation. The number of participants showcasing their badges through social media and other web sites will provide insight into the real and perceived reputation of the program.
- Institutional engagement. The number of universities who choose to experiment with and/or integrate the materials into their overall scientific training.
- Former students become makers. Mark Surman, our Executive Director, recently wrote, “Everything we’re doing is about learning through making and collaborating on the web.” Early participants in this program creating content for others to use will be the surest possible sign of success.
January 06, 2012
Michelle Levesque
Switch: I’m Michelle, and I’m a Webmaker
For the upcoming MoFo All Hands, we all had to make 60 second videos explaining what we’re working on, our 2012 goals, etc.
I’m not so good at “following directions”, but here’s what I came up with:
January 05, 2012
Matt Thompson
Mozilla seeks designers to supercharge learning in digital badges competition

Design digital badges for NASA, Intel, Disney-Pixar, the U.S. Department of Education and other leading organizations in the “Badges for Learning” competition. Deadline for entries is January 17.
Help the world level up with NASA, the MacArthur Foundation and Mozilla
Mozilla is seeking designers and developers to participate in the $2 million “Badges for Learning” competition. Participants will have the chance to design digital badges for more than 60 different leading organizations, all aimed at providing recognition for learning that happens on the web or outside of school.
Winners will receive funding from the MacArthur Foundation to make their designs a reality, plus the opportunity to collaborate with Mozilla and other leading organizations in education, industry and government.
The goal: supercharge 21st century learning by building a free, open source badge system that helps people around the world use the web to gain new skills and level up in their life and work.

Why digital badges for learning?
The web provides revolutionary new ways for people to learn, but it’s often difficult to get recognition for learning that happens outside of school.
Mozilla’s Open Badges project aims to help solve this problem, providing software that makes it easy for any organization to award digital badges for learning and achievements that happen online, outside the classroom, or just about anywhere.
Organized by the MacArthur Foundation and HASTAC, the “Badges for Learning” competition provides an ideal opportunity to test this software and approach in the wild, gathering leading organizations, designers and technologists to build badge systems together, all using Mozilla’s free and open source Open Badges Infrastructure.
From robotics and digital literacy to botany and the environment
As part of the competition, more than 60 badges for learning projects are now open for your design and technical ideas on the competition web site. For example:
- NASA is seeking design and web development expertise for its new “NASA Robotics Badges.”
- The National Oceanic and Atmospheric Administration wants help with “Planet Stewards” badges that drive youth awareness around local environmental issues.
- The National Association of Manufacturers will issue badges to help learners gain the skills they need to find jobs in today’s high-tech workplace.
- Disney-Pixar is creating “Wilderness Explorers” badges that help youth become advocates for wildlife and nature-based exploration.
- The American Museum of Natural History will offer badges for science literacy.
- 4-H will award badges for youth around science, engineering, technology and applied math.
- Plus many, many more badge projects on the competition web site, all seeking design and web development expertise.

Design digital "Robotics Badges" for NASA
Who should enter?
Anyone with an interest in design. Graphic designers, web designers, product or industrial designers, educational technologists, digital humanities majors. What’s important at this stage of the competition is visual and conceptual creativity.
All of the badge projects will ultimately plug into Mozilla’s Open Badges Infrastructure, but it’s not necessary to possess the technical chops to implement at this stage.
All you need is to provide some early visual designs, plus a written description of how your badges will help participating organizations meet their requirements. Visual representations can include a video, diagram, screenshots, napkin sketches or anything that helps get your ideas across. (See the competition web site for complete details.)

Design "Wilderness Explorers" badges for Disney-Pixar
How to get involved
- Choose a badge project from this list on the competition web site. (These are “Stage 1″ winners and collaborators seeking your ideas for the “Stage 2″ design and tech portion of the competition.)
- Then submit your proposal here, with early visual ideas and a written description of how you’d tackle it.
You’re free to enter as many proposals as you’d like — but act quickly. The deadline for submissions is January 17, 2012. Winners will be announced March 2, 2012. Good luck!
Erin Knight
Not Found
The URL you requested could not be found.
January 04, 2012
Michelle Levesque
Whys
I posted a bunch of “why this skill?” posts today. Note that I left out any and all “Achievement” style skills for now (and some of the more touchy-feely social style skills), nor is this meant to be a comprehensive list.
- Whys: Content Creation
- Whys: Privacy and Security
- Whys: Navigating
- Whys: Searching
- Whys: Community
- Whys: Create Tools
Of course feedback is always welcome.
Whys: Create Tools
Solving problems vs. working around problems
A few months ago, my doctor suggested that I start taking 2 ibuprofen every 4 hours for life. That is called “working around a problem”. Instead, I saw a physical therapist and some registered dietitians and we discovered I have a grain allergy — now I don’t eat grains. That is called “solving a problem”. When programming (or really any kind of “inventing”), there’s a mindset difference between the two. If Google Calendar doesn’t have a feature you want, you can either suffer through it, or write a browser plug-in to do it for you. (Or write your own calendar. Though if this is your solution, I have some round objects for you to re-invent.)
Why? Once you start seeing the world as problems that can be solved, rather than just worked around, it creates enormous incentive to build tools to do so, and leads to greater happiness. (Citation: me.)
Why not? Some of the people I talked to believe that this is a personality attribute rather than something that can be taught.
Identifying problem “types”
If a Carpentry School asked me to create a website that listed their students in alphabetical order, I wouldn’t have to figure out how to alphabetize students. That’s because sorting students is the same as sorting a million other things that I have sorted before.
Why? Recognizing problem types is an important part of growing up as a from padawan-coder to jedi-coder.
Why not? It’s not a show-stopper to reinvent the wheel every time you need something round. I don’t wish it upon anyone, but it’s possible.
React on user behaviour
When the user clicks, mouses over, types the ‘K’ key, or wears a funny hat, do something.
Why? I was surprised how hard it was to explicitly state the “why” here. Something along the lines of: this is what a lot of tools do. It’s a necessary step for interactivity.
Why not? I guess if you don’t want interactivity, you don’t need this.
React on environment change
When the weather in Toronto gets above 0C, when my friends tweet a link, or when I get an email in my Inbox, do something.
Why? Tools don’t necessarily have to wait for user input to change. The user is just one of many signals they can react to.
Why not? Again, if you don’t want this type of tool, I guess you don’t need this.
Whys: Community
Sharing
If I see an amazing video of The Dark Knight Rises trailer audio mashed up with Lion King footage, and I want you to see it, how do I do that? What if I want everyone I’ve ever met to see it?
Why? Because it’s amazing! Oh, you meant “why that skill” not “why that video”. Making things on the web and then not being able to show your friends is sad.
Also, sharing is such a big part of web culture.
Why not? It’s not necessary. You could make things and let them be found organically.
Community Etiquette
You’re on a forum and have a question. Is it okay to post a question here? Is there a FAQ you should look up first? What if you have a question on this blog? Is it okay to call someone a “douchecanoe” on this youtube video comment stream?
Why? Each community has its own etiquette, but discovering and respecting that etiquette is an essential skill in belonging to that community.
Why not? Does this need to be taught, or do people just generally figure this out on their own?
Push v Pull
I wouldn’t call it this to any students, but it’s what I mean. The difference between communication channels where I’m pushing a message to you, versus communication channels where you query for new information when you want it. And why/when you’d use each.
Why? This is both a part of community etiquette, as well as a part of getting new web makers to think about how they want their information to flow, and how they want to consume the information around them.
Why not? Can this just be intuited “well enough”, or does it need explicit instruction?
These two skills are sort of a cross between “Searching” and “Community”:
Get Help
I’m stuck. What do I do?
Why? Teach a man to fish…
Why not? No reasons. They should know this.
Though this topic may be subsumed by another topic.
Curate
As you start gathering information, how do you curate it — for yourself? for others?
Why? A lot of web tech is built around helping you do this, especially now that there’s such a huge amount of information out there.
Why not? I’m not certain it’s a “fundamental” skill in web making. Needs more thought.
Whys: Searching
Bullshit detection
So on wikipedia it says that I created the universe in my image. True or false? Also, developing a common sense (I guess it’s not really a “common sense” then, huh?…do we have an english word for “should-be-common-sense”?) about parody websites, expertise versus novices, etc.
Why? Although this is an off-web problem as well, I have a sense that it’s made worse by the internet because the number of authors is greatly increased and the barrier to authorship is lowered.
Why not? It’s an off-web problem as well. Also, it involves advanced social skills (eg: understanding “why would someone create a parody website of this company?”) to be able to fine-tune it.
General search
Find the information that you need. This is less about Google-syntax than it’s about knowing how to go from problem (“Apparently if you flush a toilet too often in a row, it can overflow. So…. how do I stop the exploding mess of awfulness that is currently happening in my bathroom?”) to solution.
Why? Once this skill is achieved, a lot of the other skills (“how do I make html tables?”) can be self-taught.
Why not? At first glance, there’s not a lot of general knowledge here; a lot of it is today’s-technology specific.
Whys: Navigating
How the web works
This title sucks (mostly because I need to better-scope this), but I mean things like the components of a URL.
Why? Understanding how the web works helps you to better understand where you fit in it, and where the things you build fit in it. Also, helps to debug when things go wrong.
Why not? Until I scope this better, this is too big a topic. (yeah yeah, action item me.)
Reference vs. copy
(Nobody should call it that. If you call it that when teaching kids, I will seriously come over there and make you do wheatgrass shots.) The difference between emailing an attachment versus emailing a link.
Why? This can be a source of confusion if it’s not understood. ”Hey, where did it go?”
Why not? It’s possible to learn this on a case-by-case basis without learning the difference as an abstract concept.
Going to a webpage (basic)
How to type in a URL and visit that webpage. How to click on things. How to navigate back to the page you were on.
Why? Don’t assume people know this, dude.
Why not? … yeah, nothing here. People need to know this if they’re gonna be making things on the web.
Whys: Privacy and Security
Where are your instincts wrong?
I’m not sure the full list of things here yet, but there’s definitely a bunch of them.
Why? I think this is the basic “don’t burn yourself on the frying pan” of web literacy. It’s almost irresponsible to teach cooking without it.
Why not? Getting a comprehensive list of these things is going to be hard and teaching some of them is also going to be hard. Are these more “web citizen” skills or “web maker” skills?
Identity
Who are you when you do things? What is anonymous? If you create a pseudonym for yourself, where is it linked to? That whole map.
Why? This is a big place where people’s instincts are wrong (see above), and it’s also hard to back-track on identity once you’ve made mistakes here.
Why not? I can’t think of any reasons why not.
These three skills are sorta a cross between “Privacy and Security” and “Create Content”:
Public vs. Private
What information is available to everyone? What is available to some people? Who (eg: website providers, etc.) can see even the “private” stuff? What is one-to-one messaging versus one-to-many broadcasting?
Why? Choose your proper audience. Reduce privacy slips. Think about how important this is to activists in zambia.
Why not? A little information here can be dangerous. In a lot of ways “assume everything is public” is safer/more realistic than the assumed-private of some teaching. So this can be tricky.
Ownership
If you link someone else’s image on your page, and I take a screenshot of your page, who owns the screenshot? Me, you, or the image-author?
Why? Anyone making things on the web should be aware of these issues. Especially in a remixing culture.
Why not? It’s complicated. Unfortunately.
Permanence
If you make something “online”, how long is it there for? Where does it “live”? Can you “delete” things, and if so, are they gona completely? What if you change something?
Why? This is a big area where people’s instincts are wrong.
Why not? It may not be a “necessary” topic for being a web maker.
Whys: Content Creation Skills
Linking and other non-linear style:
How to link from one page to another. (Using that in a way that goes beyond “Page 1″, “Page 2″, …) This can both be anchor tags in html, but also things like embedding content in video, or any other outbound-pointer.
Why? Participating on the web means connecting your content with other content. This is both useful as a form of citation, but also in constructing a non-linear narrative.
Why not? It’s not essential to have links in order to create content online.
Style/Formatting (tags, etc.). ”Restaurant HTML”:
A basic knowledge of how to style content. For example, big bold text, small text, colors, etc. Laying out a page how you want it to look.
Why? I don’t have a good “why” grasp here, but I intuitively feel like this is important. If all of your pages are totally plain-text, you can still get your message out, but it definitely loses some of the webiness, doesn’t it? I feel like it’s the social equivalent of poor spelling. Hrm.
Why not? If all of your pages are totally plain-text, you can still get your message out.
Content vs Theme:
An understanding of the difference between the content and the theme. Does not necessarily imply knowing CSS or style tags, but rather a grasp of how the style of something can change but the content remain the same, and vise-versa. The difference between the two.
Why? It’s been my experience that learners get excited about skinning the web (leaving the content alone) to their own aesthetic taste. Understanding the difference between the two is the first step here. It’s also an important step towards asking the right questions in web making: “where should I put this? how do I want this to look? what should this do?”
Why not? How is this different from offline media? Newspapers also have content and theme. Is this really a web-maker skill, or just a life skill?
Remixing:
Taking parts of the existing web, and changing them.
Why? Again, having trouble putting my finger exactly on why beyond a feeling here, but it seems like this type of building-on-something-else has become one of the strengths of the web.
Why not? 1) You don’t have to remix to web make. 2) This comes with a lot of necessary “safety” skills that it’s irresponsible to not teach, about copyright laws and the like. So it’s a heavyweight topic.
Greg Wilson
Settings Our Sights a Little Bit Lower
A couple of days ago, I posted replies to some of the comments that people had made on my posts about Software Carpentry’s future. To recap, I want SC to:
- offer learning materials so that people can work through them on their own;
- be a repository where people can evolve those materials;
- coordinate people who are organizing live workshops, offering technical support [1], etc.; and
- coordinate a distributed research program to evaluate Software Carpentry’s effectiveness.
It would be easier to achieve these four goals if we had merge-friendly formats for learning materials (both micro and macro), a large team of core content developers, and stable long-term financial support. Since we don’t have any of those unicorns, what should we try to do in the next six months?
Offer learning materials for self-directed use. If I was grading our existing content, I’d give it a weak B. While only a few episodes are outright failures from a teaching point of view, quite a few could use an overhaul based on learner feedback. What would make more difference, though, would be supplementing them with partially-worked examples, self-tests, and errata-style lists of common misconceptions and their corrections. I think it would take one person-month each to do this for our core topics (the shell, version control, basic programming, testing, sets & dictionaries, and software engineering).
Be a repository for evolving those materials. Anyone who wants our stuff can get it from our Subversion repository, but the “evolving” part is harder. I know a lot of groups have used our content, usually after some extensive tweaking to meet their particular needs. What I don’t know is how to get them to give their material back—there isn’t a “make, share, and remix” culture in teaching as their is in open source coding [2]. Absent any brilliant insights, I’m going to set this one aside for now.
Coordinate workshops. The inimitable Katy Huff came up to Toronto in November to help us run a workshop, and there are a couple of others in the pipeline elsewhere. This is where I hope to make the biggest strides in the next six months: if all goes well, I will put out a call later this month for people to run workshops in their labs, schools, and workplaces this spring.
Evaluate Software Carpentry’s effectiveness. This is easily the most important item in this post: without some reliable way to tell what’s working and what isn’t, improvement will be slow (and might not happen at all). I still don’t understand why most software developers ignore most empirical studies in sofware engineering, but if we do organize a bunch of workshops this spring, I think we can also do some before-and-after questionnaires and interviews [3].
Of course, this would all be easier with your help—if you want to help out, please get in touch.
[1] “Technical support” could be Stack Overflow-style Q&A, but I think real-time desktop sharing with voiceover would be more helpful, since by definition, novices usually don’t know what’s important to describe and what isn’t.
[2] Lots of people (including me) Google for other teachers’ slides when they’re making up lessons of their own; what they don’t do is send their hacks back to the original authors. There are exceptions, of course; I’m particularly interested in LessonCast, a site where teachers can share video tips about lessons and other ideas.
[3] Perhaps modeled on the ones in this paper, but with more of an emphasis on human (development) time than computer (running) time..
January 03, 2012
Michelle Levesque
Repository of teaching tricks?
Remember when you were in middle school and you learned that an atom is just like a solar system: planets (electrons) spinning around the sun (nucleus)?
It’s not a perfect analogy, but these types of analogies are widely used in all sorts of subjects. There’s also “oh yeah, everyone did that” activities that everyone seems to have done, from food coloring climbing up celery to egg drop competitions.
My question is: does there already exist repositories online of these types of teaching tricks?
Specifically, I feel like it’s going to be essential to have a repository of teaching tricks for web literacy skills if we want any hope in really distributing the learning process.
It’ll be a bazillion (plus or minus a gazillion) times easier for people to incorporate web literacy concepts into their existing curriculum (or build new classes around it) if they can leverage some of the smart things that other people have done.
Is this something that would have to be built from the ground-up or are there existing places like this that I just don’t know about?
Scott Grey’s thoughts on Codecademy
Scott Grey wrote up a comprehensive review of Codecademy.
One quote in particular stood out for me in his review (emphasis mine):
So, for all of my beliefs about the way online education ought to be presented, if people are learning about coding though Codecademy, why am I concerned about which features comprise that learning system? My first thought in response to that question is to consider whether people are really learning to code or do they just think they are? Who decides? Can people who go though those lessons actually open up a programming interface and create something from scratch? Can they explain the coding language to someone else? I doubt it, not yet anyway. Would you hire someone whose experience lies in having gone though some computer lessons and received a few badges for putting in a variable here and there? I wouldn’t, but perhaps that isn’t the point.
Michelle Thorne
The Mozilla Event Menu: Early, Early Draft
As mentioned earlier, this year we’re all about kitting out web makers around the globe to build and learn about the web in formats that are fun, sane, and effective.
So in particular, as an event model for the coming year takes shape, participants and potential participants like yourself, can hold this model to the test and help determine:
Are these events worth my time? Do they help me achieve or learn something I want?
Event Menu
With that in mind, I’d like to share the first unfiltered draft of an “event menu” for the Mozilla Foundation.
The goal is to provide an overview of event formats, with bite-sized descriptions and value propositions to participants. Many of these formats can be combined; many of them already offer abundant materials and case studies. For the remainder, there is work to be done to improve and support the format.
and in PDF. (HTML version coming soon)
Get Involved
Smart people like Dan Sinker, Brett Gaylor, Jess Klein, Ben Moskowitz, and Chris Lawrence & the Hive team, are leading the way to shape web-making activities for Mozilla that are compelling and valuable. Together we will continue hacking on this event menu and additional materials to improve these activities and make them more accessible to communities around the world.
If you are interested, you can certainly make help make an impact — as a beta-tester, as an event participant, an organizer, a facilitator, or a critic — many skills are needed to create a web literate planet.
Inspiration
Inspiration for the event menu comes from a variety of sources and experiences, including:
- The Hackasaurus Hacktivity Kit, a colorful guide bursting with lesson plans, IT checklists, and lots of helpful advice for hosting your own hack jam and using Hackasaurus’ simple tools to explore and remix the web. Jess Klein and Atul Varma have been testing and building the kit, which launched in beta in November.
- Virtual events, such as Fireside Chats (like the one held in December by the Hive Learning Network NYC) and the weekly Web Maker Calls. Virtual events are easy to organize, cost-effective, and transcend geography. Increasingly, I see them as efficient ways to scale meet-ups without breaking the bank or much logistic hassle.
- Tried and true formats, like the Mozilla Science Fair and Pop-Up Experience. These event-types have been deployed in a number of places and allow for quick yet compelling curation. They fit easily into larger events, and they can be mixed & matched to address participant interests and availability.
- Value, value, value. The biggest lesson learned from Gunner, event facilitator nonpareil, is that an event must always deliver value to its participants. What is it that a participant aspires to achieve? How are they getting value out of the experience? What is the motivation and return for investing precious time and energy?
Slowly, the value proposition is beginning to emerge in the Mozilla Foundation event model. Yet it is in constant need of evaluation and revision. Value is a guiding principle; it is a question one must ask at every step. Your thoughts are very welcome and very needed!
January 02, 2012
Mark Surman
Happy New Year Mozilla. I’m excited!
As 2012 begins, I’m excited to be part of Mozilla. I’m excited about our plans to teach and equip millions of webmakers. About the open web apps technology we’re releasing. And about all the renewed energy around Firefox. In fact, I’m more excited about being part of Mozilla than I’ve been in years. And more proud.
When I first got involved Mozilla three years ago, there was already much to be proud of. Here was a global community of people who had not only won hearts of millions with an open source browser, but that had also helped save the web in the process. This was something huge.
However, the web has changed since then. It faces new challenges. The biggest of these challenges snapped into focus for me in 2011: we’re moving from a world where the web is an open and exciting platform where anyone can make anything to a world of elegant consumption shaped by just a few big players.
My excitement is rooted in Mozilla’s plans step up to this challenge in 2012: we’ve got new ideas — and new code — that can stem this tide.
Mozilla’s apps initiative is a good example: we’re building technology designed to open up the app marketplace, making it easier for anyone create, share, use, modify and sell apps using standard web technology. If we succeed, we have a chance to move beyond a world controlled by a few app vendors to one that’s much more like an open bazaar. And, we also get a world of apps based on the same standards and ‘view source ethos’ that the web was built on in the first place. This will be a radical shift.
Possibly just as radical is Mozilla’s webmakers initiative: an effort to move millions of people from using the web to making the web. As a starting point, we’re making software like PopcornMaker and running grassroots learning labs like Hackasaurus, both of which help everyday content creators learn basic web programming skills. Ultimately, we imagine a world where mainstream video and social network sites are built with software that also teaches how the web works, and then invites you to remix it. As the Mozilla Manifesto says, we want a world where everyone is in control of their internet life, where everyone is a webmaker. A big part of Mozilla’s 2012 will focus on build this world.
And, of course, there is much to be excited about in relation to Firefox, especially on mobile. I felt this yesterday as I (finally) updated my very old Firefox for Android to a recent nightly build. The tab experience. The search. The speed. It was all awesome. Which, of course, are nice things to say about a piece of software. But there is bigger meaning: for the first time ever I was actually enjoying the experience of using regular web pages on my tablet. Making sure the mainstream of the web is pleasant to use on mobile sounds like a no brainer, but it’s actually a radical yet difficult mission in a world increasingly oriented to apps. Firefox is taking on this mission.
Of course, these are only three of the things that have me excited. David Ascher, Dan Sinker and Glynn Moody have written about other emerging Mozilla initiatives. And there are many more in the works. The main point here is not Firefox + webmakers + apps: it’s that the Mozilla community is stepping up to the challenges faced by the web in 2012 with new and concrete ideas. And, as a community, we’re doing this with more force and enthusiasm than ever. It’s going to be an exciting year.
Filed under: drumbeat, education, learning, mozilla, openweb, poetry
December 30, 2011
Daniel Sinker
Hacker-Journalism 2011: A year of "show your work"
It has been exciting to be both a witness to and a participant in the growing movement towards open web development in journalism. 2011 is one of those years that it’s amazing to sit back, here on one of its last days, and look back at just how much has been accomplished.
There was incredible work happening among news apps teams and individual developers around the internet that it’s impossible to capture it all here. Here are a few standouts from both myself and from a callout I put on Twitter:
- The Guardian did unbelievable work sifting through 2.6 million London Riot-related tweets to create both compelling reporting and some jaw-dropping big-data visualizations.
- My hometown pride, the Chicago Tribune News Apps team, did incredible work on maps this year. Team member emeritus Christopher Groskopf put it well when he said “I find it hard to talk about the last year without talking about maps. This was the year cartography arrived on the internet.” Among all the great tools they released, to me most notable is the team’s incredible six-part tutorial for rolling your own—the kind of hyper-useful knowledge sharing that this team really excels in.
- The Boston Globe released their beautiful HTML5-native BostonGlobe.com webapp, a gorgeous example of responsive web design (load up their page and resize your browser screen to see it in action). My favorite part though: to ensure that their design worked seamlessly on multiple devices, the team developed an amazing tool called Shim that syncs browsing across devices for testing. It is nerd-tastic.
- Speaking of nerds, the proud ones at ProPublica did incredible work this year, both sharing the code to incredibly useful tools like Timeline Setter and using their development chops to do great reporting on projects like their “Opportunity Gap” schools explorer, and their amazing new “explore sources” tool.
- The New York Times has always had one of the best news apps teams, and this year was no exception. I could fill this entire blog post with examples of their stuff. But I want to highlight something they’re doing that doesn’t reside in github: They’re doing an incredible job of embracing developer events and hack days to help spread the gospel of news apps development (and, of course, their own excellent open code). More of these from all corners in 2012, please.
- Also in New York, WNYC’s John Keefe has been cranking out awesome maps all year long—and going through a very public learning process as he taught himself how to code. He’s not at the scale of a full dev-team, but his wins this year have been amazing—including producing a map for the Hurricane Irene evacuation of the city that saw a 57x increase in traffic to their site. He’s been so successful that he’s now building out a dev team for WNYC. Yes!
- I was incredibly inspired by the coming together of app developers from the Tribune, the New York Times, USA Today, CNN, the Spokesman-Review, and others to create the incredible Census.Ire.org, an incredible census explorer built in partnership with the Investigative Reporters & Editors’ National Institute for Computer-Assisted Reporting. A great example of how working in the open and collaboration can move the entire industry forward. (Census data was a great place to be hacking this year, as the New York Times and Spokesman-Review’s own explorers show.)
- And of course I can’t not call out the work that we’re doing with the Knight-Mozilla Partnership in 2011—hosting more than a dozen design and hack events that produced 300+ prototypes, an online learning lab about news innovation, the “hacktoberfest” hackfest in Berlin, and of course the announcement of our five 2011/12 fellows at the Mozilla Festival in London. It’s been a crazy busy year on that front.
But perhaps the biggest thing to affect journalism development was the embracing of the credo of “show your work,” first exemplified in a blog post by the Tribune’s Christopher Groskopf and later picked up on a panel I hosted at ONA, and it has rapidly spun from there.
It’s spun so fast, in fact—the philosophy of working in the open and the realization that Code Matters in journalism—that there’s now an entire site devoted to listing the journalism coding jobs available. A development so important that ProPublica’s Scott Klein calls it the “story of the year.”
It’s for all these reasons and many, many more that, from where I’m sitting (my inlaws’ basement, with Happy Feet playing on the TV across the room), 2011 is just a preamble. 2012 is going to be incredible—the year that journalism code really starts to scale and where you begin to see impact throughout the industry. I’m going all-in. You should too. Let’s do this.
PS. Thanks to Zach Seward, Jeff Jarvis, Al Shaw, Matt Waite, Christopher Groskopf, Josh Stearns, Scott Klein, Chrys Wu, and many many others for helping out on Twitter. There were a bazillion incredible examples not cited in this blog post. If I had the time, I’d collect the last 45 minutes of Tweets, but Happy Feet is (mercifully) coming to an end.
Hive NYC
Hive NYC’s Top 10 Moments of 2011
Web Made Movies
Popcorn.js – All Grown Up
This morning (Dec 22), CDOT student and Mozilla hacker, Jon Buckley discovered that the Firefox 9 Addons About Page uses Popcorn.js to augment a tutorial video about Firefox addons by adding apropos content to the page while the video plays.

Of course it’s great to see another example of Popcorn in the wild, but this is a use case we had never before considered. Using Popcorn.js to show synchronized interactive content, the page explains addons, what kinds of addons there are, and how a user can use them in Firefox.
Being Sherlock
Such an elegant use of the library deserves a little investigatory work. Since the authors of the many pieces of user-facing Firefox content do such a good job, it may not be immediately obvious that the addons about page is made of the web. Nevertheless, because it is indeed a webpage, I can right click to learn more, and open up the page in a new tab to isolate it.
Without flirting too much with a tangent about the merits of the Web Console, finding out that the page contains an instance of Popcorn is pretty easy:
1. Press Ctrl, Shift and K altogether to bring up the Web Console.
2. Type in Popcorn — which should auto-complete even before you have typed Pop — and press Enter.
Right away, without digging through HTML for a script tag, we can see that Popcorn.js is included on the page somewhere. But, we can do more than that:
1. After starting the video, try typing Popcorn.instances into the Web Console. It should report back with a large blob of text, which is actually an array containing Popcorn objects.
2. You can see the events that are going to occur during the video by typing Popcorn.instances[0].getTrackEvents(), which should return another blob — an array of Popcorn events.
3. Similarly, by trying commands like Popcorn.instances[0].getTrackEvents()[0].start, or Popcorn.instances[0].getTrackEvents()[0]._natives.type you can see when the first event will start, and what plugin type it is respectively. Feel free to copy & paste.
By poking around in a similar fashion, I was able to discover that the addons page makes use of the code plugin to add and remove CSS classes from elements on the page. This approach lets the video change the visibility and interactivity properties of the information bar’s constituent elements.
If this bit of detective work caught your attention, we’re only where the rabbit hole begins. In fact, there’s a whole API to discover and play with (recent documentation update courtesy of another CDOT student and Mozilla hacker, David Seifried).
Feeling the Effects
Needless to say, it was surprising seeing comparatively excessive usage stats on the popcornjs.org server, as throngs of people visited the addons about page:

Luckily, Jon Buckley, and Rick Waldron (another passionate Popcorn contributor from Bocoup) were able to advise the people managing the addons website to pull the server out of accidental DOS territory.
Article source: http://blog.robothaus.org/2011/12/22/popcorn-dot-js-all-grown-up/
December 29, 2011
Alina Mierlus
[Community building 1] Mozilla’s Hive local Learning Networks – Hacking:Cultures
I’ll continue my series of blog-posts on community building and Mozilla, this time trying to approach the cultural side of a community. Specifically, I use the Hive Learning Network as the best example to explore a bit the balance between local culture and the global community.
This month, folks at Hive Learning Network New York (now a Mozilla project) invited people from other cities to an inspiring fireside chat to talk about how to bring the Hive Learning Network model in a city near you.
I like a lot what I heard at Hive NYC: the way it is organized (already funded organizations brought together by a common goal of offering world-class after-school educational programs for the youth in their city), the membership showcase and the way they already adopted Mozilla’s culture of doing things (work in open, embrace the community spirit, share).
What I specially loved is the concept of “Hive served a la carte”: we offer what we build, you can take pieces of it, remix it or adapt to your local culture. One example could be the “Hackasaurus Hackitivity Kit” – a fantastic how-to activity kit which is the result of almost 2 years of iteration, testing and work. This kit may work or not for the different local cultures – but, for sure, it has some important bits that help.
I brought Barcelona name as a potential city where to bring the Hive Learning Network. In fact, this is something on which various Catalan communities (Wikipedia, Mozilla, Softcatalà, Arduino, etc.) have been working for a while now – bring the open culture to citizens and the broader public through the already existing organizations, museums, public libraries and cultural centers, community centers. There’ve been things which didn’t go as well as expected, but there are some other pieces that give a great feeling of optimism: the first Learning Lab prototype during the Mozilla Festival in 2010, the various hack jams organized this year and the present success of local Wikipedians in helping Catalan museums to open their knowledge to everyone.
I see the Hive(s) as an extension of Mozilla’s communities, a bridge between Mozillians and the rest of the citizens – users of the Internet.
Late 2008, we, Mozilla community in Barcelona (and in part Softcatalà) have been working on straightening the collaboration with civic spaces around the city. The things went great (now we host most of our events and meet-ups in public spaces), but few months ago we realized that giving back to those spaces, organizing workshops for the citizens going there to learn or designing activities for those spaces is not so easy. And highly ineffective.

Photo by mozillaeu (sculptures in a Public Space at Mozilla Festival in Barcelona)
Now, with Hive being part of Mozilla, things may become easier and interesting. That is why a goal for 2012 is building the Hive Learning Network Barcelona. It’s not an easy task. Cultures are different, Barcelona is different from New York, as other European cities may be different from Barcelona. And Hive is a formal network of civil society service organizations; that means that we need to think beyond political implications and at the most superior, hackable cultural layer, so this can become effective and successful.
Online events as Fireside chats are a great way to accomplish lot of things and meet people that make the same things as you (there were folks from various cities who want to bring the Hive). Calls as Webmakers allows you to present your project and accomplishments to others and get feedback / peer assist.
During the Fireside chat, Chris said something that really matched with my thoughts: setting up a Learning Network, finding an efficient formula … that may take years of work, experimentation, iteration. And he is right… we already started to raise awareness here in Barcelona by organizing and helping other to organize the Hack Jams, in the next 2 years we will try to build room for even more people to get involved, because (at least in Barcelona) I don’t see a successful Hive Learning Network without a foundational strong, diversified and open Mozilla communities.
There are things that we have to deal with in the upcoming months, such as the too much localism and authority or the lack of understanding what a diverse cultural/linguistic community organization is.
In a few words, we have to hack cultures: learn to build communities and initiatives around affinity but respect every peer’s culture and language, explore and find easy ways to build bridges between groups, redefine localization and the core community concept, learn to communicate across cultures.
At the end of this post, I want to quote something I read in the Learning Freedom and the Web Festival’s book (I may comment on this later, but this is a certain proof that sometimes we put the “language and translation” as a principal cause for leak of participation when the problem is much more complex).
“There were difficulties in communicating and building bridges amongst people with very different backgrounds, skill sets, and languages (The lack of translators for sessions, which were held exclusively in English, came in for a fair amount of criticism).”
This is the second post of a series on Mozilla’s Community Building/Development and webmakers.
December 27, 2011
Laura Hilliger
My Year in Review
Seems like I should follow suit and do a “Year in Review” post. I do so like to comply. I was moving around quite a bit this year. This post took me forever to put together.
January: Ran the first New York City version of the Producer’s Institute for New Media Technologies, started working with the Open Attribute Team, submitted work for a few Master classes, decided to stop focusing on Big Fun Arts, considered volunteering in Equador just to disappear for a bit.
February: Continued trying to stop focusing on Big Fun Arts, went to Transmediale in Berlin and drank too much whiskey in the street (led to the very worst hangover I’ve ever had in my life), started Zythepsary.com, continued with Open Attribute and Masters work while in Malaysia, traveled to Adelaide to serve at the Hive Labs at the BigPond Adelaide Film Festival (met the very awesome Penny Woolcock, who has earned my unwavering respect).
March: Did a bunch of free webby stuff for friends, gave lots of free advice, did some client work for random clients, did some OA testing, translated an article called “Vertical Model Integration in Frameworks: Evaluation of Integration Approaches and Analysis of a Implementation Possibilities using a Case Study” (nearly cried), went to Global Melt in Berlin (remembered why I shouldn’t ever play “I Never…”), wrote about the Evolution of Cinema and Designing in Code, talked about printing organs.
April: Networked with some people, donated to Mozilla, did some client work for random clients, worked on grant applications for Alien/Citizen, wrote about evaluating E-Learning, tried to work on my book (had a hard time writing at home), attended seminars in Rostock for my Masters (was annoyed and vowed never to attend the University’s seminars again), started a study group on P2PU.org with Pippa Buchanan, did more OA stuff.
May: Did some translations, worked on Masters, started playing around with Podio, did webby stuff in trade for art (again), did editing for free (WTF is wrong with me?), found out that another of my brilliant ideas has already been done (vowed to do it anyway because the implementation of said idea was total crap), started MozPub Dresden with @whimboo, geared up for PISF 2011, went to Austin, TX and wrote in the Spiderhouse Cafe, visited Colorado (laughed a lot).
June: Ran the Producer’s Institute for New Media Technologies in San Francisco (gave a presentation on the history of PI to a bunch of foundations and interested parties – people laughed, it was awesome), donated my entire airfare to BAVC (felt good about it), got really sick, was selected to participate in the Knight-Mozilla Learning Lab.
July: continued being sick (subpar for weeks), participated in the Knight-Mozilla Learning Lab (learned a lot of stuff), installed P2PU development environment, started the citizen initiative Waldpark Trachau, did work for my Masters, tried to be supportive to Alien/Citizen director Marlo McKenzie, donated to Digital Democracy, decided to quit Facebook, visited Paris (and the Mozilla office there).
August: Gave an interview about progress for the sake of progress (for Waldpark Trachau), solidified another random idea (that will likely never be built) called Mooder, did Masters work, did more translations, opened and closed a Dopplr account on the same day (I suspect it was the lack of “e” that caused me to do that), had surgery (led to the inspiration for and first chapter of my second book – as of yet untitled), got Twitter hacked (changed a bunch of passwords), made a book for my mom’s 60th.
September: Planned an interactive sound installation and donated some time to Ludesik, chased down people who owed me money, did the interactive sound installation at an exhibition opening (it was cool), donated to Unhosted.org, more Waldpark Trachau stuff, took two written exams, booked Peru (leaving in two days), quasi party crashed the Mojo event in Berlin (was quasi invited), did champion birthday celebration (39 hours), broke up with Facebook.
October: Went on sabbatical and finished writing my first book, realized writing a book isn’t the hard part (hard part is rewriting it), did Masters work, volunteered on pet projects, did some random client work.
November: Went to Mozfest (met awesome people), went to P2PU meetup in Berlin, found out I passed my exams (despite having to write them in German), accidently killed a friendship, accepted various defeats, started working on the Hackasaurus P2PU Challenges Experiment.
December: Worked on Challenges, planned/ran a Challenges Hackjam in Toronto, traveled to the mountains, heading to Peru in two days.
That was most of my year. I’m only leaving out about a million things, but I’ve had enough of this post, and I suspect that most of you didn’t need that kind of detail on MY year. I mean, really, who gives a shit?
Hope anyone reading this has a Happy New Year. Cheers!
December 23, 2011
Ben Moskowitz
Learning, Freedom and the Web – read all about it!
Hey, here’s an ebook! http://learningfreedomandtheweb.org
The Mozilla Foundation is going big on learning in 2012—learning through the web, learning like the web, learning about the web. Mozilla wants to create a web literate planet.
It’s a grand vision that’s expressed through things like the Mozilla Hive learning networks, Hackasaurus, web skills training, learning labs, badges and assessment, and the “open source” model itself.
You can find the kernel for many of Mozilla’s learning initiatives in the 2010 Mozilla Festival: Learning, Freedom and the Web — a 500 person meta-hackfest that took place in a Barcelona city square.
For a good part of 2011, I’ve been working with members of the Mozilla community to capture that event for posterity. We finally finished, just in time for the Mozilla Festival 2011.
Check out Learning, Freedom and the Web, the story of the 2010 Mozilla Festival. Available in PDF, HTML5, and paper.
This was a pretty big effort. Anya Kamenetz, oracle of the edupunk movement, thoroughly documented the event. She conducted extensive interviews with participants and gave it the journalistic treatment. Working with Matt Thompson, she also curated some of the best blog posts by participants, and captured the best tweets and Flickr photos. Chris Appleton, designer extraordinaire and the creator of the Festival look-and-feel, did an excellent job designing the book, with beautiful typefaces, visual elements, and layouts. Jess Klein contributed some amazing illustrations. And many, many Mozillians contributed edits (mainly through Etherpad, of course!).
You can get the book, for free, in PDF form [8MB PDF]. Or you can order a physical copy for $50. They’re pricey, but well worth it, with 247 crisp full-color pages.*
There’s also a tablet-optimized, HTML5 version, designed by the wonderful Alex Samuel and her students at Emily Carr University’s Institute for the Future of the Book. This edition includes videos from Barcelona and from the Mozilla Science Fairs, as well as interactive how-tos and social features. Huge thanks to Alex, Celeste Martin, Justin Alm, and everyone at Emily Carr!
The coolest thing about the HTML5 version is that you can hack it. It’s licensed CC – BY – SA, so you can take the source and do whatever you please with it—as long as you share. The source is on GitHub. If there’s enough interest, we can keep growing the ebook. If you see an error, or would like to add to the book, fork away!
This book was written by the participants of the 2010 Festival. But it was assembled by a core group of hard working folks. It was fun to play “air traffic control”—and I’ve gained a huge appreciation and empathy for those who work in publishing!
Check it out, let us know what you think.
–
*DIY publishing is hard. These books are too expensive, even though we’re breaking even. We’re working on ways to get the price down, and are considering offering a black and white edition for under $15. Would you be interested?
December 20, 2011
Matt Thompson
IE6 is dead, Firefox lives, and Mozilla is (still) awesome
Reports of Firefox’s death were greatly exaggerated.
For the last several weeks, we’ve seen a stream of speculative hype and forecasts of doom from many in the tech press. But today, all that’s been put to rest — like we always knew it would be:
- Google Renews Firefox Search Royalty Deal
- Mozilla and Google Sign New Agreement for Default Search in Firefox
- Mozilla in 2012: why the mission of Mozilla is as important as ever
And we’re just getting started
As Mozilla CEO Gary Kovacs points out, Mozilla is growing, leading, and doubling down on its non-profit mission in crucial new ways: working to create a web literate planet, building a generation of web makers, breaking commercial choke-holds through our vision for apps, setting mobile free, putting people in charge of their online identity, and pushing the web forward.
A nice triple for the open web
As Ryan Merkley pointed out, this week marks an interesting triple play for the open web:
1) Internet Explorer 6, the browser that once threatened to break the internet, is now officially slated for extinction.
Even Microsoft now concedes on its IE6 countdown site that there’s just no place for a non-standards compliant browser:
“…in an era of modern web standards, it’s time to say goodbye.”
Firefox created that era. We’re all now living in the open, standards-based and competitive world Mozilla fought to create.
2) Firefox 9 — the most awesome Firefox yet — just shipped today.
3) And the Mozilla Google deal is done, providing an important revenue stream to continue and expand our non-profit mission for years to come.
It’s a good day to be a Mozillian.

December 19, 2011
Michelle Levesque
Skyrim Skills and Web Literacy
In most roleplay games, you actively “design” your character’s strengths. ”I’m going to be a thief,” you say. ”So I’m going to need to invest in being good at sneaking, stabby weapons, backstabbing, pick pocketing, that sort of thing.”
And then, regardless of whether you’re playing with dice or a keyboard, as your character progresses, you actively invest in those attributes, picking the ones that you think will help you along the way. When you decide to invest in lock picking, poof!, like magic, you are better at lock picking.
It’s pretty tempting to think of building a curriculum like this. You decide on your web literacy “class” and then pick which skill trees you want to advance towards in order to advance in your chosen class.

It's tempting to design skills in a this-before-that tree like this.
The problem with this model is that learning is a lot messier than that.
In my “computer hardware class” in 2nd year of college, I learned a lot more about how to be productive when your prof decides to pair you with some booger who is the captain of the lazyboat, than I did about actual computer hardware. And by the end of my “cognitive sciences class”, I was an expert at taking notes at 100 wpm to match the instructor’s speaking speed.
Skyrim breaks the traditional roleplay skill-gathering model by having you gain skill points in anything you do often.

If you spend time sneaking around, your sneak points go up. If you spend time lock picking, you get better at that. If you spend time shooting fireballs at goats (what? It was a rainy sunday afternoon!) your destruction magic skill goes up.
The interesting thing about this system is that you often find the following type of message on the game’s message boards:
I was planning on playing a pure conjuration/healing mage, but then I found that I kept using sneak to get closer to my opponents, so I sort of became a thief / mage hybrid.
My first point of note here is how people surprised themselves at what their characters ended up knowing how to do. They hadn’t intentionally learned anything, it just naturally fell out of what they were doing anyway.
Secondly, this type of organic skill acquisition reminded me so much more of how real life actually works.
People rarely explicitly decide to improve a specific skill. More often, they are just tackling problems around them, and end up practicing certain skills to solve those problems.
There’s a videogame term for choosing to improve your character’s stats outside of this organic framework: grinding. Grinding is when you say, “I want to be better at ‘sneak’, so I’m going to spend the next 3 hours of my afternoon just sneaking in circles around this guard, over and over, just going in circles around him, to get better at ‘sneak’.”
Guess how much fun that is? Pretty much none.
Lessons worth keeping in mind?
- People learn what they do, not what they plan to learn.
- Learning by chance is so much more fun than grinding.
Laura Hilliger
Hackjam Parking Lot
This past week, we ran a Hackasaurus/P2PU hackjam to implement functional changes to the P2PU platform and create challenges curriculum for Hackasaurus. It was a whirlwind three days.
While we had specific goals, we also had a lot of ideas that aren’t in scope for this phase of the Challenges Project. Those ideas deserve some attention, so we put them in a Parking Lot to discuss at a future date and time. This post is about the items that were parked.
Parking Lot: Methodology Rethinking
Michelle Levesque and I had a very interesting conversation about process. Michelle is doing some huge meta thinking about web literacy, so we had a huge meta conversation about education, assessment, and curriculum development process. There in the Mozilla Toronto office’s bike room (we were doing a walk and talk all over the office), we discussed the differences between learned methodologies and methodologies that work. We talked about how we’re all trying to do something new, teach something that isn’t widely taught, define lessons that are ingrained within.
Imagine if you were part of the first group of people that could read or write. How would you teach the concept of written language? How would you translate spoken language into a serious of lines and explain it to people ? How would you explain the value of being able to read or write? Where would you start? What auxiliary skills would you have to teach beforehand?
We talked about how methods that might have worked in the past might not be the right methods for us. We talked about how other people tackle problems versus what we would do and found a bit of common ground.
Thanks Michelle – good talk.
Parking Lot: P2PU for Different Age Groups
It’s hard to create a platform “for everyone” and even harder to create curriculum for everyone. In fact, it’s probably impossible to create a piece of curriculum that can teach both adults and children. Jess Klein put the discussion of being able to use P2PU for varying age groups in the Parking Lot, and I couldn’t agree more. The tagline of P2PU is “Learning for everyone, by everyone, about almost anything”. How can and should this platform be modified for children? For teens?
Parking Lot: Badges
The Open Badges Infrastructure went into Beta in September. P2PU had been using the Alpha version of OBI and ran the pilot badge program at the beginning of this year. Zuzel Vera talked about expanding the badge model and functionality on P2PU. In addition to those changes, implementing the beta OBI into P2PU should have high priority. Unfortunately, due to resources, it must be pushed into another phase of the project. Still, the P2PU badge system is getting a lot of attention in this phase, so we’ll have a better picture of how people are responding to badges after the January launch of the Challenges Project.
Parking Lot: Browser ID
One of the goals we had for this project was to enable P2PU content creators the ability to use Javascript in their curriculum. However, due to security issues, that functionality shouldn’t be implemented for the general community without serious consideration of the solution. For this phase, we’ll probably hard code the Hackasaurus Challenges into the P2PU platform and/or use a window.open(). We also discussed using iFrames, but for Hackasaurus, the iFrame conflicts with XRay Goggles, so that solution isn’t ideal. Atul Varma and Zuzel discussed several solutions to allow P2PU to talk to external sites, one of them sounded very promising, but couldn’t be implemented by January. So the discussion about using BrowserID or OAuth was put in the parking lot.
Parking Lot: Identity Design
The last parking lot item revolved around the identity of P2PU. Stephanie had a conversation in Washington DC with a group of networking engineers in which she discussed the Challenges Project and the P2PU platform. That conversation included the demonstration of the platform, which led to a few comments on the look and feel. The logo in particular seems to be aimed at high schoolers (it’s using a letterman font). Chloe Varelidi and Zuzel, the P2PU representatives at the hackjam, agreed that the design of the site could use some help. They also explained that all the design had been done for free in the community. P2PU has a UX designer contracted at the moment, so the platform has been improving, but it’s the identity that is the item in the parking lot.
Hackjam Success
We accomplished a great majority of the goals we set forth, and had a lot of interesting discussions about badges, web literacy, curriculum, evaluating success, and the P2PU platform. We also created a series of artifacts that shows our thought processes and can serve as a catalyst for future curriculum projects. Stephanie and I will be talking more about those artifacts soon.
December 15, 2011
Michelle Thorne
Fireside Chat: Starting a Learning Network in Your City
This article is cross-posted on the Hive Learning Network NYC blog.
This week the Hive Learning Network in New York City held a virtual fireside chat about how to start a learning network in your city. The chat was led by Hive NYC’s director Chris Lawrence with brilliant support by Lainie DeCoursy and Helen Lee.
What is a Hive?
The Hive network in NYC is a community of organizations that care about youth & learning. These include the MoMA, the American Museum of Natural History, Dreamyard, the New York Public Library, MOUSE, Eyebeam and over 30 more.
The network is driven by core beliefs such as: school is not the sole provider of education, learning should be driven by youth’s interests, and organizations must collaborate to thrive.
As Mark Surman describes it,
A community of orgs leveraging and building digital skills into they way they teach art, science, poetry, whatever …
… rolled up inside a distributed lab that is creating new curriculum and new technology …
… which, by the way, is a school that teaches web literacy.
Hive-ness: How to Get It
At the Mozilla Festival in London, we experimented with a pop-up model of Hive. Combining programs from established learning networks in the US with London-based initiatives and schools, the Hive London Pop-Up was a fun two-day playground of digital learning and making.
Events like the Pop-Up showed the power of bringing these people & projects together.
Over the coming months, we’re looking to work with institutions and individuals who are interested in youth and digital learning in their city. Using some useful event formulas, we hope to test what works well in your neighborhood, share that experience back to the global community, and keep improving — all towards making a real difference in the way youth come to learn and play with the web.
Hacktivity Kits for the Hive
In an earlier post, I talked about the fabulous Hacktivity Kit developed by the Mozilla Hackasaurus team. Hive would like to use a similar approach to share its formula for a collaborative learning ecosystem with cities around the world.
In the fireside chat, Chris explained the three ideas for trying this out:
Hive Pop-‐Up: A collaborative mini-festival for youth, educators and families with curated, table‐top projects and activities. Bite-sized model of the energy of a Hive Learning Network.
Hive Hack Jam: Flexible programs based on hands-on projects, media creation and webmaking. Just like a music jam, a hack jam gives participants the chance to make something and have others riff off of their work.
Hive Design Charette: Convene a cohort of interested organizations, educators, philanthropists and other creative people in a short, concentrated amount of time to build a strategic plan towards the launching of a Hive Learning Network.
Hive in Your City
The fireside chat had people from over 7 cities: NYC, Philadelphia, London, Barcelona, Berlin, Toronto, and Chicago — all interested in growing these educational opportunities.
Alina from Barcelona talked about the many events they’ve done in the city since the first Mozilla Festival in 2010. Heather shared how the meet-up she founded, LadiesLearningCode, fund their activities, Kasey discussed how to connect funding institutions in Philadelphia with a design charette, and Leon talked about his experiences in the UK.
Just as the festival in Barcelona catalyzed a community of practice, I hope a similar community can take root in London. With folks like Leon and Learn 4 Life, YoungRewiredState, Coder DoJo, Apps for Good, and Digital Me and all the other talented people who participated in the Hive Pop-Up, there is a great opportunity to build a learning network in London, and as we’re seeing, beyond.
What’s Next
The feedback from the fireside chat was quite positive. With tools like BigBlueButton, it’s increasingly easy to gather smart people online. It’s inexpensive, cost-efficient, and fun.
We agreed it would be great to hold another fireside chat in January. We’ll likely craft the discussion around activities people are trying out in their city, compare notes, and continue to work towards a Hacktivity Kit for youth & learning Hive-style.
Thanks to everyone who joined in the conversation!
Web Made Movies
Transition
Here I am, burning the midnight oil (literally), setting up a new server. So much work to do and so much catch-up to play. Since I’m not a sysadmin by trade, my working knowledge of what’s hip in the server world is relatively scant.
But, as I slowly copy over important files from my old setup, spin up new versions of old configs ( debian etch is … quite old now
), and learn what programs are coolest to serve static content now, it’s coming together again.
Good bye Apache, old friend. Good bye wordpress. Good bye PHP. I won’t miss you guys very much.
Hello modern web-development world. Should I be scared?
Article source: http://blog.robothaus.org//2011/11/21/transition/
It’s a Good Day to Render
After what seemed like a totally unproductive and inconsequential morning, and an equally slow and frustrating afternoon, I managed to at least prototype two rather important things that have been lingering around Paladin and CubicVR for a long time.
First, Gladius had a rendering engine, but it was almost entirely useless unless you really like clearing a canvas. Second, CubicVR.js could only draw to one canvas on a page. Not “one canvas at a time”, just one canvas.
Now, the hard part of both of those problems are dealt with, and it’s no coincidence that they were both attacked in the same day.
State of Gladius

Progress on Gladius has been steady as Alan irons out the last bits of the framework for the looming 0.1 deadline (roughly, the end of December). Doing my part, last month I boasted about Gladius getting a renderer, but it was really only partially complete.
What it did: cleared the screen
What it does now: builds models from meshes and materials, clears the screen, renders those models, and has a scheduled engine task to repeat it all
Clearly, today’s work yields far better results than the prior engine. Obviously, we still lack a lot of things that one would assume a modern graphics engine would provide to game developers, but this is a big leap.
In short here’s how preparing and rendering something looks like right now:
- create a Mesh resource from a script
- create a Material resource from a script
- create a Model component
- create an Entity to hold the Model
- feed the Mesh and Material to the Model
- add the Model to the Entity
- render!
This approach is interesting because it relies heavily on prepared scripts to build resources like Meshes and Materials. For instance, there is a procedural cube Mesh resource which will (unsurprisingly) create a Mesh that is a cube. There is also a procedural sample Material resource which will create a simple red Material (no textures yet, just colour). Then, as a game developer, it’s easy to swap out Mesh or Material resources when you want different ones for a particular Model, and it’s easy to reuse the same procedural resource to give you lots of slightly different Meshes or Materials.
Also, it may not be entirely obvious that, by using procedural resources, we have the ability to build an entire game without loading a single bitmap or otherwise baked asset. Imagine building a game that involves a simulation of a universe. Instead of forcing the user to wait precious seconds to download a large file describing the shape and state of the universe, they can download a tiny piece of code which, when used with a particular seed, creates the same universe. This same technique can be used to create not only Meshes, Textures and Materials, but even Sounds, Forces, or Terrain. A lot of demoscene groups solve size problems similarly to create the notoriously mind-boggling 64k intro category.
Just imaging stuffing this into 64k:
Some have even attempted procedurally-generated games:
Coasting on back from that tangent, Gladius is a long way off from being able to produce these kind of effects, but that’s generally what we’ve got in mind. We want devs to really be able to use their imaginations with Gladius, especially in a climate where fat downloads are often not appreciated.
Massaging CubicVR.js
The way we’ve used CubicVR.js in the past it may be surprising that its in need of some caretaking. I don’t at all mean to imply that it lacks functionality. In fact, it continues to surprise me even as I flip through test html pages fixing syntax problems I’ve introduced. However, there are a couple pieces of CubicVR.js that require some love:
- The Octree implementation has drifted slightly from the progress and structure of the rest of the engine, so it needs repair. The current implementation looks a lot like Java (my fault), and there is a new, mostly complete JavaScript-inspired version called octree.js which is available to start integrating.
- CubicVR can only render to one canvas on a page. Rendering to multiple canvas elements should be possible, and indeed easy.
Luckily, one of Dave Humphrey’s students has offered to help bring CubicVR.js’ Octree back to life, which he has already completed to some degree. Soon, while octree.js gets wedged in, we’ll need a few tests to compare it with CubicVR.js’ current implementation – for sanity, and for speed comparison.
Multi-canvas Support
While getting Gladius’ renderer in order today, I encountered a few pieces of CubicVR.js on which I’ve had a grudge for some while. The initialization sequence and global namespace CubicVR.js uses are cumbersome when being used inside a project like Gladius, which we’re trying to keep as flexible as possible. Much of my perturbation stems from the question, “What happens if the developers wants to render to two independent canvas elements on a page?”
Gladius is an especially good example because of its qunit testbed, which uses async tests likely more often than it should. Guess what that means. You probably thought, “multiple simultaenous renders!” Since we need to test multiple engine initialization scenarios, Gladius’ testbed will try to render to one canvas multiple times, or several canvases once each. I chose to implement the latter because of the async demands, but I really sidestepped the problem by only rendering once in the entire test module, …which is bad. Our testbed will only get more complicated, so, CubicVR.js needs a multi-canvas solution fast.
Digging Into the Problem
It’s not immediately obvious what will happen if I try to do this with a current build of CubicVR.js (which I’ve actually documented):
In fact, we end up in something of an undefined space here when we want to continue to use both canvases. When you create a texture, to which WebGL context does it belong? If you try to find out, Firefox will likely crash like it did for me today a few dozen times while I debugged the situation.
Initially, I attempted to solve this problem in a stateful manner, inspired by the way WebGL itself works:
In this simple example, we attempt to create a Texture for each canvas. It’s clear which canvas owns which Texture, since explicitly switch “contexts”. CJ was quick to point out the pitfalls of this approach, and the problem sat unanswered for a while. Just think of the nightmare inflicted upon forgetful developers when they leave out a setContext somewhere and don’t understand why their renders are incorrect.
Proposal for a Solution
Fortunately, there was some work done to create Automated Testing which skirted on the multiple-canvas problem, but didn’t fully address it. It did, however influence the codebase in a way which was already occuring in several other spots.
CubicVR.js uses a require.js-like module structure, where modules are registered by the core, and executed before initialization to ensure the CubicVR namepsace is full of all the goodies that one would expect, like CubicVR.Mesh and CubicVR.Scene. What I hadn’t thought of before was how much this design allows the isolated initialization of each module.
In other words, why not initialize each registered module whenever a call to CubicVR.init or CubicVR.start occurs, and attach the result to a properly scoped object? So, I did just that: I forced much of the CubicVR namepsace into a closure which is instantiated by a call to CubicVR.init or CubicVR.start. My proposed solution makes the return value from a call to either function a CubicVR “Core”, which is basically the entire namespace as you would expect it. For example:
This code looks remarkably similar to current CubicVR.js code. In case you missed it, the only change is that I’ve replaced every CubicVR with core, except where completely necessary, like initialization. With this method, only a few fundamental functions are attached to the global CubicVR namespace, so many versions of CubicVR.js’ modules can exist in harmony.
The branch in which I’m doing my multi-canvas support work contains a test of the functionality in the instancing test folder, which demonstrates the ability to have CubicVR.js render to multiple canvas elements, and control them independently with respective MouseViewController objects. I thought interactivity would be particularly convincing.
A bit more work needs to be done to update the rest of the tests and samples with the syntax change I’ve proposed, and I’d like to get some more feedback from CJ, but I’d say this work puts us in the position to have multiple canvas support in the very near future of CubicVR.js.
Rendering a Conclusion…
I’m glad Paladin and Gladius are affecting CubicVR.js so positively. The focus is forcing me to address problems that are otherwise easy to ignore. More importantly, however, there is much more activity from contributors recently, many of which are involved in Dave Humphrey’s courses at Seneca. The sudden increase in bug fixes and feature additions in Paladin as a whole – constituents included – is really starting to show in the way of more stable tools.
More progress soon. Expect big things.
Article source: http://blog.robothaus.org//2011/12/14/its-a-good-day-to-render/
Gladius Gets a Renderer
I just finished committing and issuing a pull request for the bones of Gladius’ graphics service. Alan and I have been talking about how to do this properly for at least two months now, so it really feels good to write down some code. Here’s how it looks:
A little explanation first…
Keeping modern game engine design in mind, Gladius implements an Entity/Component system where Components such as Models or Cameras are added to Entities to give them functionality. Components are supported by different systems called Services, like the Graphics service. This approach circumvents the need for a bloated, all-inclusive base class from which plants, paladins, and planets all inherit to receive common functionality. Instead, with a proper dependency system, a Camera or Model component can insist that there is a Transform component on the entity to which it’s being added so it can move through – and interact with – space without spilling remnants of itself onto other game objects through inheritance.
So, making an object appear on the screen is as simple as adding a model component to an entity in a scene. Of course, a model needs data, and there are plans being forged to support all sorts of inputs for meshes. However, that’s another discussion entirely. Right now, all you need to know is that Gladius has the fundamentals in place to build basic procedural meshes (a cube, really).
Rendering
The graphics service can achieve a complete render of the entire engine’s state by following this short, pithy, pseudo-code:
- For each scene in the engine, find two lists: cameras and models.
- For each active camera in a scene, render all of the scene’s models.
This tiny algorithm translates into this longer, Gladiusized-pseudo-code:
- Clear the current drawable object (right now, a canvas).
- For each scene in the engine, get lists of entities with camera and model components respectively.
- For each entry in the camera list, grab the camera component; if its an active camera, render the mesh in each model in the model list.
It’s a great starting point, but there are very obvious inefficiencies and missing features in the above process, including…
- The inability to render to anything except a canvas: In the near future, we’ll write code to present the proper abstractions to developers which will allow different renderables to be rendered for a given camera. You may want to render to a buffer, a canvas, or a textbox. We were thinking about naming these Films, but Renderable (which is less cool) might also work.
- A lack of culling: Right now, rendering from the perspective of a camera is expensive in a large scene with many objects. We need a way to slice up the scene so that we can discard what’s not in view and only render what’s important. But, don’t worry: my octree.js library is nearing completion and will soon fill the void for a space partition culling mechanism. It’s very similar in spirit to the octree implementation in CubicVR.js which I also wrote (unfortunately, with strong evidence of the job I did porting it from a Java implementation I wrote a couple of years ago).
Also, since the graphics service distributes cameras, there is the potential to avoid storing a list of scenes. Camera entities are parented to a scene, so a list of models (and other important things in the future) relavent to a camera can be extracted from its parent. This approach will be useful when spatial partitioning lands, since a run through an octree with the frustum of a specific camera will yield a list of visible models to render.
CubicVR.js Graphics Services
And where would we be without CubicVR? Well, there would be a significant gap in the Dreamcast homebrew 3D engine community. But, more importantly, we wouldn’t have the talent and engineering behind the engine that drove Flight of the Navigator, No Comply, and Rescuefox.
CubicVR.js is Gladius’ first rendering core, and we’re glad to have it. It gracefully handles a complex and feature-rich shader pipeline, and supports all sorts of neat mesh building and deformation techniques (now with dynamic vbo’s). Check out the samples directory for a bunch of hacker’s delight and eye candy.
Currently, we’re wrapping CubicVR’s Camera and Mesh objects with responsibly named components: Camera and Mesh. Since the graphics service currently in Gladius is specific to CubicVR.js, it knows about the native CubicVR.js objects which live on components and how to make them cooperate.
Our hope, of course, is to support a wide variety of rendering engines in the future – even 2D ones. Each would require an implementation of the graphics service and the core grpahics components to comply with the particulars of the renderer.
Try it!
The most important part of all of this is that you can grab the branch and try it out right now. It won’t do much yet, but you can tell it’s working because gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); is doing its job by blacking out the canvas on the test page. You can change that by contributing
.
For now though, I’m just happy all the supporting infrastrcture is finally in working order to hack on this renderer. I can almost feel the games we’ll create with this engine.
Article source: http://blog.robothaus.org//2011/11/23/gladius-gets-a-renderer/
Gamepad Vibration
If you’ve been paying attention to the recent surge of activity surrounding implementation of game-related browser API’s, you’ve probably already caught wind of Mozilla’s stream of cross-platform gamepad-ready try-builds, supporting libraries and working RescueFox demos, or perhaps Google’s announcement of Scott Graham’s Gamepad API and his game to show it off.
Today, I’m happy to announce that, as far as I know, the first working prototype of force-feedback (rumble) support is available to play with. I also forked Jon Buckley’s input.js to augment its test suite with vibrational goodness.
Zero → Discovery
Watching Dave Humphrey lead a class of students at Seneca College to implement mouse locking in Firefox really inspired me to do some digging for myself. It was an enlightening experience to partake in one of his classes and subsequently hack around with Jon Buckley on adding XInput support to Ted Mielczarek’s recent Firefox Gamepad API implementation.
Optimism with FF_RUMBLE and Friends
Obviously, having rumble support is strictly cooler than input-only gamepad support (which is already very cool). So, I thought about how to get it done which was ostensibly straightforward, as things usually are at first. My development system of choice being Linux, I dove into some google searches for generic rumble support and found some helpful, but scant and unsupported information. Getting operational info from my gamepad was the easy part.
Actually causing some force feedback to occur requires two steps:
- Prepare an “effect”, which is a reusable construct that tells something which supports force feedback how to react. They have different types like FF_RUMBLE, or FF_PERIODIC, which you can find out by bit-testing the features array against these constants. Once it’s created, upload it to the controller. You can upload several effects in a row and activate them at will.
- When force feedback actually needs to occur (for instance, when your car hits a wall, or some reasonable physics-related facsimile thereof), create an “input event” to activate an effect, and upload it to the controller.
The C++ looks a bit like this:
One thing I need to point out is that you can run out of space rather quickly on your device. My Logitech F510 can hold 15 independent effects, and it’s not entirely obvious how to reuse an effect without taking up another effect slot on your gamepad.
The key is this line:
If the effect id is set to -1, uploading the effect will reset it to something -1 to identify the effect. If your code sets it to -1 again, you will upload a new effect with the same properties, and the struct will get a new id. However, if you just want to update the effect’s parameters and re-upload it, don’t touch the id. An id of greater than -1 will be assumed to identify an effect that already exists.
So, we create effects, upload them, activate them, and that should be it, right? Problem solved! Mission accomplished! Gamepad is vibrating…! Well, no, not quite…
Trouble
Alas, initially, uploading effects always failed (returned -1 from ioctl). I searched around for some answers, and discovered three imporant things:
- ff_test, a tiny program that tests force feedback for devices in linux, exists and comes in most Linux package managers with jscal, joystick-utils, or just by itself.
- In order for O_RDWR access to be granted when opening an fd (so you can actually write to the device and not just read from it), you need to have full access to the device. Fortunately, this is easily temporarily attainable with sudo.
- As far as I can tell, support for the PS3 controller with default Linux gamepad drivers won’t give you force-feedback. I’m still not entirely convinced I’m not doing something wrong, but purchasing a Logitech F510 for testing instead made me care a lot less (because it just works).
Of course, ff_test didn’t want to install cleanly on my x86_64 Arch Linux setup, but luckily, finding and compiling the ff_test source code was a tremendous help to my progress anyway. Here, I had a working piece of software that let me read how it made force-feedback work. Learning by example is incredible in these situations.
I made so much progress in finding out what I needed and what I had been doing wrong, and was understandably excited to arrive back at my desk, rip open my new F510, and plug it in, almost all in one continuous motion. Then, disappointment: still no rumble, even though the words “Rumble Support” decorated the gamepad’s box. After a bit more digging and help from Ted, I found out that you can’t actually write to /dev/input/jsXX fd’s; you have to use their /dev/input/eventXX counterpart! Using the event instead, my F510 started to come alive.
The really fun part is finding out which event device corresponds to a given js device. If you’re trying ff_test for yourself and failing, try
where XX is the correct device number corresponding to your gamepad. If you don’t know which one is the one you want, read dmesg or just… try them all (start with 0). But, if you want this to happen programatically, say in Firefox, you need a different, more dependable solution.
udev
Thankfully, udev will get you most of the way there. If you’re running a modern Linux distro, you should have access to udevadm which will give you a lot of useful information about HID’s. Try this:
Gamepads and their corresponding event devices will have an entry reading ID_INPUT_JOYSTICK=1 which is very helpful for identification. However , if you have more than one gamepad plugged in, they will all have that property. So, we need to do some matching based on another property. I decided on ID_PATH because looks like some sort of usb identifier. This might change in favour of a quicker, or less sloppy method, but here’s how I’m doing it right now:
NOTE: There is definitely a bug in this code, which I will fix as soon as I feel like programming again. Try to spot it: it’s something to do with the property I’m trying to use for comparison (ID_PATH). I get the matching event device, but until I fix this bug, it will only work in some cases.
Using this technique, I was able to consistently open two associated file descriptors: /dev/input/js0 for reading, and /dev/input/event11 for writing. And guess what. My gamepad started rumbling.
DOM
Somehow, the easiest part of all of this work was getting the JavaScript Gamepad object to expose a new set of functions for vibration. Simply altering nsIDOMGamepad.idl gave me most of what I wanted, and I was able to find and copy a couple of other existing IDL files which gave me the rest.
Just to be able to set the vibration state, I needed a function in the gamepad interface like this,
which, on the implementation side, turned into C++ code like this:
Ted’s Gamepad API code is split up so that gamepad services are implemented on a per-OS basis, but they all inherit from a GamepadService class. So, in the GamepadService and LinuxGamepadService classes, I created SetGamepadVibration to deliver vibration state changes from Gamepad DOM objects to the service.
The only piece left was actually talking to the device.
Using select and pipe
Having done a considerable amount of detective work, learning about udev and the kernel in the process, the end felt near. I just needed to wire up the browser to push values from JavaScript to the gamepad service. The trouble was that an OS-specific service ran in its own thread to talk to devices, using select to wait for events, processing them, and sending consequent messages to the main thread. So, getting data to move in the other direction (from DOM objects to the Gamepad service; from the main thread to the service thread) would have to involve pipes.
pipes are simple communication channels which two running bodies (threads, processes, etc.) can use to send each other information. In simple terms, a pipe can be written to with write, and then read from with read, and all the data should arrive in the order it was sent. So, sending a vibration event over a pipe is as simple as writing a few pieces about the event in sequence. So, the main thread writes to the pipe like this:
where mVibePipefds is the pipe, mVibePipefds[1] is the end of the pipe to which we write, and index, duration, strongMag, and weakMag are the pieces of data we want to deliver to the service.
On the receiving end the code looks incredibly similar:
the only different being mVibePipefds[0] which is the end of the pipe from which we read.
I put together a handy function to finish the job:
Most of the code here is code I’ve already explained, so none of it should be surprising. I just wanted to consolidate it properly. Note, though, that it’s incomplete (as you can plainly see), and note that I’m not ever changing the id of gamepad.ffEffect, so I reuse only one effect per device.
Finally, some on-command rumbling from JavaScript.
Proof
As soon as I had this working from front to back, I had to prove it to the web. So, I filmed it:
On to the Hero Phase
Getting this work past the prototype phase is going to take some work:
- Implementing cross-platform support, which means augmenting the Windows and OSX services at least.
- Getting the community to help decide on a good API. There is a WebVibrator bug with which it would be useful to coordinate so that using any vibration capabilities on the web seems similar and natural. It’s also very useful to replicate something like XInput’s API for vibration, since it’s already used (a lot) in practice, and a lot of devices are being produced to support XInput specifically.
If you’d like to follow along, add yourself to the cc list on the bug which I’ve very recently inherited. Let me know your thoughts. More progress soon.
Article source: http://blog.robothaus.org//2011/12/09/gamepad-vibration-zero-to-hero/
December 14, 2011
Matt Thompson
Mozilla web makers round-up: Popcorn wins, Hive buzzes, youth hack
![]()
Our new focus on moving people from using the web to making the web is generating a ton of promising new software, demos, learning resources and activity.
This post is the first in a new weekly series of round-ups that try to summarize that action, created together during our weekly Mozilla Web Maker calls.
The best of these items will feed into a new monthly “Mozilla Web Maker” newsletter. Please sign up here if you’d like to receive it.

Mozilla Popcorn named one of Top Web Developer Tools of 2011
ReadWriteWeb named Popcorn, Mozilla’s HTML5 toolkit for supercharging web video, one of its most promising web developer tools of 2011. “The future of Web media looks good.”
Help shape Hive NYC’s 2012 goals (hint: world domination)
Mozilla Hive NYC is a New York-based learning lab for Mozilla learning and education projects, helping youth acquire digital skills as they make and learn with Mozilla. Chris Lawrence writes about Hive NYC’s goals for 2012, and is seeking your input on how the organization can expand and grow.
Hive NYC is also working on a “how to” toolkit for creating a Hive-style learning network in your city, or a one-off “pop-up” style event similar to the “Hive London” event at last month’s Mozilla Festival.
Hack jams for youth, by youth
The Mozilla Hackasaurus team is training youth to help run hack jams for other youth, building on their recently-released Hacktivity Kit. Check out Jess Klein’s blog posts, and don’t miss these two stellar videos from youth:
Shakespeare goes social: Mozilla Popcorn in the classroom
Mozilla Popcorn supercharges web video, and the implications for learning and education are huge. Community member Kate Hudson’s terrific new demo shows what happens when you mash up social video and Shakespeare to create a powerful new teaching tool. The story got picked up by opensource.com.

Web making and community building
Alina Mierlus writes about building the Mozilla community in Barcelona by bringing Mozilla’s web maker ethos to new groups:
Two years ago, Mozilla started to explore new ways to advance its mission, grow and rejuvenate the community, diversify our interest domains, and expand focus (go beyond Firefox).
Now, with programs and tools such as Hackasaurus and Popcorn that are getting stronger, and the work on Identity and Apps Ecosystem, there’s a huge opportunity to build new community (both local and global), inspire others, and promote a new way of working and building relationships.
Stay in touch
Want to stay up to date on what the Mozilla Web Maker community is up to?
- Join our weekly community calls. They’re fun, fast-paced and open to all.
- Follow us through @Mozilla
- Sign-up to receive email updates and our new monthly “Mozilla Web Maker” bulletin.
- Like us on Facebook.
- Join Mozilla.
Michelle Thorne
Mozilla Festival: What Next
At the Mozilla Festival, an incredible group of 700 journalists, coders, designers, and educators made over 20 prototypes, learned about media & the web together, drank buzzing coffee, played geek ping pong, and so much more.
How can we keep up the momentum? How can we continue making & learning together?
What’s Next?
The simplest way is to:
Join our web maker community calls every Tuesday:
Tuesdays at 4pm GMT (5pm CET / 11am Eastern / 8am Pacific) Conferencing Number: + 1 800-503-2899 7-Digit Access Code: 5435555
We’re also experimenting with virtual fireside chats and learning labs to make it easy and accessible to keep up the conversation. If you want to see a topic covered, or would like to host a chat, please let us know.
Hacktivity Kits
We’re looking to develop, test, and improve “Hacktivity Kits” so that people can join in ways that help them build and learn about the web together.
The Hackasaurus team, led by talented Jess Klein & Atul Varma, is paving the way with their Hacktivity Kit. It includes lesson plans, IT checklists, and lots of helpful advice for hosting your own hack jam and using their webmaking tools online.
The Hackasaurus kit will continue to evolve, and we plan to adapt its fun, user-friendly format to activities around Popcorn, Knight-Mozilla, and the Hive Learning Network. That way, more people can join in ways that help them build and learn about the web together.
Beta Testers?
We’re looking to develop, test, and improve more Hacktivity Kits.
If you’re interested in hacking on these kits, please get in touch (michelle at mozillafoundation . org). You can host an event yourself to test them, or just give feedback about what you’d like to see included or improved.
We’re learning as well and are eager to collaborate with you to make the most of this opportunity and growing community of practice!
Mozilla Festival: What We Made
Over the last month, we’ve been tracking the outputs from the Mozilla Festival.
A great number of thank-you’s are due all around to all the participants, facilitators, volunteers, staff, supporters, and the wonderful Ravensbourne for making this such a memorable event.
20 Prototypes
We’ve curated 20 prototypes that came out of Mozfest.
From 60 pages collaboratively written in the Data Journalism Handbook to monsters and trapdoors coded in a browser game; from 10-year-olds producing podcasts to a physical app store for community info; a charter for the School of Open charter to numerous paper prototypes; the Poptocopter, hackbattles, badges, and plugins for Popcorn…
There is just heaps of good stuff made by talented folks.
If we’ve missed anything, or if you have updates, please tweet ‘em using #mozfest. Let’s keep up the momentum!
Thanks again to everyone. I’m all verklemmpt.
December 13, 2011
Alina Mierlus
[Community building 0] – From simplifying Webmaking to Webmaker ethics
Has been a long time since I started working (with others) on building a new model of (Mozilla) community here in Barcelona and around (and I know I have to write more about this experience).
“What is the future of learning, freedom and the web? It’s a slate of ongoing projects. It’s a percolating of new ideas. It’s a crossbreeding of old categories. It’s a building of new relationships. It’s a founding of new organizations. It’s the construction of new systems. It’s the coining of new words. It’s the creation of a new reality. Together. [..] What really keeps a community going? Shared work, shared goals, shared fun, shared vocabulary, and shared rituals. There doesn’t have to be one ultimate unified vision. The idea of what learning will mostly look like in ten years, 50 years, or 100 years remains fuzzy, and that’s by design, because one definition of an improved future is one that has a greater diversity of choices than in the past. [..] In many ways, the medium speaks louder than the message” – From the book Learning, Freedom and the Web.
When I refer to a new model of community, I mean designing new processes, creating new event frameworks that can invite others to participate and adopting new practices for community development. That can mean interacting with people you’ve never did before, start conversations with other communities of practice, delegate responsibility and act as a coach for the new, future community leaders. This may seem uncomfortable, but after starting doing it you’ll have a lot of fun.
Early this year, I wrote a post about computer users groups (which evolved into specific operating systems / programing languages / technologies groups) and how those groups kept alive the whole tech. community, the hacking spirit. Then, I asked myself if Web(maker) local groups/clubs could nurture a movement around the Open Web? And I think they could. There are a lot of good things to learn from Users Groups: their self-organizing / decentralized culture, their focus on sharing knowledge and help others to understand software.
The various user groups and communities of practice I belonged in the past years helped me not only to learn more about software and tech. platforms, but also nurtured my skills and, most importantly, made me adhere to a set of ethics of software/technology development. However, I believe we could innovate more in this space, from the community building perspective. We now have the tools and the platform to do this. The ethics stance has been one of the dominant values of groups around free software / GNU Linux.
Bellow, I’m highlighting some outputs and insights I got from some events I facilitated in the last six months. In concrete, I’ll take Hackasaurus program – because it demonstrates that can offer local groups and communities the building blocks needed to tinker, create and learn, and potentially helping build this kind of mixed, different local groups/communities.

Photo by Samuel Huron
Mozilla’s Hackasaurus is a great tool that helps simplifying web making and learning, so a broader audience could at least understand what the Web is and how it works. But, it also opens a way to a lot more and engages curious users into building the web and take a more active part into a community.
Here are three events where we brought Hackasaurus to different audiences:
June, HackJam Barcelona, Citilab
Output: In June we organized the first HackJam in Barcelona. We spent one hour with 16 kids (10 – 12 years old), introducing them to the first phase of web making (understanding the remixable/buildable nature of the web). We started with a small, simple example of a “remixed paper magazine” (collage), so participants could see how they can change a story, remix a content just by experimenting and playing around. Then, we dived into playing with X-Rays Googles and remixing some webpages.
In this session we didn’t have enough time to deep into HTML/CSS and , but still, I learned a lot from it. And it was a great achievement to help kids discover that the web is something you can play with it, remix, build it, use it to express your feelings, vision, etc.
Although by the end of the sessions I had the feeling of “we should have done more… (dive more into making and the understanding HTML)”, after seeing the enthusiasm of participants presenting their “hacks” I realized that we actually unlocked a critical part of the web building blocks, opening the way to more. And most importantly, part of the participants wanted to learn more and play more with the tool.
October, facilitators HackJam, Televall Telcentre
Output: This was a second HackJam Enric and I facilitated, this time in a village by the Pyrenees range, at Televall – the first telecenter built in Catalonia. The audience was very different from the first one: four facilitators from the very Telecenter. We spent almost two hours demoing with Hackasaurus X-Googles Rays and remixing content on webpages. The aim was to understand the potential that today’s web has: you can build almost everything on it and there are also tools as Hackasaurus that simplify the understanding and learning process and engage in a creative way.
Before the session, I had a conversation with people there about the activities and life at the telecentre. “Now, teens and kids have their own computers and access to Internet. They go straight to home after school”. It was somehow sad to see how those spaces that years ago pioneered the access to Internet and technology are at now risk of losing their role and impact in the local digital society. But, at the same time, I was thinking about the opportunity we, local community of practice as Mozilla, could offer to those spaces, making them again be at the heart of digital transformations.
How using Mozilla’s tools and learning programs such as Hackasaurus, Popcornmaker or Hive (a learning network concept) could make Telecentres think and be more like the Web, transform them from the simple “access to computers / Internet points” to community learning centers – building local communities and help local youth become web literates.
November, demoing Hackasaurus and Popcornmaker, Digital Humanities event, CCCB
Output: Last month we were invited to join the Center of Contemporany Culture of Barcelona and Institute of Innovation and Research Center at George Pompidou from Paris to participate at the annual Digital Humanities event. More than 30 mediators, facilitators, educators and representatives of public, cultural and research institutions participated. Enric, Toni and I helped with a one hour hands-on session demoing Popcornmaker, Hackasaurus and Universal Subtitles. Then we participated in a broader conversation – “Education and contributions in the future of Digital Humanities”, where we explored the impact that informal, community-learning education has in shaping the future of Digital Humanities.
The debate around education and Digital Humanities was very insightful for me. One of the starting points of this debate was about the decrease of attention coming as a natural effect of new technologies (as Internet, Web, Social networks), especially among teens and kids. This raised a series of questions and answers around how we can use the same technology to transform those effects into something good to society (adapt to technological/connected life and not remain indifferent, make efforts to understand how technology works instead of taking it for granted, start using technology to create not just consume it).
And in a way, Hackasaurus or Popcorn can transform those effects and focus the attention to creating/building/remixing/experimenting.
Humanities, a critical part of our education system, need to adapt much more to new technologies. Around the topics brought into discussion were: thinking about the creation of a new school, how community based learning models and programs could reshape the education in a digital, connected age.
One of the most interesting parts was when discussing about the need of building new communities of practice (communities that could drive innovation, initiate new processes and, above all, be driven by a desire to create and make things) and build relationships between local communities of practice and cultural/research public institutions (museums, public libraries etc.).
There were more events this year that influenced part of my thinking about communities in general (and Mozilla Community in a first place) – the GlobalMelt workshop, Design Jam Barcelona, the small and informal Barcelona UX/WebDev community meet-ups, MoJo Hackfest. And this year I also focused more on working with local civic centers and public spaces – which I consider critical for building new healthy communities (more on this in the following blogposts).
Mozilla started two years ago to explore new ways to advance in its mission, grow and rejuvenate the community, diversify our interest domains and expand focus (go beyond Firefox). Now, with programs and tools as Hackasaurus and Popcorn that are getting stronger, the work on Identity and Apps Ecosystem is a huge opportunity to put efforts on building a new kind of community (both local and global), inspire others and promote a new way of working and building relationships.
Building a community of Webmakers with an ethics stance at its core (build web using native web technologies, work in open, share, respect the user) is one of the long-term goals Mozilla has. And there are lot of things to do to achieve this, a lot of things to change and some exciting upcoming years for designing this community. In the next blog posts I want to highlight some of my experiences and share some concrete steps on how we might do this, at least at the local level.
This is the first post from a series through I’ll try to express my personal thinking and vision on Community Building and Development.
December 12, 2011
Pippa Buchanan
Understanding Challenges
Lately I’ve been following along with P2PU by the mailing list as I haven’t been able to commit to Thursday’s calls. This has allowed for some deeper reflection slightly external to the core community.
I’ve been chewing over the idea of the P2PU Challenge model for the past weeks, trying to work out how it fits in amongst people, online facilitation and social peer-education. Challenges was once just a School of Webcraft experiment, but gradually they are expanding in popularity as an approach to be used more broadly across P2PU.
Chloe‘s going to be constructing another great post about challenges, but I wanted to write about my understanding of P2Pu Challenges from a community member’s perspective.
—–
The way I see Challenges is that they provide a focus for what is being learnt, i.e. the instructional materials / course design side of a P2PU learning experience, and bring content creation to the fore. You come to P2PU to learn by completing a challenge in the company of others (in a course or more openly and casually). You might also come to create Challenges or support other people’s learning by facilitating Challenges (your own or others’).
The Challenge acts as the focus or framing of a learning experience in which the objectives, activities and output / assessment components are included. Challenges go beyond defining goals, objectives and milestones and consider learning design in a specific P2PU context:
- they highlight the need for online peer-interaction
- reinforce formative, peer-supported assessment
- recognise that Challenges can make use of existing learning materials whether they be YouTube tutorials or complete OER courses.
Challenges also make the act of designing a P2PU learning experience more public and open, and a specific activity that can then be expanded upon socially and with focus within the context of a course. Until now the course design process has never been a particularly collaborative or public activity, but has been obscured behind the “Start Your Own” course button. The site interface and Course Designers’ Handbook have previously tried to encourage course creators to include and consider these design principles, but not so prominently.
Challenges share many similar elements with instructional and learning design, but the Challenge “model” is a much more consumable and far less boring entry point for people who wouldn’t otherwise consider the ADDIE model or similar when designing a course.
In fact, Challenges act as a very specific entry point and invitation into the P2PU learning space and community. By making the creation of a high-quality Challenge a goal in itself, it is easier to engage people in discussing and working towards developing high quality online peer-learning materials.
By clarifying that Challenges are about learning materials (specific to peer learning online) I’ve been able to move past a stumbling block, a hesitation that I’ve felt about Challenges and where they fit in with P2PU. That has to do with the act of content creation and the previous reluctance of P2Pu to identify itself as a site for the production of educational resources.
Previously, I don’t feel that the idea of useful and quality content was seen as a distinct priority or outcome of involvement in P2PU. Sure, P2PU’s user content was placed under a default CC-BY-SA license, but content that arose as a by-product of peer-learning, eg. comments from course participants or slightly remixed OER materials.
Challenges mean that P2PU is now encouraging educational content creation as a specific goal and activity for users. It’s important that this is seen and publicly identified as a new, distinct and potentially valuable process within P2Pu – open collaborative learning material development (making context specific OER, not just “learning with others”).
In general, after some initial scepticism, I’m finding this very exciting. Of course it raises some further questions:
- If some challenges end up being very good, how might they be used outside of P2PU?
- How could materials be exported (Worksheets, Course activity books)?
- Is this an opportunity for income generation – receive printed versions of “authenticated” challenges (Kickstarter?)??
- Could individual Challenge creators use P2PU as a marketplace for their content?
- Will the existing license be appropriate for Challenges as they evolve?
- Challenges highlight that learning design for collaborative online learning is a specific context – What is the process for upgrading and remixing existing, formal OER from a traditional delivery to a P2PU style?
- How could a collaborative Challenge design process be facilitated?
- If Challenges make content for peer-learning online, is there a similar process or thing which helps build a good, cohesive cohort of learners? What would that look like?
I’d love to hear about your understanding of Challenges and ideas of where they might be headed. Please leave a comment.
Related articles
- Exploring the Social: Challenges of Peer Learning (pippabuchanan.com)
- Peer-driven learning: We ain’t cracked that nut. (pippabuchanan.com)
Filed under: P2PU, p2pu-webcraft, peer-based learning, PLENK2010, public speaking, Uncategorized, USQ Tagged: Open educational resources, p2pu, peer-learning, school of webcraft
December 08, 2011
Web Made Movies
Shakespeare goes social: Mozilla Popcorn in the classroom
What light through yonder Popcorn-powered window breaks?
What can “social video” do for learning?
The hyper-talented Kate Hudson (co-founder of openjournalism.ca, learning lab shepherd for the Knight-Mozilla project, and a designer on the Mozilla Festival data journalism handbook project) has made an outstanding “Popcorn Shakespeare” demo that highlights the potential of Mozilla Popcorn for learning and education.
I think we’re seeing the birth of a new genre of interactive film — “hyper-video,” “social video,” or pop-up video on steroids — that will revolutionize multimedia in the classroom, and maybe even the lingua franca of learning in general.
Using the web to blend moving images, interaction and context
“Popcorn Shakespeare’s” ingeniously simple user experience: watch video of a Shakespeare performance, then move your mouse away at any point to pause the playback and get help with specific terms or passages you don’t understand. (e.g., “What does ‘Hie thee hither‘ or ‘the golden round‘ mean?”) You can also dig deeper into context or notes from your instructor or peers.
But its more than a glossary tool. You can also navigate the video by clicking directly on portions of the the text (similar to Mark Boas’ work with hyperaudio). Specific terms and passages also get their own URL, so you can skip directly to specific scenes for further study — and begin to “quote” and link to video as easily as you quote text.
Kate Hudson at the Mozilla Festival in London last month
Delivering context and metadata only when you want it
In Tuesday’s weekly Mozilla Web Maker call (which are open to all — please join us), Kate explained that the demo was inspired by seeing other students struggle with the language in Shakespeare’s plays, and the difficulty of looking up every word in a glossary as it occurs in performance. What makes her demo so ingenious is the way she solves this problem with dead simple UX: mouse away and the video stops, mouse back and it seamlessly resumes.
That simple touch helps make the surrounding tools and context timely and relevant, avoiding the “everything but the kitchen sink” problem of many early Mozilla Popcorn demos. Instead of overwhelming viewers with too much information, Popcorn Shakespeare gives you metadata only when you want it.

Turning “lean back” couch potato-ism into “lean forward” learning and interaction
For me, Kate’s demo speaks to the larger potential of social video in the classroom: turning a formerly passive activity (video watching) into an interactive and social experience. This can allow educators to speak the multimedia language that’s native to most learners, while at the same time making it a more engaging, “lean forward” experience than sitting in a darkened room watching some one-way film.
It’s way beyond the educational videos of our youth — transforming video into a canvas for making, learning and playing with moving images and light.
Making your own social video
And of course, the goal is to make it easy for learners to make these social videos themselves, not just consume the work of others. Kate used the more developer-focused and heavy lifting Popcorn.js to produce her Shakespeare demo. But the more user-friendly “Popcorn Maker” — which just shipped version 0.1 — aims to make it easy for non-developers, filmmakers and youth to make their own social video mash-ups as well, transforming reformed couch potatoes everywhere into web-made movie makers. “O brave new world, / That has such people in’t!“
Leave a Reply Cancel reply
Article source: http://openmatt.wordpress.com/2011/12/08/social-video-shakespeare/
Shakespeare goes social: Mozilla Popcorn in the classroom
What light through yonder Popcorn-powered window breaks?
What can “social video” do for learning?
The hyper-talented Kate Hudson (co-founder of openjournalism.ca, learning lab shepherd for the Knight-Mozilla project, and a designer on the Mozilla Festival data journalism handbook project) has made an outstanding “Popcorn Shakespeare” demo that highlights the potential of Mozilla Popcorn for learning and education.
I think we’re seeing the birth of a new genre of interactive film — “hyper-video,” “social video,” or pop-up video on steroids — that will revolutionize multimedia in the classroom, and maybe even the lingua franca of learning in general.
Using the web to blend moving images, interaction and context
“Popcorn Shakespeare’s” ingeniously simple user experience: watch video of a Shakespeare performance, then move your mouse away at any point to pause the playback and get help with specific terms or passages you don’t understand. (e.g., “What does ‘Hie thee hither‘ or ‘the golden round‘ mean?”) You can also dig deeper into context or notes from your instructor or peers.
But its more than a glossary tool. You can also navigate the video by clicking directly on portions of the the text (similar to Mark Boas’ work with hyperaudio). Specific terms and passages also get their own URL, so you can skip directly to specific scenes for further study — and begin to “quote” and link to video as easily as you quote text.
Kate Hudson at the Mozilla Festival in London last month
Delivering context and metadata only when you want it
In Tuesday’s weekly Mozilla Web Maker call (which are open to all — please join us), Kate explained that the demo was inspired by seeing other students struggle with the language in Shakespeare’s plays, and the difficulty of looking up every word in a glossary as it occurs in performance. What makes her demo so ingenious is the way she solves this problem with dead simple UX: mouse away and the video stops, mouse back and it seamlessly resumes.
That simple touch helps make the surrounding tools and context timely and relevant, avoiding the “everything but the kitchen sink” problem of many early Mozilla Popcorn demos. Instead of overwhelming viewers with too much information, Popcorn Shakespeare gives you metadata only when you want it.

Turning “lean back” couch potato-ism into “lean forward” learning and interaction
For me, Kate’s demo speaks to the larger potential of social video in the classroom: turning a formerly passive activity (video watching) into an interactive and social experience. This can allow educators to speak the multimedia language that’s native to most learners, while at the same time making it a more engaging, “lean forward” experience than sitting in a darkened room watching some one-way film.
It’s way beyond the educational videos of our youth — transforming video into a canvas for making, learning and playing with moving images and light.
Making your own social video
And of course, the goal is to make it easy for learners to make these social videos themselves, not just consume the work of others. Kate used the more developer-focused and heavy lifting Popcorn.js to produce her Shakespeare demo. But the more user-friendly “Popcorn Maker” — which just shipped version 0.1 — aims to make it easy for non-developers, filmmakers and youth to make their own social video mash-ups as well, transforming reformed couch potatoes everywhere into web-made movie makers. “O brave new world, / That has such people in’t!“
Leave a Reply Cancel reply
Article source: http://openmatt.wordpress.com/2011/12/08/social-video-shakespeare/
Matt Thompson
Shakespeare goes social: Mozilla Popcorn in the classroom

What light through yonder Popcorn-powered window breaks?
What can “social video” do for learning?
The hyper-talented Kate Hudson (co-founder of openjournalism.ca, learning lab shepherd for the Knight-Mozilla project, and a designer on the Mozilla Festival data journalism handbook project) has made an outstanding “Popcorn Shakespeare” demo that highlights the potential of Mozilla Popcorn for learning and education.
I think we’re seeing the birth of a new genre of interactive film — “hyper-video,” “social video,” or pop-up video on steroids — that will revolutionize multimedia in the classroom, and maybe even the lingua franca of learning in general.

Using the web to blend moving images, interaction and context
“Popcorn Shakespeare’s” ingeniously simple user experience: watch video of a Shakespeare performance, then move your mouse away at any point to pause the playback and get help with specific terms or passages you don’t understand. (e.g., “What does ‘Hie thee hither‘ or ‘the golden round‘ mean?”) You can also dig deeper into context or notes from your instructor or peers.
But its more than a glossary tool. You can also navigate the video by clicking directly on portions of the the text (similar to Mark Boas’ work with hyperaudio). Specific terms and passages also get their own URL, so you can skip directly to specific scenes for further study — and begin to “quote” and link to video as easily as you quote text.
Delivering context and metadata only when you want it
In Tuesday’s weekly Mozilla Web Maker call (which are open to all — please join us), Kate explained that the demo was inspired by seeing other students struggle with the language in Shakespeare’s plays, and the difficulty of looking up every word in a glossary as it occurs in performance. What makes her demo so ingenious is the way she solves this problem with dead simple UX: mouse away and the video stops, mouse back and it seamlessly resumes.
That simple touch helps make the surrounding tools and context timely and relevant, avoiding the “everything but the kitchen sink” problem of many early Mozilla Popcorn demos. Instead of overwhelming viewers with too much information, Popcorn Shakespeare gives you metadata only when you want it.

Turning “lean back” couch potato-ism into “lean forward” learning and interaction
For me, Kate’s demo speaks to the larger potential of social video in the classroom: turning a formerly passive activity (video watching) into an interactive and social experience. This can allow educators to speak the multimedia language that’s native to most learners, while at the same time making it a more engaging, “lean forward” experience than sitting in a darkened room watching some one-way film.
It’s way beyond the educational videos of our youth — transforming video into a canvas for making, learning and playing with moving images and light.
Making your own social video
And of course, the goal is to make it easy for learners to make these social videos themselves, not just consume the work of others. Kate used the more developer-focused and heavy lifting Popcorn.js to produce her Shakespeare demo. But the more user-friendly “Popcorn Maker” — which just shipped version 0.1 — aims to make it easy for non-developers, filmmakers and youth to make their own social video mash-ups as well, transforming reformed couch potatoes everywhere into web-made movie makers. “O brave new world, / That has such people in’t!“
December 06, 2011
Laura Hilliger
Failure = Lesson Learned
Today I was finishing up a one page summary called “10 Things that Make a Good Challenge”, a distilled version of Chloe Varelidi’s excellent post, and I read and reread these lines
“By tinkering learners feel safe. They’ll try new things and fail multiple times before mastering a skill,”
several times. I’m thinking about failure and how freaking wonderful it is.
- Last week someone said to me “It’s not if it fails, it’s how it fails.”
- Last month someone said to me, “I love that those of us working in the open are encouraged to fail.”
- Last year someone said to me, “Just accept it as a fail, collect your lessons, and move on.”
Everyone fails. I’ve failed extraordinarily in my life, and I’m really happy about it. At first, you find yourself failing, and it’s pretty painful. After awhile though, failure becomes a good friend. After awhile you find yourself failing and you think, “Oh awesome! I just learned X.”
That’s what failure is, isn’t it? Failure is a lesson in how not to do something. It’s a lack of success that teaches you what you need to be successful. It’s an omission of an expected result that inevitably leads to understanding of how to get the results you were looking for.
A pretty big part of the reason I consider myself a webmaker is because I have spent a considerable amount of time failing. I learned HTML and CSS trying to help a failing webzine not fail (they failed anyway), I learned a couple of content management systems the same way, and by extension, PHP (which I don’t claim to know persay, I just to understand enough to hack at it). I learned video and sound editing, more software programs than I can count, and US regulations surrounding non-profit organizations through failure. I’m currently getting my feet wet in the Django framework by failing at Unix. You should see my Terminal logs; they basically say “Good God you are failing here.” I fail at database tasks, server management, and a million other technical things. I’m not a programmer, see, I’m a failure.
The lessons I’ve learned from failing at things have made me a pretty big proponent for the process of failing. It doesn’t hurt much anymore. I still see myself failing and struggle not to, but in the end when the failure comes, I look at the body of work that brought me there. I see massive thought processes, chaotic digital skill aquirement, and tangible objects that other people can learn from, and I realize that it’s failure that taught me how to be successful in life.
December 02, 2011
Web Made Movies
Popcorn Maker 0.1
After my recent stint in Europe for the Mozilla Festival and MozCamp I had the opportunity to reflect on the development environment of Popcorn Maker, courtesy of the 8 hour flight from Berlin to New York. The result is a version of Popcorn Maker which can be proudly labeled as 0.1, and very friendly to developers.
History Lesson: Butter
Butter was an initial exploration of making a GUI for producers hoping to use popcorn.js for their projects. The app enjoyed some success, but it was eclipsed by the need to expand the app in different directions, which I have written about previously. Like most promising experiments, it needed to be rewritten to be the powerful app we hoped it would become.
Consequently, there was a lot of discussion about how to engineer the experience which was to become Popcorn Maker, which Brett and Ben detailed in their post, Designing the Popcorn Maker. In short, the current goal is to create a web app which encompasses the same ideas as Butter, but makes traditional content producers (usually of the film persuasion) comfortable by drawing memes from other popular pieces of software. However, a functioning web app is only a piece of the puzzle, since harnessing community involvement is a very powerful concept. Eventually, users will be able to use Popcorn Maker like they use WordPress – by downloading and installing the app on a machine of their choice – but with unique sharing capabilities and editing opportunities, like publishing your popcornizedtm template which might be a remix of something like a youtube video page.
Require Saves The Day
The subsequent struggle to design an acceptable user experience and its contention with pace of development and fluctuating feature requests hasn’t offered the opportunity for Popcorn Maker’s codebase to settle. As a result, Popcorn Maker’s developers have had to suffer through a poor debugging experience and a sub-optimal development environment.
Now, that has all changed. Some geniune thinking time and my recent exploits inside Paladin with James Burke, the creator of require.js, has changed Popcorn Maker for the better – for developer and users alike.
Using require.js, I was able to split up Butter’s core and constituent modules into several files respectively. require’s module system makes this process natural and provides a method for producing dependency chains. So, Butter’s core relies on the existence of several smaller modules like Media, Track, and TrackEvent, while Butter’s Timeline module depends on some of the same (plus some others). In other words, dependency chains let a module rely on other modules which may be already shared amongst others still. Of course, this is nothing new to traditional developers who get to use #import to solve a similar problem.
Now, developers are able to isolate and fix bugs without involving a compilation process every time they make a change (since Butter is best suited as a library inside of Popcorn Maker).
Onward: To 0.1
Since Popcorn Maker is an app that wraps Butter, developers can contribute from several perspectives:
- Popcorn Maker: developing the app itself (UI, storage, exporting, etc.)
- Templates: building general-purpose Butter templates to let users jump into editing a powerful popcorn experience quickly
- Editors: providing html-based editors for popcorn plugins which would benefit from specific UI (e.g. Google Maps)
- Butter: enhancing the core of Butter to fix bugs or provide better functionality or compatibility (standards like to change)
The beauty of the approach we’ve taken in 0.1 is that these elements are as decoupled as possible because they are actually separate require projects. Then, it’s no problem at all to have them share components, and they can depend on each other to provide a nice unidirectional development flow.
Part of the magic is a pattern which James has worked on that circumvents the data-main attribute traditionally attached to a require.js script tag. Instead, a script like this is referenced (in this case, butter.previewer.js):
(function () {
// Stub for has function.
function has() {
return true;
}
if ( has( 'source-config' ) ) {
// Get the location of the butter source.
// The last script tag should be the butter source
// tag since in dev, it will be a blocking script tag,
// so latest tag is the one for this script.
var scripts = document.getElementsByTagName( 'script' ),
path = scripts[scripts.length - 1].src;
path = path.split( '/' );
path.pop();
path = path.join( '/' ) + '/';
document.write( '<script src="' +
path +
'../../external/require/require.js"></' +
'script>' );
document.write('<script>' +
'(function(){' +
'var ctx = require.config({ ' +
'baseUrl: "' + path + '../",' +
'context: "butter.previewer",' +
'paths: {' +
// Paths are relative to baseUrl; Notice the commas!
'}' +
'});' +
'ctx(["previewer/previewer"])' +
'})()' +
'</script>');
}
var ButterTemplate = function() {
if ( !ButterTemplate.__waiting ) {
ButterTemplate.__waiting = [];
} //if
ButterTemplate.__waiting.push( arguments );
}; //ButterTemplate
if ( !window.ButterTemplate ) {
window.ButterTemplate = ButterTemplate;
} //if
}());
This pattern, which writes its own require.js-specific script tag when necessary (when not compiled), takes advantage of require contexts (returned from a call to require.config()), and is easily generalized. In fact, it’s used to load event editors, and butter itself. In other words, Butter (and Popcorn Maker, by extension) contains several require projects, each of which can be compiled to provide a minified version. Butter is actually a collection of libraries which can be included independently to provide functionality specific to things like Templates or Event Editors.
So, to create a simple Butter Template, all you need is this:
<html>
<head>
<script src="../../lib/popcorn/popcorn.js"></script>
<script src="../../lib/popcorn/popcorn.subtitle.js"></script>
<script src="../../butter/src/previewer/butter.previewer.js"></script>
<script>
/* Uncomment to provide custom functionality
ButterTemplate(function() {
// namespace has loaded; create your custom template here
});
*/
</script>
</head>
<body>
<div id="main" data-butter="media"></div>
<div id="subtitle-container" data-butter="target"></div>
</body>
</html>
Similarly, to create an Event Editor, you need this:
<html>
<head>
<script src="../../lib/popcorn/popcorn.js"></script>
<script src="../../lib/popcorn/popcorn.subtitle.js"></script>
<script src="../../butter/src/previewer/butter.previewer.js"></script>
<script>
/* Uncomment to provide custom functionality
ButterTemplate(function() {
// namespace has loaded; create your custom template here
});
*/
</script>
</head>
<body>
<div id="main" data-butter="media"></div>
<div id="subtitle-container" data-butter="target"></div>
</body>
</html>
Finally, Butter can be imported in the same way (in Popcorn Maker, for example):
<html>
<head>
<title>Popcorn Maker</title>
<script type="text/javascript" src="lib/require/require.js"></script>
<script type="text/javascript" src="butter/src/butter.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
</html>
Notice the extra require inclusion here, which is necessary only because Popcorn Maker is also a require.js project. This way butter.js does not depend on Popcorn Maker to include require.js, and every layer of the project can be nicely compiled.
To reiterate, the very best part is that there is no need to re-compile Butter if a change needs to be made. require.js will let us compile the project only when we want to distribute it.
Enjoy
So, have a look at the app at mozillapopcorn.org/maker(on Monday), or clone the source for yourself to see what you can do locally. As always, reporting bugs is paramount, and is worth almost as much as fixing them. Check out our 0.1 milestone on our lighthouse project, where you’ll almost certainly find a plethora of things to do.
Article source: http://robothaus.org/blog/blog/2011/11/24/popcornmaker-0-dot-1-for-the-developers/
November 30, 2011
Atul Varma
Achievement and Playfulness
Michelle Levesque is tearin’ it up with her rapid pace of blogging and it’s inspiring me to blog more myself.
Yesterday in her post Things I Have Done, she ruminated on different kinds of categories for achievement badges.
I personally have conflicted feelings about badges, and sympathize with something Jessica Klein mentioned in a blog post a few months ago:
My colleague Jack Martin and I participated in this local learning incubator where we told a story with twitter. It was a fantastic and fun day and we loved what we made just as much as we did making it. However, after the activity was over, a learning assessment team came over during our presentation of our story and gave us badges for our story. It somehow cheapened the experience that Jack and I had and sort of reminded me that, yeah this was about learning and grading–not the fun experience.
In Freakonomics, Steven Levitt and Stephen Dubner describe an Israeli day care center which decided to start imposing a fine on parents who arrived late to pick up their child. Rather than reducing the frequency of late pick-ups, however, the opposite occurred, because a moral incentive was replaced by a financial one. The fine made picking up a kid late suddenly seem perfectly acceptable (yet costly), rather than negligent.
This is my main concern with achievements of any kind: they have the ability to twist existing, healthy incentive structures–making stuff for friends is fun and earns you their gratitude–and replace them with less interesting ones–making stuff for friends earns you badges which will increase your earning power.
I’m not certain that badges would actually change things for the worse, of course; it’s just a concern of mine, and I think there are things we can do to help ensure that they add new incentives without taking anything away from existing ones.
One of the ways we can do this is by creating badges for things that don’t currently have any incentives.
Let me use an example from World of Warcraft. One day I was wandering around the desert when the sky turned red. I had no idea what was going on, but I kept walking; after several seconds, my screen was filled with flames and my character was dead.
This kind of thing happens often in massively multiplayer games: giant computer-controlled creatures wander the world and crush unsuspecting players who were in the wrong place at the wrong time. In this case, I had just been slain by Deathwing, the most powerful dragon in the game.
What’s really interesting, though, is that the instant I died, an achievement blazed across my screen: Stood In The Fire.
This achievement is significant to me because it turned an experience that’s normally frustrating into one that’s serendipitous, hilarious, and socially rewarding. It also communicated a few things behind the scenes:
- Bad stuff happens to everybody. It’s okay.
- You can gain recognition by doing some weird and unconventional things.
Achievements like these can infuse badges with a sense of playfulness that encourages experimentation, and make earning them feel like fun rather than like getting a report card or a Ship It award.
What might the analog be for Web literacy badges? How about achievements for things like…
- not closing an HTML tag?
- writing a CSS rule that never gets applied to a page because it’s overridden by other rules?
- falling for a harmless phishing scam?
- having your behavior tracked by the same company across 30 different websites?
- putting a security vulnerability in your code?
- making a web page that’s perfectly legible to blind people, but incoherent to those with vision?
November 29, 2011
Atul Varma
Playfulness and Learning
Michelle Levesque recently wrote a post about the importance of play in learning.
We need to change people’s mindsets to make them comfortable fooling around, making things, breaking things, and playing on the web.
I totally agree. This is one of the design goals of the Hackasaurus tools and events, actually—it’s a combination of stylistic touches and emotional design to help people feel that what they’re doing is fun, along with humane functionality that makes experimentation easier, such as infinite undoability.
This is something I feel that Apple has managed to do with their products, too: I see non-technical people like my father who are typically terrified of using their personal computer take joy in installing apps on their iPad and playing with them in a way that they never would have dared to do on their PC. Partly it’s due to concrete features, like the fact that it’s impossible for an app to impair the behavior of another app—but it’s also partly due to stylistic touches, like all the device’s glee-inspiring animations.
It’s ironic that tech-savvy folks like me berate the iPad for its lack of generativity and hackability, yet it manages to orient its users towards a sense of playfulness and empowerment in a way that other tools rarely have.
November 28, 2011
Matt Thompson
“Finding our people:” growing a global community of makers
In my very first job interview two years ago with Mozilla’s chief lizard wrangler, Mitchell Baker, she continually drove home the point that one of Mozilla’s core assets — almost as valuable as the Firefox brand itself — is a unique way of working.
It’s an open source approach to collaboration that aspires to be:
- An open meritocracy. Where the best ideas count more than your place in an org chart.
- Focused on building and doing. There’s a “let’s get stuff done” ethos that is refreshing for people coming from more bureaucratic backgrounds.
- Mission-focused. Doing good. Answering to people, instead of just a bottom line. Making the kind of technology you’d want to use yourself — instead of finding ways to put consumers in a headlock or make a quick buck.
“Finding our people”
Part of what I’m finding inspiring about my job these days is watching these values resonate with new people and communities.
Take this post from Jon Vidar, a 2011 Knight News Challenge winner and leader of The Tiziano Project. He described attending the Mozilla Festival earlier this month as “finding my people.”
[As a news technology innovator,] often I am met with glazed-over eyes, or questions of “How much it is going to cost” and “What are the returns?”
When I am able to get past this and connect with someone who truly understands innovation, I am often stone-walled at the point of implementation by bureaucratic red tape or contracting processes that are as out-of-date as the systems we are trying to replace.
At the Mozilla Festival in London, however, I found my people.
By its nature, the festival paired journalists, creatives and technologists so that, in real-time, as ideas were being conceived, they were also being prototyped.
Jon’s post reminded me of what Jade Davis said about the Mozilla Festival last year:
I’ve finally found the people who understand my work — and are doers, not just talkers.
Making stuff vs. talking about stuff
Mark Surman has been writing a lot lately about creating a generation of web makers with Mozilla.
Posts like Jon’s and Jade’s help give an added sense of why that proposition resonates with people, and of the social potential of like-minded makers and doers finding each other and recognizing themselves as a community.
There’s something about the social and economic moment we find ourselves in that makes this approach to collaboration and change strike a chord. I think it’s the combination of both idealism and focused pragmatism — “more hammer, less yammer” — that’s novel and appealing to people.
A growing number of us are disappointed by the lack of values, short-sighted thinking and inertia that have come to characterize too much of the working world. But we’re also exhausted by endlessly talking about ideas or solutions without clear outlets for getting much done as a result.

The social media overload Fail Whale
Social media and blah, blah, blah
Sometimes it feels like social media and tech actually compound this problem. Many of us now feel like we’re drowning in data and talk, especially email. Talk is cheap — and getting cheaper all the time.
The net result is a growing hunger for tools, events, community and practice that helps us build and make and get stuff done — instead of just more blah blah blah.
I think that’s part of what makes events like the Mozilla Festival and Moz Camps unique, and a big part of the growth potential for our community and non-profit brand.

Building a benevolent do-ocracy
Mozilla is certainly not perfect at it — and building a temporary event that embodies these values is a lot easier than building an entire organization or world that runs on those principles.
But it’s interesting to see newcomers feel like they’ve found “their kind of people.” Like an invisible tribe that’s recognizing itself.
And it also open up an intriguing theory of change for Mozilla and our partners: shaping the future by gathering together a generation of people who will design, prototype and build it together.
November 25, 2011
Alina Mierlus
What I learned and built at the Mozilla Festival in London…
I like those kind of events and situations – experimental, unusual and with mixed audience, flexible agenda and hackable spaces. Because they are inspiring, you meet new people, get new ideas and most important, makes me reach the “aha!” moment.

This year I was at the Festival as a participant, volunteer and ReMo – so I had the opportunity to help facilitate and participate in the same time which was fantastic. I had conversations about opening everything and learning and met inspiring people and projects such as Cash Music (a WebFwd fellows – non-profit, social enterprise helping musicians to create on the web).
When I arrived on the first day, I had the opportunity to meet and talk to various projects at Hive London Pop-up, a group of organizations from New York and London who are working at the intersection of learning, digital technology and media, offering after-school programs for youth. And if you are curious to see what the young web makers attending the Festival, learned from this experience, here is a blogpost and here, the work did by a 10 years old participant.
The next two days were a bit chaotic for me: I jumped in a Hackasaurus session, a fireside talk about the Web literate planet, then in a session on P2PU and badges and hanging around with other ReMos, facilitators and volunteers.
But, now I want to talk a bit about my “aha” moments at the Festival:
On the first day, I was part of the Hackasaurus Innovation challenge, where we worked on some ideas around curriculum and games to engage the youth into the art of web making.
Hacking Battle

This was a exploration on how to make a “website remixing” activity more engaging. The main concept is: After learners remix a website – they can submit their hack into the Hack battle where website visitors vote on the best hacked version of whatever website the learner started from (see interactive prototype here).
This already opens the way to more creativity and ideas around how we can engage the young webmakers, how to inspire to them the culture of collaboration, sharing, openness? I spent some time thinking and having conversations about those community spaces (both physical and online) that can become kind of playground and place for learning and creating (but more on this in a next blogpost…).
This is an ongoing work that needs experimentation. But the most important is that at Festival we got already the concept, a set of ideas, even a working prototype so we can start iterating on top of it in Barcelona.
“Messing Characters” (badges, stories and fueling intrinsic motivation in open communities)
I jumped in a session facilitated by folks at P2PU and Open Badges project. This was a like a challenge. I received a set of two cards, having written on them two words (in my case, messing and characters) which in this case where part of the “mechanics of a P2PU course).
So I gave the example of a course (the first one!) that I proposed months ago: Open Governance (how open communities as Mozilla, P2PU or others can get things done and govern themselves to become more effective). And yes, designing the course is as complex as the title suggests.
Having to imagine the “messing characters”, a mechanics for this course, was another “aha” moment. The concept is simple: imagine the various open source communities facing w/ different challenges, as growing, diversifying their reach, increasing participation, opening their way to working, collaborating, delegate responsibilities etc.
The characters are community members that sometimes feel like stuck inside of a box (no ideas, plans, answers). Messing characters can be a process of putting together people from different communities, with different skills and even creating situations that we are not feeling comfortable with. How does it work? I don’t know…it may be a series of challenges built inside the course, it may be a series of face to face or online events. There are plenty of possibilities.
Still, the most important bit was introducing the concept of badges in all this. Badges are the element that could make the mixing characters possible. It could be a good way to make visible a character’s story, skills, vision.
This is also an example of how a simple session at the Festival spurred the thinking, imagination and gave me (and others) the building blocks for what we are going to do next.
Learning and discovering new horizons…
Another thing that really keeps me excited about the things we are building at Mozilla is that it offers you the possibility to learn new things every day. As many other Mozillians, I have to say that I never thought that, for example, I’ll see myself in the journalism and media communities.
That was until I had the opportunity to meet, work and talk to people from the Mozilla News Innovation Community at MoJo Hackfest in Berlin.
And the Festival almost filled this imaginary gap. Journalists as well as educators are very important part of the our community and of the Web in general.
What was different from the first Festival in Barcelona? Was it better or not?
This is a question a received from various people during the last weeks.
Well, Barcelona Festival was awesome, was special, was different.
This year was better from the point of view of program and the sessions, which were much flexible, and thus easily inviting people to participate. On the other hand the ways you could participate were much more diversified: learning labs, innovation challenges, fireside conversation and hacking spaces. And I loved that the London Hive Pop-up (kids event) was open to the public for one day.
And this year we already have some building blocks and concrete things to play with: Hackasaurus, Popcorn, P2PU platform and open badges, which actually emerged from the Festival in Barcelona.
If I were to describe the difference from Barcelona, I can say that this year in London I saw a more mature, better organized (in terms of content and diversified participation) and much more focused. And that’s the way to go.
Oh, and the coffee, was probably the best I ever had at an event, not to mention the dedication and love the awesome baristas put on preparing it (IMO, that should be replicated in all Mozilla events
).
But in the end… I missed the party on the roof.

November 23, 2011
Matt Thompson
Building a generation of web makers in Africa
With the release of the Mozilla Hackasaurus “hacktivity kit,” hack jams are starting to pop up around the world — including the first-ever Hackasaurus event in Africa.
Held last week at the Nairobits Design School in Nairobi, the jam introduced youth and novice web makers to the basic building blocks of HTML, all by messing around with their favorite web pages. (Check out Cliff Argwings post on the event here.)
The goal: help youth see the web as something they can actively make and shape, and potentially open the door to deeper design and web developer skills.
Prototyping web maker jams for the world
The event was also a chance to test out some of the new Hackasaurus Hacktivity Kit, a how-to guide designed to make it easy for anyone to host their own design jam for novice web makers.
Our goal is to massively scale up these local design jams in 2012, by providing the tools and resources local communities need to self-organize and adapt the template to their interests and needs.
Messing around with the web
That’s what the Mozilla Kenya team did last week, kicking off with a brief intro to the Mozilla Mission before diving into Hackasaurus. Cliff writes:
Then came the moment of truth: we had to test if the kids grasped how the Hackasaurus X-ray Goggles worked — and also test their html and css skills.
The results are a great example of what we mean by web making, and the “a ha!” moment that can happen when people play around with Hackasaurus for the first time: a shift to seeing the web as something you can tinker with, and a potential gateway to deeper skills.
I really like what Joyce wrote in her hack:
I find it filled with fun… plus am also learning a new skill. I wish I could learn more and more of this!!! thanx for the skills!!!
Photos, sample hacks and more
- Lots of Nairobi jam photos on Flickr
- Etherpad with their hacks and remixes from the session
- Test out the Hacktivity Kit and host your own web maker jam
Laura Hilliger
How the Web was Won
It’s 2020, my flying car is charging outside, and I’m typing this post using my Arco Telekinetic Knowledge Transcription Helmet. After the decades of intellectual warfare that raged between Open Web Activists and the Champions of Capitalism, the OWA have been successful in the implementation of legislation proclaiming the Open Web as an officially protected public resource. Within the next two weeks all browsers will be required to conform to open standards, all web based software companies wishing to distribute in the Open Web will be required to make their code available to collaborative coding depositories, and all Open Web software will be required to have an open license for distribution.
Proprietary online software companies are spinning. The knowledge that they will have to open their code bases to the public at large has come as quite a shock, particularly because of the millions they’ve spent on lobbyists and backdoor deals to protect trade secrets, control bandwidth, and regulate content access. Should these companies choose to stay in the Historic Web, they will fall into obscurity as it has been shown that 98% of the public is active only in the Open Web.
In the last decade of the previous century, a creative digital culture was born. Self-proclaimed technophiles began creating and curating content on the World Wide Web. The community began sharing information and code. They began collectively developing innovative software and projects. And they quickly realized that the Open Web was in danger. A series of like-minded companies joined forces to inform the public of the value and importance of the World Wide Web as it was known at that time, free and open. However, those companies had a whale of a fight as more traditionally minded companies fought to keep trade secrets and influence mass consumerism.
The prehistory of the Open Web Movement has been taught in schools since 2013, after several well-known foundations formed a massive conglomerate to inspire change in educational policies worldwide. Since 2013 “The History of Technology”, “HTML/CSS/JS”, “Online Safety and Security”, and “New Media Skills” have been required topics for students aged 6 and up. Starting with basic digital literacy and moving into cyber-citizenship, the coursework for these topics is, as you know, constantly being improved and updated.
2013 was also the year that a monumental white paper detailing the possibility of building an Open Cloud using distributed peer to peer computing was submitted to the Mozilla Foundation. This paper insisted that limitless data storage and computing power could be harnessed through a distributed network. The implementation was as simple as creating a cloud runtime demon that users could run in the background to donate 1% or more of their PC computational power to the network.
Mozilla funded the research and project. In 2015 came the beta creation of this cloud runtime. Along with the beta of Open Cloud, Mozilla used it’s position in the global marketplace to create awareness for the project. In 2016 the Open Cloud entered the mature state that we are still using today. In late 2016 the Open Cloud Transfer Protocol (OCTP) became W3C standard.
The web makers reveled in the new existence of a free and open platform for creation. With the elimination of hosting fees, government controlled hosters, server size, and bandwidth restrictions, the people creating content on the web realigned their allegiances to the Open Cloud.
Governments recognized the value of the Open Cloud and began contributing to it with more powerful data centers. In 2017, all industrialized nations were contributing significant funding and resources to the proliferation of an Open Cloud. However, the proponents of the Controlled Clouds spent a vast majority of their profit margins arguing that a Controlled Cloud is safer than an Open Cloud. They argued that an Open Cloud would become a haven for terror and piracy. In the years between 2017 and today, an intense legal battle between the major proprietary tech companies and the Open Web Activists has been tying up courts around the world.
In 2019, the OWA won the first legal battle in Canada. The Canadian courts ruled that closed systems stemmed innovation and hurt the national economy. They ruled that the Historic Web would be permanently replaced by the Open Web and that the Open Web would be a protected public resource. Other countries began to follow suit. It is today, November 18, 2020 that the last monolithic economy, the United States of America, has signed the legislation into law.
Related articles
- OSBF: Opening Clouds (ponderingtechnology.wordpress.com)
- Open Cloud Computing Expert to Speak at Open World Forum (prweb.com)
November 22, 2011
Web Made Movies
“Social video” and the 21st century classroom
The future of educational video? Toronto’s Summit Heights Public School is experimenting with Popcorn.js in the classroom
Video is the lingua franca of our age. What if we could bring it into the classroom in exciting new ways? What if we made video social — collaborative, interactive, and linked to a wealth of deeper context and resources — instead of the traditional “TV in a box” experience? What if students could talk back to video, remixing and making it part of their own essays and art, instead of just passively consuming it?
That’s the possibility Mozilla’s new Popcorn video tool brings to the classroom. Popcorn allows users to turn boring old traditional video into dynamic “hyper-video” or “social video,” weaving in context and content from across the web. The educational opportunities for the tool are huge, from “video book reports” to dynamically exploring the solar system to turning every multimedia encounter into a chance to dig deeper, learn more and explore.
Mozilla’s new Butter app makes it easy for users to add web events to any video.
Testing Popcorn and Butter with kids
“Butter,” a new user-friendly web app in development, is designed to make Popcorn easy for non-technical audiences. But is it simple enough for 11 and 12-year-old students to use? That’s the experiment Kimberly Mercer’s Grade 6 class at Toronto’s Summit Heights school has been conducting this week, with a special visit from several members of the Butter development team.
Ms. Mercer’s class has been piloting the use of netbooks to facilitate 1-to-1 learning, and she’s been looking for challenging learning activities:
Students discuss videos for “Butter-ing” on their class wiki
Co-designed by kids, for kids
Not only are students using the software, they’re actively making it better. Part of the learning process involved filing bugs and making feature requests, collaborating with David Humphrey‘s team of Seneca College students, many of whom visited the classroom. The students’ feature requests are awesome, and underscore the huge value in this kind of co-designing and testing with learners. Sample feature requests include:
- A built-in dictionary feature. To help define new or difficult terms in a video.
- Soundtrack. “A soundtrack that plays music/ sounds of your choice. Muting the video may be optional.”
- Skipping / omitting portions of the timeline. “We would like to be able to delete parts of the initial video, because if there is some useless talk at the beginning with this feature, than you will be able to get rid of it.”
Helping kids define and create the web
Baked into all of this is a more fundamental lesson — seeing the web and video not as something to be passively consumed, like TV, but as “magic ink” that we can make, play with, and use as a canvas for our own learning and self-expression. Or as Ms. Mercer puts it:
“The essence of this project is to empower this group of 11 and 12 year-olds to be part of the process of defining and creating the web…. Though daily communication with the [Butter] development team, it is my hope that the students will learn that the web is not a finished product to be consumed, but that it is a living, breathing, evolving reflection of those who interact with it.”
More on this project — including student work samples and ways to replicate the project in your own classroom — coming soon.
§ 4 Responses to “Social video” and the 21st century classroom
Leave a Reply Cancel reply
Article source: http://openmatt.wordpress.com/2011/06/14/social-video-and-the-21st-century-classroom/







































































Awesome!
This is a superb application!! I wish I could have done a project like this when I was in school!
[...] Popcorn.js Template for Grade 6 Class Posted on June 16, 2011 by mbuttu Recently, we have been working on getting a version of Butter that will be useable for a grade six class to use for a school project. To learn more about what the grade six class is doing, read Matt Thompson’s great blog post, “Social video” and the 21st century classroom. [...]
More please, this information helped me consider a few more things, keep up the good work.
Oakley Limited Editions Sunglasses