Oppi Festival


On April 11 & 12 Webmaker and Open Badges had teachers cutting, gluing, and sharing at the first annual Oppi Festival in Helsinki, Finland. Since “oppi” means “learning” in Finnish, this was the perfect place to have exciting conversations about celebrating learning; we challenged participants who came to our Mozilla Space to share what “open learning” means to them.

Open Learning wall

Over two days, we held 2 discussion sessions and 4 hands-on workshops about everything from Mozilla’s mission to web literacy’s learning pathways and the new Badge Kit (still in private beta). When we first arrived, we were excited at the prospect of building teaching kitOppi Festivals and sharing them with the Webmaker community. In reality, we were a bit too ambitious; the 50-minute sessions didn’t allow for thorough introductions to Thimble and designing teaching kits. Even so, we had rewarding conversations about the intersection of privacy and collaboration, and spoke with young people about how to best surface these ideas in the classroom. And by preparing an etherpad of links used throughout the unconference, everyone had access to all the resources as we went along; hopefully they’ll continue to use them beyond the Festival.

With exhibitors like Rovio’s Angry Birds Playground, speakers like Dr. Sugata Mitra of “Hole in the Wall” fame , and performances by talented artists like Finland’s deaf rapper Signmark, it’s no wonder the 1300 participants were buzzing with conversation and ideas as they came coming through the Oppi doors. We look forward to hearing from the organizers of the Oppi Festival during this week’s Teach the Web call on Thursday.

More photos from the Oppi Festival here.

Webmaker Training with Friends


reposted from Laura Hilliger’s blog at zythepsary.com

This weekend, I’ll be leading a Webmaker Training for the National Citizens Service (NCS). NCS is an organization in the UK that provides learning opportunities for young people living in England and Northern Ireland – young people who are encouraged to lead positive change within their communities. For the first time ever, NCS has invited graduates from their programs to become Digital Champions, a group of people who will lead social action projects and spread web literacy skills in their local communities.

This is the Teaching Kit we’ll be using to guide us during the event. Let me tell you why I’m SO EXCITED to be doing this:

This is the first official “Webmaker Training”

I run trainings all the time, but they’re always one-offs, offshoots, and truncated versions of my dream learning scenario. In 2013 we ran two prototypes – a live training for Mozilla Reps called Training Days and an online training called Teach the Web, both were hugely successful. My dream learning scenario combines these two initiatives. I think a blended-learning program that is open, inclusive, and pedagogically sound – something that helps people teach the culture, mechanics, and citizenship of the Web – is what a Mozilla professional development program should be. Why? Because open. Continue reading …

Changes to Thimble URLs: goodbye naming conflicts, hello bit.ly


Creating web pages in Thimble? You may notice some changes to your Thimble links.

What’s different?

Your Thimble URLs now have an extra bit in the middle: a unique identifier made up of random letters. So for example, in the past your URL might have looked like this:

Why did we do this?

To prevent naming conflicts. Previously, the lack of any project identifier meant you could only ever create one page with a specific title.

Say, for example, you needed two pages with the title “my projects” or “test.” Or maybe you made a page called “School project” a year ago, and now you want to make a new one with that same title. Before, you couldn’t do that, because the URLs would have confllicted. Now you can.

We’ve basically taken the same strategy we were already using for Popcorn and applied it to Thimble. And following the same convention as sites like Twitter, Medium and You Tube.

Coming soon: shorter, shinier links with bit.ly

We know these URLs are longer, and maybe a little harder to share. That’s why we’re working on bit.ly URL shortening next, so that you can publish your page and get a super short URL for sharing.

The new short URLs will use “mzl.la,” and look like http://mzl.la/shortcode — so that everyone can see your URL is special, and spread some Mozilla pride. :)

We’re also working on fixing up Thimble sharing for Twitter. If you have underscores or spaces in your Webmaker account name, you may have noticed problems when you try to Tweet about your makes. This problem has to do with how Twitter parses URLs. Luckily, this issue will disappear once we get bit.ly integrated, so we should have a fix coming for you soon!

Questions or comments?

Planning Super Mentor Badges to encourage contribution within the Webmaker community


This year Webmaker is using the Open Badges Infrastructure (OBI) – and the newly-minted BadgeKit – to issue Webmaker badges. The first of these will be a Super Mentor badge.

(note that the badge won’t look like the image to the left!)

The aim with Super Mentor badges is to empower and equip those people teaching the web within the Mozilla community. Super Mentors will work with paid contributors (aka staff) to badge Mentors, who in turn will be able to issue Web Literacy badges.

A recent community consultation suggested that Super Mentors should be required to provide evidence of the skills and expertise listed on this Mozilla wiki page.

We have taken these skills and created the following metadata which would be included a Super Mentor badge. Please note that this is subject to review and only a first pass.

Badge Name

Super Mentor badge


This badge is issued by Mozilla to ‘Super Mentors’ within the Mozilla community.

Super Mentors are very active community leaders. They are very knowledgeable and experienced in web literacy, how people learn and have strategies to teach skills to others.


The earner of this badge:

  • has a solid understanding of several competencies featured on the Web Literacy Map (https://webmaker.org/literacy)
  • uses Webmaker tools extensively
  • is familiar with other web literacy and digital making methods and tools
  • has a solid understanding of key learning methods and concepts
  • remixes, or creates teaching kits to help teach learners
  • teaches Mentors how to teach web literacy
  • organizes Webmaker events and helps others organize as well
  • contributes to the strategy and core offerings of Webmaker through testing and working in the open
  • recruits, coaches, and organizes Mentors in their community




(link to Webmaker portfolio)

Date Issued



#supermentor, #mentor, #contribution, #mozilla, #community, #webliteracy, #learning, #education

We’d love your feedback on this, so please do leave a comment below or in the Webmaker Google+ community.

The scrum never stops: building a better workbench for Webmaker


As we head into Q2, let’s build a better “workbench” and online scrum board for Webmaker.

TLDR version:

  • Check out the freshly udpated Webmaker Wiki. It’s one-stop shopping for key roadmaps, planning documents, tickets, and scrums. And will help provide more transparency and co-ordination across teams going forward.
  • It clearly lays out Webmaker’s key components. And how they all fit together. From teaching kits and training to localization, badges, and Maker Party. These will provide the main tracks for our scrum board as we go forward.
  • Shifting to real time production, instead of static documentation. The new wiki is a production document. The main goal is to provide a clear view of *what we’re building now.* Week by week, quarter by quarter. Instead of a static repository for documentation that quickly goes out of date.
  • Project scrum boards. To that end, each individual project page will lead with a virtual scrum board at the top of the page. We’ll embed Bugzilla tickets to do this, and use Bugzilla components and whiteboard tags to do it in a smart, automated way. (If you don’t use Bugzilla, just include links to wherever you’re tracking the work.) Continue reading …

Thimble Recognized as a “Gamechanger” and Wins 2014 ON for Learning Award


We are thrilled to share that Thimble, our code editor for beginners, has been recognized by Common Sense Media as one of the best educational tools online with the 2014 ON for Learning Award. The awards celebrate the year’s best in digital media products designed to educate and engage young people, and have become the most comprehensive tool that parents and teachers rely on for understanding the true educational value of digital media resources.

Screen Shot 2014-03-20 at 5.37.01 PMThe award is being announced at a ceremony in San Francisco tonight, featuring 50 other educational apps, games and websites signaled out as game changers.

Thimble also received a 5-star rating from Common Sense Media for its educational value — the highest possible rating available from the organization. A few highlights:

  • Engagement – Kids experience the delight of learning to write their own webpages with side-by-side windows that instantly show the effects of their coding tweaks.
  • Learning Approach – Authentic coding practice comes alive through fun, community-generated projects. Whether they learn through guided remixing or start a project from scratch, kids can find the right entry point into web design.
  • Support – Immediate feedback, baked-in help, and a supportive community all help kids persevere and publish their webpages.

Screen Shot 2014-03-20 at 5.38.15 PM

It’s Webmaker’s goal to help people understand the mechanics, culture and citizenship of the web. We created Thimble, along with X-Ray Goggles and Popcorn Maker, to provide free, open source tools that help educators, technologists, makers, and anyone move from consuming to creating the web, in a way that enables creativity and encourages empowerment.

We’re honored to receive this award from Common Sense Media, and really want to thank our Webmaker community for making Thimble what it is today, and continuously working to help make it better. Whether you playtested the earliest version created by Jess Klein and Atul Varma (remember the Love Bomb?), or watched as Kate Hudson, Scott Downe, Michiel”Pomax” Kamermans, Jon Buckley, Chris DeCairos, Thomas Park and others continued to improve it day by day, you know Thimble has come a long way. And if you provided feedback on an open community call, filed or closed bugs, created or remixed content for others to use and learn and share… we’re celebrating this award with and for you!

Screen Shot 2014-03-20 at 5.45.14 PMHow to get involved:

Week of win: looking back at Mozilla’s contribution to Open Education Week


Last week was Open Education Week. As part of it, I helped moderate an online discussion on behalf of Mozilla about Open Education and the Open Web.

We provided a new prompt every day in our Webmaker Google+ community and asked for responses via comments, blog posts, or using Mozilla’s Webmaker tools.

You can find the prompts below:

Day 1: http://goo.gl/2cNlCC
Day 2: http://goo.gl/MzpY5D
Day 3: http://goo.gl/yKsXX6
Day 4: http://goo.gl/jTEw8Y
Day 5: http://goo.gl/mgSIse

There were some great contributions, but I’d like to highlight the following in particular:

The Webmaker Google+ community is now over 3,000-strong and a great place to get involved in Mozilla’s role in promoting open, innovation and opportunity on the web.

In addition, if you have any curriculum that teaches web literacy, we’d love you to share it. We want to use the power of Open Education and the Open Web to make the world more web literate.

Will you join us?

Webmaker: An Open Educational Ecosystem (OEE)


Often it’s difficult to get contributions to open projects because some people aren’t quite sure what contribution means or how to go about doing it. Other folks don’t know what “open” means, and thus they don’t know they can contribute at all. Perhaps it’s the nomenclature of “open” that confuses people. Perhaps it’s just an “open” marketing problem.

I want to help people teach the web in an open and participatory way, sharing their processes and ideas online. I was thinking about what a kind of technical training program for the web would look like, and to me, it looked like an open community.

Photo by Doug Belshaw

Our community–a globally diverse group of passionate educators and technologists–believe in the web as a platform for learning, sharing, connecting and making, and they believe that open practice and participation are key elements to becoming a citizen in the digital world. They are eager to spread web literacy in their local contexts, but participating in the global movement means that one needs to navigate through a complex and sometimes confusing ecosystem of digital-human communication.

We’re planning and designing a new training program to give people an easy in to the types of online communication and participation I’m talking about. We want people to experiment and fail forward. We’d like online components to support offline actions and vice versa. We want the experience to be centered around making and connecting around what you make. This is also the reason that we are trying to encourage a peer-to-peer aspect of learning.

Continue reading …

Teach the Web Community Call Recap, March 13, 2014


In our last Teach The Web call, we heard from community members who are empowering others to become web creators in New York City, Pittsburgh and India, and also celebrated the 25th birthday of the world wide web!

First, Jaimie Li from NYC Generation Tech joined us to talk about their first student hackathon, where high school students were challenged to develop digital prototypes that address local challenges like increasing student engagement in school, promoting healthy lifestyle habits, and connecting youth with employment opportunities. GenTech offered Webmaker training to the participants who had no prior coding or web development skills, which in turn enabled them to learn new HTML and CSS skills, and also to create and remix webpages to promote their teams’ digital prototypes. You can read more about their event and see all of the student projects including the winners.

Image from Huffington Post

We were excited to learn that this all came about after Jaimie had come across the TASCasaurus curriculum, which was created by Mozilla’s Hive NYC Learning Network and The After School Corporation. It was developed by Julia Vallera and geared towards educators in after school programs at middle schools to increase student’s digital literacy and interest in STEM (science, technology, engineering, and mathematics), and uses X-Ray Goggles to teach youth about remix as well as the basics of HTML and CSS. Jaimie found this open education resource helpful in planning the GenTech hackathon and she said the X-Ray Goggles were a huge hit! They plan to continue using Webmaker tools at upcoming events, and if you’re interested in volunteering and mentoring NYC students, please get in touch with Jaimie directly.

Continue reading …

Webmaker Experiments with Brackets


One of the research projects underway in Webmaker is an effort to leverage Adobe’s open source web editor, Brackets, within our tools. We’ve written previously about this in the context of Thimble (codenamed Nimble), and similar work is being explored by Simon Wex within AppMaker.

Brackets is currently a web app you install as a desktop app.  It doesn’t work fully (yet) in web browsers; however, the Brackets’ community has been slowly picking away at this.  Recently things have gotten to a much better place. For our Webmaker uses, “works in modern browsers” is a must.

One of the hardest problems has been how to replace the native filesystem Brackets uses. A few of us have been tackling this problem head-on with Filer. Filer re-creates the node.js fs module, and makes it possible to have persistent filesystems for web apps in modern browsers.

The Filer code has matured in the past few months to the point where doing a full demo of Brackets in a Browser is now possible. Using Brackets+Filer we’ve successfully been able to explore in-browser editing of Webmaker projects.

We still have more work to do, but we’re happy to be able to demo some of the work. For this demo we’ve created a version of Brackets that runs via web server (gh-pages with no special server for the filesystem), and allows for live editing of the same source code being run.  You can try it yourself here:

http://humphd.github.io/brackets/src/ (source is here)

Here’s a screencast of the demo in action:

In this screencast we’re doing a number of things:

  1. Demonstrating Brackets loading statically in Firefox, with no remote filesystem.  Just HTML, CSS, and JS in a browser.
  2. Modifying RequireJS–the module loading system used by Brackets (and most of Webmaker)–in order to load-and-cache all JavaScript into a browser filesystem using Filer. On Chrome/Firefox that uses IndexedDB behind the scenes, and WebSQL in Safari. In essence, we’ve created a way to install a web app by loading it once. We have larger plans for this technique within Filer.
  3. Having Brackets open the folder of JavaScript modules that were cached in step 1
  4. Opening multiple versions of the app at once in different browser windows, and syncing changes across the shared filesystem. We do this using node’s Watch API in Filer.
  5. Live editing Brackets in Brackets (meta enough for ya?) and then testing those changes with a Refresh.  The second, third, etc. loads come from the shared filesystem vs. the server.

And it works well!  Here it is running in Firefox, Chrome, and Safari:
Brackets in Browsers

And the inevitable “does it work on mobile?” proof:

UPDATE: with another fix it works in IE10+ :)

Brackets in IE10

This is very much a tech demo to show what’s possible vs. a product we’re shipping.  However we’re excited by the possibilities it showcases.  We hope to have more updates to share in subsequent posts.  If you want to talk to us about the work, stop by the #filer channel on irc.mozilla.org.


If you edit the source, and break your editor, you can force the files to re-download into your fs (overwriting your changes) by adding ?refreshCache=1 to your url:


If you want to completely delete the files from the filesystem, use ?deleteCache=1


No attempt to optimize load times, files, etc was done due to the nature of this demo (i.e., we want to be able to edit the exploded source).  Making Brackets load fast(er) is another task.

We haven’t modified the Brackets Extension loader to use the shared filesystem yet, so not all the extensions will work. Unifying Brackets’ notion of the filesystem (so data and app are in the same fs) is something we’re considering.

We’ve been working on adding File Open/Save As… dialogs in Brackets, but this demo doesn’t have that work yet.

If you’re running in Safari, and get prompted to allow the page to use storage, it may mean you timeout the requirejs loading.  Hit refresh to get it going again.