NERD!

Equal height boxes with flexible widths

My design buddies @work came up with one of the most complex layouts I ever had to build. You could desribe it as an elastic layout with boxes with a flexible width which should have the same height as it’s siblings. With rounded corners and dropshadows offcourse. But that would be too easy a description. There are templates with 2, 3 and 4 boxes next to each other and these boxes can be contained within containers with different widths. A cynic would ask me why I didn’t use tables and he would be right. It might have saved me a lot a hassle. But forget about tables.

Ok, no tables

Using position:absolute to avoid inline styles

A few weeks ago I upgraded an old Pivot weblog to the latest version of WordPress, a weblog system which is a bit more flexible, I think. One of the things I dislike though is some of the HTML that comes out of it’s core functions. For example an image with a caption.

The known problem with an image with a caption below it is that it is impossible to make the text as wide as the image without setting the width of the image on the caption.
This is fascinating!

A better small URL generator: fitting URL

The last few weeks I used my small URL generator a lot. I even bought a new, smaller, domain for it to make it a bit more useful. For Twitter it’s perfect. But when using it in e-mails I got some complaints. People are happy that all links are clickable (some mail programs cut of every line after an x-amount of characters, leaving many long URL’s unclickable) but there was no information about the link left in the new, small URL. So I decided to change the script.

Read how to make your URL’s fit your needs

HTML 5

I switched to HTML 5. A nerd blog should have a nerdy doctype. There’s not much to say about it. I replaced the first div in the old HTML with a new element called header, I replaced the following divs which are direct children of the body with the new element section, I replaced the div that was a child of the section with the element article and replaced the last div of the page with the element nav. I could have chosen the element footer, but I think nav describes its purpose better. I don’t have an aside so I don’t need that element.

Some details about HTML 5

I need Zooom

It’s one of those apps you forget you have installed. You only remember you use it when you work on a computer that doesn’t have it. Zooom does two things. It lets you resize a window without the need to point exactly to that small square in the right bottom corner. And it lets you drag your windows without the need to point exactly to the title bar. You need it too.

Creating my own small URL generator

UPDATE: check out the extended version of this script: fitting URL.

Since I started twittering a few days ago, and Twitter allows just a few letters for each tweet, the need arose for a small URL generator, a service that replaces a long URL (like http://vasilis.nl/fotos/digitaal/kiki/kiki-2009/in-de-hangmat-05-09018.jpg/) with a small one (like http://vasilis.nl/a/6). I tried two services (tinyurl.com and tr.im) but both didn’t work as I wanted them to work, which is strange because I don’t want much. Fortunately I’m a nerd so I just wrote my own short URL service. I’ll explain what I did so you don’t have to figure out how to write your own. The other reason I write this blogpost is that I hope somebody will explain me if things can be done easier or more secure: I’m just googling for solutions, I’m no programmer. And I really hope that somebody with a math knob can help me count with the base 64 system I choose to use.

More on making your own tinyurl generator