News and updates

I apologize for all those broken promises of new hacks. I have a plethora of ideas, but I'm so busy with a lot of "more important things", that I'm not finding time to code at all. I'm afraid this trend will continue for another couple of months. All I can do now is assure you that this blog is not dead.

I would like to request all of my readers to subscribe to my feed, so that you will know when another hack comes up here. During this time, I will continue to support my existing hacks. I will respond to any queries or bugs within a week (Under normal circumstances). I am planning to buy some web space too to support my hacks further (Especially get rid of the Googlepages bandwidth problem). But there won't be any substantial progress until after one or two months.

BTW, there is an update in my quote of the days widget to support more number of quotes. To add to that, I would like to make something clear about that particular hack. Several people have tried to compare that to the random quotes widgets found all around the web. There is stark contrast between my widget and those in the following aspects:
1. I don't like the idea of quotes changing for every refresh of the page. This one doesn't change. It only changes with your calendar.
2. You can write your own quotes, rather than some bullshit from those quote pages.
3. This one goes in a cyclic manner through your quote list. So you never ever miss displaying any of your quotes.


Later.

AJAX Labels with Label Cloud

Owing to high demand, I will explain the steps required to integrate AJAX Labels with the immensely popular Phydeaux3's Label Cloud hack.

Note: Please back up your template at three places as a precaution:
a. Before installing Label Cloud
b. Between installation of Label Cloud and AJAX Labels.
c. Before Step 4 below.

1. Your first step is to install Label Cloud. Go to Phydeaux3 and follow the steps that are mentioned there. Please comment in Phydeaux3's blog if you find difficulties in installing that hack. I cannot help you there. If you have already installed Labels Cloud, then move on to the next step.

2. The second step is to install part of my AJAX Labels. Jump to this link and follow all the steps except Step 3 (The optional one)

3. If you have a Labels widget, you probably have to delete it. (Although I'm not sure about that) Do as Phydeaux3 suggests.

4. Search for the following code snippet inside the code you copied from Phydeaux3 for Label Cloud:
a.href = '/search/label/'+encodeURIComponent(t);
and replace it with this:
a.href = 'javascript:getCat("' + encodeURIComponent(t) + '",null)'

I haven't tested this anywhere. I hope this one will work. If it doesn't, please revert back.

Loading time improvements with Javascript

This is another tidbit for coders.
(To be honest, I'm just finding enough time to do some finishing touches for my drafts which are gathering dust and post them here!)

We come up with new hacks, invariably with a javascript file attached. You add all the hacks, end up with a truckload of javascript includes and thus, a longer loading time.

THE ROOT CAUSE
The real problem is the sequential nature of XHTML. XHTML is parsed a tag at a time. So, if you have a couple of lines like this:
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
the files are loaded as follows:
The parser first encounters the first script tag. It then slowly retrieves script1.js and loads it into memory, which takes a lot of time. The parser thinks this is the best time to take a nap and doesn't proceed to parse the next script tag until the current download of script1.js is finished.

See the circled portion above. Never mind the loading times. The stuff to notice is that scriptaculous.js doesn't start loading until prototype.js finishes loading.
Now, we have a hell lot of bandwidth going wasted during this time. We can do other activities in parallel. But how to do it?

THE FIX
The simple answer: Load the scripts asynchronously!
I call it EOF. EOF for Execute-Open-Forget. (Well!! These things ought to have a geeky name!) We execute a javascript function, request for a download of script1.js, forget it, and execute the function again with another argument for a download of script2.js

The result is very evident from the following graph below.
Again, don't worry about the load times of singular files. We cannot improve it for the user. But check out the total time taken for the two javascript files circled. It is lesser because the second one starts even before the first one is finished. This difference will be evident if the javascript files are large and takes a few seconds to load.

Now you might be asking how to make it an EOF?
That's what Javascript is here for. We use Javascript to load a Javascript file. It cannot get weirder.

Check out this nifty function:

<script type='text/javascript'>
//<![CDATA[
function loadScript(src) {
var script = document.createElement("script");
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}
//]]>
</script>

Now you can load any number of functions using the function.
You just have to add the calls wherever you want
<script type='text/javascript'>
loadScript("script1.js");
loadScript("script2.js");
</script>

This can go anywhere in the code, including onload event.

BE SMARTER
This technique can be used cleverly in specific situations.
For example, you may be using some JS libraries for some of your hacks. If the hacks don't show up during loading and does only when uses does some action, we can set a timer to load the script in background after, say, 5 seconds. The main page will be loaded in a jiffy, and the user will be effectively hoodwinked.
This will result in a really critical timing issue, if not handled carefully. Too much of timeout, and the user may get ample time to tamper with the related hack before the script is loaded.

You can also place the loadScript() call at some convenient place in the HTML code. It can be as far as the bottom portion of your HTML just before body tag, so that the page is rendered very fast. (Again, the above problem holds good here also.)

CAVEATS
Everything comes with a price. This too has its own deficiencies. Some which I know of:
1. This one is because of the different behavior of IE. IE and Firefox both can download scripts in the manner specified above. The difference is that IE executes them in the order they finish downloading, whereas Firefox executes them in the order they are appended to the DOM.
This means that your scripts cannot have dependencies on each other in IE. You can get away sometimes, if you are not using the script files until long after loading. (An example is my AJAX Labels Hack)
Update: You have to be really careful that you don't allow the user to make calls to a particular function in the dependent script in that case. The only advantage that you can get is a slight improvement in overall loading time.
2. You can download more than two files at the same time only if they are from different domains or subdomains. Normal browsers (including Firefox) can open only upto 2 simultaneous HTTP connections to a domain. If you try to download too many files at the same time, you may even witness bottlenecks. So use this discreetly.

ET AL.
There are many more ways of improving load times:
1. Compress the javascript file. There are umpteen ways of doing that. Refer to my previous post.
2. Check this link out: Speed Up Your Javascript Load Time - BetterExplained

10 Tools that a Web Developer ought to have

I'm alive, but not kicking. I'm dead lazy nowadays. Don't ask me why, but I just am into several other things.

Anyway, to break the ice (again), I'll start with a tip for the budding developers out there. Most of the seasoned folks already know about most of these tools. This is just my personal list of essential tools used for my web development.

1. Mozilla Firefox
If you love customizations, Firefox is the browser you want. It is not "the" complete browser around, but its extensibility is enough to make it a clear winner.
As I read somewhere out on the internet, Firefox's secret is the same as Jessica Simpson's: it's chic style is the result of... ahem... extensions.

The single best thing that I love about Firefox is extensions... extensions for any damn thing you can do in the universe (Except, maybe, brewing a cup of coffee :P)
In fact there are so many Firefox extensions around, that your head will spin.
Now the interesting part. Even you can create an extension yourself. You just have to have a basic knowledge of XUL and Javascript, which is so easy to be called a trifle.
Firefox is a much better browser than Internet Explorer (On second thought, a real browser unlike IE, as Aditya once pointed out.)

So what are you waiting for? Just dump Internet Explorer and start using Firefox.

2. Firebug
This was the first extension I looked for after I installed Firefox in my new laptop at office. I cannot live without this extension. This is a very desirable tool for any web developer.
It lets you inspect and edit HTML, change the CSS style on the fly, debugs javascript code and even monitor the loading times of the components in a web page.

I'm particularly impressed with the CSS/HTML editing on the fly, because I can perfect the CSS without the toiling job of saving the page-loading-saving again.
The AJAX debugging capabilities are also too good. I still don't know of any other method to debug AJAX calls.

3. IE Tab
This is for those people who just can't ignore their readers who still use Internet Explorer. Even if I loathe IE, I can't turn a blind eye towards that pathetic software which calls itself a browser.
This Firefox extension adds an option to open in IE Tab in your Status Bar and in the right-click menu.
If you open in IE Tab, it uses the rendering engine of Internet Explorer, so you will get a view just like in IE, without going out of the luxury of Firefox.
This is useful to fix the nasty IE bugs.

4. Ning
Ning calls itself a personal Social Network creator. But it is more than that. It can do a lot of things like hosting server side scripts for free. Of course, I know it is not all that Ning can do.
I myself am not very much aware of the power of Ning, because I haven't ventured into those seas yet. I'm still in a learning phase with Ning.
Several of the PHP scripts of the bleet are hosted in Ning:
a. Wrinks
b. Javascript Minify
c. Native Search Suggest

All I can say is that very few people have usefully tapped Ning's power.

5. Macromedia Dreamweaver
I'm so spoilt by this software that I can't think of anything else to edit my XHTML/CSS/JS code. I don't use it for any pleasure other than proper syntax check and coloring while I code.

6. TidyJSON
Programmers working with JSON feeds encounter a very irritating problem. The feed you get will usually be a one-liner, and it is a toilsome, if not impossible effort to check the objects inside the JSON feed. This is where TidyJSON comes in handy.
It is a commandline utility to read JSON from a file and format it with good coloring and indentation. Working with JSON will never be the same!

7. URI Encoder
You will definitely need this if you are posting some code in your blog. You'll need to convert all those tags to corresponding URIs. There are umpteen number of online tools to do that. This is just one of them.

8. Javascript Compressor
You can always save some valuable load time by compressing your JS code. This basically removes all unnecessary stuff like extra newlines, comments and renames some variables, so that you end up getting a much smaller file size.
For those crazy ones, you can obfuscate the code too. I don't do that. I want my readers to read and understand the code, if they want.

There are umpteen number of static compressors out there. One which needs particular mention is Stephen's JScripts Minify. It is a dynamic Javascript compressor which requires you to just host the original JS file in jscripts.ning.com and access the file with argument ?minify. Check his post for more info.

9. JavaScript Code Improver
This does just the reverse of the previous. This converts compressed or obfuscated code into a more readable format. Very useful in reverse engineering.

10. The Prototype API document
This is a very useful document for people who use Prototype library extensively. Available as a PDF document as well as a sidebar extension for Firefox.