Developer Engagement at Mozilla

In November I joined the Developer Engagement team at Mozilla. We are working to make sure web developers every where know and use open technologies.

Mozilla’s mission is to promote openness, innovation and opportunity on the web. On the developer engagement team, we work to make sure web developers can use open technologies to help create open and innovative opportunities for everyone around the world.

We want web developers every where to use open technologies on the web. In order for that to happen we believe we need to raise awareness and provide a place where they can learn, share and discuss open technologies. We want all web developers, new and experienced, to  have good resources for learning about open web technologies, how to use them and why they are important.

Our work will be done when the entire web uses standards like open video, WebGL, SVG and JavaScript instead of proprietary technologies like Adobe Flash.

We do that by:

  • Working with existing web developers to spread the word about open technologies. See Christian Heilmann’s People of HTML5 interviews.
  • Working with open web experts and documentation contributors to provide awesome documentation about how to use web technologies like JavaScript. See the doc sprint that Janet Swisher just ran.
  • Creating a place where developers can come learn and teach about web technologies, Mozilla Developer Network (MDN). Jay Patel is busy keeping it up and adding a place where people can show off and share demos as well.
  • Promoting cool technologies and places to learn through our Hacks blog.
  • Showing people what cool stuff can be done with open technologies like html5. Paul Rouget spends his time writing demos to show others how to do cool things, helping trouble shoot Mozilla’s technologies and working with others who are also writing demos.
  • Documenting all the cool features available. Whenever I ask Eric Shepherd, aka sheppy, what he’s working on, I either get “writing” and I get a huge long list of features that he’s added documentation for.

So who are we?

Christian Heilmann is a long time developer evangelist. He joined Mozilla from Yahoo where he advocated Yahoo’s technologies as the lead evangelist for the Developer Network. He’s written a couple of books on JavaScript, web development and accessibility and released dozens of online articles and hundreds of blog posts in the last few years. You are likely to see him out and about speaking on web technologies. He lives in London.

Jay Patel has been part of the Mozilla community since … well, since it was Netscape. He joined Netscape in 1999. He has a background in engineering,  specifically in QA doing blackbox testing, crash analysis and debugging, and test development.  Over the years his interests led him to project management, marketing and community building.  Jay leads our MDN efforts. He lives in California.

Paul Rouget is a developer evangelist. He writes code, gives talks, finds bugs, helps others and in general has fun with the web! He is well respected and sought out after in the Mozilla community. He lives in Paris.

Eric Shepherd, aka. the Dcoumentation Overlord, aka Sheppy, is the developer documentation lead for Mozilla Corporation. His job is to organize, manage, and create documentation for the Mozilla project. That includes documentation to help web developers create amazing and effective web sites and web applications. He lives in Tennessee.

There’s much more that can be written about open web technologies than a couple of on-staff writers can cover. So Janet Swisher not only writes documentation, she also fosters doc contributions from the broader Mozilla and open web community. She organizes documentation sprints and community meetings for MDN contributors, and reaches out to related projects and communities. She lives in Austin, Texas.

And me, Stormy Peters.

Of course we don’t do this alone. We are joined in our efforts to promote open technologies for the web by Mozillians and web developers world wide.

And we are hiring! So if you’d like to be a developer evangelist, let us know!

Random highlighting

The Kindle now lets you see what other readers have highlighted. I look forward to the day when I can filter this by what my friends have highlighted.

I find what people highlight in fiction books is baffling. For example, is this quote meaningful to you?

Jace didn’t take his eyes off Simon; there was an electric anger in his gaze, and a sort of challenge that made Simon long to hit him with something heavy. Like a pickup truck.

It was to many others. They highlighted it. Is it memorable because of the pickup truck? If not, why? If so, is that really the most memorable thing they’ve read today? If so, I have a few RSS feeds to recommend.

I love reading things my friends recommend through Twitter and Google Reader. Kindle highlights, which are not by friends but by everybody, have not been so interesting …

Kindle Covers Reviewed

I reviewed three Kindle covers for my latest generation Kindle 3 Wireless Reading Device and found the perfect one.

Three Kindle covers

I tried out 3 covers, the M-Edge GO!, the M-Edge Latitude and the Belkin Grip Sleeve.

LatitudeThe M-Edge Latitude Kindle Jacket is the one I liked best for my Kindle 2 but unfortunately they changed the material. The new jacket is a lot stiffer, less pleasant to hold and did not fold over very well for reading. So if you have a Kindle 2, I recommend the Latitude jacket, but not for a Kindle 3.

The Kindle does fit very nicely and snugly into the jacket and I felt like it protected my Kindle better than either of the others.

BelkinI also tried a Belkin Grip Kindle Sleeve that I really liked. It was very light, padded and very comfortable to hold. I didn’t however want a sleeve. For sleeves, you take the Kindle completely out in order to read. This means that when you are holding your Kindle, or when you set it down for a second, it’s not protected. I imagined setting it down on the arm of the sofa and then having the dog or one of the kids knock it off. With the sleeve sitting on the table beside it … But if you are looking for a sleeve, I would recommend the Belkin one. It’s light weight, feels nice and has good padding without being bulky.


The M-Edge GO! Kindle Jacket is the cover I decided to keep. It’s a very nice pseudo leather and adds no bulk or weight to the Kindle. (An improvement over the Kindle 2 version which was rather heavy.)

I enjoy carrying it in my hand and it fits into my briefcase quite nicely, taking up almost no room at all.

Please let us know what cover you end up buying!

Learning to write JavaScript

So now that I work at Mozilla, I figured it was time to develop a “web app” just to make sure I understood it all. And since my team is working on educational resources for web developers, I wanted to see what it was like to learn how to use some of them using resources online.

So I decided to use the resources I could find online and write some JavaScript to do a pet project of mine.

What was the problem I wanted to solve?

I really wanted a way to automatically add “Photo by <author>” to the bottom of Flickr pages I want to use in my presentations. I have a number of workarounds I’ve developed to do this in an effective way, but I really just wanted to click a button.  For example, at first, I saved the image with the author’s name as the file name, and then every time I used the picture, I added text to the slides. Then I wrote a Ruby script that went through all my picture files and added “Photo by <filename>” to them. But that is still a three step process: grab the author’s name, save the photo as the author’s name and then run the script. Also, I like searching on Flickr better than I like searching my personal archive. Tags are nice.

I also wanted to make it a service and a bookmarklet so others could easily use it.

Why did I decide to use JavaScript?

When I first started this problem, I wrote a script in Ruby. I thought I’d use Ruby on Rails to make it into a web app, but Rails looked pretty difficult to setup for a newbie, so I put it on the back burner.

Now that I’m at Mozilla, I thought it was high time to learn JavaScript.

(For the record, I have a background in C, C++ and Java. I find Ruby much more intuitive to read than JavaScript. But I find JavaScript much more readable than many other things.)

In retrospect, the Flickr API is difficult to use from JavaScript. I think using PHP would have been much easier. It did force me to use only one call to Flickr (the right solution), as adding a Flickr API call to JavaScript turned out  to be unintuitive to me. You basically build a <script> object and then append it to the document.

Like this (copied from sample code):

document.flickrURL = ‘’ + document.apikey + ‘&photo_id=’ + photoNumber + ‘&format=json’;

//add the flickr javascript to the page so it gets executed
//flickr automatically calls jsonflickrAPI(rsp)
var root = document.getElementsByTagName(‘head’)[0];
var oS = document.createElement(‘script’);
oS.setAttribute(‘type’, ‘text/javascript’);
oS.setAttribute(‘src’, document.flickrURL);

Maybe that’s the way things are usually done in JavaScript, but it took a while to wrap my head around it. I felt like I was dynamically changing the code at execution time which made me feel like I was in a science fiction movie. Except that I didn’t think my problem warranted that complicated of a solution.

Part of my comprehension problem was that a call to Flickr calls your jsonFlickrAPI() function and you don’t get to say when that’s called. Nor change it for different calls. (Although maybe you could have several JavaScript files each with their own jsonFlickrAPI() functions. I didn’t try that.)

How did I learn?

I asked one really stupid question of my team mates. Then I decided I really needed to see if I could learn this from web resources.

I used primarily three:

  1. MDN. When I wanted to learn more about an element or what was possible, I ended up on MDN. Probably because I was familiar with this site – it’s the one that my team at Mozilla maintains! But I really didn’t find any other site that covered all topics like a reference guide. It did turn up several times in my searches too.
  2. StackOverflow. I googled most of the problems I had and several time I found good answers on StackOverflow.
  3. Personal blogs. A lot of my questions and answers were found on personal blogs. People had encountered a similar problem and they blogged about it.

How’d I get started?

It’s been a long time since I’ve written code. (Other than an occasional program or script to solve a quick problem.) I broke my problem down into nice little steps. Each one of which was functional on its own.

For example:

  1. First I wrote a “Hello World” app in JavaScript. This was to make sure I knew where the code should go, the basics of getting setup with an editor, etc. (Very easy.)
  2. Then I figured out how to make a canvas and draw an image on it. (Easy.)
  3. Then how to write text on an image. (Easy.)
  4. Then how to create a jpg of that canvas. (Was easy. Then it quit working.)
  5. Then I figured out how to have the user specify the image location and the text. (Pretty easy.)
  6. Then I figured out how to get an image from Flickr. (Not easy.)
  7. Then I figured out how to get an image from Flickr when all you have is the url of the photo page. (Really not easy.)
  8. Then I figured out how to put some javascript on a website for everyone to use. (Very easy.)
  9. Then I created a bookmarklet. (Not as easy as I thought but quick.)

What was hard?

Trouble shooting and Flickr.

  • Trouble shooting JavaScript was not always easy. If I was getting someone started with JavaScript, I’d set up their development environment and explain the tools first. Firebug, the Firefox Console and alerts ended up being my friends. Before I do more JavaScript development, I’ll explore some more debugging tools.
  • Flickr. I think the Flickr API might be really easy to use if you use a language where you could just make a call from the code. I had to create a URL and then append it as a script. It made trouble shooting harder and it felt clumsy.

A couple of times I also ran into something that made no sense to me or was taking too long to trouble shoot and instead of figuring it out, I did it a different way. I think it would be good for my education to figure out what was wrong with the initial approaches.

What did I end up with?

If you’d like to try it out, drag this bookmarklet [thisphotoby] to your bookmarks bar. (If you are on Internet Explorer, right click and save it.) Then go to a Flickr photo page and click on the bookmarklet. It will return the photo with “Photo by <author>, <url>” overlayed over the  bottom of the photo.

You can also check out the (very ugly) website I made,

Next steps

There are a lot of things I could do to improve this.

  1. Add error handling. If anything goes wrong, well, it just doesn’t work. I didn’t do any checking or give the user any helpful tips. A terrible coding practice!
  2. Clean up the code. I copied and pasted ideas from many places and ended up with variable names and function names that follow no standard. I’d also like to find a JavaScript style guide and clean up the code.
  3. Add user preferences. It would be nice to specify which size image you want, if you want white or black text, what size text, etc.
  4. Licenses. I’d like to be able to check what permissions the user has and what license the photo is under in order to help the user understand how they can use the photo. Flickr lets you download all sizes of all photos even if they are licensed “All Rights Reserved”. This script passes on that ability, but it would be nice to also make the licensing more obvious.
  5. Create a jpg. I had it working with a png and a jpg. Then the jpg part quit working. I tried several other methods and did not get it working. Since I felt like I had accomplished my goal, I left this for later.
  6. Make a pretty website. 🙂

Help girls discover how cool a career in technology could be!

If you have some time this Saturday, take half an hour or so to help show girls how cool a career in technology can be. Dare 2B Digital is a conference for girls to learn more about careers involving computers.

What can you do?

As part of the conference, the girls will be making videos. (Mozilla is sponsoring the event and Lukas Blakk will be teaching the HTML5/Open Video workshop.) We need volunteers to help transcribe the videos and translate them real time to show them the power of the community and technology. The software being used is Universal Subtitles (which is a really cool tool).

Spend half an hour this Saturday and help show girls how cool our world is. You can sign up here.

Why help girls learn about computer science?

As many of you know, less than 2% of open source software developers are women. This frustrates me for two reasons.

  1. A bunch of women are missing out on some really awesome opportunities.
  2. The open source community could be twice as big! Imagine all we’d get done!

But it’s hard to recruit more women when the pool of women in computer science in general is small. I helped out at a technology event for girls once. They were sixth graders (about 12 years old). When we asked what they wanted to be, none of them picked any kind of technology field. Studies show that by sixth grade, girls have already decided not to pursue math and science careers.

This is our chance to show them how cool those fields can be. And that they aren’t alone, that there’s a whole community of interesting and motivated people they’d get to work with.

So sign up now. You can help in person if you are in Mountain View or you can help transcribe and translate if you are not. Bilingual people are much needed!