Building the Next Generation of Web-Craftsmen

This post is written by Jess Klein, and is cross-posted on her blog.

I was reading this article this morning in the NY Times by Louis Uchitelle about the American workforce and how we are losing our value of craftsmanship, and it got me thinking about the word “craft.”

Photo by Michael Falco of the NYTimes

We are at a stage where we are building up the contents of our “toolbox” at Mozilla, figuring out ways to sharpen those tools. We have Popcorn, X-Ray Goggles and Thimble- as well as learning projects that can accompany those tools within the context of the tool or in the form of a D.I.Y. recipe.  I am wondering, however, in the long run- how are we going to turn web-hobbyists into web-craftsmen (women, girls and boys)?  We are designing badge systems and trajectories, for our learning content at Mozilla,  which will reveal to our users pathways for further exploration, but in project based learning, I wonder what that extra secret ingredient is that will empower someone to go above and beyond and refine their work to the point that it is a craft.

Implicit in the word craft is some understanding of design, whether that be design of the system, the tool or the concept. In fact, the American Craft Museum (my former employer) has now changed their name to the Museum of Arts & Design. To some degree, the name change was because the term “craft” has lost its relevance in our society- people think of old women crochetting doilies when they hear craft. However, more and more I hear people reclaiming the word and using it as a brand advantage- something that was made by hand. The Renegade Craft Fair,  encourage local artisans to connect with eachother and show (and sell) their wares. Two key takeaways that I have from being a participant in their events is 1) a emphasis on hand- made design and 2) a celebration of community. I believe, these might be the two ingredients required for craftsmenship.

Do not call Atul Varma a codemonkey!



Design is a concept that extends far beyond “coding” when we talk about it in the context of webmaking. When someone creates a webpage, for example, a lot more goes into it than just implementing it- there is the concepting phase- where you brainstorm and make decisions on what and why of your page, the asset creation stage and finally the implementation stage.  It’s the big picture.  The developers who I work with at Mozilla understand this. In fact, Atul, my thought partner at Mozilla, and co-developer of Hackasaurus hates it when people refer to him as a “code monkey” (someone who only inputs code)- and while I would only ever say that expression in jest,  the reason he gets so offended is that he is a craftsman. He researches, he tinkers, he looks for a community and ultimately, shares his work within that community. In short, he designs, develops and contributes to a community.

Learn about how much character (get it?) is inside your browser!



In the article, the author mentions how people know how to use their computers but they don’t know how to build them- which got me starting to think about what the appropriate analogy is for the work that we do- because yes I could force teens to take apart their computers – but I think that doesn’t resonate in the same way that it did for us in the 80s/90s. I think that the canvas for today is not the computer, but the browser- and I feel that deconstructing that browser will help learners understand what is possible- and why it is important to refine your craft to the point that your work is not just digestible data, but beautiful content that is accessible. Atul and I started to dabble with this idea using the Navigator badge concept- but I would love to push that further, and not think about the assessment, but the lessons here.

Hive NYC has developed a community of practice amongst professionals and learners



The community piece is a bit tricky because there are so many ways for us to engage communities. One way, is to build communities of practice with professionals and youth at like minded organizations- which is what we are doing with Hive NYC at Mozilla.  Another way would be to meet youth where they already are, which is kind of the beauty of modular concepts like Open Badges- because it wouldn’t matter what circle a learner is based in, because they would be able to show their skill through an understood social currency that is backed up by a portfolio of work. Then again, there are other ways, like imagine mixing the making piece within the context of a community of online practice- like hacking facebook to be the best facebook within facebook- with your facebook peers (oh yeah, that sounded like Inception!)

I often say that the web is a handcrafted community and medium- one that was created by individual people who work to make it reflect of our own local interests. If we are to elevate the level of innovation and representation within the web, we need to develop a community of web- craftsmen. That means providing tangible learning tools and projects, trajectories that implicitly incorporate design thinking and integrating with communities of practice.

Hacking the Holidays: Peer-to-Peer Jam at Mouse

Written by Jess Klein, Hackasaurus Design + Learning Lead

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

Written by Jess Klein, Hackasaurus Design + Learning Lead

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 five 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.

What is Hackasaurus by Omar and Youssef

Why It Is Important to Code by Zainab and Jose

 

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.