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

This got me to thinking about the types of people I connect to on each of these social media networking sites. In my eyes this blog serves a different purpose and has a separate target audience to my Linkedin or Facebook profiles.

In light of this I’m giving a rundown of the groups and categories of people I connect to via each of these sites and their envisioned usage in my eyes.

Blog

The hub of this particular Chris Miller on the web. It’s where you’ll be able to find out about who I am and what I’m up to. From here you can branch out onto each of the social media sites I’m to be found on where more information in each of their specific focuses can be found.

Although technically not a social site it does mark the start of a web of profiles on various other sites as well as providing a blogroll (which is terminally out of date) of other people and sites I follow on the web.

• My blog is for: me to post random nonsense and technical articles to.
• My blog connects me to: other sites I syndicate.

Delicious

I’m terrible at using Delicious for bookmarking as well as bookmarking things locally. I tend to read an article that’s relevant to the thoughts running around my head at a particular moment then move on, forever forgetting said article (much trolling of web history ensues at a later date).

Although this site allows connections to other people I’ve shunned away from doing so. Feeds from the likes of Reddit and the BBC combined with Twitter tends to keep me up to date with any relevant articles flying around.

• Delicious is for: posting links to interesting/relevant/funny articles and categorising/tagging them.
• Delicious connects me to: nobody at the moment.

Facebook

Facebook is the only site in this list that I’d truly describe as a social media site. By this I mean that it serves no other purpose than to be a platform to connect and keep-in-touch with people I know socially. All the other sites in this list are quite focused in their purpose.

In light of this, Facebook is where most of the connecting comes into play for me. I have friends on Facebook from various facets of my life: school, university, work and other social situations. The one thing that sets Facebook apart from most of these other sites is that anyone I am friends with I have actually met, interacted with and have subsequently added as a friend.

The site itself is easy to use, little or no expertise is required to set up an account and start connecting with friends. There are various ‘applications’ to be added, groups to be joined, photos to be looked at… essentially it’s a procrastinators wet dream. This of course means it has no real focus or goal for me other than being stayintouchwithpeople.com.

• Facebook is for: everyone! Staying in contact with people I know socially.
• Facebook connects me to: pretty much everyone I know personally.

Flickr

Flickr, certainly for me, started out as a tool for online photo storage and organisation. I jumped on Flickr not long after it started up, before those pesky Yahoo! logins, and a tool was certainly what I was using it solely for.

Over time as the site developed and the whole social media thing took off Flickr added some nice functionality for discovering other people and building a photography community.

Connections I have via Flickr tend to be people I know with a smattering of people who have some interesting photos up. For the most part I find Flickr a useful tool for distributing photos onto other social media sites and it serves as an online repository of all my photos. That said however, it does make it very easy to keep up-to-date with photos of peers and colleagues who have a ton more photography skill than I (particularly Chris Hannah, Jim Moore, Steve Strowes and Dean Wright being of note).

• Flickr is for: hosting, organising and sharing my photos online.
• Flickr connects me to: people I know and other Flickr users with interesting posts.

Last.fm

I think I initially signed up to Last.fm just to see what it was, what it offered and to see if it’d be useful. Since then I’ve been off and on using the service to capture the tracks I’ve been listening to with iTunes. That is until recently with the switch for most of my music listening to Spotify which offers integrated Last.fm scrobbling.

The stats over time from tracks you’ve listened to are interesting and the music recommendations can be good especially if, like me, you generally don’t listen to music that’s very recent. I tend to view this more like I did Flickr initially, as a tool to draw information into other social media sites. That being said, I do have friends added on the site. The friends I have added tend to be actual friends I know and have somewhat similar music tastes to.

• Last.fm is for: collecting information about my music listening trends and sharing them on other sites.
• Last.fm connects me to: friends I know with similar music tastes.

Linkedin

By far the most professionally oriented of any of the sites listed here and again on my part initially used as a tool rather than a networking site. Linkedin for me initially was a convenient way of creating an online, plain and simple CV which could be easily updated and seed any full written CVs I’d need to write.

The focus of this site has shifted quite dramatically for me over time, I view this site as more of a networking site than I did previously. Now it provides a forum for me to stay contacted with people I’ve worked and studied with, without as many social faux pas such like drunken photographs or questionable music tastes. Ok they’re not hard to find, but the site does provide a professional front for me.

As I’ve said above, the people I connect with on Linkedin are those I’ve previously worked and studied with, aside from a few recruitment agencies who try and cram job offers down your throat (can’t hurt can it?).

• Linkedin is for: providing a professional front.
• Linkedin connects me to: those people who have had the privilege of working or studying with me.

Twitter

Twitter in my eyes is by far the most loosely defined group of people I follow. I view Twitter as a pick-it-up put-it-down source of random pieces of information, friend status updates and broadcasts from various companies.

My follow list generally reflects this. I follow people I know as a means of staying up-to-date with them; companies whose services I use as well as updates on various pieces of software I utilise on a daily basis; and pretty much anyone who posts something interesting or funny. So the list of Twitter updates I see in my client varies between lunch orders, company/software bulletins, 160 character quips and interesting links.

Twitter is by far the social media service that I read and post to most often, though I tend to skim over a lot of tweets to find those that are relevant or interesting to me.

• Twitter is for: quickly posting interesting links, thoughts, lazy discussions, product updates… disseminating information.
• Twitter connects me to: absolutely anyone, friends are a given but other than that, anything that interests me.

So that’s my rundown of the social media sites you’ll see me on and my usage of and connectivity on them. I’d assume most people use each of these sites in a similar manner (barring Twitter which has various marketing and advertising uses that I’m not really clued up on). Any other uses or different perspectives are welcomed.
- Chris

That’s where NameChanger comes in. NameChanger is a piece of free software from MRR Software. Basically it allows you to rename large batches of files with some simple pattern matching.

Changing the names of some videos

It’s all pretty simple really:

1. drag the target files into the application window
2. select the type of name matching you require from: replace first, replace last, replace all, replace wildcard, append, prepend, sequencing and date-stamping
3. enter your criteria, above I’ve replaced the first occurrence of ‘.’ with ‘ - ’
4. hit the ‘Rename’ button and you’re done

Grab a copy

Here’s the blurb

NameChanger
Rename a list of files quickly and easily.
See how the names will change as you type.

• the developer’s site
• NameChanger download page

Good bit of software. Simple, free, intuitive; all in all, a keeper.
- Chris

Shopping++

I got over £100 worth of groceries delivered within the one hour slot I picked, not the 2-3 hour slots that Tesco use, and everything was there, good quality and undamaged.

Not only that but having purchased over £100 worth of shopping the delivery cost is waived. So I managed to get a month worth of food and drink without the hassle of going shopping and somehow carting everything back.

Spicy Fajitas

My cupboards, fridge and freezer and completely and utterly stocked to the brim, there’s no room for anything else, at all! Now I’ve just got to eat it all.

All in all, an easy and hassle free transaction. Qudos to Sainsbury’s, A+++++ GOOD SELLER, WOULD SHOP AGAIN.
- Chris

Figure 1: Ordering Control

Creating a custom control allows us to do a number of things that we just cannot do with a normal HTML form element:

Figures 2, 3 & 4: Showing lower bounds, non-default value and upper bounds

• Display relevant information instead of certain values, such as showing Automatic at 0 in Figure 1
• Show when the upper and lower bounds are reached, for example at -100 and 100 as per our example
• Allow the user to reset the value to the default or previous setting
• Give some inkling into how the control should be used

Controls

Figure 5: Annotated Ordering Field

• Previous/Next: update the value of the field to the previous or next value in the range
• Reset: reset the value to the pre-defined default value
• Display: allow us to display feedback or custom messages based on the value of the field we’re manipulating

This interaction is fairly rudimentary and not very exciting to say the least. We really want to provide more desktop-like interaction via our own custom controls such as the ability to click-and-hold a button in order to scroll through available values. With such a control, in the majority of desktop applications, when the button is held the action that button denotes will be repeated after a short delay usually with increasing speed the longer it’s held. We can emulate this in JavaScript using a timeout to create the pause and a modifier to decrease the length of this pause and in turn increase the speed with which the actions are executed.

Code Snippit 1 contains a brief outline of how to create a mechanism for firing events when a button is held.

<script type="text/javascript">
    var timeout          = 1000;
    var timeout_limit    = 200;
    var timeout_speedup  = 1.5;
    var default          = 0;
    var lower_bounds     = -100;
    var upper_bounds     = 100;

    function setView( str, element ) {
        // Update the ordering element setting the values and
        // icons as necessary
      ...
    }

    function updateVariable() {
        // Update variable
        order        = document.getElementById( "ordering" );
        order_disp   = document.getElementById( "order_disp" );

        // Update variable
        order.value  = order.value + 1;

        // Check Bounds
        if( order.value >= upper_bounds )
            setView( "upper_bounds", order_disp );
        elseif( order.value == default )
            setView( "Default", order_disp );
        else
            setView( "" + order.value, order_disp );

        // Start firing click-and-hold events
        if( timeout > timeout_limit )
            timeout = max( timeout / timeout_speedup, timeout_limit );
        t = setTimeout( updateVariable, timeout );
    }

    function buttonStop( t ) {
        timeout = 1000;
        clearTimeout( t );
    }
</script>

timeout is the time between calling button events, the timeout_speedup modifier is used to recalculate the timeout on each event in order to increase the speed with which the event is fired. We set a lower limit, timeout_limit, to ensure that the events aren’t called too quickly to update the display and to give the user time to react once they near their desired value. A plot of time between ticks against ticks is shown in Graph 1, as you can see it quickly ramps up so timeout is set to the lower limit, much like you would expect from a desktop application’s click-and-hold button interaction.

Graph 1: Timeout vs. Ticks

Code Snippit 2 shows sample HTML used to create the next button with the appropriate onmousedown, onmouseup and onmouseout JavaScript calls to add the desired functionality to the button.

<img
    title="Next" src="images/icons/arrow_right.png" alt="&rarr;"
    
    onmousedown="updateVariable();"
    
    onmouseup="buttonStop( t );"
    
    onmouseout="buttonStop( t );"
/>

We use both onmouseup and onmouseout to ensure that the click-and-hold behavior ceases when the user either releases the mouse button or moves the cursor off the control.

Figure 6: Textentry into ordering field

Feedback

Here’s where our custom controls can really begin to shine, we can give the user direct feedback in the control that they’re manipulating in real-time. Sure we can do this with JavaScript as it stands, but extending beyond the “red border = wrong” methodology we can give visual cues to the user to show that they’re trying to do something thata’s wrong and what specifically is wrong with what they’re doing.

Showing the bounds of the field is easy using the visual cues we’ve detailed in Figures 2 & 4. Other visual cues we can use are that of text/background colouring to show that an error occurred. We can also, using the same timeout methods used for the click-and-hold interaction, display useful messages to the user for a brief time before correcting their mistakes telling them what they did wrong and why their entries have been changed, Figure 7.

Figure 7: Error detection and correction

It’s only an example!

Figure 8: Other possible controls?

What’s the point? There’s so much we can do nowadays in terms of interaction, even on the web. Try to add a little bit of interactive zest to your HTML controls, it makes everyone’s experience that little bit easier and better.

Thanks for reading,
- Chris

After hours of painful searching this evening I managed to decided upon using the Plainscape theme. I may well configure it slightly for this blog, I may even go as far as to add a header image, but let’s not get too adventurous!

So for the foreseeable future this blog will look nice, plain and simple (it’ll probably change when I get bored but it gives me something to blog about!).
- Chris

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        if (all[e].className == className) {
            elements[elements.length] = all[e];
        }
    }
    return elements;
}

This function basically checks the string that is entered into the class attribute for each HTML element and returns all elements where there is an exact match.

This method will fail however if we're trying to select elements that have multiple class associations. We need to use something more complex when, for example, creating a list of items that are filterable by class when arranged in overlapping groups. Splitting the class attribute on space characters will allow us to check for matches in these cases:

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        var classes = all[e].className.split(/\s/g);
        for( var c = 0; c < classes.length; c++ ) {
            if( classes[c] == className ) {
                elements[elements.length] = all[e];
            }
        }
    }
    return elements;
}

The function above does pretty much the same as the first one, however splits the class attribute string on the spaces and loops through them, trying to match the parts individually. This should match on elements with singular and multiple class names associated with them and solve any problems with multiple classed elements.
- Chris

Workspace Switcher

The Red Hat Workspace Switcher is one of the Linux tools I use all the time. I have two screens at work, however it still isn’t enough room to keep all my documents open, read mail and so forth. For this reason I use the workspace switcher with 4 workspaces, one for my work, another for email, one for FileMaker (the system we use for breifs and work management) and another spare. One of the most useful key combos, not a particularly hard one to find – but perhaps the one I use the most heavily, is Ctrl + Alt + [Arrow Key] which allows me to move back and forward between each of these workspaces.

Another handy tip for using the workspace switcher is that you may move an window from one workspace to another simply by dragging it on the workspace switcher – simple as that.

Command Line Applet

Command Line is a GNOME Applet that sits on a panel at the top of my screen, from here you can quickly launch applications or kill processes as necessary – pretty much anything you would do in a terminal that doesn’t require feedback.

It’s not exactly groundbreaking but it’s handy if you need to quickly launch gedit, gftp or the likes to do something quickly.

Scrollbars

Scrollbars, a really common UI element, yet there were a few things I was surprised to find when using them in Suse. Clicking one of the up or down arrows at either end of the scrollbar will tab the handle up or down as you would expect. Right clicking on the up or down arrow on the other hand will scroll you to the top and bottom of the scrollable area respectively.

View Desktop

I’m a messy git, I open windows and don’t close them, layer them up and not bother to sort them in any way shape or form. Given that, the view desktop shortcut is always useful to minimise all the active windows on the workspace you are in: Ctrl + Alt + D

Tips?

Ok, so they’re not great tips, they’re handy for saving a bit of time here and there. I do, however, use these all day at work and so the time saved adds up. Gimme a shout if there’s any other decent tips that you know of.
- Chris

This morning when I arrived at work and sat at my desk I did what I usually do. I took my glasses off and gave them a clean on my shirt. Usually I just put them back on and get to the nitty-gritty, usually sitting sifting through emails to find out if any of the spam is actually useful.

Today, however was a different story indeed, as soon as I placed the glasses on my face I felt a ping and then everything went blurry. I thought that the screw holding the lens into my frames had pinged out again, yes it’s happened before, but alas no! No, the actual frame had broken right at the point where the rim meets the legs, leaving a jagged edge and a confounded Chris.

Anyway, after squinting for a while and ruling out superglue as a means to repair my glasses I eventually had to plump for Jack Duckworthing them using some tape. After which it was a quick call to the opticians to set up an appointment to get tested and some new glasses. To my amazement I managed to get an appointment today, earlier this very afternoon. An hour later and £155 down I’d managed to order two new pairs of glasses which should hopefully arrive sometime next week.

I’m continue to Duckworth until then though!
- Chris

A few google searches away and I’d found the answer to all my problems. If you have the Apple development tools installed (and are obviously on a Mac), you can simply change the file meta-data of the movies via the terminal in order to allow you to import them. It’s very simple to do:
SetFile -t "MooV" movie.avi

Via: AVI to iTunes on MacRumors Forums

I did, however, have to change the iTunes settings so that it didn’t take it’s own copy of the files when importing them. I have a separate Movies folder for a reason thank-you-very-much iTunes.
- Chris

The first Mac I ever owned, a PowerBook G4 which has served me very well over the past 5 or 6 years, is pretty much blitzed. My PowerBook and I visited Matt in Edinburgh on Saturday to see if we could revive it to it’s previous glory. We managed to pull all the stuff I needed from the hard disk, but that was all the good fortune we had.

It turns out the hard disk was suffering from a S.M.A.R.T. failure and locked up Matt’s computer when mounted as a target drive. We eventually managed to format the drive via Matt’s old PowerBook and everything looked good, but alas it was not to be – we received kernel panics when trying to install Mac OS X on the drive.

So it looks as if I’ll have to fork out for a replacement hard disk, which isn’t too big a deal at about £50 for 100Gb which would suit me. Until I manage to get one and install it my PowerBook is out of service.

/me salutes PowerBook, when my copy of the Necronomicon arrives I will bring you back!
- Chris

Try it out:

• Chicken breast
• Pasta
• Tin of chopped tomatoes
• 2 cloves of garlic
• 1 onion
• ½ punnet of mushrooms
• ½ courgette
• Olive oil
• Oregano
• Basil

I started by slicing the courgette and onion and crushing the garlic. Then mixed half the garlic and some oil together, put the chicken breast, mushrooms, courgette and onion into an oven dish and poured the oil and garlic over, added a bit of dried oregano and basil and put in the oven for about half an hour.

Then put the tin of tomatoes into a pot, added the rest of the garlic, a bit more olive oil and a load of dried oregano and basil. When simmering I added the contents of the oven dish and simmered for 20 more minutes. I hope you’ll figure out what I did with the pasta on your own!

It was damn fine (see picture) and I’d highly recommend it.
- Chris

The specs are as follows:

• Processors: Two 2.8GHz Quad-Core Intel Xeon
• RAM: 2GB 800MHz DDR2 RAM
• Graphics: NVIDIA GeForce 8800 GT 512MB GDDR3
• HDD: 500GB 7200-rpm Serial ATA 3Gb/s
• Optical: Two 16x SuperDrives
• Connectivity: AirPort Extreme Card (Wi-Fi) & Bluetooth
• Peripherals: Apple Wireless Mighty Mouse & Apple Wireless Keyboard

It should arrive later in the week, I can’t wait to get my hands on it!
- Chris

They’ll be in the final of the Scottish Cup on the 24th May playing either St Johnstone, Rangers or Partick Thistle.

Isn’t there something quite ironic about this?

Just a note to say, if you are ever in need of a virtual machine with very configurable settings or the need to install certain software on it, Bytemark is a good choice – just a little more than I currently need (and more pricey as well).

- Chris

… because they fucking rule!