Safari 4

Apple just released a public beta of their new browser, Safari 4. I downloaded it and I have to say, it's starting to look pretty impressive. As much as I think that iTunes is starting to get too big for its own good, they incorporated some of the cool stuff that in iTunes into Safari. For instance, there's a new cover-flow system for pages you've visited recently. I'm a big fan, as most people, with the reflective goodness they use, as well.

There's only one thing that I wasn't so happy about: the placement of the 'add a new tab' button. We all use UltraMon here, which is software that helps you manage a dual monitor setup. With UltraMon, they put buttons at the top-right of the windows to help you move you windows quickly from one monitor to another. Well, these UltraMon buttons are right above the new add button in Safari 4. I know, it's UltraMon's fault. But, wouldn't it be nice if we could all be friends?

I'm interested to see if any of our sites will break with the enhancements to their rendering engines and such, but hopefully the compatibility will only increase. Check it out if you're interested in seeing the future for Apple's standard web browser.

Including '.lic' files in the new Web Deployment Projects

I came across a situation the other day where I needed to include a .lic file as part of my Web Deployment Project. I found a good article here that shows the lines you need to add to your web.config file.

<configuration>
  <system.web>
    <compilation>
      <buildProviders>
        <remove extension=".lic"/>
        <add extension=".lic" type="System.Web.Compilation.ForceCopyBuildProvider"/>
      </buildProviders>
    </compilation>
  </system.web>
</configuration>

Internet Explorer 8 "Compatibility Mode"

Okay,so for those of you who may not follow the 'browser wars' like we do, Microsoft is getting ready to push a new version of its Internet Explorer browser to the public. After a January Release Candidate release, a March production release is a decent possibility.

IE has long been a troublesome browser because of Microsoft's unwillingness to adapt a set of industry-wide standards and render pages in a way compliant with those standards. However, because of its large market share, web developers have simply had to "deal with it."

With IE8, Microsoft is finally trying to be standards-complaint. What does that mean? It means they're having to deal with a problem of their own making - that they're now releasing a product that they know in advance will 'break' most sites designed to work correctly with all previous versions of IE. Their solution? A feature called "Compatibility Mode."

It's actually two features working together. First, Microsoft assembled a list of sites that they know won't work correctly with the new IE. Among the 2,400 and counting? Just a few you'll recognize: CNN.com, Ebay.com, Apple.com, Google.com, and even Microsoft.com

If you don't go to a site on the list, IE8 displays a button at the end of the address bar (see screenshot above). It looks, appropriately, like a broken web page - but the 'tooltip' that pops up when you hover over the button says it's for websites "designed for older browsers." Way to completely ignore that it's only older versions of IE...

Want my recommendation? Instead of having to click a button when a web page loads incorrectly or too slowly in the hopes that it fixes the problem, just switch to a better browser. You'll find the experience is faster and better. For example, the javascript animation we use on our website (the pages sliding off the screen and back) only works in fully compliant browsers (it still doesn't work in IE8). That doesn't mean our site breaks - IE users just don't get to see the snazzy animation. In other words, if you're using IE, you may be missing out on some of the coolest things the Internet has to offer.

If you haven't already, try one of these out instead:

• Firefox


• Chrome


• Safari

New Mobile Media: Cats?!?!?

Okay, so apparently there's a place where out-of-home advertising, video games, superstition, and coats for cats all collide - and as you can clearly see, it's not Japan, it's the UK.

To launch the new video game FEAR 2, Warner Brothers utilized a rather unique medium: black cats. Apparently, they made custom coats for black cats (specially 'trained' black cats), and cut them loose in London on Friday the 13th.

Now, my wife and I have three cats at home. I know from personal experience (and have the scars to show for it) that cats aren't 'trained.' Then again, maybe British cats are just much more civilized than our pound kitties (do they 'meow' with a cool accent, too?)

I'm just glad Disney didn't try this for Ratatouille in Paris...

Usability Blunders

Smashing Magazine has a decent article on 9 Common Usability Mistakes in Web Design. I must say we've seen these mistakes time and time again on projects we're called in to provide usability consulting on. In essence, they're all just common sense, and fall back on our two main design principles:

• Don't make people think


• Keep everything within two clicks

There was, however, one point we disagreed on a bit in our office: the structure of page titles. These show in both the title bar of the browser window, and also within search engine results pages (SERPs). The article suggests placing the title of the page first, then the brand associated with the site. Instead, we follow a 'you are HERE' approach - titles should read left to right much like breadcrumbs. For example, a title we would create might look like this:

NovelProjects -> About Us -> Employment Opportunities

In our opinion, that tells the user where they are within the site, allowing them to more intuitively navigate up or down levels of depth within the content. This is even more important on e-commerce websites, where a page title for a product page should appear as follows:

AudioSavings.com -> Car Audio -> Amplifiers -> Rockford Fosgate

You can see this in action on www.AudioSavings.com, the most recent e-commerce site we've launched.

That's my two cents. Call me if you want the whole nickel.

jQuery Animations

I probably should have found this earlier, but I just saw a great example of jQuery animation and I looked into their source code. One of the problems that I've seen with using animations is that the elements that are being animated like to finish what they're doing before taking on another animation. For instance, if you wanted to fade something in and then out again, the element wants to fade completely in before fading out. Sometimes you don't actually want this to happen because the user has already moved on and doesn't want the focus to be on that element any more.

Check out the fading animation on this site: http://agamicreative.com/

I looked into their site to find super clean and simple code:

$(document).ready(function(){  
  $("#nav3 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "8"}, "fast");
  }, function() {
    $(this).next("em").animate({opacity: "hide", top: "8"}, "fast");
  });
});

The .stop() function is actually what caught my attention the most. I have to say, I've been looking for an answer like this for a little while now, and once again jQuery makes it super easy without me even knowing it.

Forms Authentication timeout default in ASP.NET 2.0

Found a good article on ScottGu's blog about setting the timeout value for Forms Authentication.

One thing I want to add to this is that I learned that in addition to modifying the web.config, you also need to adjust the Application Pool in IIS. The Application Pool has an 'Idle timeout' setting where it will shutdown the worker process after a certain number of minutes being idle.

Here's another good link: http://forums.asp.net/p/989129/1281199.aspx.

Computing a Hash in .NET

Have you ever needed to compute an MD5 hash in .net? I've got some code that will do that and maybe make life easier.

Here's an example to compute an MD5 of a string:

string s = "my string";

MD5CryptoServiceProvider m = new MD5CryptoServiceProvider();
ASCIIEncoding encoding = new ASCIIEncoding();

byte[] b = m.ComputeHash(encoding.GetBytes(s));
string hash = BitConverter.ToString(b);

Now if you already have a byte[] array:

byte[] myarray = GetByteArray();

MD5CryptoServiceProvider m = new MD5CryptoServiceProvider();

byte[] b = m.ComputeHash(myarray);
string hash = BitConverter.ToString(b);

jQuery Paging

If you got a lot of information that you're throwing at a user, one of the best ways to split that up is to use paging. We've all seen it with search engines, but it really applies to lots of other areas as well. Sometimes it's tricky to know when to use it and when it's not necessary, but overloading a user with information can sometimes be a big turn-off.

If you've ever tried to do paging through .NET, you know it's a horrible process. Yes, it can be done, but it's painful. As I was doing a recent project, it dawned on me: why not use jQuery? It's actually the perfect solution. There's no post-backs needed, and it's ridiculously fast. We all want faster load times, and this is a great solution. I took it upon myself to write a little jQuery plugin that will do some very simple paging for you. I created a demo page that you can visit with the following link. I realize there might already be some plugins out there, but this is so light-weight and simple, I couldn't help but write it myself.

jQuery Paging Plugin

jQuery live function

I think this is pretty awesome. With the new update from jQuery (1.3.1), you can now add an event handler to a set of elements that are currently on the page, and in the future. With the rise of AJAX applications, this is going to make a lot of jobs incredibly easier.

To put it in non-HTML terms, let's say you wanted to give a child a piece of candy if their name began with the letter 'a'. Previously, you would have to do a census of all the children, find which children fit your criteria, and then give them candy. Once the candy was dispersed, that was it. No more candy. Now comes along jQuery that can handle giving out all the candy to the current children and all future children with names that begin with the letter 'a'. And you don't have to do any additional work.

The new function looks like it can replace the current bind() function format, but you get all the new goodness. Here's an example from jQuery's web site:

$("p").live("click", function(){
  $(this).after("<p>Another paragraph!</p>");
});