boogdesign blog

• Implement Web cut-and-paste using Atom XML and Firefox XUL - Create a web clipboard using a server side XML database and a Firefox extension.Tags: FirefoxExtensions; Development; Tutorial; XML; 
• CSS Creator Playing with CSS3 - Demo page of several CSS rules which are candidates for inclusion in CSS 3.0Tags: BlogPost; CSS; Tips; 
• CSS text-shadow Fun: Realtime Lighting Demo - zachstronaut - Another fun use of CSS 3.0 text-shadow.Tags: BlogPost; CSS; Tips; 
• Exploring CSS text-shadow Property - zachstronaut - Fun uses of CSS 3.0 text-shadow.Tags: BlogPost; CSS; Tips; 
• Keryx (X)HTML Elements Best Practice Sheet - An exhaustive reference of elements by HTML version along with usage notesTags: HTML; Standards; Reference; 
• Google Code Blog: Gmail for Mobile HTML5 Series: Suggestions for Better Performance - Improving performance of offline web applicationsTags: HTML5; Web; Development; BlogPost; Performance; Javascript; 
• The Google Code Blog: Gmail for mobile HTML5 Series - Part 3: Using AppCache to Launch Offline - HTML 5 offline applications tutorial, part 3 - working with the cache during developmentTags: BlogPost; HTML5; Web; Development; Tutorial; Javascript; 
• The Google Code Blog: Gmail for mobile HTML5 Series - Part 2: Using AppCache to Launch Offline - HTML 5 offline applications tutorial, part 2 - versioning and determining file statusTags: HTML5; Web; Development; BlogPost; Tutorial; Javascript; 
• The Google Code Blog: Gmail for mobile HTML5 Series: Using AppCache to Launch Offline - Part 1 - HTML 5 offline applications tutorial, part 1 - the application manifestTags: Web; Development; HTML5; BlogPost; Tutorial; Javascript; 
• emastic - Google Code - CSS grid framework for elastic and fluid layouts using em unitsTags: CSS; Web; Design; Framework; 
• A List Apart: Articles: Introduction to RDFa - An introduction to RDFa from Mark BirkbeckTags: BlogPost; SemanticWeb; RDFa; 

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.

• Get ready for Firefox 3.0 - IBM developerWorks extension of the Finkle tutorial on offline web applications in FirefoxTags: Tutorial; HTML5; Firefox; Web; Development; Javascript; 
• Mark Finkle’s Weblog » Firefox 3 – Offline App Demo – Part 2 - Tutorial/example of offline web applications in Firefox.Tags: Firefox; HTML5; Web; Development; BlogPost; Javascript; 
• Offline resources in Firefox - MDC - Mozilla developer documentation for offline web applications in FirefoxTags: Firefox; HTML5; Web; Development; Javascript; 
• Interface Hall of Shame - Dated but comprehensive guide to UI usability mistakes.Tags: Usability; Accessibility; Design; Software; 
• Information is a task: Gerry McGovern - Information, by itself, is not useful, unless it helps you achieve something.Tags: Web; Writing; Tips; BlogPost; 
• W3C XSLT Servlet - Online XSLT serviceTags: Web; Development; Online; XSLT; Tools; 
• Why No More 9/11s? (consolidated version for printout) - By Timothy Noah - Slate Magazine - Found in Schneier's CRYPTO-GRAM: "I don't know how I missed this great series from Slate in February. It's eight essays exploring why there have been no follow-on terrorist attacks in the U.S. since 9/11 (not counting the anthrax mailings, I guess)"Tags: Essay; Politics; Security; 
• .: Quirkey.com :: Code :: Sammy :: Quirkey NYC, LLC :: Aaron Quint :: Web Developer :: Brooklyn, NY - Library for history and session handling in Ajax applications, might be interesting to combine this with Gears/HTML5 Storage.Tags: Javascript; Web; Development; Library; jQuery; 
• Too small to fail: How startups can grow in recessions - Blog - Small Business Start Up - Ideas - Resources - By not trying to be a big company you can be more successful than many who are trying to be big.Tags: BlogPost; Startup; Commentary; Economics; 

• Why Horst W.J. Rittel Matters - Tags: Design; Politics; Essay; 
• Sometimes, The Better You Program, The Worse You Communicate. - Tags: BlogPost; Communication; Development; Management; 
• microsyntax / FrontPage - Like microformats, except for plain text messaging.Tags: Microformats; Communication; Standards; 
• Home - Common Tag - I'd disabled the ZigTag plugin because it insists on adding a menu to Firefox, this makes it seem worthwhile re-enabling it though.Tags: SemanticWeb; RDFa; Web; Standards; 
• johnaugust.com » Kindle formatting for web geeks - Hmm, e-publishing...Tags: CSS; Books; Layout; Tutorial; 
• Google Open Source Blog: Web Storage Portability Layer: A Common API for Web Storage - I suppose it's less hassle for Google to introduce a compatibility layer rather than change the Gears API, but at least it makes HTML5 development even more viable in IE.Tags: HTML5; Web; Development; Javascript; Database; BlogPost; 
• Are downloads really killing the music industry? Or is it something else? | Technology | guardian.co.uk - An antidote to music industry propagandaTags: Politics; Music; Downloads; 
• Redefining Professionalism for Software Engineers - An alternative perspective to the unfortunately common 'professionalism is wearing a suit' attitude.Tags: Development; Management; Career; 
• Google Code Blog: Nicholas C. Zakas: Speed Up Your JavaScript - Presentation with notes and link to slidesTags: BlogPost; Javascript; Performance; Tips; 
• Readability - An Arc90 Lab Experiment - A neat bookmarklet to make reading long articles on bad websites easier.Tags: Web; Usability; Tools; 
• Entity Code - A Clear and Quick Reference to HTML Entities Codes - Clear and well laid out, though not as complete as the W3Schools one I normally use.Tags: HTML; Reference; 
• A List Apart: Articles: Faux Absolute Positioning - Tags: CSS; Web; Design; Layout; HowTo; 
• CSS - Clearing floats - Tags: CSS; Layout; Tips; 
• 6 ways to ruin your resume - Tags: Career; CV; Tips; 
• C# in Depth: Bluffer's Guide to C# 2 - Tags: .Net; Development; Tips; 
• CWP Certifications - International Webmasters Association - Tags: Web; Design; Training; Certification; 
• eClasses.org Course Description - Tags: Web; Development; Training; Certification; 

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.

Last week I was reading about the Event Apart re-design which uses HTML5. I have remained peripherally aware of HTML 5 (I'm on the mailing list) but mostly I've just been following the ongoing debate about adding RDFa to the spec (which has seemed, at best, like two groups of people talking at cross purposes). With major, albeit web designer focussed, websites starting to use it in production I thought it was probably time I learned a few of the nuts and bolts.

So to get started I had a quick skim through Lachlan Hunt's article 'A Preview of HTML 5' and, yes, nicked his code:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>An HTML 5 Document</title>
  </head>
  <body>
  <header>
    <h1>A Preview of HTML 5</h1>
    <p class="byline">By Lachlan Hunt</p>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
  <article id="comment-2">
    <header>
      <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
          by <a href="http://example.com/">Jack O'Niell</a></h4>
      <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p>
    </header>
    <p>That's another great article!</p>
  </article>
  <aside>
    <h1>Archives</h1>
    <ul>
      <li><a href="/2007/09/">September 2007</a></li>
      <li><a href="/2007/08/">August 2007</a></li>
      <li><a href="/2007/07/">July 2007</a></li>
    </ul>
  </aside>
  <footer>© 2007 Example Inc.</footer>
</body>
</html>

As you can see it's very similar to HTML 4, but with some unfamiliar elements:

• DOCTYPE - lacks any kind of URI, it's included purely to trigger standards mode in browers
• header, nav, article, aside, footer - new block level elements to provide more semantic structure to web pages, mostly they mean what you expect although 'aside' might be better considered as 'sidebar item'
• time - new inline elements, although only one is shown here, to solve particular problems with, or encode common usage patterns of, current HTML, in this case the Datetime Design Pattern

These unfamiliar elements aren't a problem for Firefox, the above code displays just fine:

So with the markup in place I started wondering about how CSS would affect things. The first thing I discovered was that Firefox doesn't have much in the way of default styling for the new elements - so setting background colours doesn't have much effect until I added some default styles:

header {
    display: block;
    width: auto;
}
nav {
    display: block;
    width: auto;
}
article {
    display: block;
    width: auto;
}
aside {
    display: block;
    width: auto;
}
footer {
    display: block;
    width: auto;
}

With these rules in place I was then able to apply a very tasteful colour scheme to my basic layout:

Looks about the same in Google Chrome:

And in Opera:

Unfortunately it all falls down in Internet Explorer as we're back to seeing the page unstyled. This is because IE doesn't apply CSS styles to elements it doesn't know about. Fortunately, there's a hack (which I discovered on Bruce Lawson's HTML 5 example page) - if you use document.createElement in JScript to create instances of the new elements (no need to even add them in to the DOM), IE 'learns' about them and then applies CSS rules. So I created a JS file and included it in conditional comments:

document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('time');

So now in IE7, looking fairly consistent with the other major browser engines:

Also in IE8b2 in 'compatibility mode':

Unfortunately the workaround breaks in IE8 beta 2 in 'standards mode' - though it's been fixed for the next beta.

For extra credit I did a version of my stylesheet which used the CSS table layout rules (thanks Roger), but I think I'll save the advanced CSS, as well as the fun new HTML 5 elements, such as video and datagrid for follow up posts.

A while back I made some buttons for various microformats, then discovered the official home for them and so added them into the wiki. This has had the side effect that many naive developers simply copy and past the code for the button from the wiki into their pages and then use the image hosted on my website. It's not a big problem for me - the image is small and it gets cached for a month whenever someone requests it so not massive bandwidth, and it's mostly just blogs and small sites which do it. Or so I thought...

This was brought to my attention this evening as I was switching my default from PHP 4 to PHP 5 and then breaking everything by putting invalid entries into my .htaccess file. After I was done I checked the error log and noticed several errors with a referrer of comet.co.uk, I went to look at the referring page and, sure enough, there was my hcard button. You'd think they'd be able to afford to host their own rather than leeching my bandwidth, but times are tough

I thought I'd do a little anecdotal analysis of hcard adoption so I downloaded the December log file. There were 76936 requests for microformat_hcard.png in December, 58792 from Comet - by far the most common. Next up was microformats.org itself with 8661, then one (apparently) very prolific blogger with 3715. There were a few smaller sites with a noticeable number of requests - a New Zealand electricity supply contractor had 85 hits while and hcard is also popular among German universities with Universität Potsdam scoring 307 hits and Universität Bielefeld with 172 hits in what looks like an intranet application.

So not very meaningful in the grand scheme of things, but it is clear from the slightly eclectic set of sites I've listed above that Microformats and hcard in particular have seen adoption across a broad range of different websites. Hopefully we'll see more and more services which take full advantage of all this semantic data.

I setup Fedora 10 on a new (to me) IBM ThinkPad the other day. I've run into a couple of little niggles - the wireless network decided to stop working with NetworkManager, however system-config-services won't currently run so it still starts by default...

However, a much bigger issue occurred after I did an update late last week - the next time I booted up all the text had disappeared. The graphics were working fine, but there it was just blank where the text would be - in menus and dialogues as well as within applications. A quick Google revealed others with the same issue but no solutions. Finally, last night, Carter Weatherly worked out what the problem was (an issue with the latest version of the ATI driver) and posted a workaround in the bug report:

$ wget
http://download.fedora.redhat.com/pub/fedora/linux/releases/10/Fedora/i386/os/Packages/xorg-x11-drv-ati-6.9.0-54.fc10.i386.rpm
$ yum remove xorg-x11-drv-ati
$ yum localinstall xorg-x11-drv-ati-6.9.0-54.fc10.i386.rpm
$ reboot