Bloggy Hell

At Bam, I’ve had a second 19″ Dell LCD sitting idle on my desk for a while. Why has it been idle? Because the video card on my desktop doesn’t support multiple monitors. This was quite depressing as I love dual monitors, but I didn’t have time to find a card that would work for me (My box is half height, and only supports PCI express severely limiting my card choices).

Then I discovered a little piece of software called Maxivista, which allows you to use a second computer as a virtual video card. It just so happens that my laptop supports an additional monitor as well as the built in laptop and since I take it to work most days it was a perfect candidate for the Maxivista treatment. By downloading the Pro version (about $50AU) I managed to set up THREE, count them THREE monitors! The image below shows my setup:

The way it works is simple, yet ingenious - on the host (or server) you install the “virtual video cards”, which is just a software driver. The drivers appear to the host as a normal video card. You need to start a virtual card for each virtual monitor you want to support (I setup two). Then on the client/s you install a small app, which receives the video signal. I run two different instances of the software on my laptop, so I get two different monitors.

The lag is surprisingly low! For day-to-day development work, you don’t notice it at all. I was watching a YouTube video on the second monitor today and it was pretty smooth, although you wouldn’t be able to watch a DVD or play a game, but it is still pretty darn impressive!
I’d also recommend installing UltraMon - it allows you to add a discrete taskbar to each window, which makes organising you desktop even easier. I have my IDE in one window, a test browser in my second and my “Getting stuff done” stuff (time tracking, task lists etc) on my third. It is panoramic bliss!

First of all, I know that IE 7 supports transparent PNGs out of the box, but it would seem the uptake isn’t as grand as everyone was hoping - out of readers of Bloggy Hell this month, 23% viewed with IE 6 and 2% viewed with IE 7 and the 88 Miles statistics show something pretty similar, so IE 6 support is still a requirement for most web developers.

Background:

PNGs support 128bit transparency, meaning you can using many levels of opaqueness, avoiding ugly “jaggies” that are so common with GIF images. GIFs only support 1 bit, which means only one colour can be transparent - too bad if you are anti-aliasing the image.

However, Internet Explorer 6 doesn’t support transparency without some IE only hacks. Most versions of the hack presented use inline CSS styles or JavaScript, which I always found as an unacceptable solution. The following works with foreground and background images (mostly), doesn’t use JavaScript, allows you to separate you presentation (CSS), behaviour (JavaScript) and content layers (HTML) and is standards compliant!.

1. Assign a class or id name to all the PNG images you need to convert.

<img src="my_png.png" alt="This image should be transparent" class="my_png" />

2. Create a separate IE only stylesheet.

1
2
3
4
5
6

img.my_png {
    width: 16px;
    height: 16px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_png.png');
    padding-left: 16px;
}

The crazy, non-standard filter command does the magic - it tells IE that the image needs to be made transparent. There are a couple of notes here though, you MUST include a width and height that matches the source image. It doesn’t matter if you include it in the html tag or the CSS - I put it in the CSS because that is where I think it belongs. The padding-left must be the same as the width - this is REALLY important. What this hack does is overlay the “new” png over the top of the old one, without using padding-left to push the old image out of the way, you would see the old image underneath the new image, rendering the effect useless. By moving it over out of view, you will only be able to see the tranparent PNG.

3. Drop in the IE only conditional statement

<!--[if lt IE 7]>

<link href="ie.css" media="screen" rel="Stylesheet" type="text/css"></link>
< ![endif]-->

This is pretty standard - ie.css is the stylesheet we just created.

As I mentioned at the beginning, this technique works for background images too, except for one small issue - if the element with the background image has text in it, the text disappears, because of the padding-left modifier. It is actually a really simple fix, just change the CSS to say the following:

1
2
3
4
5
6

img.my_png {
    width: 16px;
    height: 16px;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_png.png');
}

This will turn off the non-transparent background PNG and replace it with the transparent version. It won’t work with a repeating background image though, but hey, you can’t have it all. If you want to see this method in action, go to 88 Miles - all of the buttons use it.

I was just logging into my online banking system and was confronted with with error message - besides the typo (possbile?) I find it interesting that there is a button inviting you to login in to a system that is un-available… and yes you can proceed to the login window, and it isn’t until you enter your details again before you get a definitive error message. A good example of what NOT to do.

I hope that the first week of 2007 has been fruitful - unfortunately I got hit with a stomach bug late in the week which put the brakes on to my running leap into the year. Oh well, there is always next week

I thought I might list some of the things I’m going to do this year - I refuse to call them resolutions, but I guess that is what they are. 2006 was a busy year with me leaving freelancing and starting work at Bam, starting work on 88 Miles and becoming chairperson of the WA Web Awards, but I can feel an even busier year coming up.

First on the list is getting a production version of my new project out. I used the time off over Christmas to build the footings for it so now I’m committed to getting something out. I’m hoping to make an announcement about what it is, what it does and how it does it sometime towards the end of the month. I can tell you that is is built on Rails (naturally) and it targeted at web designers and developers, and will be something they will on sell to their clients.
I also want to continue work on 88 Miles. The number of sign-ups have really ramped up in the last couple of months of so, and I’ve been getting really good feedback. I’ve also managed to find a way to integrate with the time tracking system at work, so I’m back to using it constantly which puts me back in the drivers seat.

The WA Web Awards are back again this year, after a really successful event last year, the committee had a big job ahead of them again this year. I plan to use last years experience to really refine the process - having volunteers means time is valuable and wasting it can’t be an option.

I’m the Events officer for AWIA (Formerly Port 80) this year, and I’ve got big plans. I want to instigate quarterly local speaking events where local talent gets a change to talk about what they are doing in a similar vein to Sydney’s webjam. This would be on top of the traditional Port80 speaking events: Ideas4 and Ideas5. If you are from Perth, passionate about what you do and want to tell the world (or at least a group of people in a pub) about it, please drop me a line.
I’m going to find time to go out and see my friends again - I’ve been particularly piss-poor in this area in ‘06 - sorry guys.

And lastly, spend as much time as possible with my girlfriend, Giovanna - even though we live together, it is harder to find us time than you think

Phew! That’s a lot of stuff. I need a nanna nap just reading it.