Ajax Data - HTML vs. XML vs. JSON

December 19th, 2008   Filed Under Good to know, Javascript, Thinking Out Loud, Tips & Tricks, gyan, json  

Ever wondered why Ajax stands for ‘Asynchronous Javascript And Xml’? I was thinking about it and realized that the ‘x’ is never used or let us say of almost no use.

Classically when introduced by Microsoft, xmlhttprequest object might have been thought to  transport XML for the data transfers, as that was the most popular format which was known as the lightest in weight. But they forgot about the json.

Moreover, the scenario where we are standing today is really different than what had been thought earlier.

What was needed classically was to make a hidden request - get the response - inject in html - and show the result. But for this people started using the xmlhttp object as htmlhttp object. I mean rather than only transporting data, they are using HTML strings attached with the data(or the other way round).

I will show how can we make the request and response lighter and show results faster on the page so that the users don’t have to wait even on the dial up connections.

First let us compare the strings that are sent in a response in different formats.

HTML:

<div class=”resultArea”><h3>This is the result of  your query</h3><p><span>Request Num:</span>4564545<br/><span>Status:</span>Pending</p></div>
XML:

<resultArea>
    <heading>This is the result of your query</heading>
    <requestNum>4564545</requestNum>
    <status>Pending</status>
</resultArea>


JSON:

{heading:”This is the result of your query”, requestNum:”4564545″, status:”Pending”}

Clearly you can see which one uses less number of characters.
Not only that, you are only an eval() away from start using the object with the luxury of (.) dot notations. What else do you need?

Had we been using HTML,  we would have transported unnecessary HTML text along with the pure data to the browser. Just imagine the amount of repetitive HTML in case of a tabular data.

Using XML is also not so convinient because besides being bulky with its starting and ending tags, it is also needed to read via the DOM to traverse through the XML, which is time consuming, resource hungry and inconvinient code.

Post Linx
Permalink | Trackback | | Print This Article | Leave a Comment

Selling Self Respect in Moments of truth

October 26th, 2008   Filed Under Thinking Out Loud  

They believe they can sell emotions and they prove it by doing it. The reality shows on TV these days have gone crazy and breaking the barriers like anything.

Just now I was watching a program called “Moments of truth”. Oh my GOD. They are making money by insulting the whole family before the nation. And the great fool thing is to see that these people do anything for money. Just anything. When they are asked questions, it breaks the crap out of their stomach almost. But when they hear that the “Answer was true”, they are happier than the grief they should be into after someone questioning so badly in front of everybody.

People have started making money by selling their self respect. I think becoming a sex worker is far better job for these  guys.

But yeah they cannot make $500000 in a single night.  Shame on these people.

Post Linx
Permalink | Trackback | | Print This Article | Leave a Comment

Image Slideshow with SEO

June 16th, 2008   Filed Under Good to know, Javascript, Thinking Out Loud, Tips & Tricks, gyan, snippet  

I was doing some experiment with dhtml slideshow a couple of weeks back. Then someone said that all the images should be trackable by search engines(i.e., the image urls should be written on the html page) so that the crawlers can crawl them. The biggest challenge was the load time of all the images and the user experience.Then I applied a trick to overcome the problem. Which pretty much solves my problem and doesn’t shoot up the loading time.

The algorithm goes something like this:

1) Write the image src on the page.
2) Just after the image tag is written on the page with its source, change the image src to nothing.
3) While src is changed, store the original src in some collection for using it for slideshow purpose.

And it works pretty well in both IE and FF.

The code goes like this:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
    <head>
        <title> new document </title>
        <script type="text/javascript">
            function addToSS()
            {
                var obj = document.images[document.images.length-1];
                obj.style.display = 'none';
                var temp = obj.src;
                obj.src="";
                slideShow.imgArr[slideShow.imgArr.length]=temp;
            }
        </script>
    </head>
    <body>
        <img src="img/simpson1.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson2.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson3.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson4.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson5.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson6.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson7.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson8.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson9.jpg" class="hide"/>
        <script>addToSS();</script>
        <img src="img/simpson10.jpg" class="hide"/>
        <script>addToSS();</script>
    </body>
</html>

So whenever next you consider making an image slideshow, please visit this article for reference in case you just forget this trick. Bookmark it please.

Post Linx
Permalink | Trackback | | Print This Article | Leave a Comment

Explicit Inheritance in CSS

April 10th, 2008   Filed Under CSS, Javascript, Thinking Out Loud  

Many of us might have come across a problem of not able to include an already declared class in another class in CSS.Technically speaking, “Explicit inheritance is not possible in CSS”.I have created a small javascript utility, which, if you include in your page, you can break the ice.It is very simple to use. Just include the js file and write your css in the way you wanted to.To illustrate I will show you the problem first and then the solution:I have the following CSS: 

.basic{float:left;margin: 0;padding: 0;}.appBG{background: lime;}#div_1{background: lime; /* REPEAT FROM .appBG */float: left; /* REPEAT FROM .basic */margin: 0; /* REPEAT FROM .basic */padding: 4px; /* REPEAT FROM .basic */}

Ideally inheritance concept says, it should be like this: 

.basic{float:left;margin: 0;padding: 0;}.appBG{background: lime;}#div_1{import: .basic;import: .appBG;}

This js utility leverages you with this behaviour of your css.But the syntax is a bit different from what I have shown just now.Please note that the property “import” works only in IE and other browsers don’t support import property in a css class and simply ignore it.So, instead of ‘import’ (shown in the two lines above), we will use an almost never used property called “content” for this purpose.So your code looks something like this: 

.basic{float:left;margin: 0;padding: 0;}.appBG{background: lime;}#div_1{content: ".basic, .appBG";font-family: arial;}

But if you still feel that ‘content’ property should not be used for this purpose, please comment me. I’ll have some hack to it, so that you can to use the content property in the same way along with css inheritance(I want to do this anyways).My suggestion is to use this utility if you are building or rewriting your css from the scratch. The cause is that you might have already repeated and duplicated many class properties.I have tested this utility only in Firefox 2.0, Firefox 3.0, IE 6.0, IE 7.0 Please notify me if anyone finds any bugs in any other environment(including different combinations of OS and Browsers)Known Issues:If you disable your javascript, it wont work, but then, that would be same as attaching classes to elements using jquery and disabling javascript.Please let me know what you feel and please comment on the idea.Find the files here to test an example.

Post Linx
Permalink | Trackback | | Print This Article | Leave a Comment

A light on Silverlight

February 17th, 2008   Filed Under CSS, Javascript, Technology, Thinking Out Loud, browser  

Microsoft plugin - Silverlight

What is it?

Silverlight is a RIA technology invented by Microsoft to pull some technology share from Adobe’s Flash.
It is a very lightweight plugin for the browsers(1.1mb) and supports Windows/Mac and is cross browser compatible.

What different has it to offer?

Silverlight to me sounded like Adobe Flex in the beginning, but after going through the white papers, I found that it is quite a bit different than flex in the following scenarios:

Not known too much to me but I think the SDK should be tightly coupled with the .Net environment and the development IDE along with the proprietory framework. Hence, I would say that after everything happens … Microsoft is a “Black-Box” for ever for the time being(will explain later the “Post Gates” notion).
But I like the convensions rather than freeness in Microsoft’s policies because it helps to maintain the consistency.
But I also like the technologies for its scalabilities and extendibilities.This plugin has come up with alike markup(xml familiy) for the UI developers which adobe(formerly macromedia) tried to push in late 2001 in the product called “flex” which almost does the same thing atop of flash player.

Flex separated the data and the UI part for the ease of use for the UI developers and introduced an xml based language for it … called “MXML”.

Microsoft as always followed and made a better logo than flex and atop added the biggest solution of crawling the content for search engines.

Its been in the market for quite a long time in its alpha and beta versions but Microsoft has only started marketing this product in a very recent past. Let us see how the market responds to this…

Post Linx
Permalink | Trackback | | Print This Article | 1 Comment

« Previous Entries