Over 800 Lines of jQuery Later…

Buy this Book at Amazon.com!I am not being sarcastic: with jQuery you do write less and do more. The ‘over 800 lines’ is less than what is needed for my YUI 2.x JavaScript base. Apart from the brilliant syntax, much of this reduction is due to the plug-in culture of jQuery. I’m sure jQuery veterans would ask, why would need even 800 lines? These are the generalities that I’m for:

  • $.rx.client extension functions to define how I organize the Client and define conventional ways of producing jQuery-UI-based alert and confirm messages. One format for alerts and one for confirmations is shared by the entire Client application. There is also a cute little helper function, $.rx.client.setKeydownTrigger() which wires keydown triggers of other events—usually click events. Respect goes out to Nadia Alramli for showing me how this is done in jQuery via StackOverflow.com.
  • $.rx.ajax extension functions to define how I attach an event to an AJAX call. The options object literal (a jQuery convention) can be configured to support a confirmation before an AJAX call. I sacrificed the terseness of the post() and get() methods for this flexibility. One notable convention is the conventional invocation of $.rx.client.displayBuilder.build() when the AJAX complete event fires. This conventional build() function uses the super-power of jQuery to—you guessed it—query the elements returned from the AJAX call to attach events and format.
  • $.rx.dateTime is not doing much right now. It has one extension function I use it to append the current time to date values from the Datepicker.
  • $.rx.validation extension functions of my legacy <form/> validation code that has been maintained for over a decade. This old stuff is still useful even in view of the Validation plugin by Jörn Zaefferer.

One very important thing I’ve learned about jQuery is that it is wrapper over DOM elements. Concealing DOM elements is not a design goal. You can have your old DOM elements back with $(selector).get(n) or $(selector)[n]. This means that my old code can still work.

Another important bit is the jQuery.extend() function. It took me way too long to see its importance in “name-spacing”:

$.extend({rx:{}}); //$.rx
                  
$.extend($.rx, {client:{}}); //$.rx.client
                  

I use the term extension function for jQuery procedures that are not chaining the jQuery object. You don’t need a selector query to get these helpers. The term extension method refers to procedures in the jQuery chain.

My Incomplete List of jQuery Plug-ins

What’s that famous line from the Rebel fighter pilot (or was it the Jedi youngling)? “There are… too many of them…” Yes, there are ‘too many’ jQuery Plug-ins—especially for an ex-YUI guy like me. So the crude filtering technique used to find the gems includes looking at “20 Amazing jQuery Plugins and 65 Excellent jQuery Resources,” “Your Favorite JQuery Controls & Plugins” and paging through the slightly redundant data set of the most popular plug-ins at plugins.jquery.com. Also, this list does not include the “official” jQuery UI plug-in. The table below summarizes (in some decreasing order of importance):

Validation Plugin “…there are a lot of non-jQuery-based solutions (which you’d avoid since you found jQuery) and some jQuery-based solutions. This particular one you are looking at is one of the oldest jQuery plugins (started in July 2006) and proved itself in projects all around the world.” This one, by the way, is recognized in many “official” ways by Microsoft.
Autocomplete Plugin “By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.”
Masked Input Plugin “It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates, phone numbers, etc).”
Flexigrid “This is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.”
DirtyForm “This is a project for watching containers of inputs and notifying the user of unsaved changes.”
TextLimiter “Counts down the number of chars left on a Textarea/Input fields, won’t let the user write more than allowed number of characters.” Has more votes than MaxChar
jQuery Tools “This library contains six of the most useful JavaScript tools available for today’s website. The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.”
jQuery Gallery Plugin “jQuery Gallery Plugin take a grouping of images and turn it into an flash-like image/photo gallery.”
jstree “For many data-driven applications, high-quality grid and tree components are really important; kudos to Ivan for some interesting ideas in jsTree.”—Ajaxian.com
useScript A more complex alternative to $.getScript().
YouTubePlaylist “A jQuery YouTube plugin that turns a list of youtube links into a complete YouTube gallery with thumbnails. Extremely easy to use and degrades gracefully.” Yes, there is a YouTube JavaScript Player API but this jQuery thing might be enough for me.
Embed Quicktime (UI 1.2.x) “Embed QuickTime is a jQuery plugin that helps you embed QuickTime movies to play directly on your webpage, instead of redirecting your video to a separate page or forcing you to embed a video using Flash. It changes regular image links to the embedded QuickTime video when they are clicked. It works with .mov, .mp4 and .m4v files.”
lwRTE (UI 1.2.x) “Do you need really lightweight and unbloated Rich Text Editor (RTE / WYSIWYG) for JQuery and ability to extend it as you want?”
Editable (UI 1.2.x)

“This is a real customizable jQuery editable plugin. Currently it can convert any tag (span, div, p and …) to text input, password, textarea, drop-down list.”

“You can easily extend it by adding your own input type using its editableFactory object.”

jQuery Samples (Maybe) for SonghaySystem.com

Buy this Book at Amazon.com!A new /jquery folder is added to the dev’ server samples folder. The work here is intended to replace the older samples in the /DHTML and /ajax folders. Today, the plan is to use jQuery exclusively. This decision is based on the following:

  • My current understanding of the YUI 3.0 Loader shows me not an equivalent of jQuery.getScript() but far more complex functionality that seems to focus on loading YUI modules more than plain-old *.js files. This script loading issue is important—this is why projects like Jingo exist.
  • The CSS-selector syntax in YUI 3.0 is there but I do not feel the terseness that’s attractive in jQuery. The code samples seem noisy to me. This pressure to rewrite my YUI 2.x code in this “new” style might as well be relieved in jQuery.
  • The advantages that might be clear and present in YUI over jQuery do not appeal to me. An article like “Why YUI is my favorite JavaScript framework and why it should be yours too!” sites advantages like “Debugging and Profiling” or “Blistering fast framework hosting and serving of assets”—I would like to have these problems and I look forward having them. By the time I get there, jQuery should have already been and moved on…

Today, my only pressing question about jQuery is about the when to use jQuery.extend() and, jQuery.fn (which is used for plug-ins). Basil Goldman seems to have an explanation in “Defining your own functions in jQuery” but for some reason I’m still not satisfied that I have the best information. Once we start to work with jQuery.fn we must consider whether we should just build a full-blown plug-in. This implies three issues: extending, adding a new function and building a plug-in. There should be an explanation that coheres all three.

jQuery: $.extend() and $.fn.extend() confusion “As a general rule, you should extend the jQuery object for functions and the jQuery.fn object for methods. A function, as opposed to a method, is not accessed directly from the DOM.”
jQuery extend and fn.extend “Use the extend function to add a new function to a jQuery object. … Use the fn.extend function to add a new function that will be applied to each element in the set of elements in a jQuery object.”
Learn How To Create Your Own jQuery Plugin “The basis of creating a plugin for jQuery is actually quite simple. You don’t have to be a jQuery ninja, nor do you have to sweat blood to make it work. It’s as easy as script writing!”
A Plugin Development Pattern “In Mike Alsup’s preamble, I’m inferring that a formal plug-in is needed when your extension depends on one or more ‘private’ functions.”

CSS: The ‘Page’ Container with Header and Footer

Buy this book at Amazon.com! In typical Bryan fashion, I momentarily lost track of the obvious during my CSS Biggest Box strategizing. My definition of Biggest Box must be refined to include more detail about prose layouts—obvious details. My previous note, “CSS Blocks: Box, Column and Flow,” handles the concepts for composing within a fixed Biggest Box. Using my previous CSS layouts as a guide, the suffix Page is used to describe the Biggest Box containing prose flow.

The Page container is a Biggest Box that will have a variable vertical dimension because it contains prose flow. Its minimum height, however, should be that of the vertical dimension of the biggest box. This min-height setting is the only recognition of the vertical dimension of the Biggest Box. Once the Page container is unleashed in the design, its two companion Page ‘pieces’—the Header and the Footer—comes with the deal. Now I can summarize all of the block-level naming conventions:

Box The box container is a proportionate box with respect to the biggest box.
Column This container makes vertical slices in the biggest box. The width is usually two-thirds or one-third the biggest-box width. My design prefers no more than two columns.
Flow The Flow container works inside of Box or Column containers to handle typographic flow issues in relative em units.
Footer A Page container with a fixed relative or absolute vertical height, placed after a Page container with a flowing vertical dimension.
Header A Page container with a fixed relative or absolute vertical height, placed before a Page container with a flowing vertical dimension.
Page The Biggest Box with a flowing vertical dimension. Its minimum height is the Biggest Box height.

The ‘Page’ Compromise

The Page concept represents a compromise between the printable and screen-presentable—everyone will not be satisfied with such a compromise. The word “Page” of course refers to what you can print out on paper and hold in your hand. The Page CSS block is literally, then, defining a Web Page.

My design goal is to suggest that this Web “page” is a variation of the Web “box”—which implies, in my squalid little world, that the Web “box” is the wave the future. The Box concept has always been with us—from the days of interactive television, to the DVD menu and now with the NetFlix.com streaming video player and the iTunes LP.

This idea of the Web “page” essentially means that there is a “paging” concept available for interaction—this Web paging concept has been, predominantly, scrolling. I’ve never liked scrolling. Scrolling is just a little bit better than clicking. So it makes sense (to me) why I temporarily overlooked this necessary feature.

CSS Blocks: Box, Column and Flow

Buy this book at Amazon.com! With an established ‘Biggest Box’ strategy, more detail reveals the three kinds of block-level containers of my concern: Box, Column and Flow containers. These are composed within the biggest box—these names will serve as suffixes for a new naming convention used for CSS selectors.

Box Container: The box container is proportionate box to the biggest box. The box that is most useful to me is the one-third box—for my WSVGA convention, this is 341×200 ((1024/3.0) = 341.33333333333331). I see these boxes being used for holding the main navigation menu and displaying the results of AJAX calls.

Column Container: This container makes vertical slices in the biggest block. The width is usually two-thirds or one-third the biggest-box width. My design prefers no more than two columns.

Flow Container: While the Column and Box have exact, pixel-unit, proportionate dimensions, the Flow container works inside of Box or Column containers to handle typographic flow issues in relative em units. One unexpected variation here (for me) is to use flow containers for containing small, box containers. This idea comes to me from the “List View” concept in .NET client technologies.