Monthly Archives: November 2006

A Better IE6 PNG fix

I’ve been working with Pngs over the last few weeks because they just look so much dang better. But then I went to setup IE6 support and some of my quick-hacks I used. If you’re not aware, to use transparent pngs in IE6 you need to set them as the background of say a <div> or <span> and then apply a filter to it. If we were to apply it in css it would look like this:

.myPng{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/mysweet.png');
}

However, to use only css to do this we _need_ to know the height and width of the image, because the filter actually just sets the background image. There’s a few other png hacks out there but none that really worked for me for various reasons. What I needed was something that was fast, lightweight, easy to read, and I could call it if I was building an <img> tag in javascript. So I made this:


Global = {
FixPng: function( img ){
if(document.all){
img.parentNode.style.width = img.offsetWidth;
img.parentNode.style.height = img.offsetHeight;
img.parentNode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='"+ img.src +"')"
} else {
img.style.visibility = "visible"
}
}
}

The only catch is that this relies on three things:

1. The <img> tag must have style=”visibility:hidden”
2. There must be a <div> tag wrapping the <img> tag. (the <div> tag can have styling)
3. The FixPng is called at some point passing the <img> tag object

So a normal fix would look like this:


<div><img src="/images/mysweet.png" style="visibility:hidden;" OnLoad="Global.FixPng( this );" /></div>

That’s about it. I don’t think this is my last iteration of this fix, but it works 100% better for me since I can easily use this in html and in javascript. I hope it helps you.

note: I’ve heard that the <img> OnLoad doesn’t always fire in IE6 because of caching. There’s workarounds, but if you have any insight, please post.

.Net 3.0

“.Net 3.0?! Didn’t we just get 2.0?!” you ask. Well you’re right! less than a year ago microsoft released .net framework 2.0, so why would they make a major release like that in under a year, especially as microsoft! Aren’t they a slow sloth like creature that takes 6 years to release an operating system? You’re right, they are. But 3.0 isn’t exactly another “2.0″ nor is it another “1.0″ it’s something completely different.

<- Framework 3.0 in all it’s glory. What we’re looking at is microsoft’s 4 tiered architecture to unify the desktop to the browser.

Windows Presentation Foundation (WPL) is literally the “presentation” layer for microsoft’s new strategy. What we’ve got is an API that allows the programmer to use XAML to build the UI and visual aspects across platform.

Windows Communication Foundation (WCF) allows the developer to create data sources that either web or desktop applications can recieve updates, or push data to.

Windows Workflow Foundation (WF) funny thing is, this is really “WWF” or World Wrestling Foundation (now known as WWE), but I fHulk Hogan igure microsoft doesn’t want to be connected with hulk hogan. Anyway, WF is what allows the developer to basically offload the functionality of a UI to the a workhorse application. As a crzy programmer, this is really exciting. What we’re talking about it the ability to create a standalone UI that interacts with a multithreaded, remote (possibly), persistant (don’t worry about computer restarts), monitorable (you can monitor execution), dynamic updates (update workflow during execution) application. Likewow… If what microsoft is promising with the WF comes true, this could allow me to spend less time writing this myself (AJAX etc.) and get the job done sooner, and with better results. Crazy cool, like the hulk.

Windows CardSpace (WC) brings an “Identity Metasystem” to the table. This allows the developer to build a user system on top of a nice and neat API. It seems like you’ll have to take some leaps and bounds to become an “Identity Provider” but the details I’m reading are a little sketchy. We’ll have to follow up on this one.

So That’s the .net 3.0 framework. Not so much of an overall upgrade like 1.1 to 2.0 was, but a very interesting and provacative set of tools for developers to use. You can download the framework at microsoft’s site, or you can buy Windows Vista. It comes with that too. Anyway, I’m not sure when 3.0 stuff will creap into my releases, but I can tell you now, if everything works out like they say it will, it’s going to be an interesting 2007 (as if ’06 wasn’t web 2.0y enough).

note: now they just need to make .net cross platform :)

Agile Development and OOP

So, I’ve learned a lot over the last year about development in addition to being swept up into this stream of knowledge that’s being passed around (read – web 2.0). Anyway, I wanted to share a little bit about how I’ve been developing.

I think that if I looked back to what and how I wrote my code years ago I’d laugh my sockies off. Now, I know MOST programmers do this. We’re constant learners, always tweaking the way we do things. But with these new methods and ideologies it’s much different to look back on (recent) older code because I wasn’t doing anything SILLY back then, it was just _different_.

The best example I thought I could give you is this. After reviewing all the open source javascript libraries out there, I’ve gleaned a new way of writing javascript for my page. Take this for example:


DiverseSolutions.MyProject.Pages.Login = {
OnLoad: function(){
//do stuff
},
Tab: {
OnClick: function(){
//do stuff
},
OnMouseOver: function(){
//do stuff
}
}
}

So Basically what we have here is a page called “login” where I’ve got some stuff goin on. Generally I’ll have the “OnLoad” function bound to window.load like this:

YAHOO.util.Event.addListener(window, "load", DiverseSolutions.MyProject.Pages.Login.OnLoad, DiverseSolutions.MyProject.Pages.Login);

What we’re doing here is on window “load”, fire “OnLoad” with (the extra DS.MyProject.Pages.Login makes sure that OnLoad fires within the correct scope). What this kind of implementation gains me is the ability to 1. Quickly navigate through a javascript class (a major concern of mine) and 2. Be able to modify/consume my own and coworker’s javascript classes. This particular method is geared towards a specific page. If I was to create a re-usable class I would do something like this:


DiverseSolutions.MyProject.User = { };
DiverseSolutions.MyProject.User.prototype = {
UserID: null,
UserName: null,
Init: function( userid ) {
//do stuff
},
}

This allows me to be able to reuse a class I’ve made without the browser having to rebuild everything every time I initialize a new User. This is because I’ve implemented the object’s “prototype”.

Using javascript in an object oriented way allows me to work with “agility” (therefore the Agile Development). I can’t tell you how much faster javascript programming is now that I’m utilizing these new techniques. Additionally I don’t feel like as much of an r-tard when I look back on my old javascript work :).

note: what I didn’t include was how I setup the DiverseSolutions.MyProject.Pages namespace. I’ve “borrowed” how yahoo does their’s seen here.