West, Donavon West

For years we've been presented with dialogs and web pages that ask us OK or Cancel. But what order do they belong in? I've always placed my action button (e.g. OK, Save, Yes) to the left and the negative action (e.g. Cancel, No) on the right. This came from growing up on Windows. Mac people do it backwards (in my opinion), placing the OK/Cancel buttons in reverse order (i.e Cancel/OK).

The Apple Human Interface Guide states:

Always put the action button in the bottom-right corner of the alert. This is the button that completes the action that the user initiated before the alert was displayed.

In other words, Apple says Cancel/OK as shown here:

Microsoft's Windows User Experience Interaction Guidlines state:

Place command buttons that apply to all property pages at the bottom of the property window. Right-align the buttons and use this order (from left to right): OK, Cancel, and Apply.

And as you can see, Microsoft says OK/Cancel as shown here:

What do the popular web sites do?

So much for the OS. How does this translate into apps for the web where the OS is not the one who positions the buttons? Let's take a look at some popular web applications to see what they do to try and answer the question: Should you code your buttons OK/Cancel or Cancel/OK?

Google Apps: OK/Cancel

Facebook: OK/Cancel

Evernote: Cancel/OK

The people at Evernote seem to have come from the Mac world. In fact, the Windows desktop version of the application even has a Mac OS X Spotlight looking search box (see below). It's no wonder they chose Cancel/OK.

PayPal: OK/Cancel

And the winner is…

It's pretty clear that the majority of the web community has embraced the OK/Cancel format. But here's one more site that I'd like to show you. It does what I believe is the best way to present choices to the user on the web.

LinkedIn: OK/Cancel*

As you can see, they use the OK/Cancel left to right format, but are using a button for OK action and a link for the Cancel or negative action. This allows the user to quickly perform the task they intended to do, yet still provides them with a mechanism for canceling the operation.

So to answer the original question "Should you code your buttons OK/Cancel or Cancel/OK?", then answer is OK/Cancel, but with an asterisk. You should use a button for OK and a link for cancel. As always, this is only my opinion. You particular situation may require a different approach.

While in a recent job interview I was asked to highlight a project that I am most proud. The interviewer wanted me to point out some interesting or technically challenging aspect of the project that might not be obvious. What a great question and topic for an article, I thought, but what should I write about?

I have written many complex web applications, gadgets and widgets that I am very proud of, but sticking with the job search theme, I decided to discuss my resume/portfolio web application as it represents what I do best. I'm very happy with the overall look and feel, but I feel that it's even more impressive under the covers.

This "making of" article will highlight some things about my resume/portfolio web application that I believe make it stand out from your typical website.

I invite you to look at the source code. You will find that it may be over engineered for a simple menu driven site, but remember that the site itself is intended to showcase my work. Obviously you can do a view/source to see the HTML, but please also download the JavaScript and CSS source files. Take most note of the file framework.js which is at the heart of the entire system.

A Web Application and not a Web Page

First of all, my resume/portfolio site is really an object oriented JavaScript web application and not just a web page. Everything about the site is generated through JavaScript classes. I have built up a small framework for handling the various tasks that need to be performed.

For example, instead of manually creating the markup for a button in HTML, I make a call to a the framework helper function createButtonBase with the parent element, the CSS class, title and a pointer to an onclick "handler".

homeButton = DonavonWest.UI.createBaseButton(clientAreaEl, "home-button", "Portfolio Home Screen", homeButtonHandler);

In the example above, homeButton references the button class, not an HTML element. Member functions can be called to performs tasks like showing and hiding the button. For example:

homeButton.hide();

I've implemented hide() and show(), but a fully functional button class would likely also have the following member functions:

• click() – to simulate a mouse click
• disable() – to place the button in a disabled state
• enable() – to place the button in an enabled state

When the application is closing, a call to the button member function dispose() will tear down the class and release any resources that it has created.

homeButton.dispose();

JavaScript Namespaces

I make extensive use of JavaScript namespaces in all of the objects, functions and classes. To avoid having to use "if (!window.x)" over and over, I've written a namespace helper function which is show here:

//create our base object (don't tread on any other browser objects)
if (!window.DonavonWest){
    window.DonavonWest = {};
}
if (!window.DonavonWest.Utils){
    window.DonavonWest.Utils = {};
}

//namespace helper
DonavonWest.Utils.ns = function (ns) {
    var base=window;
    var nss=ns.split(".");
    for (var i=0; i < nss.length; i++){
        if (!base[nss[i]]){
            base[nss[i]]={};
        }
        base=base[nss[i]];
    }
};

DonavonWest.Utils.ns("DonavonWest.UI");

It's pretty simple. First I manually create the namespace DonavonWest.Utils. Then I define my ns function. From then on creating a namespace is as simple as calling ns with a string representation of the namespace to create.

CSS Namespaces

It is just as important to use namespaces in your CSS as it is in your JavaScript. It's up to you if you want to use descendent selectors and/or child selectors, but it is important that at a minimum all of your CSS created as a descendent selector underneath of your base CSS namespace. Note that the base CSS namespace will vary with the class in question (i.e. DonavonWest_WebApp vs. DonavonWest_Resume) but it should always include your root namespace in the name (i.e. DonavonWest).

CSS Sprites

Where applicable, the application incorporates CSS Sprites. Think of CSS Sprites like a film strip that you slide up and down (or even left to right or both) to reveal a single frame through a hole. The other frames are still there, they are just hidden from view.

To the right is the image that I use for the that I use for the "home" button on the portfolio and below is my CSS. Notice that even though the button has two states (i.e. normal and hover), only one image is defined in CSS. When the hover state is shown, the image is simply repositioned along the Y axis (slid down in this case) so that a different image is rendered.

.DonavonWest_Portfolio>.client_area>.home-button {
    position:absolute;
    left:0px;
    top:70px;
    width:30px;
    height:27px;
    overflow:hidden;
    background-image:url(images/home-buttons.png);
    background-position:0 -27px;
    cursor:pointer;
}
.DonavonWest_Portfolio>.client_area>.home-button:hover {
    background-position:0 0px;
}

In other implementations where there is also a disabled state, the image would simply grow in height.

The Facebook Thumbnail Trick

This last thing I want to talk about isn't technologically advanced or even that cool in the grand scheme of things, but in the viral/social driven world that we live in on the web, presentation matters. You've probably done this before. You want to tell your Facebook friends about this cool website that you found, so you click on "Add a link".

You type in the URL of the website and click Attach. Facebook retrieves the site information, but you have to sort through many unrelated images to get to one that you want to display. In some cases, there are no images at all. Here is what it looks like when you enter Microsoft's new search engine http://bing.com, also a web application.

Not very visually appealing is it? Sorry to pick on you Bing, but I gave this tip to one of the PMs on the Bing team several weeks ago and nothing. :)

Now look at what happens when you go to my resume site at http://donavon.com/resume:

How did I do it? First create a 100x75 pixel thumbnail image. It can be anything you like, but I chose a screen shot of the finished website. Now place an <img> tag near the top of your HTML, preferably right after the <body> tag. Make sure you hide it somehow using CSS. Like this:

<body>
    <img style="display:none" src="images/webthumb100.png" alt="" />

The description used by Facebook also comes from the HTML. Place the description in a meta tag and place it in the <head> block as shown here:

<head>
    <title>Donavon West Portfolio/Resume</title>
    <meta name="description" content="This is the Portfolio/Resume website of Donavon West: devigner (part developer/part designer) and an expert at designing and building gadgets and widgets." />

One more, one more thing…

Shortly after publishing this article on my blog at blog.donavon.com, I decided that it needed to somehow be incorporated into the resume app itself. I didn't want just a static link so how could my app consume the blog post that was published on Blogger?

The good news is that blogger can publish posts in JSON format. The bad news is that Ajax can't cross domains (yes, I know about "alt=json-in-script" but what a hack). At first I thought I would simply grab a copy of the JSON feed and drop in onto my site as a static file, so I wrote the code to read and display a blog post (a simple matter of 5-10 minutes using my framework) and I was in business.

But what if the blog post changed because of a discovered typo maybe or I may even have more to say? I'm too lazy to be constantly updating my static JSON file but as a wise person once said "laziness [and porn] are the mothers of invention" (oh, that wise person happens to be Alyssa, my wife ;).

My solution? A few years back, I had written a configurable and secure HTTP proxy DLL as an HttpHandler in C#.NET. It's called RssProxy because at the time, that's all I needed to proxy. All I had to do now was create a bin directory, drop in the DLL and configure the web.config file (below). 

Viola! You can now read about the making of my resume application using my resume application. I know it's not all "chicken or the egg" or "grandfather paradox" but it still kind of has that feel. :)

<rssProxy>
    <rss name="blog.rpx" url="http://blog.donavon.com/feeds/posts/default/1484428372750514936?alt=json" />
</rssProxy>

Conclusion

To those of you reading this because you are considering hiring me, thank you. Resumes are a great source of information, but I hope that reading this article has give you a better understanding of what I am capable of and my resourcefulness. If your planning to build a modern cross platform object oriented JavaScript web application, I think that you will find that I will be an invaluable resource.

Microsoft Virtual Earth and MSNBC are changing the game this year when it comes to tracking Santa. You’ve all seen the NORAD Santa Tracker and while that’s been fun over the years, well, it has gotten a bit stale. So, a few of us here in the Virtual Earth Product Group decided it was time to spice things up and build a more immersive 3D tracking mechanism for Santa and his reindeer. Not only that, but we went ahead and recreated a 3D version of Santa’s Village at The North Pole.

read more on Chris Pendleton's Virtual Earth blog

Today I started using a rating widget from outbrain. The outbrain widget is a simple yet powerful ratings & recommendations tool that blends seamlessly into any blog design, inheriting your own look and feel. The widget includes an interactive 5-star rater, and personalized recommended links from your blog as well as others.

Here is how it looks at the bottom of each blog post.

Simply hover your mouse over the stars and click to give your rating:

I hope you enjoy the new rating system. Please use it to let me know what you think. If you’d like and outbrain rating system for your blog, click here to sign up or for more information.

I came across a strange website while on silverlight.net. It appears to be a Slovenian demo for Windows Vista written in Silverlight 2. Slovenia? Why Slovenia?

It is basically a simulator that mimics the behavior of Windows Vista online and is actually pretty cool. But because the UI is not exactly the same as the real Windows Vista, I’m certain that the UI police at Microsoft would not have allowed it had it been published in the United States.

You can try it out at: WindowsVista.si.

MSNBC.com’s new Web 2.0 driven Decision ’08 Dashboard was rolled out today and it look great! Unfortunately it is buggy and fails to load (at least with IE7 on Windows Vista). Take a look at the screen shot below showing a JavaScript error while loading the RSS articles for First Read.

I hope they get this ironed out soon. I can tell that a lot of hard work went into it. You can also read more about the launch here.

*** UPDATE ***

Let me help you guys out a little. If I were you, I would check to see if you are getting any 404 errors when loading any of your JavaScript files. Like maybe this one? Yes?

<script type="text/javascript" src="/id/25918880"></script>

Want to know what 15 minutes of fame looks like on the Internet? Here is a graph showing traffic for Deep Zoom Obama over the past week:

Today a new web site was introduced called Deep Zoom Obama. It has an interactive mosaic of Barack Obama composed from over 12,000 images of Barack Obama supporters from uploaded icons on www.BarackObama.com.

It uses new Deep Zoom feature in Silverlight from Microsoft which allows you zoom into the detailed 10,000x10,000 gigapixel image with amazing speed.

Check it out at www.DeepZoomObama.com.

Deep Zoom McCain was tried, but there were problems finding enough photos of McCain supporters. We did manage to find a few and if you really squint really hard, you can make out the image of John McCain’s face in the 20 image mosaic below.

In order to curb the spread of untruths, smears and flat out lies against the Barack and Michelle Obama, the campaign started a new web site called Fight the Smears. I’m glad that they are calling people on this crap!

Here are a few:

SMEAR: Michelle Obama Says “Whitey” On a Tape.
TRUTH: No tape exists. read more...

SMEAR: Barack Obama is hiding his birth certificate
TRUTH: Click here to see his actual birth certificate

And my personal favorite…

SMEAR: Barack Obama is a Muslim
TRUTH: Senator Obama has never been a Muslim, was not raised a Muslim, and is a committed Christian read more...

The site shows who is spreading the lies:

• Roger Stone who boasts about being the sleaziest man in politics.
• Floyd Brown who once bragged he was part of the “the heart and soul of the right-wing conspiracy”.
• David Bossie who runs Citizens United. Even Newt Gingrich said he was “embarrassed” by Bossie’s actions.

More good news for Chuck Todd fans (MNBC's Political Director). A new fan site was just created called Chuck Todd Facts.

It is basically the same as some of the other "facts" web sites out there including Chuck Norris Facts and Jack Bauer Facts. Many of the facts are simply "Toddified" versions of the same fact. Even so, some are pretty funny:

The bumper sticker on Jesus's car reads "WWCTD?"

Unlike Spock, the evil Chuck Todd who lives in a parallel universe does NOT have a goatee.

Check it out (and submit a Chuck Todd Fact of your own) at ChuckToddFacts.com.

While watching Morning Joe today (as I always start my day), I heard Mika Brzezinski and Willie Geist joking about a new fan site devoted to MSNBC's Political Director and "number's man", Chuck Todd. It's called Viva Chuck Todd.

I love the current online poll asking: "Chuck Todd Facial Hair - Yea or Nea?". Your choices are: "Keep it", "Shave it" and "Let the Super Delegates decide".

Or this "Chuck Todd Fact":

When Chuck Todd signs off with "You Got It"; you better damn well have it.

Chuck Todd Facts

Want more Chuck Todd Facts? Then check out the new web site devoted to all facts related to Chuck Todd. Here are a few:

The bumper sticker on Jesus's car reads "WWCTD?"

Unlike Spock, the evil Chuck Todd who lives in a parallel universe does NOT have a goatee.

You can also submit your own. Visit Chuck Todd Facts at ChuckToddFacts.com.

The Internet Archive has a cool feature that allows you to view any web site and see how it looked at any point in time. All you have to do is enter any web site address. You will then be given a list of dates for which the WayBackMachine has archived the site and it will show you how it looked. However, many times there are missing images, which it too bad.

For example, we all know how smooth and polished Apple's website looks today. But was that always the case? Here is Apple's website as it was back in 1997:

Try it for yourself at http://www.archive.org/web/web.php.

Here is some of how donavon.com has looked through the years.

Some of you have heard of the book "Mommy, Why is There a Server in the House?". It's actually a beautifully illustrated book from Microsoft as part of a odd-ball marketing scheme to promote it's Windows Home Server. My favorite quote from the book is "Or your uncle who smells like bark". Bark? (I also like the part where the dog pees on the laptop.)

The point that I'm trying to make here is that I'm giving away 4 copies of the book; three are paperback and one is a special hard cover collector's edition signed by Home Server General Manager Charlie Kindel.

So if you're the kind of person who can't say no to free stuff (even stuff you don't really need), head on over to Home Server Hacks put your name in to get a free copy!

Yesterday while researching the Huckabee debacle, I stumbled across a cool news aggregator/search engine site called Solibreaker.

Silobreaker is a search engine that gives you much more that just search results. It allows you to see relationships and content to the results. You can dig deeper and follow side stories, allowing you to get the full picture.

Silobreaker CEO Kristofer Mansson talks about how the site works at the DEMO 08 Conference in Palm Desert, California. He shows how it differs from that other big search engine. From what I understand, they were one of the darlings of this years DEMO 08.

If you haven't seen it, you are missing one of the funniest Saturday Night Live moments ever. I am of course talking about the "More Cowbell" skit, which is a parody of VH1's Behind the Music.

The skit originally aired April 8, 2000 and stared Christopher Walken and Will Ferrell (as the cowbell playing member of the 70's rock band Blue Oyster Cult).

Several years ago, in what can only be attributed to "Donavon has too much time on his hands", I designed a fan site. You can visit the site and watch the entire skit online at ExploreTheStudioSpace.com. So check it out when you have too much time on your hands.