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 = ‘http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=’ + 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);
root.appendChild(oS);

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, thisphotoby.com.

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. :)

LinkedIn Maps: How are your friends connected?

LinkedIn Maps takes your LinkedIn contacts and groups them. The result is not only interesting but rather pretty. You can mouse over the different nodes, see who they are and who else is connected to them. After a few nodes I was able to see patterns in all my groups but one …

The group I can’t identify is dispersed throughout the whole map and contains friends from college, old collegues from HP as well as people that used to work at O’Reilly. I believe the group is really one of people that don’t share enough connections with others in my network to fall into any one group.

Universal Subtitles

I found the coolest tool, Universal Subtitles. With Universal Subtitles you can easily transcribe a talk, add subtitles or captions or translate any video on the web.

I’ve been trying to transcribe my Would you do it again for free? talk forever and I always give up – I can’t type fast enough to keep up and manually pausing required more hands than I have. Universal Subtitles let me type and automatically paused and let me catch up whenever the video got ahead of me. Then I could go back and edit, adjust the timing, etc. Now I could also go back and translate the subtitles into other languages.

Universal Subtitles is an awesome tool to help people share videos and presentations in other languages. Not only does it give you the tools you need to do the job, but it makes it very easy to cooperate. So for example, I could transcribe a GNOME video and then someone from the GNOME Hispano community could translate the subtitles into Spanish and then someone else from the GNOME localization team could translate them into their language. Others can go back and make corrections and adjust timing.

(Note that while the Universal Subtitles tool is awesome, transcription is still hard! I was transcribing myself and I still had trouble at times!)

Universal Subtitles is open source software and funded in part by Mozilla through Mozilla Drumbeat.

Disclaimer: I work for Mozilla.

GNOME Foundation hosting free web services

The GNOME Foundation is hosting free web services.

As you probably already know, the GNOME Foundation is hosting Tomboy Online which is in an invite only alpha right now.

We also have a public instance of a Gobby server running, so you can edit documents real time with others by pointing Gobby at gobby.gnome.org! When we update to the new protocol, you will also be able to collaboratively edit in gedit. Gobby runs on Windows, Mac, Linux and other Unix like operating systems.

For those of you that easily host your own Gobby servers, this may not seem like a big deal. But for those of us that groan at the thought of figuring out how to host a server of any kind, keep it running and answer questions from others, well, this makes it a lot easier for us to use the free software services that are out there!

Come tell us about Freedom & Web Services at OSCON!

I am organizing the Web Services: How can open source software compete? lightening talks at the O’Reilly Open Source Conference. If you are working on a free web service, or if you’ve given some thought to what it would take to have free web services, please come share your work! Free as in freedom and free software, not free of cost.

Creating “free” web services will require more than just making web services using AGPL licensed software. We’ll need trusted providers, protections around how data can be used and all the social aspects that the current web services have. We now have several free and open web services. Come hear what people are doing to define and create “free” web services. We need you!

The Web Services lightening talks will take place on Wednesday afternoon, July 21st, at OSCON. Each talk will be 5 minutes in length. You can use slides which you will need to send to me ahead of time in PDF format.

If you are interested, send mail to oscon -at- stormyscorner -dot- com with the word “OSCON” in the subject line, and include the following information. Please take a minute and submit your idea now!

Full Name:

Cell Phone Number:

Title of Talk:

One Line Description:

Your Blog or Website:

Other Talks I’m Giving at OSCON:

Feel free to forward this to other people or communities that might have interesting opinions to share.

When something is free, pretend you paid for it

Chris Brogan lost all access to his Google accounts today. He can’t check his email, his calendar or even use his Android phone.

We need to learn how to evaluate free products.

When we pay for something, we tend to read the terms and conditions, make sure there’s support, compare it to other alternatives, etc. When it’s free, we go “oh, cool, thanks.”

But free web services aren’t like free pizza. You come to depend on them and you give them your data and control of your life. Shouldn’t you know what agreement you have with them?

From Google’s Terms of Service:

4.3 [...] you acknowledge and agree that Google may stop (permanently or temporarily) providing the Services (or any features within the Services) to you or to users generally at Google’s sole discretion, without prior notice to you. [...]

I think the responsibility lies with users to evaluate the terms of the software they are using. Google provides a lot of great services. It’s up to us to figure out how best to use them and to demand better terms if we want them.

So when you sign up for a free web service, pretend you are paying for it. Read the terms. Raise your concerns.

Disclaimer: I use a lot of Google services and in general I’m quite happy with them.

10 free apps I wish were open source

When it comes to web applications, I think free and open source software fans are settling for “free” instead of looking for the freedom they would get from open source.

Here are some free applications that I wish had open source software equivalents.  I am not unhappy with these applications. I just wish I had open source software alternatives that were as good!

Here are 10 of the good web applications that I use daily that don’t have good enough open source software equivalents.

  1. Gmail. How many free software developers use Gmail as their primary email interface?
  2. Remember the Milk. I want a way to sync tasks across multiple computers, tag them, date them, prioritize them and share them with other users.
  3. TripIt. I forward any reservation to it and it adds it to my itinerary. I can also share with friends to coordinate travel plans or just to share where we are.
  4. Facebook. There’s Identica as an alternative to Twitter but there’s no open source software alternative to Facebook.
  5. Delicio.us/Diigo. Mozilla is working on tools to help me synchronize my bookmarks across multiple machines. I also want to share and search them.
  6. Kayak.com. The best way to find cheap airfare with all the options you need.
  7. Doodle. Ever tried to schedule a meeting with lots of busy people in different time zones?
  8. Google calendar. I can manage my calendar from any where and invite others to meetings. All synced on the web, not dependent on any particular machine I’m on.
  9. Google reader. Judging from how many open source software users share items with me in Google reader, a lot of us are using this RSS reader to follow our favorite websites.
  10. Dropbox. Dropbox and UbuntuOne have become the default way for users to access files across multiple machines, remotely and to share them. Why don’t we have an open source software option yet?

Why hasn’t open source software kept up with the web application space? What needs to happen for us to have open source software web applications in these spaces?

What other spaces are also missing open source software options?