Recently I was trying to get an installation updated as well as some of the plugins. What should have been a straightforward task, turned out to be several hours of messing around with permissions and trying to figure out why even 777 isn’t enough for the updates to NOT fail and what user should own what.

Well it turns out that it’s only partly the fault of WordPress as it is an issue with the FTP server. Still some better messaging would be helpful…

There were mentions about a patch and fixes in potentially in the 3.2 WP version related to the error I was getting:

Could not copy file.: /public_html/wp-admin/css/theme-editor.dev.css

However only after stumbling across this page I found an easy and quick solution.

Turns out it was enough to just switch from Pure-FTPD to Pro-FTPD.

While developing cross-subdomain authentication we suddenly realised that it didn’t work on Opera. After a bit of research it turns out that it’s not the setting of the cookie path (“.local.bnt”) that is the problem, but the way Opera checks which part of the domain name is the top level domain:

“Here at Opera we went for the rule-of-thumb method: When Opera is checking a cookie whose target domain matches certain criteriea (e.g. it is not a .com domain), we do a DNS name lookup for the target domain, to see if there is an IP address for that domain. If there is an IP address for the domain (e.g. example.no) we assume that the domain is a normal company domain, not a co.uk like domain, and therefore safe. If there is no IP address we assume that the domain is co.uk-like and therefore unsafe, and only allows the cookie to be set for the server that sent the cookie.”

So that’s the problem right there and with an easy fix once you know the above… However the whole article is worth a read as it does shed some light on the multiple problems related to top level domains and cookies.

If you want to keep your random local domain name make sure your hosts file contains not only your sub domains, but the main one as well even if it is not used directly.

127.0.0.1    www.local.bnt
127.0.0.1    local.bnt

With several people working on the same page while we were recreating some JS functionality from scratch I’ve noticed one of my buttons suddenly stopped working. Scratched my head a bit, and for a minute thought that maybe it’s not having a “return false;” in my jQuery live() event handler.

Turned out though that it was actually one of the other developers actually putting a “return false;” in their event handler that just happened to target the same element…

Ideally we needed to propagate the event through a variable number of events but prevent the default behaviour of a link kicking in. preventDefault() to the rescue!

$('#tag').live('click', function(event){
    (...)
    event.preventDefault();
});

Now, before blindly applying this piece of code I’d encourage everyone to first read up on why “return false;” is evil.

And for a quick reference here’s a table featured on a related StackOverflow question:

All you need is your own Db adapter and Queue class.

For the adapter you only need to overwrite the send() function. The highlighted code below is the only change to the original class (2 lines affected…). You could actually apply this without extending Zend_Queue, but this way will be easier if you ever need to update your Zend library.

<?php

class TS_Queue_Adapter_Db extends Zend_Queue_Adapter_Db {

    /**
     * Send a message to the queue
     *
     * @param  string     $message Message to send to the active queue
     * @param  Zend_Queue $queue
     * @param  Timestamp $timeout
     * @return Zend_Queue_Message
     * @throws Zend_Queue_Exception - database error
     */
    public function send($message, Zend_Queue $queue = null, $timeout = null){
        if ($this->_messageRow === null) {
            $this->_messageRow = $this->_messageTable->createRow();
        }

        if ($queue === null) {
            $queue = $this->_queue;
        }

        if (is_scalar($message)) {
            $message = (string) $message;
        }
        if (is_string($message)) {
            $message = trim($message);
        }

        if (!$this->isExists($queue->getName())) {
            require_once 'Zend/Queue/Exception.php';
            throw new Zend_Queue_Exception('Queue does not exist:' . $queue->getName());
        }

        $msg = clone $this->_messageRow;
        $msg->queue_id = $this->getQueueId($queue->getName());
        $msg->created = time();
        $msg->body = $message;
        $msg->md5 = md5($message);
        $msg->timeout = $timeout;

        try {
            $msg->save();
        } catch (Exception $e) {
            require_once 'Zend/Queue/Exception.php';
            throw new Zend_Queue_Exception($e->getMessage(), $e->getCode(), $e);
        }

        $options = array(
            'queue' => $queue,
            'data' => $msg->toArray(),
        );

        $classname = $queue->getMessageClass();
        if (!class_exists($classname)) {
            require_once 'Zend/Loader.php';
            Zend_Loader::loadClass($classname);
        }
        return new $classname($options);
    }
}

Your Queue class only needs to extend the send() function again to allow you to pass the timeout through. obviously you can use this class to add other functionality too.

<?php

class TS_Queue extends Zend_Queue {

	/**
	 * Send a message to the queue
	 *
	 * @param  mixed $message message
	 * @return Zend_Queue_Message
	 * @throws Zend_Queue_Exception
	 */
	public function send($message, $timeout = null){
		return $this->getAdapter()->send($message, null, $timeout);
	}
}

Unfortunately all this got me was this very unhelpful error:

Zend_Application_Bootstrap_Exception with message Resource
matching "entityManager" not found

It turns out that although the case of the resource name in the application.ini dosn’t really matter the class name does not like mixed case. So had to settle with TS_Resource_Entitymanager as the plugin name.

For a long while my Windows 7 install inside VMWare 7 would get stuck at “expanding files 0%”. I kept thinking it was my machine and setup that was causing issue, after all a x64 tablet pc is not your most common config. Just in case anyone is curious I’ve got a Thinkpad x201t.

After trying both 32bit and 64bit Windows 7 version, upgrading my RAM from 4GB to 8GB and trying out changing the virtual disk location from ntfs to ext3 and back I was quickly running out of options.

Unfortunately VMWare support is extremely picky about your os versions and didn’t even try to suggest anything unless I downgraded to OpenSuse 11.2 – which was not an option due to certain driver compatibility.

Fortunately I decided to give it one more go and instead of using my external dvd drive for the Windows 7 installation I saved the DVD as iso and run the installation that way. And there you go, that was the solution!

My suspicion was the fact that my DVD drive is usb powered, however while looking for a solution I saw similar questions being asked for other linux hosts and no mention of external DVD drives, so it might be a more generic issue.

Working code example

$username = "expectedUsername";
$password = "expectedPassword";

if (!isset($_SERVER['PHP_AUTH_USER']) || $_SERVER['PHP_AUTH_USER'] != $username || $_SERVER['PHP_AUTH_PW'] != $password) {
  header('WWW-Authenticate: Basic realm=""');
  header('HTTP/1.0 401 Unauthorized');
  echo '>h2>Authorization failed.>/h2>';
  exit;
} else if($_SERVER['PHP_AUTH_USER'] != $username & $_SERVER['PHP_AUTH_PW'] != $password){
  echo '>h2>Authorization failed.>/h2>';
  exit;
}

Most common reason for failure

Firstly if you are using an older book or website as reference you will see $PHP_AUTH_USER mentioned instead of $_SERVER['PHP_AUTH_USER']. If you are using the former then this could be the reason for not seeing your variables populated.

The reason that can take you by surprise

If your code is correct (compare against the example) and you are using the $_SERVER variable format and still getting NULL inside both $_SERVER['PHP_AUTH_USER'] and $_SERVER['PHP_AUTH_PW'] it’s time to check your server settings.

HTTP authentication does not work with the cgi version of PHP, so if your hosting allows you will need to switch to PHP as Apache module or look for an alternative solution.

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

UPDATE [18/02/2011]:

The theme is not ready yet, but I finally got round to start implementing it. For anyone interested in the work in progress: Mantis – MyTheme