iGoogle Portal Implementation: How to do it?

After developing the draggable div application the other day, I was itched to implement the whole iGoogle portal. Probably the drive came when a few of you asked me “These draggable divs are just like iGoogle”, so I thought why not to give a shot at it.

Here is what I was able to come up with while sitting idle at the office. I have shown 3 tabs for making it look more of a realistic demo. However only the news tab is operational as of now. Feel free to drag and drop any of the news box to any corner of the page and rest of the boxes will make place for it. 🙂

Find the implementation of this application here.

Basically it proved out to be a derivative of the previous application i.e. draggable div. However this one is a bit more modular, will easily fit into any changes made to the tabs and tab names or what ever.

Feel free to post a comment or two at the blog here.

Finally make your portals like iGoogle 😛

Draggable DIVs : How to make one?

You all must have seen a similar thing on your iGoogle home page. Further for years this application is an integral part of Yahoo User Interface Library i.e. YUI. I tried to tweak into the iGoogle and YUI implementation of the draggable div implementation, but somehow I found them rather too complex to understand. Hence I thought of better write a short application and see if I can do the same magic. 🙂

Here is what I came up with. Still not modular enough, I coded everything as per the requirements for this demo. Probably in future I should be able to come up with a modular stuff to let others use the same.

Click for the demo here.

Basically it proved out to be much simpler as it looked. However if you have observed and used YUI, they have a concept of proxy element for the same implementation. Basically what proxy allows you is, while you are dragging the DIV, it doesn’t actually moves the original DIV. However it simply creates a proxy DIV, which will be visibily move when we try to move the DIV.

Feel free to post a comment or two here. 🙂

Happy dragging!

2nd Year @ IIT Guwahati

Attendence of abt 10% in class, CPI of 6.75, a girlfriend, an electric guitar, a rock band, few sucking performance on stage, beer rum whisky vodka and lots of friend : In short this was my first year at IIT Guwahati. But then college life is not just about fun, and my experiences of 2nd year were enough to prove this point.

There is something about this college life that once people are in here, they dont wanna go back home. Atleast this was the case with most of the people in my batch. 3 months of holidays, means hell lot of vellapanti. I guess its lack of freedom back home that makes us feel so addicted towards this college life.

“12 baj gaye hai, so jaaao” , “subaha ke 8 baj gaye hai uth jao” , “Bijli ka bill jama kar aao” , “Nahalo jaldi se nahi to panni chala jaega” (This is the biggest headache i suppose) , “Shyaam ko doodh le aao” , “Pandey ji ka ladka computer course kar raha hai, tum kuch karte kyon nahi” , “Koi kitaab le aate”, dad se zindigi ke funde and similar infinite comments.

Actually, this is what we all run from. (If not all atleast most of us). Anyways I was back in the college, after a boring 3 month holidays. However, I came back with a few points to prove, firstly i wanted to improve upon my CPI which was falling like anything. 7.00 –> 6.75 .

I remember my dad asking abt my performance in IIT, n the answer I had was ‘Papa woh IIT waale results seedhe 4 years ke baad hi dete hai, beech mein kuch nahi dete.’ I thought may be if i can improve my CPI some how, next time I will say ‘Papa woh rules naa change ho gaye hai, aab results har semester mein milenge, but puraane nahi.’

But it takes something to fulfill ur dreams, n that smthing never came out of me. Infact the 3rd semester proved to be the worst semester academically for me. My CPI fell like anything by the end of 2nd year….. 7.00–>6.75–>6.23–>6.21……Academically things were out of my hands. However thr were a few areas i was fast improving [:)].

I was chosen as Music secy for the 2nd year, n that meant even more dedication n commitment towards music. Jamming for hours in the music room, practicing day n night in the room, organizing cultural nights within the campus, giving guitar classes n wat not……music was all over the place.

To be continued…

My stay @ IIT Guwahati (1st year)

I was never a bookworm and didnt liked studies from my school days. Infact I didnt knew about IIT’s even when I was in 12th standard. My father always used to hate my frnds, and the reason was quite obvious…none of them looked like a ‘seedha saadha padhai waala bacchaa’…..Infact none of my close frnd cleared JEE exam and in my case the only reason why I was able to clear it was my father.

‘Unka dandaa naa hota to shayad mein kissi private college ke bahar cigraattte pi raha hota.’

Anyways I now thanx my father for having that ‘danda’ over me, which was hugely responsible for my success at the JEE extrance examination. After all I lived some of the best days in my life here at IITG.

I came to IITG with no further aims. Though of studies in the beginning but then soon I found an excuse to run away from studies i.e. ‘Professors chutiyee hai’. Music was my destination next and guitar was everything for me in the initial days of my life here at IITG. Playing guitar in my room and jamming for hours in the music room with frnds was daily routine. Then came ‘Manthan – IITG intra batch cultural festival.’ I can still remember the enthusiasm which Manthan brought with itself in the hostel. Some were showing enthu for making name of our batch in front of seniors and some were showing enthu for making name in front of the gals [:)]. Anyhow after preparation of abt 1 month the result was that we were proved as the worst batch in whole IITG and our batch still possess that title I must say. However that hardwork of 1 month didnt go waste for many as many of us including me, as we got a pass to Subansiri-IITG girls hostel. That marked the end of the 1st semester where I found many many new frnds and someone whom I started liking for some reason or the other.

After vacation for 1 month we all were back at IITG. Everyone had results in thr hands, few people who never used to study were somewhere in the high 8’s. Some who tried everything were somewhr in the low 6’s and for people like us who were by that time deeply in love were arnd 7. 1st semster results proved eye opener for many but not for people like us, who were already been blinded by many things. However the saga of romance continued and finally came the proposal from my side. Everything well settled, infact I must say too well settled [:)]. Music was other area I was fast progressing. By the end of the semester I saw my 1st electric guitar.

That brought an end to my 1st year of stay at IITG, infact which proved to be the ‘THE BEST’ days of my life. IITG brought a whole new experience for me, sleeping at 4 or 5 in the morning was normal. Infact I dont remember a single day during my 1st year when I slept before 12 in the night. I found many new frnds and the love of my life. I progressed satisfactorily in music, atleast my frnds back home gave me a few words of encouragement. However one side whr I was loosing out constantly were academics. My cpi fell from 7 to 6.75 i guess. My attendence then in the classes was smwhere arnd 10% (or may be that is more [:)]). Anyhow I was then enjoying the whole new experience in the life, I was enjoying the company of people out thr, I was enjoying the atmosphere thr……BUT BUT BUT…..

Will google be a new Library of Alexandria.

What if all the world’s information would be available and easy to find? What if all the news, all books, all texts, photographs and videos would be collected in one place, and made available, always and everywhere? This is the goal of Google, and the company seems to be realising its core mission at an amazing speed: through its popular search engine, through Google Earth, with which users can find any kind of information based on geography, and through Google Print, a project in which Google digitizes complete libraries.

Google is divulging ever more information, in the process hiring the smartest people in the industry. But is the company aware of the responsibility it has, being the guard to all the world’s information, including personal information about its users? With its motto ‘Don’t be evil’, Google seems to have the best intentions. But there are also claims that Google is slowly turning into Big Brother, keeping track of its users and continuously making decisions about the information it provides to an ever faster growing number of users.

Will Google turn out to be a new Library of Alexandria, serving as a middleman that brings all useful information to anyone? Or is it turning into a monopolistic Big Brother that challenges the freedom of information?

This documentary takes a look into the world of Google, in the company’s headquarters in Mountain View, California and in its London offices. We see –among others- Vint Cerf, named ‘the father’ of the Internet who explains the inner workings of Google as a company. Since 2004, Cerf has been working for Google, helping them to develop new applications for the Internet. What is his view on the development of the Internet, and on the role Google plays in today’s world?

Found the comments and matter discussed in the video really interesting so thought to finally blogging it. Hopefully we have a discussion coming up. 🙂

Photo Tagging API : Easy plugin for your websites and blogs

Flickr, Facebook and now Orkut. One by One everyone has implemented the photo tagging feature into their social network. Initially introduced by Flickr, extended by Facebook and finally Orkut was forced to implement it too.

Last night I tried to look into it to found out what does it take to make one and I was able to comeup with something like this. Probably a little different from the one’s implemented by others in the sense that you just have to do the first click and then the second click, and you are done. No mouse-press and drag thing needed.

Now without much of a talking, lets first see a demo of how it works and then probably I will write a few words on how to implement the same:

Note: How it works? Unlike Facebook and Orkut, I have implemented this in a little different manner. You just need to click once, and then no need to keep your mouse pressed. Freely move to the another place and click again and thats it, you have selected your photo tagging area and ready to tag it.

Feel free to play with the demo here.

Drawbacks: However the drawback of this phototagging API is that if someone has tagged the photo using a monitor which have a different screen resolution than yours, then probably you might not see the tag exactly at the right place. This bug exists in Facebook too, haven’t checked with Orkut yet.

Feel free to leave a comment or two.

Also feel free to discuss any flaws which you may find in the implemented API above. I am completely open for suggestions for improvement.

Happy Photo Tagging.

Caching problem in IE with Ajax : A Solution

Hello All,

Problem Definition:
I made my first browser based chat messenger way back in January this year, and I tried making a improved version of it yesterday again. But unfortunately Microsoft continues to give 1000 reasons for a web developer to suicide. They continue to serve the same old buggy browser way back in 2000 and even now.

The problem I was facing with IE7 (I haven’t tested on IE6), while trying to make a browser based chat messenger was that the chat application loads the chat messages from the server successfully only for the first time i.e. when you load the site for the first time. However, after that it continues showing the same old loaded data, even as new messages keep coming in the server. My chat application always worked fine in Firefox, Netscape, Safari and Flock. So what the hell with Internet Explorer.

The Real Problem:
I faced the same problem 6 months back and was facing it again now. Frustrating enough! As a web developer its a reason enough to die. Anyways, I finally tried analyzing the things. I went around installing Wireshark , which lets you see each and every http request made from your computer. Unfortunately, It was just not showing any ajax request being made by my site (opened on IE). What the hell? However, it showed successful ajax requests being made by my site opened on Firefox.

Enough! The problem was clear that, for some reason IE was not allowing the Ajax request being made. Then I went around installing IE Debug Bar, there in the HTTP(S) section you can see each and every single request being made by IE. I restarted IE and opened my site again. There in the HTTP(S) section, I could see ajax request being made successfully every 15 seconds as intended (a live chat application will set that to about 2 seconds). Then why the hell was wireshark not showing the same.On further investigation with DebugBar I found this was what was not allowing my site to make a successful ajax request the second time:

  • In the Headers section of HTTP(S) I could see:
    GET /ajax.php?getchatmessage=true&id=36&username=imoracle HTTP/1.1
    Accept: */*
    Accept-Language: en-in
    Referer: http://altertunes.com/home.php
    UA-CPU: x86
    Accept-Encoding: gzip, deflate
    HTTP/1.1 200 OK
    X-Powered-By: PHP/5.2.5
    Keep-Alive: timeout=5, max=100
    Transfer-Encoding: chunked
    Content-Type: text/html

  • In the Timing section of HTTP(S) I could see:
    Request start time: Thu, 05 Jun 2008 22:29:55
    All request retrieved from cache (no server request)

  • Further, in the Info & Cache section of HTTP(S) I could see:
    URL: http://altertunes.com/ajax.php?getchatmessage=true&id=36&username=imoracle
    Content Type: text/html
    Headers size (bytes): 336
    Data size (bytes): 3
    Total size (bytes): 339
    Transferred data size (bytes): 0
    Cached data: Yes
    Cache File: C:UsersabhiAppDataLocalMicrosoftWindowsTemporary Internet FilesLowContent.IE5O184DNELajax[1].htm
    Cache expires: Thu, 01 Jan 1970 05:30:00
    Cache last modified: Thu, 01 Jan 1970 05:30:00

Hence the conclusion was, IE do make an ajax request every 15 seconds as intended. But as it always reads the content from the the browser cache, it never gets the new messages from the server. And hence, Wireshark was unable to show any request being made from IE browser, as the request never goes out of the computer.

Solution to this disaster:
I tried looking for many solutions available over internet. A few of them asks to set some settings in your browser, which will force browser to read all the data from server directly. But for two reasons you surely won’t like to do this:

  1. You surely would like to cache your various images, css and other files for faster loading of your website.
  2. Next, You simply can’t expect your users to do the settings, just to make sure that your ajax runs on IE.

A few other sites asked to set a header information at the top of the php page. Probably something like this:

header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”);
header(“Cache-Control: no-store, no-cache, must-revalidate”);
header(“Cache-Control: post-check=0, pre-check=0”,false);
header(“Pragma: no-cache”);

But even after setting the following header IE was not allowing the ajax requests to fetch the data from the server.

Working Solution:
Then I thought of why not make my ajax requests look unique every time it is fired. i.e. if my ajax request seems like this in the firebug:
http://altertunes.com/ajax.php?getchatmessage=true&id=36&name=imoracle

why not make it look like this the next time:
http://altertunes.com/ajax.php?getchatmessage=true&id=36&name=imoracle&timeid=1234.4323

and like this the very next time:
http://altertunes.com/ajax.php?getchatmessage=true&id=36&name=imoracle&timeid=4324.3589

I tried this up and Bingo! My ajax was working just as great, as it was in any other browser.

I simply changed the url in my ajax request from:
http://altertunes.com/ajax.php?getchatmessage=true&id=36&name=imoracle to
http://altertunes.com/ajax.php?getchatmessage=true&id=36&name=imoracle&timeid=(Math.random()*100000)

and yes, I have my chat messenger working great now.

Try out this solution if you are facing a similar problem with your Ajax requests. I will try to test the same in IE6 if I can find one, but I am pretty sure it will work great there too.

Feel free to post your comments and modified solutions if any.

Happy Ajaxing.

Microsoft Deputy CEO Puzzle

Yesterday I got a mail from one of my friend whose title read as: FW: Microsoft Puzzle. I just click opened the mail to have a look at the puzzle. Though I am not too sure if this puzzle was really asked my the Microsoft HR team for recruiting their Deputy CEO. Anyways by any chance, if it was really asked by the Microsoft HR Team, I thought it worth sharing with you all.

Click for the puzzle here

Try out the puzzle. The deputy CEO was given 15 minutes so you deserve atleast that [:P]. Anyways, if after 15 minutes or half an hour you are still scratching your head, feel free to see the answer below the puzzle.

Enjoy and have fun solving the puzzle.
Abhinav