Web Info & Tutorials

April 16th, 2008

THREE HELPFUL JAVASCRIPT LIBRARIES

Oliver Steele has posted on three small JavaScript libraries that he carries around in his toolbox as he goes from project to project.

Fluently — Construction Kit for Chainable Methods

Fluently lets you build chainable methods, which Oliver used to build a mock test framework.

JAVASCRIPT:
  1.  
  2. var o = Fluently.make(function(define) {
  3.     define(‘fn1’, function() {console.info(‘called fn1’)});
  4.     define(‘fn2’, function() {console.info(‘called fn2’)});
  5.     define.empty(‘and’);
  6.     define.alias(‘fn3’, ‘fn1’);
  7.     define.modifier(‘not’);
  8. });
  9.  
  10. o.fn3(); // same as o.fn1()
  11. o.fn1().and.fn2() // same as o.fn1().fn2()
  12. o.fn1().and.not.fn2() // options.not is set when fn2 is called
  13.  

MOP JS

MOP JS defines utilities for JavaScript metaprogramming. You don’t think you need it until you try asynchronous programming, where some methods don’t have enough information to operate until the response to another method’s asynchronous request have returned.

JAVASCRIPT:
  1.  
  2. new MOP.MethodReplacer(object, methods)
  3. MOP.withMethodOverridesCallback(object, methods, fn)
  4. MOP.withDeferredMethods(object, methodNames, fn)
  5.  

Collections JS

Collections JS defines framework-independent JavaScript collection methods, for use in browser JavaScript and in ActionScript / OpenLaszlo.

The Array and String methods extend the class prototype; the Hash methods use a proxying wrapper to avoid prototype pollution. The methods with the same names as the ECMAScript 1.6+ extensions have the same spec as those; the ones with the same name as prototype extensions have the same spec as those in the Prototype library; and there’s a few odds and ends such as String#capitalize.

I use this when I don’t want the overhead of Prototype, or want to use these functions in an environment that Prototype doesn’t run on, such as OpenLaszlo. It has some overlap with Functional, but isn’t nearly so radical — this can be an advantage.

Thanks for sharing Oliver!

April 16th, 2008

LAST CALL FOR W3C XMLHTTPREQUEST COMMENTS

The W3C has issued a last call on the XMLHttpRequest spec:

The Web API Working Group has published the Last Call Working Draft of The XMLHttpRequest Object. The XMLHttpRequest Object specification defines an API that provides scripted client functionality for transferring data between a client and a server. Comments are welcome through 2 June. Learn more about the Rich Web Client Activity.

It is nice to see things all speced out, including the fact that you can now get back real errors (SECURITY_ERR, NETWORK_ERR, ABORT_ERR).

There are future thoughts for the spec.next too:

  • load event and onload attribute;
  • error event and onerror attribute;
  • progress event and onprogress attribute;
  • abort event and onabort attribute;
  • Timers have been suggested, perhaps an ontimeout attribute;
  • Property to disable following redirects;
  • responseXML for text/html documents;
  • Cross-site XMLHttpRequest;
  • responseBody to deal with byte streams;
  • overrideMimeType to fix up MIME types;
  • getRequestHeader() and
    removeRequestHeader().

If you have some final thoughts, let them know!

April 16th, 2008

DOH, LET ME TEST MY CODE!

Dustin Machi has posted on DOH, the Dojo Objective Harness which is a testing framework for JavaScript.

It can be used with your own Dojo applications, and even without any Dojo at all.

To do this you need to follow a couple of patterns, and Dustin documents them so you can get going.

You end up putting the correct refresh code in your HTML:

HTML:
  1.  
  2. <meta http-equiv="REFRESH" content="0;
  3.     url=../../../util/doh/runner.html?testModule=company.tests.foo
  4.           &registerModulePath=company,../../company">
  5.  

You register tests like this:

JAVASCRIPT:
  1.  
  2. doh.register("project.tests.TestGroupA",
  3.        [
  4.                {
  5.                        name: "My Function Test [_myfunc()]",
  6.                        timeout: 4000,
  7.                        runTest: function(){
  8.                               var result = _myFunc("a", "b");
  9.                               doh.assertEqual("Foo", result);
  10.                             }
  11.                  }
  12.    ]
  13. );
  14.  

April 16th, 2008

BUSY.JS: LOADING INDICATORS WITH CANVAS

Busy.js Logo

Christian Effenberger is back with some more canvasy goodness. He has released Busy.js, a library that allows you to add/remove loading indicators to html elements on your webpages (inc. overlay color & transparency). It uses unobtrusive javascript to keep your code clean. Requires no plugin/extension or any other external resource.

Usage

JAVASCRIPT:
  1.  
  2. var ctrl = getBusyOverlay(document.getElementById('box'));
  3. ctrl.remove();
  4.  

Features

  • supports Canvas and VML (identical representation)
  • Fast and easy to implement (perfect for ajax applications)
  • Don't need to spend time in an image editor creating gif animations
  • Very flexible by multiple (optional) parameters for individual styles
  • Get always a proper loading indicator independently of parent elements style
  • Moves the DOM tree up to find the next parent block-level element
  • Freezes the parent element visual (overlay) and technical (mouse events)
  • Works with html elements even if (moz/webkit)-border-radius is activated
  • In older browsers, the script degrades to simple quadratic shapes
  • It's dead easy to add or remove the loading indicator to/from an html element

Busy.js