Now it is time for Christmas and if you want to add some snows to a picture like the below example, a cool jQuery plugin — created by Jason Brown — can come to help.

• View Live Demo
• Download Plugin

Just include the plugin along with the latest version of jQuery (1.3.2 currently) and initiate it as the following code

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
	$('#snow_window').snowfall({
		flakeCount : 50,
		flakeColor : '#ffffff',
		flakeIndex: 999999,
		minSize : 1,
		maxSize : 4,
		minSpeed : 2,
		maxSpeed : 5
	});
</script>

where “snow_window” is the ID of target DIV in which snowflakes will fly. You can define number of snowflakes, their color, min/max sizes (just do not set too big sizes or they would look unnatural) and falling speed as parameters (flakeCount, flakeColor etc) in the initializing code.

Of course, you can set the snowfall effect to the whole web page with

$(document).snowfall();

Tip: It won’t work properly with fixed positioning and you must explicitly set the target DIV with “position: relative” or you’ll see snow falling on top corner of the page instead.

I hope you enjoy this Christmas and can surprise your friends with the snowfall effect.

corMVC stands for “client-only-required” Model-View-Controller and that means it does not depend on specific server-side technology. In case you want to demo something, it would be perfect if everything can be done on client side. Of course, you can save changes or load data from server (via Model) as the general illustration below.

corMVC Overview

Not like other JavaScript MVC solutions, corMVC is very simple and has very small footprint. It also does not require you to build the application using scaffolding or any other command-line utilities.

The whole framework is actually a 19KB JavaScript file (not minified yet) named Application.js, you’ll have to define models, views and controllers by yourself following the guidelines. It’s not hard especially for those who are familiar with modern MVC frameworks like Rails, Django or CakePHP.

Running application built on corMVC, you’ll have almost the same impression of running a server-side MVC application for the URIs (after the hash, however) are changed based on actions. The following diagram is about how the framework detects URL changes and handles events accordingly.

To get an overview of how the framework works and the interaction of model-view-controller we are going to examine the demo application called “Contacts” provided by Ben Nadel — the author of corMVC. The app, as its name tells, is a contact manager that has all basic functionalities like Search, View, Add and Delete contact info on a single web page.

MVC Contacts application

Let’s look at definition of a “contact” model in “contact.js” file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Add model to the application.
window.application.addModel((function( $, application ){
 
	// I am the contact class.
	function Contact( id, name, phone, email ){
		this.id = (id || 0);
		this.name = (name || "");
		this.phone = (phone || "");
		this.email = (email || "");
	};
 
	// I validate the contact instance.
	Contact.prototype.validate = function(){
		// For now, we are just goint to validate TRUE on the client and let
		// the full validation happen on the model peristence.
		return( [] );
	};
 
 
	// ----------------------------------------------------------------------- //
	// ----------------------------------------------------------------------- //
 
	// Return a new model class.
	return( Contact );
 
})( jQuery, window.application ));

The code define a contact class with a few properties like ID, Name, Phone# and E-mail address and return the class as a model that will be used by Controllers/Views.

The controller is more interesting and it’s not too difficult to understand though.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

// Add a controller to the application.
window.application.addController((function( $, application ){
 
	// I am the controller class.
	function Controller(){
		// Route URL events to the controller's event handlers.
		this.route( "/", this.index );
		this.route( "/contacts/", this.index );
		this.route( "/contacts/add/", this.addContact );
		this.route( "/contacts/edit/:id", this.editContact );
		this.route( "/contacts/delete/:id", this.deleteContact );
 
		// Set default properties.
		this.currentView = null;
		this.contactListView = null;
		this.contactFormView = null;
	};
 
	// Extend the core application controller (required).
	Controller.prototype = new application.Controller();
 
 
	// I initialize the controller. I get called once the application starts
	// running. At that point, the DOM is available and all the other model
	// and view classes will have been added to the system.
	Controller.prototype.init = function(){
		this.contactListView = application.getView( "ContactList" );
		this.contactFormView = application.getView( "ContactForm" );
	};
 
 
	// I am the add event for this controller.
	Controller.prototype.addContact = function( event ){
		// Show the form view.
		this.showView( this.contactFormView, event );
	};
 
 
	// I am the edit event for this controller.
	Controller.prototype.editContact = function( event, id ){
		// Show the form view.
		this.showView( this.contactFormView, event );
	};
 
 
	// I am the delete event for this controller.
	Controller.prototype.deleteContact = function( event, id ){
		// Delete the contact.
		application.getModel( "ContactService" ).deleteContact(
			id,
			function(){
				application.relocateTo( "contacts" );
			}
		);
	};
 
 
	// I am the default event for this controller.
	Controller.prototype.index = function( event ){
		// Show the list view.
		this.showView( this.contactListView, event );
	};
 
 
	// I show the given view; but first, I hide any existing view.
	Controller.prototype.showView = function( view, event ){
		// Check to see if there is a current view. If so, then hide it.
		if (this.currentView && this.currentView.hideView){
			this.currentView.hideView();
		}
 
		// Show the given view.
		view.showView( event.parameters );
 
		// Store the given view as the current view.
		this.currentView = view;
	};
 
 
	// ----------------------------------------------------------------------- //
	// ----------------------------------------------------------------------- //
 
	// Return a new contoller instance.
	return( new Controller() );
 
})( jQuery, window.application ));

Basically, the controller defines routes for events associated with handlers like addContact, editContact, deleteContact. In most of cases, the handlers are to show appropriated views or to send events to model for updates.

There are a number of views required by the app such as “Contact List“, “Contact Form” and a simple view for progress notification. Here are excerpt codes from “Contact List” view that mostly to interact with user and send events to controller if necessary.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

 
// Add view to the application.
window.application.addView((function( $, application ){
 
	// I am the contact list view class.
	function ContactList(){
		this.layout = null;
		this.searchForm = null;
		this.searchCriteria = null;
		this.addLink = null;
		this.contactList = null;
		this.contactTemplate = null;
	};
 
 
	// I initialize the view. I get called once the application starts
	// running. At that point, the DOM is available and all the other model
	// and view classes will have been added to the system.
	ContactList.prototype.init = function(){
		var self = this;
 
		// Initialize properties.
		this.layout = $( "#contact-list-layout" );
		this.searchForm = $( "#contact-list-header form" );
		this.searchCriteria = this.searchForm.find( "input" );
		this.addLink = $( "#contact-list-header a" );
		this.contactList = $( "#contact-list" );
		this.contactTemplate = $( "#contact-list-item-template" );
 
		// Bind the search form submit.
		this.searchForm.submit(
			function( event ){
				// Hand of to the search form handler.
				self.searchFormHandler();
 
				// Cancel the default event.
				return( false );
			}
		);
 
		// Bind the keypress event on the search criteria.
		this.searchCriteria.keyup(
			function( event ){
				// Filter the contact list.
				self.filterList( this.value );
			}
		);
 
		// Bind the keypress event to the search criteria so we can track 
		// the use of the special keys presses.
		this.searchCriteria.keypress(
			function( event ){
				// Store the SHIFT and ALT key status of the current click.
				self.searchCriteria.data( "shift", event.shiftKey );
				self.searchCriteria.data( "alt", event.altKey );
			}
		);
 
		// Bind the list-level clicking (to avoid setting to many 
		// event handlers).
		this.contactList.click(
			function( event ){
				var target = $( event.target );
 
				// Check to see if the target is the "more" link.
				if (target.is( "a.more" )){
 
					// Toggle the list item details.
					self.toggleDetails( target.parents( "li" ) );
 
					// Blur the current link.
					target.blur();
 
					// Prevent default event.
					return( false );
 
				// Check to see if the target is a the "delete" link.
				} else if (target.is( "a.delete" )){
 
					// Blur the current link.
					target.blur();
 
					// Confirm that the user wants to delete the contact.
					if (confirm( "Delete this contact?" )){
 
						// This is a *hack* that we have to do since jQuery click() 
						// event won't trigger the default action of the link.
						application.setLocation( target.attr( "href" ) );
 
					}
 
					// Return false to cancel default event.
					return( false );		
 
				}
			}
		);
	};
 
	....
 
	// Return a new view class.
	return( new ContactList() );
 
})( jQuery, window.application ));

Up till now, you may have had the overall knowledge of the framework and how to create a pure JavaScript MVC application. Yet, to get full understanding of corMVC, please see this great video presentation in which Ben Nadel explains why he came to the framework, how the JavaScript/jQuery were used, step-by-step application building etc. (this is a multiple-part video and a bit lengthy but I’m sure it’ll pay off.)

• Download Demo Application Code

FireQuery is an extension of Firebug created by BinaryAge to help developers to keep track with jQuery expressions, data and collections as expressed on tool website:

• Query expressions are intelligently presented in Firebug Console and DOM inspector
• attached jQuery data are first class citizens
• elements in jQuery collections are highlighted on hover
• jQuerify: enables you to inject jQuery into any web page

You can install the tool from official Mozilla add-on page (it requires Firebug 1.3+ already existed.) One note: You may have to find an older version (v0.3) to make it work with current official Firebug release (v1.4) as my experience on Windows.

In Action

After installing the add-on and restarting Firefox, just go to the test page to see how FireQuery tracks embedded jQuery data on FireBug’s “HTML” tab. The image below illustrates the data embedded in accordance with the jQuery codes to inject them to the page.

FireQuery shows embedded data by jQuery

Now, we’ll dig into cooler features. One of them is the ability to “jQuerify” any web page without jQuery support like Google.com for example. This can be done simply by clicking “jQuerify” button on FireBug’s “Console” tab.

jQuerify Google.com with FireQuery

Wow, now you can execute any jQuery codes in the Google home page. Normally, there is nothing happen when you click on Google logo but you just want it to say hello instead. Paste the following code snippet to Firebug command window and run it.

$('#logo').bind('click', function(){
    alert("Hello, I'm Google!");
    return false;
});

Running jQuery snippet on Google.com

Now, click on Google’s logo and you’ll see the alert dialog appears to say hello to you (no surprise) and the FireBug’s console also shows the jQuery command executed.

Google.com to say hello

Conclusion

FireQuery is a great tool for those who commit to jQuery as main JavaScript library or is going to write a jQuery plug-in. Also, It’s especially useful for developers, theme designers to see the jQuery’s data and effects in action without loading the library and writing codes in the templates.

This is not an Eclipse plugin instead a tool to patch the existing plugin and inject jQuery’s syntax support into it. First download the tool from SourceForce; it’s a Java executable JAR so you can double-click to it or run it from command line:

java -jar jqueryWTP0.2forJQuery1.2.6.jar

Now browse to plugin file

org.eclipse.wst.javascript.ui_xxxxxxx.jar

and set output directory to generate the patch. Please backup the original file and set output directory different from source one.

Select “Generate” button to get the patched file then copy over original file. Start Eclipse and open a HTML or script file to see jQuery’s functions listed on code assistance like image below.

Find more info about jQueryWTP and donate for project here.

Probably, the first step is to detect the browser from JavaScript code by parsing browser’s user agent, and here is what of Google Chrome.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US)
AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

I guess old JavaScript codes can mistakenly tell it Safari like when running the code snippet below using JQuery’s browser utility.

1
2
3
4

$.each($.browser, function(i, val) {
	 $("<div>" + i + " : <span>" + val + "</span></div>")
		.appendTo(document.body);
});

It may be no problem until you find something wrong when your apps running on Chrome only. So, here is the code line to detect Chrome generally:

1

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );

We’ll have to change the JQuery browser utility to support Chrome detection as follows:

1
2
3
4
5
6
7
8
9
10
11

var userAgent = navigator.userAgent.toLowerCase();
 
// Figure out what browser is being used
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
	chrome: /chrome/.test( userAgent ),
	safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

Now, correct result shows on test screen:

Just one notice: Current version of JQuery (1.2.6) is treating Chrome as if it was Safari and basically no serious problem has been found yet. Modifying browser detection can cause the lib render pages/elements incorrectly for it has no knowledge of Chrome’s rendering engine. To keep compatibility, you can change line 7 back to:

7

	safari: /webkit/.test( userAgent ),

But in this case the browser will be detected as both Chrome and Safari — not nice solution, I accept.

Anyway, it’s very likely that JQuery and other JavaScript frameworks will include Chrome to browser list for detection in next versions.

Response to a post on Ajaxian, shypht commented:

Hate to say it, but image is everything. If I was trying to sell my manager on using jQuery, Prototype, Mootools or Dojo, and sent them to those sites, I think based on look alone jQuery would be at a disadvantage. “Write less, do more” is a great slogan, “Be a Javascript Rockstar”, not so much.

Strikes me as being an amateur, and more focused on flashy effects than functionality. I love jQuery, it’s helped me loads on my most recent project, but that header just makes me cringe a bit on the inside when I see it.

While Glen Lipka described his feeling in more colorful words on his blog post:

Truthfully, I feel alienated by it.  It doesn’t resonate with me.  It makes me feel old and lame.  My hair is not long and flowing. The rockstar isn’t me.  jQuery is me.  It’s different.

Obviously John Resig & team did listen to the community and decided to kill the “JavaScript RockStar” on JQuery site.

Apart from the new glossy UI, the best of JQuey site’s new design is to organize documentation for the library itself separately from hundreds of plugins and extentions. The new search functionality allows user to fine tune query to specific documents or keywords.

Well, however, please keep in mind that nobody want to be a JavaScript rocktar!