Saturday, June 2, 2012

An Example of Graceful Degradation in JavaScript

In continuation of the series, this entry addresses a section in the second edition of Jeremy Keith's and Jeffrey Sambells's book "DOM Scripting: Web Design with JavaScript and the Document Object Model."
In Chapter 5 of the book, there is a syntax error under the section 'Graceful Degradation' which I have fixed below:

Example


The original text missed the closing parenthesis for the window.open call.

The authors have already addressed the error on their website, but I thought I'd write an entry to draw attention to an important topic in the book for which the above example provides an introduction.

Keith and Sambell write that, "web pages that are built using progressive enhancement will almost certainly degrade gracefully." This advocates a layered architecture with the end goal of improving usability. It is a general design principle, and in this context, refers specifically to the separation of content from presentation.
Content must be accessible to all users.

A browser's feature set should not limit the content available to the user. Rather, the content author--the web designer--must design for graceful degradation.
Take, for example, a misguided attempt to load a page in a new window:

Bad example

By setting the href attribute to "#", the web designer prohibits access to the link for users who've disabled JavaScript in their browsers. The desired result here may have been to safeguard against the default behavior for clicking a link, but the 'return false;' statement should address that. A better approach sets a valid href attribute value so the link is always accessible, even if JavaScript or popups are disabled:

Bad example


Progressive enhancement leads to graceful degradation.

Sunday, May 27, 2012

Implement Your Own JavaScript getElementsByClassName method

I have started reading the second edition of Jeremy Keith's and Jeffrey Sambells's book "DOM Scripting: Web Design with JavaScript and the Document Object Model."

 In Chapter 3, under the section "Nodes -> Getting Elements", sub-section "getElementsByClassName", the author suggests implementing a custom getElementsByClassName method for JavaScript engines which do not support it natively.

 Although most current engines seem to support getElementsByClassName, the code snippet provided in the book for the custom method does not work properly. I re-wrote some of the implementation to get the desired result:

function getElementsByClassName(node, classname){
    if(node.getElementsByClassName){
        return node.getElementsByClassName(classname);
    } else { 
        var results = new Array();
        var elemsOnPage = document.getElementsByTagName("*");
        var len = elemsOnPage.length;
        var i;
        for(i = 0; i < len; i++){
            if(elemsOnPage[i].className && elemsOnPage[i].className == classname){
                results[results.length] = elemsOnPage[i];
     }
        }
        return results;
    }
}
The original code did not check if className was defined and used indexOf instead of a string comparison. Any feedback or suggestions are much appreciated and I will try to pass the information to the authors. You can buy the book here at amazon if you are interested in these topics. I highly recommend it.

Monday, April 9, 2012

What to do when bootable USB fails with "Not a COM32R image"

I was getting the message "not a COM32R image" when trying to boot from a USB flash drive created with usb-creator-kde.

I found you can work around this by typing "help" at the boot menu, and then pressing enter. Ubuntu will then boot and you can continue from there.

http://www.linuxquestions.org/questions/linux-mint-84/trying-to-boot-linux-mint-9-from-usb-flash-drive-vesamenu-c32-not-a-com32r-image-829397/