Web Info & Tutorials

August 23rd, 2007

JQUERY VS. PROTOTYPE: OO JAVASCRIPT WITH OR WITHOUT TRAINING WHEELS

Brian Dillard has written about his experience playing with jQuery after time as a Prototype-r.

The piece walks us through Brian’s understanding of JavaScript and OO as he worked with different libraries:

Learning from Prototype

For developers like myself - long-time UI folks who have used JavaScript’s Object datatype for years but lack significant experience writing in a strongly typed, truly object-oriented language like Java - Prototype has been a revelation. It doesn’t enforce OOP principles, but it encourages them. And its source code is like a Rosetta Stone for how to implement them in the dynamically typed, prototype-based world of JavaScript.

Learning from jQuery

Once I started using a different library, though, Class.create was suddenly useless. I had to figure out different inheritance and encapsulation strategies. The training wheels were off, and I had to find my own of balance. My first hurdle was figuring out how to organize my jQuery procedures into reusable methods. I felt totally adrift without the built-in ability to bind functions to their execution environment; the this keyword was always assigned to a DOM node. I thought about simply porting Prototype’s Function.bind and Function.bindAsEventListener methods, but that seemed at odds with the design of jQuery’s own API. Finally, I turned to Douglas Crockford’s module pattern for JavaScript. Now I had a new way to organize my objects and methods in a reusable way that worked well with jQuery. By defining private methods inside of a closure, I could access those methods with simple function calls, no binding necessary. As with Prototype, a whole new world opened up.

August 23rd, 2007

TABLE SORTING MADE EASIER

Christian Bach has released v2.0 of his tablesorter plugin for jQuery:

Tablesorter sorts HTML tables with as little as one line of code and includes many advanced features like:

  • Multiple column sorting
  • Custom cell parsers
  • Extensibility via widget system
  • Support for ROWSPAN and COLSPAN on TH elements

all packed into 7.4kb of code. Also released are two table themes, a cookie-based preferences widget, a row striping widget and pagination plugin.

The small snippet below takes a pre-existing HTML table and makes it sortable:

JAVASCRIPT:
  1.  
  2. $(document).ready(function()
  3.     {
  4.         $("#myTable").tablesorter();
  5.     }
  6. );
  7.  

Tablesorter has been tested successfully in the following browsers with Javascript enabled:

  • Firefox 1.5+
  • Internet Explorer 6+
  • Safari 2+
  • Opera 9+
  • Konqueror

Be sure to check out the demos and pick up the source.

August 23rd, 2007

LEARNING FROM GMAIL

We can always learn from popular Ajax applications such as Gmail. In fact, browser vendors often fill their test suite with some of the big sites out there, and groan when they have to implement a bug to be backwards compatible :)

Jesse Kuhnert has a tip that he learned from looking at Gmail and reproducing a table layout that allowed a column’s content to have its overflow hidden without any white space breaking / etc when the browser is re-sized, as is what happens with the subject column of the gmail list view:

There isn’t very much magic to it, but the key seems to be using a table-layout: fixed css definition for the table as a whole and then only specifying column width values for the columns that shouldn’t have their content overflow hidden and tucked away behind the rest of the content.

CSS:
  1.  
  2. .grid { table-layout: fixed;}
  3.  
  4. .grid * td {
  5.    empty-cells: show;
  6.    overflow: hidden;
  7.    width: 100%;
  8. }
  9.  

The best example is probably going to be just seeing a small demo of the technique - which you can view here.

There are all kinds of fun things hidden, normally with crazy tables ;)

August 23rd, 2007

DOJO 0.9: DISSECTED, FAST, AND 3D

There has been a abash of state today that 0.9 is discover of the entranceway for Dojo:

James solon wrote most Dissecting 0.9’s dojo.js file, which differs from the older “dojo.js could stingy anything” view, and today is a humble platform. The place also dives into the internals of Dojo 0.9’s dojo.js, and fortuity downbound the features and their qualifying sizes. After datum this it is easier to easier to study the stand-alone dojo.js with the features and enter sizes of another “one file” base libraries same jQuery and Prototype.

Dojo 0.9 in 30 seconds is a running by Alex that shows you examples of dojo.js, much as how to attain elements on a tender drop discover when clicked:

JAVASCRIPT:

  1.  
  2. dojo.query(“.fadeHandle”).onclick(function(e){
  3.    dojo.fadeOut({ node: e.target.parentNode }).play();
  4. });
  5.  

Finally we hit Bar3d, proudly supercharged by dojox.gfx3d, which is inspired by the Microsoft Excel’s jurisprudence bar3d graphics, and features:

  • Multiple-series are supported
  • Lighting
  • Rotation, of instruction you can, but you requirement to be alive how arduous to encounter the correct angles
  • Animation, analyse activity section
  • User-interactivity, theoretically if we could amount discover how to see the pussyfoot movement.