jQuery on CDN - Usage Stats

Dave Ward has done an informal study on the top 200,000 sites identified by Alexa to find which of those sites use a public jQuery CDN. His findings:

• 47 of the Alexa top 1,000 include a Google CDN reference.
• 99 of the Alexa top 2,000 reference jQuery on the Google CDN.
• 6,953 of the top 200,000 sites include a script reference to some version of jQuery hosted on Google’s CDN.
• 989 of the Alexa top 200,000 sites reference jQuery UI on the Google CDN.

Dave recommends keeping your site’s CDN reference updated to the latest compatible version of jQuery for more performance gains. This is because popular sites generally upgrade to the latest stable version & sites must reference exactly the same CDN URL in order to obtain the cross-site caching benefit.

Google CDN hosts:

• jQuery (versions 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2, 1.4.0, 1.4.1)
• jQuery UI (versions 1.5.2, 1.5.3, 1.6.0, 1.7.0, 1.7.1, 1.7.2, 1.7.3, 1.8.0, 1.8.1, 1.8.2, 1.8.4) 
• File to reference looks like this - http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Microsoft Ajax CDN hosts:

• jQuery (versions 1.3.2, 1.4, 1.4.1, 1.4.2)
• jQuery Validation library (versions 1.5.5, 1.6, 1.7)
• jQuery UI 1.8.5
• File to reference looks like this - http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js

(details as of Sep, 2010)

As per the BuiltWith.com website (which tracks technology usage trends), nearly 37% of the top 10,000 sites currently use jQuery in any form (not just from the CDN)

Also see:
jQuery Tips, Tricks, Trivia
Web apps in less than 10 KB
Popular JavaScript apps dissected

Read More

AJAX is like steriods for web apps

An ever increasing number of web apps are utilizing AJAX to deliver an addictive user experience. Here's a list of apps/mash-ups I like that leverage AJAX -

* YouTube Instant Messaging - developed by Stanford University student, Feross Aboukhadijeh, this is a predictive search results feature for YouTube that is inspired from Google Instant. This has in turn inspired Google Maps Instant.

* Google Scribe - This Google Labs product provides autocomplete suggestions while you type, like the free desktop tool PhraseExpress After you install & activate the Scribe bookmarklet, it will start offering suggestions to complete sentences whenever you type within textareas or textboxes in any site.

work in progress...

Read More

Screen scrape with jQuery, AJAX, JSONP & YQL

Since reading this excellent article about scraping content from a Wikipedia page using Yahoo! Query Language (YQL) as a proxy for cross-domain Ajax, I'm hooked to YQL. YQL helps in circumventing the same-origin policy that prevents a script loaded from one domain from getting or manipulating properties of a document from another domain.  YQL has been around for about 2 years now & last year Yahoo introduced the capability to execute the tables of data built through YQL using JavaScript.

Ajax, jQuery, JSONP (JSON with Padding) & YQL make a heady combination - check Christian Heilmann's code samples.

Some facts about YQL from around the Web (work in progress) -
* YQL is a hosted web service that can scrape HTML for you. It also runs the HTML through HTML Tidy and caches it for you.
* It only returns the body content of the HTML - so no styling (other than inline styles) will get through.
* ...it treats the info on the web as a virtual table that developers can manipulate in a standardized way, regardless of the API that data came from.
* YQL understands and supports data sources like RSS, Atom, JSON, XML, CSV, HTML, Flickr, Yahoo! Finance, Weather, and so on.
* ...makes client-side mashups possible without using server-side proxies.
* Usage Limits:
Per application limit (identified by your Access Key): 100,000 calls per day
Per IP limits: /v1/public/*: 1,000 calls per hour; /v1/yql/*: 10,000 calls per hour

Also see:
HOW TO prevent screen scraping 
Google Spreadsheets functions for scraping external data

77

Read More

Need a Progress Indicator image-get a customized Throbber

The animated image that you see in most AJAX based websites to indicate progress is called a Throbber. If you ever need a Throbber, you can turn to the free and excellent Throbber Generator by Yannick Croissant (A.K.A Country). You can choose from a variety of indicators and also change the background and foreground color of the Throbber.

Trivia - I was able to know Yannick Croissant's site is in French from the awesome auto-detect language feature on Microsoft Translator and Google Translate.

Related:
Make a Progress Indicator For Slow-Loading Pages
Build a Dynamic Progress Page For ASP.NET Pages

Read More

HOW TO speed up a ASP.NET AJAX web app

Just like making web pages cross-browser doesn't have a straight-forward solution, speeding up your ASP.NET AJAX based web application requires an understanding of it's internal aspects. Outlined below are some performance tips compiled from various sources -

• UpdatePanels can sometimes be dangerous. If you are using an UpdatePanel, reduce the number of controls within it if you can.
• Update without UpdatePanels - call WebMethods from JavaScript using ASP.NET AJAX
• Enable Compression and Caching using the scriptResourceHandler element in the web.config of your ASP.NET AJAX application.
• Consider setting ScriptManager control's properties LoadScriptsBeforeUI to "False" and explicitly set ScriptMode to "Release".

Generic ASP.NET performance improvement tips that also strongly relate to ASP.NET AJAX -

• Use tools like FireFox Firebug addon YSlow or the Fiddler add-on neXpert, to analyze web pages and identify why they're slow.
  
• Don’t run production ASP.NET Applications with debug=”true” setting in web.config -
• Disable viewstate if possible.
• Cache images & other static files that do not change frequently.
  

To be continued...

Also see - HOW TO improve the front-end performance of a website

Read More

AJAX Frameworks for ASP.NET

If you are planning to AJAX-enable a ASP.NET website, a good option is of course the ASP.NET AJAX Framework from Microsoft due to it's better integration with the Visual Studio IDE and documentation. Occasionally I see questions on the Forums from folks having issues making ASP.NET AJAX work. Very often this is because they have not picked the correct version of ASP.NET AJAX to go with the ASP.NET Framework version.

So here is a quick summary. If your web application is based on ...

• ASP.NET 3.5 - you need ASP.NET AJAX 3.5 and it comes built-in with VS 2008. If you need specialized controls from the AJAX Control Toolkit use Toolkit version 3.5. If you are specifically building on top of .NET Framework 3.5 SP1 using Visual Studio 2008 SP1, use Toolkit version 3.5.20820. (System.Web.Extensions, Version= 3.6.0.0 corresponds to ASP.NET 3.5 Extensions December CTP)
  
• ASP.NET 2.0 - you need ASP.NET AJAX 1.0 and you have to manually install it in VS 2008 or 2005 and make sure the web.config of that application correctly points to the 1.0 assembly. Toolkit version 1.0 will only work with ASP.NET AJAX 1.0.
• ASP.NET 1.1 - ASP.NET AJAX is not supported. You would have to choose a Framework like the free, cross-browser Anthem.NET which works works with both ASP.NET 1.1 and 2.0.

For implementing simple AJAX functionality in any of the ASP.NET Framework versions, you can also consider using jQuery. Some of the jQuery plugins fare better than the Extenders in the ASP.NET AJAX Control Toolkit.

If you want to compare AJAX Frameworks for ASP.NET, this outdated article on the comparative features of various Frameworks can give you some pointers to base your research on.

Related links:
Free ASP.NET AJAX E-learning course
HOW TO implement AutoComplete with jQuery & ASP.NET
Is ASP.NET AJAX truly cross browser?

Read More

HOW TO implement AutoComplete with jQuery & ASP.NET

Auto-completion of search terms is an AJAX feature popularized by Google that reduces typing by listing possible keywords as the user types. ASP.NET developers typically use the AutoComplete Extender that is the part of the ASP.NET AJAX Control Toolkit to plug it to a text box to implement auto-completion. There are other alternatives but one of the best options I've found is jQuery AutoComplete Plugin.

jQuery is a lightweight JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It was released in January 2006 by John Resig, a JavaScript Evangelist for the Mozilla Corporation.

Using the plugin is a no-brainer as the code sample will show. All the grunt work is done by the jQuery Autocomplete Plugin. Building & deploying an Autocomplete solution takes just a few minutes and hardly any lines of code. There are a various specialized jQuery Autocomplete Plugins that offer additional features than the official jQuery Autocomplete Plugin from which they are extended.

Talking of jQuery deployment, Dave Ward recommends having the jQuery's external JavaScript files referenced from the copy at Google AJAX Libraries CDN rather than hosting jQuery on your own server. This has the advantage of providing decreased latency, increased parallelism, and better caching.

Also see:
Auto-completion with jQuery Plugin (includes ASP.NET code sample)

My experiments with the ASP.NET AJAX AutoComplete Extender

ASP.NET Server Controls' Adaptive Rendering behavior in downlevel browsers

Read More