bioneural.net » howto

Using faux Contacts for GTD on the iPhone

Bruce — Thu, 24 Apr 2008 16:16:28 +0000

Despite strong indications of an imminent second generation 3G iPhone, the recent £100 price drop on the 8GB iPhone proved too tempting. I had hesitated because the iPhone failed to meet my minimum requirements for basic PDA functionality. With 1Password mostly overcoming the secure data exchange obstacle, the remaining challenge was to find a network-independent way of managing and synchronising tasks ("to do" items). I've also been wading through David Allen's book Getting Things Done in a search for ways to improve my personal productivity. Could I cherry-pick the key principles of the GTD religion and apply them on the iPhone using only the built-in apps?

The essence of GTD

The OmniFocus Basics Video does a good job of distilling the core ideas in the GTD method. It outlines three concepts:

Actions are something you can physically do in a single step;
Projects are activities that require more than one physical action to complete;
Contexts are physical requirements for carrying out actions (e.g. being at work, at home, connected to the Internet, etc.)

The video also summarizes three workflow steps to getting things done:

Capture all outstanding individual ("atomic") actions;
Organize those actions by grouping them into projects and/ or context;
Do the outstanding actions.

Let's put that graphically (adding horizontal reorganization as part of ongoing review):

I'm not being strict about contexts being a physical place, person or thing: in my world a context can be a frame of mind, or an area of mental focus—whatever makes sense for grouping related actions.

The wrong tool for the job?

The iPhone is most certainly not ready for GTD out-of-the-box, and not everyone is comfortable relying on network access for Web apps solutions. This situation will soon be relieved as both OmniFocus and Things—fine-looking desktop GTD apps—are promising iPhone-native companion apps in due course. Apple is typically silent on whether or not iCal/ Mail tasks will ever sync to iPhone without third party involvement.

Prior to iPhone I had been using a Palm to manage my contacts, events, tasks, and notes (paired with the ever unreliable Missing Sync). Unfortunately here's where Apple's usually seamless integration falls down—two Apple products, Mac and iPhone, are less communicative that Mac plus Palm:

The Notes app on iPhone is useless with no desktop synch, although third party solutions do exist. Otherwise moving bidirectional data between Mac and iPhone (while avoiding "online" web or mail server connectivity) means relying on either iCal or Address Book for data entry on the Mac side.

Luckily both events and contacts on iPhone have notes fields, and these can be used to sync with data entered via iCal or Address Book on your Mac. On the Palm attached notes were helpfully identified with a little yellow icon. Such identification is lacking in iCal and in iPhone's calendar, so attached notes could easily be overlooked. Thus whenever I enter something into the notes field I make use of this tip I shared 3 years ago to "unhide" that fact that there are notes attached. It also happens to be in keeping with the iPhone interface ;-)

There is a limit as to how much text notes fields can contain; long lists entered on your Mac may be truncated on iPhone.

Separation anxiety

There are broadly three types of activities to keep track of in any attempt to "get organized". There are things that need doing (e.g. "Wash the car"), things that need doing on a specific date (e.g. "Pick up dry cleaning"), and things that need doing at a specific time (e.g. keeping an appointment). I was in the habit of using both events and tasks in iCal to track actions with a due date. The fact that I can't actually describe the process by which I assigned an action to an all-day event in iCal's calendar, or alternatively to a "due date" task in iCal's to do list, is quite telling in itself.

A change in my practice is therefore the clear separation between undated tasks and those that fall due on a specific day. We can then apply some simple rules:

Anything that must occur on a particular day at a particular time becomes a calendar appointment;
Anything that must occur on a particular day becomes an all-day calendar event;
Anything that must occur but is unscheduled becomes a task list action.

Colour coding calendars in iCal to represent contexts is useful on the Mac; Palm preserved these as categories. Sadly all synched calendars are merged on iPhone so schedules are impossible to differentiate. Palm also indicated repeating events and connected multi-day events in month view: iPhone doesn't.

Faking it

Both appointments and all-day events sync both ways between iCal on the Mac and Calendar on iPhone just fine. As we all know, tasks are a different story. The system I am currently employing uses Address Book to bring tasks to the Phone app on iPhone (or Contacts on the iPod Touch) based on a few simple rules:

A Group in Address Book operates like a list in Phone;
A list is prefixed with # (e.g. projects) unless it is a context, when @ is used;
The Contact field for Company Name is used as the title of an action;
The Contact field for notes is used for notes relating to an action;
An uncompleted action is prefixed with * (not unlike a list item bullet);
A completed action is prefixed with - to indicate readiness for deletion;
An action with associated notes is suffixed with > to aid identification;
Smart Groups in Address Book are used to help collate actions.

Keep in mind that what I describe here is only part of the GTD workflow.

Here's how it all looks put together in Address Book:

Click thumbnail to enlarge image

Actions as faux Contacts grouped in Address Book

This group-based structure is mirrored on iPhone:

It's best to show how this works by looking at some examples.

Collecting/ capturing actions

The group #Collect acts as a container for capturing new actions as they are "brain dumped". Via the + button in either Address Book (Mac) or Phone (iPhone) a new action can be created within this group (with the * prefix in the Company field):

Organizing actions

The idea is to move actions out of the #Collect list and into project or context lists where appropriate. GTD purists will likely tell you to keep your inbox empty (and here #Collect is fulfilling the inbox function). But I fail to see the point of moving actions into a new container just to keep another empty, so my #Collect serves as both inbox and "catch-all" for actions that don't fit elsewhere.

Some actions are not for doing here and now; I used to keep these on what I called a "rainy day" list; in GTD-speak they get grouped under the #Someday list:

Most actions, however, will have a clear context or be part of a multi-step project. Project lists and context lists are not mutually exclusive: actions can appear under either, both, or neither. For example, sanding the dinning table and chairs is part of the #Restore dining set project, but also falls under the broader context of things to do at home, @Home:

Some future actions have current dependencies. Years ago working as house surgeon I kept a daily "Chase list" in the back of a pocket notebook in my coat; things I had to do before continuing (or often formulating) a subsequent plan. For example, I might be waiting for Mrs A's chest x-ray report before deciding whether to write her up for take-home antibiotics and completing her discharge summary. I couldn't do the latter until I was no longer waiting for the former. The GTD equivalent of my chase list is #Waiting—not things I'm personally doing, but that I have an interest in nevertheless:

Slight dilemma: Should everything I'm waiting on have a due by date? If so, perhaps it should be scheduled in the calendar instead of on an undated task list e.g. "Loaned DVD to B" Have I got it back by end April?

As a Palm/ iCal to do user I sometimes used priority to indicate those things which needed doing sooner than others (1-5, high through low). Priority has its uses, but it's not always that helpful in deciding where to start. If an action belongs to a project I will add 01, 02, 03 etc. after the * prefix. This identifies the sequence of actions needed to progress a project, giving me a clear beginning (the lack of which is often an obstacle to undertaking something amorphous):

Smart Groups don't make it over to the iPhone, and it's too unreliable to manually add every action to both a context and #All actions group/ list. So I use a Smart Group in Address Book to collect them, and from there drag to the #All actions group—which is there only for the sake of collating actions on the iPhone:

All actions can't be next simultaneously, not even when undertaken by multitasking die-hards. Hence I created a Smart Group to collate all project actions that are "01" in the completion sequence as #Next actions. This gives me a quick way to see what I ought to be getting on with when reviewing my progress on the Mac:

Doing actions

Some actions might be deleted immediately as they are completed, but at times it can be useful to keep reminders around for a little longer (until completion of an entire project, say). In this case I change * to - when an action is completed:

Is it worthwhile?

This won't be for everyone. For some people a piece of paper with a half-dozen items on a single list will be all they genuinely need. Other folk have their fingers in many pies and it can be more challenging to honour every commitment, to follow up every loose end, and to make inroads into a tangle of multi-step projects competing for your limited attention. Personally I'm not convinced I need this—at least not now. But when I start on a PhD later this year and as other concurrent projects come to fruition, things could get ugly. Now seems like the right time to learn a highly structured system while under less pressure so that using it becomes a subconscious effort when the pressure is being applied. In the more immediate term I hope that by being forced to itemise project actions and order them into meaningful sequences, I hope to procrastinate less and see my projects for what they are: doable, in bite-sized chunks.

I do hope (and expect) a more streamlined solution will emerge with Firmware 2.0 post-SDK. But that's still at least couple of months away, and meantime I've got things to get done.

Customizing WordPress feed content

Bruce — Sun, 13 Apr 2008 20:38:12 +0000

From bioneural.net:

When I last looked at customizing feeds in WordPress, it was all to do with being able to offer a summary and full text feed simultaneously—making use of WordPress' flexible feed URL syntax and a .htaccess file. In this post I look at modifying the actual contents of the feed using a functions.php file (which may already exist as part of your current theme).

Just as WordPress provides a number of hooks for adding or removing actions in your theme header (see here), so to do the core files that generate your feeds. Editing the core files is however discouraged (it makes upgrading a pain), and although you can build your own replacement feed templates an easy alternative is adding a few lines to your theme's functions.php file.

As a perpetual PHP beginner I feel obliged to warn you that use of the following code is at your own risk.

If there are any PHP/ WordPress experts reading this who can improve on my code please make yourself known ;-)

Removing WP version info

Somewhere, a while back, I read a tip about not including the WordPress version you are running in your template header—potentially allowing hackers to identify you as a target if you haven't kept up-to-date. It's easy to remove if present. For example, in the K2 theme just delete the following line from header.php:

I recently released that version information was still being sent out in my feed. The feed XML contained a line like this:

http://wordpress.org/?v=2.x

Thanks to Peter Westwood's helpful post I used my theme's functions.php file to remove this with the following code:

//Remove WP version info
function hide_wp_vers() { return ''; }
add_filter('the_generator','hide_wp_vers');

So wherever the_generator function is called (such as in the feed templates in /wp-includes) it gets replaced with... nothing. Job done.

Adding a feed image

A feed image (e.g. your site logo or avatar) is an optional part of the RSS 2.0 spec and shows up in some feed readers along with the feed description. There are plenty of tutorials (search Google) that tell you how to add a feed image by editing core template files, and there are plugins that will add one for you. I had previously edited my core RSS 2.0 template, and lost the changes during upgrades more than once. To avoid this in future here's what's now in my functions.php file:

//Add a feed image
function feed_image() { echo "\n\t\tbioneural.net\n\t\thttp://www.bioneural.net/images/kiwi-yellow-64px.png\n\t\thttp://www.bioneural.net\n\t\t64\n\t\t64\n\t\tbioneural.net\n\t\n"; }
add_action('rss2_head', 'feed_image');

Having created my feed_image function I use add_action (Codex) to insert my function via the rss2_head hook (Codex).

Note that \n means new line, \t means tab, and \r (not shown) carriage return: these are just for the sake of formatting. They have no function other than making the feed XML—which you will likely never see—look more organized:


	bioneural.net
	http://www.bioneural.net/images/kiwi-yellow-64px.png
	http://www.bioneural.net
	64
	64
	bioneural.net

Here's how the above renders when viewed in Bloglines:

Tip: If you want to add a feed image but don't want to do it via a plugin or functions.php, you can use Feed Image Burner from FeedBurner.

Adding a content license

I've noticed a rise in my content appearing on splogs, usually in the form "[Some random name] wrote an interesting post today: here is an excerpt". This violates the Creative Commons licensing of my content, which requires correct attribution. In a similar vein I've noticed some of my images turning up on "all rights reserved" sites with no attribution. While some folk are no doubt just ignorant, the sploggers are simply morons who don't give a damn. I can't do much about the latter (although I'm giving AntiLeech a spin) but it did get me wondering what I can do to improve the visibility of my licensing terms for the benefit of those "unaware".

The Creative Commons Wiki links to an RSS 2.0 module for annotating feeds. While this may be machine-parsable I've yet to come across a feed reader that actually picks up on it. As well as incorporating this extension I wanted to add a human-readable annotation to each feed item. This one took a bit of figuring out:

//Add CC license to namespace, item, inline img link within description
function add_license_ns() { echo "\n\t" . 'xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"' . "\n"; }
add_action('rss2_ns', 'add_license_ns');
function add_license_item() { echo "\t" . 'http://creativecommons.org/licenses/by-nc-sa/2.5/' . "\n"; }
add_action('rss2_item', 'add_license_item');
function add_license_img($join) {
	$join = _e(' From bioneural.net:') . the_content();
	return $join;
}
add_filter('the_excerpt_rss','add_license_img');

The first function writes the required namespace declaration; add_action then adds this via the rss2_ns hook (Codex). The next function/ action pair writes the module to each feed item using rss2_item (Codex). The third part is the human-readable bit: writing the image, text, and links and concatenating these with the_content() (Codex) to replace the_excerpt_rss() (Codex). Note also the use of the rel-license microformat.

For this to work you must set your Reading Settings in WordPress to Summary, even though we will be displaying the full text (replacing the_excerpt_rss() with the_content()).

The XML will look like this (edited for clarity):





	...
		
		Web developer widgets
		...
		 From bioneural.net:
Mac-based web developers...
]]>
		...
		http://creativecommons.org/licenses/by-nc-sa/2.5/

Rendered in a feed reader humans will see this:

The Creative Commons icon is hopefully recognisable and links to the correct license; the link to bioneural.net links to additional terms of use.

Tip: If you prefer not to have full text feeds containing HTML tags, you could use the_content_rss('', '', '', 250) (Codex) in place of the_content() to produce a 250 word text-only teaser.

Expanding the feed description

The text of the feed description is ordinarily the same text that appears as the tagline for your blog (set in General Settings). You might want to keep it short in your blog header, but perhaps send a more informative version out with your feed.

In K2 at least the description is only used in the head:

and header:

One solution is therefore to replace the PHP call with short fixed text descriptions (e.g. "stuff worth sharing") in your theme template (header.php) and make the description/ tagline in WP General Settings longer, so it gets into your feed e.g.:

bioneural.net is for stuff worth sharing: commentary by Bruce McKenzie. Major topics covered are gadgets, informatics, Internet, Mac, mobile, musings, New Zealand, photography, Project Koru, quicklinks, rant, rave, travel and Windows

I was unable to successfully utilize rss2_head (Codex) in a way that avoided duplicate descriptions.

Tip: Another way to add a more detailed description to your feed only is to use Title/Description Burner from FeedBurner.

Adding a category image

I previously used the now neglected Category Image(s) plugin to send out a category icon with each feed item, replicating their use on my blog to readily identify Mac-related posts, etc. All I needed to do was replace the default item description with this:

]]>

Sadly such a trick doesn't work with the Category Icons plugin I am now using, but I've been in touch with the plugin author and submitted this as a feature request.

How to safely inject CSS3 using jQuery

Bruce — Thu, 14 Feb 2008 14:14:56 +0000

From bioneural.net:

So you fancy using some of that über-cool draft CSS3 that WebKit browsers can handle, such as text shadows, drop shadows, opacity and rounded corners? But at the same time you want to present only valid CSS to the W3C CSS Validator? It's a dilemma, but it is possible to have your cake and eat it too—albeit by hiding CSS in JavaScript and thus cheating the Validator. However, there is even a precedent for doing so.

During the course of researching my review of the various ways to make rounded corners, drop shadows, and gradients I learned more about CSS3 and the jQuery JavaScript library. They just needed introducing to one another.

Text shadows, drop shadows, and round corners in Safari 3

A historical precedent

The concept of tricking the Validator to pass CSS that is incorrectly implemented or proprietary and not part of the W3C spec is not new. Many web developers have found it necessary to employ various hacks in their CSS to accommodate differences in the way browsers interpret the rules. Others have used proprietary code to overcome limitations or quirks in the way some browsers handle certain content. For example, the following in your document head could be used to fix IE6's lack of handling for transparent PNGs and mis-handling of the box model, floats, overflow, italics, etc.:

It's a hack: there's no other term for it. In the above example we're using proprietary conditional comments and filters to fix proprietary cock-ups. Seems fair, doesn't it?

So, if we can hack our way to supporting inferior or out-dated browsers, why should we not also employ hacks to support leading-edge browsers like Safari 3 that are already capable of rendering much of that draft CSS3 goodness?

Using jQuery's CSS injector

There are probably multiple JavaScripts that let you load CSS via the DOM, but since I'm using jQuery anyway that's how I've chosen to do it. If you don't have jQuery installed go get it and load it in your document head e.g.:

Below this we create a $(document).ready() function so that the contents load via the DOM and hopefully before the page content is displayed. Inside this function our "content" consists of a series of CSS selectors (inside the first bracket) paired with the CSS properties we wish to inject (name and value, comma-separated) joined via .css. Example:

If you had a div with the class "container koru", for example, Safari 3 will blend the above box-shadow and border-radius styling (as inline CSS3) with any additional CSS2.1 styling for .container or .koru present in your stylesheet. You can see what's going on using that browser's Web Inspector:

Note: A -webkit- or -moz- prefix on CSS properties is used respectively by the Safari and Mozilla/Firefox browsers to indicate tentative support for as yet non-ratified web standards. Thus -webkit-border-radius: 10px; and -moz-border-radius: 10px; are both potentially differing implementations of "border-radius".

OK, so the "how" is easy. Now the "Should you?"

The positives

Effects are rendered without requiring images.

Effects are rendered without requiring add-on JavaScript effects libraries.

Effects are rendered without increasing page size or load time.

Effects are rendered that may be impossible with some JavaScript or image-based techniques (e.g. anti-aliasing, liquid layout support).

Effects can be targeted at specific web browser engines.

No changes to semantic mark-up are required.

Your stylesheets remain W3C-valid (if they were before!).

Browsers simply ignore CSS properties they don't understand, so degradation is graceful.

If JavaScript is disabled browsers will still load your stylesheets, so degradation is graceful.

It is compatible with template-based websites in not requiring page-specific effects scripts to be inserted into mark-up.

When the -webkit- or -moz- prefix gives way to the real deal of W3C-ratified CSS3 we can simply remove the script and move the content to our stylesheet without having to re-design effects elements or edit any mark-up.

If you don't start using CSS3 now you might have retired before it becomes W3C-ratified.

The negatives

Turning off your stylesheet does not disable styling loaded via the DOM.

Effects can be targeted at specific web browser engines (like browser-targeting, a double-edged sword that undermines the uniformity of the "web experience").

It could be construed as cheating. It is.

What are your views, if you have any, on the merits or otherwise of this technique?

The best way to do corners and gradients

Bruce — Wed, 06 Feb 2008 14:36:17 +0000

From bioneural.net:

Rounded corners. Yes, they may be a "Web 2.0" fashion fad, but it has been clearly documented that they're a lot easier to make than square ones. As part of my overhaul of bioneural.net I've been optimizing much of the code "under the hood", meaning a lot of the changes aren't even visible. Re-evaluating how things are put together, and considering how they could be done more efficiently or otherwise improved is a valuable exercise—that it scratches a perfectionist itch is an added bonus. In this article I look at a variety of methods for creating boxes with rounded corners and gradients. Yep, it's a showdown!

The traditional approach

The well-established method of adding corners or gradients to an element is to use multiple background images. Depending to some extent on your content, this is typically impossible to achieve without the use of non-semantic extra mark-up. For example, this box uses to extra and empty divs:



	Willkommen! Welcome!
	Willkommen auf der Projekt Koru Seite, wo Simone & Bruce die praktischen Aspekte eines Jahres in Neuseeland mit Euch teilen wollen. Eine Einführung findet Ihr hier zusammen mit einer Erklärung warum wir das Koru als Symbol unserer Reise gewählt haben.
	Welcome to Project Koru, where Simone & Bruce share insight into the practicalities of organizing a year in New Zealand. You can find an introduction to the project here together with an explanation of why we chose the koru as the symbol for our journey.

Three gradient images (2 having one rounded corner each) could then be loaded into the background of each of the three "layout classes" via CSS:

.curvetop { height: 15px; background: #fff url('gradient-top.png') bottom left no-repeat; display: block; position: relative; margin-top: 10px; }
.curvemid { background: #fff url('gradient-bg.png') repeat-y; padding: 2px 20px !important; display: block; }
.curvebottom { height: 15px; background: #fff url('gradient-bottom.png') top left no-repeat; display: block; position: relative; margin-bottom: 10px; }

The result:

You could use this exact same technique for adding embellishments like borders, drop shadows and the like—but not without some Photoshop skills and a decent collection of bandwidth-hogging images if you needed multiple box styles.

The challenge

I devised a box that I thought would test the mettle of any technique. It consisted of just one div containing a header and a paragraph, the text in each of which should appear over a different background with one of these being a gradient (but not necessarily an image). The box should be formed with rounded corners (including on images), a white border, and a drop shadow. It should also have a number of functional characteristics:

Minimal mark-up i.e. avoiding nested and/or empty tags;
No changes to mark-up required (but extra CSS allowed, since this could be moved to an external stlesheet);
Valid XHTML and CSS (2.1);
Anti-aliasing on the corners (inner and outer border edges);
Small footprint (let's say under 20KB);
If using JavaScript it should degrade gracefully (i.e. still looks OK if JavaScript is disabled);
Liquid container (adjusting container width to both content size and browser window dimensions).

Why the requirement for minimal markup? Forward planning. Eventually CSS3 will arrive, and there'll be no need to scour your database in order to clean out all that redundant mark-up. Just amend your CSS and delete any unemployed images or JavaScript.

My template XHTML and CSS rendered the following:

Here is the live link.

Finding a solution to fulfil most if not all of my form and function requirements was going to be something of a mission. There's a useful roundup of techniques here, divided into those based on CSS and those based on JavaScript, with examples in both groups requiring anything from no images at all through to eight images. A particular difficulty was finding techniques not restricted by the dimensions of any required image; many of the earlier established methods were clearly devised before the availability of 23" widescreen displays (example.)

I made a shortlist (in no particular order) of techniques that looked promising and set to work. I'm not going to post all the code directly into this article or it will become over-long. The files I used for each technique, together with the master template and original full packages where applicable, are available for download should you wish checkout the code or conduct further experiments. I've tested only in Safari and Firefox.

Download the test files here (.zip archive, 428KB).

Nifty Corners Cube

First up is Nifty Corners Cube by Alessandro Fulciniti. This method uses JavaScript and CSS; no images other than those you wish to use as backgrounds are required. Here is the result:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: While you can produce a convincing rounded border, using padding on the container, this would require extra mark-up in our example in order to retain the cornering on our background images.

Drop shadow: Not supported.

Minimal mark-up: An extra container is required to render a border with inside and outside rounding.

Static mark-up: Mark-up edited to add extra container plus insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Anti-aliasing is not working on the background images or border, although it does work on solid colour boxes in the examples.

Small footprint: 10KB for CSS and JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered (and in the third case for .xtra) supports liquid layouts (case four).

Score: 8/12

curvyCorners

Cameron Cooke's curvyCorners is another image-free JavaScript solution:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: There are rounded corners, but these are rendered adjacent to our background content rather than on top of it. This example illustrates rounding on a background image, but adding a border to the containing div merely fills the cornered area with "extra" offset background (see here).

Border: Obtained by applying background and border to container.

Drop shadow: Not a feature of this technique.

Minimal mark-up: Yes.

Static mark-up: Mark-up edited to insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Yes, but only on the outside of the rounded border (not on images).

Small footprint: 24KB for JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered supports liquid layouts (case four).

Score: 7/12

SRCCB

The "simple rounded corner CSS boxes" technique was devised by Ryan Thrash, also accessible in the form of an online generator as Spiffy Box. It uses no JavaScript and a single image combined with moderately complex CSS (which would have to be recalculated for each box size):

Here is the live link.

Scoresheet:

Photo background: Supported (integrated into container background).

Gradient background: Supported (integrated into container background).

Four rounded corners: Yes (integrated into container background).

Border: Yes (integrated into container background).

Drop shadow: Yes (integrated into container background).

Minimal mark-up: Requires two additional divs for positioning purposes.

Static mark-up: Mark-up edited to insert two additional divs.

W3C validity: Yes.

Anti-aliasing: Yes (integrated into container background).

Small footprint: 6KB image overhead compared to master with original 2 background images.

Graceful degradation: Not applicable as no JavaScript.

Liquidity: Depends upon fixed-width images.

Score: 9/12

swfIR

The SWF Image Replacement (swfIR) technique is offered by Jon Aldinger, Mark Huot, and Dan Mall. It applies to inline (cf background) images and uses JavaScript and Flash to swap out the original and deck it out with bling. It does more than we require—image rotation and stretching for example, and at first glance it certainly looked like the wrong tool for the job. I wondered, however, if we could use CSS positioning to overlay our text on top of the replaced images. It turns out you can:

Here is the live link.

Scoresheet:

Photo background: Supported (as an inline image!).

Gradient background: Supported (as an inline image!).

Four rounded corners: Actually you get 6! (you could potentially blot out the bottom border on the heading using a third positioned inline image—a real hack!).

Border: Yes (specified in JavaScript).

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: Requires insertion of two inline images.

Static mark-up: Mark-up edited to insert inline images plus box-specific script.

W3C validity: Yes. It does validate, but should I say "No" because it depends on Flash?

Anti-aliasing: Yes.

Small footprint: 25KB (24KB JavaScript and SWF; 1KB image overhead compared to master with original 2 background images.)

Graceful degradation: Acceptable (just) with JavaScript disabled.

Liquidity: Positioning depends upon fixed-width images.

Score: 7/12

ShadedBorder

Steffen Ruzee brings you ShadedBorder, a full-featured solution that uses only JavaScript:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes (specified in JavaScript), but height on .sb-inner causes blue background to show through (why isn't this also an issue with the h4 background image?). Setting height to 0 removes the bar but also takes out the gradient! Admittedly, you could style the background to tone in better.

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: A headline with it's own style can be achieved with extra mark-up, and extra script in the head, and another script that must be inserted before the closing body tag. This makes it fatally flawed for use in a templated system like WordPress, IMHO.

Static mark-up: As above, mark-up edited at 3 points, including a necessary change from div class to ID.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 9KB JavaScript.

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Yes (comment out width on #cornered; not shown due to duplicate IDs).

Score: 9/12

SVG

Firefox 2 and Safari 3 can both display standalone Scalable Vector Graphics (SVG) images, an unloved W3C standard. They can't load SVG from CSS, however, making SVGs unusable as background images at this time. The option to use SVG in CSS hasn't gone beyond a proposal, with Wikipedia noting "the use of SVG on the web is in its infancy". It took me quite a few hours to get to grips with the examples in the 1.1 spec and create a valid and functional XHTML/SVG file for testing purposes. The basic idea is to create a bordered box with rounded corners, fill it with a gradient, and apply a Gaussian blur to a slightly offset box of the same dimensions—all with a few lines of XML. Here is our box using Opera 9.25 (Mac):

Here is the live link (SVG-aware browser required).

Scoresheet:

Photo background: Supported in CSS, but you loose the rounded corners.

Gradient background: Supported without CSS via linearGradient.

Four rounded corners: Yes via rx on rect.

Border: Yes via stroke on rect.

Drop shadow: Yes via filter with feGaussianBlur, feOffset, and feMerge.

Minimal mark-up: Requires insertion of inline SVG image(s).

Static mark-up: SVG must (currently) be added inline; also necessitates DOCTYPE change and .xhtml file extension.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 0KB (background image additional; gradient image not required).

Graceful degradation: No (Internet Explorer 6 and 7 choke).

Liquidity: Positioning depends upon fixed-width SVG images; resizing text size or browser window is problematic.

Score: 7/12

Update 18.03.08: Safari 3.1 adds support for SVG images in img elements and CSS images.

CSS3

CSS3, if it ever arrives, promises not only rounded corners but drop shadows and multiple background images too (oddly the draft spec doesn't mention gradients). Apple's Safari (available for Mac and PC) already includes support for such effects—but of course it's not valid CSS. You can preview CSS3 rounded corners here and here in Firefox or Safari 3. Here is our box using Safari-specific not-quite-CSS3:

Here is the live link (WebKit browser required).

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes.

Drop shadow: Yes.

Minimal mark-up: Yes.

Static mark-up: Yes.

W3C validity: No, but only because the standard isn't yet established.

Anti-aliasing: Yes, but note anti-aliasing artefact in the bottom corners.

Small footprint: 0KB (background images additional).

Graceful degradation: Yes (non-CSS3 aware browsers see a plain box).

Liquidity: Yes.

Score: 11/12

Summing up

Which technique you choose ultimately depends upon what you're after and what you prioritise. There is no one "best" solution that fits all requirements. In terms of form and function CSS3 has to be the clear winner if one must be chosen, with a perfect score blown only by the fact that it isn't a W3C standard (yet). Herein lies CSS3's only significant yet overwhelming drawback: what good is it if the majority users can't see the effects? At the same time I'm not personally sold on any of the alternative methods. The end results may look good; it's how they achieve them that I don't much care for. Although a method validates it typically involves cheating the validator (seemingly JavaScript's raison d'être). Just take a look at the live links with Safari's Web Inspector (example).

Before I put a lid on this little adventure, as Jobs would say, there's just one more thing... what about jQuery? The jQuery library (included with WordPress and the K2 theme) can be extended to render corners, shadows, and gradients. If this article was Part 1, then that exposition forms Part 2. ~~Coming soon~~.

bioneural.net site preference panel revisited

Bruce — Tue, 22 Jan 2008 20:06:51 +0000

From bioneural.net:

The first version of my site preference panel for WordPress needed lots of JavaScript for the toggle (Proto.aculo.us), more JavaScript to switch styles, and still more JavaScript to change text size. Version 2 still uses JavaScript for the toggle effect—but no additional load—since jQuery is already utilised by K2. The rest is accomplished using server-side PHP, and the revised 3-column panel layout makes use of more recent CSS know-how. I've tried to modularize the preferences panel as much as possible, but some simple template editing is still required (at 4 points). It is optimised for K2 (tested using RC3 and RC4) and although I haven't tested it with other themes (that's your job!) I don't see why it couldn't be used (*Some tweaking may be required. Batteries not included.)

Get the files

Let's get it done, then come back to the how and why if you're interested. Download the files to create your own preference panel as siteprefs.zip, available here. Expand the archive and upload the folder "siteprefs" into your K2 main directory:

/wp-content/themes/k2/siteprefs/

At this point you may also want to download and activate the Theme Switcher plugin if you plan on allowing your audience to change the WordPress theme they see on a per-user basis (storing their preference in a cookie). Support for the plugin is built into the preference panel (see features, below).

It's yours to play with and customise; all I ask is that you retain the little "i" icon with it's link back to these instructions. Feedback and suggestions for improvement are welcome. If you do modify it in a novel way (or use it in a theme other than K2), please leave a comment so I and others can check it out.

Right then, let's hack some templates!

Step 1: Look for cookies

Add the following code into PHP block at the top of K2's header.php (e.g. before the closing "?>"):

// Check cookie for stored site prefs
$layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "alternate")) ? "alternate" : "style";

Here, "style" is the name of your main stylesheet (style.css in K2) and "alternate" is the name of a stylesheet we'll create at Step 5. If you're not using K2 pop this between PHP start and end tags at the top of your header template and set "style" to the name of your primary CSS file.

Step 2: Know your style

We need to replace the relative link to your stylesheet with one into which we can insert the value of the variable $layout. While we're here, we might as well link to the styling for the preference panel. In the head element of header.php replace this line (or your theme's equivalent):

with:

Your K2 custom stylesheet will still be loaded too, if you're using one.

Step 3: Flick the switch

Create a toggle to switch visibility of the preference panel on or off (it will be hidden on page load). The actual "switch" might be a text or an image link, inserted into an appropriate place (e.g your header or sidebar). If you prefer to add the toggle in the form of a tab in your K2 menu, look for ul class="menu" in header.php and replace this code:

	',''); ?>

with the following code:

	',''); ?>
	Prefs

If you'd rather use the supplied image (sitepref2.gif), place the following code after p class="description" (which is within div id="header") and before ul class="menu" in K2's header.php.

/siteprefs/img/sitepref2.gif" width="52" height="28" alt="siteprefs" />

The CSS to position the #siteprefs-toggle image within K2's header image area is included in the download (it will be ignored if you create a menu tab instead). If this position doesn't suit your theme of course you can overwrite this in siteprefs.css.

The toggle's "slide" effect depends on jQuery, which comes with K2 by default. If you're not using K2, you'll need to include the jQuery library in your head, find an alternative JavaScript (here is how v1 did it using Proto.aculo.us), or you may wish to dispense with the toggle altogether and ventilate your preferences permanently.

Step 4: Feel included

The file siteprefs.php includes the XHTML and PHP to build your preference panel. As well as providing the Theme Switcher control, it works with layout.php to toggle your main and alternate stylesheets (and store your choice in a cookie), and advises your audience on link behaviour. You can change the content of these three columns as you see fit just by editing siteprefs.php.

To get siteprefs.php into your theme we have to include it e.g. immediately below the closing tag of the div #header in header.php, so it appears to slide out from the K2 menu:

If you prefer you could put it at the top of your page, in the sidebar, or in the footer. Or anywhere. For sidebar placement, for example, you would likely edit siteprefs.php and siteprefs.css to respectively create and style a single vertical column.

At this point, if you refresh your site you should see the bioneural.net preference panel installed. If all went well and you're using a default K2 installation, you should be something like this:

Click thumbnail to enlarge image

Site preferences installed into default K2 theme (using image toggle)

Step 5: Go alternative

Finally we create an alternate stylesheet, named alternate.css (the name is specified in Step 1 and in layout.php).

What you put in here is up to you. You will likely want to import existing styling from your main stylesheet, and then write a handful of rules which, owing to the CSS "cascade", will overwrite some of those you just imported.

Here's a barebones example that increases font size and turns the default K2 fixed-width theme into a fluid/ liquid layout:

@import 'style.css';

body { font-size: 90%; } /* approx 30% larger than K2 default */
#page { width: 100% !important; border: 0; padding: 0; }
#primary { width: 100%; margin-left: -30px; padding-left: 30px; background-color: #fff;}
.content { background-color: #fff; } /* Match bg colour to #primary */
#sidebar-main.secondary { padding-left: 30px; border-right: 10px solid #f2f2f2; padding-bottom: 20px; } /* Border colour matches bg colour of .secondary */
.secondary { width: 100% !important; margin-left: -30px; background: #f2f2f2; }
#footer { background-color: #ccc; }

Upload alternate.css into the same directory as your main stylesheet (e.g. styles.css i.e. /wp-content/themes/k2/). This is important as the switch relies on your main and alternate stylesheets being in the same directory.

If you're having trouble overwriting rules for your alternate stylesheet, try !important e.g. width: 100% !important; but bear in mind IE6 will ignore it.

Build notes, features and credits

You don't have to read on—unless you're interested in how, why, and who helped make it work the way it does ;-)

The toggle effect

The toggle uses the jQuery JavaScript library and the code for this was covered in a previous article.

What if the user doesn't have JavaScript, or has it but disabled it? Version 1 hid the preference panel on page load using CSS, and showing it required JavaScript to change the styling to "display". Version 2 uses JavaScript to initially hide the panel, so if there is no JavaScript the panel will be revealed at the outset. Furthermore, because none of the controls in the panel utilize any JavaScript, no functionality is impaired. The only (minor) outcome is that the panel can't be hidden, but at least the "accessibility" preferences are, err, accessible.

A flexible 3-column framework

The XHTML mark-up and CSS for this is adapted from an example multi-column layout given in an ALA article by Alan Pearce. Alan cleverly builds on previous work that makes use of borders to simulate equal-height columns. Initially my mark-up used borders too, but after 2 days of trying to get it to work in IE6 and 7 with in-column padding I realised I didn't need them.

The fixed-width two-column K2 theme I use defaults to a width of 780px. To create our basic layout we create 3 divs (one for each column), and wrap these in a container div. The container sets up the 3 columns using floats and negative margins and then uses padding to effectively pull the outer columns back inside the container! We then create a header div and a footer div, and style the width of the outer columns (including padding) to 260px i.e. one third of our page width:

We can then apply a horizontally-repeating background image to the header and footer divs, match the background colours, and clear floats for the footer to position correctly. Here's what our panel now looks like topographically:

But the preference panel resizes, too. If your alternate stylesheet is "fluid" i.e. page content fits to the width of the browser window, the three columns will automatically space themselves out equally to fill the window:

Note that the left and right column width doesn't actually change, but the width of the middle column is no longer an implied 260px since we have set #siteprefs-center to occupy 100% width.

At this point everything is looking good—in Firefox, Safari, and IE7. You guessed it: Internet Exploder 6 is singing protest songs. We need to patch our CSS to make it work with IE6:

The IE escaping floats bug causes the contents of #siteprefs-header not to display. We just add width: 100%; to fix this.

The IE doubled float-margin bug causes #siteprefs-right to float outside of #siteprefs-wrapper! To fix this we add display: inline; to #siteprefs-right.

Switching whole themes

The Theme Switcher plugin for WordPress is by Ryan Boren. It sets a cookie so that the user's browser remembers their choice of theme for subsequent visits.

The bioneural.net preference panel uses conditional PHP to show the theme switcher dropdown menu or, if the TS plugin is not present or is present but not activated, they will see a "not enabled" message:

There are a few other things you might consider if you allow theme switching on your site; see Ben's list. To press the point, the preference panel includes a warning when the switcher is displayed that using it "may reduce functionality". At the very least you need to allow users to easily switch back to the previous theme—otherwise they'll have to wait a year until the cookie expires (not really; they could just delete the cookie!). In the sidebar of each theme you have installed, just paste the following:

If you don't like the list styling, this CSS (as used in siteprefs.css) will remove it:

#themeswitcher { list-style: none; padding-left: 0; }

Switching stylesheets

Previously I had used JavaScript to effect both a change in layout (fixed or fluid-width) and in text size (smaller, default, larger). Both of these are really accessibility issues—adapting to the size of your screen or the acuity of your vision. Add to this the observation that enlarging text size very soon causes problems within the confines of a fixed-width layout and it becomes clear why I decided to merge these features in version 2 i.e. biiger text, bigger container.

Stylesheet switching with memory is ideal, for example, if you want your iPhone/ tablet—or screen resolution-challenged work PC—to always use an alternative "accessible" layout. Cookies could likewise ensure that a different default style makes full use of your stunning 23" Apple Display.

Having decided against reusing the original ALA styleswitcher JavaScript, and considered using jQuery (as here—also JavaScript, but better), I looked at a few PHP options and settled on Roger Johansson's method.

Identifying off-site links

By default (Option 1) any link you tag with rel="external" will display the "off-site" icon (dimmed for visited links) using the included CSS. I prefer this option for identifying off-site links because it gives your audience the choice as to how links behave (the alternative is forcing them to open new windows using JavaScript or the depreciated target="_bank"). If you haven't religiously tagged your off-site links with rel="external" (or can't be bothered), you have two alternative options:

Open siteprefs.css and uncomment Option 2 (making sure the CSS for Options 1 and 3 is commented); this will apply the icon to all links other than to your own domain (credit). See the instructions in the file.
A WordPress plugin is available that will do it for you (Option 3). Once the Link Indication plugin is activated just uncomment the CSS for Option 3 in siteprefs.css (ensuring the CSS for Options 1 and 2 is commented-out).

Option 1 works in Firefox, IE7, and Safari (but not IE6). Option 2 works in Firefox and Safari (but not IE7 or IE6). Option 3 works in Firefox, IE7, IE6, and Safari (but does not differentiate between visited/ unvisited links).

Change log

Version	Notes
1.0	11.05.06. Initial 1.x release.
2.0	22.01.08. Initial 2.x release.
2.1	28.01.08. Corrected CSS for off-site links. Added alternative methods of identifying off-site links using pseudo-class (Option 2) or class (Option 3).

Spring clean your WordPress head

Bruce — Sat, 12 Jan 2008 08:00:42 +0000

From bioneural.net:

If you had viewed the source of my WordPress-generated pages a while ago you'd have noticed that my head elements were a real mess. Now they've been spring cleaned, arranged neatly into related groupings and the needless clutter disposed of. Plugins that use the wp_head hook distribute junk all over the show, offending any sense of order. Luckily your WordPress theme is the key to taking control of your head, through a combination of edits to functions.php and header.php.

Removing actions using a functions file

Your theme may already include a file called functions.php. If it doesn't you can create one using the functions file found in the default theme directory (which is a bit busy), or copy-and-paste mine (with the K2 bits stripped out for clarity):

The real advantage here is avoiding the need to hack any plugins or core WordPress files (an upgrader's nightmare). Let's go through the removal actions in sequence.

Really Simple Discovery helps client software discover things about your blog. If you don't use a client and manage your posts directly in WordPress, you don't need to offer such help. The PHP script:

remove_action('wp_head', 'rsd_link');

will remove a line from your head that looks something like this:

Windows Live Writer is one such desktop blogging client, but supporting it needs yet another line in your head. The script:

remove_action('wp_head', 'wlwmanifest_link');

will remove a line from your head that looks something like this:

The Quoter plugin defaults to inserting comments, JavaScript, and CSS into your head:

You don't need that inline CSS if you're not using Kubrik, and can remove it with this script in functions.php:

remove_action('wp_head', 'quoter_head');

You can then restore functionality with a much tidier JavaScript call in an appropriate place (moving any custom CSS to your CSS file):

The wp-forecast plugin insists on inline CSS too. The script:

remove_action('wp_head', 'wp_forecast_css');

will remove a line from your head that looks something like this (again, any CSS goes in your CSS file):

The K2 theme inserts some particularly messy inline CSS:

We can ditch this if not using custom K2 headers as follows:

remove_action('wp_head', array('K2Header', 'output_header_css'));

Finding the right function that adds the action can involve a bit of trial-and-error. Searching plugin (or theme) code for a partial match to an unwanted string appearing in your head is a reasonable first option.

The plugin alternative

The Codex describes the functions file as being "like a plugin". This turns out to be quite literal; you could take the above functions and roll your own plugin (as suggested here). Create a file (head-cleaner.php say) containing the actions you want removing (your list may differ from mine), upload it to /wp-content/plugins/ and activate it in the usual way:

Other head-cleaning tips

Have a poke around in your theme's header.php file, and see if you can organise it a bit better.

I also found I could remove the following, found in the header.php of many themes, with no adverse effects:

This script produced a whole bunch of lines in the head having the following form:

Removing the lengthy relative links list for archives doesn't seem important except in theory:

The rel="archives" does not have any specific use that I am aware of. It is used to define other pages that are archives of the site in question. In other words, it's defining pages where the content on this page will be seen in the future.

Finally, some plugins may insert code that, while not necessarily disorderly, may not be just the way you like it. For example, Simple Tags can automatically insert keyword metadata into the head of each and every page. You might feel, however, that it's not sensible to associate metadata with a dynamic index page that temporarily contains tagged posts on a variety of topics. You could therefore make metadata insertion conditional, using Simple Tags manually as follows:

Alternatively, if you shun dependence on plugins you may want to use built-in WordPress functions, as detailed here:

ID);
	if($tags) :
		foreach($tags as $tag) :
			$sep = (empty($keywords)) ? '' : ', ';
			$keywords .= $sep . $tag->name;
		endforeach;
?>

It looks like a lot more code, but remember it will still produce just the one line meta element.

That's enough. Too much of this sort of thing cleanly clearly does my head in.

An exercise in wireless frustration

Bruce — Fri, 11 Jan 2008 14:17:34 +0000

From bioneural.net:

Having spent the better part of two half days trying to achieve the impossible, I wish to recount an exercise in wireless frustration. The challenge was to hook up an iMac G4 (Flat Panel) with no Airport Card, located in the attic room, to my home LAN (and thus to the Internet). One purpose of this machine was to serve as a screen for streamed video that could be watched while using the exercise cycle. A TV had provided such distraction, but that had broke. To cement the challenge, the problem should be solved using equipment already to hand i.e. at no additional cost.

My "BeBox", the hub of my home LAN, is actually a SpeedTouch 780WL WiFi router/ ADSL modem. The router's wireless access point (WAP) offers 802.11b/g, which is secured with Wi-Fi Protected Access (WPA) encryption—the earlier Wired Equivalent Privacy (WEP) standard is considered insecure.

A slow, insecure option that worked

It's worth noting that the original Apple Aiport Card appropriate for this machine can still be had on eBay for £30–40. Although this card is WPA-aware, it is only 802.11b (11Mbps) and thus not suitable for streaming. I know this to be so because the first device I tried was the Linksys WET11, a wireless Ethernet bridge. For the record, because it took me some time to discover, this device has a factory-default IP of 192.168.1.225. However, before you can connect to it using Safari (or any other browser), you need to manually assign your Mac an IP address in the same range and subnet (255.255.255.0).

Wireless bridging between the BeBox and WET11 "just worked", without any complicated configuration. However, video streamed locally from/to VLC was intermittently pixelated and my 17Mbps downstream broadband was somewhat choked for streaming Internet video.

A fast, secure option that didn't work

I also had an Apple AirPort Express (AX) lying around. As Apple state in their configuration walkthrough for Mac OS X 10.4 (Tiger):

Using the wireless distribution system (WDS) feature, you can set up two to five base stations as a unified network that shares one Internet connection.

WDS sounded ideal, giving an expensive and complex Apple product the functionality of a cheap and simple wireless Ethernet bridge. I factory-reset the AX and consulted various online descriptions and found this one most helpful.

I had to configure the AX for WDS on another Mac running Leopard because AirPort Admin Utility on the iMac, although running Tiger, warned "Joining a WPA-protected network and making changes to a WPA-protected base station requires a WPA capable computer. This computer is not WPA capable. If you continue you will not be able to join the WPA-protected network or make changes to the WPA-protected base station."

After much wasted effort, with Google's assistance I learned that the SpeedTouch 780 doesn't support the combination of WDS and WPA, although will work with WDS and WEP. Downgrading my network security to WEP 24/7 is just too much of a compromise.

A fast, part-time insecure option that worked

Because I wasn't configuring WPA, I set up the AX from the iMac—so the following screen captures reflect AirPort Admin running under 10.4.11. First up, the AirPort tab:

Name your AX base station;
Change the AX password;
Set Wireless Mode to Create a Wireless Network;
Name your AX network;
Do not enable wireless security (unless you want to use WEP, which is nearly the same as using none);
Set the Channel to the same channel your SpeedTouch 780 is using;
Check Create a closed network.

Next is the Internet tab:

Connect using AirPort (WDS);
Enter the MAC (physical) address of your WAP (see Home > Home Network > Interfaces > WLAN: [YourWLAN]);
Uncheck Also allow wireless client computers (we only want the hard-wired iMac to connect);
Configure using DHCP (the iMac and AX will be assigned IP addresses by the SpeedTouch).

Now comes the Network tab:

Make sure Distribute IP addresses is unchecked.

Finally, the WDS tab:

Check Enable this base station as a remote base station;
Confirm the MAC address of your main router is shown;
Click Update to restart the AX.

One more step. I also needed to enable WDS for the AirPort in the SpeedTouch settings. Make sure WDS is enabled and check the box next to your AX base station name and click Apply:

It now works—but only if I temporarily disable encryption (both network names remain hidden, however, and new wireless clients are not allowed). Sometimes, no matter how persistent you may be, you can't have everything.

Desaturating menu bar icons

Bruce — Thu, 06 Dec 2007 08:11:19 +0000

From bioneural.net:

The bright orange menu bar icon for Missing Sync sat in my Leopard menu bar next to Google Notifier, the latter turning from an unobtrusive grey to attention-grabbing red when it had something to tell me (the arrival of unread Google Mail). I found my eye wandering needlessly to the Missing Sync icon, so decided to hack out that distracting brightness.

All the other menu bar icons on my Mac are greyscale—unless they have something to report. But not the icon for Missing Sync 6.0.2b:

Find Missing Sync Menu Bar.app in /Applications/Missing Sync for Palm OS/Missing Sync for Palm OS.app/Contents/SharedSupport;
Right-click to Show Package Contents and look in the Resources folder to find five files with a .tif extension;
Double-click to open each image individually using Preview and choose Tools > Adjust Color;
Move the Saturation slider all the way left and close the inspector window and the image, saving when prompted.

On restarting your computer the Missing Sync menu bar icon should be desaturated—and a lot less full of it's own importance!

Setting up Gmail IMAP on iPhone + Mail

Bruce — Wed, 24 Oct 2007 13:36:27 +0000

From bioneural.net:

Gmail have begun offering IMAP on some accounts, providing a number of advantages. Derek at 5ThirtyOne offers advice for configuring the service to work better with Apple Mail and iPhone.

Implementing the hCard microformat

Bruce — Fri, 17 Aug 2007 11:12:23 +0000

From bioneural.net:

hCard is a semantic web-friendly derivative of vCard (as used to import/ export from the Mac OS X Address Book). This post is a short "how to" describing a method for adding contact information to your blog posts in a cross-platform format that your readers can store without effort.

The RSS client NetNewsWire now detects microformats—hCard/ vCard for contacts and hCalender for calendar events. I noticed that the odd site has started displaying the tell-tale icon indicating associated contact information:

Adding hCard to your posts

I wanted my hCard to be available from any page in my site, so I added the following code to my WordPress footer.php template:


	
	 Bruce McKenzie is a General Practitioner based in Wellington, New Zealand.
	 He blogs at bioneural.net (feed) and can be contacted (+12:00 UTC) as b.mckenzie on Skype.

Notice that the paragraph containing my hCard data is styled out so that it doesn't display at the footer of my page:

If CSS is disabled, however, the hCard information is revealed to the world and the use of "natural language" makes things human-readable:

Tip: An easy way to encode a photo is to e-mail yourself a JPEG photo then select the message in Mail and choose View > Message > Raw source. Now copy the base64-encoded text block into the image scr, adding a "data:image/jpeg;base64," prefix.

Accessing hCard via NetNewsWire

At this point when readers use NetNewsWire to read one of your posts your hCard should be automatically detected, although it appears that not all of the specification is supported. They can select to download your contact details via the drop-down menu:

Selecting your name will open a dialogue box asking if the person should be added to your Address Book. If you confirm, the person will be added as a contact:

Making your hCard browser-friendly

If visitors are viewing your posts with a browser like Safari, they won't know you have microformats hidden in your code. Luckily it's easy to add a visual indicator that can be used to extract your hCard data and convert it into a vCard for download; you don't need to host a separate vCard file on your server. Using the beta Technorati Contacts Feed Service service and some JavaScript, we can include the following code (again, this went into my footer, but it could go anywhere):

/styles/bioneural/vcard_add.png" alt="vCard" />

The user just needs to click on the vCard icon. The resulting hCard-contacts.vcf file (in your default downloads location) can now be imported into Address Book:

Notice that, on this occasion, the encoded photo is imported and the source of the data is recorded (the URL of the actual page used for the download).

Tip: The Operator add-on for Firefox detects embedded microformats—although it does seem to slow page loading significantly and doesn't handle the encoded image.