Should some links automatically open in a new tab/window, or should the user make the decision for themselves by ctrl-clicking, middle clicking, or right-clicking and choosing from a context menu?

Until recently I had preferred leaving it up to the user. But then I saw an estate agent repeatedly clicking links to properties, then using the back button and twiddling the javascript controls which filtered the properties to show the price range she was looking for. Evidently, she wasn't aware of how to use tabs or new windows. So maybe I've changed my mind. 

In any case, clients will often request — perfectly reasonably — that links to external sites open in new windows. So how to do this simply, reasonably semantically, gracefully and without being SEO-hostile?

Enter the “rel” atttribute of the link tag. 

For each link that you want to open in a new window, you can simply give it a rel attribute of external, like this:

<a href='//example.com/external-link' rel='external'>This opens in a new window</a>

All the popular WYSIWYG editors allow you to specify a rel attribute (usually labelling it 'relationship'). So far so simple. 

Now you need to tell the browser to open these links in a new window. Enter jQuery.

In your DOM-ready handler, or your onload handler, or at the bottom of your content, add this:

$("a[rel='external']").attr({
    target: "_blank",
    title: "Opens in a new window"
});

jQuery matches all links with a rel attribute of 'external', and adds a 'target' attribute of '_blank'. Old-school stuff, and for a while frowned upon, but now smiled upon again by HTML5. Still perfectly cromulent in old browsers too.

For good measure, I add a title which explains that the link will open in a new window, to try to minimise user-surprise. 

I said reasonably semantically, because the HTML specs say:

Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile to cite the conventions used to define the link types.

You of course are not going to waste the time and bandwith to do this, as browsers won't follow the profile.

Recently I've had to do a couple of projects which were hosted on bargain-basement FTP-only hosting.

I don't really have any problems keeping development versions up-to-date thanks to sitecopy, but when it comes to installing the final app, there are always things that really could do with a shell. Even if it's just unzipping files or rsyncing a dev directory to a live directory

There are plenty of scripts which allow you to run arbitrary commands on remote servers via php's system() function, but they were lacking options I'd like to see, mainly command and filename completion, and progressive download of script output. 

So I spent a few hours building something which would scratch that itch. The result is phpajaxshell.

Here's a quick video to show you how it works:

Back in 2006, I helped Crush with their new website. They wanted it to be nearly all images, as they had some great images to show and wanted to set them centre-stage.

We came up with the idea of filling the entire background with each of the images: the background would be the page. Of course, we would float some (hide-able) navigation and info over the top, but really it would just be images.

The background would have to scale, and show as much of the image as possible without borders.

This sounds a bit old-hat now: you see this everywhere. But at the time we hadn't seen it anywhere else. I am sure that we one of the first — if not the first — to do it. In fact, except for some Spanish guys who completely ripped off Crush's design, I didn't see it anywhere else for at least a year. Like all the best ideas, it's obvious in retrospect.

Fast-forward to 2011, and I'm doing these full-page backgrounds all the time (even one site with a full-page background video).

I've just finished a project with a background like this and here's how I did it for maximum speed and cross-platform support.

Many modern browsers have built-in support for background images like this, using the "background-size: cover" rule. You set a background image on the html element, position it as 'fixed' and it all should work, and super-fast.

html {
    background: url(/path/to/image) no-repeat top center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

It will work slightly differently on iOS: the image will cover the background of the page and scroll with the content. It'll still look good though!

Kewl. That'll work on Chrome, Safari, Firefox, iOS, Opera, Android.

It won't work on IE < 9, so for that I use Backstretch.

So putting it all together, it goes something like this:

CSS:

html {
    background: black url(/path/to/image) no-repeat top center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Now on DOM ready, check to see if we have support for "background-size: cover". If not, use backstretch.

Javascript

$(document).ready(function() {
    if(!supportsBGCover()) {
        $('html').css('background: black;');
        $.backstretch('/path/to/image', {
            speed: 400
        }); 
    }
});



function supportsBGCover() {
    // Does the browser support background: cover?
    var testEl = document.createElement('div');
    return (
        testEl.style['backgroundSize'] === "" ||
        testEl.style['webkitBackgroundSize'] === "" ||
        testEl.style['mozBackgroundSize'] === "" ||
        testEl.style['oBackgroundSize'] === ""
    );
}

Better still is to add a class to your html element, and remove that class before calling backstretch, but I'll leave that as an exercise for the reader.

One of the things I like most about the internet is the fact that anyone can join in. And so many of the pages I've enjoyed have been strictly amateur affairs. Pages created by ordinary people who just want to share their hobbies and interests, people want to help others out, or who just want to document some seemingly trivial part of their lives.

Many years ago I read David Fankhauser's cheese pages and thought to myself that I should try to give back to the internet in a similar way. Not for profit or kudos, but just to do at least the bare minimum to enrich our culture. I decided to create a few pages of my own on the various topics which interest me - and no doubt bore the pants off most people. But because of the power of search engines, no-one would be bothered by my little knocked-together pages: they would only see them if they happened to be searching for the subject. So no-one loses, and a small number of people may gain.

When you consider how long I've been kicking around the web, it's clear that I've not made enough of these pages. But I've made a few on such varied subjects as motorcycle and car maintenance, chalk grassland ecology (sadly lost in one of my many server moves), bar and restaurant reviews, and cooking.

My first was my bread page; thrown together in the old days, before the invention of blogs, Facebook and Firefox. It was hand-coded in a text editor, illustrated with not-very-good photos shot on actual film (gasp!). It gets about 3,500 page views per month, and is the top Google result for "french bread baguettes". I get some nice correspondence from people all round the world, but - you have to take the rough with the smooth - very occasionally I get someone sniping from the sidelines (eg. "Do you even know how to make bread?", "Those quantities are all wrong"). I'm delighted if the criticism is constructive and helps me improve the page - a long time ago someone pointed out a big mistake which I corrected immediately - but when someone simply criticises without offering anything positive, I shake my head in despair.

Why waste your time being nasty to someone you've never met, when you could spend that time creating something useful, or at least helping improve something that's already there?

Yesterday I received one of those sniping emails, and this one absolutely takes the biscuit.

You might tell the author of the article on French bread and baguettes, located on you web page //www.primesolid.com/chris/bread.html, that he (perhaps your own boss?=, Chris How?) would greatly show less of his functional illiteracy by using spell and grammar check! The number of spelling, grammatical, and sheer careless errors on the page is not only indicative of the author's basic illiteracy, it also reflects on the seeming don't-give-a-damn attitude of your company. That you allow such error-filled crap on your site also shows your own contempt for the correct usage of the English language and the proper observance of the rules of its usage. Yes, it is your webmaster's duty to insure that the pages that your web site presents to the world are error free, despite their sources. Your company should be ashamed of this glaringly apparent don't-give-a-damn Liberal attitude. Rest assured, I'll do my level best to in no way have truck with your company until you show considerable improvement in your attitude and web site content. A truly disgusted teacher. William Benedict

At first I thought it might be one of my friends trolling, but I've checked the headers and googled the email address and it's either genuine or it's really a first-class troll.

I've had another look at the bread page, and there are a few typos and one spelling mistake, but nothing that takes away from the sense of the content. The grammar is informal and speech-like, but not grossly incorrect if you ignore my propensity not to capitalise the proper adjective 'French'. The spelling is British English, of course. I'm not going to correct the typos, so you can make up your own minds.

By the way, Mr Benedict, you are confusing 'insure' with 'ensure'. I am truly disgusted. Oh, and Mr Benedict, I don't usually complain about split infinitives, but "to in no way have truck" is a pretty heinous example. I also feel, Mr Benedict, that capitalising 'liberal' implies that you know something about my political inclinations, which you don't. And do you mean "located on your web page"?

I had a quick google for the sender's email address and found only one result: a petition which has - so far - attracted a massive total of zero co-signatories.

I quote it here for your amusement:

In the best interests of Floridians and Florida, and of United States Citizens in general we feel that it is time to begin the recall procedings against Senator William Neslson, (D-FL). Senator Nelson has repeatedly shown his disinterest in and contempt for the recognition, respect of, and resolution to serve... the people of florida as their elected public servant in the U. S. Senate, choosing instead to use the office to promote his own Liberalistic opinions and views onto the peoples of Florida, and by extenuation, the people of the United States. We feel that right now, today, is the time to begin ridding this state and this country of the corrupt and cynical politicians who have chosen to serve their own interests over those of their constituents. Please sign this petition and please pass the word to any others you know of like mind. Thank you.

The meaning of the petition is perfectly clear, but pedants will surely have noticed these errors (and perhaps others):

1. procedings - Proceedings
2. Neslson - The man's name is Nelson
3. disinterest - This should be 'lack of interest', or perhaps 'uninterest'. Disinterest means something else. This solecism is so widespread that it has passed into common usage, so this is probably only of interest to the extremely pedantic.
4. ... - Aberant ellipsis.
5. florida - Proper noun, should be capitalised.
6. Liberalistic - Not a word. 'Liberal' is an adjective already.
7. extenuation - Extension. Extenuation means something else entirely.

I do indeed rest assured in the knowledge that Mr Benedict will have no truck with my company, and I hope that he can find more positive uses of his time in future.