Monday, April 19, 2010

Create quick and dirty YQL Mash-up in 10 seconds (using MashupBuilder)


Sometime, you might have experienced that  you have to wait till whole website is downloaded just to see a stock-quote, game score, or league points table(etc.). Mostly these kind of websites are poorly managed, and they are very slow or contains too many annoying ads. I have created a Mash-up-builder that will help you in creating YQL based mash-up, very quickly. These mash-ups will be capable of showing just a small portion of the original web page. Mash-up will be dynamic and content will be pulled from original page every-time you will visit the mash-up. Additionally mash-up will be hosted on my website, so you need not to bother about hosting, though you can copy HTML code anytime if you want to host on your own.(these mashups are pure JavaScript, no server side coding).

Advantage is getting a faster & neat web page.

It was very easy to create mash-up-builder. I used YQL's html table.

How it works?
As you see that YQL's HTML table gives you output if you provide the URL and xpath of the content. Similarly Mash-up builder take 2 parameters as input, a URL of the web page and an XPATH of the content. Once these 2 things are ready, I cleverly used JSONP to render the content on page.

I recommend you to see the source {view-source} to understand the working of the mash-up.


Warning
Since mash-up builder injects HTML content directly from external source, its  prone to CrossSite Scripting attack. My website is not hosting any private content , so to me its fine because no security can be breached, do not try to replicate this functionality on your website if your website is hosting some private content.

  LIVE DEMO  




Feel free to share on twitter, Facebook & other social networking sites. 

Saturday, April 3, 2010

IPL Tables made sortable

Ever since I visited the official IPL website, I hated those static points table.

So I used YQL to grab that data and place in very sortable fashion here.




To create this I am using,
YQL 
Google visualization API  (optionally one can use YUI)
Jquery tabs