boogdesign blog

Web design, web development, standards compliance, Linux, events I went to related to that, and random things I found on the internet.

Rob Crowther, London, UK based Blogger, Web Developer, Web Designer and System Administrator - read my Curriculum Vitae

Buy my book!

Book CoverHello! HTML5 and CSS3 available now

Buy my other book!

Book CoverEarly access to HTML5 in Action available now

10/06/09

10:50:48 pm Permalink Blogging motivations and things I did last year (part one)

Categories: Web Design, Web Develop, Gadgets, Blogging and Internet Culture, Semantic Web and Microformats

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


Tweet this!
Send feedback »PermalinkPermalink

06/02/09

10:57:45 pm Permalink Blog software update

Categories: Blogging and Internet Culture

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.


Tweet this!
Send feedback »PermalinkPermalink

18/01/09

06:42:46 pm Permalink Adventures in Web 3.0: Part 1 - HTML 5

Categories: Front End Web Development, Standards, HTML and CSS

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:

Unstyled HTML 5 in Firefox

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:

Styled HTML 5 in Firefox

Looks about the same in Google Chrome:

Styled HTML 5 in Google Chrome

And in Opera:

Styled HTML 5 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:

Styled HTML 5 in IE7

Also in IE8b2 in 'compatibility mode':

Styled HTML 5 in IE 8

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.


Tweet this!
1 feedback »PermalinkPermalink

10/01/09

02:57:28 am Permalink hCard Buttons Across the Web

Categories: Semantic Web and Microformats

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

hcard button on the Comet.co.uk website

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 &amp;#58;&amp;#41;

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


Tweet this!
4 feedbacks »PermalinkPermalink

22/12/08

11:02:56 pm Permalink Fedora 10: No fonts after update

Categories: Linux, Fedora / Red Hat

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

Tweet this!
Send feedback »PermalinkPermalink

23/10/08

02:42:30 pm Permalink Internet Explorer Gets Some Oomph

Categories: Semantic Web and Microformats

Microformats are supported quite well in Firefox these days thanks to the Operator extension, but the 70-80% of web users still using Internet Explorer might have been wondering what all the fuss is about. Now, thanks to MIX Online, they finally have a chance to find out. Oomph: A Microformats Toolkit was released yesterday and can now be downloaded along with full source code.

There are various parts to the toolkit, some CSS stylesheets and authoring tools, but the main bit I'm interested in is the IE Add-in. The install is a standard MSI but, once installed, the Add-in is quite low profile - no toolbar or other buttons appear in the browser chrome. However, if you browse to a page with some Microformatted content, a little icon appears in the top left corner of the browser window.

Oomph discovers Microformats on the page

Clicking on the icon expands an overlay with an interface into the page's Microformats - it only appears to support hCalendar and hCard and you get a box for each even if there's only one type on the page. Microformats are displayed one at a time with some buttons to scroll through if there are more than one, then there's a toolbar beneath for exporting to Outlook, Yahoo! and others.

Oomph displays the Microformats found on the page

I did run into a few problems on some pages where the next and previous buttons didn't work (on this page, for example, the next and previous buttons transferred me to the blog engine skin folder) and also it seemed to be confused on my CV where I'd used the include pattern for my contact info (it's been a while since I updated it, so I'll have to check I'm doing it correctly before I investigate further). One really neat feature of Oomph is the maps interface, which you get by clicking the little globe symbol near the top left.

Map these Microformats!

As you can see above a map appears, this seems to be based on a search of the address information rather than geo but it worked pretty well for the example pages I tried. Overall, pretty good for a first release and a welcome addition to the range of user tools for Microformats.

A page with both hCalendar and hCard


Tweet this!
Send feedback »PermalinkPermalink

14/10/08

06:25:49 pm Permalink Create a Yahoo! SearchMonkey application

Categories: Semantic Web News

My latest article on developerWorks is a tutorial which takes you step by step through creating a SearchMonkey application. Although it makes use of a lot of Semantic Web technologies, SearchMonkey doesn't require a deep understanding of them in order to make useful applications - if you're a little familiar with PHP and XSLT you should find it fairly straightforward. Check out my earlier SearchMonkey Developer Event post for some background.


Tweet this!
Send feedback »PermalinkPermalink