Category: Web/Tech

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. 🙂