Replacing the Flash Flickr Badge with Dojo June 23rd, 2008 at 12:04 am by Dylan Schiemann
A few weeks ago, some of the guys at SitePen were commenting that I was using Flash on my personal web site for a Flickr Badge. I responded that if Dojo had similar functionality, I would easily replace the badge. A couple of weeks later, Peter Higgins and Bryan Forbes of SitePen rose to the task and created dojox.image.FlickrBadge.
This weekend I had a chance to put their work to the test, and I’m impressed. Using the new Flickr badge is quite easy:
<head> ... <link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" /> <style type="text/css"> img.thing { width:50px; height:50px; } </style> ... </head> <body> ... <div dojoType="dojox.image.FlickrBadge" rows="8" cols="3" username="dylans" tags="dojotoolkit,italy"></div> ... <script type="text/javascript" src="/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojox.image.FlickrBadge"); </script> </body>
. There are a number of configurable parameters, most of which are optional:
- apikey: your Flickr API key
- columns: # of columns of images to display
- rows: # of rows of images to display
- searchText: free text search of title, description, and tags
- setid: id of a Flickr set to use in displaying images
- tags: a comma separated list of tags or an array of tags to grab from Flickr
- userid: your flickr userid (saves a lookup request)
- username: your flickr username
Give them a try and create a badge that’s just right for your site.
Performance Optimizations
The badge included to this point is a great start, but it requires a number of JavaScript files to be loaded prior to the completion of page rendering, so I started making tweaks to improve performance. The next logical step is to create a Dojo build to layer all of the non-core Dojo code required for this module into a single file. First, I’ll create a very simple profile file for my build:
dependencies = { layers: [ { name: "badge.js", resourceName: "dojo.badge", layerDependencies: [ "dojo.js" ], dependencies: [ "dojox.image.FlickrBadge" ] } ], prefixes: [ [ "dijit", "../dijit" ], [ "dojox", "../dojox" ] ] }
And then I ran the build with the following configuration options:
./build.sh action=release optimize=shrinksafe profile=dylan cssOptimize=comments.keepLines cssImportIgnore=../dijit.css version=1.2.pre
This reduced the number of requests by compressing a number of JavaScript files into badge.js. However, it still required a decent amount of additional JavaScript to load before the page renders. Fortunately, I’m using the latest Dojo trunk, and Dojo 1.2 has a new mechanism for lazy-loading a built layer! That’s right, just point to a layer as you would any Dojo module, and defer loading until later. All with a simple, single line of JavaScript:
dojo.addOnLoad(function(){ dojo.require("dojo.badge"); dojo.addOnLoad(function(){ initBadge(); })});
A couple of notes:
- the nested dojo.addOnLoad is the new way to add a load callback for a lazy-loaded layer
- my use of dojo.badge as the resourceName is not a coincidence… it follows Dojo’s standard naming conventions, looking for the file badge.js as dojo/badge.js automatically
Finally, inside initBadge, I decided to turn off Dojo’s parser, and instead make an explicit widget instantiation on the node to replace, in order to reduce code execution time:
function initBadge(){ console.log("init"); new dojox.image.FlickrBadge({rows: 8, cols: 3, username: "dylans", tags:"italy,dojotoolkit"},"flickrSidebox").startup(); }
That leaves us with this performance-optimized code fragment:
<head> ... <link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" /> <style type="text/css"> img.thing { width:50px; height:50px; } </style> ... </head> <body> ... <div id="flickrSidebox"></div> ... <script type="text/javascript" src="/dojo/dojo/dojo.js"></script> <script type="text/javascript"> function initBadge(){ new dojox.image.FlickrBadge({rows: 8, cols: 3, username: "dylans", tags:"italy,dojotoolkit"}, "flickrSidebox").startup(); } dojo.addOnLoad(function(){ dojo.require("dojo.badge"); dojo.addOnLoad(initBadge)}); </script>
In a future release, I’d like to see us add an option to randomize which images get selected from the set, rather than the first X results from a query. This is a complaint I have with the official Flickr Badge as well, and the API itself which generally returns the first X entries. dojox.image now has a number of great features: Lightbox, Badge, Gallery, Magnifer, and SlideShow. dojox.image.FlickrBadge uses the new dojox.data.FlickrRestStore, a Dojo Data store implementation that makes it extremely easy and flexible to work between Flickr data sources and Dijits.
Tags: dojox, dojox.image, flickr
Posted June 23rd, 2008 at 2:33 am
Nice to see my data store being pimped :-) For some more info on accessing Flickr using Dojo this blog post - http://shaneosullivan.wordpress.com/2007/09/22/querying-flickr-with-dojo/
and these demos on DojoCampus:
http://dojocampus.org/explorer/#Dojo_Data_FlickrRestStore
http://dojocampus.org/explorer/#Dojox_Image_Gallery_Flickr%20DataStore
http://dojocampus.org/explorer/#Dojo_Drag%20And%20Drop_Flickr%20Viewer
http://dojocampus.org/explorer/#Dojox_DTL_Using%20Data%20Stores_FlickrRestStore
Shane
Posted June 23rd, 2008 at 2:33 am
Also, it’d be cool to add this as a demo to DojoCampus…..
Posted June 23rd, 2008 at 8:50 am
Dylan:
Can you put your build up as a zip file or something for others to grab until 1.2 is final? Or should folks just grab the badge.js from your site?
Regards
Posted June 23rd, 2008 at 9:12 am
@alex: A full copy of my build is now available: http://sitepen.com/labs/code/flickrbadge/ . It’s not minified to remove unneeded directories.
Posted June 25th, 2008 at 5:41 am
I like how you went from “rapid prototype test it out mode” with the dojoType then polished to make the markup valid HTML, and eliminated the overhead of parsing. Sneaking the script loading until after onLoad is just added bonus, and really cool.
Posted June 25th, 2008 at 6:51 am
Cool Stuff! I a Flickr Badge using SVG and SMIL Timesheets about a month ago.
Posted June 25th, 2008 at 7:07 am
@Jeff: that’s really cool work. Is there any interest integrating FakeSmile with dojox.gfx?
Posted October 27th, 2008 at 10:24 am
[…] The simple provide and require namespace system system makes it easy to use Dojo code and your code alike. This makes it possible to easily create advanced, powerful applications as well as simple features such as the Dojo Flickr Badge. […]