See you there….

I am leaving this blog up, cause its linked from quite some places.

Download and Demo on the jQuery page.

1. Start with w3schools

There is no better place to begin than w3schools. I used it myself, and I still go there every now and then to reference something or the other. The tutorials are designed for the absolute beginners and explain every section in just the right way. It’s the first place I recommend anybody to start with who wants to learn about web development. Considering that web development in today’s world is not as vanilla as it used to be - I would begin with the following on w3schools:

• HTML -> DOM -> CSS -> JavaScript

HTML is again the most obvious. Knowing the DOM is next as you will probably be using it the most in JavaScript. CSS is critical to know because most web 2.0/AJAX stuff requires you to manipulate CSS via JavaScript.


One thing to remember here is not to do any assignments other than the ones present on w3schools. Even looking at any assignments beforehand will make you think about them and you may end up skipping some topics, which can come back to haunt you later. Trust me on this one.

2. Create a website

Yeah. There is no better way to learn than to start experiencing. So, I would recommend you make a simple site. Nothing fancy. A simple, 2 column  website with links on the left and content on the right - and do this using only CSS and HTML. No JavaScript should be used here and don’t use tables for layouts.

3. Mod the website with JavaScript

Make the links on the left fade in and fade out. This will enable you understand CSS manipulation and JavaScript timeout features. From this point onwards everything in the site should be added via JavaScript. Creating almost every single HTML element in the page using JavaScript will enable a good hold on DOM parsing, attaching events, etc.

4. Get the Holy Grail

Time has come to get the holy grail of web development. Install Mozilla Firefox followed by Firebug. Open up the website you just created and use Firebug’s inspect tool to inspect your HTML code. Put a breakpoint in your JavaScript code and see how the DOM looks. Use watch expression to check out how JavaScript behaves.Firebug is probably the best way to understand what you learnt in Step 1, 2 and 3. It will provide you with details of how the DOM looks like, how JavaScript behaves and what objects contain which attributes and properties.

5. Back to w3schools

Go back and learn the AJAX tutorial. Understand how it works across browsers. Use Firebug to see how request are made in the background and how the response comes back. Here you may slow down and also look at how HTTP headers look like. If you want to indulge deeper, you may as well read more about them.

6. Convert your website into an AJAX powerhouse

Whatever you designed in step 3, should now be AJAX-ified. Convert all link clicks to load content on the right pane using AJAX. No page refreshes and show a proper loading icon when an AJAX request is made.

7. JSON

This may not be an absolute requirement, but I would say you learn it right now. JSON is the preferred response type in most AJAX calls, so understanding how it looks and behaves is extremely important from a long term perspective.Convert your AJAX responses from Step 6 to return JSON objects. Parse them and show your content. modify your content to have multiple headings and paragraphs.

8. More Assignments

This is the time I would really start doing some hardcore coding. I usually ask people to extend on what they have already done:

• Create a fluid three column layout with a header and footer - which works across all browsers.
• Put some links in the left panel, the right panel and the footer.
• Create navigation controls in the left panel using unordered lists and CSS.
• Use JavaScript Timeouts and CSS to animate the navigation panel.
• Make all clicks on the navigation panel load complex data through AJAX and JSON.
• A search box at the top of the navigation panel should filter the links in the panel, as you type.
• Clicking any links in the footer should open a popup inside the same page - positioned dead center of the page. Turn the background gray. - ala Lightbox type effect. No popup windows.
• Clicking any link on the right panel should open actual popup windows.
• Try loading content from a different domain using AJAX calls (Cross Domain Issues and Scripting).




9. Pick up a JavaScript library

The last thing is to pick up a JavaScript library, if you are allowed to ;). In my case the requirement was of jQuery (thankfully). Check it out and then redo all the previous steps using the Javascript library/framework.

As of now, I don’t know how effective this would be to get somebody started with. I will keep updating this post, each time I think that I shouldn’t have done that.

Update: As Alex mentioned in the comments, the following approach that I have mentioned is actually obtrusive.

I was going through this excellent blog post explaining a simple way to avoid bot based spamming.

Well the idea is relatively simple: Add CSS-hidden fields that a user won’t see, but a spam-bot will fill. Then using php check if they were filled, and if they were: block the spammer!

The idea by itself is good, but then I thought that it won’t be very hard for bots to filter out such hidden fields. As a matter of fact, input fields which are hidden or even those which have negative margins are not all that difficult to detect and skip.

Then I thought, instead of hiding the field, it will be difficult for a bot to skip/filter a field which sounds very authentic, is actually visible, but should validate to not hold a value? A user would read the label and understand that he/she is not supposed to enter anything in this field, but a bot would go ahead and fill out the field.

So a basic form would look something like this:

<form id="submitForm" method="post">
    Name: <input id="username" name="username" type="text" />
    Email Id: <input id="email" name="email" type="text" />
    Please do not enter anything in this field: <input id="emailID" name="emailID" type="text" />
</form>

I absolutely love those auto-completing, always-remembering launcher applications. I have been using them for ages now. It has also made its way into Vista’s start menu, but there is so much more that a launcher should do.

The first launcher application that I used, and still do is LSXCommand. Its a module for the alternative windows shell called LiteStep. I will not write about it here because it requires you to ditch your windows look and feel and switch to LiteStep. So, when I did not have that option, I started my search for an alternative windows only application which is fast, simple, takes really less real estate and well - does the job.

I came across Launchy, used it for quite some time, and its great. It even made me an alt+space junkie. Launchy indexes the start menu, or any other folder I want, with whatever extensions I want as well.

It looks amazing, has a lot of skins available and we have the option to add custom commands. After using it for a while, I realized that Start Menu indexing is something that I hardy used. It kinda makes Launchy eat more resources while most of my work was around my custom defined commands.

As always when I started getting bored of Launchy, I started my search again and came across SlickRun. An even more lightweight launcher which is a lot similar to LSXCommand.

It does everything that other launchers do, but does not index any folders - which is precisely what I was looking for. Custom commands can be added as MagicWords, which can take parameters for dynamic content as well. I configured it to my alt+space hot key, added all my magic words and have never since looked for another launcher.

So, if you prefer the keyboard over the mouse, and are constantly using the Vista Start Menu or the good old Windows Run option, give one of these launchers a shot. You will absolutely love it!

Next up: Organize your files with a better file manager.

The following things top my list of “remember-or-get-hurt”:

1. Always specify a DOCTYPE

   I cannot tell you how much pain and misery not doing this would cause your development process. At one point we ended up writing completely different sets of CSS files for different browsers! - all because someone (read me) forgot to mention the document DOCTYPE. Here is a link to an ALA article if you want to know more.

2. Never code for Firefox

   Okay this is a personal thing. Thanks to Firebug, we love developing on Firefox. Its incredibly easy to work on and it probably has the best development tools to boot. YSlow, dozens of FireBug extensions, Live HTTP Headers, etc etc. All said and done, you still need to support the other evil - Internet Explorer. After all, 70% of the world still uses it - don’t ask me why!. During development, it is wise to have both Firefox and IE running. I know a few CSS dudes who would never ever develop just for Firefox. They will always have IE, Firefox and Safari open at all times. It’s always easier to check first than fix later.

   Here are some tools that will ease your development on IE: (Just Google them for links. Too lazy. ;))

   • Debug Bar
   • Web Inspector
   • IE HTTP Headers
   • IE Web Developer Toolbar
   • Firebug Lite
   • Visual Studio Debugger
3. Hacks are quick solutions, but better if avoided

   Hacks. Well usually this means - workarounds. It sometimes also means, things you need to do to please the evil goddess of IE. By now there are about a gazillion different hacks to make things work in IE - give or take one or two. They all work, but make maintainability a major issue. Moreover you never know IE8 could actually be good when it comes to standards. Or if you do use browser specific hacks, please make sure you put appropriate comments and don’t just write understandable code. :p

4. Don’t use AJAX everywhere

   XHR calls and funky loading animations add that web 2.0 zing to your application, but don’t overdo them. With AJAX/XHR come a lot more lines of code in order to implement bookmarking, the back button, the page refreshes, etc etc. XHR will definitely speed up your page loads and will definitely make it look cool - but make sure you keep important pages of your application with linkable, bookmarkable URLs. And it would be better if doing this does not require a lot of JavaScript code.

5. Graceful degradation

   This is another thing that a developer should keep in mind. What would happen to my application if the browser does not support JavaScript - or rather, if the user has disabled JavaScript? Agreed, this is a hard-to-come-by scenario and probably anybody using a web 2.0 website would never have JavaScript disabled, but it is something one should spare some time on. Your application should at least be “readable” when JavaScript is disabled. It need not be fully functional. Most new age JS frameworks are unobtrusive and degrade gracefully, but make sure your code does too.

6. Not everybody is on freaking Broadband

   Yes, you heard it right. Don’t bloat your pages. Don’t clutter them. And for heaven’s sake don’t put videos, flash animations, big images all on one page. People designing websites which expect heavy traffic, go miles to ensure that their pages load fast. HTTP requests are minimal, external JS and CSS files are minimized. Interfaces which are light, load fast and are free of clutter are always better - even if this means sacrificing that cool gfx or Flash/JS effect. Yahoo’s performance benchmarks and YSlow are good to start with.

7. Ditch support for IE6

   This is my personal favorite. Just decide not to support IE6. It’s release was probably the biggest mistake anyway. Supporting it will result in countless hours of frustration and an end result which will be less than satisfying. I know a lot of people use IE6, but as I said, I personally will never build support for it. And I am not the only one. (I know it ain’t a very bright idea while developing commercial web applications, but hey!, a developer has to have his say at some point ;))

These were some very basic points to keep in mind while making a web based application - all on the client side though. Part II will feature things that one needs to take care of on the server side. Keep watching this space.

I came across Sleipnir, and the thing that immediately caught my eye was support for both the Internet Explorer Trident engine as well as the Gecko engine used by Firefox. This effectively gives you native support for both engines, without actually using an extension like IE-Tab for Firefox.

But the question is what else does this “new” browser bring with it? Or rather, what are the features that make this browser stand apart? Once you install the browser and run it, you will be surprised as to how strikingly similar Sleipnir is to the IE6 interface. That BTW, sent chills down my spine. But, that is a different story.

The interface

The second thing that one notices while using this Japanese browser is the text. The English looks pretty messed up, and at times it is really hard to understand what a feature is supposed to do. Documentation is hard to find, and certain things are just not clear enough to make sense. There is an extensive support section available now, but as I said, not very helpful. A lot of effort is put in, but the English needs a lot of tweaking.

The browser looks to be customizable in every possible aspect. Themes/Skins and plug-ins are available on the home page and in all it doesn’t look half bad.

The thing I wanted to check out personally was how good is this browser when it comes to web development. Is there something like Firebug? A firebug like tool integrated alongside support for IE would totally rock. And quite surprisingly there is an extension called Hawkeye available for download from the Sleipnir plug-ins download page.

Sleipnir's web dev tool

It is no Firebug killer, but provides enough features for you get started with. Apart from the most obvious firebug like options, some features like the various display options (color information, size of divs, etc) are nice and really helpful to have.

Sleipnir is a good browser. It has a long way to go before it is accepted in the English market, but it definitely has the goods to be a great browser. For the time being though, I am not thinking of switching away from the comfort of FireFox or the better - Opera.

While working on an assignment, I came up with this small, useful plugin which would allow you to track changes in your forms. The idea was to ensure that a user can only save changes, if he or she has made any. Once a form is loaded, with the previously saved values or the default values, any changes made to the form fields will become part of a list which will be passed on when the form is submitted.

The basic usage is as follows:

On document ready, add “trackChanges” to the form you want to be tracked:

    // only events
    var oldvals1 = $('#form1').trackChanges({events: "change blur keypress keydown click"});
 
    // all the options
    var oldvals3 = $('#form3').trackChanges({
          changeListName: "form3List",  // changed field names will be in this list (if not given defaults to {formname}TrackList)
          events: "change blur keypress keydown click",  // events on which the tracking should occur
          changeListVisible: true, // should the change list be visible
          changeListClass: "custom" // css class applied to the change list
    });

You can download an experimental/alpha version of the plugin here. I have tested it on Firefox 2/3 and Opera 9.5+ only. So all the IE users let me know if you find any bugs (I am sure there will be ;)).

You can check out a dirty demo here.

Let’s disect the plugin then, and since this is my first jQuery plugin, you may as well treat this as a small how-to-make-a-jquery-plugin tutorial.

Objective: Track changes made to all the fields/elements which are part of a form. Make sure that when the form is submitted, a list of changed field names is sent to the server.

To begin, let us consider a page with a form in it:

<form id="form1" style="border: 1px solid gray; padding: 20px;" method="post">
<input id="textf1a" name="textf1" type="text" value="Text1" />
<input id="textf2a" name="textf2" type="text" value="Text2" />
<input id="textf3a" name="textf3" type="text" value="Text3" />
<input id="textf4a" name="textf4" type="text" value="Text4" />
<input id="rd1a" name="rd" type="radio" value="1" /> rd1
<input id="rd2a" name="rd" type="radio" value="2" /> rd2
<input id="c1a" name="check1" type="checkbox" value="OFF" />
<select id="country1a" name="country" size="1">
     <option>India</option>
     <option>USA</option>
</select>
<input id="submitButtona" name="buttonSubmita" type="submit" value="Submit" />
</form>

Now, as we see here the form is pre-populated with some values. These values constitute the “old values”. When the form is loaded and if its marked to be tracked, all these field values will be saved into a JavaScript variable. Let us first define the variable which will hold these values:

    // container which holds the initial values
    var oldValues = {
        set: function(key, val) {
            this[key] = val;
        },
        get: function(key) {
            return this[key];
        }
    };

This pretty much works like a map. We aren’t really bothered about maintaining unique keys, etc as we should really never have a scenario where duplicates get into the list.

Now let us load up the object with the form’s field values. Additionally, we will bind the fields with the events on which tracking will take place.

    // here we read the original values and populate the oldValues object
    this.each(function() { // start a loop for each element that is matched
        $(this).find("input").each(function(count, obj) { // find all input tags
            // check if the input tag is not a radio button or a checkbox
            if (!$(obj).is("input[@type='radio']") && !$(obj).is("input[@type='checkbox']")) {
                oldValues.set(obj.name, obj.value);
            } else {
                // set the radio button value if it is checked
                if ($(obj).is("input[@type='radio']") && obj.checked) {
                    oldValues.set(obj.name, obj.value);
                }
                // set the value to true if its a checkbox and is checked
                else if ($(obj).is("input[@type='checkbox']") && obj.checked) {
                    oldValues.set(obj.name, true);
                }
                // set the value to false if its a checkbox and is unchecked
                else if ($(obj).is("input[@type='checkbox']") && !obj.checked) {
                    oldValues.set(obj.name, false);
                }
            }
 
            // bind the events to the element
            $(obj).bind(options.events, function() {
                addToChangesList(obj);
            });
 
        });
 
        // do the same as above, but for select elements
        $(this).find("select").each(function(count, obj) {
            // don't save the value if its the hidden changelist itself
            if (obj.name == cName) {
                return;
            }
 
            // if the select element has no value set for an option,
            // set the option text as the value
            if (obj.value && obj.value == "") {
                oldValues.set(obj.name, obj.options[obj.selectedIndex].text);
            } else {
                oldValues.set(obj.name, obj.value);
            }
 
            // bind the events to the element
            $(obj).bind(options.events, function() {
                addToChangesList(obj);
            });
        });
    });

Okay, so let us now create the list which will hold the name of the changed fields.

    // this is the list which is appended at the very bottom of the form
    var cName = options.changeListName;
    var displayProp = "display: none;";
    if (options.changeListVisible) {
        displayProp = "display: block;";
    }
    var changesList = '
<select id="'+ cName +'" class="' + options.changeListClass + '" style="' + displayProp + '" multiple="multiple" name="'+ cName +'"></select>
 
';
    this.append(changesList);

Since the list is appended inside the form itself, it is submitted along with it. Now lets tackle the addition and removal of a field name from this list as and when a change takes place or a change is reverted back.

    // checks if the value has changed and accordingly
    // adds or removes the element name from the list
    function addToChangesList(obj) {
        if ($(obj).is("input[@type='checkbox']") && obj.checked) {
            if (oldValues.get(obj.name)) {
                removeFromChangedValuesList(obj);
            } else {
                addToChangedValuesList(obj);
            }
            return;
        } else if ($(obj).is("input[@type='checkbox']") && !obj.checked) {
            if (!oldValues.get(obj.name)) {
                removeFromChangedValuesList(obj);
            } else {
                addToChangedValuesList(obj);
            }
            return;
        }
        if (oldValues.get(obj.name) != obj.value) {
            if(!$(obj).is("input[@type='radio']")) {
                addToChangedValuesList(obj);
            } else {
                if (obj.checked) {
                    addToChangedValuesList(obj);
                }
            }
        } else {
            removeFromChangedValuesList(obj);
        }
    };

I will probably simplify/optimize the code here as and when I get time. Following are the methods to add and remove from the list:

    // removes an element from the list
    function removeFromChangedValuesList(obj) {
        var cvs = $(obj).parent("form").find("#" + cName)[0];
        if (!cvs) {
            return;
        }
 
        len = cvs.length;
        for (i = 0; i < len; i++) {
            if (obj.name == cvs.options[i].value) {
                cvs.options[i] = null;
                return;
            }
        }
    }
 
    // adds an element to the list
    function addToChangedValuesList(obj) {
        var cvs = $(obj).parent().find("#" + cName)[0];
        if (!cvs) {
            return;
        }
 
        len = cvs.length;
        if (len == 0) {
            cvs.options[len] = new Option(obj.name, obj.name, true);
            cvs.options[len].selected = true;
        } else {
            for (i = 0; i < len; i++) {
                if (obj.name == cvs.options[i].value) {
                    return;
                }
            }
            cvs.options[len] = new Option(obj.name, obj.name, true);
            cvs.options[len].selected = true;
        }
    }

I return the old values object in the response, just in case if the user wants to do some manual checks.

    // we return the old values object, such that the user has access to the initial values
    // the change list is available in the form as an element
    // the new values are obviously with the user in the form
    return oldValues;

As you might have guessed, since we are sending a select list with multiple values, and each value is selected by default; on the server side all we need to do is retrieve the change list is:

The following code snippet is in Java/JSP.

    <%
	String[] cList = request.getParameterValues("form1TrackList");
	for (int i = 0; i < cList.length; i++) {
		out.println(cList[i]);
	}
    %>

I hope this plugin solves some of your problems, it definitely helped me out. Let me know of bugs, improvements, etc.

Objective: Read the country code from one file, the country name from another file, use both the values and put it in the SQL query. So, what I needed now was something like this:

insert into the-table values('the-country-code', 'some-value', 'and-more', 'the-country-name');

My Java based approach (or rather the first thing that came to my mind :)) here would be to use the LineNumberReader class and get content from the second file depending upon on which line I am in the first file. So, first as suggested by andhapp I stripped off the extra code which was not needed.

targetFile = new File("C:/2.txt")
if (targetFile) targetFile.write ""
new File("C:/1.txt").eachLine{targetFile.append("insert into the-table values('" + it + "', 'some-value', 'and-more');\n");
}

Second, I created a LineNumberReader and fed it the country name file. Since the LineNumberReader automatically increments the line number after a read, this became an incredibly easy operation. Now all I had to do was run the eachLine loop again.

targetFile = new File("C:/2.txt");
nl = new LineNumberReader(new FileReader("C:/3.txt"));
if (targetFile) targetFile.write "";
new File("C:/1.txt").eachLine {
    line2 = nl.readLine();
    targetFile.append("insert into the-table values('" + it + "', 'some-value', 'and-more', '" + line2 + "');\n");
}

Cool, isn’t it? I am sure if I would have done this in pure Java, it would be a lot more lines and the fact that I would have to create a class and all. I will be playing around with Groovy’s regex support next, so keep watching this place.

I came across Dan’s blog entry later the same day and realized that he too makes a good point. Both sound absolutely correct to me - and equally incorrect as well.

We all assume that we live in a day and age of rapid development and fast internet access everywhere. That, in my opinion is dangerous to assume. Let’s look at the example Jeff posted at his blog:

r = n / 2;
while ( abs( r - (n/r) ) > t ) {
  r = 0.5 * ( r + (n/r) );
}
System.out.println( "r = " + r );

This was transformed into a better solution by Jeff into:

private double SquareRootApproximation(n) {
  r = n / 2;
  while ( abs( r - (n/r) ) > t ) {
    r = 0.5 * ( r + (n/r) );
  }
  return r;
}
System.out.println( "r = " + SquareRootApproximation(r) );

Dan on his post converted this to:

/**
 * Approximate the square root of n, to within the specified tolerance,
 * using the Newton-Raphson method.
 */
private double approximateSquareRoot(double n, double tolerance)
{
    double root = n / 2;
    while (abs(root - (n / root)) > tolerance)
    {
        root = 0.5 * (root + (n / root));
    }
    return root;
}

According to me, Dan’s version is the better one. As it at least gives you an idea of what could possibly be going on here.

I have a different story to tell here. I was called upon to fix a bug (since I was the only Java guy around) that was causing a lot of pain for some people. The code was pretty to look at. Most methods had comments and variable names were understandable as well. But then I reached a point where I was totally lost.

There was this method, which was doing something. It was following some algorithm, the code even mentioned the algorithm’s name (which I don’t remember right now :)). It was hardly 10 lines of code, but probably the most archaic, wierd piece of code I have ever seen. Now, as Dan said, if you know which algorithm is being used, then just Google it and understand the code.

Unfortunately, that was not possible. Yes, you heard it right. No Google. As a matter for fact, no active net connection as well. The code was on a server machine, placed in a high security - no code goes in or out - kind of environment. There was no way I could have jotted down some information about the method and later check it out over the net for references and solutions. Nothing. nada.

So I was there, trying my best to figure out what’s happening. Just knowing “Newton-Raphson” doesn’t help. In cases like these, “better, understandable” code doesn’t help as well. The only thing that I wanted to know was what the hell was going on in that method! And I had absolutely no help, whatsoever.

Finally, I had to sit down, write the whole algorithm down mathematically on paper, understand its objective in life, consult with the business behind the application and figure out what was wrong in the code.

All I wanted was 2-3 lines of “code commenting”.

I see people commenting almost every line that they write. Some people suggest the 3:1 rule, where you write 3 lines of comment for every line of code you write. All used to sound totally ridiculous to me - till that day. That day, I just wanted some English in between all the code.