Here’s an example of validating first, then executing:

	/* The good... */
	public function insertNewInvoiceItem($item, $quantity)
	{
		if(!$item instanceof Shop_Item) {
			throw new InvalidArgumentException ('Expecting an item to be an instance of Shop_Item.');
		}

		if(!is_numeric($quantity)) {
			throw new InvalidArgumentException('Quantity is not numeric.');
		}

		// We're good to go. Continue with the function...
	}

The method above is also much cleaner than if... else... statements and limits the extra (perhaps useless) work required by your code:

	/* The bad... */
	public function insertNewInvoiceItem($item, $quantity)
	{
		if($item instanceof Shop_Item) {
			// Do some $item stuff...

			if(is_numeric($quantity)) {
				// Do some $quantity calculations
			} else {
				// Uh oh, $quantity was bad but we've
				// run some Shop_Item logic already.
			}
		}
		else
		{
			// $item is not part of Shop_Item
		}
	}

I used a simple example to demonstrate my point but when this technique is used on more complex logic, it’s benefits are much more obvious.

Happy coding!

Let’s begin…

Alphabetize Your Code

Alphabetizing your code is an extra organizational step often overlooked. It’s especially helpful in PHP classes containing getter and setter functions, but it also comes in handy for CSS and JS. Often times similarly named elements will be somewhat related in function, so clustering them together makes them easier to find.

I’d recommend alphabetizing everything from JS class and function names, to CSS classes and ID’s. You’ll notice that every code example in this article is alphabetized to further exemplify the point.

Comment Everything

Comments are essential, especially among devs working in groups. The styles seem to vary slightly from person to person, but the theme is the same – you can never comment too much.

Here is my commenting style for JS / PHP:

/******************************************************
 * Cart.class.js
 *
 * A class of JS functions associated with the
 * tasks performed by the shopping cart.
 * @author Koa Metter em@mail.com
 * @copyright Copyright (c) 2010, Company
 ******************************************************/
var Cart = {

    // ...

    /**
     * Add item to cart
     * @param string item_id
     * @param string item_quantity
     * @todo Check for string validity
     */
    addCartItem: function (item_id, item_quantity)
    {
        if (!Utilities.isEmpty($('#cart-items')))
		{
			Cart.AJAX({
				data: 'call=addOfferingToCart&args[0]='+item_id+'&args[1]='+item_quantity,

				// Things we'd like to do upon 'status => success' ajax response
				success: function (msg)
				{
					Cart.displayNewCartItem(msg);

					// Update cart total price
					Cart.displayCartTotal();

					// Also update checkout rebilling terms!
					if (msg.response.rebilling_terms_agreement){
						$('#billing-terms-agreement-label').html(msg.response.rebilling_terms_agreement);
					}

					Cart.proceedBtnCheck();
				}
			});
		}
    }

}

When commenting in PHP, phpDocumentor can be used to build a comprehensive dev manual for your source code. I use the same documentation style for JS simply because I come from a PHP background.

Though CSS doesn’t need the phpDocumentor-type of commenting, it should nevertheless remain detailed to explain the elements and their purpose. Clustering elements that are related to the same stylistic area or function of the website helps in organizing without the need of many comment blocks.

Indent CSS

Indenting your code is an obvious standard with most programing languages, but often times CSS is left out of the loop. Indent a CSS element if it’s a child of a parent element, like so:

#container {
    color:#222;
    width:100%;
    z-index:1;
}

    #container .lg-block {
        height:300px;
    }

    #container .sm-block {
        height:100px;
    }

.etc {
    /* ... */
}

The above CSS example shows that the class .lg-block is specifically contained within the ID #container, thus we are indenting it to visually represent the same thing.

OOP-ish Javascript

This topic deviates slightly from actual “coding standards”, but I think it’s equally important – how to format your JS into usable, organized classes. This rule takes into account all other coding standards (alphabetization, indentation, commenting, etc) and applies them to JS, adding in OOP-like objects.

Here’s an example:

var Vehicles = {
    /*
     * Give us the word "Bus"
     * @return string
     */
    bus: function ()
    {
        return 'Bus';
    },

    /*
     * Give us the word "Car"
     * @return string
     */
    car: function ()
    {
        return 'Car.';
    },

    /*
     * Give both car() and truck()
     * @return string
     */
    getCarAndTruck: function ()
    {
        return this.car + ' and ' + this.truck;
    },

    /*
     * Give us the word "Truck"
     * @return string
     */
    truck: function()
    {
        return 'Truck.';
    }
}

// Let's call the function getCarAndTruck like so:
Vehicles.getCarAndTruck();

Shuffling your JS into objects helps associate functions with tasks / groups and thus creates a more organized codebase.

Hopefully this helps. If you have a different method of commenting and/or organizing your CSS or JS code, let me know!

The Workaround

Below is a simple Javascript function you can use to convert Tiny-enhanced textareas back into regular form textareas:

var fixTiny = function(properties) {
	var properties = properties || new Object();
	var instance = properties.instance || 'mce_editor_0';
	tinyMCE.execInstanceCommand(instance,'mceCleanup');
	tinyMCE.triggerSave(true,true);
	return true;
}

Using The Goods

Using the above Javascript function is easy. Let’s assume we’re submitting two TinyMCE-enhanced textareas named “excerpt” and “body”, in a form with the id “myForm”. Here’s how to submit the form:

(The form submit code is taken directly from this Mootools demos page. Please refer to that page for further Ajax.Form reference.)

$('myForm').addEvent('submit', function(e) {
	/**
	 * Prevent the submit event
	 */
	new Event(e).stop();

	fixTiny({instance:'excerpt'});
	fixTiny({instance:'body'});

	/**
	 * This empties the log and shows the spinning indicator
	 */
	var log = $('log_res').empty().addClass('ajax-loading');

	/**
	 * send takes care of encoding and returns the Ajax instance.
	 * onComplete removes the spinner from the log.
	 */
	this.send({
		update: log,
		onComplete: function() {
			log.removeClass('ajax-loading');
		}
	});
});

All of this code, including the fixTiny function should be placed within a domready event.

Simple, Right?

If I’ve missed anything, shout at me. You can also refer to the Mootools forums for further examples of using both TinyMCE and the Ajax.Form class.

After sorting through tons of scripts, I thought I’d share the best ones with you.

Each script is categorized based upon the Javascript library they use. A few links aren’t actually scripts, but rather reference sheets or links to other resource websites.

jQuery (jq)

“jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.” – Wikipedia, 01/16/08

Reference Sheet (jq)

Each one of these reference sheets (cheat sheets) are crammed with functions and usage for jQuery. (They are slightly outdated. If you know of any jQuery reference sheets recently updated, please let me know.)
=-=-=-=-=-=
Reference Sheets (PDF): Page 1 – Page 2

Multiple File Uploads (jq)

The point of this AJAX-enabled script is to give the user a visual sandbox to add/delete uploads, all without ever reloading the page. The examples and documentation are topnotch.
=-=-=-=-=-=
Fyneworks – Multiple File Upload

Table Sorting (jq)

Sort table data by their parent category with Javascript – no page reloading, compact code, lots-o-fun.
=-=-=-=-=-=
Polyester – Tablesorter

A List of 240 Plugins (jq)

Rather then regurgitating what’s already on the net, here’s a site that lists over 240 jQuery plugins and their respective links. It’s freaking huge.
=-=-=-=-=-=
Sastgroup – 240 Plugins For jQuery

MooTools (mt)

“Mootools is a compact, modular, object-oriented JavaScript web application framework, intended to make the process of writing extensible and cross-browser compatible code more efficient.” – Wikipedia, 01/17/08

Reference Sheet (mt)

Being that MooTools is so simple to use, you may not even need a cheat sheet. But just in case, Snook has put together a colorful dab of MooTools knowledge for your enjoyment.
=-=-=-=-=-=
Snook – Mootools r83 Cheatsheet

mooRainbow (mt)

MooRainbow has to be one the best looking color pickers I’ve seen for the web that isn’t Flash. It’s almost an exact clone of the color picker used in Photoshop, and again, it’s for the web. Sweet stuff people, sweet stuff.
=-=-=-=-=-=
Woolly Sheep – mooRainbow

Mediabox (mt)

Think of a lightbox, only comprising of streaming online media (like YouTube or Quicktime movies) instead of images. This is what we call a ‘mediabox’, and I love it.
=-=-=-=-=-=
Ianian7 – Mediabox

Slideshow (mt)

Taken from Electric Prism, “Slideshow is a javascript class to stream and animate the presentation of images on your website.”

The presentation is similar to the default pan/zoom of Apple’s screensaver.
=-=-=-=-=-=
Electric Prism – Slideshow

Charts (mt)

Easily create stylish charts and graphs of any combination of data, all with Javascript simplicity. If you have any data that needs presenting on your website, this script is well worth a download.
=-=-=-=-=-=
Copix – Charts & Graphs

Calendar / DatePicker (mt)

Made by the same badasses that created Mediabox (above), this date picker is super-stylish and easy to integrate into your website. Never again should your web user have to manually insert a date.
=-=-=-=-=-=
Electric Prism – DatePicker

FancyUpload (mt)

FancyUpload is a stylish presentation of uploads and ability to add/remove your upload queue with a mouse click. Well worth a look for anyone presenting upload options on their site.
=-=-=-=-=-=
Digitarald – FancyUpload

Library (mt)

Keeping with what the header says, this is the motherload of MooTools information – a library for a library, if you will. It’s a complete reservoir of scripts, tutorials, and basic information relating to MooTools.
=-=-=-=-=-=
CNET – MooTools Library

Mocha UI (mt)

Picture an entire user interface built entirely in Javascript. That’s Mocha UI – expandable, collapse, and minimize windows all while maintaing the feeling of being in a virtual operating system. It’s incredibly smooth, cross-browser compatible, and unbelievably small in size.
=-=-=-=-=-=
Greg Houston – Mocha

MooTable (mt)

Dress a simple table in a MooTable script and you instantly have the ability to sort any column with the click of the mouse. Easy to setup and extremely lightweight.
=-=-=-=-=-=
Joomlicious – Mootable

Reflection JS (mt)

Reflection JS beautifully adds a perfect reflection to any image without the need for manual labor. The background opacity, height, and fade can be controlled as shown on the Reflections website.
=-=-=-=-=-=
Digitalia – Reflection JS

Slimbox (mt)

It’s identical to Lightbox v2.0, only made for MooTools and a mere 7kb in size. It’s a must have for MooTool users needing the lightbox effect.
=-=-=-=-=-=
Digitalia – Slimbox

MooFlow (mt)

It’s coverflow for the web, built on MooTools. The application is a little shaky, but will no doubt improve with time.
=-=-=-=-=-=
Outcut – MooFlow

Prototype (p)

“… A JavaScript framework created by Sam Stephenson that provides an Ajax framework and other utilities.” – Wikipedia, 01/23/08

Reference Sheet (p)

Made by the same killer dude that created the MooTools cheat sheet, Snook delivers some Prototype help in the same yummy, cheat sheet fashion.
=-=-=-=-=-=
Snook – Prototype Cheat Sheet

Script.aculo.us (p)

An obvious must-have for Prototype users. Script.aculo.us provides an amazing library of visual styles (including the ability to drag-and-drop) and works flawlessly on the Prototype library.
=-=-=-=-=-=
Script.aculo.us

Really Easy Field Validation (p)

Exactly what the header says – convert any form into an instantly-validating machine.
=-=-=-=-=-=
Tetlaw – Really Easy Field Validation

jsProgressBarHandler (p)

Add a beautiful progress bar to your application and start singing songs of joy. This is by far the easiest (and best looking) progress bar script you’ll find on the internet.
=-=-=-=-=-=
Bram – jsProgressBarHandler

EditInPlace (p)

This is an excellent script in that it’s simple, yet extremely helpful. The techniques of EditInPlace are used in applications like Basecamp and Facebook, and probably everywhere else on the internet.
=-=-=-=-=-=
EditInPlace

Prototype Window (p)

Prototype Windows is an extremely advanced version of Lightbox. Create popup windows on-the-fly with ajax calls, or via common href application. Anything’s possible.
=-=-=-=-=-=
Xilinus – Window/

The all-too-awesome PHPMailer class has been updated and is awaiting your download.

If you use MooTools (or even if you don’t), Vacuous Virtuoso’s Fancy Form is totally worth checking out. It’s a mix of CSS and Javascript that enables you to create custom form checkboxes. There are other script on the net that claim to do the same thing, but none are as cross-browser compatible.

Lastly, to add a splash of color to your ajax load processes, check out Bram Van Damme’s Progress Bar Handler. It’s probably the smoothest, best looking non-flash based progress bar on the net.

Control Suite is a collection of six high quality widgets and controls for Web 2.0 applications built using the Prototype JavaScript framework. Each script is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. All scripts are MIT licensed and are thus completely free for any purpose in any project.

Thus far, the SelectMultiple is finding some serious use in my web applications. Assuming I come up with something not already discussed in Ryan’s examples, I’ll post it in Labs.

Go to the official Control Suite website.