Web Info & Tutorials

November 20th, 2006

GROUPS WIKI: AJAX’D WYSIWYG WIKI

Ben Nolan has created his take on an ajax’d up wysiwyg wiki called GroupsWiki.

Some of the interesting features are:

  • Always editing, users are always editing their wikis, we attach events to the links so that they can open new pages even while contenteditable is enabled.
  • Ajax image insert using a micro-version of lightbox. We also do table insertion the same way.
  • Autosave - the users data is auto-saved every 30 seconds via ajax callbacks.
  • Nice simple design and simple UI.

The application is built using Rails, Prototype, and TinyMCE. Ben didn’t use this great behaviour.js for this application as he says: “I tend to use behaviour only when doing sites that will actually work without JS” (nice and pragmatic).

GroupsWiki

November 20th, 2006

AJAX QUEUE JAVASCRIPT CLASS

Chris Marshall has a background in writing low-level asynchronous code in C++. When he started to write Ajax code he saw the need to manage concurrency and created a Ajax Queue Class that handles all of this for you.

An example using the library is this file browser where you see the root of the library:

function callout ( in_request, in_id ) {
        var url = 'ajax_file_browser_server.php?'+in_request;
        g_ajax_obj.CallXMLHTTPObjectGETParam ( url, receive_browse_results, in_id );
}
 
November 20th, 2006

MEASURING THE AGGREGATE PERFORMANCE OF AJAX APPLICATIONS

Ryan Breen spoke at The Ajax Experience on Ajax performance, and just released a preview of Actual Experience XF with Actual Experience Lite.

Instrumentation

To instrument a page for collection of metrics, you first include a small .js file in HEAD. Out of the box, the tag will track the DOM Ready and onload times as well as additional metadata (browser type and version number, etc).

The tag also provides 3 JavaScript functions — nameEvent, startInterval, and endInterval — which can be used to add timing instrumentation anywhere within your client side code. The first, nameEvent, defines a point-in-time event, while the latter two are used to measure a span of time. Here’s a simple use case:

 var xhReq = createXMLHttpRequest();
 xhReq.open(\"GET\", \"someGet.aspx?giveMe=stuff&iWant=stuff\", true);
 xhReq.onreadystatechange = onSomeResponse;
 startInterval('some request');
 xhReq.send(null);
	
 function onSomeResponse() {
   if (xhReq.readyState != 4)  { return; }
   endInterval('some request');
   var serverResponse = xhReq.responseXML;
   // do a bunch of stuff with the xml response
   nameEvent('finished response parsing');
 }

This example would create two events: an interval event called ’some request’ with a start time and a duration, and a point in time event called ‘finished response parsing’ with a start time and no duration. All start times are relative to the load of the aelite.js tag.

Example

Ryan instrumented W3C DOM vs. innerHTML table building and you can see the results.

The graphs are created with Dojo Chart, and Ryan even benchmarked that.

DOM innerHTML benchmark

November 20th, 2006

SANDBOXING JAVASCRIPT WITH IFRAMES

Dean theologist is hacking absent again. This instance he created a sandbox goal that allows him to eval cipher right of the environment of window. His scenario was with templating:

// create an <iframe>
var iframe = document.createElement(“iframe”);
iframe.style.display = “none”;
document.body.appendChild(iframe);

// indite a playscript into the </iframe><iframe> and create the sandbox
frames[frames.length - 1].document.write(
        “<script>”+
        “var MSIE/*@cc_on =1@*/;”+ // sniff
        “parent.sandbox=MSIE?this:{eval:function(s){return eval(s)}}”+
        “<\/script>”
);
 

He then realized that he could ingest this noesis for more good, allowing us to eventually subclass Array aright (and not fortuity .length).

Nicely finished sir.