We used a usability test driven design process. We were able to completely redesign portions of the project in the week before it launched based on direct user feedback. We are continuing to test and make iterative improvements to the directory. Special thanks to the totally epic team that made this possible: Ellie, Ethan, Kamran, Ken, Sungho, and Trent. My role included project management, creative direction, information architecture (IA), core PHP and MySQL work, as well as JavaScript work on the drag-and-drop administrative tool for the map data.

Continue Reading Post…

Phwew... I got tired typing that, and even more tired re-reading it. Where do I get off thinking I didn't get anything done in 2009? It is a year I should definitely be proud of. Other things from the year not in the timeline: a bunch of browser bugs I found and submitted over the course of the year, countless projects at my full-time job at the University of Minnesota (probably most memorable is launching a complete redesign of the Events & Conferences site), and a ton of new friends gained and connections made.

My stated resolution for 2009 was to, "Help the collective improvement of the web." I'd say I kept that promise to myself (probably a personal first for a New Year's resolution). Every bug I submitted, every patch I wrote, and every crazy thing I tried to get web browsers to do were all my contributions to the vast collection of brilliant people out there who all helped to make 2009 the year that web browsers really got awesome.

In 2010 I will continue to work to make the web more awesomer [sic], and I'm also making some personal resolutions to dig deeply in the mobile web, spend a lot of time on interactive design and games, and also make way more time for doodling and drawing.

Another important statement I made back at the beginning of 2009 was that I believe making connections is perhaps the most important thing to be doing. I am genuinely grateful for every single connection I made with so many people over the last year, both new connections and re-connections. 2009 was a banner year in that regard, but staying connected is just as much a 2010 New Year's resolution for me. I look forward to attending more conferences, working with more people, helping people succeed at their passions, and being inspired by the work done by all of you brilliant folks.

Have a great 2010! Oh, and if you are interested, check out the CSS for no-images-used timeline.

Continue Reading Post…

You'll have a much better experience using a browser that Santa has on his Nice List such as Safari, Firefox 3.5+, or Chrome. In fact, in those browsers, I'd go so far as to say the snow looks so real you will find yourself flopping on the ground to make snow angels. Give it a try now before you read about the super cool technical details behind it:

(Incidentally, you can also add the JavaScript directly to your own site to delight your visitors. The Winternetizer project page has details.)

The Secrets to Better Snow

Yes, it is true that falling snow scripts go back probably over a decade. We've all seen it done using falling snowflake GIFs, or falling periods, or the trusty asterisk (which to be fair, is a great six-sided stand-in for an actual flake).

However, if you have a modern browser, you will have noticed that my falling snow script has depth-of-field blurring and parallax, flakes that rotate as they fall, and you lucky Mac users no doubt noticed the pretty actual snowflake graphics. The total effect is accomplished with text, CSS, and JavaScript — no Flash, no PNGs, no GIFs, no Canvas.

Continue Reading Post…

More About FlipBox

FlipBox is jQuery-based and makes use of my rotate3Di plugin to create a 3D-like isometric tile flipping effect using the CSS3 transform property currently only supported by Safari, Chrome, and Firefox 3.5+. (That's another reason why I wanted to record a video demo.) If you happen to have an awesome web browser, you can check out a live demo of FlipBox.

In it's current state, with only a little preparation by the user, FlipBox is already a simple to use LightBox-like tool. There's a few other demos with this concept I hope to put together, and I would also like to write proper documentation and do a release.

Continue Reading Post…

Busy sites like Twitter, Digg, Boing Boing and others use methods to avoid browser cache issues. They find it important for their sites to always display correctly. You too can ensure visitors to your website will always get exactly the version of your style sheets and related image files that you want them to get.

I wrote an article for SitePoint covering solutions to browser cache problems titled "Overcome Your Caching Conundrums".

In the article I cover popular ways to deal with JavaScript and CSS file cache control, as well as a trick-of-the-trade method that will also help you manage your image caching. Hint: Have you ever wished that url() for your background images was relative to the styled-document's location instead of being relative to the stylesheet file's location? I used to feel that way, and it wasn't too long ago that I saw Eric Meyer tweet a similar desire. But now I am actually quite glad that url() works the way it does, and that has to do entirely with CSS cache controlling.

Now go and read the article on SitePoint. I hope you will find it interesting!

Continue Reading Post…

My zombie vide is titled, "Luuuuuuuunch." Watch it now!

• zombie-gex-s3-640.mov (51MB MOV)

I was extremely honored when this video won a Communicators Forum Maroon Award in the "electronic media, video" category in 2008. The video was also submitted this year to the Zombie Short Film Festival in Toronto. With some luck, my co-creators and I will be able to add a "double award-winning film" to our resumes.

[Fingers crossed.]

Continue Reading Post…

My idea was to create an extremely basic RPG with gameplay throwbacks to NES titles like Dragon Warrior and Final Fantasy, but with even simpler graphics. The graphics concept I came up with was basically that anything in the game would be represented with giant square pixels of color. And then playing off the theme's implication of bare-as-in-naked, I came up with the game title: Equip > Pants. Here's a very brief review:

Having perhaps the highest hilarious: number of pixels ratio, equip > pants follows the exploits of a pantless hero who must don pants. -Experimental Gameplay Project

In the spirit of the Experimental Gameplay Project competition rules, I spent just seven days developing this game. I put in less than 40 hour of development time total.

The game is written in JavaScript, and should run fine in most browsers. Play it now. Click START below.

And after you've finished, check out the other games from the August theme. Just to give a few more technical details about the game: I used the DOM to draw the graphics instead of a canvas tag. Those of you with Safari, Chrome, or Firefox 3.5 should see a beautiful pixel font in the game thanks to an @font-face rule.

Oh, and don't mind the ABOUT / CREDITS link... that just goes to this blog entry. (Some places have linked to the game directly rather than this post.)

Continue Reading Post…

Specifically, I did not share the happyworm article's optimism about these points:

"It seems that it's not so much about the corporations anymore, more about the community."

"...a seismic shift in power towards the community and away from the browser vendors, the consequences of which cannot be underestimated."

First, let me start by saying I'm assuming by "community" the author meant web developers. It is important to note that Apple, and even more so Google, were heavily involved in the HTML5 spec and thus, if only by association, the demise of XHTML2. I ask if maybe the power has moved away from browser vendors towards content-provider corporations, and not towards the community? (It is worth noting that this is a very common trend now in America for decades.) The W3C ceding some control strikes me as perhaps further evidence that the community may actually be losing ground. Google entering the browser vendor market only serves to muddy the waters.

Some fraction of the web developer community was very excited by Google pushing HTML5. Some fraction was very disappointed. Can the community have the power if the community is divided? Maybe Google and Apple are listening only while it is convenient for them and their bottom line. Maybe the HTML5 supporters think they have power because Google's use of power just happens to line up with some of the web development community for the time being.

Personally, I'm very much a supporter of community-based web standards. I'm glad for now that we have Google and Apple blazing ahead with roughly standards-based HTML5, CSS3, and JavaScript. I certainly don't think we should give Microsoft the keys to the car. They've already shown us where they would drive it, if not deliberately then by incompetence or lack of vision. And I think we also must give credit to Opera and Mozilla. They seem to embrace community driven development. I think they've got our backs.

I do think we probably have little to fear on the CSS and HTML fronts. I think the illusion of community derived standards will continue, with the corporations that actually make the decisions acting mostly benevolently. Occasionally they may err on the side of progress over standardization, but the benefits of that will probably outweigh the problems.

I am much more concerned about JavaScript (JS), especially with how Google is positioning itself. We (web developers) enjoy fairly standardized JavaScript language for the moment, with a lush pasture of JS libraries, user interface (UI) toolkits, etc to choose from. Google has entered the browser market and is fully intending to create a browser-based operating system. I'm not so sure we can trust Google to act in the web development community's interests over its own corporate money-making interests in regards to web applications, specifically client-side JavaScript applications and web applications UI. I think there is a real possibility that Google may create a proprietary JavaScript web applications platform and lure many developers in via a "web standards" carrot, custom (read: proprietary) application toolkits with pre-built functionality, a captive audience, and a clear path to individual app monetization. I think this could create some real fractures in the JavaScript language and potentially even web development as we know it.

I will give a simpler example for my concerns for the future of community driven decisions in the realm of JavaScript and Web Applications UI. There has been some talk of incorporating jQuery as part of HTML5/JavaScript. If you are a Dojo, YUI, or Mootools fan, how would you feel about jQuery being selected as an early winner? What are the chances people will want to use some other JS framework, or Web App UI widgets built for some other JS framework, when jQuery would perform dramatically better because it is actually built into the browser?

It is far from certain, but we may soon find ourselves with far fewer choices as web developers than we have now. Or, maybe Google will "do no evil" and blow all of our minds with great stuff while having a ear in the web development community. I, for one, am watching carefully.

Continue Reading Post…

As an example I have some spinning HTML content. You can click the content to increase its scale while it continues to spin.

Read the full post to see the example and download the patch.

Continue Reading Post…

Here's a photo of yours truly next to my submission — a nearly life size blowup of some pixel art I've been working on for Zachstronaut:

So like I said, the "Together" show was comprised entirely of artists who had previously shown work at umber. I had the great pleasure of showing a variety of fun pieces in a fall 2007 show titled "Play." The show was the idea of my friend Peter Smith, and I was very happy to have him invite me to be a part of it.

My art for the "Play" show was a juxtaposition (oh yes, I dropped the j-bomb) of video games I played growing up — which inspired my career path as a builder of the digital flavor — with the physical toys I used to build stuff as a kid.

First below, photos of four pieces done in LEGO brick on LEGO plate (left to right, top to bottom). Here are links to the games in question: Bubble Bobble (NES), Dragon Warrior (NES), Final Fantasy (NES), Super Mario Bros. (NES). Then, a piece constructed with dominoes, GORILLAS.BAS (QBasic).

Actually, I had one more LEGO work in the show which was the heart containers from The Legend of Zelda (NES), but that piece has sold. If you're seriously interested in any of this art or commissioning a piece, contact me.

Surprisingly, I've never become a regular Flickr user, but I imagine I should get high-res shots of these up on Flickr or somewhere eventually.

Continue Reading Post…

After my last post about the CSS text-shadow property it occurred to me that it could be used to create some fun pseudo-realtime lighting effects.

In the example below I am using a PNG to create a spotlight, and I am using JavaScript to update the text-shadow style on the text in order to simulate realtime shadows from a single light source. Move your mouse over the box to cast a shadow with the spotlight.

Should work in Firefox 3.5, Safari, Opera, and Chrome. Apparently still no support in IE8? Big shocker there.</sarcasm>

View the example in a new window.

Continue Reading Post…

A detailed blog post about the isocube was published on hacks.mozilla.org as part of their Upgrade the Web in 35 Days series.

View the isocube in a new window.

Continue Reading Post…

The Examples

Make the text color the same as the background color for "knocked out" text, and do multiple shadows for "3D" text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

#shex-one {
    color: white;
    text-shadow: 1px 1px 0 black, 2px 2px 0 black;
}

By negatively offsetting the text, and then pushing the text's shadow back where the text should be, you can create text that seems to be unselectable. Also, I set the CSS here to overflow: scroll; to show that text shadows in Firefox 3.5 (as of beta 999) affect the width of their container:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

#shex-two {
    text-indent: -999em;
    text-shadow: 999em 0 0 red;
    overflow: scroll;
}

In Safari, text-shadows are the same opacity as the text they shadow. Text with CSS set to color: transparent; doesn't show up at all. Firefox doesn't do this, which actually lets you make text that turns invisible when you select it:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

#shex-three {
    color: rgba(0, 0, 0, 0.1);
    text-shadow: 1px 1px 1px green;
}

And finally, some fun with text that is blurred/out of focus until you mouse over it. A little extra pizzaz added in Safari which supports animated CSS transitions:

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

#shex-four {
    color: blue;
    text-indent: -999em;
    text-shadow: 999em 0 8px blue;
    overflow: hidden;
    -webkit-transition: text-shadow 0.25s linear;
}

#shex-four:hover {
    text-shadow: 999em 0 0 blue;
}

Update: Even Cooler Demos!

If you are interested in more exciting uses of the CSS text-shadow property, then be sure to check these out:

• CSS text-shadow Snow!
• CSS text-shadow Spotlight!
• CSS text-shadow fire!

Continue Reading Post…

(The most common example would be the all-Flash portfolios and galleries of designers. You get three pages into their sites looking at a particular piece of their work, and then you look up in your browser location bar and you are still at http://www.stupid-designer.com/ ... I can't share their design work with somebody even if I wanted to, because there is no link! Terrible SEO and self-promotion.</rant>)

In terms of web user interface widgets, the very common tab view is often done incorrectly. For instance, both YUI's tab view and jQuery UI's tab view fail to change the browser's location when you switch tabs.

You can already directly link to a tab if you know the URL or right-click the tab to find the URL. However, if I use my browser's default bookmarking behavior, or if I use the location bar to copy and paste a link to somebody, or any number of other scenarios — because neither the YUI nor jQuery's tab views update the browsers location when you switch tabs, you are likely to send somebody a link to the first tab you landed on rather than the tab you are viewing.

The strangest part of all this is that enabling the direct linking on the back end is actually the hard part. Getting the location to update as you switch tabs is laughably easy. Here is the code for the default jQuery tab view behavior:

$('#tabs').tabs();

$('#tabs').tabs();
$('#tabs ul li a').click(function () {location.hash = $(this).attr('href');});

Couldn't be simpler. I've set it up so you can see it in action. In this fixed jQuery tabs example as you click the tabs you will see your browser's location update.

I have submitted a ticket.

Continue Reading Post…

As an example, lets consider the following jQuery call:

$('#foo,#bar').addClass('test').css('color', 'blue');

// YUI
YAHOO.util.Dom.addClass(['foo', 'bar'], 'test');
YAHOO.util.Dom.setStyle(['foo', 'bar'], 'color', 'blue');

// Dojo
dojo.query('#foo,#bar').addClass('test').style('color', 'blue');

Lets say we wanted to keep the jQuery syntax shown in the very first example above, but instead of including jquery.js and all of the jQuery code, we wanted to use the YUI JavaScript library. How could we make the jQuery style call use YUI? Here's some code that maps those calls to the YUI library:

function UseYUI(selector) {
    this.nodes = YAHOO.util.Selector.query(selector);

    this.addClass = function (className) {
        YAHOO.util.Dom.addClass(this.nodes, className);

        return this;
    }

    this.css = function (property, value) {
        if (typeof value == 'undefined') {
            return YAHOO.util.Dom.getStyle(this.nodes, property);

        } else {
            YAHOO.util.Dom.setStyle(this.nodes, property, value);

            return this;
        }
    }
}

function $(selector) {
    return new UseYUI(selector);
}

After adding the above code to your page you could keep the jQuery syntax — i.e. $('#foo,#bar').addClass(… — but include the YUI library code and files instead of the code and files for jQuery.

And actually, if we had many methods like addClass where they are the same in jQuery and YUI except for the first argument, we could create a helper function to generate the mapped functions for us:

function UseYUI(selector) {
    this.nodes = YAHOO.util.Selector.query(selector);
    
    this.mapMethodToYUIDom = function(method) {
        this[method] = function () {
            var args = new Array();
            args.push(this.nodes);
            for (var i = 0; i < arguments.length; i++) {
                args.push(arguments[i]);
            }
        
            YAHOO.util.Dom[method].apply(null, args)
        
            return this;
        }
    }

    this.mapMethodToYUIDom('addClass');
    this.mapMethodToYUIDom('removeClass');
}

Mapping the jQuery style calls to Dojo in this case is even easier than YUI. Much easier:

function $(selector) {
    var nodes = dojo.query(selector);

    nodes.css = nodes.style;

    return nodes;
}

It would be a fair amount of work, and a decent bulk of code, to completely map all jQuery style calls to either YUI or Dojo, or any other JavaScript library for that matter. Obviously, when porting from one JavaScript library to another, going through line by line and replacing each call would result in slightly faster and more file-size efficient code. But that's no walk in the park either.

With the method I've described in this post, you could actually put in the one-time effort towards creating the code to dynamically map from jQuery syntax to any other framework thereby making any and all projects you build and distribute library-agnostic. What do you think? It seems like such mappings would come in useful.

Continue Reading Post…