I started looking for the exact negative right margin to add to every element in order to eliminate the whitespace. I couldn’t find it. Margin-right: -.3em; came very close but in some browsers it was -.268em and in others even less. There was no exact unit. After chatting with @kuvos I realized I was using the wrong font. So I tried Courier New.

To keep a long story short, the white space with Courier New is exactly 0.6em in all browsers. See the original test page and a simple layout test page and please test them in all your browsers.

Bugs and shortcomings

• The biggest bug, or flaw, of course is that Courier New is not installed on all operating systems. On my Kubuntu VM all test pages look horrible. Workaround seems to be to add ‘DejaVu Sans Mono’ to the font-stack which luckily has the same white space.
• This doesn’t work with some font-sizes since browsers have to round to a pixel. Choose an easy to use base font-size where 0.6em is equal to an exact amount of pixels for your layout to avoid this bug.
• I know that in IE8 with the original test there’s some kind of moiré effect going on. That doesn’t seem to happen with the layout page.
• Opera 10.5b on my Mac seems to consider the whitespace non-existent and renders the simple test page as if it’s a single word without spaces, so the elements don’t wrap. I think that’s a bug. But it’s actually a good test to check if the number is exact (-:
• IE7 and lower don’t understand display:inline-block; See the simple workarounds in the test pages.

Eliminating whitespace after display:inline-block elements is a post from: Nerd

<img src="image.png" alt="">

There are two exceptions.

1. The image is a link
2. Without the image the content would be incomplete

The first exception is easy. If an image is a link there must be an alt text and that text should describe the link, not the image (just like good link text).

The second one is easy too. If the content on the page can’t be understood without the image the image must have an alt text that describes what’s on this image. The alt-text should be a logical addition to the rest of the content. If you replace the image with the alt text it should still make sense. If it doesn’t rewrite it or remove it.

Please see the WHATWG for a more detailed and complete explanation of the art of good alt text

How to use the alt attribute (or alt text) is a post from: Nerd

Here’s the code. As always, suggestions are welcome.
javascript:(function(){
var%20a=document.getElementsByTagName('*');
l=a.length;
while(l--){ a[l].style.color='#666';a[l].style.background='#f5f5f5';}
document.getElementsByTagName('body')[0].style.background='#ebebeb';
})();

A bookmarklet for my wife is a post from: Nerd

This is the code

javascript:(function(){var%20a=document.getElementsByTagName('img');l=a.length;
while(l--){if(a[l].src=='http://l.yimg.com/g/images/spaceball.gif'){
a[l].style.display='none'}}})();
void((function()%7Bvar%20e=document.createElement('script');
e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://ffffound.com/bookmarklet.js');
document.body.appendChild(e)%7D)());

If you have any suggestions or additions for this code please let me know.
I only tested it on Firefox and Safari. It should work on other browsers. If not, let me know.

A Ffffound bookmarklet for Flickr is a post from: Nerd

Media Queries
Check this page on a wide screen and make it smaller. Then check it on your iPhone.
Check this page in a browser and on your iPhone
Resize this site in a modern browser. Also check it on your iPhone.

Subtle enhancements
See the little differences in the form on this page when you use Firefox and Safari (also hover over the inputs).
Check the top navigation in Opera (or IE) and then in Firefox or Safari.

Visible enhancements
Check the mouseover on the DVD’s first in Opera (or IE7+), then in Safari.
See the ‘highlights’ (every fourth article on the page is given a yellow background with CSS) and resize the window in Camino (or IE or another old browser) and then in Safari.

Extreme enhancements
Go click on the answer to the question Do websites need to be experienced exactly the same in every browser? in IE6, IE8, Opera, Firefox and Safari.

And by the way, if you know how to explain progressive enhancement in two sentences (not too long), elevator pitch style, as if you’re talking to an ignorant audience, please do so in the comments.

Progressive enhancement IRL is a post from: Nerd

Using visuals is easy on a photo site, not using letters is harder. Sure, just don’t use text in the body and you won’t see any letters but how do you make links when there’s no (alt) text? And what do you do with the title-tag when you think, like I do, that every page should have a unique title?

The solution was pretty easy. Every picture Kiki has taken with the iPhone has a unique file name, something like img_1234.jpg. We can remove the ‘IMG_’ and ‘.jpg’ parts since they are the same for every image, it’s the numbers that make all image names unique. I wrote a simple script that replaces every number with a symbol which (a) has an entity name, (b) looks simple, and (c) shows up in the title bar in Internet Explorer. Not all entities show up there, most are represented as a square. So now every page had a unique title of four symbols. Too short so I decided to mirror the string of symbols to make it longer. This is the PHP function I wrote, the array with the symbols is included so you don’t have to look for symbols that work the next time you need this.

function returnSymbols($image){
$huh = array("1","2","3","4","5","6","7","8","9","0","IMG_",".jpg");
$aha = array("‾","—","¨","⊕","¦", "◊","¤","°","·","…","","");
$nice = str_replace($huh, $aha, $image);
$boom = explode(';', $nice);
$ecin = $boom[3].';'.$boom[2].';'.$boom[1].';'.$boom[0].';';
return $ecin.$nice;
}


I also use this function to give every thumbnail a unique alt text. And this is what makes this site so special I think: it’s the first photo site that looks good in every browser, not only in graphical browsers, it even looks good in Lynx!

Now, does anybody know a way to get rid of the letters that show up in the address bar and the status bar?

A photo site that looks good in Lynx is a post from: Nerd

try
do shell script "curl www.apple.com"
on error
do shell script "killall name-of-this-script"
end try

Fill in the name of your Automator application and if there’s an error the script will terminate itself. This way you can build multiple checks. For instance I have another check that stops the automator workflow if a certain disk is not mounted. And suddenly Automator becomes a handy tool.

Abort an Automator workflow is a post from: Nerd

In order to make this work you need many high volume feeds on the same subject. What better place than Twitter for this purpose? I copypasted/wrote a simple script that finds all URL’s in a twitter feed, follows the 301 or 302 redirects until it gets the 200 header, places this URL in a new feed item.

You’ll need to install this php script somewhere on a server, optionally change some texts around line number 329 and then add this URL as a spark to Fever:

http://yourdomain.com/dir-of-choice/?feed=http://nerd.vasilis.nl/feed/

You should replace http://nerd.vasilis.nl/feed/ with the feed you really want to add.
Now if someone can write a bookmarklet that actually lists all linked feeds in a document and gives you the option to copy them, or directly submit them to fever, I’d be happy to post it here.

Go ahead and laugh at my code, I know it sucks. But let me know how to improve it, I’m willing to learn.

Using Twitter feeds to feed your Fever is a post from: Nerd

* {display:block;}

Or display inline, or table-cell or whatever. All elements, including title, style and head can be used for styling now. Have fun with it!

(I have only tested this on FF3.5 and Safari. I guess it works on more browsers).

Display everything is a post from: Nerd

<div style=”background:url(path/to/image-w100xh75.jpg) no-repeat 50% 50%;width:100px;height:100px;”></div>

Easy it is. Unless the usability expert comes knocking on your door. Background images don’t behave the same as normal images. In most browsers, for instance, you can’t easily download a background image by right clicking on it.

So you do want the background positioning but you also want some important behaviour of a normal image. Here it is: Centered images in the middle of a block with normal usability.

It does not work in fluid or flexible layouts of course. But it does work in all serious browsers and in IE7. Haven’t tested it in IE6 but there’s no reason it wouldn’t work there. I’m not sure if it creates a performance issue. The images are downloaded only one time, so that’s not an issue. The only problem might be double memory usage. I haven’t tested that.

Centered images in the middle of a block without (total) loss of usability is a post from: Nerd