Css Posts

I spent an evening adding 'progressive' loading of the title images to my blog.

The title images for this blog are 3840 × 2160 and a hefty ~650K each. That's entirely intentional; as a photographer I wanted them to look as sharp as possible and take advantage of high pixel density screens.

The only downside of hi-res photos is that even with a good internet connection, you can still see the photo loading as the browser reads the JPEG. It's visually jarring and way too reminiscent of the web, circa 2000s.

A reasonable solution is to first download a smaller lower-resolution version, then load the full resolution image on top of that. So the user sees something relatively quickly, without the visual contrast of an image loading on a blank background. continue reading…

The company I work for, 2Degrees, is looking for a front-end developer to join our team.

Are you a CSS monkey?

We need a CSS monkey with a good working knowledge of browser quirks and the ability to get even IE6 looking good (although you don't have to like it). It would help if you don't run away screaming from Javascript and can play well with the code monkeys.

More details are below. Email the address at the bottom of the job description, and mention this blog!

Would you like to do something genuinely useful with your client side development skills - UI, XHTML, CSS (JavaScript, AJAX)

2degrees is an exciting, fast-paced, well-funded Web2.0 environmental networking business based in Oxford. continue reading…

When writing the image wrapping script, I came across a difference between Firefox and Opera. Basically, when there are small floated divs in a vertical stack, the text to the right will be aligned to the topmost div in Firefox, even if the divs underneath extend farther than the topmost div. Opera handles this situation better and places the text after the maximum extents of the floated divs. Take the following HTML:

<div style="float:left;clear:left;width:100;height:8px;background-color:#55f;" ></div>

<div style="float:left;clear:left;width:120;height:8px;background-color:#66f;" ></div>

<div style="float:left;clear:left;width:140;height:8px;background-color:#77f;" ></div>

<div style="float:left;clear:left;width:160;height:8px;background-color:#88f;" ></div> continue reading…

I like the idea of tag-clouds and tags in general, but I had problems making them look good in becontrary.com. I experimented with changing the relative size and blending colors, as well as with the huge number of visual tweaks you can do with CSS, but the amorphous blob of words just didn't seem to fit with the nice neat columns I had. Until, that is, I sorted the tags by popularity, which made it a lot neater and enhanced the effect of blending the font size / color. I don't know why it didn't occur to me before. I don't see many sites doing this, most tag clouds are sorted alphabetically.

The image below shows a tag-cloud sorted by popularity (left) and just alphabetically (right). Which one do you think looks better?

(Click for a larger image.)