The Widget Way !!!

I am a great fan of the Web 2.0 way of rendering its pages. The special effects, the sliding of windows, the drag and drop, the dynamic tabs, the user persona and the speed and effectiveness of the website. The feed capabilities and the user interaction get these sites up and running and as a result we see over a million users using these sites. I was asked to evaluate two of the best sites which have one of the best interfaces I have seen (Not forgetting those sites with huge flash content which makes the loading extremely slow and makes me want to close even before it opens up). I am talking about Netvibes and iGoogle. I will be talking about them and will try to compare them both as a user and as a developer. I will start as a user and then gradually go into becoming some what of a developer.

Both the interfaces are great. They are a treat to watch and in functionality they are the same. The guy who ever thought of the idea of having bulk data from all those pages you browse into one single page must have some imagination. The widget concept is the root here and the interaction between the widgets (drag and drop) is very fast. But I like the Netvibes interface better. They have many of the gadget and we could even add our own custom code (html) to make certain widgets. I feel Netvibes uses those nifty AJAX functionalities the most. Even when I need to choose another widget to add, iGoogle transfers me to another page and then it lets me add it. But with Netvibes I add it right from my own screen using the javascript libraries that it uses. Netvibes has more themes and stuff and those combinations are deadly. The time it takes to load is kind of the same. Netvibes even has the facilities where by you could add widgets or tabs. You could also go to 'Universes' (branded pages with widgets) and explore them.

Netvibes even has a search facility where by you could search within the widgets you added for a term. The search results loads up in the tabs (after filtering) and once you close the search it comes back to normal (and that too in very high speeds). Adding of feeds (xml or opml) is simple in Netvibes and iGoogle. Netvibes gives us a more of a view of the description as a tool tip where as iGoogle gives it as a clickable show all image. Of course Google has a Single Sign On facility and they have much more pages which have buttons telling you to add the content to your iGoogle, but for the sheer look and feel I will go with Netvibes.

Both these cool sites having tabbing facilities available (the AJAX way). These tabs are loaded when required and not before. The tabs Netvibes provide have more functionalities for the user (adding it to the tabs list, adding an icon to the tab and other stuff). Application could also be configured in individual tabs (I have the whole meebo application in one tab) for Netvibes. Although this is just adding the page url to the widget content, its effective. The one thing that I saw different for iGoogle is that the tabs could have its own look and feel. I don't see this as a shortcoming for Netvibes but as a special feature for iGoogle.

Now the developers view. Netvibes uses moo.fx for its neat Javascript features where as iGoogle uses its own libraries along with yui. The architectural basis is the same. They have a main frame for each widget and a unique id for the widget( may be a global variable in Javascript). They keep on incrementing this for each widget so that they have a unique id in that page. The widget is a combination of divs, spans, images and iframes. The main widget frame will have a header frame which holds the header information for the widget and the content which holds the iframe which has all the contents. This gives us the additional advantage that the widget content could be a stand alone application having its own logic and still be embedded inside the widget as the container is an iframe. The buttons you see (add to iGoogle and stuff) adds this content url to the base site (after you log in) and then you get to see the application inside an iframe.

The drag and drop are all from the moo.fx library (Netvibes). Alternatively they could also have used script.aculo.us for their effects. They have pretty good tabs facilities which I guess script.aculo.us does not have ready made. I guess the code that iGoogle uses may be python based ( I honestly dont know ) but have not sure what Netvibes uses.

The reason for my sudden interest (or may I say incidental) is that I was trying to mimic this feature in a my own site. Now I used script.aculo.us and the base was set up within 6 hours using Ruby On Rails. ROR has great support for those AJAX and Javascript features that script.aculo.us provides and I really dont need to write a single line of code. Aptana IDE is the IDE of my choice when it comes to Ruby On Rails. The auto complete feature is not complete in this IDE but it's better than nothing. There are tons of libraries that I intend to use (tags, ferret and other plugins) and I am looking through these stuff as of now. Hope I will end up a better developer with this !!!

Small Task

These days I am trying to understand how the whole connectivity thing works. How do you post your contents (which may be normal HTML pages or flash widgets) to your favorite sites? The answer is pretty simple. You host your contents some where else and give the code which accesses these hosted files in your favorite site(say blogger). But how do you add external content to some site which is intended to give you only their stuff?? Blogger does this but allowing the used to add scripts and HTML content as page elements. I was given the task of finding how I can post something (say a flash file -swf) to facebook.

At first I thought of the task to be a simple one. Go to some site which has used the actual add to Facebook button and use http header and trackers to get the URL that is used to add contents to facebook. As my content was a widget, I decided to look through widgetbox. The site is a great site where you could actually make widgets (even write custom code) , save them and even add these widgets to your facebook account. The URL too was simple. It used the sharer.php page of facebook.

Now when i actually access the page I see a input box where in I am supposed to add my URL. Adding the widget.com URL worked fine, but when I added my flash video (hosted at my side), I got just the URL and no flash video. I started looking at the part where it shows a confirmation and saw many hidden variables. For the widgetbox URL these hidden variables were filled. But how does it do that ?? The only difference I saw was the meta data that was present in the widgetbox html. After googling some time I got the page from facebook (yeah I am a dumbass) which said to use the meta tags to populate the hidden fields. It so happens that the guys in facebook are so smart that they get the meta tags from the inputted html page and according to certain specified tags they conclude the content of the page and render it accordingly making the shared page either a normal html page, a video clipping or an audio clipping. The various options are showed in this page.

It turns out that getting the meta tags is not great a deal either. PHP4 and later we get this information using get_meta_tags(URL) which returns you a map of the tags(Facebook seems to be php code :) ). They then may be populating the hidden fields which then ets submitted to the actual page. Nice and effective trick I say !! I don't think the same goes for all those social websites but I am yet to explore them (God bless ).

During this exploration I stumbled upon some thing that may be useful for the future too. Its called Open Social and its from our very own Google. It provides a set of APIs for social websites across multiple websites. As I understand you can write your own widgets which may do things for you in your account (like adding a scrap in orkut ) but its embeddable. Many websites implement these APIs and in the near future we may have a set of APIs which are common for all those social websites. I had to join in this great venture and I have got my approval. Yet to start with programming the orkut sandbox though !!

That's all for today. And see you the next time I have something to write !!! Ciao !

The Enhanting World of Java Script

I got a call from a person today and he asked me some questions. I did not know the what he wanted to know about me or what his final goal was( may be he wanted to intimidate me). It was a short interview and he concentrated on asking me if I knew this and that. The first thing he asked me was if I knew Java Script. He wanted me rate myself in Java Script. Not forgetting what a great 'language' Java Script I said I stood at 3 out of 5. This made me write some thing I know about Java Script thus justifying the 3 marks.

Java Script is an interpreted language and it could run on any application which has the Java Script interpreter in it. Major browsers, Adobe Acrobat Reader are some examples. What Java Script primarily does is facilitate the user to run scripts with in the application. In the case of browsers its accessibility of the DOM (Document Object Model) makes it powerful. It is not necessary that the browser that you use has all those Java Script features required. It is not necessary that the Java Script code is even executed at you end (security reasons). To cope up Fault Tolerant Systems may be used by those who create the actual page. It could access parts of the shown web page and change its attributes dynamically. That's the whole deal. There are many libraries that make life simple for you along with providing those nifty user interfaces and awesome effects.

Its a weakly typed, prototype based language. Prototype is an object that can be cloned to produce another object. The concept of classes is different from the so called prototype programming and the attribute can be dynamically changed at run time too. Every function created has an object called prototype and addition of new attributes can be done using this Object. That is you are dynamically changing the attribute of an Object so that it could be used for further processing in the rest of the script.

function circle(){
}
circle.prototype.pi=3.14159;

function alertmessage(){
alert(this.pi);
}
circle.prototype.alertpi=alertmessage;

Now all those circle object that you create will have the alertpi function and you could call the function. We could even extend the normal defined Objects (like String) and it will be reflected through out the whole code. Another way to code this would be -

circle = {}
circle.pi = 3.14159;
function alertmessage(){
alert(this.pi);
}
circle.alertpi=alertmessage;
circle.alertpi();

Declaring stuff inside the curly braces is as simple as var a = { pi : 3.14159 }. This is what essentially JSON delivers too. The essential idea of associative arrays also makes a difference with Java Script. ie a.x and a["x"] are the same. Eg.

circle = {}
circle.pi = 3.14159;
function alertmessage(){
alert(this["pi"]);
}
circle.alertpi=alertmessage;
circle.alertpi();

There are private members and public members in Java Script and they can be quite useful.

function aa(a){
this.p=a;
var secret =10;

function pp(){
alert(secret);
}

this.service = pp;
}

function ss(){
alert(this.secret );
}

ll = new aa(10);
ll.ss = ss;
ll.ss();
ll.service();

Here secret is private, p is public, and service is privileged (access to private and public stuff). Calling ll.pp() will give an error while calling ll.service() will give 10. Even calling ss will give you undefined.

CSS along with Java Script provide a great deal of WEB 2.0 'ism' to any web application. They are very frequently used to get the AJAX functionality so that the user stays in the same page even though the details are updated in different parts of the page. The accessibility to the DOM object of Java Script is made use of to update the parts of the page dynamically. The main Object responsible for making AJAX possible is XMLHttpRequest (XHR). Due to the differences between the browsers and their rendering techniques the initialization of this kind of object differs (new ActiveXObject for microsoft and new XMLHttpRequest for all the others ). But once it has been instantiated the properties( onreadystatechange, readyState etc) becomes visible. We could use the POST or GET methods to pass data and the object finally will have the resultant XML as the responseXML / responseText. We then use this text to load it into the actual object in the DOM using the innerHtml method (which is present of all objects in the DOM).

Now for the bare essentials core Java Script is fine. But when you need more functionalities to be done in your site then the pain of structuring your whole Java Script becomes a hurdle. To facilitate this a lot of libraries are in place now. The primary one being prototype. Prototype has many added functionalities like the easy access of the DOM Objects , nice AJAX manipulation, JSON support and some nifty Object oriented features (creation of classes ). Jquery is another library that is quite useful. Another Java Script library which beautifies your web application along with adding the necessary functionalities is the DOJO toolkit. Many other toolkits like Script-aculo-us and MooFX make things easier for the programmer.

Now to understand at least some of these functionalities ( I know I am bad at writing), we primarily need to see some source code. When I see some features that intimidate me in any web application (done by Java Script of course) what I do is see the source code and try to manipulate the code. As Fire Fox is my favorite browser I use Fire Bug for the debugging, viewing and manipulating purposes. It is a great tool and is a must have among all those Fire Fox plug ins.

Even though Java Script makes your life easier by trying to provide up to date information, it has many downsides to it. It may make the loading slow sometimes( as I have faced ). The security concern is a major hiccup for Java Script. I would never pass authentication information of any kind using Java Script as it could be easily replicated. Other major problem is the eval function which evaluates an expression given (converting between different objects).

One of the people I really look up to regarding Java Script is Douglas Crockford (JSON). He has a lot of videos which describe the Java Script language and all its functionalities. There are many tutorials that you will find in the net that will make you a better programmer. Don't forget to try out the Yahoo UI when you are comfortable.

As of Java 6, they have introduced Java Script support in their java.script package which is said to make use of the Mozilla Rhino engine( A Java based engine). I hope I could try to implement some of those neat features that they say they have.

I am still understanding what Java Script is and if you find some errors in my writing then please comment on this.

The Overview

This is it .. After having a good one on one with one of my mentors I have got an enlightenment. Blogging is the present, future and a way to let the world know the past. It gives the readers an insight of the individual and lets him judge whether the person is of any good or if at all is he trying to become someone. Blogging is necessary, not sufficient ( from the mathematics teacher who taught me during those schooling years . Of course he was not referring to blogging ).

A resume is just a document, but a blog is an idea. An idea that has all those branches and sub branches. And each part has its own significance. I always thought before this 'why do even people waste time in blogging ?? Dont they have anything useful to do !?? ' > now I tend to differ. They were and are doing some thing significant and the greatest part is that they are sharing it with the world. Just like Open Source(Yes I am a fan). Free as in people are allowed to read, comment, criticise, like, dislike or plainly ignore.

I am diverse when interests are taken into consideration. But I like the concept of having to tweak code. I am a developer and not a cracker by any standard( atleast I have not grown to that standard ). But I try my luck with most of the things. I like to experiment and go on. I dont stick to most of the things I do. But I try to get some thing out of it.

But what have I done ? Nothing much but I will discuss about somethings in my future blogs ( God Bless) .. Some of my interests are

• Java (all flavours). The thing about Java is that even if you have a general idea of a framework or a standard you are still in the middle of the god damn ocean. Theres a lot to learn and a lot to adapt and understand. I have tried ( trust me when i say tried) Core Java, Java with XML (all those apache packages, the DOM packages, the excellent and life saving Tagsoup parser but not the SAX parser :( ), Atlassian Jira application(Web Works X Works and loads of other stuff whew !! ), Atlassian Confluence ( same as above) etc. I whole heartedly thank the ECLIPSE community for developing on of the best softwares ever without which me and the rest of the world would be in total disarray.
  
• Some architectures (some thoery and some by practicals). I have been facinated by the SOA (Service Oriented Architecture) and its peers. The concept of reusability and agility are made the base here. The flexibility that any application can hook into another application (different platforms, different code but the required data) is great. And I have gone through the Head First - Design Patterns (though some of those patterns went straight over my tiny brain).
• Ruby and some python and perl. These are one of the best languages ever. They are some times draggy and slow but I get to do some cool stuff using them. Siting an example I have a small python script which I use to make the folder from which I call the script as the base of the http server. For some that might be like 'thats easy' but for me thats a BIG deal !! Ruby and Ruby On Rails for its flexibility and usability. Now I intend to dive deep into ROR as I have found Django (ROR for python) a little cumbersome (Sorry Python Fans). Perl's CPAN is the one of the best archive maintainers as yet. I have also wet my hands with Scala but not a fan.
• JavaScript (YEPP !!! ). I am a big fan of JavaScript (As all those Yahoo ! Guys are). I consider it a under estimated language ( but people may tend to differ after the wonderful things that Yahoo! has done with their web sites). The prototype helper and AJAX have all been great helpers to the development of this nifty language and now we have packages that do wonders with your website. Its not difficult now a days to set up a smooth looking web site with all those cool Styles (CSS thanks ) and great effects (courtesy script.aculo.us and moo ). ROR has a done a great job here by using all those features and I guess thats one of the reasons that they have a lot of developers thrilled in working in Rails. Douglas Crockford ( founder of JSON) is my idol when it comes to Javascript and DOM concepts. His videos about the Javascript language are excellent and a must watch.
  
• Firefox. What a tool. I use a Windows XP system at work( I denounce that still) but my favorite browser is definitely FireFox. I even had the original Mozilla source downloaded but did not get the time to work on it. I have some of those neat plug ins installed( FireBug is my favorite ) as well. When Safari came for Windows I had to try it as I had heard that it is the fastest of the browsers. But after using it twice or thrice I had to revert back. Its not because Safari is bad, its just because FireFox is better. Want me to talk about IE ? NO COMMENTS !!
  
• Gtalk - what a tool man. These people have just rocked the entire world with their ground breaking tools. Be it Picasa, or the new Gmail. The do it and they do it with class. Google Maps and Google Earth where nothing like things the people saw. They were different and they were glorious. I have to say hats off to you guys for supporting Open Source and even conducting Google Summer of Code. I have even used Java to interact with the Google Desktop Application (which I would say is what i use to search and not windows search) and it feels it (SOA comes into picture here). Yahoo! Messenger was some thing that I have been using for a long time but it would sometimes stall my system( and believe me I get really UNHAPPY when my system gets stalled). Pidgin( the famous Gaim) has been my next love. The concept of getting your own jabber server up and running is great. I have tried out with WildFire XMPP server (I like XMPP too ! surprise ..) and the experience to set it up with and authentication system like LDAP is great. I really wished that my organization had a WildFire Server properly maintained and that every user who uses the Knowledge sharing platform (Confluence in my case) used this server for chat purposes. There is some amount of configuration but at the end of the day we get a system that integrates our ideas along with the ones of our customers. Its is some work to have an interface (pretty much like the small pop up chat messages that we see in GMail) work with confluence, but once you have it, software engineering becomes a piece of cake. I have also been using Trillian, Meetro and Exodus (if a jabber fan go through the list of recommended jabber clients ).
• For the concept of getting to host web site from your own system, I thank Apache. They have been pioneers in the field of Open Source and their Tomcat has laid the base of the whole Web Application Server. Apache is just not Tomcat though. Its a whole set of applications and projects that make your life easier as a developer and as a user. I aspire and hopefully will be a part of one of their Open Source initiatives ( may God bless).
• Linux. Though I know a little, it still makes me want to know more. Thats Linux for you. The whole concept of giving the user more data, information and control is what makes Linux kick ass. An of course the user does not get to be a dumb nut head sitting in front of a system that crashes even if a fly sits on top of the monitor( Yeh !! you know whose nuts I am striking !! ). I love linux simply because its like break it or make it. You will learn some thing about this great piece of art if you even try to do one of them.
  
• Stumble Upon has been one of the best things that has happened to me. I suddenly start reading articles, seeing interesting stuff and killing time(in a constructive way). The plug in with FireFox makes things easier. Previously I used to be a regular with Wink but now its all about stumbling now !!
• I have also done some work in PHP and its excellent connection with databases like MySQL. I found php to be very powerful. So powerful that Yahoo! has developed their own PHP that they use in their applications(both internal and external I suppose). Installing something like XAMPP where every thing is set up for you and you just need to code is some thing that is too easy for any developer. I should have mentioned PHP along with Ruby and python but thought of having this separate as this is a whole new area.

What have I not done ? I have not taken part in any Open Source projects and I see that as a disgrace. I have to and will be part of an Open Source project once.

I have had a great life where in I enjoyed more than I studied and there were many people who supported me and made me what I am today (If I am someone at all).

I here by solemnly swear to blog almost frequently so that I could share what I have experienced during these very few years.

Dinesh