my thoughts

Whilst I'm on the subject of <geekery> then I ought to point out to those of you that don't know - JQuery is a superb JS library.

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

The core makes traversing and manipulating elements as easy as writing CSS selectors and the extensions (such as the (excellent) UI library make this one quick and efficient way to modern web dev).

Plus its only 15KB... Cooooool!
→ jquery.com/

This may appear slightly geeky to most of you, but to those in the know - this is probably one of the single most exciting things to come out of Microsoft in all their years of involvement with the web.

We were doing MVC development back in '2001 at least (in Java/EJB) and it just makes great sense in many situations.

Together with LINQ, I reckon that .net web dev has come of age.

Time to get coding!
→ ASP.NET MVC Framework (Part 1) - ScottGu's Blog

I have been reading up on capacity planning and load testing for IIS based web applications, I found the following resources which I think useful to share. My recent training in ITIL IT SMF has provided a useful and standard vocabulary to the techniques that I have practised over the years as a web developer. The following resources can be filed under Capacity Management, one of the five components in the ITIL Service Delivery model.
» Service Management Functions high level overview: Capacity Management
» Introduction to Capacity Management: summary and implementation plan
» IIS 6 web server scalability resources on Microsoft TechNet
» Case Study: Scaling an ASP.NET web application on IIS 6 — Illustrates how to monitor and tune IIS 6.0 for improved performance and scalability

Performance optimization and capacity planning for Microsoft Content Management Server
I am responsible for two large MCMS websites. The first section of this report shows how to achieve optimal performance from an MCMS site by making use of caching, and by analyzing, scaling, and tuning the site to eliminate any site bottlenecks. The second section covers capacity planning—how to plan for, estimate, and manage the maximum anticipated load capacity for your site.
» www.microsoft.com/technet/prodtechnol/cms/plan/cmsoptim.mspx

This is a work in progress, more resources soon...

With IE7 now in Beta2, and due for release in the latter part of this year, now is an excellent time to test existing web applications with it. One of the more exciting features for web developers is the improved CSS support, and better widgets (the SELECT element is now windowless, for example, so can be given a z-index). I will post more resources and information on this in the near future.

IE6 continues to be important. Given the current best practise of 'develop in Firefox, patch in IE', the following IE6 resources make for interesting reading:
» Rounded Corners in Internet Explorer: Staying Ahead of the Curve (March 2005)
» An overview of "HasLayout", explanation, demonstrations and workarounds (August 2005)
» Internet Explorer Developer Center on MSDN
» I found these on the IE blog


How to attack an Internet Explorer display bug
The widely-used "holly hack" provides a common workaround for the various dimensional bugs presented by MSIE. The following page provides a particularly good explanation of the technique, together with clear:left; position:relative and the "tan-hack":
» How To Attack An Internet Explorer (Win) Display Bug


More detail on the hasLayout property within MSIE.
Why do you care? When working with CSS & html to implement a design according to current recommendations* it is guaranteed that you will encounter weird bugs in Internet Explorer... most commonly "Why has that box disappeared?" or "What's it doing over there?!". To quote from the article:

"The hasLayout problem affects designers (and coders) at all experience levels. Layout has unusual and hard to predict effects on the display of boxes, as well as implications for their descendant elements. Consequences of an element having, or not having “layout” can include:

* Many common IE float bugs.
* Boxes themselves treating basic properties differently.
* Margin collapsing between a container and its descendants.
* Various problems with the construction of lists.
* Differences in the positioning of background images.
* Differences between browsers when using scripting.

The above list is brief and incomplete. This article attempts to more thoroughly describe issues encountered by the application of “layout” or the lack of it."

The article is long but well written, and I recommend giving it a read so that next time you encounter "weirdness" you will have a useful starting point for debugging the CSS.
» www.satzansatz.de/cssd/onhavinglayout.html

* the box model of CSS positioning, semantic order

As a web developer I am often consulted regarding search engine optimisation (SEO) and where to advertise online. It is useful to keep an eye on what is happening in the search world. I am sure that most web developers will be able to tell you that Google is the leading search engine these days, and that Yahoo, MSN, Ask and AOL make up the other majority. The small remainder is comprised of the legacy search providers.

The following summary report is provided by netapplications, showing the relative search popularity. There are no surprises in the report.
» marketshare.hitslink.com/report.aspx?qprid=1

Statistics are only relevant when you know the context in which they are collected and what they represent. The homepage offers an introduction to their data collection methods and sample size:
» marketshare.hitslink.com/ (scroll down for 'About Our Market Share Statistics')

The relative market shares are displayed monthly on the search engine share trend page.
» marketshare.hitslink.com/report.aspx?qprid=4

The Search Engine Watch website is a useful starting point in understanding the current state of the search world
» searchenginewatch.com/

Further to my notes on making an accessible website I thought I should provide some resources for online testing & validation tools for Web Content Accessibility Guidelines (WCAG 1.0) and Section 508. The following resources provide automated accessibility testing to varying degrees of quality.

WebXACT from Watchfire (formerly Bobby) is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues. Provides a detailed and useful report.
» webxact.watchfire.com/

HERA is a tool to check the accessibility of Web pages accoridng to the specification of WCAG1.0. Very easy to use, providing excellent visual results which highlight areas of your page and/or code that need attention.
» www.sidar.org/hera/

WAVE: "Web Accessibility Versatile Evaluator" web accessibility tool. This tool is very useful as it returns the page marked up with icons or 'tags', showing pros and cons in sematic order. These tags provide a good insight into how the page will be interpreted by a non-visual user-agent so are very good for content order (semantic markup) testing.
» wave.webaim.org/

Cynthia Says: A web content accessibility validation solution, it is designed to identify errors in your content related to Section 508 standards and/or the WCAG guidelines - Single page evaulation only and includes user-agent impersonation to masquerade as common browsers. Results presented in a simple table of checkpoints.
» www.contentquality.com/

The following tools provide more basic reporting functions:
» www.ocawa.com/Test-your-Web-Site_6_en/
» checker.atrc.utoronto.ca/
» www.ubaccess.com/artguide.html

Working with colour is a task I find most enjoyable, but hard to quantify. I can tell you when it is right, but arrive there by way of an iterative process. I work best given some existing source material such as a photograph, logo or livery from which a palette can be derived. My technique is not entirely formulaic — I just sample contrasting and complimentary hues from the source material, then build a derived palette of lighter and darker shades. I am pleased that a number of other web professionals do this too, and share their techniques:

Creating colour palettes
"When I am designing a colour scheme for a client site, I am often lead by the colours used in existing logos or publicity materials. But when the client only uses one or two colours, I use a favourite technique for creating complimentary 'tones'."
- Andy Clarke (Malarkey)

An online tool exists for the application of Andy Clarke's technique, the color palette creator works from a given hex colour. (How to get the hex colour? I use CatchColor)

Colour schemes
"A designer’s ‘style’ is made up of a number of different factors, though colour plays a large role. Everyone has their own method of coming up with a good colour scheme, which will inevitably affect the results."
- Dave Shea

Finally! Someone's made a good (ingenious) three-column layout with no extraneous markup, and some simple CSS. It meets the standards, makes for excellent accessibility and doesn't mess with your document flow (the content order from a semantic markup point of view).
» www.alistapart.com/articles/holygrail

Update! So close, yet so far!
It is simply tempting fate to call this the holy grail of css positioning. I have now found this layout to work well within a fixed width design, but with a stretchy design (as in the example) my standard issue copy of MSIE 6 at work (revision# coming soon) the left column vanishes completely and reappears in seemingly random positions when the window is resized. And have you seen it in MSIE 7 beta 2? Yep - it's stuffed there too. So i'm still researching this one!

Many properties are available for CSS designers to exert a fine degree of control over the position and size of an element. They include margin, padding, border, width etc. Whilst most web developers are familiar with the box model and its various issues there is another interesting feature which can sometimes confuse: collapsing margins.

Two consecutive vertical margins will be collapsed into one if there is no padding, border area or clearance that separates them. This is actually what you expect to happen, and is mostly intuitive. The following article explains the situations where it produces unexpected results. (Such as using an <h1> within a <div> as the page heading, and getting an unexpectedly narrow banner as a result.)
» www.complexspiral.com/publications/uncollapsing-margins/

I recently stumbled upon the brilliantly designed and engaging website of Drew McLellan. I found one article in particular which expresses what has been happening for the past year or so: that web developers and the people that pay the bills have realised that .net web deveopment is something of a steep step upwards from classic ASP in time and cost, competing more in the same space as Enterprise Java. Now that classic ASP is no longer an option there is something of an exodus for PHP and all that surrounds it.
» Web Development on a Microsoft Platform

PHP has come on a long way in the last few years, with the release of PHP 5 it is possible to develop robust, well written web applications (and employ agile development methods) in the usual short timeframe. You can read about why here:
» Learn about PHP 5: what's new, migration...