So here I sit at SXSW. I was all kinds of excited to come after having some great experiences last year. The best being seeing Kathy Sierra talk on Creating Passionate Users, which completely changed my outlook on just about everything.

This year… it seems to be rather blah. Let me step through it…

Saturday

• A Decade of Style
  This is where I really started thinking that I hate the moderated panels. One person asks seemingly random questions, and the rest answer. Questions such as “when did you first encounter CSS”, “why did you stick with it”. How in the heck does this help educate me? What am I really suppposed to learn and take away from such questions? This panel did get to a little bit of good questions at the end like where should we be going, what advances need to be made… but it was too little too late to save the panel for me.
• After the Brief: A field Guide to Design Inspiration
  Good stuff. Well thought out presentation that explained where they (Jason Santa Maria and Rob Weychert) go to get their inspiration. Ideas on what I can do to get myself out of the box and come up with new things. Yes!! Teach me!! Get away from the computer… do things manually… do it differently then you normally would. Bring it!!
• Kathy Sierra Opening Remarks
  Love Kathy Sierra. This year wasn’t as ground breaking as last year was for me. She did focus in more on a specific subject (making a better help section for users) then the general “creating passionate users” from last year, but it still had a lot of great nuggets. In a nutshell… users going to the help aren’t the happy people we may be targeting. They are frustrated, angry people. So make a section that will address these users needs, not the guy who is just curious about what is going on.
• Grids are Good and How to Design with Them
  So so. The logic on how to come up with a grid based on a fixed requirement (in this case the dimensions of an advertisement) was good. Some of the stuff they did with the grid was good. Well prepared, but just not super engaging for me.
• Ruining the User Experience: When JavaScript and Ajax Go Bad
  Pretty good… for a 101 level chat. This is the panel that made some of us think that they need to have a classification system for each class. Is it a beginner, intermediate or advanced class on the given subject. The descriptions of what will be discussed can be interpreted many different ways. This one did what it said, but at a semi-superficial level. It seems that most classes here are beginner level, which does fit probably 90% of the participants. I just wish I stopped getting sucked into a cool topic, only to find that I’m not going to learn anything new on it.
• Mapping: Where the F#*% Are We Now?
  No where close to what I thought it would be. Talked about pie in the sky communication of GPS with Bluetooth and other oddities. So this is the inverse of the above, that I needed to know it was way above my level… and wasn’t going to tell me what I could do cool today. I bailed early on this one, as my eyes were glazing over.

Anyway… that was just the first day. I’m on day 3 now and the same pattern follows… moderated panels can actually suck the life from you. Classes are largely “nerfed” for the majority.

But the people… what about the people?

So SXSW is also supposed to be about the networking. All these A-listers are here, and by all accounts are very approachable. I just don’t know what we’d talk about. Last year I said hey to Shaun Inman, and asked how Mint was going, since I didn’t really know what else to ask. I could see the sigh in his body language, and kidded him about that being the question everyone must ask him about. It’s not them it’s me… I guess I just don’t do the social thing.

So that, on top of the being one of the 25 Mormons here (18 being from our group) and not having a strong desire to go to parties and watch people get drunk… makes the social aspect kind of lame for me.

That being said, I have been having a good time with my group at various meals and just meandering around. We had a blast last night as we set up our own theater and watched Nacho Libre and laughed our heads off. So building a comrodery with the team has definitely been nice.
Hopefully I’ll post more info soon and this will break my silence. I keep wanting to post but never want my lame thought to be the first thing I say. That issue is over and now I can post freely

The jist of the script is that it’s a function that allows a snippet of code to be fired once an element is viewable on the screen.

We have a few longish type pages where I work and I wanted to use the Fade Anything Technique to do what it does best, and hilight a few elements on the page. Well a few of those elements were not viewable on the screen above the fold so I had to come up with something to make them fire when they were viewable. So long story short…I slapped together a few miscelaneous things I had laying around and onViewable was born.

Please find the details of the hows and why’s on the onViewable page. Any updates will be posted there, and I will mention them in the blog so you can be aware of them.

I look forward to any feedback.

I must give credit here (in addition to on the script’s page) to the great PPK (Peter-Paul Koch) of QuirksMode.org. Without his invaluable resource and a few functions I borrowed, this wouldn’t be here today. Thank you PPK for your great contribution to the community.

So, here’s a super quick and dirty bookmarklet for tracking friends while playing. This is like 30 mins of work and far from complete and perfect I’m sure. It’s also based on the current DOM of the page, so if that changes, this breaks. But since it’s centrally hosted I can compensate if that happens and the next time you use it after I fix it, it will work.

To use it, drag the following link to your toolbar, and then click that button after starting a game of Fastr. FastrFriends. After it’s loaded up, simply click a name to follow it, and click it again to stop following it (if you got the wrong one or whatever).

Potential upgrades I’m pondering:

• Option to show/hide all users that aren’t your friends
• Different colors depending on how high on the list they are
• Track their score and then show what they got on the last guess when it changes.

I know it works in FF 1.5 and IE 6. I’ve been told it doesn’t work in Safari but I don’t have easy access to that, so if anyone can tell me what to fix I will give it a try. Otherwise I will try and get a hold of one at work on Monday.

Report any bugs here… and enjoy!

VisitorMap uses the existing information that is already saved by ShortStat. It is meant to be a plug-n-play addition that doesn’t require any database or other changes. The only required change is in the file itself to set the Google API Key (free) for the folder you are installing it in to.

This is a quick and dirty release. Some of the data parsing I am doing could probably be done cleaner, but it works for being a late night “for fun” project… at least for now.

The data is provided by hostip.info which is a “Community GEO IP Project” (thanks to Randy for finding it). Basically it looks like they rely on visitors to state where IP’s are located. So to that end, it’s not a comprehensive list. When first testing the script, out of the 50 referers, only 18 had an entry in their database. But this is the only site we could find that was open and free, so if anyone has a better option (that doesn’t cost an arm and a leg… or even a toe) let me know. At the same time, because it is a free, open-source service… this may not be the best option for those with lots of traffic as they aren’t meant to be used for tons of hits.

Version 1.0 includes:

• Uses ShortStat CSS for similar look and feel
• Click on markers for more details (referer,page visited, date/time, browser/os, location)
• Text list of visitors with links to open the marker “balloons”
• Toggle between a small map with the above text links and a bigger map with no link list.

That’s about it… pretty simple as I said. But it works.

Please let me know what you think.

See it in action
Download the code

Thanks go out to Randy Hall at Code Dump for helping me test.

Every time I ran into a new cool feature my jaw would drop a little farther. The fluid zoom, rotate, and angle can be played with for hours. Adding in the other features such as 3D buildings, earthquakes, etc. are even more fun. It’s got a whole section of local businesses that you can turn on to see where they are in whatever city, that hooks into the Google Local database (food, banks, schools, pharmacies, movie rentals, etc). It even has other funky things like Crime Stats, Census data, Postal Code boundries and more… although I didn’t run into any of those that worked in my local area (Utah) so that may be only available in certain places.

It is so much fun I am seriously considering upgrading to the Google Earth Plus to be able to get the cool extra features.

I know that hundreds of people will be writing about this today, but I was so impressed I just had to add my .02. Go download it and have some fun… it’s awesome!

Thanks to the new pages function of WordPress 1.5 this will live at it’s own location, so there can be a single point of reference for any changes and such. But I will post any updates made to it here in the blog so that anyone who cares to, will know about it.

I will put the full text from the page here for the initial entry (and for searchability since pages aren’t searchable yet through WordPress), but all future changes will be found on the page itself.

Comments, feedback and suggestions are greatly appreciated.

Information

Script Name: onDOMload
Current version: 1.1
Last Updated: 03.31.2005
Download: onDOMload

Purpose

To allow JavaScript to run on a page after the head, but before onload and before an “at the end of the page” (in-content) JS script fires.

What is it?

This script starts looping trying to run it’s code until the page is done loading. The code is continually checking for certain DOM elements to load from when the functions are called, until an onload call stops it. Using this method, the code you want to run will happen as soon as the loop runs again after a given DOM element with a certain tag/id/class is loaded, not onload or when another in-content JS call is made at the bottom of the page.

How does it work?

You provide two things.

1 – What you want the code to be run on – You can pass an ID (#theID), a class name (div.class), an element name (td) or several, but not all, combinations of the above (div#theID h4).

2 – What code you want to be run – You can pass it any code that you want, as it does an eval on it when it’s time to run it. I know that’s not super efficient, but if anyone can think of something better, please let me know. Since the code can be run multiple times, it provides a keyword of “theTarget” that references the current element being manipulated.

Every X milliseconds the script tries to run your code again, looking for the DOM elements you provided. When it finds one it runs the code on it, and then keeps track of how many it’s done. When the loop happens again it compares how many it did last time, with how many there are now. If there are more then last time, it starts with the next newest one and runs through the rest of them. If it doesn’t find anything new, it keeps looping and checking for new ones each time.

An onload is run that says the page is done loading. It then stops the loops so that they do not continue to run as you are just looking at the page, and does one last run just to make sure nothing showed up between the last loop and the onload.

Why use it?

As mentioned above, until now there have been 2 ways to fire code later on down the page. 1 – onload, which waits until every element (img,script,css,etc) has loaded on a page. If an advertisement, or stat tracking pixel, or whatever hangs for a while… your script can’t fire yet. 2 – “in-content” reference. This is a tad better in that you can call it at the bottom of the page, and it runs as soon as it is read by the browser. This again can potentially be slow if the page is very long, or if something server side hangs the page before it gets to it, but is definitely faster then the onload.

onDOMload allows code to run much sooner during the pageload. If the code you run makes changes to the looks of the page, then this will allow it to happen much faster then the other versions will. It also allows you to keep all your code in one location… at the top. Instead of needing part of your code at the bottom.

History

I had thought of this concept dozens of times, but finally started playing with it after the Man in blue posted about it and gave an example. The need for this became pressing for me when working with a version of IFR which had to wait till the end of the page to do the replacement. We would always see the headlines loading after the page was mostly rendered, and it didn’t look all that great.

I have improved on The Man in Blue’s version (I hope) by adding the ability to run code on elements with a specific class, ID or just on all instances of a given element. An earlier version of the script just had ID and tags available (the unreleased 1.0 version), but I leveraged the code from Alessandro Fulciniti’s Nifty Corners (which are pretty dang nifty, btw) to improve the ability to direct the code. You can also reference the current element by using “theTarg” in the passed code… kind of like a “this” call.

See it in action

Example 1 – Several different types of schedulers on the same page.
Example 2 – Example of how an in-content or onload call can delay your intended actions.

Compatibility

Works fine in FireFox 1.0.1, Win IE 6.0 SP2, Safari 1.0.3 (if anyone has a newer version they can confirm in, please let me know)

Partially works in Mac IE 5.22. I may get this working in the future, but for now it’s not a priority.

Changelog

03.31.2005 – 1.1 – First public release. Fairly decent overhaul from the unreleased 1.0 version. Added ability to go off of classes and IDs. Added final check after onload fires.

1.0 – Never actually released

My version is located here for all to poke fun at. As usual I couldn’t leave well enough alone and had to fiddle with it a little bit.

In setting it up I noticed I was the only one registering any hits. This is totally understandable as no one visits this site, but that aside, I hated seeing myself inflating the numbers. So I added a new paramater to the configuration.php file that is an array of IP’s that should be ignored. Then in the inc.stats.php file I added a check to see if the current IP was in that array. If not, then it would continue on it’s merry way. If it was, it would skip all the stat taking parts and it would be as if I was never there **queue tumbleweed**.

After testing this for a while I’ll let Shaun know about the concept so he can decide to add it to the actual program or not. Then again, last time I waited to write Shaun about something, he found out about it before I even had the chance to tell him. Sneaky little devil.

Update
After looking at my stats the next morning I was amazed to see 54 or so visitors. I thought that there is no way this could be, and so on further inspection all but like 3 of them were Search Bots, and RSS Aggregators. So I added two more options to the script. Variables to turn tracking of those two things on and off.

countBots – lets Short Stat do it’s normal checks on the User Agent. If it is returned as “Crawler/Search Engine” and this variable is “false”, then the insert doesn’t occur.
countFeeds – If the $res variable has “/feed/” in it (working through a WordPress install, so this won’t be globally true) and this variable is false, then the insert doesn’t occur.

Will continue to add any edits I make, and how things go after they run for awhile.

Installed the del.icio.us integrator plugin which also went extremely smooth.

Will probably be stuck with the default template for a while as life is fairly busy at the moment. On that note, I hope to actually make a few posts in the near future. One or two to explain why I’m busy, and a few more of some projects I’ve been working on.

Until then… TTFN!

His one lament about this fix:

The one sort-of drawback to using this approach is that it seems to require that the call to pngbehavior.htc sits in an embedded style sheet, or else nothing happens. This may very well have to do with the way the JavaScript monkeys around with external style sheets during startup. If any of you IE/Win JS gurus can figure out a way to get the behavior to fire without having to embed it into the presentation, that would be stellar. If not, it’ll just be documented as a “leave this in if you’re using alpha PNGs; otherwise you can take it out” thing.

Now I don’t pretend to be an “IE/Win JS guru” but decided to play around anyway. Using the simpler example at the top of Erik’s page I saw what the “bare necessities” were. Now that I go back and look at his .htc behavior closer, I see that I am doing some of what he was doing there… but just in the JS.

What I came up with is a quick little JS script that cycles through all the images on the page, if an image is a png (detected by the extension) then it applies the appropriate filter and replaces the image with a clear .gif file. This eliminates the need to have any image specific references in the CSS or JS, and the need for the HTC file altogether.

See a demo of the script in action.

I’d get all fancy and separate out the script and stuff for you to easily peruse, but I probably need to get back to work. So just view source and poke around.

Hopefully it is found useful, and will be a help to Eric’s issue. Thanks to Erik for the initial script and research. Feedback is welcomed as I’m always willing to learn.

Kirk over at Reasons Unbeknownst has created a torrent of some videos and other files related to the tsunami. He is creating another file with additional footage as well.

As of this writing there are “520 people downloading, 1437 seeders donating bandwidth.” That is a pretty good ratio of seeders to downloaders. One that I have never seen before. Most of us can’t do much for those who have been affected by this tragedy, but it seems that people are doing what they can by sharing their bandwidth so that others can get what information is out there.

In a recent update to the above article, Kirk added some humanitarian links that he got from apple.com. Below is a screengrab of what their site looks like at this moment. It’s a pretty big statement to dedicate your entire corporate homepage to linking to humanitarian and relief efforts. Major props to Apple for being so selfless at this time of grief for so many.