Archive for the ‘Uncategorized’ Category

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?