The general mechanism for resizing text is to have one link to increase the font size and one to reduce it. However, it can get tricky for the user to keep track of what the original size was, so sometimes people include a ‘reset font size’ button.

At this point the UI is starting to get a tiny bit complicated, so I was looking for a way to create a dead-simple widget with just 2 options – small font or big font. Keep it simple.

I’m sure someone has done this before, but I couldn’t find a script on Google that did everything I wanted, including changing the styling of the currently selected font size to make it obvious, as well as a cookie to make the size selection persistent across pages in the site. So I hacked around with a couple of other scripts I found and created a solution using JQuery.

• View the demo ».
• Download the source files

The advantages of this solution are:

• The UI is really clear and simple (you could make buttons instead of links if you like)
• A separate class is toggled for the currently selected size
• The resize links are only displayed if the user has javascript enabled
• The font size selection is persistent across pages
• The resize affects the font-size as set on the HTML body element. So all text that you want to be resized needs to be sized in percentages or ems. If there are some elements you don’t want to be affected by the resizing, you can specify their size separately in pixels.
• Unobtrusive Javascript

A few notes:

• By loading the JQuery library from Google’s servers, it’s likely that the code will already be cached, thus saving download time
• You need to include the JQuery Cookie plugin separately
• Font sizes for LARGE and SMALL need to be set in the JS file
• The links need to be set to display: none within your stylesheet so they are hidden by default. They are then revealed for JS-capable browsers only

I got the basic idea for how to approach this using JQuery from a post on ShopDev.

1. There’s a good case for saying that on the hompage (only) the logo or name of the site should be marked up as H1. I don’t think this should be applied as a general rule on other ‘content pages’ because this is a waste of the H1 function both for screen readers and for search engine ranking. But we could make an exception for the homepage. It sort of makes sense. But then you have a slightly fussy situation where the HTML and CSS for your logo is different for the homepage than for all other pages.
2. Another alternative would be to allow multiple H1s on the page and markup all the teaser headings as H1. This feels instinctively wrong to me, because I think an H1 should define the overall, main content for a page. It probably also dilutes the effectiveness of the headings in search engines, and isn’t going to help screen readers if they’re expecting a single H1.
3. Alternatively, we could choose to miss out the H1 tag for the homepage. This makes sense from the perspective of the information architecture for the site. Afterall, those teaser headings are H1s on the content pages they link to, but shouldn’t be H1s on the index page. In terms of screen readers: if an H1 is not found, presumably a decent screen reader will try jumping to H2. It may not be totally ‘correct’ but I doubt this is going to trip someone up in practice? On the other hand, you are wasting the power of that H1 for search engine ranking.
4. I suppose a further option is to put in a ‘phantom H1′ and then hide it with CSS. But that also feels a bit messy.

So anyway, I’m leaning towards options 3 at the moment in cases where an H1 tag doesn’t really ‘make sense’.

Create a specific template for displaying search results – search.php. Then, by placing an extra field in your search forms, you can check for this value within search.php and display or hide certain categories depending on what you detect.

So for example on your homepage you might have a search form with a field like this:

<label>Restrict search to blog: <input name="scope" type="radio" value="blog" /></label>


Then within search.php you would pick up that value like this:

<?php $scope = $_GET['scope']; ?>


And then use that to skip certain categories within the loop:

<?php while (have_posts()) : the_post(); ?>
//Skip this result if it's out of scope:
<?php if($scope == 'blog' && !in_category(1)) continue; ?>
....


Of course you can make this more complex by setting up multiple scopes and including more categories in each.

The first thing we want to do is visit the user’s page on YouTube to grab the feed URL for that person. It might be your own account, of course, but there’s no need to log in, and feeds are publically available from anyone’s account. Once on a user’s page, your browser should display an RSS icon: click on it and copy the URL of the feed. It will look something like this:

http://gdata.youtube.com/feeds/base/users/MontyPython/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile

In this case I’ve grabbed the feed from a channel.

Next open up the WordPress template file for the page you want to display the content on. It might be ’sidebar.php’, for example. Wherever you want the videos to appear, you need to call the fetch_rss() function as described in the WordPress documentation.

<?php
// Get RSS Feed(s)
include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('http://gdata.youtube.com/feeds/base/users/MontyPython/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile');
$maxitems = 3; //set number of items to display
$items = array_slice($rss->items, 0, $maxitems);
?>


In order to embed a YouTube Flash movie we could use the nested objects method, so we have valid HTML, and include some appropriate alternative content (in case the Flash fails to load for some reason). To set this up for each item, all we need from the feed is the ID of the video.

If we examine the RSS feed itself, we find that the video ID is contained in the final part of the ‘link’ element. To extract it, we’ll need to use a tiny bit of PHP to break up the URL string.

Of course we need to repeat this for each item in the feed, so we set up a loop like this:


<ul>
<?php if (empty($items)) echo '<li>No items</li>';
else foreach ( $items as $item ) : ?>
<div>
<?php
$youtubeid = strchr($item['link'],'='); //split off the final bit of the URL beginning with '='
$youtubeid = substr($youtubeid,1); //remove that equals sign to get the video ID
//Now embed the flash:
?>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="265">
<param name="movie" value="http://www.youtube.com/v/<?php echo $youtubeid ?>&hl=en&fs=1" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/<?php echo $youtubeid ?>&hl=en&fs=1" width="320" height="265">
<!--<![endif]-->
<p><a href="http://www.youtube.com/v/<?php echo $youtubeid ?>">View movie&raquo;</a></p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</li>
<?php endforeach; ?>
</ul>

This method is pretty easy to adapt for any type of RSS feed you might want to use: Vimeo, Slideshare, Twitter, etc. Of course there are loads of WordPress plugins that can help you embed this stuff, but sometimes a plugin doesn’t give you exactly the output you need, and it’s helpful to be able to parse the feed yourself.

The basic idea behind composing to a vertical rhythm is to keep text lined up on an imaginary grid of evenly spaced horizontal lines all the way down the page. The effect is unconscious to the average reader but helps to make the layout of the page feel harmonious and restful.

Handily, the CSS property line-height can be set globally on the BODY element and inherited down through every other element to form the basis of our invisible grid (which I’ve made visible on my example). We also set a default font size in a similar way:

body {
font-family: Verdana, sans-serif;
font-size: 0.875em; /* set default font size to 14px */
line-height: 1.42857em; /* set global line height to 20px */
}

In order to maintain our grid, it is important that the margins relate to the line height rather than the font size. So we set margins on individual element types like this:

p { margin: 1.42857em 0; /* Set margins on paragraphs to 1 x line-height */ }

Of course, not all text on a page will be the same size, so we can vary this on individual element types (note that this doesn’t affect the line height, which retains its value as inherited from the body element). The important thing is to adjust the margins accordingly:

#sidebar p {
font-size: 0.85714em; /* reduce font-size to 12px for #sidebar */
margin: 1.6667em 0; /* adjust margins accordingly */
}

You’ll see there’s a bit of maths going on here. To work out a new font size in ems, simply divide the target pixel size by the default pixel size. So if the default font size is 14px and we want a pixel size of 12px, we set it to 12/14 = 0.8571. Then, remembering that margins relate to the font size, we scale them so they match the global line height. In this case we want a margin of 20px (to match our line height) so the calculation is 20/12 = 1.6667.

So far so good. The only other tricky bit comes if we want to set the margins on our headings so that they are closer to the text below them, and have a bigger margin above. This helps re-inforce the relationship between a section of text and its heading, and helps create more appropriate spacing between sections.

One way to achive this is to double the top margin for headings, but that can make the spacing pretty large. So often I prefer to move the headings down by a fraction of the global line height. The important thing here is to keep the overall rhythm going, even though the rhythm is broken for a particular heading (maybe we should call this ’syncopated headings’). To do this, just make sure that when you take something off the bottom margin, you add the same amount onto the top margin. That way the overall grid is maintained. We can use negative bottom margins to help with the interaction with the top margin on a following P element:

h2 {
font-size: 1.2857em; /* 18px */
margin: 1.6666em 0 -0.5556em; /* top margin: 30px, bottom margin: 10px */
}

And that’s basically it. You can see a live demo of this technique here. I’ve added the horizontal grid lines on with a background image, to help see how the spacing works.

To check who may be on your machine, open the Terminal and type ‘who’ (or to see who was on recently, type ‘last’).

To send everyone a message type:

echo ‘Stop sneaking around on my machine’ | wall

One of the new features I was glad to see was the ability to add tags to bookmarks. This is a much better way to organise bookmarks than a folder structure and it made me wonder about importing all my del.icio.us bookmarks into Firefox. Although the del.icio.us plugin for Firefox 3 is actually very good, I thought it might be nice to be able to use the native browser system for adding new ones. (Sadly you can’t use both at the same time at the moment, because installing the del.icio.us extension seems to cripple the Firefox ‘add bookmark’ function).

Annoyingly it turns out that, although you can export your bookmarks from del.icio.us with tags, importing them into Firefox strips off all the tag information. After some discussion on the Mozilla forum, someone came up with a ruby script for converting del.icio.us bookmarks into the required Firefox compatible format (including tags). And now my friend Zhang Xue from e-accent has helped me create a little online tool for doing the conversion, based on that original ruby script. Check it out at:

http://delicious.e-accent.com

The Gfaster search actually works well in practice. The only slight downside I’ve found is that many of the text-only pages are a little wide, resulting in quite small font-sizes on the iPhone, even in landscape orientation.

The app was built using Google’s Ajax Search API, and I had some invaluable help from a couple of the guys at the API Google Group. As usual, I was impressed by the community spirit of people willing to spend time to help each other out.

You can also find Gfaster listed on Apple’s Web App Directory.

For anyone giving this a try on their iPhone, let me know how you find it, and if you have any ideas for improving it. I should probably add pagination at the bottom, so when I get a moment I’ll do that.

Last weekend I was in Bristol trying to buy a PS3 game as a present for my brother-in-law. Since I know almost nothing about video games, for each game I saw in the shop I used my iPhone to read through a bunch of reviews. But game review sites tend to have a lot of graphics on them, and loading each page over the EDGE network was painfully slow. It was taking me ages to load each page before I could read the review.

Then I realised that Google has a cached version of each search result and that there is a link at the top of each cached page allowing you to load a text-only version. For the research I was doing, I didn’t matter whether that the results were pages cached from a few days ago: the reviews available would be largely the same.

This started me thinking. It turns out that you can get directly to the cached, text-only version of any page by using the cache keyword and the strip setting on a Google search URL. So for example:

http://google.com/search?q=cache:jackfruitdesign.com&strip=1

Gives you the cached, text-only version of my company homepage. But this doesn’t help much with my iPhone browsing, because it requires typing in each URL via the keyboard.

However, looking at the Google AJAX Search API, it turns out that each search result has a link to its cached version (obviously) and that it should be possible to simply add the strip=1 setting to the end of that URL. So it is feasible to create my own search page that uses the Google Search API, and use it to browse search results with images turned off, thus saving a lot of time over EDGE.

The Terms of Use for the API seem to be a bit restrictive when it comes to making any modifications of the results themselves, so legally this could be a slightly grey area. But this use does seem to be within the spirit of the Google Search API, so I can’t see there being too much of a problem. Seems like a nice project for a rainy day.

Putting a vCard on your website ought to be very straightforward: just place the file, with its .vcf extension, onto your web server and put a link to it on your contact page. But, like me, you may run into a problem here. When you click on the link in the web page, you may find that the browser opens the vCard file into the browser window, instead of starting a download

There are 2 different ways to solve this problem. The first one is to modify your web server so that it serves up the correct MIME type for the vCard file in the HTTP header. In Apache, for example, you could set this up in the main MIME type configuration file (if you have access to it) or you can set it in a local .htaccess file by adding the following line:

AddType text/x-vcard .vcf

See this article for more details.

The second way to approach the problem is to setup the HTTP headers dynamically. HTTP headers cannot be set on an HTML page of course: an HTML page will have its own headers. To manipulate the headers explicitly you will need to use a server-side scripting language such as PHP or ASP. A decent PHP script for doing this can be found at elouai.com/force-download.php. Note that it is a good idea to hardcode your vCard filename into the script itself to prevent hackers from hijacking the script.