Recently I was in the Market for a laptop.  My son is now 5 years old and he tends to be on the computer a fair bit.  My wife who had little experience with computers before I met her really enjoys her time on the computer now.  It was starting to become a bit of a conflict between them.  So I decided a laptop would probably be the best solution to the problem.

Now this is where many people go wrong.  They think they are going to use the computer for so much more than they really will.  I almost got caught in that trap.  The following is our situation.

I really wanted to buy a Dell Mini 9 and hack it to run OS X.  Now I had decided some time ago that the next computer I bought was going to run OS X.  Now the reason for this is 2 fold.

1.  I use OS X for work and it has a lot going for it.
2.  I bought a car with a manual transmission for my wife early in our relationship for the same reason we purchased a laptop with OS X.  I wanted her to know how to drive it.

So with that in mind I started looking at the Dell Mini 9.  It's quite an impressive little netbook, decent processor, RAM, and so on.  I thought "this is perfect" I can hack a copy of OS X on it and then she will have a perfect little machine for her purposes.

Then I started to think about reality.  Well what is she going to do with this computer?  Well I thought, surf the Internet and practice her hobby of writing.  Well is the Mini 9 the best computer for this purpose?

After a lot of thought on the matter I decided that the Mini 9 had one major problem.  It's Size.  Why is this a problem? Netbooks are so small and portable, they are perfect.  Well that might be true for a student who needs to pack a computer around with them to class to take notes, but for our purposes, the typing on the laptop would have been too difficult.  The keyboard and screensize on a more full featured computer would definetly suit us beter.

And this is where beleive so many people go wrong with their computer purchases.  They are looking too much and the great next technology and little on how they are going to use the computer.  My father purchased a $400 compaq laptop a couple years ago and it's still perfect to his needs, all he has ever done is read his email and use ebay.ca.  Simple needs simple computer.

I have seen far too many people purchase the fastest video card and only play WoW.  I've seen people purchase a quad core desktop and never encode a video.  I've seen people with 1 TB harddrives and only surf the Internet.  Well, before you make your next decision to purchase your next computer take a minute to think about what are you really going to use it for.

A side note on our purchase.  I did end up purchasing a Macbook Air for my wife.  Now everyone calls them overpriced and under powered, which I would agree with.  But I ended up purchasing a refurbished last generation one from the Apple Store Canada for 1099.99 and it was in incredible shape.  Not one scratch, and hasn't had a hiccup since we first started it up.

My wife finds it easy to type on, long battery life and generally a great computer.  For her purposes it more than fits her needs. Perhaps I bought above her needs, but I would prefer a reliable machine over dealing with second rate technical support.  And the lack of ports on the machine is only a bonus, becuase she would never use them anyway.

Why purchase something just becuase you might use it.  Purchase based on your real needs.

In the last year cbc.ca has launched a number of programs aimed squarely at the tech crowd.  This set in general tends to be a younger audience than the Vinyl Cafe listening set that the CBC is normally attributed to.

I'm talking about some very timely and poignant programs such as Spark and Search Engine, and the online radio station that is CBC Radio 3.  But beyond the new tech related programming they have also introduced Digg style article voting and a iPhone version of the site as well as podcasts on pretty much every program they have.

This all leads me to wonder, where did this come from.  Now I'm sure our conservative government didn't put them up to it. And I can't seem to find any information on just what spurred this on but I have to say I'm impressed.

I think the only way for Old Media to survive is to embrace the new media spectrum with open arms.  Radio 3 is a great example of putting new media to the test.  They have full on demand song streaming for most independent Canadian musicians and maintain a full schedule of original programing every week.   This is something that the more conservative laws of the US would most certainly want to shut down (and have).

I congratulate you CBC keep up the good work, I'll be sure to keep listening (online).

It happens to you too, even if you don't want to admit it.

This happened to me the other day actually, I mistakenly named a variable in my Javascript code "status".  This as it turns out was a big mistake.  The code I wrote ran fine in Firefox but when I flipped over to Internet Explorer to test nothing was working.  After an embarrassingly long time trying to find the error there it was, and to fix it all I had to do was change the variable name.

So in my function I had something like:

status=objectRef.innerHTML;

The problem is for some unknown and seemingly unfixed reason Internet Explorer references the variable status over to the window.status object.  Window.status is the text that displays in the status area at the bottom of your browser.  So if you set the variable status to a value in side your function the status area in your browser changes as well.

Now I could understand if this was just another IE6 browser quirk, but IE7 is affected as well. I haven't tested this on IE8 but this could be a problem here too.

It makes we wonder how many other keywords could be mapping to other place in the DOM.  Perhaps I will do some testing and check back in another post.  For now I will leave you with some example code, so go ahead and fire up that rusty IE6 or IE7 and I'll show you a neat trick.

 
<script>
	function statusTest(){
		obj=document.getElementById("mystatus");
		status=obj.innerHTML;
		alert("Now look at your status bar");
	}
</script>
 

 
<div id="mystatus" style='display:none'>I shouldn't be in your status bar should I?</div>
 
<a href='#' onclick='statusTest();return false;'>Prove my Point</a>
 

Try it out...

Prove my Point

So lesson learned always name your variables using detailed naming conventions.

If you want to read more about PNG's and IE6 read this post.

Instead I would like to show a technique that I have used recently to create dynamic interfaces using a minimal set of graphic files.

Here is the problem I'm trying to solve.  I have a site that has a wonderful gradient Menu bar/ Nav Panel/ Box/ whatever that needs to change color or have multiple colors.  Now what you could do is make a bunch of different back grounds for each color you want or (my technique) have a transparent PNG cover the solid CSS based background color and simply change the color in CSS to match.

Here is an example of what a typical transparent nav bar will look like...

In black..

In Blue...

In Yellow...

In Purple...

The only thing different in these examples is the Color code in the CSS

The first step in this process is to create the PNG file.  This is actually harder than you may think.  I use fireworks for my graphic design needs so I wont give you specifics but the technique should be similar in all graphics programs.

What you need to do is create a background image that is the same height as the nav bar you want to make. In this case the file I created is 1024 x 30 pixels.  The important part is not the size make sure you set your background to be transparent, not a solid color.

Next I make a layered background box so I can see what the gradient will look like. Then create a white box and apply a gradient to it.  You will want to adjust the opacity of the gradient at different sections to change the look, do not simply choose the color you want it to fade to.  So at every point in your gradient you should have the SAME color only different opacities. In my example the top of the transparency layer is 70% and by the middle of the graphic the opacity is 0%.

Next we have to code it in HTML and CSS.  Of course this would be a decidedly simpler process if you didn't have to account for IE6, but we still do so here it is.

HTML

 
<div id="baseLayer" style="background-color:#000000;">
<div id="transparentLayer">
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
</div>
</div>
 

CSS

 
#baseLayer{
position:relative;
width:800px;
height:30px;
}
 
#transparentLayer{
position:absolute;
top:0px;
left: 0px;
width:800px;
height:30px;
background-image:url('/images/transparentPNG.png');
}
 

Now the hack for IE6

 
* html #transparentLayer{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/transparentPNG.png', sizingMethod='scale');
 
}
 

Now I only showed you examples of the code that outlines the technique. More css was required to make this example play nice. Please feel free to examine the full CSS for my examples above, also go ahead and download the transparent PNG. Looking at it is probably much simpler than trying to explain what I did in words.

I hope you enjoyed my first post. Although I wont be posting often, when I do my intentions are for it to be significant ones.