• You are currently browsing the Christian Heilmann blog archives for September, 2007.

  • Archive for September, 2007

    Giving Opera a helping hand in building cool debugging tools

    Thursday, September 13th, 2007

    Opera Vikings + me

    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]

    New unobtrusive dynamic flickr badge

    Monday, September 10th, 2007

    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:

    The new dynamic flickr badge

    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]

    YAML now supporting equal column height using JavaScript

    Monday, September 10th, 2007

    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]

    Paris Web 2007 web site is up

    Thursday, September 6th, 2007

    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]

    Dynamically including YUI components with YAHOO_config

    Monday, September 3rd, 2007

    One of my favourite tricks in scripting is to delay things until they are absolutely necessary to make sure that no user needs to deal with lot of code that doesn’t make sense to have at that point in time. This leads to faster pages and just makes sense. The most common trick for this is to add JavaScript library files using dynamically created script tags. I have already written about this in 2005 on this blog and it still is a cool thing to do.

    The only problem I am seeing with this is that you never know when the other script has been loaded and it is safe to access the methods and variables in it. There are several ways to have a “loading ready” indicator but the browser differences are annoying : Jan Wolter has written about this in large detail.

    The safest option is to write your scripts that get loaded dynamically to do a function call or amend an object once they are executed. However, sometimes you want to call library code that is not yours. Some APIs like the flickr or del.icio.us ones work around that by offering a callback parameter or wrap the returned dataset in a function. Not all third party code does that though.

    One sensible solution for dynamic inclusion is YUI if you don’t want to have all the widgets you need later on loaded when they are not yet needed. The Rolls Royce solution for that is using the YUI Loader which even allows you to load non-YUI content on the fly. If you don’t want to go that far you can however have a poor man’s version of loader by observing the loading of components with YUI_config.

    In order to do this you simply define a YAHOO_config object and point its listener property to your monitoring function. This has to happen BEFORE you insert the YUI YAHOO object!

    
    <script>
    function mycallback(info){
    console.log(info);
    }
    YAHOO_config = {
    listener: mycallback
    };
    </script>
    <script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    

    The info parameter gets sent every time a new component of the YUI is loaded and ready to go. It is an object with several useful properties, the most useful ones being version and name of the YUI component. That way you can write different listener functions that get triggered when a certain component is available using the component names available on the YUI loader page. For example to only include animation on the fly and call an animation method once it is loaded you can use:

    
    <script>
    function doFancyStuff(){
    console.log('animation!');
    };
    function mycallback(info){
    if(info.name === 'animation'){
    doFancyStuff();
    }
    };
    YAHOO_config = {
    listener: mycallback
    };
    </script>
    <script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script>
    YAHOO.util.Event.on(window,'load',function(){
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://yui.yahooapis.com/2.3.0/build/animation/animation-min.js';
    document.getElementsByTagName('head')[0].appendChild(s);
    });
    </script>
    

    This is a very easy way to make sure you can use YUI components before you try to access them.

    [tags]YUI,dynamicloading,deferredloading,performance,libraries,inclusion,javascript,webdevtrick,scripttag[/tags]