Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Past Blogs

IE and the AlphaImageLoader for .PNGs.

4.30.2007

How a .PNG with Alpha Transparency is rendered in IE6 With all of the useful features available in .PNGs, you might wonder why they aren't used more frequently on the web. This is largely because the .PNG support for IE6 (surprise!) isn't quite up to snuff. IE6 can't natively handle the alpha-transparencies (that smoothing effect) in .PNGs. Instead, IE will render your beautiful images as shown to the right, with a light blue background behind any transparent pixels if alpha-transparencies are used. (IE6 can handle opaque & fully transparent pixels (the same kind you get in .GIFs) in .PNGs just fine.)

So, what can you do? You can use the popular alpha channel loader JavaScript. It does get the job done on our volunteer goomba here. But, there are many problems with this method. First off, it relies on JavaScript being available, and it only adds enables the correct display in IE6 and IE5.5. Second, since it's proprietary IE code, no other browsers can read it, and they'll just show an empty box with a white dashed border instead of Mr. Goomba. (You could use conditional comments and JavaScript to feed a solution to IE.)

Home > Portfolio > CSS

But see here what happens as I try to use this solution in practice. I have a small pin image that I used as a background for breadcrumbs. I really need the image to appear once on the right side of some text that's floating right. But it stretches to fill the height & width of the div that's filled by the crumbs.

Home > Portfolio > CSS

No problem, right? Just add another (non-semantic) div (red dashed border this time) to surround the AlphaLoader div. But I've got to make the AlphaLoader div an inline element to make the pin appear on the same line as the text, and then the image disappears.

Our IE / Alpha .PNGs saga continues next time, as we test more exotic solutions.

(Not Quite) PNG-Tastic!

4.29.2007

For my new design of Pew Pew Laser Blog, I went for all .PNG images. I did so mainly to save myself a lot of work recreating .GIF after .GIF when changing the background colors of elements. The new hotness of the .PNG format is that it can have transparencies of varying degrees; for example, an pixel can be grey with a 50% transparency value. This gives us awesome and easy shading, without any halos or jaggies or sharp edges on a properly created .PNG.

Note that I said 'properly created .PNGs'. The husband spend a couple hours helping me figure out why the shadowed part of my logo looked jaggy in IE7 and Safari, though it looked fine in Firefox and Opera. In the end, it was because I had left the background purple in the image. This meant that the shadow was tied to that purple. When viewed in IE7 or Safari, the jaggies appeared because the shadowed-purple didn't match the actual purple of the page. (This may be due to the .PNG gamma correction effect.) In any case, we were able to resolve the issue by deleting the background purple layer from the .PSD, and allowing the shadow to float freely.

This difficulty overcome, I do thing .PNGs are the right way to go. Historically, .PNGs file sizes were quite large. But you can squeeze a few KB out of your images by using the PNGCrusher utility. I even set it up as a right-click option using Neil Turner's nifty instructions for doing so. I was able to shave 5% of the file size off my horking header images; which I'd originally created using Photoshop CS2's Save for Web feature.

Free At Last.

4.26.2007

Oh-ho! "What's this?" you say. "Just a little bitty site redesign?"

Nay! It is a complete design re-architecture! Look at the source and see all new code, with nary a table in sight. Observe the amazing elastic layout, with heavy use of those exotic ems in the CSS. Experience the subtly improved pictures page. Marvel at the beautiful png-tastic images!

I also re-did many of the kludgiest backend PHP for the site. But you can't see any of that, so you'll just have to trust me.

If you'd like to get your hands on some of the awesome icons I've used here, head over to IconBuffet and sign up the club. C'mon and do it. Neat graphics for you, and I get extra bonus geek points. Wouldn't you like these pirate icons? You'll need them in September...

Amsterdam High Seas by IconBuffet

Practice Makes Perfect.

4.21.2007

It's really amazing how easy it is to forget something if you haven't practiced it in a while. Last week, I was working on a PHP function for work. For about 45 minutes I tried to figure out how to get the entire query string from a URL. Then I remembered that the query string WAS the entire $_GET array! D'oh! And last month, I kept trying to do subtract 7 days from a variable in JavaScript, when all I really needed to do was a little modulus arithmetic. I was embarrassed.

Skagit Valley Tulips If you head over to the pictures, you can see the tulip pictures I took last week.

Soccer Suds, Taxes and Tulips.

4.16.2007

Good grief, where is that husband? He must have won his soccer game, and is having a celebratory beer. No worries. I'll just write some stuff until he gets back.

I finished the taxes over the weekend. Surprise surprise! Did you know that there's no need to file Washington state taxes, since we've got the accursed sales tax instead? It sure explains why we had so much trouble finding a version of Tax Cut that included a state program.

We went to the Tulip Festival in Skagit Valley on Sunday. It was beautiful, and we each took many many pictures. Some of mine came out pretty good, so I'll post those later in the week. We were worried about getting rained on, but it was sunny the whole time. So much so that I got a bit of a sunburn on my face. Note to self: I must wear a hat.

Lastly, if I still haven't sold you on Orneryboy, check this out.

Super Paper Mario.

4.15.2007

For those of you who have Wiis, you must know that Super Paper Mario is awesome. I bought it on Saturday using some leftover Christmas cash, and I thought you should know. The graphics aren't awe-inspiring - but they're clean and they set the appropriate mood. It controls effortlessly on the Wiimote, including the motion-sensing capabilites thus far. It is true that it doesn't have the RPG emphasis that Paper Mario: The Thousand Year Door had, but I'm just not missing that aspect of the game. So, I heartily endorse the new Paper Mario. Now I just need to know if that Puzzle Quest game is any good...

Water is Treacherous.

4.9.2007

The hubby and I drove down to Portland this weekend to visit my family for Easter. He'd taken the first shift, so I took over the driving duties in Centralia. Having taken a nap on the way down, and picked up a delightful fresh strawberry milkshake at the Burgerville, I was well rested and alert. The rain kept varying between the showers and deluges that are typical of our beloved Pacific Northwest. During one such deluge near Kalama, I saw the black car shoot through the grassy center median, driving into the oncoming traffic, and moving far too fast to be a police car starting from a dead stop. The sporty black sedan hit a red pickup truck that had been traveling in the right lane, and both cars bounced apart. The red truck spun around and came to rest near the right side shoulder, and the black sedan also spun and stopped across the left and middle lanes of traffic, about a couple dozen yards in front of me. I stomped on the brakes, steered straight, and stopped our Forester at least 10 feet in front of the smashed sedan. The other southbound I-5 traffic also managed to stop without incident, though I was briefly worried about the SUV behind us.

Both damaged cars will surely be totaled for frame damage, but the passengers appeared unhurt. The driver of the black sporty sedan hopped right out and announced that his car had spun out. (I suspect he'd hydroplaned due to too high speed in the pouring rain.) The older couple in the red truck looked unhurt and made eye contact, and were using their cellphone. The cars really only impacted on their corners, and glanced off each other instead of smashing head on. But it's worth a lot these days to have a a safe, modern car with solid metal frames and airbags.

Several things went well for us in these few fateful seconds, and I urge you to reflect upon them.

Nudity & Distractions.

4.5.2007

Today is CSS Naked Day. I didn't go naked, because this site is far too constrained by it's table design. Fear not, change is coming.

I have found a new web-comic - OrneryBoy. It speaks to me on many levels - weekday mornings, Halloween, the delights of a chocolate holiday, and coed competitive gaming. I will be having fun catching up on this.

Spring in Seattle.

4.3.2007

Pink Blossoms on the Harbor Steps I do like spring in the northwest. Last month, pink exploded all over Seattle, in the form of cherry blossoms. I took a few pictures of the blossoming trees on the Harbor Steps, and one came out nicely. Tulips are appearing everywhere, and I can get some pretty ones for the apartment down at Pike Place Market. There's simultaneous rain and sun everywhere, and that means rainbows! Maybe Seattle isn't so bad after all.

We made an offer on a townhouse today, so we'll see what happens. We offered a pretty low price, but the HOA fees are really outrageous.

Last Month

Next Month