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.
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.
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.
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’;
//flickr automatically calls jsonflickrAPI(rsp)
var root = document.getElementsByTagName(‘head’);
var oS = document.createElement(‘script’);
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:
- 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.
- StackOverflow. I googled most of the problems I had and several time I found good answers on StackOverflow.
- 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.
- Then I figured out how to make a canvas and draw an image on it. (Easy.)
- Then how to write text on an image. (Easy.)
- Then how to create a jpg of that canvas. (Was easy. Then it quit working.)
- Then I figured out how to have the user specify the image location and the text. (Pretty easy.)
- Then I figured out how to get an image from Flickr. (Not easy.)
- 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.)
- Then I created a bookmarklet. (Not as easy as I thought but quick.)
What was hard?
Trouble shooting and Flickr.
- 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.
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.
There are a lot of things I could do to improve this.
- 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!
- 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.
- 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.
- 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.
- Make a pretty website. 🙂