SalientPoint

The hype is on for lightweight “Javascript in the server” alternatives to the proven Java J2EE and LAMP stacks. Even last year’s cool Ruby/Rails-style web frameworks are being dissed by the Node.js crowd. Is this where web development is going or is it just a hype bubble? Presumably thousands of startups are already all-in on server-side Javascript and we’re looking forward to some real-world learnings and comparisons. Meanwhile we’re left guessing how this will all play out.

Is Node.js a toy for script kids who don’t understand server programming or a real web application server framework? The scalability debate rages across the web (An entertaining example: Node.js is cancer), but it seems clear that, even though hosted solutions might provide pieces such as monitoring, security and scalability the missing Node.js on its own can’t replace established web application infrastructure.

Prior to CSS3 there was no way to stretch a background image, which means that as of this writing there is no way (that we know of) of doing this in a reasonably browser-compatible manner. For modern browsers the solution is to use and size an tag. However, pre-IE7 Internet Explorer browsers don’t support alpha transparency.

The work-around: the AlphaImageLoader filter, can only be applied to background images an not to tags. Curiously however, the AlphaImageLoader does support transparency through a parameter. This fact proved crucial in our solution.

So what to do if you need to use alpha-blended, stretched PNG images across common browsers (including IE 6)? We came up with a solution where we conditionally generate special markup for IE taking advantage of the ability to specify transparency of the image loaded using AlphaImageLoader, and the fact that it can be made to stretch with the surrounding element.

Thus we end up with:

For IE 6 and older:

Style:

.stretchedPngIE {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = '/path/to/our/stretched.png', sizingMethod = 'scale' );
  background-image: url(transparent_1x1.gif);
}

Markup:

<div class="stretchedPngIE" style="height:42px; width:42px;">

For other browsers:

<img src="/path/to/our/stretched.png"  style="height:42px; width:42px;"/>

There are hopefully less painful ways of doing this? If you know of a better way (aside from the obvious alert("Upgrade your browser!") please post comment or link.