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.

Daughter wins with Geek Dad who hacks video game gender pronouns

[x-posted from Geek Feminism]

Michael Chabon, in “Manhood for Amateurs”, writes an essay telling the story of being at the supermarket with his child, feeling quite run-down and barely hanging on, with his toddler in tow on a Sunday morning so as to give his wife a chance to sleep in. As he’s in line to pay, a woman in line with him says something along the lines of “You’re a good dad, I can tell just by looking”. At that moment he has this epiphany that to be a ‘good dad’ in our society one must merely not be in the process of killing a child in public whereas a women can rarely achieve the status of ‘good mother’ in the public’s ever-shaming eye. If they ever do briefly get told that, it is all too quick to fade with the barrage of societal and internalized messaging women get telling them they are never good enough.

Michael Chabon’s take was this:

“The handy thing about being a father is that the historic standard is so pitifully low.”

As someone who did not have a dad, I have nothing in my upbringing about what it’s like to be a young female with a grown male caring for you, teaching you, or taking an interest in your life’s outcome. Chabon does sum up for me the conclusions I came to, quite young, about these creatures called ‘fathers’. Growing up with my lesbian, feminist mother my understanding of the odds was that netting a ‘good dad’ seemed so low and I was convinced I was lucky for not having to participate in that particular life lottery.

To folks who did have ‘good dads’, this story might seem familiar to you, but to many it may come as quite a pleasant surprise. Someone I am proud to consider a friend had their blog post picked up by ArsTechnica today and, yes, the title of this article is very unfortunate but the amplification of what Mike Hoye did for his daughter is such a ‘good dad’ moment that I hope there will be ripples of this for months as well as more hacking of games to do even just that simple binary flip that helps a young girl see something more like herself as the hero of the stories the games people play are centered around. Imagine for a moment if we could take this kind of hacking to children’s television and movies. Those are immutable objects for now, but video games? Well, Mike has proven that a bit of hacking can go a long way.

Because I am fortunate enough to know Mike through my time at Seneca College where he was a regular mentor to our zealous open source program, I asked him if I could interview him for a Geek Feminism post and he said yes so we hopped into an etherpad and had a talk.

LB: Hi Mike!

First let’s be clear, you didn’t give a fictional character who exists only as pixels in a video game a ‘sex change’ but you certainly upset the dominant males-as-heroes pattern in video games by simply flipping the gendered forms of address in the text of the game where the Hero does in fact have quite a gender-neutral appearance. Does it feel radical to you to do this kind of hack?

MH: It certainly felt… transgressive. I’m an inveterate gamer and Legend Of Zelda fan, and the Zelda series revolves around some pretty well-used tropes. You know you’re going to be the hero, that there’s going to be the Master Sword, a bow, the boomerang, the hookshot… Changing something, especially something as basic as the nature of the characters, feels like it should be a pretty big deal.

But at the same time, it seems like I’m just solving a problem that’s stubbornly refused to solve itself. That option should always have been there.

LB: You gloss over a bit in your post, will you put up more details (maybe another blog post) of step-by-step instructions to help people who have less technical depth than you try to do this at home with their kids? Alternately, is there a way to package up what you did and distribute it without getting yourself put in jail (or heavily fined)?

MH: The way I packaged it up – by making it clear that you’ll have to find the original material on your own, but here is the tool you’ll need to apply the following changes – is the best I could come up with. As for the step-by-step instructions… I found the game’s disk image, opened it up in a hex editor – I used http://ridiculousfish.com/hexfiend/ for that, because it works really well with extremely large files – but once you’ve done that, you just need to make a copy of the disk image, and work on that one; just page around the file until you find the dialog, and then start editing it. The important thing, at least as far as the approach I took, was that you need to be extremely careful to use phrases that are exactly, letter-for-letter the same length as the phrases you’re replacing and make sure you can see the difference between a space (one kind of whitespace) and a linebreak, that look the same in the text but have different numerical values.

It helped me to use a very basic text editor with a fixed-with font, so that I could copy the phrases I was replacing out and work on them for a while without committing anything back until I was reasonably happy with them.

LB: I wonder if you handed this hack back to the game developers/publishers, would they be receptive to putting out the alternate version, considering how simple the hack really is?

MH: It’s unlikely that my approach is well-suited for that – I’m not building in an option that a player would be able to toggle. You either change the whole game or nothing.

LB: That’s a good point. Advocating for more options in the game defaults seems like a great tactic here over asking for entirely different releases of games.

Any plans for other games that you play with your daughter where you might want to make this similar adaptation?

MH: I don’t know – it depends on what she’d like to play next. We haven’t started The Ocarina Of Time yet, so that’s a candidate. But so much of this depends on whatever holds Maya’s interests that it’s impossible for me to say.

LB: It will be interesting when she grows up and talks to others about playing the game, perhaps slipping in a female pronoun. The looks of confusion from other players will hopefully make her laugh and perhaps feel bad for them that their dads didn’t take these matters into their own hands. My mom did a similar thing for me with pronouns in Dr. Seuss stories on characters that were too gender-stereotyped with no bad side effects so far, to my knowledge.

MH: God, I can only hope.

LB: Obviously you’re an accomplished hacker, what is your approach to hacking with your child(ren) in terms of meeting kids where their skills are at?

MH: I don’t have fully-formed thoughts about this yet. I’d like to start by asking Maya what she’d like to create – not necessarily out of code, but starting with carpentry or paint, and then helping her work stuff through. The only overarching principle I want her to understand is that she can, if she puts her mind to it, make and change things.

LB: Have you had to deal with any sentiments from your daughter that suggest she might get messages telling her that computers are ‘for boys’ or that doing anything hacky or tech-related isn’t ‘for girls’?

MH: Yeah, that shit is pervasive. It’s not so much computers – there aren’t a lot of those in school yet – but “boys do this”, “girls do that”, that starts awfully early.

I quiz her on it, when it comes up – Why do you think that? And the answer is always, always that one of the other kids, usually boys, in her class told her. It’s… disheartening, but you push back when you can.

LB: That’s interesting that your anecdotal evidence is that the boys seem to be doing more of the gender policing. In my experience it was more the girls who seemed invested in protecting ladydom.

MH: My sample may not be representative (interviewer acknowledges that hers wasn’t either) (also, it’s certainly possible that I’m not getting a reliable story from Maya, who has in the last two weeks claimed to be a girl, a boy, a crab, a moose and, earlier, a pentagon. So she may not be the most reliable narrator.

LB: Starting kindergarten can be a time when the gender binary really hits home for kids and the positive messages a kid gets at home start to become overwritten by the massive mainstream’s – are you having to up the ante in un-learning?

MH: She is in preschool, not quite kindergarden yet – and I don’t really have a clear sense of how things get addressed there – I suspect well, but I don’t know. Having said that, I think the old lead-by-example tropes are important. Mom and Dad treat each other with respect, even when we disagree, and insist that Maya does so as well. When she uses some other kid’s misbehavior as a justification for her own, we don’t accept that as an excuse, and occasionally admit our own mistakes as well.

photo of a child with a backpack ready to head out the door to school

Mostly, though, we just try to avoid television and Disney movies, and try to avoid books where the women are either helpless NPCs or props or both. It’s not always a perfect approach, because frankly there’s not a lot of those books out there, but it’s an uphill battle. But so is all parenting, so hey.

LB: Should we talk about the “P” word? Are there inklings of wanting to be a princess? Even if it was Princess Leia (who is now owned by Disney) would this fly with you and your particular approach?

MH: I don’t really know. We’re not there yet. She’s expressed as much interest in being a princess as she has in being a moose at this point, so I’m not super-concerned about it.

We’ll go through that phase at some point, I’m sure, but I just don’t want it to be the only phase she goes through.

LB: Love the moose stuff – where is that coming from?

MH: She has a shirt where the moose has antlers, so she holds up her hands to her head like antlers and says “MOOSE” and charges. It’s pretty great, unless you’re afraid of moose.

LB: Have you broken the news to her that moose are really big and stinky? Also a menace on country roads in Canada? 🙂

MH: For polite situations, she’ll hold up only one hand, and be a half-moose.

LB: You’re doing a great job here 🙂

Are you aware of projects such as: http://www.kickstarter.com/projects/16029337/goldieblox-the-engineering-toy-for-girls ?

MH: Yeah, I gave them some money on general principles.

LB: Can you speak to what works/doesn’t for you in terms of making technology feel accessible to your daughter and what seems to entice her or dissuade her from the things we technologists might be taking for granted?

MH: It’s too early to say. Right now, she’s surrounded by the tech Mom and Dad use in our day to day lives, watching us work with it. She understands very quickly how to use it herself. So far, to be quite blunt, “Accessible” means “stuff I can manipulate without needing to know how to read”, which basically means touchscreens with icons or hardware with big buttons, where interactions don’t generally have hard consequences.

LB: That brings up a good question – what does Mom do with regards to hacking or owning/customizing things in a way that teaches curiosity and exploration of creativity? Are you a one-man show, or is a love of technology, gaming, hacking something the whole family participates in to varying levels?

MH: Mom has almost no interest in technology per se. It’s not her thing, but her hobbies – more artistic, craftier in general – are complimentary, and also something Maya’s taken to.

LB: So your daughter gets balance then, between those many areas. I think it’s great that you take such responsibility for transferring your knowledge and sharing your passions with your kids.

MH: I’m not sure how they learn any other way.

LB: Final question:
What would you list as starting point for useful tools/skills a geek or geek-leaning parent might want to have at their disposal tohelp them alter the tech realities around us in this way and other ways that upset the defaults?

MH: I don’t think there’s one answer to that question, certainly not one that’s less than book length or applies to everyone. The thing that you ultimately need to do is to believe that not only can you look behind the curtain, but that if you’re a little bit smart and a little bit careful, you’ll be able to step up and operate the machinery there yourself. That’s what I’m hoping Maya takes from this – there may be an infinite number of things in the world you don’t understand, but there’s nothing that you can’t understand, and a little patience, a little courage and enough small steps. will get you there.

LB: Thanks for sharing your approach here, Mike, I think you’re an inspiration for open source geek parenting and I hope we’ll see more of these sorts of hacks in the years to come until they are no longer even “hacks” but in fact, defaults or built-in options.

MH:There’s a lot of work left to do, but we’ll get there.

Isn’t “hack” a bad word?

This past weekend I led another soft circuits 101 workshop as a Mozilla Rep at a women’s music festival near SF called Fabulosa. I had one hour to teach people really basic electricity, circuits, and how to ‘hack’ their clothes/sculptures/lives with a 3V battery and some LEDs.

The reason I love to do this workshop is because I find it gives participants a physical representation of the hacker spirit Mozilla aims to embody for the web.  Learning soft circuits is just the tip of the iceberg and I always stress that the web has much more info for them to continue exploring, learning, being curious about how to create and modify technology in their lives.  In one hour, I just show them how to make light.

This workshop was smaller than the ~80 girls who came through at Dare 2B Digital.  The festival setting meant there were more conflicts of interest so I had 6 participants instead of the 20-25 I had planned for. The 6 participants were all very enthusiastic though, and we started off with a go-around to hear why people were interested in learning soft circuitry.  One person was hoping to learn how to light up her clay sculptures, another wanted to make art for Burning Man, and a few had costume ideas in mind.

I spent the first 10-15 minutes explaining electricity, how a circuit works, and what kind of circuit they would be creating with their 3V batteries and LEDs – their circuits would be made using conductive thread sewn into felt (or some other material if they brought it).  With only 40 minutes left, we got to work – everyone started in on their first circuit.

While we were casually chatting during the building time, one woman said “I thought ‘hack’ was a bad word” (I had written a large “HACK” on the whiteboard to inspire).  I’m so glad she brought this up and we had a chance to discuss the very reason for workshops like these, and for Mozilla. I explained to her that while it might once have been a vilified term, it has now been largely reclaimed as people work to make sure that they have full ownership of the things they buy, or make.  Encouraging people to open their minds up to the potential of hacking their lives – whether on the web or in the physical world – always feels great.  I was happy that even in this small gathering, we got to discuss this very key issue for technology going into the future, and that there are now 6 new hackers in the world.