Life is grand

Image concatenation has been around for awhile now but it is nice to have a fully explained article aimed at how to use the technique in web interfaces.

My question though is; favicons. Those annoying 16×16 icons browsers show in the address bar and next to bookmarks.

They are wonderful to see but as a developer of a web interface that wants to use them I can tell you they are highly annoying to support.

Does anyone have a good idea on how to use image concatenation for favicons? Is it workable?

There is some buzz about the possibility, chance and point of open sourcing Flash.

As a web-developer I tend not to use Flash. If I can implement a feature without Flash I will. If I have to use Flash I keep it minimal. If people show me full-Flash apps. I want to know why they did it in Flash. The only two places Flash truly shines in my opinion are; as a video player in web-pages ala YouTube and for small, tricky, slick controls that are too finicky to do well in JavaScript/CSS/HTML.

Why do I try not to use Flash? Because I like text and am not a binary fan. Images (JPEG, GIF and PNG) are binary but they aren’t source. They aren’t applications, they don’t contain logic or have functionality like an SWF can. I can’t view-source on an SWF easily, I can’t hack a few characters, rerun it and see the change. I can’t easily mold an existing Flash into something else.

For me this is what CSS, HTML and JavaScript do so well. You can hack them, save them, view source, pipe them through a cheese grater and get something usable on the other end. Anything you see done with them you can figure out.

So open sourcing Flash isn’t going to make me sing hallelujah and start using it. A pity but there you go.

(As for Apollo I am really, really happy it isn’t a Flash container. It is a web container, it can house CSS, JavaScript and HTML without an ounce of Flash in sight.)

This might seem a bit “me too” but it would seem all the Ruby on Rails developers on Mac who use TextMate actually have a clue. This is a really good text editor. Good enough that I just paid €39 for it. The “project” fly-out is simple and brilliant, no meta project files or strange directory structure requirements; it just shows everything under the directory you specify. The bundles work well too providing shortcuts and intelligent text handling for a variety of tasks e.g. HTML, CSS and Ruby on Rails.

All in all a great tool, go give it a try.

I really am a card carrying Rails on Mac user now.

Snook has some good tips for coding and managing CSS. Here are my thoughts on each.

px for font sizes

Absolutely. I’ve tried ems and they are more hassle than they are worth. Percentages are too finicky and small/medium/large/etc. is too imprecise. Offer people alternate stylesheets with bigger font-sizes for accessibility in browsers like IE6 that don’t resize px sized fonts.

CSS declarations on one line

I understand Snook’s point but my text-editor supports code-collapsing and putting it all on one line makes it hard to decipher complex styles. Plus I usually use find to navigate my CSS.

Blocking the Styles

Very good advice. I also comment the blocks which makes a find operation really simple. Snook’s comment on not overriding browser defaults is also a good one.

Browser Support

Sadly I just can’t do this. Too many IE5.5 users still on my logs. Though I find stopping at that level makes for only a few cross-browser issues anyway.

Allow Block Elements to Fill Their Space Naturally

Amen to that. Often you don’t even have to think to do this, it is a by product of good HTML structure in many cases.

Use CSS Shorthand

I am mixed on this. Margin absolutely should be short-hand but font or background I often break up. Too many times has a URL problem broken the rest of a background declaration. I think that if you put everything on one line then it is easier to use shorthand.

Avoid Unnecessary Selectors

Definitley. Especially avoid div#content and use #content. It lets you swap to different elements and allows multiple uses of a class on different elements.

I only just realised today that the vertical-align CSS property can take integers and not just enums. Up till now I had only been using middle, top, bottom etc. as valid values. Now I realise you can use -3px or whatever value you need. Handy.

Websites As Graphs is an interesting little bit of Java code which visually renders the structure of a website. It shows you your site’s links, divs, tables, images and other tags in a free-tree like structure.

At first it is just pretty but after some thought it proves to be useful too. For instance my site above shows a big cluster of gray and blue which correlates to the category/tag links in my sidebar. You can use this visual rendering to cut down on the complexity of your HTML structure.

Check out the websitesasgraphs tag on Flickr for many more examples.