All posts tagged mozparty

#Mozparty: Summer Code Party Themes

It’s been a blast seeing all the hacks and photos from Summer Code Parties across the globe. There are a few more weeks to go, and we’re curious what what else people will come up with.

Party Themes

One idea we tossed around was hosting themed parties. For example:

  • On the Beach
  • Sports Night
  • Superheroes and Villains

Or even something like: Call Me Maybe remixes.

Whatever you do, it’s all about spending time during the summer, with whatever activities you’re already doing, and trying a bit of playful webmaking. All it takes: some friends, a laptop and a kitchen table.

There are lots of fun projects to choose from, including Save the Bunny. Now Beach Party Bunny. d(^_^)b

Poplab! Introduction to Popcorn Maker

This week, Laura Hilliger and I held an Introduction to Popcorn Maker workshop at Supermarkt, the lovely community space in Berlin, Wedding.

Based on the participants’ feedback, they really enjoyed it and learned a lot. If you’re so inspired, please feel free to build on this agenda, host your own intro to Popcorn Maker, and tell us how it went!

Here are our agenda notes:

Learning Objectives

By the end of the four-hour workshop, participants will be able to:

  • Augment video on the web
  • Remix web content
  • Understand basic information architecture & procedural storytelling
  • Be familiar with Story Vision Tech (SVT)
  • Plan a simple web native story


Go around — (5min)

  • Name
  • What are you working on?
  • What do you want to get out of this?

Spectogram — (15min)

  • Interaction adds value to a story.
  • A story always has a beginning, middle, and end.
  • A film made for and with the web can win an Oscar.

X-Ray Goggles — (30min)

Discussion: Intro to the Open Web — (20min)

  • Hackability
  • View Source
  • Standardization

Thimble Projects — (30min)

Break — (15min)

  • Grab a coffee.
  • We did a version of Hack the Robot Dance here to get people’s energy back up.

Intro to Popcorn and Web Native Film — (10min)

  • Show demos
  • Explain dynamic data
  • Web standards
  • Hackable and remixable
  • Visual interface vs .js library
  • Not replacement for video editing software
  • More resources

Popcorn Maker Project I: Robots (procedural storytelling) — (30min)

Popcorn Maker Project II: Remixing using the Popup template — (15min)

Next: Give participants two options: in smaller groups, either learn about planning a web native story, or continue hacking on template projects.

Path 1: Planning a web native story — (30min)

  • Paper prototype a web native story using Story Vision Tech (SVT).
  • Sketch storylines and wireframe as much as possible.

Path 2: Continue hacking on templates — (30min)

Feedback & Share What You Made — (10min)

Speed Geeking! August 26 with Hive Berlin

** Update:** A lot of key people have requested to reschedule the speed-geeking because of holiday travels. Since we want to pull this off with the right people in the room, packed and buzzing, we’ve decided to host the event on August 26. All the other info remains the same.

Speed Dating for Geeks! Get to know about 5+ topics in under an hour.

We’re hosting a speed geeking session on July 22 with Hive Berlin at Supermarkt in Berlin, Wedding from 1300 – 1500h.

This is a rapid-fire format aims to:

  • Showcase learning opportunities in the city
  • Get to know fellow educators and hackers
  • Play with new tools and concepts

And as a station host, you’ll get to share your project with a larger audience, gather feedback, and get really good at speaking quickly and clearly.

What is Speed Geeking?

The setup will be 5 or more tables in a circle in the room.

  • Each table will have a station host, who will present their project using flip charts, a few slides, screen grabs, whatever — in five minutes or less.
  • We’re thinking: get an Arduino to blink, remix a website, record a sound, edit a web video, hack a toy. Something fun, hands-on and educational.
  • Participants rotate among the speed geek stations in small groups. Every five minutes, you’ll hear about another topic. This provides a way to learn about a broad range of projects very quickly.
  • And the end of a full rotation, we’ll turn the floor over to open hacking. You can go back to your favorite station(s) and dig in more.
  • Afterward, we’ll regroup, share what we made, and talk about how it went.

Why should I come?

It’ll be a fun Sunday affair where you can learn something, meet new people, and share what you’re passionate about.

We plan to iterate on event formats like these and build towards a learning network in Berlin. Whether you’re interested in the bigger Hive network plans or not, you are very welcome to come play, make and hack with us.

How do I get involved?

  • Would you like to attend? It’s free! For kids and grown-ups alike.
  • Would you like to host a station? 3 hour time commitment max!
  • Have an idea for something else? Email michelle – at- mozillafoundation – dot – org

See you on July 22! #hiveberlin

Images by Jon Lim with Hive Toronto

Things We’re Learning From #Mozparty

Last weekend was the kickoff of Mozilla’s Summer Code Party (#mozparty).

In a summer-long campaign, there’s over 400 scheduled events in nearly as many cities, hosted by passionate people who want to share their knowledge of the web and learn together with friends.

I’d like to surface some lessons I’m already taking away from the campaign.

For more context about the Summer Code Party, check out the great posts by my colleagues at the end of the post.

Host Trainings

It can be a big ask to put on a party, even if it’s mostly about getting together informally around your kitchen tables.

For the campaign to go well, event hosts should feel confident and prepared for their event.

Right before the kickoff weekend, we offered online “host trainings” at various timezones, focusing on realtime support for our three main event types.

While not as many people showed up as hoped, the organizers who came were very engaged and asked great questions. You could tell they thought a lot about their event already.

Next time I think we should offer more frequent, less structured office hours for hosts. They can drop into a channel within certain times and get immediate help. That might reduce scheduling friction while maximizing access to support.

Visual Hashtags

Scrolling through the lovely pictures that came in over the weekend, there’s a powerful uniting element: a visual hashtag.

As much as possible, we tried to provide hosts with stickers and materials they could print out at their event. In aggregate, when you see all these pictures from events spanning the globe, that visual hashtag — a green circle — ties it all together and makes it feel like pieces of a larger whole.

Next year I think we can go even heavier into the visual hashtag. Perhaps even see more online applications, too, such as banners, avatars, Thimble projects, etc. that incorporate it. Plus encourage hosts, like Mozilla Philippines did above, to take a picture of the group holding up the tag.

Hacked Gallery

One of the best hacks I saw this weekend came from Soki Briggs, a Mozilla Rep in Nigeria.

The new Thimble app doesn’t yet have a gallery. We were asking people to take screenshots and upload their hacks to third-party galleries like Flickr.

Briggs hacked that and made a new Thimble project that WAS a gallery of links, showing what everyone made at his event. Beautiful idea.

Overly Engineered Support

This whole campaign won’t have been possible without a lot of people. A special thanks goes to the support team (Benjamin Simon, Rebeccah Mullen, Matt Thompson as well as Erin Knight) for preparing an impressive volunteer manual and support infrastructure.

During the kickoff weekend, it was all hands on deck. The whole Mozilla Foundation staff was on IRC, Twitter, Facebook (yuck, I know), Flickr, Tumblr, you name it. We were monitoring incoming content, but especially watching for people using the tag #mozhelp, our signal for troubleshooting.

We had long planned to use a forked version of Army of Awesome, an amazing support tool used by the Firefox team. Sadly, that feature was cut due to time constraints.

Lo and behold, Brian Brennan whipped up his own version of Army of Awesome overnight. Bless.

All in all, I think live support went smashingly, due to the over-engineering. Huge thanks to everyone manning the channels and for all the hosts who ran things so smoothly.

Have Fun

It was definitely a lot of work by the whole organization and loads of talented contributors to kick off the summer. In the midst of all the planning docs and coordination calls, it’s easy to lose track of the fact: it’s about having fun, about hosting a party.

The best events are about being with people you enjoy, making and learning together. Now we can really do that — all summer long.

Fade out to adorable pictures.

More about the Summer Code Party

London Learning Jam

How would you teach something about the web using a game?

This was the design brief we gave a talented group of educators, designers, and developers last week at the Mozilla London Learning Jam.

Our thesis is:

  • Use game-like mechanics to encourage learning and making
  • Hack on real code, not rely on training-wheels
  • Meet learners at their interests with tools that help them express themselves


We built a framework to make it easy to create new games. It’s a two-pane editor called Thimble.

One side has code and short comments to explain what to do. The other side has the rendered website, which updates after every change you make to the code, so you can see how the snippets connect.

We used the Thimble framework to hack on new games and playtest them with adults and kids.

New Games

During the first two days of the learning jam, we broke into groups to design the learning games. Some groups came with a brief in mind, others found their way using paper prototyping and talking through what they’d like to make.

I was thoroughly impressed by the creativity and thoughtfulness of the new games:

  • The Animal Builder by the London Zoo. Mix and match animal body parts to create hybrid animals. Learn HTML & CSS.
  • Wickedpedia by Steve Bunce (Open University) and Oliver Quinlan (Plymouth University). Edit celebrity Wikipedia pages. Learn hyperlinking, generating content.
  • Supporter 2 Reporter by Radio Waves. Create your own blog to report on sports such as Olympics. Learn blogging, layout, curation, branding.
  • Get off my Lawn by The Guardian and Goldsmiths. Clear the zombies away from your garden lawn. Learn CSS positioning.
  • Bunnies by Ben O’Steen. Save the bunny from danger by putting it in a safer environment – or worse! Learn HTML Basics, images, CSS positioning.
  • Cube by Laurian Gridinoc. Create a 3D Cube. Learn CSS and trigonometry.
  • Readability by Doug Belshaw. Make the text on your webpage legible. Learn HTML and typography.

What makes a good learning game?

We playtested the new games twice: once with a group of educators, policy-makers, funders and activists and the next day at CoderDojo London with about 15 kids.

Check out what the kids made!

The feedback from both rounds was incredibly helpful. My biggest take-aways were:

  • The comments in the code can be instrumental in making an effective learning experience. The Zombie game did a fantastic job both setting up the code to apply your learning and to prompt you using simple comments.
  • Give a clear mission. Some of the games had brilliant premises, but did not communicate upfront what their purpose was. When you start a game, you should know immediately what the goal is and what you’re expected to do.
  • Prompt creativity, but plan some backups. In games like Make Your Own Meme, participants said they felt pressure to be creative and didn’t know what to write. If we had more defaults or recommended images pre-loaded and commented-out, you could easily toggle in new content without much hassle.
  • Show what others have made. A key feature rolling out next for Thimble is a gallery. I think this will go a long way in encouraging users and showing what’s possible with the tool.
  • Work in pairs. Another tested thesis of ours is the power of working together. I found during the playtesting that teams hacking on the same games benefited greatly. They began to teach each other things and be inspired by one another.

What next?

We’re rolling in this feedback into the next release of Thimble. In future versions, it’ll also be easier to create new games and to share hacks.

The learning & making kicks into high gear this summer, starting June 23 with the Summer Code Party. We invite you to get together with family & friends and teach other the web using these games & whatever you like. You can also think about a hack jam to build even more games.

And there will certainly be a component of these tools & games at this year’s Mozilla Festival. We’re bringing some of the best people and projects to London to showcase what they’ve done over the summer — so dive in, and also give us feedback about what we can improve, what you’d like to see, etc.


We had a lot of fun, and this event won’t been possible without a number of great people.

Firstly, a huge thanks to NESTA in particular Amy Solder and Mark Griffiths for supporting the event and paving the way with key organizing.

A shoutout to all the hack jam and playtesting participants. Congrats to Alaistar Davies, Mark Riches, Laurian Gridinoc, William Duyck, Allan Callaghan, Doug Belshaw, Ian Usher, Oliver Quinlan, Ben O’Steen, and Steve Bunce for making cool new games.

Thanks to CoderDojo London, especially Andy Kent, for letting us play together.

Thanks to Jess Klein, Chloe Varelidi, Erin Knight, Laura Hilliger and Andrew Hayward for their hard work on the learning missions, Thimble, and leadership at the jam.

Lovebomb to Allen Gunn for facilitating, to John Bevan for inviting such great people, to Ravensbourne for hosting us, Paul Clarke for the photos, and to Mark Surman for the vision of how we can all learn and make on the web together.

Images by: Paul Clarke and Oliver Quinlan