dangerouslyawesome

remember how i said my png transparency solution relied on deconcept’s swfobject? We noticed that whenever you clicked a link that left a page, it seemed that every embedded flash object was dumped from the page, collapsing holes and causing everything to look screwy for a second before the page switched.

for the record, this can be fixed by following these directions: http://lists.deconcept.com/pipermail/swfobject-deconcept.com/2006-August/001407.html

Or, just comment out these lines from the swfobject.swf if (typeof window.onbeforeunload == 'function') {
var oldBeforeUnload = window.onbeforeunload;
window.onbeforeunload = function() {
deconcept.SWFObjectUtil.cleanupSWFs();
oldBeforeUnload();
}
} else {
window.onbeforeunload = deconcept.SWFObjectUtil.cleanupSWFs;
}


edit: for crying out loud, why dont any of my wordpress plugins for code formatting work???

edit 2:

Geoff at Deconcpet wrote me about this, and it was definitely a known issue. I’m previewing the next release of swfobject, which seems to have the problem locked down, although, i dont have the ability to test the main function of the cause of the bug: the release of swf’s with streaming content. I should have that soon, for testing, and will follow up a report on that.

Thanks, Geoff. You (and swfobject) are awesome.

I’ve been disappointed by the lack of thoughtfulness and the general berevity of articles on A List Apart for…well…coming up on a year. Things have been ramping up recently, and have finally peaked at with Ben Henick’s 12 Lessons for Those Afraid of CSS and Standards. What a great, thoughtful, and intelligently written piece.

One of my favorites quote (and point) is: Lesson No. 4 (with thanks to Antoine de Saint-Exupéry): Perfection is not when there’s nothing to add, but when there’s nothing to take away.

This is the kind of writing I used to come to ALA for.

ive got 3 of them on my desk right now.

coolest obnoxious toy ive owned to date.

check out http://www.dangerouslyawesome.com/png2swf/ for less rambley documentation, and some downloadables.

WARNING: everything is still very alpha. very much in testing/production. report bugs in the comments, but theres a good chance i’m already aware/working on it

Attention:I pre-apologize for any strange typos, language/grammar, or otherwise confusingness of this article. I PROMISE, that with the full release of my solution will be coherant documentation of how to impliment.

So the project I’m working on at my full time gig is really cool in a number of respects, but from where I’m involved with the project I get to play around in some of the most visually intense, technically challenging layouts of my career so far. Lots of theme-based layouts that rely heavily on textures, which makes a bulletproof layout difficult enough, and practically IMPOSSIBLE to achieve without the use of png alpha transparency.

Enter the bain of my existance.

Internet Explorer, along with it’s wonderful support of web standards, does a real number on png’s with alpha transparency. An example of how it botches, the left one is how the png is supposed to appear, the right one is IE’s version of the EXACT SAME FILE.

yeah, not pretty.

so what’s a developer to do?

well, there’s a number of javascript based png fixes out there, and the one we had originally chosen worked nicely, so long as it was only for a couple of pngs at a time.

Without getting too involved with how it worked, it essentially walked the DOM to find every image, determined which ones had a png extention, and then replaced the image with a “span” tag that had the same properties (dimensions, classes, id, etc) and applied the activex alpha transparency filter to the background of that object.

Hackey, relied on activex, and the bigger problem was that it got slow with more and more pngs to process. The png’s would appear like the one above (all grey’d out over the transparent regions) for a split second before being corrected. On a mainstream website, this was TOTALLY unacceptable.

So i got to thinking…why not use Flash’s native transparency support to my advantage? I went over and talked to one of my partners in crime, Arthur Dickerson, flash genious and all around awesome designer. I had Arthur whip up a swf that would take a few parameters:

• url to an image file
• the image dimensions

Effectively, I should be able to embed a flash object on the page that calls in the image, scale the flash around the image, and flash will handle the transparency nice and pretty.

The resulting swf is 400 bytes. That’s right, less than half a kb. So I hooked up the the embed using SwfObject from deconcept, and sure enough it worked beautifully. Next step: make images that are buttons, clickable.

Ok Arthur, make it so that I can pass in a URL, and if it exists as a parameter, the image will automatically become clickable.

Done.

So now we’ve got the flash handling all of the leg work…but the embed tag is kinda messy. It’d be way nicer if I could place the images on the page just like I normally do, and have the embed tags replace them, ahem, transparently.

Javascript to the rescue, and time to employ some clever little tricks to get the images out and the swf embeds, in their place.

First trick is to cut down on the time necessary to loop through EVERY image on the page. Simply, I gave any img tag that housed a png formatted image a class=”png” attribute. Done.

Now by using the document.getElementsByClassName, I can dig up every png on the page snappy as ever. Looping through and grabbing all of the attributes, and then passing them around to get the DOM prepped to write out the embed tag using the handy dandy swfObject utility. One of the first “quirks” about this version is the fact that any img tag that is going to have this treatment MUST have some sort of element wrapper: a <p>, <span>, <div>, <h1>, something of the sort. This is so that the swfObject code has something to inject the flash embed object code into. Again, the handling of all of this is transparent to the XHTML page.

But now I’m back where I started…the pngs are being swapped out for something that’s not a png. If theres a lot of png’s on the page, then it starts to show lag.

So I bounced the whole idea past another cohort of mine, Ryan over at Concept64. He suggested this fix up in the head of the document, before calling my png->swf function: document.write("<style>img.png {visibility:hidden;}</style>"); since this is being done via javascript, non javascript folks still get the images (though they will look crappy in IE). Folks with IE and javascript will use CSS to hide the png images using the same class I used in my looping utility, but not lose their place in the dom, or their dimensions.

So before the dom even gets a chance to display the crappy looking pngs instead of the pretty swf replacements…css turns them off.

Brilliant. Currently I plan to only employ the technique on browsers where it’s necessary…and by browsers, i mean browser, being IE. Though I have tested it on multiple browsers on various platforms, including a 500mHz g4 powerbook in safari, and in IE on a bottom of the line e-machine. works flawlessly every time. sweet.

Next steps are:

• refactor/clean up javascript.
• clean up link handling
• include javascript function calls for onmouseover, onmouseout, and onclick events
• work on some extra levels of degradation…for noflash and nojavascript

Anything else you think you might like to see?

as soon as everything is cleaned up, I’ll be posting all of the source here under CC license. More importantly, clean and thorough documentation (unlike this rambling mess) will be included.

Keep your eyes peeled. More goodness to come.

p.s. im thinking about giving it a stupid web2.0 name, like pingr. actually, i was thinking of calling it pongr, since it takes the p(i)ng and returns something a bit more useful….a pong, if you will…

but i’m open to suggestions.

Drexel University gets a lot of press around here as a “prestigious” school. Do any of you outside of the northeast corridor even know that Drexel exists? Does it mean anything over a degree from any other accreddited university (i’m not talking community college, i’m talking real deal university). Or, is “a degree is a degree is a degree”.

(I’m looking at you, west coasters).

(if you can’t read between the lines, i’m ready to tell Drexel to take their shaft and shove it somewhere else for a change. Just weighing my options, no decisions are being made yet, and no matter what I’m not “dropping out of school”).

Thanks to William Wingo, a participant at CreativeCamp 2006, there’s now a video of me telling the history of my relationship with Chris and Tara

. Unfortunately, unless he simply didnt post it, the bulk of my presentation on coworking cuts off right as I finish kissing the Citizen Agents’ asses.

Also, since I wasn’t warmed up, my level of “uhs” and “ums” was unusually high. Very uncharacteristic of my speaking.

also, hipcast has the strangest embed code i’ve seen yet. some weirdo iframe.

ive been thinking about something that was mentioned at this past weekend’s CreativeCamp. One of the attendants was telling me about how he recently returned to Philly and noticed an attitude issue. He said something to the effect of, “I thought New York was stuck up, and really Philly is just bad, maybe even worse. And really, he’s right. Its not so much of the NYC/”We’re better than you” attitude, its the Philadelphia/”We’re Philly and we don’t need or want your help”.

So that, to me, screams pride. Surely, Philadelphians are some of the most proud people in the country. I mean, look at our sports fans. Notoriously some of the most violent, verbal, and aggressive sports fans in the country…and not like they’ve earned it, right? Whens the last time one of this fine city’s sports teams won a sports championship? I digress, and refuse to speak about something that I admittedly know absolutely nothing about (sports).

So this pride that we have, is it what’s hurting us? Philadelphia is the home to many, many incredibley smart and talented people from every industry on the planet. But so few of those people reached their success alone. Most of them, like so many other successful individuals, leaned on the shoulders of peers and mentors. They overcame their pride, and did the hardest thing in the world for a proud person: they asked for help.

This is where I see an opportunity for coworking to break down a huge barrior in our local industry. We shouldnt have to worry about being “not New York”. A venue like coworking not only enables, but encourages collaboration. Working as a team to produce that which couldnt exist as individuals. I don’t know about you, but that’s something that I can’t wait to be a part of.

swallow your pride, philly independents. dare to be great, with us. the founders of this country did it, thats enough inspiration for me.

Dan Wilt: i hope one day, my name gets underlined by trillian *
Dan: dan wilt
Dan: that would be nice

well said Dan, well said.

*referring to trillian’s dictionary/encyclopedia lookup feature that underlines words that have entries

this weekend at creative camp we were talking about various professional/social networking tools, and how it’d be handy if there was a single sign-on solution for all of them.

one of the other presenters said, and i quote(paraphrase),

“If you made one place that managed my account login as well as personal info, so i didnt have to retype it every time, for:myspace livejournal facebook monster linkedin bloglines etc etc etc, not only would I use it but you’d probably make a million dollars.”

so yeah. of the bunch he rattled off, the only one with no api support at all to my knowledge is myspace. single sign on/standardizatoin of information IS a good thing. and profitable. cuz happy(and free(and open)) developers are productive developers, right?

Messina has been jabbering on about microformats forever. I recently got around to asking, “what’s the big deal”? Essentially, the content doesnt change but the packaging does. Formats like RSS, while effective, are inefficient because they require an additional packaging process: the generation of the feed. Microformats take the built in id and class properties of HTML elements and use them for their underlying purpose…no, not to style and format. That’s a secondary use. The primary function of id and class is identify an “object” within the DOM. ID’s for single objects, classes for recurring objects. Microformats exploit these identifiers in such a way that a web document itself acts as the publishing feed…a parser can go through looking for a standardized format for information such as calendar and address book info. no secondary republishing. and, every instance of support means that another developer has to do one less thing in making his data scrape work.

data standardization is good.

im weaseling a little bit of hCalendar into the app i’m building at work. my hope is that, when phase 2 rolls around, and it comes time to hook in syndication services, i can say “well, its actually mostly done already”. thats the kind of stuff that makes my bosses happy.