The Other side, the Ugly side - Slumdog millionaire

As statistical evidence suggests, most Indian movies are cheap imitations. Some (moi) feel that they drain the energy and test the patience limits. Bollywood's definition of sensuality is not something 'original'. The industry where dreams are sold has a strange appeal, which I rarely understood. Watching Indian movies is like watching a magician's show, the caveat, you already know the tricks.

But once in a while, when you expect the least, the rabbit is out , a real one which you would watch with child like amusement. Now that is a rarity. What is so intriguing! you tell me.

The "Slumdog millionaire" is one of those rare gems, not a bollywood movie though, it is based on the popular book 'Q and A' by Vikas Swarup. If you haven't read the book, don't miss this one. An uncouth movie with an arcane and predictable ending, but captivating it is. A bunch of lies, but beautiful ones they all are. A story teller's story which I have missed since a long time is what helped me stick. Go find out what is in for you. As the credits started rolling, I was in for another shock, so will you be when you see the name AR Rahman.

==spoiler==
A street rag, goes out to be a winner. Not much help is it, but remember that I am not going to be the one shouting kajol's name on the way out of the movie, Gupt. Wiki would definitely help, but why bother! See what I found on wiki after watching the movie,

"Rotten Tomatoes reported that 93% of critics gave the film positive write-ups, based upon a sample of 135, with an average score of 8.1/10.[20] At Metacritic, which assigns a normalized rating out of 100 to reviews from mainstream critics, the film has received an average score of 86, based on 35 reviews."

Kick starting with hibernate

ORM is no rocket science, it is a very useful tool though. The idea of a tool to help manage transactions and bean bindings is a developer's paradise. So how do we start off? Download hibernate from internet, along with it the not so obvious slf4j-simple-xxx.jar and slf4j-api-xxx.jar files are needed.

Place these in you project class path. The next step is writing the mapping files. The file hibernate.cfg.xml is the one which spells out the all encompassing details like those of the database, connection pool etc. The < entity >.hbm.xml files contain the object mapping information along any operation specific information.

A sample hibernate config xml for MySQL

<?xml version="1.0" encoding="UTF-8"?> <!-- Document : hibernate.cfg.xml.xml Created on : 02 November 2008, 19:31 Author : Kanthi Swaroop Rongala --> <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd"> <hibernate-configuration> <session-factory> <!-- Database connection settings --> <property name="connection.driver_class">com.mysql.jdbc.Driver</property> <property name="connection.url">jdbc:mysql://localhost/hospital_care</property> <property name="connection.username">root</property> <property name="connection.password"></property> <!-- JDBC connection pool (use the built-in) --> <property name="connection.pool_size">1</property> <!-- SQL dialect --> <property name="dialect">org.hibernate.dialect.MySQL5Dialect</property> <!-- Enable Hibernate's automatic session context management --> <property name="current_session_context_class">thread</property> <!-- Disable the second-level cache <property name="cache.provider_class">org.hibernate.cache.NoCacheProvider</property> --> <!-- Echo all executed SQL to stdout --> <property name="show_sql">true</property> <property name="format_sql">true</property> <!-- Drop and re-create the database schema on startup <property name="hbm2ddl.auto">create</property> --> <!-- <property name="transaction.factory_class">org.hibernate.transaction.JDBCTransactionFactory</property> --> <mapping resource="model/resources/Doctor.hbm.xml"/> <mapping resource="model/resources/Patient.hbm.xml"/> <mapping resource="model/resources/Appointment.hbm.xml"/> </session-factory> </hibernate-configuration>

Note that I have placed all my xmls in a different package called model.resources. What about the hibernate.cfg.xml location? We can move it as well.

See the following:

public class HibernateUtil { private static SessionFactory sessionFactory = null; private String CONFIG_FILE_PATH = "/model/resources/hibernate.cfg.xml"; private HibernateUtil(){ } private SessionFactory create() { try { // Create the SessionFactory from hibernate.cfg.xml sessionFactory = new Configuration().configure(CONFIG_FILE_PATH).buildSessionFactory(); } catch (Throwable ex) { // Make sure you log the exception, as it might be swallowed System.err.println("Initial SessionFactory creation failed." + ex); throw new ExceptionInInitializerError(ex); } return sessionFactory; } public static SessionFactory getSessionFactory() { if(sessionFactory == null){ HibernateUtil utils = new HibernateUtil(); utils.create(); } return sessionFactory; } }

Hope this helps in giving you that well deserved push

Dynamic proxy

Every one knows compiled code is type safe and is static. It is not possible to dynamically type the behaviour in such cases. C, C++, Java … they all fit the bill. Java has this interesting feature called Dynamic proxies which promises what it spells. Now how the hell can… well it is not exactly dynamic!. There is a provision for plugging functionality (not just behaviour) at run time without major code changes. So should we really be calling it Dynamic?

As life goes on, let’s see an example. Suppose I have come legacy code/tested code/production code/my own kitchen sink code/tutorial code…Tan(90). The purpose of the code can be as simple as that of a logger. Now I want to impart some extra functionality (not just behaviour), say an actionlistener, whoa!! On a logger!! (Bear with me for the sake of example). Now how would be do that:

1.  Implement the interface
   
2.  Create a wrapper class which uses composition
   

Not bad?, and where would be place this? In our code base of course! Dynamic proxies offer yet another way of doing things.

Think of a utility that creates a wrapper for the interfaces you want and lets you inspect the calls being made. Armed with this knowledge the lone ninja developer can render a killer app, well that is the idea at least. This utility is part of java since jdk1.3 and is called the Proxy.

Starring…coming to your nearest desktop…
import java.lang.reflect.InvocationHandler;
import java.lang.reflect.Proxy;

What exactly are these? Proxy helps you by creating the implementing class alias proxy and InvocationHandler helps you with the inspection/introspection. Proxy needs a set of interfaces and InvocationHandler needs to be hand coded.

Some code snippets

public interface IAppLogger { void logError(String txt); void logInfo(String txt); void logWarning(String txt); } public class GenericInvocationHandler implements InvocationHandler { public Object invoke(Object proxy, Method method, Object[] args) throws Throwable { StringBuilder sb = new StringBuilder(); sb.append(" Calling ---> "); sb.append(method.getName()); sb.append("("); sb.append(")"); System.out.println(sb.toString()); //donothing proxy //return method.invoke(obj, args); return null; } } public class ProxyGen { public Object createProxy(Class[] interfaces, InvocationHandler handler){ ClassLoader cl= ProxyGen.class.getClassLoader(); return Proxy.newProxyInstance(cl, interfaces , handler); } /** * @param args the command line arguments */ public static void main(String[] args) { GenericInvocationHandler handler = new GenericInvocationHandler(new AppLogger()); ProxyGen factory = new ProxyGen(); ActionListener proxyObj2 = (ActionListener) factory.createProxy(new Class[]{IAppLogger.class, ActionListener.class}, handler); proxyObj2.actionPerformed(null); IAppLogger proxyObj = (IAppLogger) proxyObj2; proxyObj.logError("abc"); proxyObj.logInfo("abc"); proxyObj.logWarning("abc"); } }

As the whims of the butterfly go, in a flap of wing the requirements change. We now have a new technique under our belt.

I have seen a generic logging example on net as part of my learning, thank you Google, once again!

Top 25 Geek Blogs

The title says it all.
http://cellphones.org/blog/news/top-25-geek-blogs

HTML - Buttons as Links

UI designers pursue their job with the idea of getting a clean and pleasing finish. That is their job, however this single focus causes them to ignore the periphery. Accessability and Technical realisation take a back seat. A really good designer would provide a solution that is solvable and not some thing which is impossible.

What is an impossible design? Think of cramping a list of names into a horizontal row without any due consideration for 'screen estate', now if anyone does a Ctrl++ to increase the font size what would happen? It is impossible to support all resolutions, but most often the min and max constraints can be frozen, not having them defined causes even more confusion.

What is a solvable problem then! The unfortunate truth about web-dev is lack of standard environment. The browsers, CSS, java script all tend to vary. Removing backward compatibility is a sin, but that is the burden these age old browsers have to carry. The new kids on the block (Chrome), Good luck!.

Nuf of cribbing and coming to point, one of our teams was given this task of submitting forms using links. Now HTML supports form submissions on buttons and images alone! So what did they do, went ahead and used images. Not bad unless you think of resizing text. Like most puzzles which we face, I happened to run into this conversation and started twiddling with the source. Look where we are Maa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* Works on Firefox2+ but not on IE6 :(*/
.link a>input{
background:none;
border:0;
border-bottom:1px blue solid;
padding:0;
height:1.2em;
cursor:pointer;
}

.link a>input:hover{
background:none;
border:0;
border-bottom:1px red solid;
padding:0;
height:1.2em;
cursor:pointer;
font-weight:600;
}


</style>
</head>

<body>
<div class="link"> <a> <input type="button" value="submit"/> </a> </div>
<div class="link"> <a> <input type="button" value="crap"/> </a> </div>
</body>
</html>

Stack Overflow

StackOveflow: A new preoccupation and time killer! Explains a slump in my blogging activities.

Nuf said, the real reason why I fell in love with SO cannot be explained, it has to be experienced. Have a look at this post (warning java script knowledge is mandatory)

Religion for me 2

Now when I read about, people fighting eachother for their beliefs, I was surprised. Infact I was depressed. I feared some of my friends and neighbours would be hurt. So I started paying more attention to the differences. The differences were those I never cared for. They were the most superficial ones. I don't know why and how they became so important, so as usual started asking others. The answer, it was told so in the books.

As a student of logic, I found religion unexplicable. The most difficult thing to comprehend was the irrepressible quest to force ones own ideals on others. Then I found that the books actually force certains aspects on individuals. For me, Religion was no longer a way of life, it was a totalitarian structure with helped individuals intrepret things in many ways. It became a abhorence, more like a power structure or political structure. My knowledge of history didn't help here.

My angst was targeted towards the religious symbols. I started to interpret things in a different fashion. Religion was set out as a means of bringing social order to a society. When these isolated societies started to come in contact, they had to fend themselves and religion became a voice and power. God had nothing to do with it. God, wouldn't even care if people worshipped him or not. Religion says that God is the most powerful one and he saves the people. They don't give out compelling reasons why God would do so, what binds God to carry out the obligation and the consequences of not doing so. God wouldn't be hurt by things I do or don't do. Individuals are incapable of causing any harm, are do they? All they are capable of doing is hurt others.

Does God exists? I don't know, frankly I don't even care. I even wonder, what would the believers of respective religions do, if God himself tells them that they need to change their beliefs, they may call it a bluff/fraud and attack. So what do I want to do, I find some aspects of life appealing, like enjoying a nice laugh/conversation. Showing appreciation towards others and caring for others in my own capacity. I wouldnt' want this silly religion thing to interfere in any of these.

Religion for me

I grew up in a family which observed reverence to GOD. I remember the early days when my mom and dad used to take me to holy shrines and asked me to pray, they infact used to prompt me to ask for blessings!! My normal prayer was 'God, give me good conscience, help me with my studies, I will behave myself'. I am not going to spell out the religious order which my family belongs for it defies the purpose of this blog. When I grew up, I used to see people who never had any consideration to the ideals promoted by my family, I also saw people who went throught the strict regimen. As a kid, I once bychance went into a neighbour's house, they belonged to a different religious order, I saw the people over there uttering their prayers and I followed them with my own words - quoted above. I could see the lady of the house smiling in agreement.

One another time, I happened to step into the prayer room of a different neighbours. I used to enjoy the stories told by the elders and asked them if I could have the book of stories. They told me I couldn't and I wouldn't' understand the writing as well. I asked why? They told me it was the holy book and even they wouldn't touch it normally. I didn't feel bad as I remember my mom warning me with the books in our house. (Technically speaking, those were scriptures, but for a 11 year old they are all books!). The best part of all the religions was the festivals we used to have. We could jump of school and enjoy the sweets. My mother never objected! I even used to help our neighbours with the preperations. The same was the case in our school. I used to observe that some of our teachers/students used to take a special eatery. Once I joined the line just to try that. Later my friends asked me when we converted! I said no!! I just wanted to eat what you guys are having.

For me all the stories had the same moral, all my friends and their parents taught the same. Later when I found what others saw as reigion, I was in for a shock. Will continue rest in my next posting...

Global Singletons, Good and Bad

I am just quoting my opinion someone elses article. The actual article can be found at:
singletons-are-pathological-liars


Why is global bad? Yeah, I know what your are thinking, and no, I am not joking. There are certain languages like JS which are quite powerful and yet have limited ability to comeup with walls (modularity).

Global is bad because:
a. It causes namespace conflict
b. It exposes the state in a unwarranted fashion

When it comes to Singletons
a. The explicit OO way of calling them, prevents the conflicts, so point a. is not an issue
b. Singletons without state are (like factories) are not a problem. Singletons with state can again fall in two categories, those which are immutable or write once and read many (config/property files). These are not bad. Mutable Singletons, which are kind of reference holders are the ones which you are speaking of.

Now if they are designed to act as application cache, you may see a lack of adequate cohesion. So what do we do! Using the pathelogical lies analogy, hide the unpleasant details, in private methods or in interfacing Adaptors (IOC). Make sure that these kinds of singletons are restricted to above sections of code and for the rest of application they become person-nongrata. Finally when you test the application, you won’t see the singletons. Not fool proof, but just makes it a wee bit difficult to accidentally modify things.

If we are exposing state of instance to Singletons in any other way, it is a bad OO design.

Quoting Dalai Lama, “Know your rules well, so that you can break them”.

Appreciation and Irony

Today my mail box is bombarded with mails, all showering appreciation for some work I did last week. Am I happy? yes I am guilable. On the other hand, I am still trying to maintain the vulcanistic composure, I have quite a few good reasons too. After the toil of working for 5 years, this is the first time I am put in limelight! The unfortunate part is that, I did quite a few things in the past which would exceed the current 'achievement', if it is the right word. Most often, my peers and superiors would show their admiration, verbally and sincerely. Today it is different. Lets see how.

I am working for a client, who happens to be contractor who manages third party contractor. I am with one of the third party suppliers. There was an issue, which would affect the whole design framework. I wouldn't spell out the issue in the current post, thats not the point anyway. The proposal for that solved the problem without causing any major design changes. So our client and the actual authority were really impressed. This caused a cascade of mails. When you prepare a recipe, or shoot a nice picture, you would like knowledgable people to acknowledge it. People without the intimate understanding of nuances just follow the crowd. When you see someone buying a camera or tv, they go with the brand. These would seldom try new things, no matter how good they are and this has nothing to do with being acquainted with the product.

The cascade caused the senior management of our company, just jumped the bandwagon. Now, I know some really good tasks carried out by some of our team, I personally did some stuff which overshawdows the current task. The chance of not being able to give a solution was alway lurking around. The difference was, in the exposure I recieved this time. Thinking of all those old times, I just wonder at the ways persistance pays, when you least expect it. This political embargo I am carrying with me probably will get some mileage during my review meetings, but the baggage of my team members staring at me like they used to do when you top your class or play that crucial shot in a field game, is unwarranted.

I just get a feeling that things are overdone in real world, and have to remind myself that even olympians are forgotten

Lost world

Typical applications of ANTLR would be in parsing domain. My first interaction with ANTLR was for a data generation application. We had this system which consume huge xml streams. The schema types were defined via xsi and testing the code for all conditions was inhumane! Even coming up with data for functional flows was painful. So the solution was to comeup with a template of the xml (using schema) and another template for possible datatypes. Parse the template, create a inmemory tree and walk the tree several times (using custom java code). We picked up a random domain value for substitution for each walk and ended up having a comprehensive data sets. There were certain correlation problems though and it was a different story.

I am writing this as I became a bit nostalgic seeing http://blog.centuryminds.com/2008/09/antlr-tutorial-dependency-injection-language/. Err when was the last time I learned something new!?

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

Robust Web Design - part 4 -last

Beware of java programmers in guise of java script programmers

Will you ever use a Japanese interpreter for your trip to China? Just because things appear the same doesn’t mean they are the same. One may understand things, but is it sufficient? I personally feel that there are two styles of programming, sniper style and landmine style. One has precision and the other has visibility. Good programmers use precision, they know what to do and the impact of what they are doing. Others still in the learning cycle, try to apply intution or make assumption. Learning languages helps, learning the purpose of the language is saviour. Ever heard about the ‘Golden hammer anti-pattern’? It is important to know what to use and where to use it.

Java script shares a lot in common with Java, human minds being very adaptive at least perceive so. The reality is different. It is easier for a Java programmer to master java script. All I am interested is, if any effort is invested in that direction.

Philosophical differences between Java and Java script:

1. Java is static typed, java script is dynamic; there is no type checking in place so use of proper naming convention is vital.
2. Java is application language with support for class invariants. Java script was designed to live in web browsers (I know jdk 6, FX and desktop support, but please…). Web browsers are not supposed to support business invariants, they support view (V of MVC). If someone uses Math library in java script, take him into custody.
3.Java doesn’t support closures (not yet till jdk 6). Java script does. In case, you are wondering, Closure is just a set of statements that can be passed here and there (as parameter). It is just a different style of doing things, you know!!
4.Java is inherently object oriented most of the time with a central control structure. Java script on the other hand is functional and event-driven.

One symptom of java programmer not doing his homework, is use of ‘==’/’!=’ in place of ‘===’/‘!==’.

Namespace contamination horrors

A good java script programmer tries to keep namespace contamination to a minimum by using object based style. ‘Revealing module pattern’ and ‘Singleton’ are some examples. We can also get huge performance benefits by reusing objects than recreating them. Magic numbers in code can be kept to a minimum using the above. In fact a good piece of work also show cases, cross browser compatible event handling.

Some references: On java script patterns

We can achieve similar things in CSS by using a unique template id and referring to it in all selectors. This non-semantic declaration is worth its cost. When programming in a large team, these decisions become important.

The class of web 2.0: IE, Mozilla, Opera…

Each of us is unique, that aspect makes ‘each’ of ‘us’. So are browsers. Some prominent aspects I left of earlier are summarised here

Event model

W3C standard even model speaks of three phases capture, target and bubble. Not all browsers support this. So there is a need to hack into the event model and support the least common factor. A custom event model should also prevent function overriding, (usually happens when two different functions are tied to the same event)

Dom model

Not all browsers support Dom functions uniformly. We need to have a custom common wrapper library for the most useful ones and refer to the library. These assets can be reused across assignments.

Xslt wonder

Java script is not the only way to present a view. Certain sections of the user community/application may be reluctant to use scripts. Xslt is the answer for such. It is rich specification with support for reg-ex as well!

AJAX, JQuery, DOJO and others

We discussed the group of java script dissidents; as the world exists we also have a section of aficionados. These guys are those who enjoy the privilege of huge broadband, fast processors and humungous main memory when compared to the past era (read 4 years ago). Writing our own scripts and testing for cross browser compatibility is painful. Why not ask someone else to help us out here? Dojo, JQuery, YUI from yahoo, GWT from Google, JMaki and several others have been targeting these goals.

Robust Web Design - part 3

Third posting

CSS – Domino effect

A home made avalanche vs. a child’s play kit? Is something I used to wonder when I first understood the purpose of CSS. I would never teach CSS to someone who is starting web-design, who cares about consistent styling or the fact that the way content is uniformly laid, ok I was kidding. These things are better learnt by feeling the flare, the flare of inconsistent design, the wrath of the end-user, the harm to ones own pride, the legend of Zelda, the story of war craft…(ok I exaggerated a bit).

CSS even its simplest form (inline style definition) shows its’ merits. Forget about layouts, forget about cross browser compatibility. The amount of code that is reduced (read more coffee breaks) is itself rewarding. “The lesser the code, the fewer bugs” - a well known adage. I used to correlate CSS with Dominos. Remember those videos on youtube. Anyone who designs a large project faces the same challenges. Things rarely go so well when put to practice. So there are certain firewalls, redundancies put in place. CSS is essentially huge collection of domino chips, with provisions for firewalls and redundancies (read CSS selectors). These provisions allow certain chips (rules) to take precedence over others. Each chip (rule) causes an effect (sets style properties). The game is to place the chips and firewalls appropriately. The challenge is the game floor. Not every stadium/court is the same! There are certain tricks and tips to raise our bar, when playing in not so friendly arenas (hacks). These tricks work well for that given court alone and don’t go well with the big picture.

A check list for the techies:

• Learn your selectors


• Negotiate for the most recent browsers and restrict their number (I know I sound like a weasel)


• Overwrite browser defaults


• Negotiate for the minimum window size, especially height of the scrollable content in px. May be critical for java script disabled scenarios. Fluid layouts need specs in ems


• Avoid mixing margin & width attributes. Inconsistencies across browsers rise from the misinterpretation of box-model


• Alternatively; use padding, and/or border styles with width and color matching the background; to achieve the same effect


• Avoid tables for layout. Most accessibility problems rise from this fact


• Seek dispensation for complex UI features. Almost, all known browsers till date fail the Acid tests. It is difficult to achieve standard compliance using non-standard compliant user agents


• Avoid CSS expressions


• Try to build your styles based on the least common selectors


• Test your styles across browsers

a. Test for well formed content in absence of CSS
b. Test for accessibility
c. Test for text enlarge, compact scenarios
d. Avoid classitis and divitis. Use grouped declaration of selectors and pseudo declarations. Divitis may not be avoided always
e. Document the use of extraneous divs (if any being used for layout)
f. Separate styles based on usage pattern i.e. layout, color, font-styles
g. Use a namespace to avoid style-conflict

Horror of hacks

Ever heard of 3 pixel jog? Knowing your browser is of paramount importance. There is a difference in addressing symptoms and addressing the cause. Which one would you prefer? There are a huge number of resources that speak about these. I personally like ‘CSS Mastery’ by Andy Budd and ‘Pro CSS Techniques’ from Apress. I haven’t read others, but I feel one or two books help you realise the game.

Robust Web Design - part 2

Second part of the post...

Russian dolls, Onion skins and the purpose of existence

All boxes look the same, but are they the same? Suppose I have magic wand that with me, that lets me resize things and 100 boxes and if I need to fit all the boxes into a single box; all I had to do is pick two boxes, change the size of one to accommodate other, easily said. What about html mark-up? Well think of a trying to fit a coffin into a food container, sounds funny! The odd feeling is because of the fact that we try to relate containers with content. They have a purpose. Do we know the purpose of html containers?

Valid mark-up

God, created heaven and earth, and W3C dictates web standards. Learning the rational behind standards, helps better appreciation and usage. Two broad level box model types are Block and Inline. There are other finer classifications of course, for example six box models, which are: inline, inline-block, block, table, absolute, and float. W3C also has an html validator application, which notifies us of the violations. Doing early and frequent checks for compliance always helps. Anyone who has stacked up laundry for the weekend knows this.

A compliance, AA compliance, AAA compliance

Inaccessible web sites are politically incorrect, legally liable and may cause potential loss of revenue. Certain technologies are not yet deemed accessible (like flash). Just acknowledging the guidelines while designing the site, makes the developers’ life easier. One can always use this as an excuse for excluding fancy stuff of course! Accessible websites make developers more pragmatic, and avoid gloss.

This works perfectly fine on my machine – Unfortunate reality

Above is a typical complaint from a software developer – a myth – something to be frowned upon. At least I did use it once in my early life as a college pass out. Most of the time, a bad design decision or a weird environment issue causes this. Unfortunately, when it comes to web design, we have a number of variables that make us acknowledge this statement. Did the developer use CSS expressions, did the developer face this on Mac/Windows, what was the browser, what was the resolution, which version of the software is used …. did the butterfly flapped its’ wings, did Microsoft sneeze.

PNG, SVG, Flash

Not every browser is the same, ACID2 and ACID3 tests give more insight into this issue. How can we have standard code when we don’t have standard compliant user agents? - a million dollar question. The answer: is the whole reason why the client hired you. PNGs are not supported on IE, try using transparent shadow affects, you will know. So are several other technologies across several other browsers.

Robust Web Design - part 1

For a change I will speak of Dos and not about Don’ts. Who likes a wailing moron anyway?

On a mark, get…

The first thing to do before we start off into code is to acknowledge and assess ones own competencies. Most often, I see people, who fool themselves into the misconception, that web-design is simple. Well they are not exactly guilty. Most often one can see that HTML is no rocket science. A two day reading of the material is sufficient. Any design can be realized with the knowledge of tables. The challenge is convincing oneself that there are things beyond the obvious, and learning is never obviated (warning: obviate isn’t a synonym of obvious). The litmus test I would use: Ask the developers if they are aware of something called quirks mode.

The first phrase is DOCTYPE and a great leap for design

Neil Armstrong landed on moon, and it was rocket science. Now DOCTYPE doesn’t leave a trail of fire, nor is a achievement telecasted globally. Besides that, DOCTYPE is one part that is capable of setting you on fire and telecast your monumental failure across the group.
The possible DOCTYPE declarations and their effects are well presented in Quirks_mode
My suggestion, use XHTML strict in standards mode. Note that having any comments before DOCTYPE declaration in IE trigger quirks mode. One may occasionally wonder why go to such extremes, the answer is simple: Invest and Profit or Ignore and Pay later. A strict standards adherence guarantees minimal deviation across browsers. ‘Almost strict’ is also desirable though.

Raise and Fall of mark-up – XHTML

The most interesting thing about standards is that they promise huge benefits and deliver little. XHTML is one aspect of standards that raises my suspicions. Just to avoid the notoriety of being an eccentric designer, use XHTML. Who knows, somewhere down the line there may come a day. I bet that Michael Faraday never dreamt of the modern marvels of electricity the day he discovered it.

Good practice, bad practice

When I was young, I had a nasty habit of biting finger-nails. My parents tried hard to convince me that it was bad, I couldn’t' see what was wrong with that. After all, those are my fingers, aren’t' they? Before I tell you how I quit that habit. I got to tell you, how amused I feel when I think about it. To may amazement, when I get to see people writing crappy code around, I don’t' feel equally amused. Narcissistic SOB, I may be.

I most amusing part is the climax, where you confront them. You get to hear interesting arguments in defence. Some almost child like ones: "But the final affect is the same" or "It works, and what you are telling is not very straight forward". Some rather thoughtful ones: "It’s already tested". Seldom some arrogant ones: "Why doesn’t' he/she do it". Most of the times, the final result is a compromise. The times one sees beautiful code, one can assume that there is egoistic SOB down under. I like these guys. They write code as if they have discipline imbibed into their cerebral cortex, only to find that they can be as sloppy as your neighbour’s cat.

Now don’t' get me wrong. I know that people learn from mistakes. Adaptability is a virtue. The SOBs have had their share of misgivings. Remember the scene from movie MATRIX where neo jumps of the building! no one jumps the first time, not even the ONE. Taking shortcuts harms, but shortcuts are supposed to be short. It is like driving through city center. When you are new to the city, don’t' take shortcuts. Keep to the main road. That is the greatest shortcut. People tend to ignore the greatest shortcut of all, do your research, don’t' wait till you see the river, find out where the river is even before you reach.

A wise man once said that there are no dumb questions. Let me blabber about what I feel about "The final affect is the same". Well is it, is it really. We are forgetting the fact, that two months down the line, when some miscreant changes requirements or finds a new defect. I wouldn’t' like to waste my energy. Nor would I like my brotherhood of #£$$% (fill your own stream) to suffer. Most seriously, I am willing to spend two days right now than slog late into nights for months, later on. The final affect is on you dear, and you effect the affect.

For, "It works, and what you are telling is not very straight forward". You are damn right. So does walking. Why learn cycling or drive a car or take a flight. Knowing things is difficult, but when it can give some real soul satisfaction. Ask any teenager fiddling an engine. "It’s already tested" is the most difficult one to justify. The only excuse I have is that it makes you fall out of habit. For "Why doesn’t' he/she do it", trust me this isn’t' a flight to Moon, even that was repeated. (Or is it?)

The only difference between the nutcases who organise their stuff with the rigmarole of a fascist and the rest of the world is the same one between those willing to till the soil, creates a fertile bed and between other gatherers. All we are speaking of is some interest, planning, discipline and investment.

When Spring Comes...

Lost in the wind, lost in the thought, not alone am I?
Equally lost are the wandering leaves and cold nights;
Oh dear bright flowers that I see around, tell those friends,
That I miss their sight. The bright sunny days have stolen my sleep.
My slumber time dreams are now just a slimmering gleam.

CSS Magic and Mayhem

Cascading is wonderful thing. It can be fun, like the old times when you used to play with toy trains. It can change colors and act bitchy too. Most CSS designers take short cuts, infact many swear by googling around. This argumentative attitude doesnt' foster creativeness. I strongly believe that we should google around for ideas, not for doing homework! After reading a couple of books here and there, I began to appreciate the ingenuity of the UI designers and the hurdles they face.(I am not yet into CSS, so please excuse the seclusion).

CSS, is as a template for styles. Any aspect of software has three major features at a very high level - 1.) Static 2.) Functions 3.) Behaviour. UI is no exception. Static aspect is the aspect which is fixed in a completed application. It is essentially code that executes. Functionality is the purpose for which the code is written. Behaviour speaks about the variations in which the Functionality is achieved. In W3C UI, html takes the static aspect. Being an UI application, we desire to have loads of eye-candy; images, fonts, flash, gradients, sounds etc. This eye candy needs to be consistent across the application. Who would like to have an application in which a page footer with the same content shows up differently in different pages. Behaviour is affected by the ability of the User agents like availability of scripting, browser version etc.

The CSS best practices include avoiding Classitis, Divitis, spacer-gifs. There are other desirable features that make a developers life simple like; using strict DTDs, overriding browser defaults, using liquid/fluid layouts.

When it comes to managability, I find two very intriguing factors.
1.) Design themes
2.) Seperate concerns, into reusable classes or css scripts for colors, fonts, layouts
3.) Create themes for the design
4.) Negotiate the exceptionally difficult UI features with the client. An example would be interweaved style usage: " Role: Consultant Organisation Charing Cross Hospital
for such instances negotiate for a single uniform style for content and try to move the enhancements to Java script.

As always, I will try to include a small CSS snippet for toying around.
#########################################################

Html content

<!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 name="eGMS.accessibility" scheme="WCAG" content="AA" />
<meta http-equiv="Content-type" content=
"text/html; charset=us-ascii" />

<title>This is Sample 1</title>
<link rel="stylesheet" type="text/css" href=
"../css/samplecss.css" />
<SCRIPT language="JavaScript" SRC="../js/footersetting.js"></SCRIPT>
</head>

<body>
<!-- information tag is used to differentiate footer from main content -->
<div id="information">
<div id="banner">
<h1>Banner is being shown</h1>
</div>

<!-- horizontal navigation -->
<div id="horiz_nav">
<ul>
<li>horiz_1</li>

<li>horiz_2</li>
</ul>
</div>

<!-- main content wrapper -->
<div id="school">
<!-- main content -->
<div id="book">

<!-- primary content -->
<div id="rhymes">
I am a little tea pot, Short and stout, This is my CSS,
Please take me out!
</div><!-- secondary content -->
<div id="questions">
Why did johnny eat sugar? Why did London bridge start
falling and when is it going to break its fall? When did
rats learn to repair clocks? Why didnt' jack and jill
call 999?
</div>
</div>

<!-- vertical navigation -->
<div id="vert_nav">
<ul>
<li>vert_1</li>

<li>vert_2</li>
</ul>
</div>
</div><!-- main content wrapper ends -->
</div><!-- information ends -->

<!-- footer -->
<div id="footer">
Thats' all folks!!
</div>
</body>
</html>
##################################################################

Sample CSS

/* undoing browser defaults */
:link,:visited {text-decoration: none;}

ul,ol {list-style: none;}
h1,h2,h3,h4,h5,h6,pre,code,p {font-size: 1em;}

ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin: 0; padding: 0;}

a img,:link img,:visited img {border: none;}

address {font-style: normal;}
/* undoing completed */

#banner h2 {
float: left;
clear: both;
color: #006;
width: 100%;
}

#horiz_nav {
float: left;
clear: both;
width: 100%;
}

#horiz_nav ul {
background-color: #099;
}

#horiz_nav ul li {
display: inline;
}

#school #book {
float: right;
clear: right;
color: #606;
width: 75%;
}

#school #vert_nav {
float: left;
clear: left;
color: #606;
width: 20%;
}

#school #book #rhymes{
float: left;
clear: left;
color: #698;
width: 48%;
}

#school #book #questions{
float: right;
clear: right;
color: #698;
width: 48%;
}

#footer {
float: left;
width: 100%;
clear: both;
text-align: center;
position: relative;
bottom: 0%;
left: 0%;
}
Above is supposed to work independent of browser being used. Anomalies would be there but changing the defaults is easier in CSS structured in this fashion, If one wants to have a close look at the way the boxing is done use the following
################################################

Samplecss.css with boxes

/* undoing browser defaults */
:link,:visited {text-decoration: none;}

ul,ol {list-style: none;}
h1,h2,h3,h4,h5,h6,pre,code,p {font-size: 1em;}

ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin: 0; padding: 0;}

a img,:link img,:visited img {border: none;}

address {font-style: normal;}
/* undoing completed */

#banner h2 {
float: left;
clear: both;
color: #006;
border-style: dotted;
width: 100%;
}

#horiz_nav {
float: left;
clear: both;
width: 100%;
border-style: solid;
}

#horiz_nav ul {
background-color: #099;
border-style: solid;
}

#horiz_nav ul li {
border-style: solid;
display: inline;
}

#school #book {
float: right;
clear: right;
color: #606;
border-style: dotted dashed;
width: 75%;
}

#school #vert_nav {
float: left;
clear: left;
color: #606;
border-style: dotted dashed;
width: 20%;
}

#school #book #rhymes{
float: left;
clear: left;
color: #698;
border-style: dashed;
width: 48%;
}

#school #book #questions{
float: right;
clear: right;
color: #698;
border-style: dashed;
width: 48%;
}

#footer {
float: left;
width: 100%;
clear: both;
border-style: solid;
}

RCP Ideas

Enterprise applications are typically not meant for every one. The users targeted are specialized and knowledgable. The application providers can exploit this aspect and deliver optimized systems for this section of users. Rich UI and client side processing are the exploitable aspects. The problem of connecting client systems to servers is still open. Writing custom socket code or coming up with custom user agents are some solutions. If re-inventing the wheel is not your cup of tea, then the following is for you.

The idea is to use Http unit to communicate with web-apps. Httpunit is developed with the intention of testing webapps on the lines of junit. The interface functionality is tested here. A brief overview of Http unit before we dwell into the facts.
1. The core of http unit is WebConversation, This is equivalent to the application browser window.
2. The requests sent are WebRequests, these carry parameters with them. In webapps, Form submission is one example of request submission.
3. The responses are sent by WebServer, these are WebResponses

WebConversation defines a context within which WebRequests and WebResponses are exchanged. These form a conversational state.

Enough with httpunit, we will look at the possible strategies for RCP UI.

Well designed webapps are typically layered. Presentation layer is the one which feeds the UI. We can retain a simple html based pres layer, without any client validations and build an RCP presentation model on it.

Or, We can do away with the Presentation layer and straight away handle web conversations from the RCP code.

I personally prefer a html layer, It ensures a proper seperation of concerns. Note that this UI need not adhere to the W3C standards. It need not even look visually appealing, (read no complex CSS). No need to bother about client side validations either. (With the advent ot scripting to desktop apps from jdk6, we are seeing new evolutions. We now have new areas like Ajax, flash to add all the gloss).

This being said the problems of managing versions and providing updates to application clients forces new processes to be setup. One of the major benifits that a system provider would get are related to resource usage. If we design for application models on client end, we can save memory and processig speed on server side. Light weight sessions and complex algorithemic computations can be delegate to client. The server would be a data provider and a access provider.

How popular RCP is going to be, only time can tell