Hacking the Holidays- Peer to Peer Jam at Mouse

Yesterday the Hive Mozilla Youth Ambassadors ran their first event as facilitators. The hack jam was held at the Mouse headquarters and we had a nice mix of youth, adult "squad leaders" and adult program coordinators from the Mouse staff.

The youth facilitators came a few hours early to prepare for the event and do a walk through of the event plan. There was a lot of set up work to do, including: making a screen for the projector (see below), putting out the chairs, making sure the X- Ray goggles bookmarklet was installed on all the computers, and checking that the laptops were fully charged. This was a bit tedious, but we referred to the "IT Checklist" included in the Hacktivity Kit for pointers.

Before the event started, we paired off and role played "worst case scenarios" and facilitated them. We had a lot of fun pretending to not know how to navigate webpages!

Finally, event participants arrived and we kicked things off with a welcome and the "Hack Dance Battle" icebreaker. Zainab acted as emcee for the youth jam and thanked everyone for coming. Youseff then promptly asked everyone to get our of their seats and to get their groove on with some hackable dancing. (Neil dj-ed and we played a LOT of the Combination Pizza Hut and Taco Bell song) Omar lead the group discussion about what we mean when we say hack.

We then showed the two videos that the youth created on the topics of "What is Hackasaurus" and "Why You Should Learn to Code." Check out the REMIXED video that Omar and Youssef made here.

Jose gave a great demo on how to use the goggles, pointing out the importance of looking for opening and closing tags when editing html. The first hacking challenge that everyone participated in was hacking the google site. The youth facilitators broke up the participants into groups and tag teamed on the facilitation. Then, the youth did a shareout:

It was really great to see the youth teaching the adults how to code:

The final challenge of the day- "the moment you have all been waiting for," as Omar announced- was "holiday-ifying" any website of your choosing.  After an hour of break outs, hacking, and full on merriment, we had a group shareout. Participants messaged the text the mob site that we put up for the event, with their new websites:

Here is one of the hacks:

After the event was over, and we cleaned up the space, we held a team meeting for the youth facilitators. We debriefed the event, and discussed what went well- the icebreaker, the videos, the holiday challenge- and what we would do differently- time of the event, and dedicating more time to the practice mini challenge. Finally, I gave the youth who completed all the workshops, including this peer facilitation event- their cerification:

Overall- I would say that the event and the Hive MoYo Ambassador trainings were a success. I will follow up on our next steps in iterating this process in another blog post- but I leave you with a team photo. Special shout outs go to Marc Lesser and Meredith Summs of Mouse for hosting and being involved in all of the workshops:

Hack Jams for Youth, by Youth

The Hive Mozilla Youth Ambassador training theme of the day today was facilitation- aka Hack Jam 101. Although the thought of running an event can be daunting- our team of Mouse youth were up for the challenge. Today was the third session in our training series. It was another session of work that I have not tried out before- but I consider this a prototype for  a more formalized opportunity for youth.

The first thing that we did today- was discuss the upcoming hack jams that the MoYo Ambassadors will help facilitate. First, on Monday they will be running a hack jam for their peers at Mouse- and then later in the year they will be helping TASC with several after school programs.

We started the training by reviewing the 5 steps to running a hack jam for youth, which is part of the recently launched Hacktivity Kit.

The 5 steps guide readers from preparation to facilitation of an event for youth using the Hackasaurus tools.  The team of youth were quick to note that a hack jam- is like a music jam session- where participants could riff off of eachother's work!

We then reviewed the logistics for the event on Monday.
We looked at the event space and came up with several solutions for creating a maker space where participants can work in the "open".

 We also brainstormed and came up with a theme for our event- called "Hacking the Holidays." Our team quickly noted that we covered a lot of things in our two workshops, so we decided to simplify our hack jam by only covering hacking (not getting into webmaking). We came up with a list of learning objectives for the 2 hour event:

The group then set to work. The first order of business was coming up with a good ice breaker to communicate what we mean when we say "hack".  I made them play a game that Chloe Varelidi and I modded for the Media, Freedom and the Web festival.  Each participant got 3 cards- a Goal, Mechanic and Concept card. The goal and concept cards were filled out in advance but the youth came up with the concept for the final activity.

They came up with pretty creative solution including a tweet game- where users had to Hack a Tweet and a game where participants were presented with a problem in a photograph and had to edit the photo to in order to save the day. Ultimately- they decided to go with a dance battle game.

We then took some time to come up with an event plan for the jam. We came up with an agenda, and assigned roles:

We then paired  off an practiced talking to each other about the project. I then challenged the to make videos of their pitches on the topic of What is Hackasaurus and Why is it Important to Code.
(You can check out the fantastic video on Why It is Important to Code here.)

What is Hackasaurus by Omar and Youssef

Finally, we walked through everyone's roles for Monday and talked about what to do when troubleshooting. It was a great day and I know we all are looking forward to their first event on Monday.

Transitioning from Hacking to Webmaking

Today was the second HIVE Mozilla Youth Ambassador training at Mouse. Today was focused on making that pivotal move from hacking bits and pieces of the web with the X-Ray Goggles to designing webpages with HTML and style. This was the first time that I have ever lead a followup workshop to the initial "hack jam" type workshops where participants learned about the open web, what we mean by "hacking" and an intro to the Hackasaurus tools. For me this workshop is very important because it moves from the "a ha" moment that many users have when using the googles to look under the hood of a webpage, to the "roll up the sleeves" and get to work phase. Or, as Mimi Ito might say- from messing around to geeking out.


We started out by stretching our content creation muscles with the Superhero Design Challenge. Participants were asked to look back at the "I think X makes the web special" and the "I think that X makes the web difficult to use" brainstorms that we did in session 1. They chose one aspect of the web to defend or compete against if they were a Superhero of the Open Web. They then used this as the basis for creating  a short web- ready biography for their fictional superhero of the open web. We discussed what makes a good bio as well as what makes for good writing on the web.

The youth presented their stories:

"Captain  Super wall-  he has the power to throw fire balls at villains how try to cross the wall. A long time ago in a far school named cyber squad. were super wall a student was elected to go visit one of the most advanced technology in the hold city, but something when wrong in it’s visit. he touched  one of the controllers and he  when into  cyber world. it took him to  firewall city. where his mission is to let good information go in and burn bad things. "- by Jose

Then, they paired up and created an arch nemesis for their partner's superhero. Here is Captain Super Wall's arch nemesis, Title Wave:

"Title Wave sends title waves of info that is not needed does that because he thinks all info is good and also thinks that all info should have equal rights " - by Youssef

Now that they had bios, they were ready for some publicity! They went into online news organization sites and remixed the pages to include stories of their characters saving the day, or ruining the day as it were.   The youth had a great time taking photos with Photobooth on their computers and doing post production and image manipulation in Aviary:

They remixed the html and style with the X- Ray Goggles and presented their projects and talked a bit about how they trouble shooted problems with the coding.

We then discussed the various components that make up a webpage, including:  HTML, CSS, graphic assets and text content and reviewed that the combination of an opening tag and its corresponding closing tag and the content in between is called an element. 


The final challenge for this workshop was to make an instructional "how to" webpage from a template- without the goggles. In order to do this, we all came up with things that we we experts at- we had a peanut butter and jelly maker, a hand turkey illustrator, a good music connoisseur!  I gave everyone a crash course in web DESIGN. We talked about the importance in identifying a user and designed information architecture as well as wireframes for all of the sites.

Participants used a prototype that Atul Varma and I worked on as a spin off of the Hackbook that Anna Debenham created to help users craft webpages from templates.

In the end, everyone made the "how to" pages and we all critiqued the structure, style and design of each presenters work.

 How to Sleep


Overall the workshop was a  success - we user tested old and new tools as well as curriculum and workshop participants came a way with 2 webpages that they made in a stretch of 4 hours!

Next Up:  How to Run a Hack Jam on Friday.

Hacking your World: HIVE MoYo Ambassadors

Yesterday I lead the first of a series of 4 hour intensive learning labs at Mouse. This series of workshops will train youth to become what I am calling Mozilla Youth Ambassadors (it's a working title). That means that youth will learn Hackasaurus, HTML, CSS and facilitation in order to run hacking events and/or clubs. You can follow our group blog here.

The overall structure of the workshops will be:

Session 1: Intro to hacking, “open web” and intro to X-Ray Goggles

Session 2: Deeper dive into HTML and CSS – design challenge

Session 3: How to run a hack jam

Session 4: Practice jam with peers

Yesterday the teens came in and we started out by mind mapping. This gave us a chance to make sure that we were all on the same page when we talked about hacking, tinkering and coding.The teens paired off and responded to a challenge to define hacking in a tweet. Here are their final definitions:


We decided to test their definitions. The next challenge was to hack a board game. Our two teams chose to hack tic tac toe (which became Finger Tac) and monopoly (which became Hackopoly). The teams wrote new rules and then playtested each others games.

Throughout the course of the activity, we talked about our process and what options we had in terms of hacking the games.


After a break we talked a bit about what makes the web unique. As a group we came up with a list of things that make the webs special and things that make the web difficult to use:
We then talked about how the web was designed to be participatory and collaborative. We looked at a slide show that I created as part of the Hacktivity kit. It was nice to user test that- it worked really well. I think I am going to change some of the slides about installation because they are outdated since we changed the interface for the tools.

After a brief intro to the X-Ray Goggles, the teens hacked Google, and then I challenged them to hack a website of their choosing. The goal was to make as many changes as possible to hide the identity of the original site.

The teens hacked facebook, Tumblr, the NYC MTA page, Twitter, Apple and even the Mouse page!Our next workshop is tomorrow. We will be learning HTML and CSS and moving from hacking to webmaking!