jQuery 1.1.3: Speed Improvements and Bug Fixes

After a long wait, jQuery 1.1.3 has been released! (Download it at the jQuery site) When I first adopted jQuery a year ago, the library boasted both faster speeds and smaller size than any other JavaScript Ajax/DOM tool. With the release of jQuery’s version 1.1.2, a number of jQuery’s operations became very slow and inefficiencient, as evidenced by MooTool’s SlickSpeed CSS Selector Test (found via Ajaxian) which crept up a few weeks ago.

This new release boasts an 800% speed improvement with a number of its selectors along with various enhancements across the board! The selector speed boost makes me one happy camper. Check out the enhancements as it compares to 1.1.2:

Browser jQuery 1.1.2 jQuery 1.1.3 % Improvement
IE 6 4890ms 661ms 740%
Firefox 2 5629ms 567ms 993%
Safari 2 3575ms 475ms 753%
Opera 9.1 3196ms 326ms 980%
Average improvement: 867%

And here’s how it now stacks up against the SlickSpeed test:

Browser Prototype jQuery Mootools Ext Dojo
IE 6 1476ms 661ms 1238ms 672ms 738ms
Firefox 2 219ms 567ms 220ms 951ms 440ms
Safari 2 1568ms 475ms 909ms 417ms 527ms
Opera 9.1 220ms 326ms 217ms 296ms 220ms

In addition to the speed enhancements, there were several other notable things:

  • Unicode Selectors: Yup…now you can use fancy non-english characters.
  • Escape Selectors: This is awesome. Now, if you use weird characters (i.e. punctuation) in a class/id name, you can now escape those characters within the selector syntax. E.g. $(“div#foo\.bar”)
  • Inequality Selector: You can now select elements where their attributes do not match a specific string of characters. E.g. $(“div[@id!=test]”)
  • :nth-child() improvements: jQuery has supported selectors like :nth-child(1) and :nth-child(odd) since the beginning of jQuery, now they’ve added advanced :nth-child selectors, such as:
    • $(“div:nth-child(2n)”)
    • $(“div:nth-child(2n+1)”)
    • $(“div:nth-child(n)”)
  • Space-separated attributes: After being removed in jQuery 1.0, this selector has now been brought back by popular demand. It allows you to locate individual items in a space-separated attribute (such as a class or rel attribute). E.g. $(“a[@rel~=test]”)
  • Animation Improvements: Animations are now significantly faster and smoother. Additionally, you can run more simultaneous animations without incurring any speed hits.
  • DOM Event Listeners: Internally, the jQuery Event system has been overhauled to use the DOM Event system, rather than the classical “onclick” style of binding event handlers. This improvement allows you to be more unobtrusive in your use of the library (not affecting the flow of other libraries around it). Additionally, it helped to resolve some of the outstanding issues that existed with binding event listeners to IFrames.
  • Event Normalization: Some great steps have been taken to normalize keyboard and mouse events. You can now access the event.which property to get most details about the specific key or button that was pressed.
  • Multiple .is(): The .is() method can now take multiple selectors, separated by a comma. This allows you to test your jQuery set against multiple selectors. E.g. $(“div”).is(“:visible, :first”)
  • Browser Version: A commonly requested feature, by plugin authors, was a way to determine what browser version their users were using. We now expose an extra property through which this information can be accessed. E.g. jQuery.browser.version

Additionally, the jQuery team has addressed 80+ bugs and has roadmapped out the next two releases (v1.1.4 and v1.2). To check out the full jQuery 1.2 roadmap, go here.

Ultimate Web 2.0 Collaborative Game: Eat Poop U Cat

Via Ajaxian a few days ago, I was re-introduced to a great party game that I have played with pen and paper a couple times in my life. The game results in off the wall drawing and serious laughs and it has found it’s way to the web in a collaborative game of sweet humorous action.

EatPoopUCat is the name of the game. Funny name? Yeah, well this game goes by many. You may know this game as: Fax Machine; The Paper Game; Pictophone; The Picture Sentence Game; The Sentence Game; Paper Telephone; Sentence Picture; Telephone Pictionary; Descriptionary; Writesy Drawsy; Cricket Cricket I’m On Fire; or Moneyduck.

The game works like so: Someone comes up with a sentence or phrase. That phrase goes to another person who draws a picture of the phrase. That picture goes to the next person who writes a phrase to the picture (without seeing the first phrase). Rinse and repeat. The web-based game works the same, you type a phrase in a box and hit submit, or you draw right on the site or upload a picture from your compy. Easy as that! Here’s an example result of a game I participated in:

Phrase 1:For your children, go straight to the wall and jump it like a gazelle

epuc1

Phrase 2: It was a bright sunny day and kids were playing in the frontyard

epuc2

Phrase 3: Outside the bar, Phil was roughed up by some plug-uglies who beaned him in the head with a volleyball.

epuc3

Phrase 4: If the beer and power cords don’t get you, the low flying soccer balls surely will.

epuc4

Final Phrase:He has 3 choises: Drink 2 Beers, throw Frisbee-pizzas or be a human bridge for the electricity.

It’s pretty cool how the phrases/pictures change as it gets passed from person to person. In addition to the ability to do the above, each ‘story’ can be commented on and rated. Plus, for pictures or interpretations you can give “kudos” to the author/artist. Oh! And as you participate in different threads, you can keep tabs on the statuses of those strips that you have done.

Lastly, for those of you that are Web 2.0 geeks, the site is Ajaxified with a combination of Google Web Toolkit, Amazon S3, and Amazon EC2, along with an in browser drawing utility that uses the Canvas element. Pretty snazzy. I’ve already wasted a great deal of time in the evenings on this site and many more to come!

jQuery 1.1a Released

The jQuery 1.1a has been released today by the jQuery team! Its important to note that this is an alpha version before you go out and install it in a production environment, but the jQuery team asks that people give it a round of testing prior to the release this weekend.

The “Quick and Dirty” on v1.1:

  • Its selectors are 10-20x faster than those in jQuery 1.0.4.
  • The documentation has been completely revamped.
  • The complexity of the API has dropped by 47%.
  • It has a ton of bug fixes.
  • It has a bunch of great new features.
  • … and it’s still the small 19KB that you’ve come to expect.

With this release come a lot of API changes:

Firstly, :nth-child() now starts at 1, instead of 0.

A number of methods have been re-organized/re-named. Here’s the translation of old to new functions:

Old Way (1.0.x) New Way (1.1)
.ancestors() .parents()
.width() .css(”width”)
.height() .css(”height”)
.top() .css(”top”)
.left() .css(”left”)
.position() .css(”position”)
.float() .css(”float”)
.overflow() .css(”overflow”)
.color() .css(”color”)
.background() .css(”background”)
.id() .attr(”id”)
.title() .attr(”title”)
.name() .attr(”name”)
.href() .attr(”href”)
.src() .attr(”src”)
.rel() .attr(”rel”)
.oneblur(fn) .one(”blur”,fn)
.onefocus(fn) .one(”focus”,fn)
.oneload(fn) .one(”load”,fn)
.oneresize(fn) .one(”resize”,fn)
.onescroll(fn) .one(”scroll”,fn)
.oneunload(fn) .one(”unload”,fn)
.oneclick(fn) .one(”click”,fn)
.onedblclick(fn) .one(”dblclick”,fn)
.onemousedown(fn) .one(”mousedown”,fn)
.onemouseup(fn) .one(”mouseup”,fn)
.onemousemove(fn) .one(”mousemove”,fn)
.onemouseover(fn) .one(”mouseover”,fn)
.onemouseout(fn) .one(”mouseout”,fn)
.onechange(fn) .one(”change”,fn)
.onereset(fn) .one(”reset”,fn)
.oneselect(fn) .one(”select”,fn)
.onesubmit(fn) .one(”submit”,fn)
.onekeydown(fn) .one(”keydown”,fn)
.onekeypress(fn) .one(”keypress”,fn)
.onekeyup(fn) .one(”keyup”,fn)
.oneerror(fn) .one(”error”,fn)
.unblur(fn) .unbind(”blur”,fn)
.unfocus(fn) .unbind(”focus”,fn)
.unload(fn) .unbind(”load”,fn)
.unresize(fn) .unbind(”resize”,fn)
.unscroll(fn) .unbind(”scroll”,fn)
.ununload(fn) .unbind(”unload”,fn)
.unclick(fn) .unbind(”click”,fn)
.undblclick(fn) .unbind(”dblclick”,fn)
.unmousedown(fn) .unbind(”mousedown”,fn)
.unmouseup(fn) .unbind(”mouseup”,fn)
.unmousemove(fn) .unbind(”mousemove”,fn)
.unmouseover(fn) .unbind(”mouseover”,fn)
.unmouseout(fn) .unbind(”mouseout”,fn)
.unchange(fn) .unbind(”change”,fn)
.unreset(fn) .unbind(”reset”,fn)
.unselect(fn) .unbind(”select”,fn)
.unsubmit(fn) .unbind(”submit”,fn)
.unkeydown(fn) .unbind(”keydown”,fn)
.unkeypress(fn) .unbind(”keypress”,fn)
.unkeyup(fn) .unbind(”keyup”,fn)
.unerror(fn) .unbind(”error”,fn)

What’s more? Well, the jQuery team will be posting throughout the week on all the cool new things you can do with jQuery 1.1. I’m looking forward to seeing the changes! Oh, with regards to changes, its important to note with that list of functions above…the old method will no longer work come v1.1. To keep those functions in use, a ‘helper’ library will need to be used…chances are that won’t be available until the 1.1 final.

jQuery 1.0.4 Released

John Resig over at jQuery has announced the release of jQuery 1.0.4 to the public! As usual, there are bug fixes…plus a bit more. His focus for this patch was adding improvements to jQuery’s Ajax functionality. Below is a list of all the updates:

  • Tons of bug fixes (Full List)
  • Extensions to $.ajax(): $.ajax accepts additional options: beforeSend, async and processData; returns XMLHttpRequest to allow manual aborting of requests, see docs for details.

    Example: Add extra headers to an Ajax request using beforeSend

    $.ajax({
      type: "POST",
      url: "/files/add/",
      beforeSend: function(xhr) {
        xhr.setRequestHeader( "Content-type", "text/plain" );
      },
      data: "This is the contents of my text file."
    });

    Example: Perform a synchronous Ajax request.

    // Get the HTML of a web page and save it
    // to a variable (the browser will freeze until the
    // entire request is completed).
    var html = $.ajax({
      type: "GET",
      url: "test.html",
      async: false
    }).responseText;
    
    // Add the HTML into the page
    $("#list").html( html );

    Example: Sending a JavaScript object using processData.

    // The data to send to the server
    var params = {
      name: "John",
      city: "Boston"
    };
    
    $.ajax({
      type: "POST",
      url: "/user/add/",
      processData: params
    });

    Example: Aborting an Ajax request after a specific delay in time.

    // Perform a simple Ajax request
    var req = $.ajax({
      type: "GET",
      url: "/user/list/",
      success: function(data) {
        // Do something with the data...
        // Then remove the request.
        req = null;
      }
    });
    
    // Wait for 5 seconds
    setTimeout(function(){
      // If the request is still running, abort it.
      if ( req ) req.abort();
    }, 5000);
  • AJAX module: The public $.ajax API is now used internally (for $.get/$.post etc.); loading scripts works now much more reliably in all browsers (with the exception of Safari, which is a work in progress).
  • New global Ajax handler: ajaxSend – called before an Ajax request is sent.

    Example: Add extra headers to all Ajax requests using the ajaxSend event.

    $(document).ajaxSend(function(xhr){
      xhr.setRequestHeader("X-Web-Request", "MySite.com");
    });
  • Extensions to global Ajax handlers: ajaxSend, ajaxSuccess, ajaxError and ajaxComplete get XMLHttpRequest and settings passed as arguments.

    Example: Prevent any POST requests that are sending too much data.

    $(document).ajaxSend(function(xhr,options){
      if ( options.type == "POST" && options.data.length > 1024 )
        xhr.abort();
    });

    Example: Show a special message for requests submitted using an Ajax POST.

    $("#dataSent").ajaxSend(function(xhr,options){
      if ( options.type == "POST" )
        $(this).show();
    });
  • Extensions to event handling: pageX and pageY are available in all browsers now. (IE does not provide native pageX/Y).

    Example: Have a tooltip follow a user’s mouse around the page.

    $(document).mousemove(function(e){
      $("#mousetip").css({
        top: e.pageY + "px",
        left: e.pageX + "px"
      });
    });
  • Improved docs: $(String) method has now two separate descriptions, one for selecting elements, one for creating html on-the-fly.
  • FX module: Most inline styles added by animations are now removed when the animation is complete, eg. height style when animating height (exception: display styles).

Visual JQuery

jquery After my excitement about jQuery since The Ajax Experience, one of my fellow developers at PSU has been checking the toolkit out. In her searches for documentation found Visual jQuery, a nice graphical/textual categorized API for the jQuery toolkit! Its a pretty snazzy learning tool if you aren’t already familiar with all the functions jQuery has to offer (found in the jQuery API).

I’ll be using Visual jQuery to explore to toolkit and see what it has to offer and using the JQuery API for quick syntax lookup.

Oh, and on a side note, the people over at Visual jQuery have begun a jQuery magazine in pdf format…pretty neat-o.

The Ajax Experience: jQuery Toolkit

jquery I went to The Ajax Experience with high expectations of catching some great tips regarding development in an Ajax environment. At the same time, I was sure of my previous decision with the use of Prototype and Script.aculo.us was as good as it gets (without diving into the widgetized world…e.g. Dojo). I attended John Resig‘s presentation on jQuery and I became a convert.

John’s presentation was less of a presentation and more of a Q&A Demonstration, which suited me fine. As soon as I knew where to download the code, I popped open my laptop and started fiddling around with the toolkit – passively paying attention to the questions and answers, as they tended to be extremely basic questions…you see, jQuery is pretty darn intuitive.

jQuery’s mantra is “Find stuff and do stuff to it”

Yeah, I wasn’t converted because jQuery was the first toolkit to support chaining and that it executes it nicely. Nor was I converted because of its extensive plugin library. Nope. My conversion was the effecient findability of elements within the DOM! This is what really makes jQuery ballsy. The toolkit was built with findability in mind using already established standards! jQuery fully supports CSS1, CSS2, CSS3, and basic XPath when hunting for elements. For example:

Lets start with something simple:
Say I wanted to find all elements within the page that had the class: bork and hide them, I’d do:

$('.bork').hide();

Alright, say I wanted to find all anchor tags with the target set to _blank and add the class whee to it:

$('a[@target=_blank]').addClass('whee');

Now, lets say I want to find all anchor tags with the target set to _blank and add the class whee to them AND append (opens in a new window) as a sibling to the link itself.

$('a[@target=_blank]').each(
  function(){
    $(this).addClass('whee');
    $(this).after('(Opens in a new window)');
  }
);

Now, if I knew I was going to use the above a whole lot all over hell’s half acre, I could create a jQuery plugin that can be chained! Here’s how I’d create that feature and allow for the passing of class name:

jQuery.fn.opensInNewWindow = function(classname){
	return this.each(
		function(){
                        $(this).addClass(classname);
                        $(this).after('(Opens in a new window)');
		}
	);
};

Now, when I want to put Opens in a new window on a series of elements, I can do so with my newly created plugin:

$('a[@target=_blank]').opensInNewWindow('whee');

//I can do this for ANY element I want even if it isn't a link
$('span.bork').opensInNewWindow('zomg');
$('div#w00t ul.nav').opensInNewWindow('roflcopter');

Now, to make use of the chainability, you can write the plugin more simply than what I did up above. You can do this: (thanks to malsup, a commenter on this article)

jQuery.fn.opensInNewWindow = function(classname){
	return this.each(
		function(){
      $(this).addClass(classname).after('(Opens in a new window)');
		}
	);
};

Cake walk. As your proficiency in finding objects within a page increases, your code will become shorter.

jQuery currently has a very active community and mailing list (averaging at about 90 posts per day) so if you have questions regarding the toolkit, you can become a member and ask away… In addition, there’s a jQuery blog where John posts comparison code showing the difference between jQuery and other available toolkits. (here’s a Zebra striping example)

If you are still on the hunt for a JavaScript toolkit for Ajax, DOM manipulation, etc or you find your toolkit of choice too clunky, give jQuery a shot. You’ll be pleased with the results.

The Ajax Experience: Leveraging Ajax for Enterprise Application Development

[[innerindex]]

Despite the fact that AJAX is making significant inroads within the Web 2.0 community, many enterprise applications still remain either traditional web or desktop applications. However, by effectively using AJAX, enterprises can develop compelling, innovative, and useful web based applications that increase employee productivity while retaining the manageability enjoyed by traditional web applications. This session will focus on the challenges of developing enterprise AJAX applications with an emphasis on overcoming the common hurdles and problems encountered along the way.

Presenter: Conrad Damon – Zimbra

Conrad’s discussion began with an re-iteration of what Web 2.0 is and how things have changed since Web 1.0. Old news, but the re-iteration was brief.

Choosing an RIA solution

Next Conrad explained his team’s decision process on choosing Ajax as the solution for creating their Rich Internet Application, Zimbra.

Flash?
The Zimbra team turned this down early on as they didn’t want to be tied to a proprietary solution… A decision I can respect :) I’m not too keen on the use of Flash as a front end for full-blown RIAs in most cases.

Ajax Worries
There were some hesitations regarding the use of Ajax as a solution:

  • Complexity – Lets face it, adding Ajax into the mix causes the applications complexity to increase.
  • Performance – there’s a lot going on with an Ajax app client-side that can cause client performance to degrade. (mixed with the chattiness server-side)
  • Some cross-browser issues.

Ajax: The Chosen One
Overall, Zimbra’s team decided on Ajax as the pros outweighed the cons:

  • Enhanced User Experience
  • Desktop application-like feel.
  • Deployment is trivial. – No installation…the application is accessible via the web.
  • The power of mashups is where its at. Its all about SOA (Service Oriented Architecture).

Ajax Points

Conrad noted a few key points regarding Ajax, however:

  • Ajax is cheaper on the server/network
  • Ajax applications are more memory expensive client-side
  • Ajax applications are not a business model
  • Ajax applications are the means not an end

Ajax Tips

Based on the Zimbra team’s experience, Conrad gave some tips:

  • Use an Ajax Toolkit – They simplify things. What you choose is up to you, but the time saved by toolkit use is well worth it.
  • CSS is your friend – bend it to your will
  • Use JSON, not XML – Zimbra has almost fully converted all passing of XML to JSON
    • JSON is easy
    • JSON is fast. Eval’ing JSON is faster than parsing XML by a magnitude of 10!
  • Use Asynchronous XHR (XMLHttpRequest) calls
  • Combine, Compress, and Cache
  • Automate Testing – Zimbra uses QuickTest Pro from mercury to test the Zimbra client.
  • OO, MVC
  • TLS (Transport Layer Security…SSL) – Make sure you use it!
  • KISS (Keep it simple, stupid) – this applies to both code and the UI!
  • No browser lock-in – don’t program for a specific browser…keep it open to at least the A-Grade browsers
  • Test, test, test

Browser Gotchas & Tips

Next came some helpful browser-specific tips and gotchas:

  • Firefox
    • Missing Cursor – workarounds exist (surrounding the input with a div…yadda yadda)
    • Event capture – effects DnD effects
    • design mode – lets you turn the Browser into an editor…buggy
    • xmlHttpRequest – bug that pained the CPU when making synchronous calls
    • opacity (linux) – hangs browser (relationship between X11 and opacity)!!!!!!!!!!!!!!
    • scrollbar bleed (mac) – scrollbar does not respect z-index
  • IE 6
    • string concat with +… – SLOW, use Array joins instead
    • image caching is poor – hard to convince to cache image in browser…workaround: have a hidden div and load the images there first
    • JS engine can be slow
    • Memory leaks – circular reference issue. workaround: give things numeric ids and a lookup table
    • XHR ActiveX object – some memory leaking issues
    • DOM attribute access is slow
  • IE 7
    • ActiveX opt-in
    • CSS fixes
    • Native XHR
    • memory leaks appear to be fixed
  • Safari
    • No design mode
    • DOM API not fully implemented
    • Debugging difficult (not entirely true)

The 3 C’s

By far the most useful section of Conrad’s presentation was on Zimbra’s 3 C’s; Combine, Compress, and Cache.

Combine
Zimbra uses this technique to minimize the sheer amount of files downloaded by the client which speeds up load time! Conrad suggests:

  • Concatenate your JS files and CSS files – Order matters (remember)! Zimbra uses the “Jammer” ANT task to do this dirty work.
  • Merge Images – Images are expensive! If your application uses a large number of icons, try merging them into a single image and use background-positioning on elements for the display of icons. For disabled icons, use opacity at 20-50% rather than creating a whole new icon.

Compress
Compression makes things smaller in size…smaller “things” are quicker to download!

  • Strip comments and whitespace – use JSMin or ShrinkSafe
  • GZIP your Javascript! – All of the A-Grade browsers support gzipping which reduces file size!

Caching
Set proper headers for appropriate browser caching. Avoid redundant downloads. Period.

Conclusion

I respect the Zimbra team and their decisions; their application is solid, functional, and quite sexy. All in all, this was a pretty solid presentation with a nice amount of data. As I mentioned earlier, the 3C’s were the most valuable tid-bits of information for me…although there were a few browser gotchas that I wasn’t aware of.

The Ajax Experience: Plan of Attack

The Ajax Experience is next Monday (although I arrive Sunday afternoon) through Wednesday and I’ve prepared my plan of attack:

Monday

10:00am-11:30am: Leveraging Ajax for Enterprise Application Development – Conrad Damon
12:30pm-1:15pm: Keynote: Towards a Service-Oriented Applications Stack – Matt Quinn
1:30pm-3:00pm: Simplify Ajax development with Apache XAP – Bob Buffone
3:30pm-5:00pm: Ruining the User Experience – Aaron Gustafson
5:15pm-6:45pm: Scriptaculous – Justin Gehtland
8:00pm-9:30pm: Expert Panel Discussion

Tuesday

8:30am-10:00am: Intro to Dojo – Alex Russell
10:30am-12:00pm: Yahoo! Experiences with Accessibility, DHTML, and Ajax in Rich (Dunno what Rich is…probably the start of “Rich Internet Applications” [RIA], probably) – Nate Koechley
1:00pm-1:45pm: Keynote: Ajax from AOL’s Perspective – William Morris
2:00pm-3:30pm: RAD 2.0: Working with symfony (PHP) – Dustin Whittle
4:00pm-5:30pm: Markup & CSS for Developers: Empowering the Application Developer with Front End Magic – Molly Holzschlag
7:00pm-7:45pm: Keynote: The Once & Future Web – Chris Wilson
9:00pm-10:30pm: Expert Panel Discussion

Wednesday

9:30am-10:30am: Designing for Ajax – Bill Scott
11:00am-12:30pm: Dojo Cookbook – Dustin Machi

My schedule is subject to change based on buzz or sudden interest in other presentations. I look forward to seeing what they have to offer and will be blogging along the way!

The Ajax Experience

Well, it seems my application for one of the 5 scholarships to The Ajax Experience has gotten through! w00t!

The Ajax Experience is:

Ajaxian and NoFluffJustStuff Java Symposiums (NFJS) are pleased to announce The Ajax Experience 2006 Fall Edition – Boston. We had a great time at the spring event in San Francisco, so we decided to do another show on the east coast. This international event will take place October 23 – 25, 2006 at the brand new Westin Boston Waterfront in Boston, Massachusetts.

The Ajax Experience 2006: Boston show will feature sixty (60) technically focused ninety (90) minute sessions across three (3) full days spanning six (6) parallel tracks with over (40) forty speakers.

We encourage you to register as soon as possible because seating is limited and we anticipate a sold out show. Here is your opportunity to attend one event where you will find authors and industry notables in one place for the duration of The Ajax Experience Fall 2006 show. This is a unique event you should want to be a part of.

When I first heard about the conference last year, I was extremely excited…but had my hopes stomped when I brought the cost to my manager. Ajax was “too new” and the University could not justify the expense of the trip. I waited a year and once again had the eyebrow raised when I brought it up. Not necessarily my manager’s fault…but convincing the University System that they should do something is like convincing a rock it should get up and walk around.

When I saw the Scholarship Program for The Ajax Experience, I got to typing and sent in my application with crossed fingers and high hopes. My typing paid off. Here’s what I wrote:

My name is Matthew Batchelder, I run BorkWeb ( http://borkweb.com), am a co-founder of MasterWish (http://masterwish.com), and am a web application developer at Plymouth State University (PSU) in Plymouth, NH. I’m close by yet so far away.

A few PSU co-workers and I have been steering web development at the university to include Ajax techniques to enhance the speed and usability of our applications on campus. Users have been pleased with the results and want more! But…PSU – being a state-run university – lacks funds to send all of their employees to conferences, especially conferences where the higher-ups [don’t know] what valuable information can be attained there – brains, networking, tips, etc. When mentioning this conference both last year and this year, I’ve been met with a handfull of negative responses: “No, we don’t have the resources” to “Ajax…isn’t that a cleaning product?.”

MasterWish – a one and a half year old brainchild of a couple of other developers and myself – has been my playground after work hours. I began my experimentation with Ajax using that site, as PSU tended to slap my hand when looking into Ajax at work. Through that experimentation, I began to understand the workings of Ajax and how it would work into the PHP/Templating environment I was so comfortable with. Once I had dug down, I promptly posted my “Ajax; Templating; and the Separation of Layout and Logic” article that Ajaxian blogged about, along with the follow-up article.

I am building. I am reading. I am experimenting. I am writing. There’s always more to learn and I’d love to see and hear what the Ajax leaders are doing to help guide my train of thought. Re-creating the wheel sucks and conferences are a great way to have a lot of information slammed into your skull and an even better way to network. Sadly, the price of The Ajax Experience admission is too great great a cost for me to fund myself, and PSU [doesn’t always] know what’s best for them and refuse to pay. I look to you for help.

Thank you for your consideration. If you need anything more from me, please let me know!
-Matt

I look forward to picking brains, networking, sucking in as much information as I can get, and blogging it all :D So: I owe a HUGE thanks to the guys over at Ajaxian; and a big congrats to the other 4 that received a scholarship. I’ll see you all there!

Oh….and I look forward to the swag:

  • All Access Pass – The Ajax Experience
  • Branded iPOD Shuffle – The Ajax Experience
  • Two free books – Ajax Design Patterns & Java Script: The
    Definitive Guide, 5E
  • Free Access to Slides/Audio of The Ajax Experience 2006: San
    Francisco ($250 Value!!)
  • Custom Laptop Bags – The Ajax Experience
  • The Ajax Experience Shirt
  • The Ajax Experience Binder with handouts from sessions attended
  • CD with all presentations
  • Slides/audio/select videos of The Ajax Experience: Boston
  • Breakfast, Lunch, Dinner, Breaks
  • The Ajax Experience Party
  • Great Giveaways including iPOD Nanos, iPOD Videos and XBOX 360s

Firebug 0.4 Released. Can Web Development Be Any Sexier?

One of my must have extensions for firefox has a new version out! Firebug, if you don’t already know, is an Ajax/layout/javascript troubleshooter and is extremely well developed. In version 0.4, Firebug steps beyond the bounds of being a troubleshooter and can now be considered a full fledged debugger. Its new features include:

  • JavaScript Debugger
  • Stack Traces with JavaScript Errors
  • Debug JavaScript Errors
  • Logging levels and assertions
  • printf-like String formatting

For more info, check out the release notes!

(note: I found out about this on Ajaxian)

XMLHttpRequest Object W3C Working Draft

I found this article over at Ajaxian. W3C has taken notice of the use of the XMLHttpRequest and has decided to standardize it! w00t! W3C says:

The XMLHttpRequest object is implemented today, in some form, by many popular Web browsers. Unfortunately the implementations are not completely interoperable. The goal of this specification is to document a minimum set of interoperable features based on existing implementations, allowing Web developers to use these features without platform-specific code. In order to do this, only features that are already implemented are considered. In the case where there is a feature with no interoperable implementations, the authors have specified what they believe to be the most correct behavior.

This is pretty exciting because we can now see a proposed consistent method for using the object will be solidified in future browsers! Now…lets hope the browsers implement it quickly :) Oh, and here’s an example of setting a Request Header:

// The following script:
var r = new XMLHttpRequest();
r.open('get', 'demo.cgi');
r.setRequestHeader('X-Test', 'one');
r.setRequestHeader('X-Test', 'two');
r.send(null);

// ...would result in the following header being sent:
...
X-Test: one, two
...

Script.aculo.us v1.6 Released

Great news over at Mir.aculo.us. It appears as if version 1.6 of my favorite DOM manipulation library, Script.aculo.us has been released! Thankfully the new version of Script.aculo.us uses Prototype v1.5.

This is sexy because now I can revert to downloading both Prototype and Script.aculo.us right from the Script.aculo.us site. (Hooray for being lazy)

Here’s an excerpt from the original post:

script.aculo.us 1.6 marks the switch over to Prototype 1.5 (1.4 will no longer be supported), which has really great new features and has undergone some refactoring to take advantage of the Prototype 1.5 niceties.

Other new stuff includes window-scrolling while dragging, performance optimizations and various bug fixes.

They are urging people to test out 1.6. Get on it!

MasterWish – Practicing What I Preach

masterwish MasterWish, my labor of love (created with my friends Zach Tirrell and Jon Emmons) is my playground for Ajax and Web 2.0 experiments.

If you haven’t been acquainted with the site, its a wishlist site with a schlew of features. The high point is the ability to secure down lists and grant access to specific buddy groups. I’m pleased to say that we have gained a decent member base in the past 8 months and I am also happy to say that things are going to change around shortly!

MasterWish was built using SAJAX as the tool of choice for Ajax communication but as I’ve mentioned in the past, I am a Prototype convert. My knowledge of Ajax, JSON, and general application structure has been morphing so much in recent weeks that I have held off in completely revamping the wish list site.

Things are changing. I have begun the work to implement the following:

  • Creation of more “hackable” Web Service APIs using SOAP and REST
  • Representation of data using both XML and JSON
  • Ajax powered by Prototype
  • Sweet DOM manipulation powered by Script.aculo.us
  • Separation of Layout and Logic with event:Selectors
  • and of course, we’re already doing: Server-Side Templating for greater separation of Layout and Logic.

Sign up. Stay tuned. Get gifts.

Writing Your Server-Side Ajax Handler

[[innerindex]]In my recent post on ‘Ajax; Templating; and the Separation of Layout and Logic,’ I refer to an Ajax Handler that sits server side to handle Ajax calls. Some elaboration is in order.

As I have stated in the past, I’m a huge fan of Prototype AND I choose PHP as my language of choice…so my examples will be using both, but the idea is portable.

Set up your Functions

Before you create a handler, you need a set of functions that the handler can reference. Here’s an example:

< ?php
function world($params='')
{
  return 'Goodbye Cruel World.';
}//end world

function sweetWorldAction($params='')
{
  //we expect params to be an array or a string similar to a parameter string from a GET..i.e. "bork=asdf&cheese=yes please"
  //parse out the variables
  if(!is_array($params))
  {
    parse_str($params,$params);
  }//end if

  //do your logic here
}//end sweetWorldAction
?>

Now that we have the functions all set, we’ll set up a handler that receives Ajax calls and calls the appropriate functions.

The Eval Method – A Dynamic Handler

This method is one that I toyed around with for a while and I’ll admit that its pretty simple and clean but there are some drawbacks. We’re going to make a few assumptions: All requests will be GET (this is to keep things simple for this example) and we will keep the complexity of .htaccess sweetness out of these examples and assume that each call will be passing a function variable that specifies the function we are calling. I’ll get to those in a second…but first I’ll show you the handler code in this Eval Method:

< ?php
//if the user leaves the page or closes the browser prematurely, this will help prevent half completed statements
ignore_user_abort();

include('functions.php');

//list out your Ajax accessible functions
$valid_functions = array('world','sweetWorldAction');

if($_GET['function'] && in_array($_GET['function'],$valid_functions))
{
  //get the get parameters
  $params = $_GET;  
  //unset the function index from the params because we just don't need it there
  unset($params['function']);

  //build your parameter string:
  $param_string='';
  foreach($params as $key=>$param)
  {
    $param_string.=(($param_string)?'&':'').$key.'='.$param;
  }//end foreach

  //make your function call
  eval($_GET['function']."('$param_string');");
}//end if

?>

The Variable Variable Method – A Dynamic Handler

This method (compliments of PHPDeveloper) is simpler than the Eval Method and just as dynamic.

< ?php
//if the user leaves the page or closes the browser prematurely, this will help prevent half completed statements
ignore_user_abort();

include('functions.php');

//list out your Ajax accessible functions
$valid_functions = array('world','sweetWorldAction');

if($_GET['function'] && in_array($_GET['function'],$valid_functions))
{
  //get the get parameters
  $params = $_GET;  
  //unset the function index from the params because we just don't need it there
  unset($params['function']);
  //make your function call
  $_GET['function']($params);
}//end if

?>

The Switch Method – A Basic Handler

This method handles each call individually. The reason for using switch rather than if-elses is simply because your application will most likely possess a large number of Ajax-ified functions and those if-elses would be ghastly to read and decrease performance…the Switch statement is much cleaner.

< ?php
//if the user leaves the page or closes the browser prematurely, this will help prevent half completed statements
ignore_user_abort();

include('functions.php');

if($_GET['function'])
{
  switch $_GET['function']
  {
    case 'world':
      echo world();
      exit;
    break;
    case 'sweetWorldAction':
      echo sweetWorldAction();
      exit;
    break;
  }//end switch
}//end if

?>

Make a Choice

Which are you going to use? While the Eval and Variable Variable Methods contain very small amounts of code in the handlers, the logic has simply been shifted to the functions themselves. Increased Ajax-geared logic within the functions themselves reduces portability. However, in the Switch Method, logic is organized in a fairly easy to follow manner while making use of very generic functions that can be used in multiple fashions. Obviously, the Switch Method is my preferred choice :)

In Closing

Handler scripts make the Ajax magic happen and the separation of handler logic from your application logic is just as important for robust development and debugging as the need for separation of layout and logic. Play around with the above methods and see which works for you. If you have a method all your own, I’d be interested to hear it!

Thumbstack – A Web-Based Presentation Application

thumbstackA while back, my pal Zach posted about S5, “A Simple Standards-Based Slide Show System.” Now, its important to note that S5 is trying to set up a standard and not develop a full blown application. S5 seems to be a solid foundation…all it really needs is a slick editor and I’m sold.

Well, as I’ve been waiting for and S5 editor to come along, Thumbstack has come along instead and I’ll be content goofing around with that for a while. While Thumbstack isn’t built off of the S5 standard, it is a sold web implementation of presentation software complete with a decent draggable presentation builder…themable to boot! (although the available themes are dumb right now, that’s sure to improve). The editor is a div based-DHTML pumped-Ajax integrated layout; the presentation itself seems to be Flash. Interesting stuff.

It shows promise, but there are a few things it lacks that I hope to see:

  • More themes
  • Slide transitions and animations (nothing too crazy, basic will do fine)
  • Export to Powerpoint
  • Ctrl+S to save
  • While viewing a presentation, right clicking should give a contextual menu.

I’ll be keeping an eye on Thumbstack. Google recently bought Writely, which means they are interested in web-based Office software. They’ve got Gmail, an upcoming Calendar, a Word Processor, and a Webpage Builder. All they need now are solid presentation and spreadsheet applications. The race is on.