NERD!

Eliminating whitespace after display:inline-block elements

I read an article on Matt Wilcox’ blog about the whitespace adjacent to every inline-block element. I wondered if this whitespace has a default size. At first it looked like there’s no default size. I started some tests with a lot of inline-block elements, all with different letters and symbols in them. I contained these elements inside four containers, all with different font sizes. Here’s the first test I did.

More tests that don’t fail to follow

How to use the alt attribute (or alt text)

In most cases the alt attribute should be empty.

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

There are two exceptions.

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

orly?

A bookmarklet for my wife

Just a few minutes ago my wife complained about websites with white text on a black background. For her I made this simple grey-on-white bookmarklet which sets all backgrounds to #f5f5f5 and all colors to #666. The background of the body is set to #ebebeb to preserve some of the shapes of the original site (the real reason is I wanted to use #f5f5f5, a key I used a lot when I had a windows PC and #ebebeb, the initials of a good friend).

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 Ffffound bookmarklet for Flickr

Some pictures on Flickr are harder to bookmark on Ffffound than others. For some reason Flickr puts a transparent gif on top of the image. If you try to bookmark this image to Ffffound you actually bookmark the empty gif. I wrote a bookmarklet to hide that gif. Drag this link, My Ffffound, to your bookmark bar and hit it instead of the regular Ffffound bookmarklet, it just works like the original bookmarklet on other sites.

Details please

Progressive enhancement IRL

Today I gave a presentation about progressive enhancement to some colleagues of mine. Instead of posting the presentation I’ll just post the URL’s and the different browsers to check them in. Please leave additional examples of enhanced sites in the comments.

Give it to me!

A photo site that looks good in Lynx

My one and a half year old daughter started making things. And when kids start making things parents start collecting them. I don’t collect her drawings yet but, much easier, I collect the pictures she takes with my wife’s iPhone. Now I didn’t want to make a virtual shoe box on my own computer which is put away to collect dust and never to be seen again, no, I decided to make a website. But how do you make a website for a one and a half year old kid? Work with visuals of course, that’s easy. And don’t use letters or numbers because she won’t understand them so why bother?

What’s that got to do with Lynx?

Abort an Automator workflow

I wanted to abort an OSX Automator workflow if there’s no internet connection. That function does not exist. It can be done by inserting the action Run Applescript though:

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.

Using Twitter feeds to feed your Fever

Shaun Inman redefined the feed reader with his brilliant application Fever. The best thing about it, apart from the brilliant user interface, the beautiful layout, the usability, the feel of a native app, is the fact that you can actually use high volume feeds without reading them. The idea is that a link gets more interesting when more feeds link to it. So fever has this section called Heat where all these interesting articles are shown.
Get on with it!

Display everything

I just discovered a nice feature for minimalist frontend developers. You can use all elements with content for styling simply by using

* {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).

Centered images in the middle of a block without (total) loss of usability

The designer wants all images to be centered inside a square box with defined dimensions. The longest side of each image is the same length as this dimension but the smaller side is unknown and variable. Easy you say.

<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.