As you may know, I have this thing for slideshows and how to make them as unobtrusive as possible. Now, I just found some code by Adriaan Bouman in an exercise. It does the following:

• 
  • next
• 
  • previous
  • next
• 
  • previous
  • next
• 
  • previous
  • next
• 
  • previous
  • next
• 
  • previous

There is no JavaScript involved and yet it is a slide show that works the way you think it should. I liked the sneakiness of it, but do not necessarily agree with the markup. However, you can take this idea and scatter images over the document and position them absolutely to create the same effect.

[tags]css,trick,slideshow[/tags]

Sometimes you get across referers in your log that make you wonder why these people are not more known or their messages are not heard. Eike Pierstorff is one of those. His post about the problem with JavaScript libraries is a wonderful insight into the world of the people who use the stuff we produce and has some very nice imagery to boot:

I often take over maintenance for sites that have been deserted by their original programmers, and usually when one of these web geniuses spontaneously combusts he burns with him all documentation.

He hits the nail on the head when it comes to comments you find in already developed code:

One of the sure signs of a web prodigy is that comments in the frontend code usually fail to tell anything useful. Instead I find little essays on why “Javascript sucks�, which is why they have used this amazing library (usually nebulous 0.1 or the promiscuous 0.0.5 pre-alpha) that allows for otherwise unsurmountable tasks like adding a rollover to an image or toggle display of a named element.

And vents his frustration about the overuse of libraries:

So instead of programming in the one language javascript, [...] I suddenly have to look up documentation for a dozen or so libraries. And sometimes I wonder why my predecessors bothered at all to include a couple of hundred kb worth of Javascript

The sad thing about it is that Eike is not alone, the main difference is that he bothers to tell the world about these frustrations. These are the people we should be listening to when we develop libraries or write documentation as most of what gets produced these days will go through the hands of developers like Eike. It is not at all about how cool your script is or what new trick you found, it is about how much of a mess you leave behind when you leave it to someone else to maintain.

This will also be the biggest topic of my talk at @media Ajax and I am happy to have found this post.

[tags]frustration,javascript,libraries,maintenance[/tags]

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]