boogdesign posts

I talked about CSS3 in the last post in this semi-regular series on the web standards of the future, but there are some new features supported in the latest Chrome release and Firefox alpha which make this worth a second post. This time I'm going to focus on background sizing, CSS gradients and RGBA colours.

To start with, scaling background images with the background-size rule. I started off with the example code from the MDC article on -moz-background-size and tried to make a background image that covers the entire page:

body {
    background-image: url('bg-image-1.jpg');
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;             /* Opera 9.5 */
    -webkit-background-size: 100% 100%;        /* Safari 3.0 */
    -khtml-background-size: 100% 100%;         /* Konqueror 3.5.4 */
    -moz-border-image: url('bg-image-1.jpg') 0;/* Gecko 1.9.1 (Firefox 3.5) */
}

This results in a page which looks like this:

As you can see above, there is a way to support scaled backgrounds in Firefox 3.5 by using -moz-border-image. A while back I'd read a comment which indicated that border image ought to be able to achieve this sort of thing but, when I tried to understand the spec, I couldn't figure it out. The example above shows it's a lot less complex than I thought back then, unfortunately it doesn't work that well for this particular use case as the border-image inherits from body to html. This is not as weird as it might seem, there's specific discussion in the CSS spec of the inheritance relationship between the two - read the third and fourth paragraphs of this section. Unfortunately, you end up with a repeated background, even if you explicitly set the background and border images to none. The workaround for this, if you want to support Firefox 3.5, is to make sure there's no margins, padding or border on body in which case the repeated background will be covered up. The alternative, which I will follow for most of the rest of my examples, is not to worry about supporting Firefox 3.5.

A second problem is that the background image only covers the area taken up by the body, if your browser window is longer than the body then the image repeats down the page. For certain images this may be what you want, in this case I wanted it to cover the whole background. This is easy to fix by adding background-attachment: fixed; to the CSS to arrive at my second example. This is what it looks like in Firefox with that change:

In Chromium, the scaled background image generally seems to be better quality - there is an image-rendering property but it didn't seem to make much difference.

It also works in Opera 10, but only on Windows, and it doesn't scale to the full page height, and looks only marginally better than browsers with no background scaling:

The other problem with background-attachment: fixed; is, if your page is longer than a single screen, it noticeably impacts performance as you scroll up and down the page and the browser is forced to re-render everything.

So, having successfully scaled a background image across the entire page my thoughts turned to the page content, now almost unreadable. Since this is the sort of arty design which is all about the background image we don't want to cover it up completely, but we do want to provide enough contrast to read by, so some sort of semi-transparent background is in order. There are all sorts of ways to do this already, and several of them can be made to work across browser (and so would be the ones to use in any 'real' website, of course). But rather than have an alpha transparent PNG as a background, or use CSS transparency on the back one of a pair of nested elements, let's use RGBA colours to set a semi-transparent background colour:

h1, p {
    background-color: rgba(255,255,255,0.5);
}

This specifies values for red, green and blue respectively as numbers between 0 and 255 and then a number between 0 and 1 for the transparency. So bright red would be rgba(255,0,0,1). This does make the text a bit more readable while leaving the background visible:

But perhaps, in the interests of exploration, we should relax this pesky 'readable' requirement and see what other effects can be achieved with CSS 3. One interesting possibility is the new gradient property introduced by WebKit and now also supported in the next version of Firefox. This allows you to produce some pretty crazy effects without any images at all:

The bottom paragraph is the one I started with and it's fairly straightforward, here's the code for it:

p {
    background-color: transparent;
    background-image: -moz-linear-gradient(top left, bottom left, from(rgba(255,255,255,0.9)), to(rgba(255,255,255,0)));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.9)), to(rgba(255,255,255,0)));
}

Unfortunately there are two different syntaxes. In Firefox/Gecko the gradient type is part of the rule name - -moz-linear-gradient - whereas in WebKit the type is the first parameter (the alternative to linear is radial). There's no W3C spec at the moment, so it's possible neither option will be the same as the standard. I also found that Chromium didn't work too well with top left though I don't think the order should make any difference. In both cases, what is specified is a linear gradient, from top left to bottom left starting at white with 90% opacity, ending at white with 0% opacity (ie. transparent). Note that, because I was inheriting a background-color of 50% opacity white on the p elements, I had to override that in this rule to make the bottom of the gradient fully transparent. This could cause some problems in practical scenarios, as you may want there to be a background colour where there is no gradient support and the gradient otherwise. An approach which works in Firefox is to use a background property instead of background-image, Firefox 3.5 then displays the default inherited RGBA background and ignores the whole rule with the gradient:

background: -moz-linear-gradient(top left, bottom left, from(rgba(255,255,255,0.9)), to(rgba(255,255,255,0))) transparent;

Of course, you could achieve the gradient effect with a tiled PNG background image, with background-size you could even make it stretch to fill behind arbitrary content, so why would you bother? There are two reasons:

1. There is no need to download an additional file from the server, so pages should load (slightly) faster
2. The gradient is recalculated when the browser is zoomed, so it will always be smooth, no image resizing artefacts

So, now we're into the spirit of things, let's try something a little more complex. The next gradient I added a colour as well as a transparency and also tried to make at an angle by going from top left to bottom right:

p {
    background-image: -moz-linear-gradient(top left, bottom right, from(green), to(rgba(0,255,0,0)));
    background-image: -webkit-gradient(linear, left top, right bottom, from(green), to(rgba(0,255,0,0)));
}

As far as I could tell, this made no difference - the gradient still went straight across the image:

Since the browsers seem to be ignoring it anyway, I removed the top and bottom. In Firefox this made no difference, however in Chromium it stopped the gradient showing at all. So although you have to specify both directions in Chromium, it always ignores at least one of them. If two match then they will be ignored, if they're all different then it's not clear which way round your gradient will be - try it and see.

With CSS gradients you're not limited to heading smoothly from a single starting colour to a single ending colour, you can also visit any colour you want in between with a color-stop:

p {
    background-image: -moz-linear-gradient(left, right, from(rgba(255,0,0,0.8)), to(rgba(128,0,255,0.8)), color-stop(16%, rgba(255,165,0,0.7)), color-stop(32%, rgba(255,255,0,0.6)), color-stop(48%, rgba(0,128,0,0.5)), color-stop(60%, rgba(0,0,255,0.6)), color-stop(76%, rgba(75,0,130,0.7)));
    background-image: -webkit-gradient(linear, left top, right top, from(red), to(violet), color-stop(16%, rgba(255,165,0,0.7)), color-stop(32%, rgba(255,255,0,0.6)), color-stop(48%, rgba(0,128,0,0.5)), color-stop(60%, rgba(0,0,255,0.6)), color-stop(76%, rgba(75,0,130,0.7)));
}

This final example, which I adapted from the MDC page, paints a rainbow in the background. You can have an unlimited number of colour stops in your gradients, simply specify a percentage and a colour. If you specify 25% and blue then you gradient will pass through blue a quarter of the way along.

This post has been in gestation for over two months and I find myself well over my thousand word target for a post and only halfway through all the stuff I wanted to cover, so there will be at least one further post on CSS3. Having covered the basics of scaled backgrounds and gradients in this post, I'm aiming for some practical ways to use these features in web pages of the future.

There was a post on WebDesign-L today asking about angled text, which reminded me of the excellent Text Rotation with CSS a few months back on snook.ca. Jonathan focussed on the IE only BasicImage filter to provide an alternative to the (also proprietary but future standard) -webkit-transform and -moz-transform properties to rotate text. That's fine as far as it goes, but BasicImage can only rotate in increments of 90°. Jonathan mentions the alternative, the Matrix filter, but says "the coordinates still don't make any sense to me."

Now, WebKit and Gecko also support matrix transformations, so I'm thinking if I can only work out what the co-ordinates mean we might have the basis of a more general purpose solution. So I looked at the Wikipedia examples of linear transformation matrices and then the Mathamazement introduction linked to from the MDC page. If you can hear a loud whooshing sound right now, that's the echo of a load of math stuff flying completely over my head...

However, all was not lost - if we go back to the MSDN Matrix transform article you'll see there's some example code. With something to hack around I thought I had a much better chance of figuring out how things worked. I started off with the fourth sample, it uses Javascript to animate the Matrix transform, rotating and expanding a div element.

I modified the code a bit, but I'll take you through the key points before I show you what I finished up with. First of all, the Matrix transform needs to be defined on the element in question before you can script it:

<DIV ID="oDiv" STYLE="position:absolute;
filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"
		onfilterchange="fnSpin(this)" >

The animation is powered by fnSpin which calls two subsidiary functions, fnResize to resize the image and fnSetRotation to rotate it. Here's the original code for the rotation:

//oObj input requires that a matrix filter be applied. 
//deg input defines the requested angle of rotation.
var deg2radians = Math.PI * 2 / 360;
function fnSetRotation(oObj, deg)
{    rad = deg * deg2radians ;
    costheta = Math.cos(rad);
    sintheta = Math.sin(rad);

    oObj.filters.item(0).M11 = costheta;
    oObj.filters.item(0).M12 = -sintheta;
    oObj.filters.item(0).M21 = sintheta;
    oObj.filters.item(0).M22 = costheta;

}

So here's it all nicely laid out with all the hard math stuff already done for us. The basic math stuff is it's converting the degrees into radians, then using sine and cosine functions to calculate the four matrix values. So now I'm thinking I can reverse engineer this function to work out what the matrix values will be for any angle. I started off with modifying the fnSetRotation so that the matrix values were visible on the page - adding four text inputs and these lines:

    document.getElementById("fM11").value = oObj.filters.item(0).M11;
    document.getElementById("fM12").value = oObj.filters.item(0).M12;
    document.getElementById("fM21").value = oObj.filters.item(0).M21;
    document.getElementById("fM22").value = oObj.filters.item(0).M22;

Then I added a button which rotates the element to 45° when clicked (warning, IE only):

The next step was to make the page work cross browser, accept a value for the input number of degrees and, for bonus credits, generate the relevant CSS for copy and pasting. First of all I cleaned up the output a bit with toFixed method as, when the values got close to zero, they end up in exponent format rather than just rounding to 0. This gave me numbers I could plug straight into a CSS template, for example here's the declaration to rotate an element by 45°:

filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);

So now I thought it would be a fairly straightforward task of plugging these values into the Mozilla format:

-moz-transform:  matrix(a, b, c, d, tx, ty)

The tx and ty are for translation, so I just set them to zero, then plugged M11, M12, M21 and M22 into a, b, c and d respectively. Unfortunately, it didn't work! The element was reflected in respect to IE in Firefox for certain rotations.

Someone who actually understands what's going on with the matrices could probably explain what's happening (probably I have the co-ordinate system the wrong way up?) but I fell back on trial and error and eventually decided that swapping b and c worked. See my final matrix calculator here - input an angle in degrees, click the button and see the CSS code for achieving it in IE, Gecko and WebKit.

Some things I noticed but didn't have time to investigate fully:

• IE seems to rotate around the center, Firefox and Chrome seem to rotate from top left. There's a -moz-transform-origin and equivalent WebKit property to control things in those browsers, not sure what equivalents IE offers.
• Other CSS declarations are applied after the transform in IE, while they seem to be applied before the transform in Firefox and Chrome (ie. if you add 200px padding to the top of an element, Firefox will rotate around a point 200px above the 'start' of the element, IE will apply 200px padding after the transform).
• Using the rotate syntax in Gecko and WebKit is a lot simpler, but if you want to rotate stuff in IE too using a similar format in all three might be more simple in the long run? Especially if you want to script it.

In my post on CSS3 a few months back I mentioned some issues I had getting -moz-border-radius to clip content that it contained. After my writing the post the question came up a couple of times on stackoverflow, first from Brandon Wang and later a similar one from dougoftheabaci. Here is a simple example of the problem, the CSS is uncomplicated:

.target {
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

With that class applied direct to an img element it looks great in Safari and Chrome:

But it doesn't work so well in Firefox:

Today I came across the Applying SVG effects to HTML content article on the MDC wiki, one of the things it discusses is using SVG as a clipping mask for HTML elements. It occurred to me that it ought to be relatively straightforward to use a clipping mask to create the rounded corner effect directly on an img element in Firefox.

So I started off with the example code from the article, removed the circle, made the rectangle full size and used the rx and ry attributes to round the corners:

<svg:svg height="0">
    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
        <svg:rect x="0" y="0" rx="0.05" ry="0.05" width="1" height="1"/>
    </svg:clipPath>
</svg:svg>

Then use a CSS class to apply it to my image:

.target { clip-path: url(#c1); }

It didn't work at first, but then I realised I'd created my document with a .html extension rather than .xhtml - to allow mixing of SVG into XHTML the document must have content type application/xhtml+xml. Once I fixed this the effect was exactly as I'd hoped:

Here is the full code. Of course, embedding it all this way isn't going to work for any browser other than Firefox 3.5, and serving application/xhtml+xml is going to break Internet Explorer, so it's not really a practical solution in it's current state. It's more useful to break the content into separate files, then the SVG can be served as image/svg+xml while your HTML is text/html. This final example works across browsers and will round the corners of the image in Chrome, Safari and Firefox.

Last week I re-designed the home page of my personal website as the previous version was quite plain looking, mostly because I'd never gotten around to updating it. I had a visual theme for most of the sub-pages, a strong graphic as a background 'column' on the left and side, with the graphic differing by section. My idea was to reuse these graphics on the front page, except randomly select two of them each time the page loaded.

Since they were background images, I couldn't add a dynamic element in the page itself to contain them. I could perhaps have defined several new CSS classes to apply to the body element and then inserted a class name with PHP, but with six images, picking two, that means 30 class names which seemed inelegant, plus would be a bit of a pain if I later added an new section. So instead of making the page itself dynamic, I decided to make the CSS dynamic instead.

From a coding point of view the implementation is very straightforward. You rename your CSS file to be .php and make sure you return the correct content type in the header by adding this as your first line:

<?php header("Content-type: text/css"); ?>

I then just declared an array with all my images in and use a built in PHP function to give me two random images:

$bg_images = array('vertical_essays.jpg','vertical_default.jpg','vertical_books.jpg','vertical_football.jpg','vertical_writing.jpg','vertical_blog.jpg');
$bg_keys = array_rand($bg_images, 2);

Then in the CSS itself I just select the appropriate image:

html {
	background-image: url('/image/<?= $bg_images[$bg_keys[0]] ?>');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom left;
}
body {
	background-image: url('/image/<?= $bg_images[$bg_keys[1]] ?>');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom right;
}

After getting this working I then decided it would be fun to have my main navigation boxes have a background colour related to the images which are shown. The DeGraeve.com Color Palette Generator lets you generate a palette of colours from any image, so I put each of my background images into it and got a set of 'vibrant' and 'dull' colours for each image. I stuck this into another array, using the image names as keys and simply alternating vibrant and dull colours into an array value:

$colours = array(
    'vertical_essays.jpg' => array('#440','#553','#670','#332','#9b7','#eee'), 
    'vertical_default.jpg' => array('#560','#452','#02d','#36a','#8a7','#995'), 
    'vertical_books.jpg' => array('#720','#532','#d10','#a64','#d90','#a85'),
    'vertical_football.jpg' => array('#581','#564','#8a3','#785','#9c5','#eee'),
    'vertical_writing.jpg' => array('#644','#c73','#f20','#e82','#f30','#ded'),
    'vertical_blog.jpg' => array('#732','#644','#c30','#965','#c96','#cbb')
);

I could then set the background and border colours of the navigation boxes using the two random keys I'd already generated. To keep it simple I just had the left two boxes take colours from the left image, and the right box take colours from the right image:

#nav li.cv {
	background-color: <?= $colours[$bg_images[$bg_keys[0]]][0] ?>
	border-color: <?= $colours[$bg_images[$bg_keys[0]]][1] ?>
}
#nav li.writing {
	background-color: <?= $colours[$bg_images[$bg_keys[0]]][2] ?>
	border-color: <?= $colours[$bg_images[$bg_keys[0]]][3] ?>
}
#nav li.gameplan {
	background-color: <?= $colours[$bg_images[$bg_keys[1]]][4] ?>
	border-color: <?= $colours[$bg_images[$bg_keys[1]]][5] ?>
}

Here is the end result:

As you can see, generating your CSS with PHP is just as easy as generating HTML with PHP. Even with my fairly simple minded implementation of the idea you can achieve some nice tricks. However, there are some drawbacks I ran into:

• Because you're now editing a PHP file, you might have some trouble persuading your auto-completing CSS editor to recognise what's going on
• You're now going to have to handle caching yourself, as your CSS is no longer a static file - not much of an issue for a small site like mine, but could be an unnecessary overhead on a large site
• Once you've added background colours to the mix you have to consider your text and link foreground colours, I just settled for a light grey with light blue links which worked OK (but not great) on all the colours - could be a bit of a maintenance problem in the future (and a readability problem now)

Fortunately, there are possible ways round all these issues, especially if you were considering this technique for a serious site rather than a one page vanity domain You could always use your PHP to generate the appropriate set of colours for you from a given base colour - this saves you having to work out text, non-visited and visited link colours for each background colour. For bonus points, you could probably add the code which extract the base colour from the image in the first place to end up with a completely flexible solution. The first two issues both have the same solution - use an actual CSS file as a template, thus preserving the editor features, but use a server-side pre-processor to deliver the file to the web. This allows you, among other thing, to extend CSS with variables as well as taking care of all the cache issues for you.

Some time ago I wrote a post about my initial experiments with HTML 5. At the time I envisaged a series of posts as I explored new and future web technologies, so far it's been a series of length one But after Standards Next last weekend I've been inspired to do another post, this time I'm going to look at some of the neat things coming soon, to a browser near you, in CSS3.

Unlike it's predecessors, CSS3 is not a single, monolithic spec, but a collection of modules all of which are at different levels of completeness. For instance the selectors module became a candidate recommendation in November 2001 and is already widely supported. In this post I'm going to be experimenting with the Backgrounds and Borders module and the Transitions module, mostly because the recent Firefox 3.5 release includes improved (but still experimental) support for some of the more interesting bits of it.

I tested everything in Firefox 3.5 and Safari 4, and Chrome 3, though Chrome rendered identically to Safari as far as I could tell. The Gecko and WebKit engines have experimental support for CSS properties like border-radius implemented as vendor specific properties. Each browser engine has it's own prefix - for Gecko it's moz- and for WebKit it's webkit-, making the current Firefox implementation moz-border-radius and the Safari one webkit-border-radius. This does mean you have to specify everything twice, which is a bit of a pain, but it also avoids possible conflicts if the implementation changes as the spec gets finalized.

So I started with some simple markup (I've elided the lorem ipsum for brevity):

<div id="mybox">
    <h1>Big heading</h1>
    <p>Lorem ipsum ...semper eu urna.</p>
    <p>Aliquam at arcu ... luctus.</p>
</div>

My goal in this initial experiment was to get a box with nice rounded corners and the heading sitting in a bar along the top of it. This is my first attempt at the CSS:

#mybox1 {
    border: 2px solid #666;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
#mybox1 h1 {
    background-color: #666;
    margin-top: 0;
}

The main problem with this is that the background for the h1 sticks out over the top of the rounded corner:

The obvious approach for this is to put 'overflow: hidden' on the div, unfortunately this only seems to work in WebKit. So I wondered if perhaps I could put a rounded corner on the h1 so it would match:

#mybox h1 {
    background-color: #666;
    border: 2px solid #666;
    margin-top: 0;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px
}

Although it stopped the overflow, the two borders didn't really line up and left some artifacts inside the border. I experimented with different radii, different border thicknesses, putting a border on the h1 too, and even putting a background colour on the whole div and then making the paragraph backgrounds white, but couldn't completely eliminate it:

The one thing that did work OK on Firefox was to make the top border really thick and then make the border itself the background for the h1, using a negative margin to push it into the border:

#mybox {
    border-top: 40px solid #666;
    border-bottom: 40px solid #666;
    border-left: 2px solid #666;
    border-right: 2px solid #666;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
#mybox h1 {
    background-color: #666;
    margin-top: -30px;
}

Having got it looking OK in Firefox, however, I notice that WebKit looks very strange:

When two borders coming into the rounded corner are different widths, Firefox rounds the corner of the 'thick' bit, whereas WebKit only rounds the corner on the thick line to the halfway point. The effect is especially pronounced when you make one of the borders zero thickness:

Here is my full set of border radius examples. Having spent enough time mucking around with the above fragment I decided to see how border-radius interacted with tables.

<table>
    <tr>
        <td>Hello borders</td>
        <td>Hello borders</td>
        <td>Hello borders</td>
    </tr>
    <tr>
        <td>Hello borders</td>
        <td>Hello borders</td>
        <td>Hello borders</td>
    </tr>
    <tr>
        <td>Hello borders</td>
        <td>Hello borders</td>
        <td>Hello borders</td>
    </tr>
</table>

First I simply applied a border to the whole thing, as well as a drop shadow (just to keep things interesting). Here's the code:

#table {
    margin-top: 1em;
    background-color: #ccc;
    border: 2px solid #666;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 3px 3px 5px black, 3px 3px 5px black;
    -webkit-box-shadow: 3px 3px 5px black, 3px 3px 5px black;
}
#table td {
    padding: 0.5em;
}

And here is the result:

I did a quick test with a background colour on the table cells and noted that, similar to the

h1

and containing div elements, the td background sticks out past the rounded corner on the table. However, once you start applying the rounded corners to the td elements themselves, the effects get a bit more interesting:

Then I started adding a drop shadow to the cell elements too:

Here's the CSS for that last example:

table {
    margin-top: 1em;
    background-color: #ccc;
    border-collapse: separate;
    border-spacing: 10px;
    border: 2px solid #666;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 3px 3px 5px black, 3px 3px 5px black;
    -webkit-box-shadow: 3px 3px 5px black, 3px 3px 5px black;
}
table td {
    padding: 0.5em;
    border: 2px solid #666;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 3px 3px 5px black, 3px 3px 5px black;
    -webkit-box-shadow: 3px 3px 5px black, 3px 3px 5px black;
}

Now you've seen some examples, a brief aside about the box-shadow CSS property. Here's the spec, as before Gecko and Webkit have their current implementations available through vendor specific extensions. To specify a shadow you give a vertical offset, a horizontal offset, (optionally) a blur radius - these should be familiar terms if you've ever used Photoshop - and a colour. More than one drop shadow can be specified, there are two in the code above (because it looks nice that way ). You can also use the inset keyword to make the drop shadow appear inside the element instead of outside it (doesn't yet work in WebKit). In the spirit of just trying stuff out to see what happens, I tried putting an infix drop shadow on the :hover pseudo class of the td element. This creates a button pressing effect, though for realism I decided that the contents of the cells would also need to move as the drop shadow appeared, I also went ahead and turned my sample table into a keypad:

<table>
    <tr>
        <td><span>1</span></td>
        <td><span>2</span></td>
        <td><span>3</span></td>
    </tr>
    <tr>
        <td><span>4</span></td>
        <td><span>5</span></td>
        <td><span>6</span></td>
    </tr>
    <tr>
        <td><span>7</span></td>
        <td><span>8</span></td>
        <td><span>9</span></td>
    </tr>
    <tr>
        <td></td>
        <td><span>0</span></td>
        <td></td>
    </tr>
</table>

This is the CSS I ended up with:

table {
    margin-top: 1em;
    background-color: #ccc;
    border-collapse: separate;
    border-spacing: 10px;
    border: 2px solid #666;
    empty-cells:hide;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 3px 3px 5px black, 3px 3px 5px black;
    -webkit-box-shadow: 3px 3px 5px black, 3px 3px 5px black;
}
table td {
    padding: 0.5em;
    border: 2px solid #666;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
table td:hover {
    -moz-box-shadow: inset 3px 3px 5px black, inset 3px 3px 5px black;
    -webkit-box-shadow: 3px 3px 5px black, 3px 3px 5px black;
}
table td:hover span {
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -moz-transform: translate(3px, 3px);
    -webkit-transform: translate(3px, 3px);
}

This worked quite well (I'm hovering over the number 5 in this screenshot):

You'll notice I've started adding transform rules in the above CSS, and that's what I want to talk about next, but first a few notes about the table examples. First off, I'm not advocating the use of tables to lay out phone keypad type interfaces, that's just where I ended up while exploring - it could equally well have been a more semantically appropriate element. Second, I noticed a weird effect in Safari when the table cells just contained one number - the rounded corners didn't get applied:

Though Chromium on Ubuntu rounded these corners OK, so I'm assuming this is an issue fixed in a later build of WebKit. Here is my full set of table and drop shadow examples.

So, finishing off with the fun stuff - CSS Transformations! The spec is quite a hard read, I found it much easier just to try out a few examples and see what happens. The basic rule is -moz-transform or -webkit-transform, and then you have a choice of operators which can be applied, individually and in combination. You've already seen translate above - which moves the element by the specified number of pixels in the x and y axes, the other fun one is rotate:

#mybox {
    border: 2px solid #666;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

The above, when applied to the HTML I was using at the start of the article, rotates the box 45 degrees clockwise. As before you can use these rules in the :hover pseudo class to do the sort of effects that would previously have been accomplished with Javascript. WebKit is especially cool for this as it lets you specify a duration for the transition:

#mybox {
    border-top: 40px solid #666;
    border-bottom: 40px solid #666;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-transition-duration: 1s;
}
#mybox:hover {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -webkit-transition-duration: 1s;
}

The above CSS rotates the box 90 degrees anticlockwise when you mouseover, and takes one second to animate the transition from the 'normal' state to the rotated version. It's harder to describe than it is to see, so you may as well take a look at my transformation examples. One thing that's worth noting - Firefox seems to change the z-index of the element when you hover over it, whereas Safari doesn't. If you rotate an element in Firefox it will cover up everything it rotates over, in Safari everything will just mix together - I recommend testing how your elements interact when they move over each other. Also, if you're going to move larger elements around with these rules in response to user activities like mousing over an element then there's a good chance that your transition will mean the mouse pointer is no longer over the element, which could certainly be confusing as the element flip flops.

As I've mentioned in my recent posts, this blog hasn't received a lot of love in the last two years or so. I'm slowly getting back on track but, following my upgrade to b2evo 2.x in February, I've been missing some of the features I used to have.

About two and half years ago I implemented social network sharing buttons on my skin. I didn't have the time to figure out how to make them work in my 2.x skin, but today I discovered BAE Social Bookmarks. The developer's website is sadly defunct but the plugin has been made available by someone who'd downloaded it before the site disappeared. I had a bit of trouble figuring out how it worked but I eventually worked it out from the code. Basically you insert a template for the link and insert $permanent_url$ and $title$ in an appropriate place:

<a href="http://del.icio.us/post" onclick="window.open('http://del.icio.us/post?v=4&noui&jump=close&url='+encodeURIComponent('$permanent_url$')+'&title='+encodeURIComponent('$title$'),'delicious', 'toolbar=no,width=700,height=400'); return false;" title="del.icio.us"><img src="/images/delicious.gif" border="0" height="16" width="16"></a>

<script type="text/javascript">document.write('  <a href="http://reddit.com/submit?url='+encodeURIComponent('$permanent_url$')+'&title='+encodeURIComponent('$title$')+'" target="blank" title="Reddit"><img src="/images/reddit.png" width="16" height="16" border="0" /></a>');</script>

After this success I turned my attention to my technorati tags. There are a couple of different versions of this, Technorati Plugin and Rich Tags Plugin, though I couldn't find a download for the former and the latter seemed to be for 1.9 and earlier versions. Also the 0.3 version Rich Tags plugin was missing the 'Technorati' button on the edit post screen which the 0.2 version had. Looking at the code, the AdminDisplayEditorButton function was still defined in /inc/plugins/_plugin.class.php so it seemed like all I had to do was simply copy that bit across:

function AdminDisplayEditorButton( & $params )
	{
		?><script language="JavaScript" type="text/javascript">
function WriteTag(){
		document.getElementById('itemform_post_content').value += "<!--tags MyTag My+Tag -->";
}
</script><input type="button" id="b2eRchTgs_button" value="Rich Tags" onclick="WriteTag()" /><?php
		return true;
	}

Tried it, and it worked

Intoxicated by this early success I decided to see what else I could do, so I read the documentation and also had another look at the BAE Social Bookmarks plugin. I thought it would be good to have options other than technorati for tagging - I use delicious a lot and there are some other good candidates. First thing I wanted was some configuration options, looking at the BAE code this didn't seem too difficult, but I didn't need a textarea like it uses and the one thing that did seem hard to find was documentation. The source code again comes to the rescue, there is some quite extensive documentation starting from line 361 in /inc/plugins/_plugin.class.php, so I figured out I wanted a checkbox which takes a value of 0 or 1:

   function GetDefaultSettings( & $params )
    {
      $r = array(
         'technorati_tags' => array(
               'label' => 'Enable Technorati Tags',
               'type' => 'checkbox',
               'defaultvalue' => 1,
                'note' => 'Inserts links to technorati tag pages, you should also add a CSS rule for either .tags (generic) or technorati_tags (specific)',
                ),
          'delicious_tags' => array(
               'label' => 'Enable Delicious Tags',
               'type' => 'checkbox',
               'defaultvalue' => 0,
                'note' => 'Inserts links to delicious tag pages, you should also add a CSS rule for either .tags (generic) or delicious_tags (specific)',
                ),
        );
      return $r;
    }

Easy enough, I also copied this function from the BAE plugin, because I assume it's just a bit of boilerplate:

    function PluginSettingsUpdateAction()
    {
      global $DB;
      $DB->query('DELETE FROM T_items__prerendering WHERE 1');
      $this->msg( sprintf( T_('Removed %d cached entries.'), $DB->rows_affected ), 'success' );
    }

Finally I modified the RenderItemAsHtml method to detect the settings and render the appropriate tags (nothing fancy here):

    if ($this->Settings->get( 'technorati_tags' ) == 1) {
            $AddedAtLeastOneTag |= $this->addTags( $content, $Matches[ 1 ], '<div class="tags technorati_tags"><strong>Technorati tags for this post :</strong> ', '</div>', 'http://technorati.com/tag/', ' rel="tag"' );
    }

    if ($this->Settings->get( 'delicious_tags' ) == 1) {
            $AddedAtLeastOneTag |= $this->addTags( $content, $Matches[ 1 ], '<div class="tags delicious_tags"><strong>Delicious tags for this post :</strong> ', '</div>', 'http://delicious.com/tag/', ' rel="tag"' );
    }

It all seems to work, so I added flickr and twitter just for the heck of it and then some extra CSS rules for my template to make them look distinctive. Download Rich Tags Plugin v0.4.

Following on from Wednesday's post, this post covers the last six months of 2008 and the early part of 2009. This should finally get me up to date and back to the point where I can post about things I did last week without a guilty conscience Even in summary form this is taking me a lot of time (that OpenTech event had a lot of stuff!), so I'm just going to publish it half finished and fill in the later events over the next few days.

Summer 2008

• London Geek Nights: Ajax - I managed to write this one up
• SearchMonkey Developer Event - obviously in a purple patch of productivity, I got this event written up too, I also wrote a tutorial for developerWorks a few months later.
• Open Tech 2008 - Session 1
  • Rembrandt, Pr0n and Robot Monkeys (Kim Plowright) - An interesting talk on the relationship of man and machine, how we think into our tools, and the refreshing view that porn is one of the ways we reunite with our bodies.
  • Living with Chaos (Simon Wardley) - I was to see variations of Simon's talk several times over the coming months, and if you get a chance I recommend you go see him too as he's a very entertaining speaker. The message of the talk is that open standards are a necessary end result of the technology curve as we travel through the Innovation -> Bespoke -> Products -> Services continuum. By the time everyone is selling services you're at a commercial disadvantage if you're still on a bespoke solution or selling a locked in product.
  • What the Frog's Eye Tells the Future (Matt Webb) - A talk about the connections between the founding fathers of neuroscience, computers and cybernetics, eg. The Macy Conferences, Pitts and McCullogh, Norbert Wiener, Vannevar Bush, Ted Nelson and Douglas Engelbart. Cybernetics is a cross domain concept language, and the people in cybernetics are the 'dark matter' which link everything together.
  Session 2
  • Sponsor Presentation: TiddlyWiki Tales (Jeremy Ruston) - TiddlyWiki is a javascript driven, single page wiki - no need for a server, everything is saved directly into the file, so it can be used offline from your desktop.
  • Android and the Open Handset Alliance (Michael Jennings) -
  • Social networks and FOAF (Tom Morris) -
  Session 3
  • OpenID and Decentralised Social Networks
  • Distributed, Federated, Partial
  • The Web is Agreement
  Session 4
  • From Stealth Mode to Open Source in 90 days
  • No Comply: or Why the Paranoid Android Approach to Security is a Bad Idea
  Session 5
  • Publishing with Microformats
  • Power of Information: Rewiring the London Gazette with RDFa
  Session 6
  • Finding Good TV on the Interwebs with RDF and REST
  • The Bastard Child of Baird and Berners Lee
  Session 7
  • Intro to Hadoop
  • Guardian.co.uk: building for the open web
  This was a really good day, I would recommend going along to the 2009 event if you can fit it in (unfortunately I have a prior commitment )
• Momolondon July - Enabling location in applications - A set of lighting talks: Interesting stuff from Ted Morgan of Skyhook (the iPhone geolocation provider) about using wireless network signatures to determine where you are; a talk on FireEagle; Charles Wiles explained how Gears for Mobile is R & D for HTML5; there was a talk on the W3C Geolocation API; Rummble and BuddyPing, location aware, mobile based social network apps; finally Mark White on Locatrix who are a platform/service provider for people looking to provide location based mobile services.
• CloudCamp - this has now turned into a regular event, so the original links are long gone. Saw Simon Wardley again, with a similar talk to OpenTech but with cloud, and standards therein, substituted for open source.

Autumn 2008

• Google Developer Day 2008 - I attended four sessions as well as the starting and concluding keynotes: Intro to Android, after seeing a real, live Android phone in the keynote this was a nice talk to get a closer look - the questions went on longer than the talk though ; A Deeper Look at Google App Engine, I was getting quite into the whole cloud computing concept at this point and I likle the way App Engine allows you to just write code and then get started without the bother of setting up VMs etc.; Codelab: Gears, although I went to this I couldn't get very far as my hurried Ubuntu install the day before had left me with a 64bit build - I had built a version of Gears but it didn't contain APIs compatible with what everyone was using so I skipped out of this half way through; this allowed me to got to V8 - the Chrome engine which described some of the techniques used in the recently announced V8 (it was a very popular talk!) including native code compilation and behind the scenes static classes. I wore my Ubuntu 'Linux for human beings' t-shirt which got featured on the closing video/photo montage (the message on the back, rather than me).
• Scripting Enabled - This was an excellent event, I think videos of all the presentations along with text transcripts and slides are available at the website so I won't go on about it too much. Highlights for me were seeing videos of real users with screen readers and Jonathan Hassell on Dyslexia which both made accessibility issues real to me in a way they hadn't been before.
• Mobile Location-Based Services
• YUI 3.0
• CloudCamp
• London Perl Workshop 2008 - Since I'd enjoyed his introductory tutorial at the 2007 event, I went to Dave Cross's Introduction to Web Programming tutorial: some interesting stuff on how CGI actually works which I'd never really investigated before, how to work with HTTP in Perl, some hints on security (check all input variables - good advice in any language, and use taint mode, which is Perl specific solution for that) and he finished off with a short introduction on how to use template toolkit to make life easier. After the tutorial I went to a number of short talks: Regexp mini tutorial: Character Classes; Painless OO <-> XML with XML :: Pastor; and‎ ‎Intermediate Moose where things started to get a little beyond me and my rudimentary knowledge of Perl.‎

In the admin pages of this blog (when I first started writing this post, five months ago!) I have a 'list view' for posts which has a few pertinent details alongside the post title - notably date and visibility (published or draft). In pages thirteen to four (twenty per page), covering July 2003 up until June 2007 all the posts are at status 'published.' On page three, starting about August 2007, there were a couple of posts at 'draft', on page four there were six, on page one, even with the couple of posts I finally published in January, there were seven. There's a definite trend developing here

There are a few factors at work here: a major one is that last year I switched from never going to the gym to going five or six times a week meaning that not only did I go to events less often but I had less free time to write them up; getting paid to write articles also decreased my motivation to write 'for free' - plus after spending a week or so where my entire evening (up until the early hours in the morning several times) had been spent writing I did feel like I owed myself some time off.

This led to me starting a number of 'place holder' posts and, once I had a few posts sitting in draft status it was very easy to leave the next one in draft too and say to myself "I'll finish them all off at the same time." What this led to is a whole mountain of unpublished, half-finished posts which eventually put me off even starting new ones.

I read some advice on another blog about not writing things out straight away - hold off seven days and see if it's still worth writing about. For me this just led to not writing anything at all (this may have been the effect he was after). If I'm going to write posts and keep writing them, I've got to do it that day, right there and then, and get it published. It turns out that getting paid to write stuff actually puts me off writing for free on my blog (other than a short burst of activity as the first thing was published just to make it look a bit more up to date).

So, in an effort to clear the decks, I'm going to attempt to summarize 18 months of event attendance in just a few long posts, then delete all those draft posts and make a fresh start. I did manage to spit out some blog posts in this period and I'll link to those where appropriate. The final part of this exercise will involve me finally publishing the few 'technical/tutorial' type posts I have in draft status which I'll then link to from a short post.

Autumn 2007 / Winter 2008

• Going Beyond REST - This was a fascinating talk. Applying the principals of REST architecture on the inside of a system rather than between systems - all functions are represented by URIs, which it turns out has some nice side effects. For instance if one process within the system calculates 2+2 then the result is cached and any other process gets to use the result 'for free' (I know this is hardly significant for 2+2, but imagine a collection of more complex calculations). This means recursive stuff can be automatically optimised - the results of each iteration are cached and so the minimum number of operations are performed. As I was listening to this talk, Greg Egan's Permutation City kept popping in to my head.
• Know IT and Share IT - This was an evening about how to go about facilitating enterprise knowledge sharing: "What knowledge do you have and where is it? Employee minds: 85%, Other media: 15%." Three talks on the themes of social network analysis, knowledge networks, communities of practice and tools to support it. A quote I noted down from the final talk which resonated with my experiences: "Any solution which requires significant change in behaviour will be difficult to implement. Any solution which requires significant consistent behaviour will not be possible."
• Erlang for five nines - Since I've found a video I won't go on about it, but a good introduction.
• London Perl Workshop 2007 - Attended the 'Beginners Perl Tutorial' Dave Cross which was quite enlightening - certainly an explanation of the default variable made a whole load of code suddenly more comprehensible to me (slides).
• Javascript as a disruptive language - I went to this mostly because I enjoyed Ajax in Action so much. Again, you can see the video yourself so I won't go on about it.
• Momolondon February - Mobile Operating Systems - four talks on the current state of mobile operating systems. Mark Burk's talk was interesting as it showed the strong divisions between the US phone market and the rest of the world, also notable the lack of penetration the iPhone had on the world market despite all the hoo ha. David Wood of Symbian takes the in retrospect prize for his strong defence of the closed source development model for mobile OS development (though misrepresenting several aspects of open source in is argument) only for Nokia to open source Symbian five months later.
• Momolondon March - Mobile London - Excellent venue at the London Transport Museum for this event focussing on mobile apps for Londoners. Some of the trials LUL had been conducting with audio travel guides and travel news while actually in underground stations looked very interesting, also the trial to add Oyster payment functions directly into your mobile phone. The "Huh!?" moment of the evening was provided by the O2 marketing person who claimed (with a straight face) that customers thought it was really important that they could always see the O2 branding on their phone display - yes I just love having 20% of my screen taken up by the operator logo...

Spring 2008

• BCSNLB - Discovery the Next generation - five talks on search, on the internet and in the enterprise. Ken Tombs talked about how there will now only be incremental improvements in search technology and the big wins in the future will be in making sense of the huge amount of data, he talked about search engines which could determine the sentiment of a document (eg. angry, happy etc.) and also Leximancer. Next up, Vicki Lemieux talked about using search technology to determine the business context of risk in documents, with potential savings of £50k per case. Aurélien Dubot then talked about best practices in enterprise search, one of his points being that, contrary to many traditional Enterprise CMSs, you need to be able to provide useful content without having an underlying taxonomy. Duncan Ash then talked about discovery in email systems, a crucial task in many modern businesses as so much knowledge is sitting in mail servers. Finally, Simon Bain discussed desktop search.
• Momolondon April - Mobile User Experience - Four talks on usability on mobile devices and the special challenges presented by designing for not only constrained devices but also such a wide variety of them, check out the presentations at the linked post.
• OnAIR London - I did manage to get my posts about this event out, though not in an entirely timely fashion, see my review of the morning sessions and the afternoon sessions
• London Web Week 2008 (link defunct) - Attended three events all of which I managed to post about: Microformats vEvent; Web Standards Group Findability Meetup; In the Brain of Peter Elst: The Evolution of the Flash Platform & ActionScript 3.0
• Building and ROI-based GIS Business Case and Strategy - This was more of business and project management focussed talk than a technical one, the methodology described could be easily adapted to other scenarios though.

I've finally gotten around to upgrading b2evolution to a v2.x series release. In my usual manner, it took the v3.0 alpha release to spur me out of my inactivity. The version I'd been using up until today was released in November 2007, so it really was about time. Now I'm on the latest stable release which I'm sure is faster and more secure

One of the reasons I held off upgrading for so long is that the skins system in v2 is incompatible with the v1 skins, and it looked like a lot of work to port my custom skin over. I figured I'd wait until the next full re-design of my site, when I'd need to do a new skin anyway, but that particular project is still well and truly on the back burner. I have got the basics of the skin implemented but several of the other modifications I previously had are now absent and I've not really figured out how the sidebar works yet - so things will be looking a little different for a few weeks.