.ajax beforeSend Doesn't Fire

I absolutely adore jQuery but there are some things that are just plain hard to do with the current version. One of those is cross-domain (JSONP) requests. No only is the setup convoluted but the requirements are exacting to arrive at a working solution for something that should be (?) reasonably simple. But I'll save the details for another time—for now, just know I'm building with jQuery and using JSONP to issue cross-domain requests.

Under the covers, that cross domain request is actually being issued by dynamically loading a new script tag in the DOM, even though everything's still handled through the $.ajax() function. It's workable, of course, but since there are no XMLHTTPRequests involved, the behaviour is apparently somewhat different. In my particular case, I was wiring up  'beforeSend and 'complete' event handlers to show and hide a spinner across the lifetime of the request; the 'complete' handler was firing fine but the 'beforeSend' handler wasn't firing at all.

A response by SLaks to a Stack Overflow post reminded me the request mechanism with JSONP is different and implied 'beforeSend' wouldn't work with this setup. His response instead suggested showing the spinner after the $.ajax call and this did the trick for me. 

IE8 dev toolbar disable script menu grayed out

The Disable –> Script menu option in the IE dev toolbar has baffled me for a while now: sometimes it’s enabled, sometimes it’s disabled (as in grayed out and unselectable), and whenever I need to use it I can’t. I’ve also noticed some of the tabs (namely Script and Profiler) occasionally disappear—easily solved by restarting IE—so I’ve put down the Script menu issue to bugginess. Thankfully the IE(6/7) Dev Toolbar download page makes clear that “Some menu items are unavailable (grayed out) when running Internet Explorer in Protected Mode on Windows Vista.” I’m running Windows Server 2008 R2 with User Access Control intact and, sure enough, opening IE by right-clicking the IE icon and selecting Run as administrator enables the Script option.

With the IE dev toolbar now built into IE8 and IE being the defacto intranet/corporate browser that it is, I can see why this would be locked down for non-admins; I suppose you don’t want those pesky information workers and power users hacking your corporate forms. What a hassle though.

.

YSlow Configuration “Use a Content Delivery Network (CDN)”

The westernaustralia.com site is served to users all over the world from the most remote city in the world: Perth, Western Australia. In other words, we target users in core markets across Australasia, Europe, and North America and while we expect a consistent homepage load time below ten seconds in all cases, Perth to New York, Perth to London, and, really, Perth to anywhere equates to high latency, congestion, and poor response times. Couple that with SharePoint, a rich, interactive site design, and an excessive number of page requests and you'll begin to appreciate why we chose to serve the site across Akamai's content delivery network.

I'll describe the setup in detail someday but for now, I've finally managed to convince YSlow the site is being served using a CDN; while we use better tools for global performance measurement (Gomez), seeing a low grade—in part because the hundred-odd requests were perceived to be served without a CDN—was starting to get me down ;) YSlow is a great plugin for analysing your site in Firebug but it's grading system can be a bit tough.

The YSlow FAQ will tell you how to configure the plugin to acknowledge the use of a CDN by setting a extensions.yslow.cdnHostnames preference. I won't repeat those details here but will expand on how the string value might be configured to tell YSlow a CDN is in use—whether you’re telling the truth or not. It’s surprisingly simple.

In our particular case, www.westernaustralia.com is a CNAME to an Akamai URL so telling YSlow to use akamai.com as a CDN doesn’t make sense and YSlow isn’t smart enough to figure things out on its own. Since www.westernaustralia.com is implicitly its own CDN, configuring the the extensions.yslow.cdnHostnames value as westernaustralia.com sorts everything out. I had to restart Firefox (3.5.x) and reload the page for things to take effect.

If you’re not using a CDN and want to turn off this particular component of your grade (or at least make it an “A”), simply add your own URL; regardless of whether you’re actually using a CDN, YSlow will think you are.

westernaustralia.com Relaunch and Other Website Recent Activities

If you’ve been following the progress of the westernaustralia.com website over the years, you’ll already know the site was one of the first in Australia to be launched on the MOSS 2007 platform and has been consistently voted as one of the top fully branded SharePoint sites in the world ever since. Having worked on the site since the get-go and as the current technical lead for the project, I’m the proud owner of the site’s programmatic aspects; today I’m tickled pink to tell you, the SharePoint community, about yesterday’s launch of the new Tourism Western Australia brand, Experience Extraordinary, and, more specifically, the brand’s impact on the westernaustralia.com website.

At the moment we’re working with the Digital Marketing team on a two (or three phase) approach (depending on how you look at it) to implement the new brand. The first phase unfolded in August last year and involved the neutralisation of the preceding brand’s elements (The Real Thing) while the latest creative design agency, Host, was appointed. Phase 1 of the new brand implementation kicked off in the dev team a little over three weeks back and involved making the Photoshop mockups provided by Host into a living website. This work focused largely on the page banners (vibrant imagery, the tab, and extra height), the navigation, the background colour (trust me—everything is more complicated than you might think at first glance with wa.com!), what we call the ePostcards element, and the footer elements.

Here’s a picture of what I think is a visually stunning website and a vast improvement over its predecessor:

Phase 2 holds still more secrets but you can bet we’ll be making all the middle bits fit with the rest of the changes. One of the challenges we’ll be facing is getting the home page weight down from a whopping 1750KB and 100 requests. Stunning, certainly, but our CDN of choice (Akamai) allows us to get away with this sort of monkey business.

In addition to all the glam, we also took the opportunity to overhaul the heading infrastructure. This subsystem is designed to give content editors the ability to upload new banner images and all of the corresponding display data required to render the Flash banner. The Flash banner itself was built by Host from our previous banner and it takes as a parameter an XML file providing all the information it needs to display the banner images, text, links, and colours.

Obviously this data is stored in a list to which the FlashBanner.cs web part communicates at render time. Like I say, nothing in wa.com is as it first appears and one of the more complex requirements was allowing a subsite to override the banners displayed for for it and its children (in effect to support the major subsections of the site such as the destinations). Apart from simply walking up the site hierarchy recursively until a banner list is found, we then needed interrogate the list and emit an XML file acceptable to the banner; the URL to the file is finally cached with a dependency on the file itself.

Interestingly, this was one of the first times we started using event receivers on the banner lists to invalidate the cache when a banner is added, edited, or deleted; this keeps the content editors happy and productive and is one less of those annoying “is my banner cached in the browser cache | Akamai | reverse proxy| application cache | output cache | blob cache?” questions ;)

I’ll also point out we’re using a simple custom list for this instead of a picture library or custom list derived from a picture library. The previous version of this list was in fact a custom picture library but it suffered from broken thumbnails (which we now know how to fix) and proved rather cumbersome to use in practice (no reordering, a difficult view, etc). The move away from the picture library wasn’t, in retrospect, necessarily a great decision but it was probably the best decision at the time and came with considerable deliberation. The one major problem with the current approach is banner images must be uploaded separately to a real picture library and then referenced from the list; this is a bit of a double-up and disconnects the image itself from its metadata. As our understanding of list development and the peculiarities of these other list types increases, we may revisit this approach.

Also at a technical level, we recently move the site from our old IBM BladeCenter kit running Windows Server 2003 x86, MOSS 2007 SP1 (not even the Infrastructure Updates—gasp!), .NET 3.0, and a non-clustered SQL Server 2005 x86 database server. Everything was virtualised on ESX 4.0. We actually had three of these farms: one in prod, one in DR, and one for authoring; as content deployment never worked for the site, this meant a daily backup and restore of the content database from authoring to production and corresponding switch to or from DR (with DR actually being treated as a standby prod environment). That must have really sucked for our admin who had did that essentially manual task every business day since launch in May 2007. What. A. Drag.

From that setup, we moved to what was briefly the bees knees: Windows Server 2008 x64, MOSS 2007 SP2 + June 2009 CU, .NET 3.5 SP1, and a clustered SQL Server 2008 x64 database environment. Everything is still virtualised on ESX 4.0 and the entire setup is mirrored in DR. We’ve finally done away with the authoring farm so content editors are editing content in the production farm (we’re working towards a tiered security design and approval workflows, by the way, but our content editors have been working with the environment for years now and are mature in their understanding of how not to break the site ;). So no more daily content deployments and those of us in the dev team can finally start working with .NET 3.5 and LINQ.

For more on how we run the site, check out my Perth SharePoint User Group presentations and videos (things have changed but not that much):

http://blog.mediawhole.com/2009/02/how-we-do-wcm-at-tourism-wa-im-speaking.html

http://blog.mediawhole.com/2009/03/presenting-at-next-sharepoint-user.html

If you’ve read this far, you deserve the chance to win a prize. Want the opportunity to take an extraordinary taxi ride around the state of Western Australia? If so, check out the “brand activation” microsite: http://www.extraordinarytaxiride.com.au/

Note: I am employed by Tourism WA as a contractor working for Diversus. Mediawhole, mediawhole.com, and this blog are not associated directly with Tourism Western Australia or the westernaustralia.com website. The information provided above  is published independently as a member of the public and does not reflect the views of Tourism Western Australia or Diversus. Please consult a Tourism WA representative for more information about its brand, campaigns, and websites.

The Keywords Meta Tag Doesn’t Matter

Every wondered if the major search engines still consider the keywords meta tag? Well most don’t and haven’t for a very long time. Here’s the latest from the search engine driving the majority of search-based traffic to your sites:

http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html

Manual keyword maintenance, automated keyword builders, and so on: goodbye and good riddance!

Failure serving a file with a percentage character in the file name

An unexpected 404 error cropped up today while attempting to serve an image file with a percentage character in the file name. Windows has no issues with percentages but apparently IIS or something else in the pipeline refused to serve this file. Interestingly, the '%' character URL-encodes as '%25'... go figure.

CMYK .jpg images don’t render in IE and Firefox

For the second time in recent memory I was today faced with a "broken" image in IE 8 and Firefox 2.x due to the image being saved using the CMYK colour mode instead of RGB. Interestingly, Chrome was quite happy to display the image as it was; I had to open it in Photoshop, change the mode to RGB, and save it back for the other browsers to respond. Apparently saving for web does the same thing.

Here’s the image in CMYK:

 And here it is again in RGB:

Web site performance monitoring tools

Having gone through the pains of learning about web site performance and applying that understanding to a MOSS site (www.westernaustralia.com), the latest post on the SharePoint Team Blog about optimising sharepoint.microsoft.com caught my eye. I’ve been meaning to cover the performance nitty gritty from our experience for ages now but, for the moment, suffice it to say we fixed most of the problems faced by our global audience and now use a commercial performance monitoring service called Gomez to keep an eye on things. Gomez competes with the likes of Keynote if you’re in the market.

Commercial solutions like this cost a lot of money because they’re essentially distributing test agents all around the world and measuring full page load times from your site at a configurable interval. Response metrics are stored for trending analysis and comparison with other sites. Despite the cost, these tools are worth the money if you know your site is experiencing performance issues (if not the data gets boring really fast).

Firebug, YSlow, and Fiddler are great tools for analysing performance and will give you both page load time and page weight but they’re all executing from your desk; if your web server is down the hall or in the same city (or country) you may not have a clear picture of how latency is affecting your site users on the other side of the world. If you’re targeting a domestic audience that’s obviously not a problem but if you’re targeting a global user base and you’re attempting to do so with SharePoint you need to ensure everything about your site is optimised—not just just the server configuration. The SharePoint Team Blog post highlights the fact SharePoint (MOSS 2007) is not optimised for internet sites out of the box.

As the cost of these performance measurement services is prohibitive—especially in this tough economy, it’s interesting to see where the free services are going feature-wise. I mention the SharePoint Team Blog post specifically because the author cites a new tool I hadn’t yet come across: http://www.webpagetest.org/ I’ve previously evaluated Pingdom but their offering was still developing a year ago (they offer both free and paid services).

The webpagetest.org site is painful on the eyes but the data they provide at no cost is comprehensive. The site currently allows you run tests from one of three nodes (the US, UK, and New Zealand), meaning an adequate global coverage (we test westernaustralia.com from seven locations matching the site’s target markets).

The tool reports the results from a full page test, meaning the page and all of it’s supporting resources are requested, providing a realistic picture of how long it takes to load the page and all CSS/Javascript/images/XML files/Flash files/etc. Some of the freebie offering I’ve seen in the past only reported the page HTML load time, which will often be negligible.

In addition to giving you a screenshot of the page, which is often useful to compare what the world sees versus what you think they’re seeing, you get full waterfalls of data for a first visit and what they call a repeat view (a subsequent request for the same page with a primed browser cache), and an item by item optimisation checklist.

I’m impressed!

YSlow for Firefox 3.5 Lives?

YSlow has been the tool for measuring page payload and providing the metrics you need to optimise web site performance beyond the web server. Shock horror when I recently upgraded Firefox to version 3.5 and couldn’t install YSlow.

Initial rumours confirmed the current version of YSlow doesn’t work with FF3.5 but also suggested development by Yahoo! had ceased. Meanwhile Google launched Page Speed—a likeable YSlow competitor (maybe?).

A recent posting from a Yahoo! dev would suggest YSlow will actually be updated but “the team has run into some integration issues with firebug 1.4.” If you want to install FF 3.x and 3.5 side-by-side, check out this guy’s article.

New Sites, New Widgets

Rottnest Island Authority Re-launch

The second-last site to be launched on Tourism WA's fully branded, MOSS-based site provisioning platform went live last Thursday; I reckon it’s one of the best looking sites they've launched to date (the Rottnest Island photography helps, of course). Check it out: http://www.rottnestisland.com

[Update 22 July: As mentioned in my profile to the right, I'd like to clarify the fact the new rottnestisland.com web site is provided by Tourism Western Australia under the Tourism eMarketplace program; although I was involved in the technical construction of the web site as a contractor working for Tourism Western Australia, Mediawhole and mediawhole.com were NOT involved in the launch of this web site. Whereas I previously used the terms "we" and "our" in this post, I was referring to Tourism WA and teams working with the Rottnest Island Authority.]

Booking Exchange

On the subject of all things new, the new online booking capability has also launched on westernaustralia.com. The system integrates with our existing search function and provides live availability information from V3’s Open Booking Exchange. The politics around this apparently simple change were massive but the technology side was relatively straightforward by comparison (web service calls from within SQL Server are as complex as this got from our end). If you’re a tourism operator, find out more.

Travel Planner

The online travel planner was also finally launched after nearly a year of work with a Sydney-based agency. Luke was our man on the ground with this one and he did a great job integrating drop after drop of this widget.

The travel planner “helps visitors collect, organise and share their WA travel itineraries.” You can sign up from the westernaustralia.com homepage and add items from across the site to your travel wallet.

SharePoint on SharePoint – Under the Hood

The SharePoint Team Blog just announced they’ve launched the www.microsoft.com/sharepoint site on SharePoint itself with a large sprinkling of Silverlight. The post mentions the use of the publishing feature and SEO optimisation so I thought it would be interesting to see if I could find any really cool, secret WCM optimisations. I’m disappointed and can’t suggest modelling your own internet-facing MOSS site on this site :-(

• Looking at the site URL alone I can tell this is a MOSS site: /pages/default.aspx. I was hoping to see the /pages directory magically vamoosed from the URL and I’d hardly say Default.aspx is SEO-friendly.
• The total page weight, according to YSlow, is 538.5KB, which translates into a load time of 13.81s from Western Australia and a grade of F (despite waiting for the Silverlight banner to load the page load time didn’t feel too bad but reloading with an unprimed browser cache was sluggish but I have little doubt they’re running off a CDN)
• The JavaScript and CSS aren’t minified and both init.js and core.css are loaded in their entirety.
• The number of resources requested by the page is significant and there’s been no apparent effort to merge CSS and JS files
• The page viewstate equates to 62KB of the overall page weight while another 68KB pertains to inline Silverlight load script stuff

The single neat-o thing about this site (let’s say apart from its content and this is a technical blog) is the way hitting the Login link or trying to hit /_layouts/settings.aspx redirect to the Live login form. It would be interesting to know if they’re actually using Passport authentication on this site.

Silverlight Penetration

I’ve posted a few entries on my findings around Silverlight penetration (see Resources, below, for more) but recently received a request for an update from someone called Harder. I’ve actually been meaning to post current stats for some time so thanks for the kick in the pants! I’ll aim to post updates every quarter going forward.

The figures represented are drawn from the Omniture SiteCatalyst web site analytics package, which tells me the number of visitors to our sites with a given plug-in vs the internet average over a given date range. Unfortunately the internet average is always shown as a constant with no further qualification (changing the date range doesn’t change the value and it’s unclear how the average is calculated) and Omniture does not indicate plug-in version. In the first case, I’m reporting the internet average from the point in time where I’ve recorded it—so I don’t have continuous data; in the second case, assume a mix of version 1 and 2. The same goes for Flash.

From the graphs below we can see one very interesting bit of information: Silverlight has been installed by 28.4% of internet users as of today (compare with 17.6 in September 2008). The number of users visiting our sites with Silverlight installed is considerably lower than the internet average, which is interesting because while our sites are graphically intensive and somewhat interactive we do target a wide audience with differing levels of technical ability.

Resources

• Silverlight Penetration (October 2008)
• Silverlight vs Flash Penetration (February 2009)
• Driving Silverlight Update – Playboy Archive (March 2009)

Clear the Flash Cache aka Local Storage

You’re probably used to the idea of session state and cookies and how to clear them using you’re favourite toolbar. Did you know the Flash plug-in also has its own client-side cache called Local Storage? Just like any other cache, stuff will occasionally get stuck in Local Storage and you may need to clear it out.

You can control your local storage settings by right-click->Settings… on any Flash movie but as far as I know you can’t clear cached data using this approach. To comprehensively clear the Local Storage cache I use this web-based tool provided by Adobe:

http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager07.html 

Putting Creative Agencies on Notice

Working across a number of highly-visual, rich, and interactive web sites, I’ve had the, ahem, delight of working with several of Australia’s big creative design firms over the years. I won’t name names.

These guys have variously been tasked with building good looking sites and funky widget things; their modus operandi involves mood boards, wireframes, and giving themselves stupid titles like Web Maven and Producer. They seem to rate their development ability on the basis of their ActionScript skills and their capability (I’m guessing) to offload—er, subcontract—work to an Indian sweatshop doing MOSS and AJAX and/or hire junior devs with just enough aptitude to fool most people. Naturally they’re happy to charge thousands of dollars for something like an email template—but they’re used to that because they all come from over East. Marketing people love them because they use the words “digital” and “creative” and have beards.

Well Mr. Creativity I’ve got news for you: your development skills suck and the recession economy means most organisations will be expecting full value for the outlandish buck you charge. To wit, you’ll need to start delivering more than spiel because I’m onto you.

Some of the experiences I could recount here would come across as unbelievable but here are a few classic examples nonetheless…

Creative Agency Blunder #1

We’ve been battling it out with a particular agency from Sydney for a year now just to get a reasonably simple data-driven application built that would integrate with our existing mapping solution (which the same firm built in 2007). When we first went back to these clowns the same guys who did most of the work back in 2007 were still around and picked up the new bits… before they resigned. Fair enough, people leave places. The only problem was the application was largely built in Flash and we’d already started integrating; you’ve already read my comments on the development abilities of these agencies (why can’t they just stick to being creative? They’re good at that!!) so needless to say the code was buggy and half the functionality requested hadn’t been implemented (spec? What spec? There never was a spec…).

Back and forth we went with the replacement creative team while they effectively rewrote the existing application in HTML and JQuery, retaining bits and pieces of the Flash here and there; deliveries kept coming, poor Luke in my team kept on re-integrating, bugs kept getting found, and no one had the guts to can the project.

Naturally we had a small number of change requests as the process trundled along and we were happy to pay for those changes. But the real punch line was when we received a bill for bugs they themselves had introduced! No joke—and this after significant delays brought about only by their incompetence.

Creative Agency Blunder #2

Then there’s our MOSS developer friends, also out in Sydney. Initially they requested remote access to our MOSS environment so they could develop yet another flashy but very simple applet. I declined that one as we hadn’t worked with them previously at the technical level and there’s no way I could trust them to behave within our constantly moving code base—and that’s apart from figuring out how to expose TFS and all other bits of our environment externally.

These guys actually produced a “spec” for us, which was reassuring; it was one page, of course, but the five bullet points covered largely what would be required and I made the silly assumption Marketing, as the group managing the contract (don’t ask), would have a firm grasp on things from their end. The spec basically said “web part”, “rss feed”, “web service you’ll write”, and some mention about Flash/Silverlight/AJAX. The price tag would be 10k+ and we would write all of the backend functionality in-house so they couldn’t botch it up and we could reuse it for another part of the site. Put it this way: all they had to build was a web part with some basic animation that pulled a small amount of data from a web service we would expose—nothing more.

The first delivery—after they emailed me to figure out how to invoke one of our web services—included a user control and instructions on how to install Son of Smart Part. The control was also built to rely on session state which I believe is a joke for any big web site (the widget would be going on our homepages… and we’re sitting behind two layers of caches, which was made clear to them). Finally, all the CSS and javascript was bunged into the control itself instead of sitting in external files—surely they can at least do that bit well?!?

I sent that version back before we even attempted to integrate and they responded a few days later with v2. Rewritten as a web part, I passed it along to Matt in our dev team for integration and he soon noticed basic functionality was missing—all of the key wiz bang, essentially. As Matt had already undertaken some work to integrate the thing, we sent it back with the request they work from our modified code base as much as possible, to which they agreed.

v3 came back to us the afternoon before launch day with none of our modifications but we progressed re-integration anyway—the turn around time to raise this and wait for a reply of some form was unacceptable. Did I mention when they “tested” version 3 before sending it our way they forgot to switch over to calling our web service and seemed to be astounded at the old data they were seeing—from their servers!!! Lo and behold, this version incorrectly addressed what was missing from the first version and broke another aspect of the control.

Sigh… by this point we’ve spent as much time attempting to integrate the thing as it took the agency to build it and it’s still nowhere near where it needs to be. Did I say how simple this was supposed to be?

My advice to these agencies is as follows:

• Define a technical specification that you understand
• Don’t deliver subpar code—test to make sure it meets the requirements and delivers basic functionality expected by any normal web user. Value add in this area.
• Don’t charge your customers for your mistakes
• Reduce your rates because you’re not worth what you’re charging
• Get with the times: Flash sucks big time and Silverlight/AJAX will slowly kill it; do what you do best (design) and hire people with the skills to deliver in whatever technology set you’re selling—not inner-city Photoshop monkeys who think they’re developers because they can write bad Javascript.
• You’ve got to communicate to integrate
• Stop giving yourselves stupid titles you can’t back up

IE8 Browser Share

With the IE8 launch pending, here are our latest (Q4 2008) IE8 stats from the Tourism WA eMarkeplace sites. 

I'm curious to see how quickly users adopt the next Internet Explorer  release and how it affects the current IE browser share breakdown. The number of visitors on IE5.x, for instance, is negligible; should we expect IE6 to be squeezed out as well or is it more sensible to think IE6 users aren't using Windows Update and current IE7 users will end up on IE8 before we see any drops in the IE6 share? Who knows--should be interesting though!

---

Custom-Built Microsoft Office SharePoint Server 2007 Branded Sites and Webpart Development - info@mediawole.com

Silverlight vs Flash Penetration

Following on from the previous Silverlight penetration stats I posted last year, the latest (Q4 2008) figures are now in! 

15% of our visitors across all of the Tourism eMarketplace sites have some version of the Silverlight plugin installed (Omniture doesn't say which version). The internet average has increased since October and is now sitting at 21.5%--a reasonable gain. 

The ultimate contest is with Flash, however, and our stats are still telling us all site visitors have a version of the Flash player installed.

---

Custom-Built Microsoft Office SharePoint Server 2007 Branded Sites and Webpart Development - info@mediawole.com

How to Clear Your Browser Cache 101

If you're a web developer you should really know how to do this by now; if not, I'll let you off the hook...

Quick and easy--always try this first: CTRL-F5 (note, I didn't say SHIFT-F5 and I didn't say F5 all by all itself). If this doesn't work, proceed.

Internet Explorer 7 & 8

1. Tools -> Internet Options
   
2. General tab, Browsing history section, Delete... button
   
3. Temporary Internet Files button or Delete all... button
   

While you're in here, you may also want to consider changing your browser's caching behaviour. To do so, progress to step 2, above, but instead of clicking the Delete... button, click the Settings button. Change the 'Check for newer versions of stored pages' to 'Every time I visit the web page'. Note this may affect the time it takes to load web pages initially.

Clearing your cache this way clears content for all sites you've visited, which can be a hassle if you're only having problems with a site in development or a single site and you use this browser for day-to-day browsing. If you want a more refined, more accessible mechanism for clearing your browser cache, install the free IE Developer Toolbar. Last I heard, the next version will be built in to IE8 but, meanwhile, it Firebug's poor, uneducated, inbred third cousin for IE6/7 and it generally does the trick. High, high hopes for the IE8 version...

To clear your cache using the IE Developer Toolbar, follow these steps:

1. Install the toolbar and make it visible using the little arrow icon
2. Browse to the site you're struggling with
3. From the toolbar menu, select Cache -> Clear Browser Cache for This Domain... and say yes

You can also toggle the Always Refresh from Server option from this menu and clear session cookies for the current domain.

Firefox

1. Tools -> Options
2. Network tab, cache section, Clear Now button

Alternatively, install the free Firefox Web Developer Toolbar and follow these steps:

1. Make sure the toolbar is displayed (View -> Toolbars -> Web Developer Toolbar)
2. Click the Miscellaneous button
3. Clear Private Data -> Cache

Or, after completing step 2, select Clear Private Data -> All Private Data and include cookies and authenticated sessions (session cookies).

[Update: don't forget to also clear your Flash local storage cache.]

---

Custom-Built Microsoft Office SharePoint Server 2007 Branded Sites and Webpart Development - info@mediawole.com

 

Firefox 3 Penetration

I was vaguely surprised when I checked our Omniture stats for the last three months: 58.6% of Firefox users visiting all of the eMarketplace sites over the last three months were using version 3. So it's official, we're now supporting IE6/7 and FF2.x/3 across the MOSS-based anonymous sites.

---

Custom-Built Microsoft Office SharePoint Server 2007 Branded Sites and Webpart Development - info@mediawole.com

Stacking Windowed Elements and Flash Movies with z-index and wmode in IE

There exists a common misconception z-index will solve all of your DHTML stacking problems. While this is true for DHTML elements, the assumption falls down in the face of Internet Explorer and the way this browser treats "windowed" components like drop down lists based on the select tag. Flash objects aren't immune but for different reasons. Firefox will honour stacking orders for all elements but this is not the case when you're dealing with IE6/7. Windowed elements maintain a different stacking order than DHTML elements (they're added to a different plane than your windows elements) and therein lies the problem.

IE7 is better than IE6 when it comes to the select element but Flash requires some additional finessing, which I'll detail below. If you're still supporting IE6, consider using an IFrame (perhaps dynamically positioned) between your windowed component and your DHTML object to mask the underlying windowed component. The concept is generally referred to as an "IFrame shim". Don't forget, IFrames can be configured with a transparent background; either way, simply point the IFrame URL at nothing. The IFrame is no longer a windowed element as of IE5.5; although some people don't like IFrames for security and because they're frames, in this case the IFrame is your friend because it bridges the gap between windowed elements and windowless elements. The one main gotcha with this approach is how the user interacts with an IFrame: button clicks and mouse actions will be sent to the IFrame and the underlying content won't be interactive while the IFrame is visible.

Flash--being Flash and an ActiveX-wrapped plugin--is a different beast. IE places embedded content in a DHTML layer above all other layers by default and this is not always where you want your Flash content. On the westernaustralia.com home page, a fancy combination of DHTML and Flash elements known as the Tourism Australia overlay sits above the wa.com Flash banner (it's only visible to international site visitors); the DHTML-based navigation likewise has to sit above the central "experience panel" and the global site selector drop down in the right column.

To reign in your Flash objects and their stacking order you need to use an extra parameter named wmode:

<param name="wmode" value="opaque" />

By doing so the Flash object and surrounding DHTML elements will team up to honour z-index styles as you intend. It's also a good idea to add a corresponding wmode="opaque" attribute to your element tag. Opaque and transparent modes may compromise your animations and video--we haven't had any problem on our sites, however, and use both animations (the wipe) and video. 

Here are a few additional tips for dealing with Flash:

• Add Flash elements to a predefined placeholder element using JavaScript to ensure the object is activated automatically (otherwise users will have to click the Flash movie to run it and movies that should play automatically without user interaction may not start when the page loads). SWFObject will do this for you but it's really easy to write the JavaScript into your existing .js files, thereby avoiding the need to weigh down your page with yet another script library.
• Don't rely solely on the embed tag. Use the object tag for IE and nest an embed tag within it for Mozilla and everyone else.
• Always explicitly configure the wmode parameter as a child of the object tag and an attribute of the element tag.
• Avoid the wmode "transparent" setting unless your Flash movie actually has transparent sections. Use "opaque" in most cases to increase rendering performance. The default is "window".
• Consider a Flash alternative like Silverlight ;-)

Microsoft's windowless vs windowed summary:

http://support.microsoft.com/kb/177378

http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx

Adobe's semi-useful KB article about wmode:

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523

How to create an IFrame shim:

http://www.dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx

---

Custom-Built Microsoft Office SharePoint Server 2007 Branded Sites and Webpart Development - info@mediawole.com

Chrome Crash

Never thought I'd see the day--first time in nearly two months of heavy use:

Outlook was also crashing at the same time so I blame Outlook personally ;-)

---

Custom-Built Microsoft Office SharePoint Server 2007 Branded Sites and Webpart Development - info@mediawole.com