Earwigs in my handlebars

Most mornings I get a tickle on my left hand while I'm cycling along Midsummer Common, it's not a creepy tickle but certainly noticeable. I look down and there's an Earwig scuttling along the back of my hand, so I flick it off. Monday morning there were three: two on my left hand and one on my right hand. Last week I saw one half in and half out of the little hole at the end of the handlebar so I'm guessing they live there or something...?

Talent book profile

POTENTIAL	Seeks new Challenges	Enigma	Growth Employee	Next Generation Leader
	Potential growth / role expansion	Dilemma	Core Employee	High Impact Performer
	No / Limited Growth	Under Performer	Effective	Trusted Professional
		Does not / partially meets expectations	Meets expectations	Exceeds expectations
	PERFORMANCE

The jQuery plugin that ate the world!

So I was looking at placing a Wordpress pages content flow into columns as I was using the YUI 2 to format the page… I thought about using jQuery and worked up an example using some of Karl Swedberg's work as a basis along with inspiration from Adam Wulf. But… the script worked by looking at each element… each p, each hr and each and every h2. After it counted 'em all it divided 'em by 3 placed that number in each column… which is cool except that a hr is a lot shorter than a paragraph (generally) and the layout broke.

I then started pondering getting the computed style (and don't get me started on how this is a bugger when IE is involved) of an imaginary page with the same width of the columns and then splitting that in 3 and somehow getting that chunk of elements (and perhaps splitting the odd p in the process) and putting them in the place where they're supposed to go… but that get problematic when you start to ignore hrs, you might end up getting the hr, which I was using as an underline to the h2, at the start of one column when it should be at the bottom of the other… or even better, beneath the heading at the top of the next column because the script was smart enough to know where headings - as well as horizontal rules - should properly go. Needless to say, it was getting far too complicated!

I had visions - nay, nightmares - about this plugin. I dreamt it got more and more complex, that I managed to write some weird, otherworldly, algorithm to predict where the breaks should occur, that it began to read the minds of the authors to such an extent that it'd correct the content on the fly, that it became… to all intents and purposes, the jQuery plugin that ate the world!

So I looked at something else before the weird little plan that I had in my head started to develop it's own form of consciousness and looked at the Wordpress Codex again.

I found some stuff on shortcodes (which are a simple set of functions for creating macro codes for use in post content). and so I wrote these:

<?php
function basic_leftcolumn($atts, $content = null) {
  return '<div class="yui-u first">'.$content.'</div>';
}
add_shortcode("leftcolumn", "basic_leftcolumn");

function basic_middlecolumn($atts, $content = null) {
  return '<div class="yui-u">'.$content.'</div>';
}
add_shortcode("middlecolumn", "basic_middlecolumn");

function basic_rightcolumn($atts, $content = null) {
  return '<div class="yui-u">'.$content.'</div>';
}
add_shortcode("rightcolumn", "basic_rightcolumn");
?>

Which, when placed in the functions.php file in my theme worked a treat except that extra brs were introduced... after some research I found this code from Adding Column Layout Shortcodes to Your Wordpress Theme:

<?php
function webtreats_formatter($content) {
  $new_content = '';
  /* Matches the contents and the open and closing tags */
  $pattern_full = '{(\[raw\].*?\[/raw\])}is';
  /* Matches just the contents */
  $pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
  /* Divide content into pieces */
  $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
  /* Loop over pieces */
  foreach ($pieces as $piece) {
    /* Look for presence of the shortcode */
    if (preg_match($pattern_contents, $piece, $matches)) {
      /* Append to content (no formatting) */
      $new_content .= $matches[1];
    } else {
      /* Format and append to content */
      $new_content .= wptexturize(wpautop($piece));
    }
  }
  return $new_content;
}
 
// Remove the 2 main auto-formatters
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
 
// Before displaying for viewing, apply this function
add_filter('the_content', 'webtreats_formatter', 99);
add_filter('widget_text', 'webtreats_formatter', 99);
?>

Which also got added to functions.php and everything worked a treat!

Everyone is now happy and they can use a simple mechanism to split the content between the columns and the plugin is safely locked in the back of my head… never to menace the world again!

Suppression of IE Tooltips on an imagemap area

So I was messing around with image-maps so that I could get a visualisation to work properly on Internet Explorer... Except the tooltips which the browser threw up interfered with my own tooltips!

There seems to be masses of debate about whether or not it's a good idea to show the alt text for an image as a tooltip and the way around it generally is to have an empty title attribute suppress the alt text tooltip in Internet Explorer... except that that doesn't work in the context of image-maps...

Now I was looking into this as I was using javascript to generate a tooltip so I had to add event listeners (don't get me started on how that's a pain in the arse for Internet Explorer).

So within my code for the event handlers I simply used javascript to create a name attribute for the area and then populate that attribute with the alt text before clearing the alt text for the onmouseover event. For the onmouseout event I nigh on reversed it by adding the name text to the alt attribute before removing the name attribute.

Simple ehh?

This is the code, truncated to show what I mean:

onmouseover

function doSomething(event){
  // ...loads of code here...
  if(!document.addEventListener){
    event.srcElement.setAttribute("name", event.srcElement.alt);
    event.srcElement.setAttribute("alt", "");
  }
}

onmouseout

function doSomethingElse(event){
  // ...only a little bit of code here...
  if(!document.addEventListener){
    event.srcElement.setAttribute("alt", event.srcElement.name);
    event.srcElement.removeAttribute("name");
  }
}

Tories are wrong!

After news of Jeremy Hunt's pronouncement that the workshy should stop having children if they cannot afford them one is minded of the words of Jonathan Swift when he said:

I have been assured by a very knowing American of my acquaintance in London, that a young healthy child well nursed is at a year old a most delicious, nourishing, and wholesome food, whether stewed, roasted, baked, or boiled…

Food for thought indeed ;-)

How long will it be before he's slapped down by his superiors and the children of the poor are sent to schools where they are taught valuable skills a la Children of Earth and are never to be seen again? Except, perhaps, as a tasty pie…

IE8 and SVG

So I've been working on and off on a visualisation for a few weeks now... I was really quite happy with the result too. Except that the client was demoing on IE8, which is a huge improvement on IE7 and IE6 etc but still sucks!

Everything was working fine in Opera, Firefox and Chrome but what with the client using, as I've said, IE8 I needed to think of something else.

So I looked at Raphael and other libraries but then I got to thinking how IE8 was an improvement because it could handle alpha-transparency.

Now the visualisation involved transparent layers upon a map. This got me thinking: The map could be a suitably sized div with a jpeg background-image and then layering the different images atop that div by setting their position as being absolute in regards to the absolutely positioned map div.

The original visualisation used the SVG in order to trigger some pop-ups that gave further information, but that wasn't now possible so instead I looked at something really rather old school and thought about image-maps.

Image-maps used to be really quite popular but have recently lost ground to more modern approaches, I'm not totally sorry to see them go but I did find them a little useful at times... if a bit of a bugger to sort out by hand!

This is where Mapedit comes in useful though! What with the ability to zoom and having pixel-perfect control of the points of the image-map (and the judicious use of my Wacom tablet), it makes making an image-map a joy, and only $15!

So now I'm not quite so naffed-off with having to support IE8, that is unless future versions of browsers stop supporting image-maps!

Speaking of maps, prettymaps are cool, especially this one:

Bradford Factor

I've been doing a fair bit of work on the Bradford Factor for work... it's really quite nasty. I've had to generate some figures but couldn't clock what valid numbers there were so I created this spreadsheet to look up valid figures (no prime numbers allowed... except you can up until a certain number). If it help then please use it. It's got the number of periods of time off along the left and the total number of days off along the top.

Also had to do some stuff on the Myers-Briggs Type Indicator and I wanted to know what they were, the table below has a title attribute to each cell which'll show a tool tip for each type:

ISTJ	ISFJ	INFJ	INTJ
ISTP	ISFP	INFP	INTP
ESTP	ESFP	ENFP	ENTP
ESTJ	ESFJ	ENFJ	ENTJ