Why do I always feel like I’m fumbling around in the dark when it comes to Javascript debugging? Firebug and other tools have been making it a little easier but when you get an error like this:

It’s a little ridiculous don’t you think? I mean really, does IE think I have more than 130 million lines of JavaScript?

At work I was assigned the task of evaluating the major libraries and selecting one for our web applications. I spent some time reviewing the major players and decided to switch from script.aculo.us to Jquery for the following reasons:

1. CSS syntax - Jquery uses the same syntax as CSS to identify elements within the DOM

2. Unobtrusiveness - Because the function identifies the object using the css selectors, there is no need to add any JavaScript in the markup.

3. Microsoft - It seems more and more apparent that Microsoft is hooking their cart to Jquery. Since we’re a .Net shop it was an easier sell than the others.

4. Support - There is a thriving community with examples, tutorials and forums for answering questions.

I’m here at the UIE 13 Conference here in Cambridge MA. Day one is all day sessions. I’ve chosen the Bulletproof Ajax: Designing Interactive and usable Ajax solutions by Jeremy Keith.

Jeremy went over the building blocks of Ajax and some of the history. I’m really enjoying the high level building block discussion. I always find it easier to embrace a new concept if someone explains the “why”. Jeremy has done a great job keeping the technical stuff light while balancing the need to understand the fundamentals. I’ll update later after we put some of the fundamentals into practice. Stay tuned.

Practicing UCD in an Agile development environment can be daunting, frustrating and scary for the traditional user experience designer. After all, we like to design, research, survey, ask questions and create informed designs which get passed to development. UCD naturally fits better in a waterfall methodology.

Here’s the problem: It’s too damn slow. All that work takes time and unless you have great project management who can effectively stack concurrent activities you become the bottleneck. The designer is seen as the obstacle and not the problem solver. Agile development relies on everyone on the team working together in an iterative fashion to complete the work. But wait! what about my research? How can I influence the design if code is being written on day one? How can I survey users? How can I do my job?

You need to change mediums. You need to get closer to your product. You need to transition your skills and you need to get more involved. User’s don’t use your wireframes and photoshop mocks, they use your product. You need to learn the skills necessary to influence change within that product’s interface layer. For webapps you’ll need to bone up on your XHTML/CSS and JavaScript chops. You’ll need to get your hands dirty and work along side your engineers.

It may take some time to gain the skills and the trust to allow you into the codebase for a lot of organizations but that is where you need to be. It’s where the decisions are made it’s where you can have the greatest control it’s where you can influence change.

Since Agile is iterative you maintain the option to make changes during the development cycle. You don’t need to get everything “right” from the start. Let’s face it, we can survey, interview, test and design until we’re blue in the face but we’re not always going to hit a home run. Agile allows you to chip away at the large chunks and create the fine lines later in the cycle. You have the opportunity to test during development and make changes on the fly. It’s faster and more liberating since you are in control of the layer you and your users care most about, the UI.

Sliders are a common way for users to adjust elements with fine granularity. They can offer more choice with a smaller footprint than a drop down menu. They also offer absolute variables so the user never enters into an error state. The problem with sliders is their accessibility. They require decent dexterity since the target for the mouse is ofter small but recently I found this new method that has full keyboard support.

This method offer full keyboard capabilities as using unobtrusive JavaScript which is a method that separates the JavaScript behavior from the page markup.

Here are some other examples of unobtrusive Javascript

• Lightbox
• Calendar pop-up
• Star Rating
• Image Reflections
• Slide Show

Okay I admit it. I “googled” myself (Sean Landry) the other day. I know I’m not alone here. However, I found something unexpected, my page rank. I was way down at #3! There are two other Sean Landry’s out there in the world ranked ahead of me.

#1 - Sean Landry’s Page on 1UP.com

This is a free Blog site for anyone who registered. Not exactly the most popular one out there but I started to investigate. The other Sean Landry had only one Blog post and way back in 2005? So not exactly showing relevance or activity of any sort.

#2 - University of Manitoba: Bison Men’s Basketball Sean Landry

Landry was a member of Mount Royal Cougars 2006 ACAC Championship team. In his first season with the Cougars, Landry registered a 4.1 points per game average and 3.3 rebounds per game in 17 games. He shot a 41.3% field goal percentage during the championship season.

So other than playing good basketball for the University of Manitoba in 2006 why is he #2?

#3 - Sean Landry

That’s me! Number three? I have Sean Landry in the URL, in the title and all over the site and I post frequently.

I’m on a quest to climb to #1. I’m digging up as many SEO tips and tricks I can find. As I find them I’ll post them here and hopefully I’ll show progress! If you’ve got any good techniques I’d like to hear them.

I treated myself to a new computer (Dell Inspirion 530 to be exact). An upgrade from the Dell 4400 which was a real dog. An interesting thing I noticed when installing was the Google Desktop and a few widgets. Not Microsoft Gadgets which which is what I expected if anything. I’m not sure how I feel about it. It seems similar to IE loaded on every new PC back in the day before the anti-trust lawsuit.

I’ve finished a new Google desktop gadget. I used a sample gadget that came with the API download. A simple countdown to Christmas. It’s a little large but this time of year it’s okay to be a little over the top. The countdown JavaScript is Google’s but the images I created. Feel free to download a copy for yourself here. Of course you’ll need Google Desktop to run the gadget. Enjoy!

Yesterday I gave the second in a series of talks on web standards. The topic was a high level look at CSS. Below are the slides.

| View | Upload your own

If you’ve ever written CSS you’ve probably run into issues related to CSS styles which are in conflict. For instance:

.blue { color: blue; }
#red { color:red; }

<p id=”red” class=”blue”>Sample Text</p>

The id is trying to make the text red and the class is trying to make it blue. Who wins? It all depends on specificity. Below is a table that explains CSS specificity.

With the example above the text would be rendered red because the ID has higher specificity than the blue class. To figure out what style takes precedence you work your way across the table. Inline style? Nope. ID? Yes. then that rule is more specific. If they both have IDs then you move again to the right to classes and elements.

The above example would render the following:

p = 0,0,0,1 - not a very specific rule but will cascade quite nicely
p.error = 0,0,1,1 - the introduction of the class negates any piling up of elements (e.x body div ul li span em )
#special p.error - the ID  is higher in specificity. Attributes which are in conflict will use the ID’s attribute values.

For a full explanation see the W3C’s specification.