LittleIpsum by Dustin Senos is a handy little tool for anyone doing design or programming work who’s constantly in need of some lorem ipsum to pad out visuals.

I usually use lipsum.com which has a decent background on Lorem Ipsum as well as a configurable generator.

LittleIpsum on the other hand is a nifty little Mac OS X menu bar app that allows you to quickly grab a couple of words, sentences or paragraphs of lorem ipsum.

Clicking on the menu drops out a quite straightforward interface which you roll over to select the appropriate length of text you want. Once you’ve made your selection the text is then copied to your clipboard so you can paste it wherever you’d like.

Selecting a range of lengths of Lorem Ipsum from the menu bar icon.

Handy little thing,
- Chris

Bugger that, instead I had a dig around and decided to copy across the rules from my previous installation. All the rules you’ve set up are stored in a .plist file within Mail’s data stored in your Library folder.

In Lion you’ll find the rules at:

~/Library/Mail/V2/MailData/MessageRules.plist

Under Snow Leopard:

~/Library/Mail/MessageRules.plist

So all you need to do is copy/paste the relevant file from your old machine to the new one.

Edit

It’s worth noting that you can copy Smart Mailboxes and RSS feeds across as well.

Smart Mailboxes:

Lion: ~/Library/Mail/V2/MailData/SmartMailboxes.plist
Snow Leopard: ~/Library/Mail/SmartMailboxes.plist

RSS Feeds (both OSes):

~/Library/Mail/RSS/

- Chris

Upper bounds on password length

The most common issue I see across the plethora of inept schemes for passwords is bounds on length. I’m all for having passwords with a lower bound, it’s all about security after all and shorter passwords are much less time constringent to brute-force, 5-6 characters is the most oft seen bound. With that I’m absolutely fine.

But as soon as you start requiring that my password be no more than a certain number of characters a klaxon starts wailing in my head.

The initial suspicion is that if you have an upper bound on the length of my password, you must be storing it in plaintext. If you are storing my password in plaintext then you’re either an idiot or a complete and utter fucking asshole, you can choose whichever you want.

For god’s sake, salt and hash passwords before storing them.

Forms that cut off entry

An even worse offender in this area are sign up forms in which the password fields have a given length. That means that you can type in your 20 character password without realising that you’ve been clipped at an arbitrary 12 characters.

Then when you visit the login form, which obviously wont have the 12 character limit on the password field, and type in your 20 character password it will throw back errors.

Please stop making my passwords an arbitrary length and you should definitely have a uniform stance on field lengths in your forms.

Exact password length

Enforcing an exact password length is the bigger, uglier brother of having an upper bounds on length. Not only have you set the lower and upper limit on how long a password can be, you’ve also said that they must be the same!

Holy hell, you’ve completely and utterly missed the point. Aside from the fact that you’re vastly limiting the number of permutations of passwords available to users, and of course the number of permutations a brute-force attack would be required to cycle through; you’re making the password much harder for the user to remember.

If I have a 6 character password that I use everywhere, such as I’d wager most users do, and you enforce a password length of 8 characters then you’re essentially forcing me to append two erroneous characters to the end of my password usually, I’d wager, a ’11′ or ’00′.

Enforcing the inclusion / exclusion of certain characters

“Your password must contain at least one number”, “Your password must have one or more non-alphanumeric character”, “You are required to have at least one uppercase letter”, “Your password must have–” …fuck right off.

My password should be allowed to contain any alpha, numeric or non-alphanumeric characters; it should not be required to contain them. If you’re trying to make me adhere to a given structure to my password then you’re limiting the number of permutations available to me again.

“But what about the idiots who choose easy passwords?” They’re still going to be idiots, just your special brand of idiot, making the password harder to remember just ensures that you end up with either a post-it note with the username and password posted on the side of a monitor or some super-secret-cia-level-symbol-substitution-cypher being used to swap out the characters in their god awful password.

• a = @
• e = 3
• i = !
• o = *
• u = well, still u
• s = $
• l = 1
• t = 7
• …

My new super-secret, secure password should probably be p@$$w*rd!

On a side-note, if any of your passwords resembles any of these you are a moron.

Post your password in the comments below and I’ll tell you if it’s secure or not!
- Chris

I recently grabbed myself an 11″ Macbook Air as I was in dire need of a laptop to use when away from home. The main attraction that I’d be able to work on any freelance projects when I have downtime regardless of where I am.

I use a brilliant piece of software called On The Job 3 to track time spent on jobs as well as generating and managing invoices. On The Job stores all your client and job data locally rather than in the cloud and doesn’t provide any means to sync data between multiple machines. This provides a bit of a connundrum — how do I keep an in-sync repository of my timings and invoices across the multiple machines I potentially use for my work?

The obvious choice is to use Dropbox to keep the relevant application data in sync across multiple machines. As there’s no way to specify to On The Job where to look for the data we instead need to move the data store into a shared repository in Dropbox then create a link to this data from where the original used to live.

All application data for On The Job is located at:

~/Library/Application Support/On The Job 3/

Shared Application Data in Dropbox

By default the folder which contains all the application data, ~/Library/, is initially hidden from the Finder. To get round this we can open the relevant folders via the Terminal application, running the following command will open the folder containing the application data:

open ~/Library/Application\ Support/

From here you can move the folder named “On The Job 3” to your newly created Dropbox folder, at this point you should take a backup of your On The Job application data folder just in case anything goes wrong.

We’ve essentially now reset On The Job back to its default settings as it wont be able to locate any of the data you’ve accrued through past use. In order for On The Job to function properly with the appropriate data we need to create a link in the application support folder to our data in the Dropbox folder.

On The Job 3 data shared via Dropbox

ln -s “~/Dropbox/Shared Application Data/On The Job 3/” “~/Library/Application Data/On The Job 3/”

This step must be repeated for each machine you intend to use On The Job on. If the ~/Library/Application Data/On The Job 3/ folder exists it should be removed, or perhaps renamed, before creating the symbolic link. Once the link is in place and all data files have been synced via Dropbox you should be able to open On The Job and see all of your clients, jobs and invoices just as you left them.

On The Job Working

Have fun,
- Chris

It’s a medieval time, there’s a big castle, a king, knights; the whole nine yards. I work a job in or around the castle, nothing too high profile, nothing to do with the court or the knights & standing army.

There’s a strange mix of technology in this world, there are guns and bombs as well as all the comforts of modern living.

I, for some reason, am some sort of anti-hero. On my travels and throughout my work I gain experience and new abilities. Recently I’ve gained a skill where I can double jump (a frog-skill as it appeared to me in my dream), yet I’ve not had much of a chance to try it out. I can run, leap, then when in mid-air jump again and get even higher and further.

Now, it turns out that there’s dissent in the air and one of the captains of the palace guard and his son, who is also in the military, are planning a coup and intend to usurp and kill the king!

It’s probably worthwhile to note at this point, the captain is being played by the guy who was Q in Star Trek, not that it’s really relevant to the story.

I have the pleasure of being invited to court for a celebration of some sort. I’m in no way a guest of honour but I get to meet the big jobs such as a princess and also the king. This is when the craziness starts to go down.

I’m on a balcony with the royal court and there’s a massive explosion in the courtyard below. I push some of the folks, king included, out of the way. This is misconstrued by the loyal royal guards as an attempt on the king’s life, in their opinion putting me with the separatists.

A chase ensues and I’m hounded through the castle by the guards. They chase after me until I reach the end of a, now broken, balcony – at the unreachable end is a set of stairs leading up into a mountain pass and some caves high up.

Desperate to get away I back up, take a run at the massive gap and leap, I make use of my new frog air-jump skills to jump again and make it all the way across to the stairway – the guards are obviously left behind.

I make my way up the pass as quickly as I can, it’s a long climb. I notice that I’m not alone and there’s a ghostly woman following me – there’s no way she managed to get across the gap after me! She approaches and I recoil, wary of who or what she is.

There is some conversation, nothing specific I remember, but I’m bestowed with a new skill – I am granted a sniper skill, I will be amazingly accurate with the sniper rifle which she then gives me. It’s plastic, long with a strap to stow it over your shoulder. I’m also furnished with a box of bullets to use with the gun – they’re entirely white and apparently they are the only bullets that’ll work with the gun.

Time goes past, perhaps a musical montage would be appropriate, some lyre music perhaps since it’s medieval times. I gain some more skills, nothing too interesting; I also form a relationship with the ghostly woman before she moves on telling me that I’ve been trained and am now ready.

I get some information about the usurper guards and their plan. They have a sniper of their own and intend to have him kill the king from a distance. He’s just a boy, perhaps 8 or 10 years old, but I know what I have to do: I have to kill the sniper, the head guard and his son to stop the plot against the king.

I’m also still being pursued by the loyal guards, still thinking me a potential threat to the king; ironic that I could be their only chance to save his life!

I’m making my way into town to take down those threats to the king when the guards are suddenly on my tail. I’m moving between high buildings that’re closely packed together, modern day sized yet somewhat rickety and falling to bits as you’d expect of medieval buildings.

I’m in a high floor of a building and have to jump from one window into another building to escape; the guards aren’t far behind me and can easily, if somewhat timidly, follow me from building to building. I stay ahead of them by recklessly, and if I say so myself, quite heroically, leaping back and forward between buildings, making my way towards the final standoff.

I’m eventually getting close to where I’ll be able to take these guys down. I’m walking along a rickety wooden balcony, high up on the side of a sandstone building. The rooftop of the building across from me is an appropriate place to set up. I have my rifle across my back and I’m ready to leap across.

Just at that moment the guard leading the chase appears on the balcony, he’s a friend from the days before this all started. I know he’s torn between duty and friendship. He looks into my eyes and knows I don’t intend malice but to correct the problems, I give him a curt nod and sprint to the end of the wooden balcony, it starts to come away from the building as I do. I leap towards the building, again, frog air-jumping to make the final part of the leap across. I land behind a wall on the roof, shielded from the view of the rooftop I’m going to be shooting towards.

I get behind some crates for cover and I can see across to the roof I need to target, they’re all there. The leader of the palace guard, his son and my rival the young sniper. There are other guards loyal to their cause there and they have hostages, lots of young children running around on the rooftop, scared.

I set up my rifle but they’ve spotted me. The young sniper starts rattling off shots but I’m too well covered. Other guards are firing but there’s no chance they’re going to hit me from the other roof.

I line up a shot, I’m not overly confident of my sniper skills yet. I shoot once, hit one of the guards in the shoulder – he’s not my target. The other guards start picking up children and holding them up as shields.

I release a few more rounds, actually hitting one of the kids as a guard moves him into the way of my sights. I’m getting agitated so I calm myself, take a breath. I line up the shot, squeeze the trigger and a hole erupts in the middle of the captain’s son’s forehead, he drops to the floor.

His father looks on to his son aghast at what he’s seen. He doesn’t look long, I blow a matching hole into his head, right through. I train my gun onto the young sniper, he’s lining me in his sights, but he’s too slow; a third matching hole in his head is his prize.

At this point the guards who were chasing me break through the door to the roof of the building I’m on and spill out, cutting off my escape. The lead guard, my friend, realises what I’ve done and that I’ve saved the king again. Guards at the front of the pack demand that I finish the job and gun down the remaining guards on the opposite roof but I decline. It’s their mess, they can clean it up.

One guard moves to take me into custody, my friend waves him off and turns to his side. I take a run and a jump off the roof, then another mid-air jump sees me onto the next building and I’m off into the metropolis never to return to my old life.

The end

I rattled together an AppleScript to do just that and copy the result, including the track and artist name, to your clipboard.

tell application "Spotify"
	set theTrack to name of the current track
	set theArtist to artist of the current track
	set theAlbum to album of the current track
	set track_id to id of current track
end tell

set AppleScript's text item delimiters to ":"
set track_id to third text item of track_id
set AppleScript's text item delimiters to {""}
set realurl to ("http://open.spotify.com/track/" & track_id)

set theString to theTrack & " - " & theArtist & ": " & realurl
set the clipboard to theString

“Feel Like Makin’ Love – Bad Company: http://open.spotify.com/track/3HKthdb7Ejnydb74BvmQW0”

I used a few bits of this Ceonceited Software forum post for pointers on accessing Spotify details via AppleScript.

Enjoy,
- Chris

Every person in the world is given a clay pot, in my dream there was no notion of where they come from, just that everyone always has one. Inside this pot is a clay teapot. All of them, pots and teapots, are made of terracotta; some are ornate, some decorated, others are just plain clay; regardless of how they look, they all serve the same purpose.

The teapot is used to tell if you’re a compatible match with another person, it distills the feelings you have for each other and indicates if you could fall in love and be happy together.

There’s a museum exhibit showing old pots that’ve been dug up from centuries old graves. Fossilised remains lie with a pot amongst them, the clay shattered at one side but the teapot inside perfectly intact, preserved through the ages.

Children are given smaller, empty pots. This signifies purity and a child’s ability to love without question; they’re only given a larger pot containing a teapot when they’ve come of age.

Some strange poetry to the whole thing, god knows how it was supposed to work though!
- Chris

I’ve written a small PHP function to convert a given date to one of the following formats:

• Dates before Feb 1963
  • [YEAR]
  • i.e. “1960″, “1962″
• Dates from Feb 1963 – August 2001
  • [SUFFIX/PREFIX LETTER] ([YEAR])
  • i.e. “V (1999)”, “A (1983)”
• Dates from September 2001 onwards
  • [AGE IDENTIFIER] ([YEAR])
  • i.e. “57 (2007)”, “57 (2008)”, “60 (2010)”

/* getRegistrationCode *********************************************
 * Get the age identifier from a UK vehicle registration plate from
 * a given date.  Returns the identifier as a string with the year
 * of registration in brackets.
 *
 * $registrationDate    The date of registration to be converted
 *
 * return                String representation of the registration
 *                         date
 ******************************************************************/
function getRegistrationCode( $registrationDate ) {
    $reg      = $registrationDate;

    $year     = (int) date( "Y", strtotime( $registrationDate ) );
    $month    = (int) date( "n", strtotime( $registrationDate ) );
    $date     = date( "Y-m-d", strtotime( $regestrationDate ) );

    /* < FEBRUARY 1963 *********************************************
     * If the registration year is 1962 or before then just return
     * the year
     **************************************************************/
    if( $date < "1963-02-01" ) {

        $reg    = "".$year;

    /* FEBRUARY 1963 - AUGUST 2001 *********************************
     * For registrations from 1963 to August 2001 look up the
     * appropriate registration letter
     **************************************************************/
    } elseif( $date <= "2001-08-31" ) {

        $yearLetters    = array(
            "1963-02-01"    => 'A',    // 1 Feb 1963 – 31 Dec 1963
            "1964-01-01"    => 'B',    // 1 Jan 1964 – 31 Dec 1964
            "1965-01-01"    => 'C',    // 1 Jan 1965 – 31 Dec 1965
            "1966-01-01"    => 'D',    // 1 Jan 1966 – 31 Dec 1966
            "1967-01-01"    => 'E',    // 1 Jan 1967 – 31 Jul 1967
            "1967-08-01"    => 'F',    // 1 Aug 1967 – 31 Jul 1968
            "1968-08-01"    => 'G',    // 1 Aug 1968 – 31 Jul 1969
            "1969-08-01"    => 'H',    // 1 Aug 1969 – 31 Jul 1970
            "1970-08-01"    => 'J',    // 1 Aug 1970 – 31 Jul 1971
            "1971-08-01"    => 'K',    // 1 Aug 1971 – 31 Jul 1972
            "1972-08-01"    => 'L',    // 1 Aug 1972 – 31 Jul 1973
            "1973-08-01"    => 'M',    // 1 Aug 1973 – 31 Jul 1974
            "1974-08-01"    => 'N',    // 1 Aug 1974 – 31 Jul 1975
            "1975-08-01"    => 'P',    // 1 Aug 1975 – 31 Jul 1976
            "1976-08-01"    => 'R',    // 1 Aug 1976 – 31 Jul 1977
            "1977-08-01"    => 'S',    // 1 Aug 1977 – 31 Jul 1978
            "1978-08-01"    => 'T',    // 1 Aug 1978 – 31 Jul 1979
            "1979-08-01"    => 'V',    // 1 Aug 1979 – 31 Jul 1980
            "1980-08-01"    => 'W',    // 1 Aug 1980 – 31 Jul 1981
            "1981-08-01"    => 'X',    // 1 Aug 1981 – 31 Jul 1982
            "1982-08-01"    => 'Y',    // 1 Aug 1982 – 31 Jul 1983
            "1983-08-01"    => 'A',    // 1 Aug 1983 – 31 Jul 1984
            "1984-08-01"    => 'B',    // 1 Aug 1984 – 31 Jul 1985
            "1985-08-01"    => 'C',    // 1 Aug 1985 – 31 Jul 1986
            "1986-08-01"    => 'D',    // 1 Aug 1986 – 31 Jul 1987
            "1987-08-01"    => 'E',    // 1 Aug 1987 – 31 Jul 1988
            "1988-08-01"    => 'F',    // 1 Aug 1988 – 31 Jul 1989
            "1989-08-01"    => 'G',    // 1 Aug 1989 – 31 Jul 1990
            "1990-08-01"    => 'H',    // 1 Aug 1990 – 31 Jul 1991
            "1991-08-01"    => 'J',    // 1 Aug 1991 – 31 Jul 1992
            "1992-08-01"    => 'K',    // 1 Aug 1992 – 31 Jul 1993
            "1993-08-01"    => 'L',    // 1 Aug 1993 – 31 Jul 1994
            "1994-08-01"    => 'M',    // 1 Aug 1994 – 31 Jul 1995
            "1995-08-01"    => 'N',    // 1 Aug 1995 – 31 Jul 1996
            "1996-08-01"    => 'P',    // 1 Aug 1996 – 31 Jul 1997
            "1997-08-01"    => 'R',    // 1 Aug 1997 – 31 Jul 1998
            "1998-08-01"    => 'S',    // 1 Aug 1998 – 28 Feb 1999
            "1999-03-01"    => 'T',    // 1 Mar 1999 – 31 Aug 1999
            "1999-09-01"    => 'V',    // 1 Sep 1999 – 29 Feb 2000
            "2000-03-01"    => 'W',    // 1 Mar 2000 – 31 Aug 2000
            "2000-09-01"    => 'X',    // 1 Sep 2000 – 28 Feb 2001
            "2001-03-01"    => 'Y',    // 1 Mar 2001 – 31 Aug 2001
        );

        // Loop through the letters until we hit a date that's after
        // our registration date
        foreach( $yearLetters as $key => $letter ) {
            $reg    = $letter." (".$year.")";
            if( $key > $date )
                break;
        }

    /* SEPTEMBER 2001 ONWARDS **************************************
     * For registrations since September 2001 use the current
     * 00 - 99 numbering scheme based on the year.
     **************************************************************/
    } else {

        /* CALCULATE THE REG CODE **********************************
         * New style registration years run from the start of March
         * to the end of February of the next year.
         *
         * The two digit year value represents the March - August
         * identifier (i.e. 09, 10) and 50 is added to the year for
         * the September - February identifier (i.e. 59, 60).
         *
         * To calculate the registration code we must follow the
         * steps below:
         *     - YEAR % 50
         *     - if MONTH < 3 subtract 1
         *     - Add 50 if MONTH > 8 or MONTH < 3
         *
         * Giving us:
         * ( YEAR % 50 ) + ( ( MONTH < 3 ) ? 49 : ( MONTH > 8 ) ? 50 : 0 )
         */
        $reg = ( $year % 50 ) +
        		( ( $month < 3 ) ? 49 : ( ( $month > 8 ) ? 50 : 0 ) );
        $reg = str_pad( $reg, 2, "0", STR_PAD_LEFT )." (".$year.")";

    }

    return $reg;
}

The function above should convert all dates since 1963 to codes. It should also hold true for the future as the current partern is a 50 year repeating one (lest they change it of course).
- Chris

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 == 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 ]]> http://chris-miller.org/archives/2008/10/02/get-multi-class-elements-in-javascript/feed/ 0 http://chris-miller.org/archives/2008/07/01/suse-tips/ http://chris-miller.org/archives/2008/07/01/suse-tips/#comments Tue, 01 Jul 2008 12:59:26 +0000 Chris http://chris-miller.org/?p=182 I’ve been using Suse at work now for over a year. Once in a while I’ll find a shortcut or a handy little thing that I’ll find useful. This blog post outlines a few of the handy shortcuts and tips that I’ve picked up and never readily knew.

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