You are currently browsing the category archive for the ‘jquery’ category.

I just finished watching a session by Remy Sharp at NDC 2010 on jQuery.

I highly recommend checking out his session as it’s not your starter jQuery talk.

Here are a few of the tips:

  • Event delegation: live vs delegate, delegate FTW
    • Live checks from the top of the document.
    • Live is slower
    • Delegate will listen at a specific point instead of the whole document.  Event bubbling will only happen at the element you specify
  • Avoid the DOM, try to do as much preprocessing as possible before using append or any other type of manipulation
  • CSS FTW

Don’t do this:

$("#foo").css({ top: "20px", left "100px" })

Use CSS classes instead.  It’s cleaner markup and it really is where you should be controlling your presentation markup.

$("#foo").addClass("yay")

  • Traversing: find vs context

Using $(“#foo”).find"(p”) to find all the ‘p’  tags is faster than $(“p”, “#foo”) since it uses it under the former underneath the hood.

  • Avoid .get(0).  Just use [0] if you need to get the first element.  Same reason as above.
  • Use $(“#foo”).bind(“click”,fn) vs $(“#foo”).click(fn)
    • The click|mouseover|blur|etc methods are shortcuts for the bind method.
  • Use $.data(this, key) vs. $(this).data(key)
    • Same reason as above
  • $(“div”).length to check of there any matched elements.  Simple, but effective before you go on processing anything.

Check the video to see the rest of the tips.  NDC put up a torrent link for all 121 sessions that comes in a whopping 56GB!

Advertisements

Old news from 9/15, but I want to weigh in.

Yes, it’s true, Microsoft has a free CDN for their JS framework.  This is great news for people who use Microsoft AjaxLibrary (… version 4.0 Preview 5!). 

Here is the usage:

<script src="http://ajax.microsoft.com/ajax/beta
/0909/MicrosoftAjax.js" type="text/javascript"></script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Notice it goes to ajax.microsoft.com. This could potentially already be cached by the user’s browser.  The beauty of a CDN is you don’t have to worry about the location of the server serving the JS file.  It’s a network of servers that are geographically dispersed at key Internet network points.  This minimizes the amount of network hops to your user and relieves the bandwidth on your server.  Plus it frees up another request for the user to download more content off your server (older browser have max 2 connections to a FQDN).  This speeds up the “perceived” rendering of the web page.

But who uses MS Ajax?

Google Ajax Libraries API, Google’s CDN, contains all major JS frameworks except for MS Ajax.  This begs the question the of MS Ajax penetration in the market.

image

Earlier this year a survey was conducted with over 1200 self professed web professionals and posted on Ajaxian regarding the state of the web in 2008.  One of the questions surveyed was which JS frameworks they use, and MS Ajax was nowhere in site and jQuery dominating.

image

I admit when MS Ajax first came out, I played around with it and used it for some of my sites.  I even created my own extender that is used in SharePoint WebParts.  But since I moved to jQuery almost 2 years ago, I have not looked back.   So in the end, it’s too little too late for me.

Resources