Let’s say that we have one large text document and we have a a bunch of keywords that we want to parse the document for.  We don’t care how many times times the keyword appears — we just care that it’s been used.  When we find a keyword, we need to record that keyword been found so that we may check at a later time.

Inefficient Method:  Array Collection and Search

The first method to record that a keyword has been found is by pushing the keyword into one array:

//Assume an array called "foundKeywords" was defined above
if(shouldSave(keyword)) {
	foundKeywords.push(keyword);
}

At the end of the document search, we’d end up with an array like:

//the foundKeywords array looks like:
//['keyword1','keyword2','keyword2',...]

When it comes to checking this array for the existence of a given keyword, this method will prove inefficient.  Why?  Because we’d need to loop through the array and search until we found the given keyword (if ever).  Those are a lot of “wasted” or fruitless cycles, even if we break the loop when the keyword was found.  Inefficient is the only word to describe this process.

The Efficient Method:  Object with Index

The fastest method of checking a storing keywords for later reference is by object (in JavaScript) or associative array (in PHP).  Instead of adding the keyword to an array, we add the keyword as an index to a master object, giving the value as 1:

//Assume an object {} called "foundKeywords" was defined above
if(shouldSave(keyword)) {
	foundKeywords[keyword] = 1;
}

Why is this faster?  No wasted cycles looking blindly through an array.  The check is quick and simple:

if(foundKeywords[keyword]) { //FOUND!
	//do something
}

It’s either an index or it’s not!  In PHP, we’d save the keyword to an associative array:

//Assume an array called "$found_keywords" was defined above
if(shouldSave($keyword)) {
	$found_keywords[$keyword] = 1;
}

//Later: checking if the keyword was there...
if($found_keywords[$keyword]) { //or array_key_exists($keyword,$found_keywords)
	//FOUND!
}

In a word…awesome.  Not only fast but simple!

I cannot provide a benchmark because the speed of execution depends on how large the keyword array is.  Suffice to say, for the sake of simplicity and speed, using an object with keyword index is definitely the way to go!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Quick Tip: Object Indexing vs. Array Collection

Related posts:

1. Element Collection Manipulation Shortcut Using MooTools 1.2
2. Implementing an Array.count() Method in JavaScript
3. dojo.connect: A Powerful Object and Event Listener
4. Implement Array Shuffling in MooTools
5. Access JavaScript Object Variable Properties

What is link prefetching?  From the MDC:

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser’s cache.

Simply put: the browser downloads designated documents (pages, images, etc.)  the user will likely visit after the current page.  It’s even super easy to implement!

HTML5 Link Prefetch Tag

<!-- full page -->
<link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />

<!-- just an image -->
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

HTML5 prefetching is done via the LINK tag, specifying “prefetch” as the rel and the href being the path to the document.  Mozilla also answers to a few differently named LINK rel attributes:

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" />
<link rel="next" href="2.html" />

HTTPS  fetches are also supported.

When to Prefetch Content

Whether prefetching is right for your website is up to you.  Here are a few ideas:

• When a series of pages is much like a slideshow, load the next 1-3 pages, previous 1-3 pages (assuming they aren’t massive).
• Loading images to be used on most pages throughout the website.
• Loading the next page of the search results on your website.

Preventing Prefetching

Firefox allows you to disable link prefetching with the following setting snippet:

user_pref("network.prefetch-next", false);

Prefetching Notes

A few more notes about link prefetching:

• Prefetching does work across domains, including pulling cookies from those sites.
• Prefetching can throw off website statistics as the user doesn’t technically visit a given page.
• Mozilla Firefox, currently the only browser to support prefetching, has actually supported prefetching since 2003.

So what do you think?  Using spare time to download extra files seems both dangerous and exciting.  Let me know your thoughts!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: HTML5 Link Prefetching

Related posts:

1. Using HTML5 Web Storage
2. HTML5 classList API
3. “Favorite” Link — How To Create a Bookmark Link
4. HTML5: Wrap Block-Level Elements with A’s
5. My Firefox Plugins

One of my most popular posts has been Using MooTools 1.2 for Drag, Drop, Sort, Save. My post detailed how you can create a drag’n'drop, AJAX-ified system to allow the user to drag and drop elements and quickly save them with PHP and MySQL on the server side. I’ve chosen to update the post with a faster, more efficient set of MooTools and PHP code. I’ve also provided a jQuery equivalent. Enjoy!

The MySQL Table

This table shows only the important fields per this functionality: ID, Title, and Sort Order. Your table will likely have many more columns.

The PHP / HTML List Build

<?php
	
	$query = 'SELECT id, title FROM test_table ORDER BY sort_order ASC';
	$result = mysql_query($query,$connection) or die(mysql_error().': '.$query);
	if(mysql_num_rows($result)) {
	
?>
<p>Drag and drop the elements below.  The database gets updated on every drop.</p>

<div id="message-box"><?php echo $message; ?> Waiting for sortation submission...</div>

<form id="dd-form" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<p>
	<input type="checkbox" value="1" name="autoSubmit" id="autoSubmit" <?php if($_POST['autoSubmit']) { echo 'checked="checked"'; } ?> />
	<label for="autoSubmit">Automatically submit on drop event</label>
</p>

<ul id="sortable-list">
	<?php 
		$order = array();
		while($item = mysql_fetch_assoc($result)) {
			echo '<li title="',$item['id'],'">',$item['title'],'</li>';
			$order[] = $item['id'];
		}
	?>
</ul>
<br />
<input type="hidden" name="sort_order" id="sort_order" value="<?php echo implode(',',$order); ?>" />
<input type="submit" name="do_submit" value="Submit Sortation" class="button" />
</form>
<?php } else { ?>
	
	<p>Sorry!  There are no items in the system.</p>
	
<?php } ?>

We’ll start out by querying the database to retrieve all records from the table. If there are no records available, we simply show a message saying so. Once we have established that records are available, we:

• create a message box DIV that will notify users of the status of AJAX request actions.
• create a form element.
• create an “auto-save” option checkbox that directs whether or not the sort order should be saved on every drag/drop.
• create a UL element that outputs the list of records in their current sort order. Each LI element has its ID temporarily stored in its HTML attribute. (For those of you who don’t mind using custom element attributes, feel free to create a custom attribute to store the record ID).
• create a hidden INPUT element to dynamically store the current sort order.
• create a submit button that will work via AJAX or typical form submission.

There’s a lot of stuff going on here but it’s all necessary to ensure positive user experience, maximal functionality, and reliability.

The CSS

#sortable-list		{ padding:0; }
#sortable-list li	{ padding:4px 8px; color:#000; cursor:move; list-style:none; width:500px; background:#ddd; margin:10px 0; border:1px solid #999; }
#message-box		{ background:#fffea1; border:2px solid #fc0; padding:4px 8px; margin:0 0 14px 0; width:500px; }

None of the code here is required by, as always, you need to style your elements to fit your website. Since the drag and drop effect looks so cool, you’re going to want to make your elements look cool too.

The MooTools JavaScript

/* when the DOM is ready */
window.addEvent('domready', function() {
	/* grab important elements */
	var sortInput = document.id('sort_order');
	var submit = document.id('autoSubmit');
	var messageBox = document.id('message-box');
	var list = document.id('sortable-list');
	
	/* get the request object ready;  re-use the same Request */
	var request = new Request({
		url: '<?php echo $_SERVER["REQUEST_URI"]; ?>',
		link: 'cancel',
		method: 'post',
		onRequest: function() {
			messageBox.set('text','Updating the sort order in the database.');
		},
		onSuccess: function() {
			messageBox.set('text','Database has been updated.');
		}
	});
	/* worker function */
	var fnSubmit = function(save) {
		var sortOrder = [];
		list.getElements('li').each(function(li) {
			sortOrder.push(li.retrieve('id'));
		});
		sortInput.value = sortOrder.join(',');
		if(save) {
			request.send('sort_order=' + sortInput.value + '&ajax=' + submit.checked + '&do_submit=1&byajax=1');
		}
	};
	
	/* store values */
	list.getElements('li').each(function(li) {
		li.store('id',li.get('title')).set('title','');
	});
	
	/* sortables that also *may* */
	new Sortables(list,{
		constrain: true,
		clone: true,
		revert: true,
		onComplete: function(el,clone) {
			fnSubmit(submit.checked);
		}
	});
	
	/* ajax form submission */
	document.id('dd-form').addEvent('submit',function(e) {
		if(e) e.stop();
		fnSubmit(true);
	});
	
	
});

The first step in the process is rounding up the list of key elements in the page. Then we create our Request instance which will be used for every AJAX request. Next we create fnSubmit the function that will round up the LI elements (records) and their sort order. Lastly, we create our Sortables instance and connect submission event to the form’s submit button. When you split the pieces apart, the system is actually quite simple.

The jQuery JavaScript

/* when the DOM is ready */
jQuery(document).ready(function() {
	/* grab important elements */
	var sortInput = jQuery('#sort_order');
	var submit = jQuery('#autoSubmit');
	var messageBox = jQuery('#message-box');
	var list = jQuery('#sortable-list');
	/* create requesting function to avoid duplicate code */
	var request = function() {
		jQuery.ajax({
			beforeSend: function() {
				messageBox.text('Updating the sort order in the database.');
			},
			complete: function() {
				messageBox.text('Database has been updated.');
			},
			data: 'sort_order=' + sortInput[0].value + '&ajax=' + submit[0].checked + '&do_submit=1&byajax=1', //need [0]?
			type: 'post',
			url: '<?php echo $_SERVER["REQUEST_URI"]; ?>'
		});
	};
	/* worker function */
	var fnSubmit = function(save) {
		var sortOrder = [];
		list.children('li').each(function(){
			sortOrder.push(jQuery(this).data('id'));
		});
		sortInput.val(sortOrder.join(','));
		console.log(sortInput.val());
		if(save) {
			request();
		}
	};
	/* store values */
	list.children('li').each(function() {
		var li = jQuery(this);
		li.data('id',li.attr('title')).attr('title','');
	});
	/* sortables */
	list.sortable({
		opacity: 0.7,
		update: function() {
			fnSubmit(submit[0].checked);
		}
	});
	list.disableSelection();
	/* ajax form submission */
	jQuery('#dd-form').bind('submit',function(e) {
		if(e) e.preventDefault();
		fnSubmit(true);
	});
});

The jQuery code is surprisingly similar to the MooTools version. Please note that duplicating the jQuery functionality will require that you also download the jQuery UI library. It’s a good chunk of extra code but the functionality works great.

The “Header” PHP/MySQL

/* on form submission */
if(isset($_POST['do_submit']))  {
	/* split the value of the sortation */
	$ids = explode(',',$_POST['sort_order']);
	/* run the update query for each id */
	foreach($ids as $index=>$id) {
		$id = (int) $id;
		if($id != '') {
			$query = 'UPDATE test_table SET sort_order = '.($index + 1).' WHERE id = '.$id;
			$result = mysql_query($query,$connection) or die(mysql_error().': '.$query);
		}
	}
	
	/* now what? */
	if($_POST['byajax']) { die(); } else { $message = 'Sortation has been saved.'; }
}

The “header” or processing PHP file receives the sort order, splits the string apart by the comma delimiter, and executes queries to update the sort order. Since PHP’s mysql_query function wont allow for more than one query at a time, queries need to be executed separately. If you use another MySQL/PHP library (PDO, etc.) you may want to append the queries to a single string and execute them all at once. Depending on the method by which the user submitted the update (AJAX or normal post), the PHP will either die out or reload the page per usual.

My clients have always loved this feature within their CMS. Sorting records can be hugely important and allowing for an easy method by which to do so can make you look like a miracle worker.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Using jQuery or MooTools For Drag, Drop, Sort, Save

Related posts:

1. Using MooTools 1.2 For Drag, Drop, Sort, Save
2. Drag. Drop. Lock.
3. Animated AJAX Record Deletion Using jQuery
4. Save Web Form Content Using Control + S
5. Drag & Drop Elements to the Trash with MooTools 1.2

<script>
	ESPN_refresh=window.setTimeout(function(){window.location.href=window.location.href},900000);
</script>
<noscript>
	<meta http-equiv="refresh" content="900" />
</noscript>

I understand what the code was supposed to do but was confused as to why they’d use JavaScript as a primary method and META as a fallback method. Why not just use the META method? I did some research and found the answer at Wikipedia:

Use of meta refresh is discouraged by the W3C, since unexpected refresh can disorient users. Meta refresh also impairs the web browser’s “back” button in some browsers (including Internet Explorer 6 and before), although most modern browsers compensate for this (Mozilla Firefox, Opera, Internet Explorer 7).

So there you have it. Use JavaScript as your primary means for automatic page refreshes and a META tag as your fallback.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: META Refresh vs. JavaScript Refresh

Related posts:

1. Automatically Refresh a Page Using JavaScript or Meta Tags
2. Create a JavaScript Refresh Link
3. “Favorite” Link — How To Create a Bookmark Link
4. Override Vista and XP’s Themed Buttons and Scrollbars Using a META Tag
5. Adios Means Goodbye – Browser 301 Redirects In All Languages

The Sprite Image

This is a great example of an efficient, useful sprite image.

The HTML

<ul id="nav">
	<li id="home" <?php echo $current == '' || $current == 'home' ? 'class="current"' : ''; ?>><a href="?home">Home</a></li>
	<li id="about" <?php echo $current == 'about' ? 'class="current"' : ''; ?>><a href="?about">About</a></li>
	<li id="services" <?php echo $current == 'services' ? 'class="current"' : ''; ?>><a href="?services">Services</a></li>
	<li id="contact" <?php echo $current == 'contact' ? 'class="current"' : ''; ?>><a href="?contact">Contact</a></li>
</ul>

My code mostly mirrors the original ALA post’s code but I’ve chose to use IDs instead of CSS classes.

The CSS

#nav { width: 401px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat; position: absolute; top: 100px; left: 100px; padding:0; }
#nav li { display: inline; }
#nav li a:link, #nav li a:visited { position: absolute; top: 0; height: 48px; text-indent: -9000px; overflow: hidden; z-index: 10; }

#home a:link, #home a:visited { left: 23px; width: 76px; }
#home a:hover, #home a:focus { background: url(sprites-blue-nav.gif) no-repeat -23px -49px; }
#home a:active { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; }
#home.current a:link, #home.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -23px -147px; cursor: default; }
.nav-home, .nav-home-click { position: absolute; top: 0; left: 23px; width: 76px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -23px -49px; }
.nav-home-click { background: url(sprites-blue-nav.gif) no-repeat -23px -98px; }

#about a:link, #about a:visited { left: 100px; width: 82px; }
#about a:hover, #about a:focus { background: url(sprites-blue-nav.gif) no-repeat -100px -49px; }
#about a:active { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; }
#about.current a:link, #about.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -100px -147px; cursor: default; }
.nav-about, .nav-about-click { position: absolute; top: 0; left: 100px; width: 82px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -100px -49px; }
.nav-about-click { background: url(sprites-blue-nav.gif) no-repeat -100px -98px; }

#services a:link, #services a:visited { left: 183px; width: 97px; }
#services a:hover, #services a:focus { background: url(sprites-blue-nav.gif) no-repeat -183px -49px; }
#services a:active { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; }
#services.current a:link, #services.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -183px -147px; cursor: default; }
.nav-services, .nav-services-click { position: absolute; top: 0; left: 183px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -183px -49px; }
.nav-services-click { background: url(sprites-blue-nav.gif) no-repeat -183px -98px; }

#contact a:link, #contact a:visited { left: 281px; width: 97px; }
#contact a:hover, #contact a:focus { background: url(sprites-blue-nav.gif) no-repeat -281px -49px; }
#contact a:active { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; }
#contact.current a:link, #contact.current a:visited { background: url(sprites-blue-nav.gif) no-repeat -281px -147px; cursor: default; }
.nav-contact, .nav-contact-click { position: absolute; top: 0; left: 281px; width: 97px; height: 48px; background: url(sprites-blue-nav.gif) no-repeat -281px -49px; }
.nav-contact-click { background: url(sprites-blue-nav.gif) no-repeat -281px -98px; }

Unfortunately there’s plenty of CSS. That’s generally the one downside of using sprites but the payoff comes with less requests to the server. My CSS differs from the original ALA post in that I accommodate for my IDs.

The MooTools JavaScript

(function($) {
	window.addEvent('domready',function() {
		$('nav').getElements('li').each(function(li) {
			//settings
			var link = li.getFirst('a');
			//fix background image
			if(!li.hasClass('current')) {
				link.setStyle('background-image','none');
			}
			//utility div
			var div = new Element('div',{
				'class': 'nav-' + li.get('id'),
				opacity: 0
			}).inject(li);
			//background imagery
			li.addEvents({
				mouseenter: function() {
					div.fade('in');
				},
				mouseleave: function() {
					div.fade('out');
				},
				mousedown: function() {
					div.addClass('nav-' + li.get('id') + '-click');
				},
				mouseup: function() {
					div.removeClass('nav-' + li.get('id') + '-click');
				}
			});
		});
	});
})(document.id);

My MooTools version is less code and slightly more efficient as I’m not creating and disposing of the same DIVs over and over as the user hovers over each menu item. The menu has original, selected, hovered, and mousedown states. Awesome!

Do you use sprites for any of your menus? Share a link to a few — I’d love to see what you’ve done!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create a Sprited Navigation Menu Using CSS and MooTools

Related posts:

1. Create Snook-Style Navigation Using MooTools
2. Create Twitter-Style Dropdowns Using MooTools
3. Create Twitter-Style Dropdowns Using jQuery
4. Fancy Navigation with MooTools JavaScript
5. Creating & Using CSS Sprites

Image Optimization – PNG Crush

Unlike varying content pages, Images are a fixed download size so I sought out to optimize image sizes. I used PNGCrush to compress images without loss of image quality. Using PNGCrush I was able to knock off 120KB of useless image space.

Plugin Removal

I wasn’t happy about doing it but I removed the WP-Polls plugin. Removing this plugin allowed me to avoid loading both jQuery and MooTools on every page. Removing WP-Polls also allowed me to avoid a few server requests (to CSS and JS files). I saved approximately 75KB by doing this alone.

Javascript Compression and Consolidation

I’ve placed all of my JavaScript into one file. MooTools More classes and custom plugins were all compressed and jammed into one file. This allows for less requests to the server. About 40KB was saved using compression.

Google AJAX API

Instead of bogging my virtual server down by serving up the same MooTools Core JavaScript file, I’ve started letting Google carry that burden using their AJAX Libraries API library. What’s great about using their API is that if you’ve been to other websites that use Google’s AJAX API, the file is already cached and my site loads faster.

.htaccess ETags and Compression

I took full advantage of Eric Wendelin’s guest post, Improve Your YSlow Grade Using .htaccess, and used .htaccess to add Expires headers and file compression strategies to decrease load time and implement file caching.

PHP Caching

You’ll notice that my new design displays my RSS subscriber count, Twitter follower count, and latest tweet. I’ve added caching strategies to my website to make the RSS subscriber count and Twitter follower count check once per day and my latest tweet check once per hour. Implementing these caching strategies saves me remote requests on every page load.

Database Query Caching

I’ve implemented WordPress’ DB Cache plugin which caches query results and is proven more effective than WP-Cache and WP-SuperCache. I was having a lot of problems with WP-Cache so this plugin was a godsend for me — the site feel faster and I don’t run into problems with other caching methods.

Room for Improvement

My website is not yet perfect — there are a few things I can improved:

• CSS Sprites — Since I’ve just launched the redesign, I didn’t want to go into spriting yet in case I need to overhaul things. Sprites will save me quite a few server requests.
• Media Temple Issues — Unfortunately I get a “Cannot Establish Connection” every once in a while so I need to check out what’s causing that. I never got those warnings on Dreamhost hosting.
• BuySellAds — I need to twists BSA’s arm into Gzipping their resources to speed up downloading of those files. BSA implementing GZipping would help out thousands of websites.

Have any other ideas for optimization? Let me know!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Speeding Up My Website

Related posts:

1. Advanced .htaccess Security – Allow or Block Specific IPs From Your Website
2. MooTools TwitterGitter and Cookies
3. Reduce PNG Graphic Size Using PNGCRUSH
4. My Website Tools
5. Simple PHP Caching and Content Retrieval Function

One of my MooTools plugins I use most is TwitterGitter. TwitterGitter is a small MooTools plugin I’ve created to fetch any number of tweets from an Twitter user’s account. Since clients don’t tweet very often, there’s no advantage to pinging Twitter for a tweet every page load. To save Twitter a bunch of repetitive requests, I use cookies to save the latest tweet.

The MooTools JavaScript

var tweet = '';
if(!Cookie.read('latestTweet')) {
	var myTwitterGitter = new TwitterGitter(init.twitterHandle,{
		count: 1,
		onComplete: function(tweets,user) {
			tweets.each(function(tweet,i) {
				if(tweet.text) {
					Cookie.write('latestTweet',tweet.text, { duration: 1 });
					tweet = tweet.text;
				}
			});
		}
	}).retrieve();
}
else {
	tweet = Cookie.read('latestTweet');
}

Pretty simple: if the cookie is there and fresh, use the cookie’s value as the tweet; if not, go get the tweet from Twitter. Of course the most optimal method of saving tweets is caching them server-side but if you use TwitterGitter, I recommend using cookies to avoid unnecessary pings to Twitter.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: MooTools TwitterGitter and Cookies

Related posts:

1. Create, Read, Update, and Delete Cookies with MooTools 1.2
2. PHP Cookies: How to Set Cookies & Get Cookies
3. MooTools TwitterGitter Plugin
4. Caching AJAX Results in JavaScript
5. Introducing MooTools Cache

The Shell Script

# directive
pngcrush -reduce -brute source.png destination.png

#result
Best pngcrush method = 113 (fm 0 zl 9 zs 0) for destination.png
     (33.38% IDAT reduction)
     (33.43% filesize reduction)

   CPU time used = 835.707 seconds (decoding 151.450,
          encoding 679.145, other 5.112 seconds)

The above directive is a basic usage of PNGCRUSH. PNGCRUSH offers a wealth of options that allow you to optimize your PNGs. If you use many PNGs on your website, optimizing them using PNGCRUSH is a must. Using the above directive, PNGCRUSH took a 11.7MB down to 7.8MB. NO QUALITY LOSS. Sure it took over 10 minutes, but think of the bandwidth your site will save.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Reduce PNG Graphic Size Using PNGCRUSH

Related posts:

1. PNGCRUSH a Directory of Images
2. PHP Optimization – Using A Timer To Benchmark Code And Increase Speed
3. Logging Information to the Firebug JavaScript Console
4. Use FURL to Retrieve Website Headers
5. PHP / MySQL Database Optimization Function

self = this

Using the this keyword is essential in MooTools but can become annoying when you need to use binding frequently. For example:

/* dreadful use of bind instead of "self" */

//more class code above
},
someMethod: function() {
	
	this.elements.each(function(element) {
		if(element.value == this.options.defaultValue) {
			element.set('value','');
		}
	},this);
	
	var request = new Request({
		method: 'get',
		url: 'page.php',
		data: {
			ajax: 1
		},
		onRequest: function() {
			this.options.textIndicator.set('text','Updating ' + this.elements.length + ' element...');
		}.bind(this),
		onSuccess: function() {
			this.options.textIndicator.set('text','Update successful. ' + this.elements.length + ' elements updated.');
		}.bind(this),
		onFailure: function() {
			this.options.textIndicator.set('text','Failed to update ' + this.elements.length + ' elements.');
		}.bind(this)
	}).send();
	
},
//more class code below

Instead of binding everything under the sun, set a self var that is equal to the this to avoid that mess:

/* better */
//more class code above
},
someMethod: function() {
	
	var self = this;
	
	self.elements.each(function(element) {
		if(element.value == self.options.defaultValue) {
			element.set('value','');
		}
	});
	
	var request = new Request({
		method: 'get',
		url: 'page.php',
		data: {
			ajax: 1
		},
		onRequest: function() {
			self.options.textIndicator.set('text','Updating ' + self.elements.length + ' element...');
		},
		onSuccess: function() {
			self.options.textIndicator.set('text','Update successful. ' + self.elements.length + ' elements updated.');
		},
		onFailure: function() {
			self.options.textIndicator.set('text','Failed to update ' + self.elements.length + ' elements.');
		}
	}).send();
	
},
//more class code below

Classes that use self references include Function, Native, and Swiff.

this.____ = $(this.options.element);

Modifying the class options from inside the class is generally poor practice. Instead of this:

this.options.element = $(this.target.element);

…use this:

this.element = $(this.target.element);

Your class will become shorter and you may accept both strings and Elements as values.

No $/$$ as Default Values

Since your MooTools class is likely not inside the domready() function, assigning default setting values to $(‘something’) or $$(‘.somethings) is not wise:

var myClass = new Class({
	Implements: [Options],

	options: {
		elements: $$('a')
	},
	initialize: function() {
	
	},
	//more down here
});

Instead, set them to a string and extend the elements inside the initialize() method:

var myClass = new Class({
	Implements: [Options],

	options: {
		elements = 'a'
	},
	initialize: function() {
		this.elements: $$(this.options.elements);
	},
	//more down here
});

Step Back: Less Specificity

When creating a MooTools class, take a step back and think “what can I take out of this class to make it more flexible?” The less specific a plugin is, the more flexible and usable the class can be. For that specific use, extend your scaled-back class.

Less Dependencies, More Use

One advantage of using MooTools is that it’s highly extensible. While MooTools implements numerous helper functions on native JavaScript objects, if you can avoid using the functionality of another MooTools class that’s only use a few times, do it. Less dependencies can make your class more stable and modular.

Hopefully this list of tips can make your future plugin creation more fruitful, clean, and functional!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: MooTools Class Creation Tips

Related posts:

1. MooTools Class Creation Tips II
2. Create a Simple Slideshow Using MooTools, Part III: Creating a Class
3. MooTools OpenLinks Class – Updated
4. MooTools-Like Element Creation in jQuery
5. New MooTools Plugin: ElementFilter

1. Fewer images for the browser to download, which means fewer requests to the server.
2. Total images size is generally smaller, so less download time for the user and less bandwidth consumption.
3. No ugly mouseover code. No JavaScript — only CSS!

For this example, I’ve used the DW illustration. I have a color version and a grayscale version which I have merged into one file as you can see below.

Now, it’s time to see how the system works.

The HTML

	<a href="http://domain.com" id="logo-link"> </a>

Just a very simple anchor tag with a unique ID.

The CSS

#logo-link
{
	width:191px;
	height:151px;
	text-decoration:none;
	display:block;
	background-image:url(dw-logo-sprite.jpg);
	background-position:191px 0;
}
#logo-link:hover,#logo-link:active	{ background-position:0 0; }

When the image initially loads, I want the grayscale version, which is on the right site. For this reason, I set the link’s initial background position 191 pixels to the left. When someone mouseovers the link, however, I want to show the color version. It’s only then that I remove the 191 pixels.

Wanna see the working version?

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Creating & Using CSS Sprites

Related posts:

1. Create a Sprited Navigation Menu Using CSS and MooTools
2. Image Protection Using PHP, the GD Library, JavaScript, and XHTML
3. Facebook-Style Modal Box Using MooTools
4. Create Snook-Style Navigation Using MooTools
5. Create a Twitter AJAX Button with MooTools, jQuery, or Dojo