After I released the second version of my unobtrusive flickr badge I got pestered by my colleague Marco to create a “light version” that does neither feature the carousel functionality nor the preview of the photos. In essence, he wanted a JSON driven badge to show his flickr thumbnails.

Alright then, here you go: check the flickrbadge light

The usage is as easy as the other badge, but after some more pestering I added some more goodies. To show a badge include a DIV with the class flickrbadge with a link to your flickr feed:

My latest photos on flickr

Afterwards include the script (only needed once in the document!):

You can suppress the links to your flickr feed by adding another CSS class called “nolinks” and you can define the amount of thumbs with a class called thumbs followed by the amount of thumbs, like thumbs5.

Enjoy.

[tags]flickr,badge,distribution,json,unobtrusive,marcowantstoomuch[/tags]

Talking to the Opera Vikings at several conferences I realized that the little browser that could is doing a lot to help developers get the best out of them. While Firefox+Web Developer Toolbar+Firebug still rules for me as a developing platform, I was always a bit disappointed as to how Opera fell back in this respect. Sure, it always had a good JS console with human readable error messages (hey, Microsoft, hint! hint!) but there is nothing to debug the CSS issues you find. Now Opera want to alleviate that problem and asked several people to give them feedback on what can be done to help JavaScripters and other developers to work with Opera.

Here’s the email I got:

One of the biggest problems with supporting Opera at present is the lack of any meaningful developer tools, especially a JavaScript debugger. Our developers (who as you can imagine are regular programmers, not web developers) are looking into integrating the tools we build into a number of IDEs. I want to make sure we integrate into the right IDE’s and editors that client side JavaScript developers use, instead of just the server side developers.
So I’d like to know (if you’re willing to share) what development environments (or text editor if that is what you use) you use when developing JavaScript. If your colleagues use different tools then that would be useful to know, or if you know tools that are very popular that others use. Do you also know if it is popular for the server side guys to develop the client side logic instead of the client side people, and if they use their typical tools like Eclipse or visual Studio (for example) for this?
Any feedback, wish lists, comments etc would be greatly appreciated as we are looking to build tools that will serve the development community as well as possible. This will obviously be a multi stage project. We probably can’t produce something that has everything Firebug has and more from day one (especially with Yahoo also now committing resources on it), but we will advance the tools as time goes on, with the most needed features addressed first.

So tell me, what do you use? I will point the Norwegians here to get info outside the office and who knows, maybe your submission will make Opera a joy to debug with!

[tags]debugging,IDE,development,opera,firefox,firebug,hornedhelmets,largeblondeladies[/tags]

A work colleague who runs Tobago Retreats asked me to create a gallery badge that automatically shows her latest flickr photos in her gallery and I started another flickr badge from scratch.

The outcome looks like this:

All you have to provide is a link to the flickr stream or the tagged images in your stream as a text link with a DIV with the class “flickrbadge” around it.

The script is a single include and loads the style sheet and the YUI help files on demand when they are needed. Visitors can see your photos on the page and click the thumbnails to see the larger preview. You can style the badge any way you like by changing the supplied CSS file.

The script is licensed Creative Commons attribution and is free for use.

If there is interest in a step by step explanation how it works, retrieves the YUI files and the flickr data, I can write something up, but for the moment I’ll be happy about feedback on the script as it is.

It does not work in Opera at the moment and I have a bug request with them running.

Check out the script and download it on its homepage: dynamic JavaScript flickr badge v2

Image hosted on flickr.
[tags]badge,flickr,photos,blogging,distribution,yui,json[/tags]

Dirk Jesse has read my blog post on how to enhance the YUI grids with equal height columns adding a dash of JavaScript and wanted to get him some of that for his own CSS framework YAML.

Together with Dirk Ginader he created a jQuery based plugin for the YAML framework to equalize columns.

There is not much being said outside of Germany about YAML, and, me being out of the loop just got aware of it recently, too, but I must say that if you are looking for a well-documented CSS framework and the YUI grids do not to cover what you try to achieve, YAML is worth a closer look. It is amazingly well documented in German and the maintainers put a lot of effort into creating the English version of YAML for the rest of the world to understand more easily.

Probably the biggest boost you can give any CSS framework is take the initial pain of creating the HTML with the correct classes and IDs away by creating a WYSIWYG editor and the YAML folks have done this with the YAML builder also based on jQuery.

YAML is a product worth keeping your eye on as the maintainers are eager to extend and maintain it and take on interesting feedback to add improvements to the next release. It is furthermore quite lucky that the product is targeted to a much different audience than hardcore developers as the clash with the straightforward machine parsable data serialization format with the same name could be confusing.

[tags]CSS,frameworks,equalcolumns,jquery,dirkjesse,dirkginader,yaml[/tags]

In November, I’ll be back on the Eurostar to Travel to lovely lovely Paris and once again be the single English speaking presenter at a French conference. Past encounters were the first Braillenet Conference and the 11th BarCamp Paris.

My talks will be a piece on why web standards make sense for collaboration and parallel development in distributed teams and a quick workshop on Unobtrusive JavaScript.

If you are in Paris, and you know people who still need to hear about that sort of stuff (I know there are a lot out there although we claim we won that argument) have a peek at the Paris Web Conference Web Site and I’ll see you on 14th-16th of November in that beautiful city by the Seine.

[tags]webstandards,paris,conference,parisweb,parisweb2007[/tags]