Blogger Hacked

News and updates

2007-08-19T18:24:00.000+05:30

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

2007-05-17T18:49:00.000+05:30

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

2007-05-17T13:00:00.000+05:30

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

2007-04-10T19:00:00.000+05:30

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.

Alternating Sidebar Styles: Update

2007-02-28T14:20:00.000+05:30

For those who have reaped the benefits of Alternating Sidebar Styles hack, it has now become even better.

The original hack supported only single-sidebar templates.
This update will automate the even-odd styled sidebar widgets for any number of sidebars.
The only thing you have to bear in mind is that each sidebar section (which you want to show in alternate style) should have a class sidebar.

This update is a result of constant bugging by Sumesh. Great going, kiddo! :p

STEPS FOR UPGRADING
Absolutely none!
I have made the changes in the javascript file itself.
However, you have to make sure that each sidebar section is of sidebar class. (If you are using Ramani's or Hoctro's templates, or have used the instructions from Beautiful Beta for adding sidebars, then it already has that classname)

FIRST TIME INSTALLERS
Rush to the instructions for the original hack.

Please don't ask me on instructions to add a new sidebar. Check out Beautiful Beta which already has the instructions.

AJAX Labels Reloaded

2007-02-23T19:10:00.000+05:30

The AJAX Labels is back with more features! I was planning to release this with my new template, but the template design is slipping beyond schedule.

Note: If you want to integrate AJAX Labels with Phydeaux3's Label Clouds, read this post and come back here.

Some of the new features are:

Built-in navigation system.
More user customisability. (You don't even need to know coding for that!)
Support for Unicode Categories in IE.
More user-friendly installation. (Code to be copied/modified in template is reduced)

The installation of this hack afresh would be easy. But upgrading from my previous version is a bit knotty. Anyway, I will explain both. If you get stuck, feel free to comment and I'll be there to help.

FRESH INSTALLATION
Click here for Upgradation instructions.
If you already have AJAX Labels installed, you can directly jump to upgradation instructions.

Like the first version, this one too needs the Prototype JS framework. You can either store it in a location of your preference, or use the location that I've given below.
First of all, back up your template. It is always a good idea to back up your template, so that you can revert if you mess things up.

1. Click Page Layout->Edit HTML. Check the box saying "Expand Widget Templates"
Look for the </head> tag in your template. Insert the following code just above that.

<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag    - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel  - Text to show for the label feed link.
// catLabel   - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5;
var navFlag = 1;   //ON by default
var feedLabel = "Subscribe to";
var catLabel = "Sorted into:";
var closeLabel = "Click to close";
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

Note: You can avoid the prototype script addition line if you already have added the prototype.js script to your template (It is quite likely, if you have added some hack to your blog). If you don't understand what I'm saying, never mind.

Now the customisation part.
See the snippets in red above. Those are the stuff which you can customise.
Just above that I have written comments on what each represent. To customise them, you just need to modify them to the appropriate value.
For example, if you want to change the close button text from "Click to close" to, say, "[X]", then simply change "Click to close" in the red area to "[X]".

Navigation Feature: The navigation feature allows pagination of the results. So you can view all the results in several pages.
maxresults and navFlag together determine how it is shown.
navFlag is the parameter saying whether you want this feature or not. The number of results shown per page will be decided by maxresults. The number of pages will be calculated automatically.

Eg: Lets say, you have 13 posts with a particular label in your blog.
Case 1: maxresults=5 and navFlag=1
You will have 3 pages (peekaboo blocks) with 5 results each. There will be a navbar which will let you go to any of those 3 pages.
Case 2: maxresults=5 and navFlag=0
You will have a single page with 5 recently updated posts with the particular label.
You won't be able to view other results
Case 3: maxresults=20 and navFlag=1
You will have a single page with 13 results (Because 13 is less than 20).

If you know CSS, you can modify the look of your result block as well.

2. Locate the following code in your template:

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Replace it with this:

<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

3. Optional: If you have the labels widget in your template.

Locate the following code in your template:

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>

Replace it with this:

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>

4. Click on the button below.

This will take you to an Add Widget Screen. Select your blog and click on Add widget.

5. Save your template. That was a breeze, wasn't it?

UPGRADATION
Caution!
If you are installing AJAX Labels for the first time, don't proceed any further. You are already finished with your installation. This section is only for upgrading from the previous version.

1. Back up your template first. (Be pessimistic in these matters ;) )
2. Go to Edit HTML. Look for my previous installation of Javascript. It is very easy to find. It is enclosed within  and 
Delete that entire portion.
3. Now check Step 1 of the FRESH INSTALLATION section. Follow that step and come back here.
4. Search for the following snippet in your template.
'"javascript:getCat(\"" + data:label.name + "\")"'
There will be two places where this occurs.
Replace both places with this
'"javascript:getCat(\"" + data:label.name + "\",null)"'
5. Save your template and go to page layout screen and delete the HTML/Javascript widget you had created when you installed the previous version.
6. Go to step 4 of FRESH INSTALLATION section. Follow that step and come back here.
7. Save your template and you are done. There! That was not very difficult.

ACKNOWLEDGEMENTS
Tsung-Kai Chen - For his several comments and the bugs he found in the previous version.
Bahram - For the heads up on the Unicode Category issue in IE.

Update 1: The code had minor syntax errors (due to wrong copy paste)because of which the hack was not working. Problem is fixed now. Reinstalling the hack will make it work.

Update 2: Drat! Another silly mistake. The Close button was not working. I've fixed this. Just delete the widget and add it again (Step 4) . You don't have to redo any other steps.

Update 3: Arrgh!! Another bug. I have made the corrections. You will have to redo Steps 2, 3 and 4. This will remove support for the rel-tag microformat. I will release an update if I find a way to work around that.

Rewired Feeds

2007-02-14T13:46:00.000+05:30

Those who know UNIX might know the use of pipes. Pipes are what make the shell scripts do their job. Think pipes. Think Feeds. Think mash-up. And think Yahoo!

The result is Yahoo! pipes.
Yahoo! pipes is a versatile method of filtering out unnecessary data from feeds and getting exactly what you want.

Yahoo! pipes works similar to UNIX pipes, to redirect output to different blocks/widgets sequentially and get a final format which the user wants. But the best part is, there is no coding involved. Any amateur user can use the pipes to get a personalized feed. It is so simple. Just drag and drop filters, give the proper parameters in each, and connect each through pipes.

Check the following pipe for instance. I create a Fetch block and give my feed URL. Then I pipe it to a Filter block which will filter it based on a simple rule - Select all the entries which have category "Stories". It is then connected to "Pipe output".
The result is a feed which has only those entries with category "Stories", filtered out from the original feed.

This is just a simple application. There are a myriad of possible ways you can create a mash-up. Heaven is the limit to the number of smart ways you can customize your feeds.

You can even give query strings and get the output as feeds. You have the option of getting RSS or JSON feeds.

THE VERDICT
Feeds have already been making news as an excellent way of representing data. Pipes just made it better. As I said, heaven is the limit. We can expect some new hacks for Blogger too which uses Yahoo! pipes.

FURTHER READING
1. Pipes to the rescue! - Aditya
2. Pipes and filters for the internet - O'Reilly

UPDATE
1. There is a bug in Yahoo! pipes currently which results in published date field to be blank in the feed. Ramani has mentioned this to the "Pipes Suggestion Board". It is important that we get this bug out of the way. So please vote for his feedback. Ramani reckons that Yahoo! is not like the Blogger Support; they are very responsive. :)
This problem is fixed by Yahoo!

Do you hear me? Do you know me?

2007-02-01T15:12:00.000+05:30

I was initially reluctant to write this post here when Aditya tagged me. I didn't want this to be in my tech blog. After months, I decided to write it anyway. (Just as a gap filler, as I am in the process of rolling out more interesting stuff)

Five things you don't know about me. Well! I'm so new to the hacker arena that most people don't know anything about me.

For a starter, read this post about six weird things about me.

1. I am not a Computer Engineer. If you ask me about "OS concepts", I won't be able to understand what you ask, let alone answer it. I did my engineering in Electronics and Communication (because I like it more) from NIT Calicut. I work in Mobile Multimedia domain. I was introduced to the world of computers in my 8th grade (1996), although it wasn't until 2000 that I started liking computers.

I don't know when I started liking programming. I learned C and found out that programming was fun. Then I went on to write some simple games like Bulls and Cows. My first big project was to create an IDE for 80x86 Assembly Language Programming. This was created in C to aid myself and my classmates with their Microprocessor Lab work.

2. Most of what I've learned with respect to computers is self-taught. From assembling computer hardware to programming hacks. My interest in Blogger hacks was born out of necessity. I started blogging sometime around 2004. I really hated all the templates in Blogger so I wanted to make one myself. It started with small mods for my template, which then went on to learning Javascript, the JSON, XML and so on.

3. I am 23 years old, although I look much younger. People still think that I'm in college when they see me. I usually quip with quotes from an Indian ad.
(Only Indians will understand this :) )

Person: You don't look like you are 23.
Me: That's because I use Santoor soap. "Chehraa Dekhke umr ka pataa hi nahin chalta"

(means "You can't guess my age by looking at my face". That was the tagline of that supposedly age-defying soap.)

4. I play the Violin. I started learning violin when I was seven. I hold a National Scholarship in Violin and am a part time professional. I was a singer in our college band too. Another instrument which I can "claim" to play is the keyboard. I know how to touch it. :D

Other hobbies I have are making crazy contraptions and small electronic circuits, solving cryptic crosswords, to name a few. I'm an avid reader of novels and a movie-watcher.
I am a big big fan of Harry Potter. People say I'm crazy about Harry Potter. In fact, the lime green theme of my blog was inspired by the lime green cover of Half-Blood Prince.

5. I crack more PJs (Poor Jokes) than good jokes. You might've had a taste of it from my Profile ;)

That's as much as I can say right now. I'm feeling a kind of deja vu because I've written most things about myself in my personal blog.

To innerHTML or not to innerHTML

2007-01-28T14:18:00.000+05:30

Is innerHTML an angel or the devil?

There are two faces of innerHTML.
On one hand, it’s proprietary. It's certainly not part of the W3C DOM specifications. It’s also not very robust. It takes a single argument - a string - and squeezes that into the element, regardless of whether the string contains well-formed markup or not. Heck, it doesn't even check if the markup has a closing tag, and is often the reason for baffling layout bugs. It is very dangerous compared to the standard DOM methods - createElement, createTextNode and appendChild.

On the other hand, innerHTML reduces the lines of code. It is easy to write, if you can stand the trouble of escaping characters in the string. It is very well-supported. In fact, it enjoys better cross-browser support that DOM methods don't have. It also is faster than DOM. This is a proven fact.

To use or not to use innerHTML...That's a definite toughie to answer!
I have to admit that I always have been tempted to use innerHTML through and through. I just can't stand the clumsy extra lines needed with DOM and all the variables declared.

It is much easier to use innerHTML when it comes to Ajax. It even is a part of a microformat - the AHAH.
It’s the simplest way of taking the responseText property of the XMLHttpRequest object and inserting it into a specified part of a page.
And it reduces the LOC (Lines of code) by at least 3 times.

innerHTML does look dirty. But there’s no way to make Ajax work without making some sort of trade-off with non-standard technologies.

Followers of the DOM standards would say not to follow innerHTML. As a programmer, even I shouldn't. innerHTML is a bad programming practice, just like using magic numbers in a piece of code. But I'm tempted. I think innerHTML makes my life easier. Only I have to be a little careful. I keep following innerHTML because, standard or not, innerHTML is gonna stay.

The confusion haunts me forever.

Alternating Sidebar Styles

2007-01-11T21:01:00.000+05:30

I was in the process of changing the template for my personal blog when I got this idea. I'm not sure whether anyone has already released this hack. Anyway, it is a very useful one.

We have seen several webpages where the sidebar blocks are alternating in style. (color, generally)
In websites, it is easy to do this by manually giving different classnames for alternate sidebar blocks. But this wouldn't be possible in Blogger, particularly because of the Drag-and-drop mechanism in Page Layout, which makes it difficult, because the owner has to change the class every time he repositions the widget. Also, it is tedious to add our custom code every time we add a new widget. After all, we are supposed to render ourselves indolent by making a one-time change to ease our work! ;)

So, is there a way to automate the alternating sidebar block styles? Sure there is!
Even I didn't expect it to be so simple a code when I started coding this.
If you want to see this hack in action, visit my test blog.

IMPLEMENTATION
1. Look for ]]></b:skin> tag in your template and copy this code just above that.


.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}

This is where you make your customisations. Use whatever CSS you want to customise these two classes. I have just given background colors here.

2. Copy the following code just above the </head> tag.

<script src='http://bloggerhacked.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://bloggerhacked.googlepages.com/evenodd.js' type='text/javascript'></script>

3. Save the template and you're done. That's neat and easy. :)

Note for advanced users: You might already be having prototype framework and addLoadEvent routine attached to your blog. In that case, feel free to take my Javascript file, modify it and host it in your preferred location.

Comment Buttons User Script

2007-01-08T19:45:00.000+05:30

This was a result of a sudden bulb which glowed in my head today morning. The current for the bulb was provided here. =) (Sorry that was a really bad joke)

Smileys sure increase the viewer experience, but don't they increase the writer experience too?
How often have you complained about enclosing text inside <b> and </b>, if you had to highlight something in your comment?

Well! You don't have to do that any more.
This hack is just for you. YOU decide how you want the experience to be in another blog; not the owner of that blog. (I admit that sentence was too farfetched! You need some leniency from the owner also. What if he doesn't let you comment? :-/ :D )

FUNCTIONALITY
This Greasemonkey script will add a few buttons in every blogger comments page that you visit, thus helping you to italicize, make bold or even add smileys to your comments.

It works closely with Smileys hack, but will work without that hack also.
If the original blog (the one where you are commenting) has the Smileys hack, it will show the smileys as little images. Otherwise, they will remain as smiley text. No problems!

You need Firefox with Greasemonkey installed to use this.

For those who don't know much about Greasemonkey: Please be aware that this script *will not* change the look of your blog. It will do nothing to your blog. A person can see the buttons only if he/she has the user script installed in his/her browser. So you cannot provide this as a feel-good feature to your readers. (You can recommend this to them, though. ;) )

But on the other hand, you can use this as a feel-good feature for yourself, in all blogger blogs. (you heard it right! All!)

INSTALLATION
1. Install Greasemonkey Extension in your Firefox browser.
2. Click on this link to get your user script.
3. You will get a popup to install the user script, which looks like this:
4. Click Install.

USAGE
This will work similar to most text editors.
Select some text, click the button for Bold; the selected text will be enclosed in <b> tags. Similarly for italics and links.
If you click on the smiley buttons, the equivalent text will be inserted. If the owner of the blog has installed the smiley hack, then it will be shown as images in the item page.

Note1: The smiley images won't show up in the comment page, even if the smiley hack is installed. So don't come complaining that they don't work.
Note2: Thanks to Aditya for hosting the images. :)

Update: The smiley images will show up in the comment page now. I have made a mod of Aditya's hack into my userscript to show them. If you have already installed my script, just uninstall and reinstall it from the link above in INSTALLATION step #2

Navigations, Suggestions and Asynchronism

2007-01-02T11:56:00.000+05:30

A few ideas came to my mind when it was idle over the weekend. (An idle mind is the devil's workshop!!?? :D )

What are the limits to which we can tweak the blogger template? I can't say for sure. Too much of anything is bad. If we have to modify the entire architecture of the template, then it is not worth pursuing that hack.

Anyway, here are the ideas. Discussion is open.

Idea #1: Seamless Asynchronism in Navigation
Let me be specific. Is it worth implementing the entire post section in a custom manner, and getting rid of the GML portions altogether?
Right now, I can't think of any way other than that.
I stumbled upon a slider based asynchronous navigation in one website. We can use similar stuff for the older posts and newer posts links. Rather than bringing up the results in a freshly loaded page every time, we can just load the posts section. I reckon that will be a mammoth change.

The idea of seamless navigation encompasses any page inside a particular blog.
We can very well modify the blog to load only the post section every time. Why? Answer is simple; we seldom have sidebar sections which change with the type of page (Item, Index or Archive)

Idea #2: Search Suggest
Aditya had created the Native Search Suggest hack which he just showed a trailer of, but never released. I bet it was one of the most anticipated hacks, but Alas!

If you ask me, the idea of Google Suggest is one of the best AJAX implementations ever.

This idea is again something which I stumbled upon while experimenting with Firebug. I saw the response of the AJAX requests sent by Google Suggest, which was in a very desirable function call format.

When I typed "suggest", the HTTP request sent was

GET http://www.google.com/complete/search?hl=en&js=true&qu=suggest

And the response text was

sendRPCDone(frameElement, "suggest", new Array("suggest", "suggest link", ...

(Truncated, as it is too long)

So it is just a matter of defining the function, sendRPCDone. (i.e., deciding what the function does.)
But there is a catch here too. There is an inherent feature of Gecko-based browsers (don't know about others) where XMLHttpRequests (known to common man as AJAX, although there is more to AJAX than XMLHttpRequest) to other domains are not possible. So you cannot get the results in this case. Can we do this without XMLHttpRequest? This is something to be investigated.

So, Aditya, if you promise you'll release your Native Search Suggest soon, then there's no need to pursue the above one ;)

AJAX Labels: Updated

2006-12-17T15:11:00.000+05:30

This version is outdated. A newer (and better) version is present here.

What if you can view the posts having a particular label without leaving the current page? What if you can do your bit of reading and other stuff and keep clicking away without wasting your time while the labels are loaded in the background and displayed when they are ready? (Okay, enough of that. I see some people rolling their eyes now. :D )

AJAX labels does just the same... It opens a block of text just above all the posts, showing snippets of posts having the label you selected. Click on any of the categories on the right sidebar to see the hack in action.

INTRODUCTION
I had this hack in my personal blog about a month back. It had some really rigorous logic to parse the RSS feed, and hence was not very fast. Now that Google has implemented JSON feeds in their GData structure, my job becomes easier. I also decided to open this hack for the public.

My earlier implementation was in AJAX, i.e. I had used the XMLHttpRequest function for asynchronous procurement of the RSS data and XML DOM parsing to display it. Needless to say, JSON cuts down most of the logic, because of its inherent nature. (I could have used Singpolyma's excellent Outline Converter application, but it would simply have added to the overhead. Also, I don't like NING because they take the website offline too frequently. :p)
If you are interested, here is the link to my original script to parse the XML feed.

This looks strikingly similar to Aditya's ABC Index, but the similarity ends there. The ABC Index was for old Blogger which didn't have the category support or JSON feeds. So he had to make use of del.icio.us categories. Also, the implementation did not use the XMLHttpRequest, but was nevertheless asynchronously loaded. But the XMLHttpRequest gives the best asynchronous experience.
The idea of showing the categories in a block was originally Aditya's, so I should give him due credit.

So much for the intro babble. Lets get on with the hack, shall we?

THE HACK
1. First things first. You should get yourself a copy of the prototype JS framework for this hack to work. Host it in a place of your convenience, maybe your Google Pages, since you already have a Google account. Otherwise, you can get one from here.

<script type="text/javascript" src="http://bloggerhacked.googlepages.com/prototype.js" />

Add this (Change the link if you opt to host the file) inside the <head> section of your template. I would recommend pasting it just above the closing </head> tag.

2. Now the heart of the hack.
Go to http://bloggerhacked.googlepages.com/ajaxlabelsscript
and copy the javascript and paste it just below the code you just added in step 1.

Optional Step: You can modify the CSS part of the javascript you just copied to suit the theme of your blog. I will give some basic tips to modify them here.

#indicator is the loading indicator. To change the background color, modify the hex value of background-color inside. To change the border color, change the hex value of border inside the #indicator.

#search-result is the box in which the category results are displayed.

.search-result-meta is the RSS feed for the label on the top.

.search-title is the post title of the category results.

.search-cat is the list of other categories of each post.

.search-close is the "Click to close" text at the bottom.

3. Locate the following code in your template:

<div class='tags'> Labels:
<ul>
<b:loop values='data:post.labels' var='label'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:loop>
</ul>
</div>

Replace the red part of the code with this:

<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

4. Go to Page Layout screen. Add a HTML/Javascript widget just above the Blog Posts widget.
Give the title as blank and following code in body.

<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...
</div>
<div id='search-result' style='display:none'></div>

5. Save your template and you are done.

ADDITIONAL STEPS IF YOU HAVE LABELS WIDGET IN YOUR SIDEBAR
1. Look for the code of your labels widget. If you don't know how, search for the following:

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>

Change the red portion of code with this:

<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

USAGE
Simply click on the label at the sidebar or at the bottom of a post and see the results coming up.

LIMITATIONS AND ROADMAP
I have limited the number of results returned to 5, because it will take up too much of page space otherwise. You can change the value if you change the max-results variable in the query inside the javascript.
I am planning to make a web-based script creator for this, with a truckload of customisations.
Also in the papers is support for navigation of the query results within the result block, a la the previous-posts-next-posts navigation.

Update: Minor correction based on comment by Tsung-kai Chen. Changes in blue. Sorry for the error.
Update 2: Another correction in the main script in http://bloggerhacked.googlepages.com/ajaxlabelsscript.
I won't make silly mistakes anymore. Promise! :D

Updated: Quote of the day widget

2006-12-17T09:01:00.000+05:30

Update:
There are subtle changes in the script so that it now supports more than 31 quotes. The limit is now technically 365, which I think is more than enough. Please edit the widget and repeat Step 3 below. For those who are interested, the changed portions are in blue.

If you have visited my personal blog, (Cheap publicity here, I know ;) ) you might have noticed a "Quick Quote Quill's Quote of the day". Do I change the quote every day? No. It is automatic. It is one of my earliest javascript codes and not specific to blogger or even for blogs. However, I made it into a widget so you can use it in Beta Blogger.

This is more than a quote fetcher. You can add whatever quotes you want. (Even quoted by you!) This code cycles a set of quotes each day, i.e., it will display a new quote each day. When it reaches the last quote in your list, it starts from the first again. And all these quotes are added by you.

You can make it a widget in your Blogger Beta blog. How? Read along:

1. First thing you have to do is create a HTML/Javascript element from your Page Layout view. Create it anywhere you like.
You probably want it just below the blog title/description block, but will see that you are not able to add or drag elements to the area just below the blog title block.
To overcome that limitation, go to Edit Template and look for this code in there.

<div id="header-wrapper">
<b:section class="header" id="header" showaddelement="no">
<b:widget id="Header1" locked="false" title="xxxxxx(Header)" type="Header">
</b:widget>
</b:section>
</div>

The part of interest is the red-colored one - showaddelement.
The name suggests it all. Make it yes and save. You will find the "Add element" region in your layout next time.

2. Give a name you like to be the title of your quote of the day.

3. Paste the following code inside the content area of the widget:

<script type="text/javascript">
var today= new Date();
var first = new Date(today.getFullYear(), 0, 1);
var day = Math.round(((today - first) / 86400000), 0);
var numquotes = 3;
quotes = new Array(numquotes+1);
authors = new Array(numquotes+1);
quotes[1] = "Quote_1";
quotes[2] = "Quote_2";
quotes[3] = "Quote_3";
authors[1] = "Author_1";
authors[2] = "Author_2";
authors[3] = "Author_3";
var ran = (day % numquotes) + 1;
document.write(quotes[ran] + '<p style="text-align: right"><i>' + authors[ran] + '</i></p>');
</script>

Note the red colored regions. This is where you make your customisations.
You can modify the text (Quote_1, Author_1 etc.) to the quotes of your choice.
You can leave the Author text blank, i.e. just the "".
(Technically, the quote text too, but that doesn't make sense, does it?)

4. You can even add new quotes.
I have given an example with 3 quotes. You can give as many quotes as you want.
For that, add a new line just below the last quote line (quotes[3] = "Quote_3"; in this case).
The line should read like quotes[4] = "YOUR_QUOTE";
(You know what to fill in instead of YOUR_QUOTE)
Similarly, add a new authors line.
authors[4] = "YOUR_AUTHOR";
Also change numquotes to 4.

Remember, you can add more quotes in a similar fashion.
Just make sure that the


numquotes=N;
quotes[N]="";

and
authors[N]="";

lines tally.

5. Save the widget. Save the template.

First post

2006-12-16T19:33:00.000+05:30

Hello all,

So I finally decided to open my technical blog after about 6 months of creating it. I don't know what made me do that. I had been hacking my personal blog for a long time, but all the hacks remained in my blog only. After months of prowling in Blogger Help Group as Janus (Janus, because I'm a man with two faces. We all are!), one fine day I got a inner call to publish my hacks. :D

I have to admit that it's really tough to compile a step by step procedure for others to implement a hack, particularly when you have to keep in mind that most of them won't understand the code and it's a kind of spoon feeding.

But now I'm into the waters. And you can expect some cool hacks for your blog.