Tagged: girls

Creating a Mozilla workshop for beginner Hacking of Mobile HTML5 Games

Participants in the Mozilla Hacking HTML5 Mobile Games workshop at the 2013 Dare 2B Digital conference.

Dare 2B Digital is an annual South Bay conference that brings 300 young women ages 12-16 together to encourage them to consider STEM fields in college by coming together for a full day of inspiring talks and workshops showcasing women’s work and relevance in technology.  For the past three conferences I have signed Mozilla up as a sponsor and created a workshop that is run 3 times that day and reaches about 80-100 attendees.  Last year I created kits for participants to learn about soft circuit hacking and lighting up felt foxes, the year before I taught Universal Subtitles and Popcorn before it was even a 1.0 product yet. I’m always trying to keep our workshops current and, if possible, on the bleeding edge of whatever Mozilla is working on. The participants get a taste of one exciting aspect of what is happening RIGHT NOW in open technology.

In the past year I’ve been really inspired by Mozilla’s outreach around web literacy and at the same time there’s been all this work done around our upcoming Firefox OS for mobile devices that will allow apps to be built entirely of the web and installed/sold/shared outside of the silo-structures such as Apple’s App Store and Google Play.  At MozCamp Asia in November of 2012 I watched the Mozilla Taiwan reps showcase a fairly simple card matching game they had made of browser icons and they turned it into a Firefox OS installable app in only a couple of hours.  All of these snippets and ideas led to my proposed workshop for the girls being about hacking their own version of the browser-pairs game and installing/playing it on a Firefox OS device.

Now this was all before the Firefox OS phones even existed, and it was also before I went away on a 3 week vacation to Vietnam over the holidays.  I mentioned it to my co-worker Margaret before leaving and she said she’d be up for working on it with me but when I returned from vacation I lost about a week just on jetlag & minor flu-like symptoms then another on my birthday and having my family in from out of town.  Next thing I knew it was February 1st, the workshop was on February 9th, and I had NOTHING ready and there was no public Firefox OS device yet, either.

So I called up Ruth who organizes the conference and tried to beg off this year.  Would it be so bad if Mozilla didn’t do a workshop this one time?  Thankfully Ruth very calmly returned my panicked email with a phone call and asked me what I needed to get this workshop on track.  What did I need? Mostly just to buck up and finish what I started, me with my big mouth. The pieces were all out there.  I had code (thank you Mozilla Taiwan!), Chris Heilmann had recently posted some inspiring slides about HTML5 and mobile for Firefox OS App Days, and Hackasaurus has plenty of youth-focused resources.

Hastily, I organized a couple of lunch time meetings during the week leading up to the workshop with Margaret and we hashed out who would do what.  We made an exciting discovery in our first meeting, which was that we could host the game from a github page and this meant every girl in the workshop could hack on her own customizations of the game in github’s web interface code editor and see their changes reflected on a mobile device immediately.  No need to deal with the minutia of web hosting, no server-side code, and minimal development setup – the freshly imaged laptops we borrowed from Mozilla IT would be good to go in minutes!

I drove to Redwood City on the day of the conference with: 20 laptops, 15 Firefox OS test driver devices (thanks to my co-workers who let me borrow their phones!), and some slides about why hacking HTML5 is the future of mobile apps. One thing we realized as we were setting up was that there would be some delay between when the participants created their GitHub accounts and when they would see their github pages live with our demo code.  We ended up front-loading that and having them start right away as they arrived at the top of each time slot then going into the presentation after they had forked the repo which had the gh-pages branch set to default.  We later learned (through Margaret’s chatting with GitHub support) that it was likely the delay could be caused by not having edited anything yet on the gh-pages branch so in later workshops we had the girls follow along with Margaret and change the <title> of their index.html and commit the change.

Getting paired up, creating GitHub accounts and FORKING!

The presentation portion was about 10-15 minutes and started out with asking the girls to shout out what comes to mind when I say the word “HACK”.  Answers included “death row” and things along the lines of breaking or sneaking into someone’s computer, mostly things associated with dark or criminal activities.  A few did mention things like ‘nerd’ or ‘creative’ too.  When I showed them my examples for the talk we had a brief discussion about not asking for permission, being curious, creative, and taking ownership. After that we talked about Apple/iPhone and Google/Android.  Most of the girls had one or the other we explored how non-interchangeable they are, how much it might cost to be a developer for one or the other, the need to play by someone else’s rules in order to get your ideas out there.  My favourite part of this talk is repeating over and over how using open web technologies and the web itself is all about NOT ASKING PERMISSION.  You put your stuff up, tell people where it is, and they can go use it.  It can (and should) be that easy.

After the talking was done the young women had about 45 minutes to hack on their github sandboxes and test out making customizations to their matching game. We modeled it after Mozilla’s Thimble project which uses comments in the code to explain various areas of the code and gives ideas on what to change. Our take was to suggest they try (in increasing levels of difficulty):

  1. changing the background color/images (of the page, game box, card backs)
  2. changing the images on the cards when flipped
  3. change the music (few got to this part in the allotted time)

We saved 15 minutes at the end to do demos of what people did to their code and to come up and tell us what they did to achieve their end results.  Some of the customizations led to a newly themed game like pigs, magic, twilight, book covers, and other things the designers liked. A few girls went further and took snapshots of themselves on the laptop camera and used their own action shots in the match game, one girl had her own laptop and drawing tablet so she drew her own card faces and intro screen background, and another girl removed the card backs to make it look like the game box was all black – when I started to click during her demo and cards flipped I was surprised since I had thought the game was broken but she laughed and said it was on purpose.  It’s hilarious to me that she made a simple match game into a much harder challenge by hiding the discover-ability of the game.

LOTS of hacking going on here. Margaret and Larissa help out with question.

All in all the three workshops went smoothly, everyone got to do some hacking and see their results during the time we had allotted, and all the girls left with a new github account and code they can keep hacking and learning on over time.  During the course of the workshop we went around helping and answering questions and taught them about commit history, rolling back changes, and also using “Inspect Element” to figure out where to look in the code to make changes.  I should mention that at the beginning of every workshop I asked “Who here has touched HTML/CSS before?” and there were never more than half the hands in the room raised.  This comes up every year in the workshops I run. Some girls are getting this knowledge from parents, friends, self-teaching, and now things like CoderDojo (as one participant bragged) but there’s no indication that any of them are learning this in school where they spend a majority of their time. The thought that some girls are being left behind on this is sad to me, and I want to do all I can to help change that. Every single one of these young women left our workshop with a new spark in their eyes having now had first-hand experience with the power of creating web apps that can run on ANY WEB-ENABLED DEVICE. It was powerful to see.

So many new hackers of open source, mobile games.

So, what’s next?  I think this workshop should become another Webmaker and/or Hackasaurus project that can be taught anywhere, to anyone who wants to have a first-time experience with mobile app development.  We’re 80% of the way there, I’d say what’s left to do is:

* Code clean up (especially CSS) so that everything in the repo is clearly marked for its purpose and with comments on how to mess around with it. Specifically comments in the Javascript and exploration of that code – we didn’t touch this at all in our 1:15 hr workshops.

* Spend a bit more time, if you have it on basic HTML/CSS editing, using Inspect Element, and having cheat sheets printed up for participants.

* Have options for what to do next – getting off of github pages and hosting your own app, possibly with some server-side code.

It won’t take much to turn this into something more generic and useful for introducing people to the power of Firefox OS and HTML5 app creation and I look forward to continuing to develop this sort of material whenever I can. Thanks to the Desktop Support staff who prepped laptops for the conference, SF co-workers who lent their phones, and most of all to my coworkers who lent their time and their expertise: Margaret, Larissa, and Amy*.  Without all of you this would not have gone smoothly and because of you it was the best day of 2013 so far.

 

* At lunch we had a little Q&A with the 30 or so girls from the first workshop. They got to ask all of us questions about what we do and how we got there.  The four of us had such different paths & connections to technology. I love that we got to show these young women a variety of ways to engage with tech and to be in open source.

Dare 2B Digital 2012 – Wrap up post

Fox with firefox logo

Better late than never, I will recount Mozilla’s participation in the 2012 Dare 2B Digital conference back in February down in San Jose.  This year we were hosted at the eBay campus and instead of being out in a hallway demoing and playing with open video and universal subtitles (2011) this year Mozilla was all about making, in a large space shared with Microsoft, encouraging the girls to work with a variety of hardware, circuitry, robotics, and creating 3D printer designs for a MakerBot.

Before I go into the details of the kits and the day of the event, there are some very important people to thank:

Tremendous amounts of props must be first given to Emily Lovell whose soft circuits teaching guide I discovered at the 2011 Grace Hopper Celebration of Women in Computing.  Her exercises, diagrams, and lists of resources were at the core the kit I designed to teach the girls about parallel circuits through assembling a felt fox and attaching LEDs to the eyes that are powered by conductive thread and a watch battery.  Thank you to Mozilla for sponsoring the Dare 2B Digital conference again this year, it is such an important space for us to be in as it gives us a chance to promote open source to a young audience that is still undecided about college majors and it’s our chance to encourage them to at least consider a technical career path. I hope that having an early, positive, creative experience with Mozilla and open source technologies provides the girls with an awareness of alternative ways of engaging with technology. Mozilla Reps provided the budget for these kits to be made – not only for the workshop attendees, but also enough kits to put one in every take-home bag for all conference participants.  It is certainly my hope that many girls who couldn’t make it to the workshop due to lack of space will still attempt to make their foxes at home with a parent or sibling.  Finally, I cannot thank enough the various Mozilla employees and other friends who helped me assemble 350 kits for the actual event – my vision for this event could NOT have been done without their generous donations of time and their assistance on the day of the event helping the girls complete their kits. Thank you especially to day-of volunteers: Kate, Vicky, Alex, Christina, the Super Awesome Sylvia and her parents James and Christina,  and the add-hoc assembling factory workers: Mariko, Heather, William, and the entire UX team at Mozilla.  My girlfriend Jenny also helped me assemble some of the first kits at home while I cut all the felt sheets into smaller sizes for the foxes. My most sincere gratitude to you all, it went off without a hitch…except for the handful of batteries that exploded…but that was my fault :)

Now for some detail about what was involved in this project in case you want to replicate or improve on it.

A lot of felt foxes

The idea was pretty simple. The kit would be a takeout food box that contained everything needed to make a parallel circuit on a felt fox.  I ended up designing the felt fox myself after attempting to make something work with Lisa Higuchi who does amazing work but as I found myself running out of time I just created a simple pattern that could be held together with felt glue and then sewn/wired up in about an hour – which was the length of the workshop.  The soft circuit guide had the information needed for ordering supplies so in the end the kit’s component list looked like this:

  • 100 9×12 sheets of copper brown felt (400 fox faces)
  • 100 9×12 sheets of white felt (400 fox eye areas)
  • 30 9×12 sheets of black felt (450 nose/eye/inner ears)
  • 10 spools of conductive thread from Adafruit
  • 400 3v batteries
  • 400 battery holders
  • 800 yellow LEDs
  • 400 red takeout boxes
  • 5 bottles of felt glue
  • 400 small ziploc bags
  • 400 needles
  • 1200 pins (intended for holding the felt pieces together for sewing, they ended up being superfluous because of the glue)
  • 400 manual/pattern sheets

 

Shot of the pattern and instructionsThe felt firefox kit contents

I literally threw together a manual and a pattern at the 11th hour, as the UX team was coming to help me assemble the kits one night after work.  The manual leaves out a lot of the detail as to HOW to make the felt fox. Fortunately it includes a picture of a completed fox, so hopefully a resourceful teen at home can determine how to make her fox kit work. I have definitely learned from this experience to make creating the instructional materials a much higher priority next time.  The pattern was done in haste with a sharpie, me tracing around the parts of my prototype fox, I’m actually pretty OK with how that part turned out. When we assembled the kits we put all the small components into a ziploc bag and put said bag, one square each of white/brown/black felt, and a folded up instruction sheet into each takeout box.  The takeout box was a really robust container for kits and yet kept things light. I had no trouble carrying the 350 kits, in various bags and boxes, to my car to take down to SJ on the day of the conference.

The kits are in the bag stuffing lineEarly in the morning on Saturday February 12th, 2012 I drove the 350 kits down to the eBay campus and kept ~70 kits in our Maker room, leaving the rest with the D2BD volunteers who were stuffing bags with swag for the girls: Make magazines, usb bracelet, stickers, notebooks, a water bottle, and (among other things) a Mozilla felt fox circuits kit.  Then back in our room I had two of the Mozilla volunteers for the day make their own foxes so they’d be ready to help the girls when the first round arrived a few hours in.  Kate and Christina did a wonderful job of creating their first parallel circuits and spent the rest of the day being professional felt fox makers :)

Helpers make their foxes

As with last year, I found that out of the three workshops we did that day the first was a bit rough, the second quite smooth and the third was a cakewalk.  We can learn so much in one day about how to improve the process and the set up.  The first thing learned was that we had a bottleneck situation on scissors and glue.  5 bottles seemed like a lot to me but when split between two tables with at least 10 girls at each that was no longer the case.  I had brought in all my scissors from home, which turned out to be a lot (6) for a home, but not enough for the workshop.  We did scare up a few more pairs and optimized for workshop two by keeping the pre-cut paper pattern pieces for the next group of girls to minimize scissor time needed.  Another surprise: some girls did not know how to sew.   This was something I hadn’t thought of ahead of time since I learned to sew at a pretty young age.  This fact leads me thinking that because of time constraints, 1.25 hrs per workshop, using ‘squishy’ circuits might have been a stronger learning experience here.  The sewing is probably more appropriate for a half-day workshop or even full day if possible.

Customization of the fox pattern

Customizations happened.  I loved that girls immediately took to hacking the fox pattern as designed by me; adding bows, crowns, and eyelashes to their foxes.  It made me glad I hadn’t found time to pre-cut the fox parts.  The back of the fox head is easy to draw a circuit path on and see/experience polarity – using sharpies on felt was a great way of going over the concept of a circuit, right on the material about to be used.  I am really happy with the overall teaching experience here.  Several girls showed incredible tenacity in the face of adversity.  One young woman in particular, having a very hard time with the sewing, went out and got her lunch and then brought it back to the table to continue her work – she re-did the sewing and managed to get it working.  The whole time she was silent and focused and I really wish I had pointed out to her that her attitude was the most impressive, hire-able skill I can think of.  I’m sure she’s going to do well in whatever field of study she pursues.  One young woman cracked me up when she became frustrated with threading her needle, exclaiming “This is why women revolted!”.

In conclusion – the event was a tremendous success – both the conference as a whole and the Mozilla workshop flourished this year. The conference does a great job of pulling feedback from participants, as they must hand in a form to get their swag bag at the end of the day.  We see in the feedback that we did a wonderful job of getting the young women excited about and considering career paths in technology. In the summary from the feedback forms “87% thought the robotics workshop (Mozilla/Microsoft) was great or good”. Also 100% of respondents would recommend this conference to a friend or another parent.

I really look forward to dreaming up something next year to top this.  I have no fixed idea yet because part of the fun of doing this conference/workshop is waiting and seeing what exciting new open technology would be a good fit at the time. I’m definitely going to keep the issues from this year in mind when formulating a plan for next year, and pay attention to minimizing participant wait times in order to increase overall satisfaction with the project.  When I initially came up with this idea, I was worried that it didn’t have a strong tie to Mozilla’s mission, but as I continued to develop and finally executing it I felt more and more like the way we work on projects like this is such a product of how we work on keeping things open on the web.  It was thanks to the web that I found the guide which helped me with planning, it was thanks to the spirit of the open web that people I work with (and some with whom I don’t) came out and volunteered to help make this happen. Getting your hands on a building block of technology, modifying it to make it your own, sharing the results – that too is the open web, and it’s what the day provided for all the young women in our workshops. I look forward to seeing what the future holds with these potential hackers in it.

Group shot with completed foxes

Lukas helping with fox making