Basically you’d have the following javascript functions defined:

function isNumber( evt ) {
	valid		= true;
	if( evt.which || ( evt.which != 0 && evt.charCode != 0 ) ) {
		var charCode	= ( evt.which ) ? evt.which : event.keyCode;
		if( charCode > 31 && ( charCode < 48 || charCode > 57 ) ) {
			valid	= false;
		}
	}
	return valid;
}

function isValidEmailCharacter( evt ) {
	valid	= true;
	if( evt.which == null || ( evt.which != 0 && evt.charCode != 0 ) ) {
		var charCode	= ( evt.which ) ? evt.which : event.keyCode;
		var char		= String.fromCharCode( charCode );
		var re			= new RegExp( /([0-9A-Za-z-_@.])/ );
		valid			= re.test( char );
	}
	return valid;
}

function isValidPhoneCharacter( evt ) {
	valid	= true;
	if( evt.which == null || ( evt.which != 0 && evt.charCode != 0 ) ) {
		var charCode	= ( evt.which ) ? evt.which : event.keyCode;
		var char		= String.fromCharCode( charCode );
		var re			= new RegExp( /([0-9+\s\[\]])/ );
		valid			= re.test( char );
	}
	return valid;
}

Then we add an onkeypress event to the relevant form fields to filter out any of the keystrokes you don’t want. This would look something like:

The only problem with this method of filtering input to the form elements is that key combos using filtered characters will not work, i.e. ⌘+A to select the entire entry in a text field will not work when we’re applying the isNumber filter to that field. The solution would be to create a list of key combonations that are allowed.

Not a necessity, but it can’t hurt.
- Chris

* That’s not to say you shouldn’t validate the form when it’s submitted, the non-JavaScript action will be to allow anything.

It’s very simple to do. In order to retrieve the page anchor (i.e. get test from http://chris-miller.org/88#test:

var anchor = self.document.location.hash.substring( 1 );

Setting the anchor to update, for example to http://chris-miller.org/88#newAnchor it can be achived using:

self.document.location.hash = "newAnchor";

Very useful for creating permalinks to AJAX loaded content or JS popups.
- Chris

One thing I was struggling a bit to do was fade between two divs, having the first one fade out then the second fade in. Rather than grabbing a plugin to do it I wanted a small bit of JavaScript I could embed in a page, I couldn’t find one anywhere.

It’s pretty simple to do, the code below should give you a starting point to set up some JS to fade between 2 or more divs.

function fadeBetweenDivs( div1, div2 ) {
	$$( div1 ).fade( "out" );
	(function(){
		$$( div1 ).setStyles({
			display:	'none',
			opacity:	0
		});
	}).delay( 150 );
	(function(){
		$( div2 ).setStyles({
			display:	'block',
			opacity:	0
		});
	}).delay( 150 );
	$$( div2 ).fade( "in" );
}

That is all,
- Chris

MySQL is my DB of choice, due to working mainly on LAMP architecture systems. The best tool by far I’ve found for managing MySQL databases under Mac OS X is Sequel Pro (previously CocoaMySQL).

Sequel Pro interface showing the table editor view

Before finding Sequel Pro I was a full-time user of PHPMyAdmin, a system which I continue to use in some instances. Sequel Pro essentially provides a desktop solution that is very similar to PHPMyAdmin, anyone who has experience using PHPMyAdmin should have no problems to adjusting to using Sequel Pro in its stead.

Annotated Sequel Pro

1. Database Selector

   A basic drop-down list where you can select a database to work with or add a new database.

2. Table Selector

   The list of tables in the currently selected database. If the number of tables is large enough a filter field appears at the top of this list allowing you to filter the tables based upon their names. Below the list of tables is a small section with meta-data on the currently selected table, under this is the controls for the database tables. From here we can add, remove, duplicate and truncate tables with ease (with conformation on the obviously destructive actions).

3. Field Viewer/Editor

   This portion of the interface is controlled by whichever view is selected from the icons appearing in the application toolbar.

4. Keys Viewer/Editor

   This area allows you to manage keys and indexes of the table you’re viewing. The +/- toggle at the bottom left allows you to add and remove keys/indexes.

5. Structure View (shown)

   Changes the view to the structure view as shown and detailed above.

6. Table Contents View

   Switches to the table contents view.

7. SQL Query Editor

   Switches to the SQL query editor view.

Another of the real selling points for Sequel Pro for me is the ability to easily import and export data. From the File > Export menu you can export data in various formats, CSV and XML being the most useful.

⌘+⇧+I invokes the import dialog which allows you to select an SQL dump or CSV of values to import into the selected database. The SQL import will obviously just run the query and update the various tables as required, the CSV import on the other hand allows you to select the table and marry rows in the CSV file to those in the table you wish to import to.

Table Structure

As detailed above the table structure view allows you to define the structure of the tables in the database and to set up the indexing and keys for the fields.

A nice touch available here is the ability to reorder pre-existing fields by dragging and dropping them in the relevant places and the ability to duplicate fields rather than have to re-enter details for virtually identical fields.

Table Contents

From there you can add, modify, duplicate and delete rows in the table, all of which you’d really expect from the table contents view.

Again, like the table structure view, you can duplicate entries to save re-entering similar data. Inserting NULL values is as simple as hitting ^+⇧+N. Copying rows as INSERT statements is a big plus (^+⌥+⌘+C) and useful when copying singular entries between a development and live database, rather than dumping the data from a custom query.

SQL Query

This view allows you to enter queries and run them against the database. The editor itself has autocompletion and some niceties like smart quoting of field names.

The power here comes from the ability to store previously used queries and access recent queries via a query history. Any of the generated result sets can be exported in the previously mentioned formats for easy data filtering and export.

In summary

It’s a bloody useful tool and a must for anyone working with MySQL databases under Mac OS X. It’s not a silver-bullet solution of course; it doesn’t do much more than PHPMyAdmin and the things it does can be replicated in PHPMyAdmin with relative ease; but then it can’t be a bad thing to have lying about, especially since it’s free!

• You can download a copy of Sequel Pro from their website.
• Developed by mjmedia.

Go have a play with Sequel Pro now,
- Chris