Working with non-semantic elements

Most often, when a web page is putforth for review, the reviewers look for typical 'classitis', 'divitis' problems. Use of pseudo selectors needs more in depth inspection. Use of non-semantic entities are most often frowned upon. Infact the foremost guiding principle for a good html page, is to leverage the page content for styles (and not styles for content). Atleast that was what I thought of till date.

Recently when coding for a tricky piece of java script behaviour. I happened to come up with a simple solution that violated the guiding principles. The exact problem is irrelavent, but just to satisfy the curiosity, it has something to do with footer behaviour which varies with the page content. The crux of the solution was to rely on certain invariants on screen (images in this case) and position/scale/stretch my footer. What appealed the most was the idea of introducing non-obtrusive style invaraints at a template level and use them as guides to setup the behaviour rest of the page.

How about having an 'gif' border around the content or a absolute/fixed positioned images? Most of the time there may be some, if they don't why not introduce an element of transparent gif (not for spacing purpose). The intention is to simplify the javascript part, especially computing offsets and widths becomes a lot more easier. Just to clarify, this idea/pattern suits only code relevant to behavioural aspects. (The presentational aspects should be in CSS alone).

The next time, someone asks me to align textboxes or labels (from a behavioural point), I will definitely consider this approach.

Google Chrome and abberations

Chromes on the face of it looks great! Today while trying out the POC for a problem we ran into, I encountered this wierd fact. Chrome is still in beta phase, and there is a long learning line anyway.

My guess: I can only say that, !important rules are ignored on stylesheets linked using js.(no speculations!)

Without much fuss, some code snippet. Sorry for not being able to host this on a site

The html block

<?xml version="1.0" encoding="UTF-8"?>
<!-- 
    Document   : longdiv
    Created on : 06-Sep-2008, 09:59:00
    Author     : kanthi swaroop
        
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>TODO supply a title</title>        
        <link type="text/css" rel="stylesheet" href="../css/demo.css"/>
        <script src="../js/adjustLayout.js">            
        </script>
    </head>
    <body>
        <div id="header">
            Some space
        </div>
        <div class="outer">
            <div class="left">
                <span id="long">
                    longtext____longtext____longtext____longtext____longtext____longtext____longtext____longtext____longtext____longtext____longtext____
                </span>
                <span id="short">
                    The plain stuff
                </span>
            </div>
            
            <div class="right">                
                DON'T__BLOCH__ME____DON'T__BLOCH__ME____DON'T__BLOCH__ME____DON'T__BLOCH__ME
            </div>
        </div>        
    </body>        
</html>

There are two files, demo.css and override.css, using js we attempt try to include the override.css when necessary. override.css applies only to standard compliant browsers.

demo.css

/* 
Document   : demo
Created on : 06-Sep-2008, 10:06:20
Author     : kanthi swaroop
Description:
This stylesheet is supposed to be overridden in special cases via java script.
*/

* {
    margin : 0;
    padding : 0;    
    color : #000000;
}

/*

#long{
display:none;
}

#short{
display:block;
}

/*
*/
#long{
    display:block;
}

#short{
    display:none;
}

root, div { 
    display: block;
    border : 1px solid #000000;    
}

body {
    font-size: 62.5%;
    font-family: Arial,Helvetica,sans-serif;    
    height: 100%;
    background-color: #9999ff;        
}

div, span {    
  font-size: 110%;
}

span {
    background-color:orange;
    display: inline;
}

body, .outer{
    margin: 0 auto;
    width: 1024px;
}

.outer {
    position: absolute;
    height:100%;
    overflow:auto;
    background-color: #999999;
}

.left {
    float: left;
}

.right {
    float: right;
}

.left, .right  {    
    /*height: 10em;
    */
    height: auto;
    width: 49%;
}

override.css

/* 
    Document   : override
    Created on : 06-Sep-2008, 11:12:35
    Author     : kanthi swaroop
    Description:
        The following are to be overriden only for standard compliant browsers.
        I know, I am using !important.
*/


.left, .right {
    width:100% !important; 
    clear: both !important;
    
    _width:49%;
    _clear: none;
    
}

Java script

Some java script.

/* 
 The script part
Author: kanthi swaroop
 */
window.onload = function adjust(aEvent){
    aEvent = aEvent || window.event;
    var newLink = document.createElement("link");
    newLink.href = "../css/override.css";
    newLink.rel = "stylesheet";
    newLink.type = "text/css";
    
    var hasChildren = document.body.hasChildNodes();
    if(hasChildren) {
        document.body.insertBefore(newLink, document.body.firstChild);
    }
    else {
        document.body.appendChild(newLink);
    }
    alert("Bye");
};

Questionning questions - Rashmon

Most often we hear people asking for concise and compact answers. This is only acceptable when the two parties share a common understanding of the context. Due to the inherent ambiguity of the natural languages is the cause of the problem. More so, if one of the parties tries to play with words (showoff!) and other ignoramus obiliges.

An example of this is the popular illustration: "Panda eats, shoots and leaves" vs. "Panda eats, shoots, and leaves". The difference is that, of a panda doing what pandas do, or a clinteastwood western classic.

More dangerous are the glitches that show up when some one with a uncanny knack for finding loopholes (lawyers!) comesup with a ridiculous conclusion that wasn't even half expected. This makes, usage of simple language and active voice, of paramount importance. I have recently read a joke to illustrate this:

David and John were walking by a church. David suddenly had one of those electrifying moments and popped a question to John.
David: "John, is it ok to smoke and pray at the same time".
John: "Why don't we ask the preacher."
David: "Ok" (goes into the church)
David: "Father, Is it ok to smoke while praying to God?"
Priest: "Son, such things are unacceptable while praying"
(David comesout and tells John)
John: "Are you sure about that? I will go and ask once again" (John goes in)
John: "Father, Is it ok to pray when we do other things in life"
Priest: "Son, It is the most ideal thing to do"

(Moral: Ask the right questions to get the right answers)

In the movie "Rashmon" the director Akira Kurosawa, showcases the human eccentricity in narration and interpretation of the events. Life would be a better place, if every interviewer/questioner deals with fact finding than interpretation.

Pleasant surprises

Every one who has worked with UI designers (people who swear by Fireworks and Photoshop) know how insolent they can be. We laymen, find it difficult to appreciate how much effort has gone into a button or some other image, until we put things side by side. Programmers don't care for the gloss that shows up, designers and end users do. So do sales folks. Never ignore the fact that it is the cream that sells the cake and not the crust.

When you see a button, you should feel like clicking it. Not like the button images that the current template uses. A button bulges up, takes a large font and has a finish that pops out. Like Disney’s animal pictures, with huge eyes and soft texture. These are achieved by tinkering around opacities, gradients, crops and colour combinations. Sounds simple, next time try going for a round of shopping with a bunch of girls. You can appreciate the nuances (rather forced to).

After all, we are not Borg, we do have individual tastes. That said, the next time you go shopping dont' forget to check the cakes' crust as well!

Some java script snippets - Using Event Handler - part 2

Earlier we saw how to define a cross browser compatible event handler, we will see how to use it. Three different styles are demonstrated

Note: Copy the code into notepad or someother custom editor for more legibility

/**************************************************************************
Sample Event Listener definition begins
**************************************************************************/

var Handles = function(){
    
    var test1 = function (aEvent){    
        alert(1);
    }
    var test2;
    return {
        test1: test1,
        test2: test2
    }
}
Handles.prototype.test2 = function test2(aEvent){
    alert(2);
}
var HANDLES = new Handles();
/**************************************************************************
Event Listener definition ends
**************************************************************************/

function init(){
    cleanup();    
    /* Three different ways to register functions, 
       the event Type and function's name are parameters  */
    // test1 is defined in HANDLES
    HANDLER.registerEventHandlerWithType("load", "HANDLES.test1");
    // test2 is added as prototype later on
    HANDLER.registerEventHandlerWithType("load", "Handles.prototype.test2");    
    // cleanup is a globally visible function
    HANDLER.registerEventHandlerWithType("unload", "cleanup");
}

function cleanup() {
    /* Three different ways to unregister functions */    
    HANDLER.unregisterEventHandlerWithType("load", "HANDLES.test1");
    HANDLER.unregisterEventHandlerWithType("load", "Handles.prototype.test2");    
    HANDLER.unregisterEventHandlerWithType("unload", "cleanup");
}

The html code for the above contains

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- 
    Document   : test2
    Created on : 03-Jul-2008, 11:24:42    
-->

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="../js/File1.js">            
        </script> 
        <script type="text/javascript" src="../js/File2.js">            
        </script>
        <script type="text/javascript" >
            init();            
        </script>
  </head>
  <body onload="observeEvent(event)" onresize="observeEvent(event)">
    <div>
        Me
    </div>
  </body>
</html>

Some java script snippets - Event Handler - part 1

This is the first part of a sample event handler. We will see the declaration here

Note: Copy the code into notepad or someother custom editor for more legibility

     var HANDLER = new EventHandler();
/**************************************************************************
Event Handler definition begins
**************************************************************************/
/* Cross browser event handler, that allows multiple handlers to handle the event */
function EventHandler () {    
    /* This is an array of eventHandler arrays, essentially a hashMap 
    defined using associative arrays.
    Example content at run time would be
    events["onload"] = ["adjustDiv", "centerAlignText"...];
    where righthand side is a array of event Handling functions
    */
    var eHandler = this;
    eHandler.events = [];
    
    function getHandlersForEventType(aEventType) {
        /* if this is the first time we are listening the event,
        create handlers array
        */        
        if(eHandler.events[aEventType]==undefined) {
            eHandler.events[aEventType] = [];
        }
        return eHandler.events[aEventType];
    }
    
    function detectEvent(event) {
        // grab the event object (IE uses a global event object)
        event = event || ((this.ownerDocument || this.document || this).parentWindow || window).event;
        return event;
    }
    
    function registerEventHandlerWithType(aEventType, handlerFnc){        
        var handlers = getHandlersForEventType(aEventType)
        handlers[handlerFnc] = handlerFnc;        
    }
    
    function unregisterEventHandlerWithType(aEventType, handlerFnc){
        var handlers = getHandlersForEventType(aEventType);
        /* if this handler is not registered*/
        if(handlers[handlerFnc]==undefined) {
            return;
        }    
        delete handlers[handlerFnc];    
    }
    
    function handleEvent(aEvent){
        aEvent = detectEvent(aEvent);        
        var handlers = getHandlersForEventType(aEvent.type);
        var diagMsg = "";
        for(var handle in handlers){     
            // construct the method call from the function name and pass parameter            
            eval(handle)(aEvent);
        }
        /* stop the event bubbling now, this ensures browser compatibility */
        if(typeof aEvent.cancelBubble != undefined){            
            // IE event model
            aEvent.cancelBubble = true;
        }        
        if (aEvent.stopPropagation){            
            // Gecko event model
            aEvent.stopPropagation();
        }
    }
    
    return {
        /* public methods that are being exposed */
        registerEventHandlerWithType: registerEventHandlerWithType,        
        unregisterEventHandlerWithType: unregisterEventHandlerWithType,
        handleEvent: handleEvent        
    }
}

/**************************************************************************
Event Handler definition ends
**************************************************************************/

function observeEvent(aEvent){    
    HANDLER.handleEvent(aEvent);
}

How to post code?

Markup tags are detected using '<' and '>'. So these are skipped when encountered. This is the reason we don't see content making use of these symbols (well-formed xml content for example). Indentation is another aspect. Luckily the '<pre>' tag comes to our rescue. If we want to paste some code, we need to escape the '<' and '>' so that they are rendered properly. Rather than doing it manually, there are certain resources that help us accomplish the same. Certainly we can write our own custom code, another lazy way I found out is to use the following

http://www.bware.biz/default.htm?http://www.bware.biz/DotNet/Tools/CodeFormatter/WebClient/CodeToHtml.aspx

http://www.stanford.edu/~bsuter/js/convert.html