Tagged: bay area

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.

My First Startup Weekend: Women 2.0 Startup Weekend

On November 18th, 2011 I jumped into the deep end of the Bay Area startup culture I have been lurking on the periphery of for the past two years of living here. After going to my first Geek Girl Dinner at Microsoft a month ago, and preparing to talk about women in open source at the Grace Hopper Celebration of Women in Computing, it seemed very much up my alley to sign up for the Women 2.0 Startup Weekend held in SF at The Hatchery.  Originally Angie had asked me to be one of the mentors which, while incredibly flattering, seemed beyond my current skill set.  I do always have ideas for new projects/apps though and I’ve been trying to get even more full on development experience under my belt so it seemed like a deal to get to spend 54 hours working on a startup idea for $50.

[tangent]

I love the immersion-as-classroom experience, btw.  I made my first Super 8 film in 1999 at G.I.F.T.S under similar conditions where I lived with my other new-to-filmmaking cohort in a couple of trailers-turned-bunkhouses over on the beautiful island of Galiano and for one week we did nothing but eat, sleep, and breathe guerrilla filmmaking.  We shot, hand-developed, transferred, and then edited our work, cranking out an entire short film in just one week.  I left that experience filled with confidence that I could make a movie a week for the rest of my life!*

What I was hoping for out of my first Startup Weekend was an up-to-your-armpits code-a-thon and what I got was…very much NOT that. Here’s what I got out of Women 2.0 Startup Weekend instead:
Pitching 101
Some people had come prepared.  They had read an email I missed, knew what was supposed to be in a pitch, perhaps even had some code or a site name or some idea of what they would need to take the next step into their imagined company.  I had none of these things.  I had 2 ideas, one of which had occurred to me the week before on a bike ride.  I jotted down my ideas quickly and ‘pitched’ them to a couple of women I knew from other local events (like my CodeChix pal, Vicki).  Both of my ideas seemed to get people interested and with the help of a few very kind listeners, I chose which one I would officially pitch and worked on naming the imaginary app as well as figuring out what salient points I wanted to get across.  It seemed wise to me to get into the early round of pitchers, little did I know that there would be about 67 pitches.  I was #6 and so it took a long time to get to the point of being able to move about the room chatting people up, which I am sometimes not so good at.
  • What I did: I pitched it, was too shy to really reach out to strangers and try to woo them to my idea, I hid my sign for a while only taking it out when people asked me about it, I got 7 sticky-note ‘votes’ for it (which was amazing to me), but I already knew that I would not be working on this project over the weekend and I was shopping around for a team that I would be excited to spend my next 54 hours with.
  • What I will do next time: Work more on my pitch ahead of time, have a clear idea of WHO I would like to join me, go around the room and find people who match those roles, have more research about my ‘market’ ready to help with the business side of things.
  • What I wish Startup Weekend organizers could improve: Help people match up by roles – so have all the designers go to one corner, all the marketing folks, all the developers, etc.  Give us a visual of who’s there looking to do what so that we can more easily go around and network.  It seems less efficient to me that I would have to go chat up 10 people and perhaps discover that none of them are a match for what I’d be seeking. Even putting this info on people nametags would help – especially for folks who have multiple skills they want to highlight.
A Team is Formed
The eliminations were happening and I already knew I was going to put my idea aside for another time, so I had to figure out where I would lend my energy for the 54 hours to come.  I’d been interested in a project called Safe Steps whose goal was to help independent women set a timer on their travel to ensure safe arrival at their expected destination. I spoke briefly with the woman who pitched it, and I had already learned from a conversation with a volunteer that the pitcher was a seasoned pro at marketing.  I felt like I would learn a lot in that team but I was still checking around for other ideas.  In the chaos of the eliminations I ended up behind a pillar with 4 people (one is a coworker at Mozilla) and two of them I had met briefly when they accosted me, they were looking for people who could program in C (and though I did it in school 4 years ago, I was not about to claim any proficiency). I asked if they had found what they were looking for and inquired about what they were planning.  Judy explained her pitch about doing an educational project with the Kinect to teach language to children. I have experience teaching technology to both youth and adults, so working on anything that helps make educational materials accessible to all types of learners, as well as the possibility of doing hands-on Kinect-hacking for the first time, was all it took to sweep me up into this team that was bouncing off the walls and repeating those magic words: “Kinect” and “education”.
Team Roles
We had 54 hours to come up with a demo of our ‘company’ for a panel of judges to evaluate based on marketability, creativity, and feasibility so when we got our workspace assigned to us at 9:30pm that Friday night we went straight to work. Introductions all around, describing our experience and what drew us to the project, came first and then we divided up into the technical team: James and I, and the Business/Strategy/Research team: Judy, Elsa, and Jen.
Our technical idea seemed simple at first – Grab the Kinect motion data and send it to
Processing.js so users could interact with a language learning flashcard game that was one of many ‘decks’ our ‘platform’ would support. The initial deck would be a simple game with a bear where the bear calls out a verb, enacts it, then waits for the user to imitate both the motion and the word.  I really did go into this thinking that was simple.  Am I crazy?  Turns out none of that was within our reach in a 54 hour period. The challenges are too many to list completely but here’s a few: both James and I were completely new to Kinect-hacking. While open source Kinect hacks exist there were lots of library conflicts, documentation gaps, and finicky
installations that led to failure on several frameworks we were trying and build on. I could get the Depth.js example to work in Chrome for a second (but never again for unknown reasons), but couldn’t compile the native google plugin from the depth.js
project so couldn’t write new code for the extension. I couldn’t build the OpenNI Sample-NiUserTracker after altering
it to add a network tunnel so that it would report data to a
node.js server (though I’m happy to have now touched Node.js even just a bit!). By Saturday late evening we had nothing to show except an intimate knowledge of library linking errors and compile failure messages.  There still isn’t a ton of material online about how to work with the Kinect data in a usable way.  This actually gets me excited for future projects but at this point in Startup Weekend, we had to get ourselves a demo for Sunday’s judging.
We decided to move on to the Kinect SDK that Microsoft provides, we installed Visual Studio 2008 Express and an open source gesture recognition library which allowed us to capture a movement and assign it to a saved gesture namespace.   In the end, our demo was created in a few hours by James using those tools (and a bit of C#) while I came up with some very quick animations objects and put together our landing page.
Needless to say, the weekend was nowhere near being a code-a-thon.  It was surprising to me how long it took to try and get a development environment setup and what I take away from this experience is that when the time comes to work on my own idea, if I bring it to a Startup Weekend, I should have the beginnings of an implementation already and have settled on a framework to build on that I am familiar with so that I can spend more time being creative about the idea and less time fiddling with configurations and installations of unfamiliar code.
Oh ya, but we won!
I should mention that the whole time we were having our ups and downs with the technical side Judy, Elsa, and Jen worked hard at analyzing all the angles of language learning by doing.  I listened in at one point on a very helpful discussion with Cindy Alvarez who asked great questions about “what next?”. Sure, verbs and kids are easy and lots of language-learning stops there – how would we push the envelope and take people to other levels?  We had lots of mentors come by, and all of them poked and prodded at the research and story-shaping that the business end of the team was doing. At the end of the weekend our team won first place with a demo that had very little custom code in it, but I think we did well because we told a great story and had an extremely well thought out marketing strategy. When our demo was complete the judges were silent at first.  Finally one of them asked the question we had prepared for “so, after learning verb with bears- what next?” to which I answered that we could build a platform for AI interactions in WebGL 3D space with the Kinect.  Yes, I like to promise technology that doesn’t really exist yet.  It sure is exciting to imagine it though.
Some final thoughts
Startup Weekend, to me, felt a lot more like a school project than ‘real life’.  This is most likely due to the fact that I have a really great full time job right now and am looking at startup ideas mostly as learning and hobby and not necessarily something I would do for money for a few more years (at least). All the reading I have done about startups gets me thinking that I would likely go the way of bootstrapping and working on my scalable project in my spare time instead of trying to get a big VC investment and leave a steady job for the unknown. In terms of working during the weekend there are lots of ways to fall down rabbit holes and lose focus when you are working on something that is completely new. I love getting to learn about new technologies but there was this time pressure that kept us coming back to a general goal of having something to show at the Sunday evening presentations. The Startup Weekend environment isn’t one for coding/development efficiency. It’s distracting to have other people and their ideas/surveys/questions coming around a lot and to be working out in the open with your entire team instead of under noise-cancelling headphones as I normally do.  It’s not bad, it’s just not a focused environment and it’s good to know that for next time.  I think it would help me set my expectations differently.  It was important for me to learn that the goal of Startup Weekend is not necessarily to have a working application at the end but to have a really well thought out idea and story about your company’s goal.
Speaking of story, come on out to TEDx Women next week where Elsa from Words With Bears will be presenting ours! Most importantly,  I want to say that Words With Bears was a great team to work with. I heard stories of teams falling apart or losing team members, none of that touched us at all. We started strong and we ended strong. We’re continuing to stay in touch and aim to develop this idea
into something bigger.
* This is not what ended up happening, but I will always carry with me the knowledge that with little else than enthusiasm, a couple of rolls of film, and willing friends, a tremendous amount of creative output is possible in a short time with no budget.