Wonky Feeds

Apologies for anyone reading my posts via feedreaders, rather than directly on the blog, who may have been wondering why some of my oldest posts are suddenly appearing.

In addition to the new design, I've also been making use of the blogger beta's "label" feature (aka tagging) and updating old posts with suitable tags. Unlike the old version of blogger, which never seemed to care if you went back and updated a post, the beta version makes updated posts float up to the top of your site feed. Hence some older stuff appearing on the list!

Hopefully, it won't happen again on the same scale, since I'll be tagging each post as I write it. Sorry for any confusion!

I've Had A Facelift!

A virtual one, not a real nip & tuck.

After weeks of dithering, I've finally upgraded my blogs to the blogger beta account (there was no going back, so I wanted to be sure before I jumped!). And while I was at it, I thought I would take the opportunity to choose a new template, more in keeping with the colour scheme of my website, carolinemockett.com

It's taken me a while to get my head round the new blogger template widgets, and when I've had more of a play, there may well be a few more tweaks to the Emperor's New Clothes (or should that be Empress?)

Browser Wars or Spoiled For Choice?

Two new browsers have launched in the same week. As Olly says, it's a bit like London Buses. First a drought, and then they all come at once.

Firefox 2 - first impressions

As a regular user of FF1.5, I was keen to get the 2.0 release and like the slightly "shinier" look of the browser - someone's polished the chrome!

I found an excellent article on tweaking Firefox, and have done a little customisation to make myself happy with it. One thing I was having trouble with - the new version put an "X" on every tab to close it, whereas 1.5 just had the one at the righ hand end of the tab bar.

Fiddling with the browser.tabs.closeButtons parameter, and setting it to "0" just gives you the close button on the active tab. Much better!

The browser.tabs.tabMinWidth default is 100[px]. If you have many tabs open at once, you end up with scroll arrows in the tab bar, and only get about 7 tabs across by default before this happens. Changing this parameter to 75 gives you about 10 tabs before they start scrolling.

I like the "Recently closed tabs" in the History menu too - how many times have you closed a tab, only to think, "damn, I wanted that one"? Restore it quickly via this menu, and voilà!

Setting browser.urlbar.hideGoButton to "true" (default false) will get rid of the annoying green arrow next to the address bar. Personally, I never use it, I'm in the habit of bashing "return" once I've typed in a URL.

There are other new features, but I've yet to fully explore them.

IE7 - first impressions

I've been waiting in trepidation for Microsoft's latest browser to be released. Yet ANOTHER browser us poor web developers will have to take into account when testing our sites. Yesterday, I bit the bullet.

No troubles in downloading the update, or installing it (thankfully!). Similarly, I went and trawled the evolt.org browser archive for a standalone version of IE6. I've heard some people have had problems with these standalone versions, but thankfully, no aggro as yet. So I've now got IE6, IE5.5 and IE5.01 on my PC too. Along with Opera, that has most of the major PC browsers covered.

Looks like none of my sites have major issues in IE7 - thank heavens! But I would have been surprised if they did - most were designed with standards in mind (IE7 is just catching up with the standards used by Firefox for years), and I haven't got loads of IE-specific hacks lurking in my code.

Two things about IE7 I do like, and don't think Firefox2 has (let me know if I've missed these options buried in FF somewhere):

1. Page thumbnails
2. Whole-page zoom

Page Thumbnails

If you click the thumbnails tab at the LHS of the tab bar (outlined in red) -
the browser gives you a large thumbnail of what each tab's page looks like. A bit trivial if you have lots of different sites open, perhaps, but useful if you quickly want to tell the difference between several pages from the same site. The thumbnail display looks like this:


Whole-Page Zoom

And secondly, with accessibility in mind, IE7 will actually zoom the whole page, rather than just text. So if your standard page looks like this:

Once the page is zoomed, even up to 400%, it makes a pretty decent job of rendering text in graphics at this larger size (click the image below to see an actual-pixels version):


I'm sure there will be little niggles and glitches which become apparent as the web community gets used to these new browsers. For the moment, although I see IE7 as a massive improvement over the crusty old IE6, I don't think it's quite persuded me to swich from Firefox as my default browser. And that's largely to do with the developer extensions and addons I use. Perhaps for a regular surfer, it would be enough.

Finally, A Night At The Opera

Lastly, I've just downloaded the upgrade for Opera, now version 9. The Opera website details what's new in Opera9. Haven't really had a chance to look at this in depth, but it's always good to have another browser option to test.

Playpen #4 - Microformats/Too Many Tails?

Enthused by the WSG meeting on Microformats last Thursday, I thought I would update my website to include some hCard information, so put together an About Me section.

I thought I would include links to "me" elsewhere on the web, too - such as Flickr and Upcoming. The hCard spec allows for these sort of additional URLs, as long as you mark them up with class="url", which I duely did.

However, when the Tails extension for Firefox scrapes the page for Microformat info, if you have marked up multiple links with class="url" - it just takes the last one in the vCard element as the one which is displayed in the popup. I removed the class from the last link in the list, and Tails took the next one up. So, it seems Tails doesn't parse mutlitple URLs and list them too, it just uses "last man wins" as the URL to display - a shame :-( It would be nice if it took the one associated with the name or organisation element as primary. Perhaps there is a way to say which one is primary, and I'm missing the point?

In order that I don't mess up my about me page, I've taken these extra classes off it, but in order to show you what I mean, I've replicated the problem in the playpen4 page.

If anyone has any thoughts or comments, I'd be interested to hear them.

31st October - add:

Further to Trovster's comments, here are two screenshots for my version of Tails (0.3.4):

[click for a bigger version] - Tails displays my Contact details with just one URL: the link surrounding "Freelance Web Design & Photography" is the only anchor marked up with class="url" on this page.

However, the playpen4 page looks like this with Tails:

[click for a bigger version] Tails still displays just one URL, but this time it's the last one in the hCard list marked up with class="url", this time the link for my dConstruct Backnetwork profile.

Advanced Driving Techniques

I had to take a drive down to the main sorting office earlier on, to collect a parcel. It had a customs charge of £3.68 - fair enough - and a £4.00 "Royal Mail Administration Fee" on top.

<rant> HOW MUCH ?!?!?! </rant>

Anyway, that wasn't the point of this post...

My route home from the PO takes me past the County Police HQ, and just outside it, a vehicle cut me up by pulling in front and proceeded to do 15mph (in a 30 limit) until the next junction, where it turned left without indicating! Sadly, I was going the same way, and the car (still doing 15mph) then pulled up outside the County Court, giving 1 second's worth of indication and "parking" half in and half out of the layby.

It was a display truely worthy of someone out on their first driving lesson. But the reason I was so shocked? It was a marked patrol car!

Microformats Extension for Dreamweaver8

Having downloaded Brian Suda's Microformat Cheat Sheet, I had been methodically adding XFN and hCard info to previous blog posts by messing under the hood in split/code view. All very tedious. As I added similar stuff for the nth time, I was just thinking, "wouldn't it be nice if some clever type had written a DW extension to do this..."

No sooner thought, than found - more or less by accident, I've just discovered the Microformats Extension for Dreamweaver8 at the WaSP website. Now it really is a no-brainer to add Microformats to any page.

After installing the extension, you get the Microformats tab appear at the end of the Insert Bar:


The first icon gives you the hCal dialogue box:

Fill it in, and lo! and behold, you get the relevent hCal code in your page:

<div class="vevent">
<a class="url" href="http://www.mypub.com">
<abbr
class="dtstart" title="20070101T1200"> January 01, 2007 - 12:00 </abbr> - <abbr class="dtend" title="20070101T2344"> 23:44 </abbr> - <span class="summary"> My Birthday </span> - at <span lass="location"> down the pub </span> </a>
<div class="description"> Let's meet for a few New Year drinks! </div>
</div>

Next up is the icon for hCard, and pushing the button gives us:

Which produces:

<div class="vcard"> <a class="url fn" href="http://www.carolinemockett.com/">Caz Mockett</a>
<div class="org">Freelance</div>
<div class="adr"> <span class="locality">Chelmsford</span>, <span class="region">Essex</span> </div>
</div>

The third icon is for the rel-licence attribute:

giving the very simple

<a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="license">some rights reserved</a>

The little "luggage tag" icon gives us the rel-tag dialogue (of course):

which gives us

<span class="technoratitag">
<a href="http://technorati.com/tag/microformats" rel="tag">microformats</a> </span>

Finally, the dizzy-looking heads icon is for the XFN widget, which really is very neat indeed:


giving us this little code snippet:

<a href="http://www.sheilafarrell.com" rel="met colleague friend">Sheila Farrell</a>

Fab. All of a sudden, my life has become easier. Drew, you're a genius!

Geek Dinner With Molly Holzschlag

Great evening at the Geek Dinner last night, with guest Molly Holzschlag. I've only been to one other, where Chris Anderson gave us a talk about The Long Tail, so I was a bit surprised that Molly didn't give a presentation as such, but we all enjoyed her company and she was pleased to chat with anyone about anything.

It was nice to catch up with existing friends; Sheila Farrell, Robert Lee-Cann, Ross Bruniges, Ian Forrester and Chris Heilmann, plus make some new ones! I had interesting chats with:

• Laurence Postgate about freelancing, design, beer and rugby
• Paul Boag on freelance photography
• Molly about her nomadic lifestyle!
• Andy Mitchell about beer and geeks ;-)
• Eystein Alnæs on web design, Norway and Huskies
• David Long about blogging and design
• Frances Berriman on girlie geeks

So there we are, a good group of names I can now put faces to - see you at the next one folks!

Oh, and fresh from the recent Microformats WSG-meet, I've marked this up with a load of hCard info :-)

WSG London #2 - Microformats

The second London WSG meeting was all about Microformats, something I've been meaning to get to grips with for a while. What are they, and what are they good for? We had three Microformats "Ghosts" to help us understand more about them:

The Ghost of Microformats Past - Mark Norman Francis Esq of Ye Olde Yahoo! Corp. Norman gave us an overview of what Microformats are for, and why they have evolved:

• They should be there for humans first and machines second
  
• They are a way of encoding data
• Start simply, and re-use building blocks from other standards
• They are modular and embeddable
• And most importantly, they should attach extra (explicit) meaning to (implicit) content.

One of the first Microformats to evolve was the XFN standard in 2003. In its simplest form, this adds the "rel" tag to an anchor link (for a person's blog, say), where you can specify your relationship to them. See my other post on XFN for more info.

In 2004, the Creative Commons Licences took off, and the rel="licence" tag was added to the Microformats arsenal, eg: Creative Commons, <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="licence">some rights reserved</a>

A lot of sites have invisible meta data hidden in their pages, but which might as well be invisible - visitors can't see it, and content authors often forget to update it. Norm's phrase was out of site/sight, out of mind. If a human can't see it, the metadata might as well not be there.

He briefly discussed why using XML namespaces was considered harmful. They are not well supported, even in modern browsers, and are antisocial (giving rise to the namespaces Tower of Babel).

But on 20th June 2005, http://microformats.org was unleashed on the web community. In 15 months, there has been a huge adoption of them, basically because they are simple, sensible and extensible. Most popular have been the hCard and hCal formats, along with the rel-licence, rel-tag and afforementioned XFN.

Out in the wild, heavyweights such as WordPress, Yahoo!, Google, Technorati have adopted microformats. With a very small tweak to one of their PHP templates, Yahoo Local have suddenly made 15m new hCards available on the web!

Next up was The Ghost of Microformats Present, Mr Jeremy Keith of Clearleft

Jeremy started out by reminding us that the (X)HTML specs do not have specific tags for semantic items such as contact details, relationships, events or reviews, and with the addition of a little bit of extra markup (mainly attributes to existing elements), we can explicitly specify these things in existing markup.

• Elemental Microformats
• the rel attribute:
  <link href="mystyle.css" rel="stylesheet" type="text/css" />
  In this case, the rel atribute defines the relationship of the linked resource to the current document (something that had never really occurred to me until the blindingly obvious was pointed out!) Similarly, <a rel="help" href="help.html">Help page</a> might explicitly define a help document for the page containing the link.
  <a rel="tag" href="http://en.wikipedia.org/Microformats">Microformats </a> tells us that the link is also a tag.
  He also mentioned rel-licence and XFN as above.
• the rev attribute:
  Less well known and trickier to get your hear round, the rev attribute defines the reverse relationship to "rel". So in the above example, on the help.html page, you might find a link thus: <a rev="help" href="checkout.html">the checkout page</a> which would say, the current page is the help resource for the checkout page.
• the vote-for/against attribute:
  You might include a link to someone else's blog, which expresses an opion (be it negative or positive) which you agree with. Then use:
  <a rel="vote-for" href="review.html">a damning critique</a>. The rel="vote-against" is of course, the opposite (you disagree with the opinion, whether it is positive or negative)
• Compound Microformats
  These add more than one attribute - usually classes - to elements. We mustn't forget that classes are for general purpose processing by user agents - NOT just for CSS - and should add extra semantic meaning to a document. He cited the hCard example for contact details on a blog:
  

  <address class="vcard">
  <a href="http://joebloggs.com/blog" class="url org">
  Joe's Blog</a> is the online home of
  <a href="mailto:me@jobloggs.com" class="email
  fn">Joe Bloggs</a>, a <span class="title">web
  developer</span> living and working in <span class="adr">
  <span class="locality">London</span>,
  <span class="country-name">England</span>
  </span>.
  </address>

Other things we need to consider are tools for creating and viewing Microformats. The hCard-O-Matic will give you a head start on writing an hCard for contact details, as will the hCal-O-Matic for events. Brian Suda's Microformat Cheat Sheet should also be a must if you're needing a quick reference guide.

On the discovery end of things, the Tails extension for Firefox is great for finding microformats on a page. For those folks not running Firefox, John Hicks has written a client-side stylesheet to highlight microformats, and he's updated it already. Tantek's microformats favelets let you copy hCard or hCal information into your address book or calendar. And Technorati have started to index microformats too!

Jeremy has kindly put his slides together as a PDF - but they're never as much fun as seeing them delivered "live" ;-)

Finally, a taste of things to come? The Ghost of Microformats Future, aka Drew McLellan , also of Yahoo! Europe, and a member of WaSP

Drew immediately got everyone's attention by asking, could using Microformats on your current site effectively replace your API? He demonstrated numerous instances where complex calls to APIs could be supplanted with the relevent microformat codes in the page, and pretty much showed us what they could become given enough widespread adoption. You cane see Drew's slides online, as I didn't have time to scribble all the fiddly bits of code he demonstrated.

One site which has no API but is littered with useful microformats is corkd.com. You can extract contact info or reviews at will, if you have the right plugin widgets.

Drew also drew our attention to some useful tools:

Brian Suda's X2V transformer - takes XHTML hCal/hCard and munches them into vCard/iCalendar files. Then there's Drew's new tools.microformatic.com site.

Questions and answers were welcomed by our Three Musketeers. Yahoo! memory sticks were given out as goodies to anyone who asked a question. One interesting question that stuck in my mind was asking if there were any microformats for mobile? Jeremy quipped that they are smaller than that, and there's more information on picoformats at the microformats wiki.

A very long post; wrapping up I'll say we all enjoyed a beer with the other geeks in the pub afterwards! Thanks to Stuart for organising the meet. He's already put up the podcast feed from the event. I'm looking forward to the next one, whenever that comes round.

Gone Into Hiding?

You may have wondered if I've gone into hiding as the blog has been very quiet lately. Well, the answer's no, but I have had a week off doing stuff at home and not going near the computer very much. Makes a nice change, every now and then!

Emerging from my exile, I'm blinking in the bright light of day and trying to catch up with a bit of blog reading, writing and other pc-related stuff.

Olly Hodgson has some excellent links, which I've been following up, and then generally getting lost in the blogsphere. I'm also waiting with baited breath to see how The CSS Div almost got himself killed...

Here's a few good posts about accessibility issues:

• Bruce Lawson talks about making accessible PDFs
• Punkchip gets to grips with relative & absolute units and makes some excellent suggestions about Accessible Radio Buttons and Checkboxes
• A List Apart gives us What Is Web Accessibility? and Working with Others: Accessibility and User Research
• And Rob Cherny has an interesting post entitled Ajax and Accessibility: You're Doing it Wrong (Hijax)

As an antidote to my recent exile, I'm also being very sociable this week, with the upcoming events in London to attend - WSG London #2 - Microformats and the London Geek Dinner with Molly H. Will report back on them later in the week.