Blog

<rss version="0.92">
  <channel>
    <title>Blog &#8212; CMBuckley.co.uk</title>
    <link>http://blog.cmbuckley.co.uk/</link>
    <description>Shameless self-promotion</description>
    <language>en</language>
        <item>
      <title>Word Clock v2</title>
      <description>I&#38;rsquo;ve seen a few nice-looking representations of clocks around, but when I saw &#60;a href=&#34;http://gumuz.nl/weblog/javascript-word-clock/&#34;&#62;Gumuz&#38;rsquo;s word clock&#60;/a&#62; I though I could make some improvements to it. Here&#38;rsquo;s a couple of the changes:&#60;br /&#62;
&#60;br /&#62;
&#60;ul&#62;&#60;li&#62;Rewrote using &#60;a href=&#34;http://mootools.net&#34;&#62;MooTools&#60;/a&#62; (only because I know it better, I&#38;rsquo;m currently developing in it, and it gave me a chance to play with Google&#38;rsquo;s JS API)&#60;/li&#62;
&#60;li&#62;Rewrote some of the JavaScript logic to be a bit tidier&#60;/li&#62;
&#60;li&#62;Replaced the letters with dots for an arguably prettier output&#60;/li&#62;
&#60;li&#62;Reordered the hours in the HTML so that &#38;ldquo;twelve o&#38;rsquo;clock&#38;rdquo; wouldn&#38;rsquo;t be missing the space (I had to combine &#60;em&#62;two&#60;/em&#62; and &#60;em&#62;one&#60;/em&#62; for this)&#60;/li&#62;
&#60;li&#62;Highlighted the &#60;em&#62;a&#60;/em&#62; in &#60;em&#62;half&#60;/em&#62; for quarter-past and quarter-to, as per &#60;a href=&#34;http://gumuz.nl/weblog/javascript-word-clock/#comment-18582925&#34;&#62;mattatwhoosh&#38;rsquo;s suggestion&#60;/a&#62;
&#60;/li&#62;&#60;/ul&#62;

The result is tested in IE (5.5&#38;ndash;8), Safari, Chrome and Firefox. I hit a slight issue in IE6&#38;#8722; (what a surprise) whereby it interprets &#60;code&#62;a.sec.lit&#60;/code&#62; as &#60;code&#62;a.lit&#60;/code&#62; (&#60;a href=&#34;http://www.interfacethis.com/misc/css-test/multiclass.html&#34;&#62;example&#60;/a&#62;); I got around it by making &#60;code&#62;sec&#60;/code&#62; an ID rather than a class (yes, I know it&#38;rsquo;s dirty).&#60;br /&#62;
&#60;br /&#62;
&#60;a href=&#34;http://cmbuckley.co.uk/projects/word-clock/&#34;&#62;Have a look for yourself&#60;/a&#62;.</description>
      <pubDate>Sun, 08 Nov 2009 16:27:17 GMT</pubDate>
      <link>http://blog.cmbuckley.co.uk/2009/11/08/word-clock-v2/</link>
    </item>
        <item>
      <title>Mootools Hash.setFromPath</title>
      <description>&#60;a href=&#34;http://mootools.net/docs/more&#34;&#62;MooTools More&#60;/a&#62; implements a &#60;a href=&#34;http://mootools.net/docs/more/Native/Hash.Extras#Hash:getFromPath&#34;&#62;&#60;code&#62;getFromPath&#60;/code&#62; method in &#60;code&#62;Hash.Extras&#60;/code&#62;&#60;/a&#62;, but doesn&#38;rsquo;t provide a corresponding setter. Here&#38;rsquo;s an implementation:&#60;br /&#62;
&#60;br /&#62;
&#60;pre&#62;
&#60;span class=&#34;default&#34;&#62;Hash&#60;/span&#62;.&#60;span class=&#34;default&#34;&#62;implement&#60;/span&#62;({
    setFromPath: &#60;span class=&#34;keyword&#34;&#62;function&#60;/span&#62;(path, value) {
        &#60;span class=&#34;keyword&#34;&#62;var&#60;/span&#62; source = &#60;span class=&#34;keyword&#34;&#62;this&#60;/span&#62;;
        &#60;span class=&#34;keyword&#34;&#62;var&#60;/span&#62; prop = &#60;span class=&#34;string&#34;&#62;''&#60;/span&#62;;

        path.&#60;span class=&#34;default&#34;&#62;replace&#60;/span&#62;(&#60;span class=&#34;string&#34;&#62;/[([^]]+)]&#124;.([^.[]+)&#124;[^[.]+/g&#60;/span&#62;, &#60;span class=&#34;keyword&#34;&#62;function&#60;/span&#62;(match) {
            &#60;span class=&#34;keyword&#34;&#62;if&#60;/span&#62; (!source) &#60;span class=&#34;keyword&#34;&#62;return&#60;/span&#62;;
            prop = arguments[2] &#124;&#124; arguments[1] &#124;&#124; arguments[0];

            &#60;span class=&#34;keyword&#34;&#62;if&#60;/span&#62; (!(prop &#60;span class=&#34;keyword&#34;&#62;in&#60;/span&#62; source)) source[prop] = {};
            lastSource = source;
            source = source[prop];
            &#60;span class=&#34;keyword&#34;&#62;return&#60;/span&#62; match;
        });

        lastSource[prop] = value;
        &#60;span class=&#34;keyword&#34;&#62;return this&#60;/span&#62;;
    }
});&#60;/pre&#62;
&#60;br /&#62;
&#60;ins datetime=&#34;2009-11-08T22:49:04+00:00&#34;&#62;Just to explain the &#60;code&#62;lastSource&#60;/code&#62; part, it&#38;rsquo;s a fudge to maintain object references throughout.&#60;/ins&#62;</description>
      <pubDate>Fri, 23 Oct 2009 11:11:01 BST</pubDate>
      <link>http://blog.cmbuckley.co.uk/2009/10/23/mootools-hashsetfrompath/</link>
    </item>
        <item>
      <title>MLIA</title>
      <description>Today, after reading over 3000 posts on &#60;a href=&#34;http://fmylife.com&#34;&#62;FML&#60;/a&#62; over the the past 6 months, I realised that &#60;a href=&#34;http://mylifeisaverage.com/&#34;&#62;MLIA&#60;/a&#62; is actually more enjoyable than schadenfreude. MLIG is too boring, though. MLIA</description>
      <pubDate>Wed, 16 Sep 2009 23:08:16 BST</pubDate>
      <link>http://blog.cmbuckley.co.uk/2009/09/16/mlia/</link>
    </item>
        <item>
      <title>Spacing out CamelCase in PHP</title>
      <description>Here&#38;rsquo;s a nifty function to put spaces in your CamelCased words:&#60;br /&#62;
&#60;br /&#62;
&#60;pre&#62;
&#60;span class=&#34;keyword&#34;&#62;function&#60;/span&#62; &#60;span class=&#34;default&#34;&#62;spacify&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;(&#60;/span&#62;&#60;span class=&#34;default&#34;&#62;$camel&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;,&#60;/span&#62; &#60;span class=&#34;default&#34;&#62;$glue&#60;/span&#62; &#60;span class=&#34;keyword&#34;&#62;=&#60;/span&#62; &#60;span class=&#34;string&#34;&#62;' '&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;) {&#60;/span&#62;
    &#60;span class=&#34;keyword&#34;&#62;return &#60;/span&#62;&#60;span class=&#34;default&#34;&#62;$camel&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;[&#60;/span&#62;&#60;span class=&#34;default&#34;&#62;0&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;]&#60;/span&#62; &#60;span class=&#34;keyword&#34;&#62;.&#60;/span&#62; &#60;span class=&#34;default&#34;&#62;substr&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;(&#60;/span&#62;&#60;span class=&#34;default&#34;&#62;implode&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;(&#60;/span&#62;&#60;span class=&#34;default&#34;&#62;$glue&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;, &#60;/span&#62;&#60;span class=&#34;default&#34;&#62;array_map&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;(&#60;/span&#62;&#60;span class=&#34;string&#34;&#62;'implode'&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;, &#60;/span&#62;&#60;span class=&#34;default&#34;&#62;array_chunk&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;(&#60;/span&#62;&#60;span class=&#34;default&#34;&#62;preg_split&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;(&#60;/span&#62;&#60;span class=&#34;string&#34;&#62;'/([A-Z])/'&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;,&#60;/span&#62;
        &#60;span class=&#34;default&#34;&#62;ucfirst&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;(&#60;/span&#62;&#60;span class=&#34;default&#34;&#62;$camel&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;), -&#60;/span&#62;&#60;span class=&#34;default&#34;&#62;1&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;, &#60;/span&#62;&#60;span class=&#34;default&#34;&#62;PREG_SPLIT_NO_EMPTY &#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;&#124; &#60;/span&#62;&#60;span class=&#34;default&#34;&#62;PREG_SPLIT_DELIM_CAPTURE&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;), &#60;/span&#62;&#60;span class=&#34;default&#34;&#62;2&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;))),&#60;/span&#62; &#60;span class=&#34;default&#34;&#62;1&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;);&#60;/span&#62;
&#60;span class=&#34;keyword&#34;&#62;}&#60;/span&#62;

&#60;span class=&#34;keyword&#34;&#62;echo&#60;/span&#62; &#60;span class=&#34;default&#34;&#62;spacify&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;(&#60;/span&#62;&#60;span class=&#34;string&#34;&#62;'CamelCaseWords'&#60;/span&#62;&#60;span class=&#34;keyword&#34;&#62;); &#60;/span&#62;&#60;span class=&#34;comment&#34;&#62;// 'Camel Case Words'&#60;/span&#62;&#60;/pre&#62;
&#60;br /&#62;
&#60;ins datetime=&#34;2009-05-27T12:12:17+01:00&#34;&#62;I added in the &#60;code&#62;&#60;span class=&#34;default&#34;&#62;$glue&#60;/span&#62;&#60;/code&#62; parameter to be even more nifty, but a bit of thinking made it clear that it wouldn&#38;rsquo;t work when the first letter was lower-case. Should be fine now!&#60;/ins&#62;</description>
      <pubDate>Wed, 27 May 2009 10:54:54 BST</pubDate>
      <link>http://blog.cmbuckley.co.uk/2009/05/27/spacing-out-camelcase-in-php/</link>
    </item>
        <item>
      <title>2B or not 2B</title>
      <description>&#38;hellip;that is the question. The answer? &#60;code&#62;FF&#60;/code&#62;.</description>
      <pubDate>Mon, 18 May 2009 16:17:34 BST</pubDate>
      <link>http://blog.cmbuckley.co.uk/2009/05/18/2b-or-not-2b/</link>
    </item>
        <item>
      <title>Paying the Price for Bad Grammar</title>
      <description>This is why we need Grammar Nazis:&#60;br /&#62;
&#60;blockquote&#62;&#60;p&#62;Today, I was flirting via text with a coworker. Things started getting heated, and I wanted to send her a sexy picture. I asked if she had any suggestions. She said, &#38;ldquo;Your nuts!&#38;rdquo; She meant, &#38;ldquo;YOU&#38;rsquo;RE nuts.&#38;rdquo; I sent her a photo of my junk. I offended a co-worker with incriminating evidence. FML&#60;/p&#62;&#60;p class=&#34;cite&#34;&#62;&#60;cite&#62;blizzard_of_77 on &#60;a href=&#34;http://www.fmylife.com/sex/869850&#34;&#62;FMyLife&#60;/a&#62;&#60;/cite&#62;&#60;/p&#62;&#60;/blockquote&#62;&#60;br /&#62;
Ahh, grammar&#38;hellip;</description>
      <pubDate>Fri, 10 Apr 2009 15:16:45 BST</pubDate>
      <link>http://blog.cmbuckley.co.uk/2009/04/10/paying-the-price-for-bad-grammar/</link>
    </item>
        <item>
      <title>Things I Learnt Today</title>
      <description>&#60;ol style=&#34;list-style-type: decimal;&#34;&#62;&#60;li&#62;That Ben &#38;ldquo;Yahtzee&#38;rdquo; Croshaw is &#60;a href=&#34;http://forums.somethingawful.com/showthread.php?threadid=2579800&#34;&#62;a goon&#60;/a&#62;;&#60;/li&#62;
&#60;li&#62;that his &#60;a href=&#34;http://www.youtube.com/watch?v=jYQLR7dE5k4&#34;&#62;early&#60;/a&#62; &#60;a href=&#34;http://www.youtube.com/watch?v=eWS9_nrKOPA&#34;&#62;stuff&#60;/a&#62; is, if anything, funnier than his paid stuff for &#60;a href=&#34;http://www.escapistmagazine.com/&#34;&#62;The Escapist&#60;/a&#62;;&#60;/li&#62;
&#60;li&#62;that I there will always be something on the Internet that I haven&#38;rsquo;t seen, and that someone will think I have been living under a rock to have missed it.&#60;/li&#62;
&#60;/ol&#62;</description>
      <pubDate>Mon, 30 Mar 2009 23:58:46 BST</pubDate>
      <link>http://blog.cmbuckley.co.uk/2009/03/30/things-i-learnt-today/</link>
    </item>
        <item>
      <title>Get a Grid for Transparent Images in Firefox</title>
      <description>Here&#38;rsquo;s a useful bit of &#60;a href=&#34;http://getfirefox.com/&#34;&#62;Firefox&#60;/a&#62; hackery for you all. It puts a checkerboard (or chequerboard, for you elitists) image as the background for your transparent images. It works for any image when viewed directly in Firefox, by checking for a HTML page containing a single &#60;code&#62;img&#60;/code&#62; tag. If you reproduce this structure manually, then you&#38;rsquo;ll see the checkerboard, but there&#38;rsquo;s very little chance that a legitimate HTML page would match these selectors. It works by adding some content to your &#60;code&#62;userContent.css&#60;/code&#62;:&#60;br /&#62;
&#60;br /&#62;
&#60;ol style=&#34;list-style-type: decimal;&#34;&#62;&#60;li&#62;Lifehacker has a &#60;a href=&#34;http://lifehacker.com/software/firefox/customize-firefox-with-userchromecss-197715.php&#34;&#62;guide&#60;/a&#62; to finding your &#60;code&#62;userChrome.css&#60;/code&#62; file &#38;mdash; your &#60;code&#62;userContent.css&#60;/code&#62; resides in the same folder.&#60;/li&#62;
&#60;li&#62;You may not have a &#60;code&#62;userContent.css&#60;/code&#62; file; if not, you should create it. In some instances you may have a &#60;code&#62;userContent-example.css&#60;/code&#62; file, which you can rename to get the idea of what goes in this file.&#60;/li&#62;
&#60;li&#62;Open the file and insert the following CSS:&#60;br /&#62;
&#60;br /&#62;
&#60;pre&#62;
&#60;span class=&#34;comment&#34;&#62;/*
 * Image from &#60;a href=&#34;http://commons.wikimedia.org/wiki/File:Checker-16x16.png?oldid=19631383&#34;&#62;http://commons.wikimedia.org/wiki/File:Checker-16x16.png?oldid=19631383&#60;/a&#62;
 */&#60;/span&#62;
&#60;span class=&#34;keyword&#34;&#62;html&#60;/span&#62; &#38;gt; &#60;span class=&#34;keyword&#34;&#62;body&#60;/span&#62; &#38;gt; &#60;span class=&#34;keyword&#34;&#62;img&#60;/span&#62;:&#60;span class=&#34;tag&#34;&#62;only-child&#60;/span&#62; {
	&#60;span class=&#34;attr&#34;&#62;background:&#60;/span&#62; &#60;span class=&#34;default&#34;&#62;url&#60;/span&#62;(&#60;span class=&#34;string&#34;&#62;'http://starsquare.co.uk/images/checkerboard'&#60;/span&#62;) &#60;span class=&#34;default&#34;&#62;repeat&#60;/span&#62;;
}

&#60;span class=&#34;keyword&#34;&#62;html&#60;/span&#62; &#38;gt; &#60;span class=&#34;keyword&#34;&#62;body&#60;/span&#62; &#38;gt; &#60;span class=&#34;keyword&#34;&#62;img&#60;/span&#62;:&#60;span class=&#34;tag&#34;&#62;only-child&#60;/span&#62;:&#60;span class=&#34;tag&#34;&#62;hover&#60;/span&#62; {
	&#60;span class=&#34;attr&#34;&#62;background:&#60;/span&#62; &#60;span class=&#34;default&#34;&#62;none&#60;/span&#62;;
}&#60;/pre&#62;
&#60;br /&#62;
With the above CSS, viewing an image directly displays the checkerboard at all times, unless you hover over the image, in which case it reverts back to show the normal image. If you want it the other way round, so the checkerboard only shows when you hover over the image, insert the following CSS:&#60;br /&#62;
&#60;br /&#62;
&#60;pre&#62;
&#60;span class=&#34;comment&#34;&#62;/*
 * Image from &#60;a href=&#34;http://commons.wikimedia.org/wiki/File:Checker-16x16.png?oldid=19631383&#34;&#62;http://commons.wikimedia.org/wiki/File:Checker-16x16.png?oldid=19631383&#60;/a&#62;
 */&#60;/span&#62;
&#60;span class=&#34;keyword&#34;&#62;html&#60;/span&#62; &#38;gt; &#60;span class=&#34;keyword&#34;&#62;body&#60;/span&#62; &#38;gt; &#60;span class=&#34;keyword&#34;&#62;img&#60;/span&#62;:&#60;span class=&#34;tag&#34;&#62;only-child&#60;/span&#62;:&#60;span class=&#34;tag&#34;&#62;hover&#60;/span&#62; {
	&#60;span class=&#34;attr&#34;&#62;background:&#60;/span&#62; &#60;span class=&#34;default&#34;&#62;url&#60;/span&#62;(&#60;span class=&#34;string&#34;&#62;'http://starsquare.co.uk/images/checkerboard'&#60;/span&#62;) &#60;span class=&#34;default&#34;&#62;repeat&#60;/span&#62;;
}&#60;/pre&#62;
&#60;/li&#62;
&#60;li&#62;Save the file. If you had Firefox open, you should restart your browser. If not, simply start it up.&#60;/li&#62;
&#60;li&#62;Find an image that contains transparency and open it in your browser; a good example is &#60;a href=&#34;http://starsquare.co.uk/images/transparent&#34;&#62;this image&#60;/a&#62;.&#60;/li&#62;
&#60;li&#62;Pretend you&#38;rsquo;re in your favourite image editor!&#60;/li&#62;
&#60;/ol&#62;

&#60;ins datetime=&#34;2009-02-18T11:29:51+00:00&#34;&#62;I removed the &#60;code&#62;&#60;span class=&#34;keyword&#34;&#62;body&#60;/span&#62;:&#60;span class=&#34;tag&#34;&#62;only-child&#60;/span&#62;&#60;/code&#62; selector, since nightly builds of Minefield include a &#60;code&#62;head&#60;/code&#62; tag to specify the page title.&#60;/ins&#62;</description>
      <pubDate>Tue, 17 Feb 2009 23:30:28 GMT</pubDate>
      <link>http://blog.cmbuckley.co.uk/2009/02/17/get-a-grid-for-transparent-images-in-firefox/</link>
    </item>
        <item>
      <title>A Message to Tinchy Strider</title>
      <description>It&#38;rsquo;s &#60;em&#62;misled&#60;/em&#62;. I don&#38;rsquo;t care if you made it up to rhyme with &#60;em&#62;mistreated&#60;/em&#62;, or if you use an 8-bit&#38;ndash;style riff to appeal to my geekiness &#38;mdash; The word is &#60;em&#62;misled&#60;/em&#62;. That is all.</description>
      <pubDate>Fri, 30 Jan 2009 17:01:13 GMT</pubDate>
      <link>http://blog.cmbuckley.co.uk/2009/01/30/a-message-to-tinchy-strider/</link>
    </item>
        <item>
      <title>Yay, xkcd</title>
      <description>Makefile:&#60;br /&#62;
&#60;pre&#62;
&#60;span class=&#34;default&#34;&#62;me&#60;/span&#62;:
	&#60;span class=&#34;keyword&#34;&#62;@&#60;/span&#62;true
&#60;span class=&#34;default&#34;&#62;a&#60;/span&#62;:
	&#60;span class=&#34;keyword&#34;&#62;@&#60;/span&#62;true
&#60;span class=&#34;default&#34;&#62;sandwich.&#60;/span&#62;:
	&#60;span class=&#34;keyword&#34;&#62;@&#60;/span&#62;[ -w &#60;span class=&#34;tag&#34;&#62;/etc/shadow&#60;/span&#62; ] &#38;amp;&#38;amp; &#60;span class=&#34;function&#34;&#62;echo&#60;/span&#62; &#60;span class=&#34;string&#34;&#62;&#34;Okay.&#34;&#60;/span&#62; &#124;&#124; &#60;span class=&#34;function&#34;&#62;echo&#60;/span&#62; &#60;span class=&#34;string&#34;&#62;&#34;What? Make it yourself.&#34;&#60;/span&#62;&#60;/pre&#62;
&#60;br /&#62;
Shell:&#60;br /&#62;
&#60;pre&#62;
&#60;span class=&#34;keyword&#34;&#62;$&#60;/span&#62; make me a sandwich.
&#60;span class=&#34;var&#34;&#62;What? Make it yourself.&#60;/span&#62;

&#60;span class=&#34;keyword&#34;&#62;$&#60;/span&#62; sudo make me a sandwich.
&#60;span class=&#34;var&#34;&#62;Okay.&#60;/span&#62;&#60;/pre&#62;
&#60;br /&#62;
From &#60;a href=&#34;http://www.cli-apps.org/content/show.php/show.php?content=89734&#38;amp;vote=good&#38;amp;tan=29063073&#34;&#62;CLI-Apps&#60;/a&#62;. See also &#60;a href=&#34;http://xkcd.com/149/&#34;&#62;xkcd&#60;/a&#62;.</description>
      <pubDate>Fri, 17 Oct 2008 12:31:52 BST</pubDate>
      <link>http://blog.cmbuckley.co.uk/2008/10/17/yay-xkcd/</link>
    </item>
      </channel>
</rss>