[-vendor-prefix-]transform: rotate([angle]deg);

so to use this to rotate an element by 15 degrees in Webkit (e.g. Safari, Chrome), Mozilla and Opera you’d use

-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg); 

We include the rule without a vendor prefix so that once browsers start to implement this without requiring the use of it our CSS will be ready.

Sadly the syntax for Internet Explorer is a little more cumbersome. It uses the DXImageTransform.Microsoft.Matrix filter which is a little cryptic, but fortunately quite well documented on MSDN. We also need 2 variations of this filter, one for IE < 8 and another for IE ≥ 8.

To use the filter the first thing we need to do is convert our angle into radians (angle in radians = angle in degrees * π / 180) then we work with the sine and cosine of this angle:

DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=[cos(angle)],M12=[-sin(angle)],M21=[sin(angle)],M22=[cos(angle)]);

So if we take our rotate by 15 degrees example from above we’d end up with the following to cover all IE versions:

filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.965925826289068,M12=-0.258819045102521,M21=0.258819045102521,M22=0.965925826289068);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.965925826289068,M12=-0.258819045102521,M21=0.258819045102521,M22=0.965925826289068)";

Obviously we don’t really want to have to whip out a calculator and type 6 lines of CSS every time we want to rotate an element. To save myself a little time I created a TextMate bundle that simplifies the process a bit. This bundle allows me to type the standard syntax.

transform:rotate(-10deg)

Then hit a keyboard shortcut to have TextMate fill in the rest.

To add this bundle go to Bundles > Bundle Editor > Show Bundle Editor

Select CSS from the list on the left and side of the editor and select Add new command from the buttons at the bottom. Paste the following into the Command(s) field

#!/usr/bin/env ruby
line = $stdin.read
if line =~ /(\s*)transform\s*:\s*rotate\s*\(\s*(-?[0-9]+)\s*deg\s*\)/i
	rad = $2.to_i * Math::PI / 180
	cos = Math.cos(rad)
	sin = Math.sin(rad)

	print $`
	print $1 + "-moz-transform:rotate(" + $2 + "deg);\n"
	print $1 + "-o-transform:rotate(" + $2 + "deg);\n"
	print $1 + "-webkit-transform:rotate(" + $2 + "deg);\n"
	print $1 + "transform:rotate(" + $2 + "deg);\n"
	print $1 + "filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=" + 	cos.to_s + ",M12=" + (sin * -1).to_s + ",M21=" + sin.to_s + ",M22=" + cos.to_s + ");\n"
	print $1 + "-ms-filter:\"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=" + cos.to_s + ",M12=" + (sin * -1).to_s + ",M21=" + sin.to_s + ",M22=" + cos.to_s + ")\";\n"
	print $'
else
	print line
end

Then select Save: Nothing, Input: Selected text or Line and Output: Replace Selected Text. Now you need to setup how you’ll trigger this. Select Activation: Key Equivalent and then enter the keyboard shortcut you’d like - I’m using Shift + Cmd + R

Finally close the bundle editor and select Bundle > Bundle Editor > Reload Bundles and you should be good to go.

Of course there are many other CSS3 properties that up until now have been implemented using vendor prefixes in some browsers. We can simplify creating these with some more TextMate snippets. I’ll include a couple of examples here, firstly box-shadow. Webkit and Mozilla support this using a vendor prefix, Opera and Internet Explorer 9 use the standard property. The syntax is:

[-vendor-prefix-]box-shadow: [x offset] [y offset] [blur radius] [color];

So to create a drak grey shadow just offset slightly below an element we might use something like this:

-moz-box-shadow: 0 2px 5px #333;
-webkit-box-shadow: 0 2px 5px #333;
box-shadow: 0 2px 5px #333;

For the TextMate snippet we’ll use tab triggers and placeholders - this let you type a keyword and hit the tab key to insert the text of the snippet with placeholder values inserted with the first placeholder selected so you can fill in a value, tabbing again moves onto the next placeholder and so on. Open up the bundle editor from Bundles > Bundle Editor > Show Bundle Editor and select to add a new snippet under the CSS section. Paste the following into the snippet window:

-moz-box-shadow: ${1:x offset} ${2:y offset} ${3:blur radius} ${4:color};
-webkit-box-shadow: ${1:x offset} ${2:y offset} ${3:blur radius} ${4:color};
box-shadow: ${1:x offset} ${2:y offset} ${3:blur radius} ${4:color};

Select Activation: Tab Trigger and type in the word box as the trigger. Name this snippet box-shadow and exit the bundle editor. Relaod bundles to give it a try. In a CSS file now type box and hit the tab key. The following should be inserted:

-moz-box-shadow: x offset y offset spread color;
-webkit-box-shadow: x offset y offset spread color;
box-shadow: x offset y offset spread color;

with the x offset text highlighted. Starting to type will overwrite all the x offset placeholders, hitting tab again will move onto the y offset. Easy. You could add another snippet that provided box shadows using the inset modifier.

[-vendor-prefix-]box-shadow: inset [x offset] [y offset] [blur radius] [color];

border-radius might also be a good candidate for a time-saving snippet. Probably the most common use of this is where we want to specify equally rounded corners on all round our box. We could use the same style of tab triggered snippet as with the box-shadow example. The snippet would be very simple with just a single placeholder - something like this:

-moz-border-radius: ${1:1em};
-webkit-border-radius: ${1:1em};
border-radius: ${1:1em};

TextMate is a wonderful editor and snippets really do make this stuff a breeze.

Mantis Design Teaser

At my new job we use MantisBT for our bug tracking and project management. Unfortunately despite good functionality the visual side is desperately lacking some love and attention. Tired of looking at the barely styled web app I decided to spruce it up a little bit. A teaser of the new design can be seen above.

$user['Address']->delete();
$user['Address']->state(Doctrine_Record::STATE_LOCKED);
(...)
$user->save();

It seems that unless you set the state the save later on still sees an initialized (though empty!) relation.

When setting a time before 1972 - this is 1970 and 1971 the time part will not be shifted in the UK locale as DST was only introduced in 1972!

This means if you are only calculating times and need the appropriate time adjustment you will need to set a date as no date part in Zend_Date means 1st Jan 1970.

Setting up Selenium RC server together with PHPUnit has proven surprisingly easy… Well most of it. Every now and then as a beginner you might run into monster errors like the one above. No fear, what Selenium is trying to tell you is just that your path is wrong.

For me it happened when trying to setup the error screenshot variables:

protected $captureScreenshotOnFailure = TRUE;
protected $screenshotPath = '/var/www/localhost/htdocs/screenshots';
protected $screenshotUrl = 'http://localhost/screenshots';

In case you wonder the path relates to the browser’s host not the Selenium RC host (if they are different), In my case the browsers are run on a windows box, with the Selenium RC setup on a Linux machine. Thus the error about the inapropriate $screenshotPath.

I have found examples like the second one below, but no one mentions that you actually declare the default namespace too for everything to work.

$autoloader = new Zend_Application_Module_Autoloader(array(
	'namespace' => '',
	'basePath'  => APPLICATION_PATH .'/modules/default',
	'resourceTypes' => array (
		'form' => array(
		'path' => 'forms',
		'namespace' => 'Form',
    ),
	'model' => array(
		'path' => 'models',
		'namespace' => 'Model',
    	),
    )
));

$autoloader = new Zend_Application_Module_Autoloader(array(
	'namespace' => 'Admin_',
	'basePath'  => APPLICATION_PATH .'/modules/admin',
	'resourceTypes' => array (
		'form' => array(
		'path' => 'forms',
		'namespace' => 'Form',
    ),
	'model' => array(
		'path' => 'models',
		'namespace' => 'Model',
    	),
    )
));

$redirector = Zend_Controller_Action_HelperBroker::getStaticHelper('redirector');
$redirector->gotoUrl('/login/');

When you attach an event to an element in jQuery within the event handler function the this keyword always refers to the element that triggered the event.

$('a').bind('click', function() {
    alert(this);
});

Here this will be the a element that triggered the event. For the majority of the time this behaviour is absolutely ideal. However, if you’re using object oriented javascript and are trying to handle an event using a method of one of your classes, the chances are you’d want this to refer to the instance of your class instead of the DOM element.

var Klass = function() {
    this.message = 'hello';
};
Klass.prototype.handleClick = function(e) {
    alert(this.message);
};
var obj = new Klass();

$('a').bind('click', obj.handleClick);

The above fails because when Klass.prototype.handleClick is triggered from the click event this still refers to the a element that was clicked on. Hence this.message is undefined.

To solve this problem I made a small jQuery plugin called hitch that allows you to control the object scope. The above example would be rewritten as

var Klass = function() {
    this.message = 'hello';
};
Klass.prototype.handleClick = function(e) {
    alert(this.message);
};
var obj = new Klass();

$('a').hitch('click', obj.handleClick, obj);

If the handleClick method needs to access the DOM element that triggered the event, that can still be accessed through e.target. If the object scope argument is omitted then hitch should work in the same way as the standard bind method.

The plugin itself is just a few lines

(function($) {
    $.fn.hitch = function(ev, fn, scope) {
        return this.bind(ev, function() {
            return fn.apply(scope || this, Array.prototype.slice.call(arguments));
        });
    };
})(jQuery);

I believe similar functionality is scheduled to be included in an upcoming jQuery release, but for the time being I’m finding this plugin to be exceptionally useful.

Automatic relationship detection

When setting up a YAML file with your database schema you can start it with the handy declaration:

---
detect_relations: true

It does the One to Many relationship for you nicely, however the Many to Many ones did not work out of the box and required manual BaseModel tweaking. Take for example my Tag, Website, and WebsiteTag classes.

BaseTag:

abstract class BaseTag extends Doctrine_Record {

  public function setTableDefinition() {
    $this->setTableName('ts_tags');
    $this->hasColumn('name', 'string', 128, array('type' => 'string', 'length' => '128'));
    $this->hasColumn('is_category as isCategory', 'integer', 1, array('type' => 'integer', 'length' => '1'));
    $this->hasColumn('page_id', 'integer', 8, array('type' => 'integer', 'length' => 8));
    $this->hasColumn('ordering', 'integer', 5, array('type' => 'integer', 'length' => '5'));
  }

  public function setUp() {
    $this->hasOne('Page', array('local' => 'page_id',
                                              'foreign' => 'id'));

    $this->hasMany('Website as Websites', array('local' => 'tag_id',
                                                                     'foreign' => 'website_id',
                                                                     'refClass' => 'WebsiteTag'));

    $i18n0 = new Doctrine_Template_I18n(array('fields' => array(0 => 'name')));
    $this->actAs($i18n0);
  }
}

BaseWebsite:

abstract class BaseWebsite extends Doctrine_Record{
  public function setTableDefinition() {
    $this->setTableName('ts_websites');
    $this->hasColumn('page_id', 'integer', 8, array('type' => 'integer', 'length' => 8));
    $this->hasColumn('title', 'string', 128, array('type' => 'string', 'length' => '128'));
    $this->hasColumn('client', 'string', 128, array('type' => 'string', 'length' => '128'));
    $this->hasColumn('link', 'string', 255, array('type' => 'string', 'length' => '255'));
    $this->hasColumn('intro', 'string', null, array('type' => 'string'));
    $this->hasColumn('content', 'string', null, array('type' => 'string'));
    $this->hasColumn('published', 'timestamp', null, array('type' => 'timestamp'));
    $this->hasColumn('is_home as isHome', 'integer', 1, array('type' => 'integer', 'length' => '1'));
  }

  public function setUp() {
    $this->hasOne('Page', array('local' => 'page_id',
                                              'foreign' => 'id'));

    $this->hasMany('Tag as Tags', array('local' => 'website_id',
                                                          'foreign' => 'tag_id',
                                                          'refClass' => 'WebsiteTag'));

    $this->hasMany('Media', array('local' => 'website_id',
                                                 'foreign' => 'media_id',
                                                 'refClass' => 'WebsiteMedia'));

    $i18n0 = new Doctrine_Template_I18n(array('fields' => array(0 => 'intro', 1 => 'content', 2 => 'title')));
    $this->actAs($i18n0);
  }
}

BaseWebsiteTag:

abstract class BaseWebsiteTag extends Doctrine_Record {

  public function setTableDefinition() {
    $this->setTableName('ts_website_has_tags');
    $this->hasColumn('tag_id', 'integer', 8, array('type' => 'integer', 'length' => 8, 'primary' => true ));
    $this->hasColumn('website_id', 'integer', 8, array('type' => 'integer', 'length' => 8, 'primary' => true));
  }

  public function setUp() {
  }
}

The highlighted portions of code needed to be added. You can actually define these manually in the YAML file, the catch is that I was expecting it to happen magically with the auto relationship setting.

Many to Many with extra fields

Another little issue that Doctrine has is when you try to retrieve records. It in a way skips the joining table and retrieves a collection of the final items. In most cases this is exactly what you might need. However for my Media I decided to keep the ordering in the joining table - WebsiteMedia.

$q = Doctrine_Query::create()
  ->from('Website w')
  ->joinLeft('w.Media');

If you simply proceed with the above you only get Media objects without the ordering.

BaseWebsiteMedia:

abstract class BaseWebsiteMedia extends Doctrine_Record {

    public function setTableDefinition() {
        $this->setTableName('ts_website_has_media');
        $this->hasColumn('website_id', 'integer', 8, array('type' => 'integer', 'length' => 8, 'primary' => true));
        $this->hasColumn('media_id', 'integer', 8, array('type' => 'integer', 'length' => 8, 'primary' => true));
        $this->hasColumn('caption', 'string', 255, array('type' => 'string', 'length' => '255'));
        $this->hasColumn('is_main as isMain', 'integer', 1, array('type' => 'integer', 'length' => '1'));
        $this->hasColumn('ordering', 'integer', 4, array('type' => 'integer', 'length' => '4'));
    }

    public function setUp() {
        $this->hasOne('Website', array('local' => 'website_id',
                                       'foreign' => 'id'));

        $this->hasOne('Media', array('local' => 'media_id',
                                     'foreign' => 'id'));

        $i18n0 = new Doctrine_Template_I18n(array('fields' => array(0 => 'caption')));
        $this->actAs($i18n0);
    }
}

If you do not have the additional One to Many relations declared already you should add them now. With the modified model now you can get the records like so:

$q = Doctrine_Query::create()
  ->from('Website w')
  ->leftJoin('w.WebsiteMedia wm')
    ->leftJoin('wm.Media m');

This gives you a collection of WebsiteMedia records each containing the actual Media item.

Recently I needed to get the number of the week in a certain month. There is the handy WEEK() function, however it only gives you the week of the year.

Obviously before we can go through the code above, a definition of the n^th week of the month is needed (as I realized after asking the question on stackoverflow…):

For me the week starts on a Monday, and the first week of the month does not have to be a full week - if a month starts on a Friday, the Friday to Sunday days count as the first week.

With this out of the way here is a quick explanation of what goes on above.

WEEK(my_date_field,5)

First we get the actual week number of the year for the specified date. The second parameter is there to define Monday as the first day of the week (more details in Mysql manual).

DAYOFMONTH(my_date_field)

Next we get the day of the month for the specified date.

DATE_SUB(my_date_field, DAYOFMONTH(my_date_field)-1 DAY)

We can use that number with DATE_SUB to get the date for the 1^st day of the month. This in turn can be used to get the week number for the 1^st week of the month.

SELECT WEEK(my_date_field,5) -
WEEK(DATE_SUB(my_date_field, INTERVAL DAYOFMONTH(my_date_field)-1 DAY),5)+1

Finally we subtract the first day’s week from the actual week number which should give us the month’s week number starting from 0. Thus the final +1 if you want the count to start from 1.