[-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.

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.

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.

You Think It’s Easy…

For starters rather than use “raw” Zend_Db_Select:

$select = $db->select();

I wanted to derive the select from my Zend_Db_Table_Abstract, like so:

class Model_Db_Website extends Zend_Db_Table_Abstract {
	(...)
	public function fetchWebsites(){
		$select = $this->select();
		$select->join(array('whi' => 'website_has_images), 'whi.website_id = websites.website_id')
		return $this->fetchAll($select);
	}
}

This was more or less the example I found in the documentation. You might be wondering what is wrong with this picture. At first it seems like there is nothing missing. The table fields and the table name (for the FROM clause) are taken from the table class, and we have provided all the necessary JOIN details… However instead of the expected result, you an error message!

Message: Select query cannot join with another table 

The Solution

Not to prolong any more here is the final bit, which we will walk-through below.

class Model_Db_Website extends Zend_Db_Table_Abstract {
	(...)
	public function fetchWebsites(){
		$select = $this->select();
		$select->setIntegrityCheck(false)
			->from($this->_name, '*')
			->join(
				array('whi' => 'website_has_images'),
				'whi.website_id = websites.website_id', '*'
    			);
		return $this->fetchAll($select);
	}
}

The first thing you need to do is get rid of the error. This one has been mentioned online quite a lot and is easy to fix by applying:

->setIntegrityCheck(false)

The code above makes your result set read only, but allows you to do joins.

Now for the less obvious bits. Once the above problem is fixed you will notice that your results only include the join table fields. To fix this add the final parameter to the list – either a ‘*’ or an explicit list of fields.

Many sites suggest using an empty array, though this causes the result set to return only main table fields…

The ‘*’ is not enough though. You still need the from declaration ->from($this->_name, ‘*’), as without you will still be getting just the join table fields.

So there you go, it took me quite a bit of fiddling and randomly changing the parameter set to arrive at the final solution. Hope it saves you the hassle too!

At work we use MS Entourage for our email and calendaring. I thought it might be handy to be able to see at a glance what meetings I had scheduled without needing to switch away from my inbox. As a result I turned my hand to a little AppleScript to pull a list of forthcoming meetings from Entourage,

set currentDate to current date
if application "Microsoft Entourage" is running then
    tell application "Microsoft Entourage"
        set selectedEvents to every event where its start time is greater than currentDate
        set eventString to ""
        repeat with currentEvent in selectedEvents
            set eventTitle to subject of currentEvent
            set eventDate to start time of currentEvent
            set eventString to eventString & eventTitle & " - " & eventDate & "\n"
        end repeat
        if eventString is not equal to "" then
            set eventString to "Upcoming...\n" & eventString
        else
            set eventString to "Nothing upcoming...\n"
        end if
        eventString
    end tell
end if

Save this somewhere as meetings.scpt, then the GeekTool PrefPane add a new entry and in the command tab select the shell option and enter osascript path/to/meetings.scpt in the command field.

Done

This is basically what you need to do if you get the following error when trying to ctrl clicka function:

“The resource is not on the build path of a PHP project”

To convert to a PHPEclipse compatible project you basically need to replace the buildSpec and natures sections of the .project file with the following:

<buildSpec>
	<buildCommand>
		<name>net.sourceforge.phpeclipse.parserbuilder</name>
		<arguments>
		</arguments>
	</buildCommand>
</buildSpec>
<natures>
	<nature>net.sourceforge.phpeclipse.phpnature</nature>
</natures>

If you need to convert the other way, or to something else, simply grab the appropriate section from a working project and paste it into the .project file you need to fix.

To save you some searching and a masive panic attack here is the easy way to do it:

iconv("UTF-8", "ISO-8859-1", "£");

You could also use the same command to do the whole text rather than just the pound sign itself. Example below:

You can use the iconv function at any point, however probably the easiest solution is to put it inside functions of the class you use to extend FPDF:

class myPdf extends FPDF {
    [...]
    public function showMoney($money){
        $this->cell(10,10,iconv("UTF-8", "ISO-8859-1", "£"). $money,0);
    }
}