Running this test: http://celtickane.com/labs/web-browser-javascript-benchmark/

On my laptop, here are my results (lower is better, your results my vary):

Safari 4: 128
Firefox 3.5: 233
Camino: 615
IE 7: 1181

IE 7 is almost 10 X slower than Safari 4. With more and more sites building rich interfaces and AJAX driven interaction this can be a serious issue. Recently I was working on a redesign of some category navigation pages. The new interface used AJAX loaded content and multiple tabs to display content. It worked great under Firefox, IE 6, IE 8, Safari 3, Safari 4, but was painfully slow under IE 7. Slow enough that in deference to the high number of customers still using IE 7, and the potential sales loss, we had to remove much of the rich interface.

Be sure to test your rich interfaces in IE 7 and pay attention to performance. Until people move off of IE 7, we are all somewhat hamstrung with regards to how much JavaScript and AJAX we can use on eCommerce sites.

One thing to keep in mind is to try to limit the number of AJAX requests. IE 7 (and many other browsers) limit concurrent requests to 2, meaning if you're loading 12 fragments via AJAX, it will take 6 full requests/response cycles, each one taking ~200-500 ms. That adds up very quickly. You can pull everything down in one large AJAX request, parse that response's DOM tree, and extract the pieces you need, but A) that's more JavaScript you're using, and B) at some point you're better off just loading a new page.

Another thing to consider is that while JavaScript and AJAX allow us to build better interfaces for our users, allowing them to be better served by our sites, it's often easy to get distracted by what you can do, and by buzzwords, and lose sight of what actually benefits your users and what doesn't.

Friends don't let friends use IE 7.

Lessons learned: while backing up your data stuff is important (/var/www, /opt, etc...) DON'T forget to back up things like /etc and the list of the installed apt packages.

So please, be patient.

*note: some of the examples might be bad Dojo coding (some mine, some inherited) or might be due to me missing the "best" way to do something, however with both Dojo and jQuery I'm mostly using their documentation and/or Googling for how to do something, so any failings in the Dojo implementation are related to the quality and clarity of the documentation and available related pages.*

For instance, the Dojo code that was handed off to AJAX load a page into a div looks like this:

	dojo.xhrGet( {
	    // The following URL must match that used to test the server.
	    url : url2,
	    handleAs : "text",
	    timeout : 5000, // Time in milliseconds

	    // The LOAD function will be called on a successful response.
	    load : function(response, ioArgs) {
		dojo.byId("brandsDiv").innerHTML = response;
		return response;
	    },

	    // The ERROR function will be called in an error case.
	    error : function(response, ioArgs) {
		console.error("HTTP status code: ", ioArgs.xhr.status);
		return response;
	    }
	});

That times 12 for the 12 divs we're updating via AJAX. With jQuery I'm replacing that block with:

$("#brandsDiv").load(url2);

Simpler, no?

Also, with Dijit tabs, there's no easy way to hide a tab and resurrect it later. You have to save off the panel into a JavaScript variable, and reinstate it from that variable later. See how I handled hiding Dijit Tabs/ContentPanes in a TabContainer.

With jQuery Tabs I just use the built-in disable and enable methods along with one line of CSS to solve the same problem. Much easier.

I'm also loving the looks of the new jQuery Tools library from the FlowPlayer folks. Hopefully I'll be using that library soon on a few projects.

Seam 2.x Web Development by David Salter

Packt Publishing just sent me a copy of their new Seam book entitled Seam 2.x Web Development. Authored by David Salter, it seems to be a well laid out practical guide to building web apps with Seam 2. I've only skimmed it so far, but will be posting an in-depth review once I'm able to read through it.

It's great to have a book that covers the new features of Seam 2 and provides examples of common Web 2.0 requirements such as OpenID integration, AJAX/RIA interfaces, and multi-tabbed browsing support using conversation scoped components. Personally I'm interested in reading about the new(ish) Identity Manager API (which I haven't played with yet) and trying to add OpenID support for the application I am currently building.

You can read the second chapter online here: Chapter 2: Developing Seam Applications and let me know what you think of it!

Mr. Slow by Vox

An application I've built is going into production soon. It's the first application I've been involved with which will be using MSSQL server in production, I have some learning about MSSQL to do. After some research, I ended up using the jDTS JDBC driver instead of the Microsoft JDBC driver (which is feature incomplete and has some serious open issues).

We recently began performance testing and saw some odd behavior. Initially the application was performing well. However after few runs of the stress test the performance went from good to awful. The main web service call went from 600 ms to 23,000 ms. The database server's CPU was pinned, and the app servers were barely loading, spending all their time waiting for the database server to return queries. Stranger still, my local instance (running against PostgreSQL) performed well with the same code and same stress tests. Luckily a smart MSSQL DBA was able to figure out why the database was burning so much CPU and responding so slowly.

One of the primary queries is against a table which has been growing. The select query is simple and had an indexed column in the WHERE clause. Even as the table grew to over a million rows, it should have been a very quick query. Unfortunately it was taking several seconds to complete. My local instance had over 30 million rows in the same table in PostgreSQL and the query was lightening fast. The DBA discovered that the query execution was converting the indexed varchar column into nvarchar values for comparison with the query parameter used in the WHERE clause which was inexplicably coming over as an nvarchar. This datatype mismatch between the column definition and the query parameter meant that MSSQL was doing a scan of the million+ record index instead of the almost instant seek it should have been doing.

It turns out that jTDS sends String parameters over as Unicode (nvarchar) by default. It's easily fixed by adding this property to your connection-url:

sendStringParametersAsUnicode=false

That immediately fixed the performance issues.

So, if you're using jTDS and are using indexed varchar columns in your queries, you should add the property above to avoid your indexes being wasted and your queries running slowly.

The standard configuration for the MailSession is in the components.xml file and looks like this (if you've used SeamGen to create your project):

	<mail:mail-session host="@mailhost@" port="@mailport@" username="@mailusername@" password="@mailpassword@" />

Then each of your environments has a components-{env}.properties file, which is deployed out and used to populate the @variable@ placeholders in the components.xml file. For instance your components.dev.properties file might look like this:

jndiPattern=YourApp/#{ejbName}/local
debug=true
mailhost=mail.mydomain.com
mailport=25
mailusername=mailus3r
mailpassword=mailp4ss

Which works great. However, if for instance your production environment uses IP based mail authentication for outbound e-mail, you might try to set your components-prod.properties file to look like this:

jndiPattern=YourApp/#{ejbName}/local
debug=false
mailhost=prodmail.mydomain.com
mailport=25
mailusername=
mailpassword=

However, that ends up setting empty strings into the username and password member variables of the MailSession component, and unfortunately the logic which determines whether or not to authenticate with the mail server checks for nulls only. So with empty strings, it attempts to authenticate with the mail server using a blank username and password. Which fails, and causes an unhelpful Faces error (unless you turn on debug on the MailSession component).

I've logged a Jira ticket about it here: JBSEAM-4176

You can do a simple workaround by overriding the MailSession component with your own sub-class of the MailSession class. In your sub-class you can override the setUsername and setPassword methods, check for empty strings and set null into the member variable if the parameter is null or empty. Luckily the Seam Install precedence system makes it very easy to override the default Seam component.

package com.myapp.mail;

import static org.jboss.seam.ScopeType.APPLICATION;

import org.jboss.seam.annotations.Install;
import org.jboss.seam.annotations.Name;
import org.jboss.seam.annotations.Scope;
import org.jboss.seam.annotations.intercept.BypassInterceptors;

/**
 * The Class MailSession. This is an overriding class designed to work around
 * https://jira.jboss.org/jira/browse/JBSEAM-4176
 */
@Name("org.jboss.seam.mail.mailSession")
@Install(precedence = org.jboss.seam.annotations.Install.APPLICATION, classDependencies = "javax.mail.Session")
@Scope(APPLICATION)
@BypassInterceptors
public class MailSession extends org.jboss.seam.mail.MailSession {

    @Override
    public void setPassword(String pPassword) {
	if (pPassword == null || pPassword.trim().length() == 0) {
	    super.setPassword(null);
	} else {
	    super.setPassword(pPassword);
	}
    }

    @Override
    public void setUsername(String pUsername) {
	if (pUsername == null || pUsername.trim().length() == 0) {
	    super.setUsername(null);
	} else {
	    super.setUsername(pUsername);
	}
    }

}

1. First I made an image of my BootCamp partition using WinClone.
2. Next I ran one final Time Machine backup to my Time Capsule.
3. After that was complete, I shut the machine down.
4. I swapped the new hard drive for the old one. Apple has a great guide on how to replace the hard drive in the laptop. The SSD is MUCH lighter than the OEM hard drive.
5. I booted up with the Leopard OS X Install DVD.
6. I selected the disk utility from the menu, and formatted the new hard drive with an HFS+ partition.
7. I then had to reboot in order for the new partition to show up under the Restore option.
8. After rebooting to the Install DVD again, select the Restore option from the menu, and select your most recent Time Machine backup. The step where it's calculating the size of the backup can take a VERY long time. Be patient. The restore itself can take a while. My 220 GB took about 8 hours to restore.
9. Now you should be able to boot into your system from the new hard drive.
10. If you don't use BootCamp you can skip these steps:
    1. Run the Boot Camp Assistant and recreate the Boot Camp partition. Make sure it's the same size or larger than your previous one.
    2. Start the Windows installation process using your WIndows install CD/DVD. Make sure you format the Boot Camp partition. Once it starts actually installing Windows, you can force a shut down.
    3. Boot back into OS X, and use WinClone to restore your Boot Camp image to the partition on the SSD.

It's like having a new machine. Booting used to take 60-90 seconds from off to 100% up and ready, including Quicksilver loading up, etc... Now it takes about 5 seconds. Applications load pretty much instantly, without bouncing in the dock. Shutdowns and sleep happen instantly. The whole machine feels amazingly faster.

It's not the cheapest thing, but it's a very worthwhile upgrade.

Other than using lynx to test your site, there are several other tools I would recommend utilizing in your quest for better SEO. One great tool is the SEO Analysis Tool from SEOWorkers.com. This tool quickly analyzes the page, and provides excellent reports on the size and relevancy of your meta tags. It also provides data on the frequency of keywords, singly and in groups of two and three. Here is a part of the a report for sparkred.com:

I've already mentioned utilizing Google Analytics to monitor what keywords are bringing you good traffic versus bad. I'd also recommend another Google tool, Google Webmaster Tools. Google provides a TON of useful data here. You can see things like the crawl frequency, page response times during the crawl, and page rank of your pages (including a by month breakdown). You can also use quick links to see related pages, pages which link in to your site, all the indexed pages of your site, and more. It also gives you diagnostics into any problems with the crawl or your meta tags.

How to Promote Your Site

In order to drive traffic to your site and to increase your ranking in search engines, such as your Google Page Rank, you want high quality links pointing to your site. By high quality links I don't mean spam links, link farms, or the like. I mean links on relevant sites pointing your site, driving high quality traffic.

There are two halves to this. The first is to provide really good quality content on your site. This means having a great site, it means updating your site frequently, and it means providing non-core but helpful related content. An example of that might be having a blog that provides related content. For instance for MyShoeStore.com you might have a blog with posts about the latest fashions and how to match shoes to each look, the best sales you're currently running, the 10 most extreme shoes of all time, photos of the shoes worn by celebrities that week, etc... You want something that will have people returning to visit your site more frequently, and something that will make other people link to your site in their blogs, tweets, Facebook pages, IMs to friends, and so forth. If you have a blog post about the shoes on the red carpet at the People's Choice awards, people will link to that from tons of forums discussing fashion. Those a great links! Relevant high quality links bringing in high quality traffic. And you just need a blogger. A college fashionista who wants to get into fashion journalism will do it for cheap.

The second is to promote your site on other sites. Find forums and communities that are filled with the people you want to attract to your site, signup, and contribute to the community conversation. Note I didn't say spam the community. Post useful stuff. Even stuff that links to sites that aren't yours. Be a real contributing helpful member of the site. In your site profile, have a link to your site, and when it's relevant feel free to link to your site, your latest sale, whatever, as long as it's relevant. Obviously if you're an ATG developer or a VP of IT, it's probably not you doing all this, but have someone do it.

Those two things are how you get traffic and a high page ranking in the search engines. It's all about having good content and being an upstanding citizen of the relevant online communities.

By making your URLs expressive and relevant to the content and structure of the site, you help not only your search engine ranking but also your users, since they can easily tell what a given link will take them to.

This is a bad URL:

http://myshoestore.com/app/cat/browse.jsp?id=245345&cat=234523

This is a good URL:

http://myshoestore.com/shop/mens-shoes/fluevog/size-12

It is chock full of descriptive words. The page allows you to "shop" for "mens shoes", more specifically "fluevogs" in "size 12". This makes it much easier for search engines to know the purpose of the page and also for users to know what a link will take them to.

In order to accomplish this, you should name your directories and pages as accurately and descriptively as possible. You should also structure your site's content and URLs in a logical hierarchical fashion.

Now your site may have a single actual JSP that handles displaying a category, and another one that handles displaying a product, any product. So you need to map the URL http://myshoestore.com/shop/mens-shoes/fluevog/size-12 to actually serve up the content from http://myshoestore.com/app/cat/browse.jsp?id=245345&cat=234523.

Depending on your technology there are different ways to do this.

If you're using JBoss Seam it's very easy to use rewrite patterns in the pages.xml mapping file. This not only handles mapping the incoming requests for pretty URLs to the actual resources on the backend, but also handles generating the pretty URLs within the site automatically, which is a huge time saver.

If you're using Apache you can use mod_rewrite to translate the pretty requested URLs to the ugly actual URLs. Of course in that case you need to ensure you're generating the correct pretty URLs on the pages of your site.

If you're using ATG you should read the chapter of the ATG Programmers Guide titled Search Engine Optimization (chapter 10 for ATG 2006.3). This covers the ATG support for URL Templates and the Jump Servlet. A few of the downsides to be aware of, are that it's not super simple to set up, and that it only displays the pretty URLs to search engines, not to all users. I really prefer solutions that give users the benefits of readable URLs as well. The out of the box ATG system has too much of a performance impact to use for all situations.

We'll be releasing a high performance open source solution for URL re-writing in ATG eCommerce applications as part of the Open Source Foundation ATG eCommerce Framework in the near future.

Know Your Limits

Search engine spiders, like the GoogleBot, have limits as to what they'll parse and consider. For instance the GoogleBot will only read in the first ~101kb of your page's HTML. Anything after that is ignored. So you need to ensure that your pages are smaller than 101kb. This is also a best practice with regards to performance: keep your HTML as small as possible.

Search engines will often display a small chunk of text with the search results, usually this is taken from the page's description meta tag. Most will only show the first 160 characters of the description, so you want to be sure that your description content is less than 160 characters and makes sense for a human to read.

Many search engines will ignore, or penalize you, for having more than 100 links on a given page. Keep the number of links on a single page to a reasonable level. If your primary navigation must have more than 100 links, you can load in the second, third, etc... level navigation via AJAX/Javascript.. This will let your users have access to the full navigation structure from any page, but keeps things more reasonable for the search engine crawler. You'll want to be sure that the crawler will be able to traverse through the complete site structure using the more limited navigational options it can see, the non-AJAX navigation.

Use the right tags for the job. For high importance headings use <h1>, for lists use <li>, and so on. Don't JUST use CSS classes for styling, make sure you're also using the appropriate HTML markup for your content. By using semantic markup you can identify the importance and structure of the content and data on the page in a way that not only assists search engine crawlers, like GoogleBot, understand your content better, but also supports alternate browsers/web clients such as screen readers, other accessibility tools, and future applications.

Accessibility

By designing your site to be easily accessible to search engines, you also end up making it accessible to people with disabilities such as the blind or vision limited. Or you can look at it the other way: by designing your site to be accessible to people with disabilities and to be WAI or 508 compliant, you end up with an excellent site for search ranking.

It can often be hard to justify the cost and effort to make your site 508 compliant, even if it's a legal requirement, however if you view it as a SEO effort, it's much easier to assert a strong ROI on the project, and kill two birds with one stone.

You can read more about accessibility here:

• Andrea Hill's Blog
• WAI Homepage
• Web Accessibility entry on Wikipedia

Standards

Be sure you're following standards and best practices around your markup. This includes having nicely structured, valid, HTML/XHTML markup, and also being sure you have accurate helpful alt and title tags on your links, images, and other dom elements.

See what GoogleBot sees

First you have to be able to see the page the way GoogleBot sees it. The easiest way is to use a text based web browser like links or lynx. GoogleBot is actually a customized version of lynx, and supposedly has been/is being improved to be able to cull some data out of Flash, and possibly even some Javascript driven content, however it's best to assume that what lynx shows you is what GoogleBot sees.

You'll want to design your page structure and dom tree to be logical in order, structure, and semantic. Here is a view of CNN.com in lynx:

The CNN.com homepage viewed using the lynx browser

It's extremely usable. You can see the main navigation first thing, and if you scroll down you see the main headline stories, latest news, etc... This is what you want your site to look like to GoogleBot.

In contrast, here is what a large theatre's website looks like in lynx:?

The primary navigation on the real site doesn't even appear here. The images don't have titles or alt tags, and the structure is lacking and confusing. This is NOT what you want your site to look like to GoogleBot.