Peter works on the web!

Changing employers is always a hard decision to make. Whatever the reason is you found that new opportunity that caught your attention: money, fame, need for a new challenge. There are plenty of jobs in the sea, certainly as a developer, and it’s hard to find that one true job. You don’t want to end up in a job which has the same drawbacks as your previous gig. If you take the leap you want it to be worthwhile on all areas: financial, job satisfaction, etc. Although the financial aspect is an important part of the decision making it’s not the holy grail. For me even more important is job satisfaction. In every job interview they’re telling you they have state of the art ASP.Net Turbo 3000 code running on their Windows 2099 machines. But as we all know there is code and there is code.

To be able to make a good decision, the first thing you do is gathering intel. Asking around with friends, former colleague’s, friends from friends and so on about the company you’re about to sign for. If all those signs are positive and the pay is good (I’ve been told it should be minimum 10% more then you’re current wage), you could ask to meet the team you’re going to become a part of. I don’t believe in first contact, certainly not at a job interview because everybody is going to be at his best. You will see your future manager for about 2 to 3 hours and he will be looking for people so he will show his most charming side. Your future team mates don’t know you so they’ll act like the nicest people you’ve ever worked with because they don’t know you. If you sign the contract you’re going to spend more than 8 hours per day with these people, only then you will really get to know them. Worst case scenario if the first encounter with the team was a bad one, I would be reluctant to sign. But this is hardly ever the case.

So on what grounds should your decision be based? I’ve never done this before but I was discussing this topic with some people and it suddenly struck me. They can offer you double the wage you are earning today but if you have to work your way through the next big ball of mud you’re nog going to have a lot of fun at your new job. Unless you’re looking for a real challenge. But how do you make a distinction between a challenge and professional suicide? The best way to get to know how a company works and what the quality of the codebase is: ask if you can quickly see some codefiles and if they could shortly draw how their application is architected. You’ll get a crash course in how the company works and which of the statements the recruiter or manager made about the software methodology they’re currently following are really true. It will be enlightning because you’ll not be jumping into an abyss, you’ll have a better understanding of the risk you are taking. Of course there is always risk involved but calculated risk is in my opinion a part of an exciting life!

Employers can also learn something from this: If you have a neat codebase or some really cool continuous integration system show it to your future employees. It’s certainly an extra plus when trying to convince someone to sign for your company.

I notice that a lot of development effort is going into creating a nice back end. Creating a GUI is a matter of using the designer – better known as system.draggy-droppy – and setting the right colors via the properties panel. But lately a shift has happened which forces developers to learn about CSS.

Web development

If you’re into web development and I know more and more developers are into it you must learn CSS. It’s part of the web and part of web development. It will make your applications slicker and nicer looking. You can make some very slick feedback messages with CSS. And everyone knows you can create an application with an almost perfect architecture, if it looks like hell you’ll need ten times the effort to convince users to use it.

JQuery

With the popularity of jQuery, the adoption by Microsoft certainly helped, a lot of developers are starting to learn the pure basics of web development. People are starting to learn the (fantastic) language that JavaScript is. JQuery introduced us to another phenomenon: CSS selectors. You can use CSS selectors to select a certain element on the page. Where CSS used to be for layout only, it is now being used to code. Most developers don’t care about layout. If the code works, they are happy. So most developers didn’t care about CSS, until now.

Fizzler .Net

I recently read about Fizzler .Net, a tool which brings CSS selectors to C#. I think this is an excellent idea, using CSS selectors is very intuitive once you get used to it. I even read about using CSS selectors on plain XML files to select elements. That’s even a better idea! We certainly haven’t seen the last of CSS selectors in server side languages (like C#).

The problem(s)

I see 2 main problems. The first problem is browser compatibility. It takes a lot of effort to get certain CSS code to work in all browsers. Specially Internet Explorer 6 can be a real pain in the ass. A lot of developers lose courage when handling yet another problem of: “It works on Firefox but doesn’t on IE6″. The only solution to this is … deal with it. Learn the Internet Explorer 6 bugs, try stuff out and get to know the solutions/workarounds. A lot of bugs have been dealt with before and after creating a few layouts with XHTML & CSS you are able to solve most of your problems.

The second problem is Visual Studio. It really lacks a tool to do good CSS coding. Sure it has intellisense but that’s really it. There is a real market for a tool which support the developer who writes CSS in Visual Studio. A Resharper like tool which gives you hints like #ffffff can be abbreviated to #fff. That would really rock my world. I was hoping that Aggiornio was going to step up the plate but it hasn’t so far. Another thing that should be added is cross browser testing. You should at least be able to test the different versions of Internet Explorer. Now you have to use tools like IETester and install Firefox, Chrome and Opera on the side to have a decent coverage. CSS Vista is worth checking out for this but Visual Studio is an IDE and CSS is part of the development cycle. The functionality that CSS Vista has should be incorporated into Visual Studio.

Conclusion

What are you waiting for? Good, practical books to get you started are those of Eric Meyer and the Zen of CSS design. You can find a lot of other books on my Shelfari profile, do you have an account yet? If not check it out, you can become virtual friends and it’s a great way to learn about new books!

Unfortunately the images to this post were lost during the migration from Blogengine.Net to WordPress

If you have a technical blog it’s very important that you can somehow easily post code snippets to your blog. I was using the Visual Studio plugin Copy source as HTML for a while but I wasn’t very enthusiastic about the result. I don’t like the fact that I need a plugin in Visual Studio to be able to post code to my blog. Visual Studio is for programming. Jan told me that there was a Windows Live Writer plugin as well to do this. A few days ago I found the best plugin ever. It allows you to paste code into an intermediate window and then formats it for you!

Because I recently converted to the dark side, I didn’t want my code snippets all to have a black background. But this problem is solved by the plugin without any configuration (As you can see below).

Screenshot from Visual Studio.

namespace TwotoContentTests.FilterAttributes
{
    class Class1
    {
    }
}

Code pasted via the Windows Live Writer plugin.

What are you waiting for? Go download it!

Unfortunately the images to this post were lost during the migration from Blogengine.Net to WordPress

I was doing a bit of refactoring on an ASP.NET MVC web application and was using the OnActionExecuting event in a controller to do authentication. I had not yet written a test for it, blasphemy I know, so that had to be corrected. The controller was  something like this:

using System.Web.Mvc;

namespace TwotoContent.Controllers
{
    public class ExampleController : Controller
    {
        protected override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            // check if user is authenticated before executing an action and redirect if not
        }

        public ActionResult Action()
        {
            return View();
        }

        public ActionResult AnotherAction()
        {
            return View();
        }
    }
}

At first I did a stupid attempt thinking that if I would call a Controller action from the test, the OnActionExecuting would be automatically executed and tested. I quickly find out that’s not the case and after thinking it through it would probably suck if it worked like that because you would have to write the same setup code over and over again for every action for which the OnActionExecuting was called. But there must be the another way to call the OnActionExecuting function directly without having to execute an Action.

No luck, as you can see you can’t separately call the OnActionExecuting event on a controller because it’s protected in the Controller base class. I didn’t really know what to do so I googled around a bit and found this article about creating your own action filter. It seems that the OnActionExecuting event is public when you create your own custom ActionFilter. What is an ActionFilter you ask? Let me quote from the article: “An action filter consists of logic that runs directly before or directly after an action method runs. You can use action filters for logging, authentication, output caching, or other uses.” Exactly what I needed in other words. So after refactoring a bit I came up with the following code:

using System.Web.Mvc;

namespace TwotoContent.Controllers
{
    public class ExampleController : Controller
    {
        [ExampleActionFilter]
        public ActionResult Action()
        {
            return View();
        }

        [ExampleActionFilter]
        public ActionResult AnotherAction()
        {
            return View();
        }
    }

    public class ExampleActionFilterAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            // check if user is authenticated before executing an action
        }
    }
}

Now the OnActionExecuting method in the ActionFilter attribute can now be tested as followed:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using NUnit.Framework;
using Rhino.Mocks;
using TwotoContent.Controllers;

namespace TwotoContentTests.FilterAttributes
{
    public class When_executing_an_event
    {
        private ActionExecutingContext _context;
        private ExampleController _controller;

        [SetUp]
        public void SetUp()
        {
            _controller = new ExampleController();
            _context = new ActionExecutingContext(new ControllerContext(MockRepository.GenerateMock<HttpContextBase>(),
                                                                        new RouteData(),
                                                                        _controller),
                                                  new Dictionary<string, object>());
        }

        [Test]
        public void Then_the_authenticated_indicator_must_be_set()
        {
            var subjectUnderTest = new ExampleActionFilterAttribute();

            subjectUnderTest.OnActionExecuting(_context);

            var authenticatedIndicator = Convert.ToBoolean(_context.Controller.ViewData["authenticated"]);

            Assert.That(authenticatedIndicator == true);
        }
    }
}

I first set up an ActionExecutingContext with a controller so it can be passed to the OnActionExecuting function. In the test I create an instance of the class that is under test, in this case the ExampleActionFilterAttribute class. As you can see the OnActionExecuting function can be called directly (because it’s public in the base class). After executing the function I read a variable from the ViewData collection via the context that was set up earlier. Finally I test if the variable in the ViewData is filled out correctly. You actually need quite some setup code to be able to mock an ActionExecutingContext. Because I didn’t need the HttpContextBase I have just injected a mock. This minimalizes the amount of Setup code that is needed.

I can’t really think of a reason why the OnActionExecuting event is protected on the base Controller class and is public on the ActionFilter class. A benefit of this approach is that it results in a smaller controller class and an ActionFilter we can reuse over various controller classes. So nothing but advantages! Maybe this isn’t the best solution but it worked for me. Ideas/additions/rants are always welcome.

Unfortunately the images to this post were lost during the migration from Blogengine.Net to WordPress

I have been using a Mac as my main development machine for over a year now. I have been very happy with it, you could call me an Apple fanboy. Because I develop in the .Net framework, and I’m not planning on changing that, I had to find a solution to be able to run Windows on my Mac. There are two options to get that done:

• Installing Bootcamp: this implies that you have to reboot your machine to get to Windows
• Virtualization: running Windows as a virtual machine on top of Mac OS X

The first reason I changed to Mac was the slick design but after using it intensively I came to realize that that isn’t the strong point of a Mac. The strong point of the Mac is OS X. It’s a robust operating system that doesn’t get in your way. I was so pleased with OS X that I wanted to use my Mac for all general computer use (surfing, email, …) and just use Windows as a shell for Visual Studio. So Bootcamp was no option for me.

The first choice was made, I wanted to work with Virtual Machines to run Windows on my Mac. There are two virtualization solutions on Mac, VMWare Fusion and Parallels. Because a good friend of mine, who has an excellent video production company by the way, recommended me Parallels I went for that solution and never looked back … until a few days ago.

I was trying to set up a new Parallels Virtual Machine and was installing Windows XP. After 5 tries I had given up. Windows (in Parallels) kept throwing blue screens at me. In the past I had never had this problem. So out of frustration I decided to try VMWare Fusion. I installed it and created my first VMWare Virtual Machine. The first killer feature I noticed is that the desktop and documents is shared between your virtual machine and Mac OS X. It is very easy to copy files between the two.

The perfect situation for me is that I have one Virtual Machine, which I can copy if I want to test something like an early bèta and then delete it when I’m done. In this way I don’t have to install application after application that I don’t use in my Virtual Machine and I can keep my Windows clean. A VMWare virtual machine is only one file, you can copy it and when you boot it VMWare Fusion detects that the VM is copied. A Parallels Virtual Machine exists of several files and is less easier to copy. Another point scored by VMWare Fusion.

While doing some research on the two products, I noticed that Parallels is popular with designers and VMWare Fusion is more used by programmers. The fact that Parallels is so popular is in my opinion because of the design of the product. Starting a virtual machine is very slick, you’ve got rotating windows and stuff like that which makes it a great experience. Developers who use VMWare Fusion are mostly coming from Windows, on which VMWare is already very popular. On top of that, I have the feeling that VMWare Fusion is a little more robust then Parallels. A .Net developer tends to use his virtual machines a bit more thoroughly then a designer who most of the time just uses them to do some cross platform testing. I think that explains why designer prefers Parallels and developers prefer VMWare Fusion.

So I’ve made the switch VMWare Fusion and I’m very happy with it at the moment. Are there any .Net developers on Mac among my readers? Which virtualization platform do you guys use?

There is one thing that almost made me throw VMWare Fusion out of the window. The next screenshot explains it all:

Notice the Install McAfee menu item, I hope VMWare got a lot of money out of it because I really hate it when stuff like this get incorporated into a good product.

Note: I haven’t tested Parallels 4 yet, I wrote this post before it came out.

Unfortunately the images to this post were lost during the migration from Blogengine.Net to WordPress

It’s finally there, Jan and I departed from Belgium to Austin, Texas to attend Kaizenconf. I have been looking forward to this for quite a while. It didn’t start out good when I spilled my first drink on the plane, but it only got better from then on. After a long flight with a stopover in Atlanta we arrived at the Austin airport. A lot smaller then I expected but that didn’t really matter.

Advanced NHibernate

On the first 2 days of Kaizenconf some promising workshops where scheduled, we decided to go listen to the great ayende talking about Advanced NHibernate. The talk started off with a blast when ayende gave a demo of the NHibernate Profiler that is being developed. Although beta it looks like this will be a real hit and it will help developers to get to know and control NHibernate better. I don’t see myself as an advanced NHibernate user but it was nice to follow a workshop that isn’t the usual introduction on how to create a Northwind CRUD application.

Below is a screenshot of the NHibernate Profiler, although it’s not the best of quality you can see the query that NHibernate has generated, the different queries that were fired onto the database and much more. Very, very promising!

Another topic that was explained is the use of Lucene with NHibernate. By using a couple of attributes on your domain models to indicate which parts should be indexed, you get a very easy way to make your data searchable. Because the original is always better, here is a short video where the advantages of using Lucene with NHibernate are explained:

We went on to NHibernate caching and again I discovered something that will change the way I use NHibernate on a daily basis. Seems like caching is actually very intelligent but, as with everything, you have to watch out not to shoot in your own foot. Oren showed us an example that called the database 4 times without using any caching and called the database 42, yes forty-two, times with badly configured caching.

Here are some random notes I took that I’d like to keep in mind for future use of NHibernate:

- When loading an object via session.Load the query gets fired when the object is being accessed, not when the Load() function is called

- NHibernate solves threading issues with caching by returning different instances of the same object to different users

- Queries can also be cached, call the SetCacheable(true) function on every occurrence of the given query you want to cache

After this excellent session we were looking for something to eat. Luckily some of the attendees (thank you Chris and Tim) were kind enough to give us a ride to Rudy’s BBQ where we learned that ‘Real people eat meat’. I don’t think they have a lot of veggies under their customers.

Functional programming – Is it a game changer?

For the second workshop a difficult choice had to be made. It was choosing between the DDD chalk talk of David Laribee or the workshop about Functional programming of Matt Podwysocki. You probably already guessed the one I chose. This was something completely different then the NHibernate talk and Matt asked several times if our brain hadn’t exploded yet, and if I’m honest I had to answer yes every time he asked it. There was a lo-hot of information to take in.

The first part of the presentation was about making C# more functional. By heavily using the new features in C# 3.0, a lot of for-each loops could be eliminated with the help of stuff like LINQ and lambda expressions. Matt told us that F# is very good at math stuff, the software that determines the best player in Halo 3 is written in F#. Because F# has a specific purpose, there will never be a designer to create GUI’s or web pages using F#. I think I heard a little cheering in the room after those words. I still have to take a closer look to the abundance of examples Matt provided us to be able to give a deeper insight into F# so I’ll leave it at that for now.

Although I’d like to show a piece of code that Matt shared to point out the dangers that come with lazy evaluation of code:

Func<String> GetContent;

using(StreamReader fileStream)

{

GetContent = fileStream.ReadToEnd();

}

String content = GetContent();

Because the fileStream is out of scope when calling the GetContent function reference, this will give unexpected behavior which is very hard to debug if you ask me. Another good session for which I’d like to thank Matt.

The conclusion of the first day of kaizenconf is very good. As I already said the sessions were of high quality. I’m already looking forward to day 2 which has an ASP.Net MVC session given by Jeremy Miller and Chad Myers. Very exciting!

I have been using abbreviations for UI elements for a long time. I think most developers have and still do. When you declare a button which will give the user the possibility to log on, it will be called: btnLogOn (or something similar). At first I wasn’t really thinking this through and automatically started the name of a dropdownlist with ddl, of a label with lbl etc… One day I was programming in Visual Studio, I was creating a trivial user interface, and I typed something like this:

Then I went to the code behind file and started adding functionality:

When suddenly it hit me: why was I using these ugly names for UI elements (txtPassword, txtEmailAddress) which mess up my code? Why can’t I just name them like every other variable I use? So the code above became:

Of course when you are working on a project with fellow programmers, you have to try to follow the same guidelines and naming conventions in order to get consistent source code. If one programmer uses abbreviations and the other isn’t, the result is even worse then when using abbreviations. So I started up the discussion at work. Because I couldn’t convince all my colleague’s we decided to put it on the Development Guidelines. This is a monthly get together with the team where we discuss interesting tools, new development techniques and other geeky stuff that could help us in your daily job.

While discussing the matter the following advantages/disadvantages of using abbreviations were mentioned:

Eventually we decided to leave abbreviations behind and use descriptive names for UI elements. One small step for men, when giant leap for code readability.

To take it to the next step, you could argue that all UI elements are actually class members. And because I prefix all my class members with an underscore, you could do the same with UI elements. So logOnButton would become _logOnButton. I don’t do it like that – yet – because I’m not convinced that it is the way to go. This could be taking it too far.

What do you think? Do you still use abbreviations for UI elements?

Unfortunately some images of this post were lost during the migration from Blogengine.Net to WordPress

Ever had someone come to your desk and saying: I have a little project for you, you should change something in our state of the art web application. After agreeing you would do the changes, you open up the solution and you see that the state of the art application is built using HTML spaghetti. At that moment you wished you had a) a gun or b) some guy on your team that loves monkey work and cleans all the code for you. Someone who gets a kick out refactoring FONT-tags to CSS an making the indentation perfect. Let’s be honest, if the guy exists he’s probably playing chess with Yoda in a galaxy far, far away.

The problem is that most of the time the spaghetti wasn’t made by a fellow programmer. Visual Studio 2003 had the nasty habit to mess up your beautiful hand coded HTML with perfect indentation to an unseen spaghetti mess. Luckily Visual Studio 2005 keeps his hands off your work of art. But what to do with projects that are ported from .Net 1.1 (and Visual Studio 2003) to .Net 2.0 (and thus Visual Studio 2005)? The HTML doesn’t get cleaned and it’s very time consuming and plain sucks to do it by hand, certainly for large pages. Now there is a solution to do all the grunt work for you: Aggiorno.

Aggiorno is a plug-in for Visual Studio 2005 or 2008. Once installed, you get an extra option in your menu bar (and in your context menu).

The most important menu item is the Aggiorno… item. If you click it you will get a popup with a few options. Let’s go through some them.

Add Alternate Text to Images

Adding alternate text to all of your images by using the alt-attribute is very important in web accessibility. If the browser can’t render the images, it will show the alternate text instead. Screen readers will read the text out loud so visually impaired web surfers will have an idea of what the purpose of the image was. For example, if the image of an arrow is used to go to the next item, the alt text of the arrow image would be “Go to next item”. A screen reader that can’t show the image to his (blind) user, will read the alternate text instead. Keep in mind that not all images need an alt text, images that are only used for the design of the web site don’t need an alternate text because they give no added value to the textual version of the web site. You still have to add the alt attribute but you leave it blank in such cases.

When performing “Add Alternate Text to Images”, Aggiorno gives you an overview of all the images on your ASPX page that don’t have an alt attribute and gives you the choice to add an alternate text.

Assign Tab Index

This is also a very nice feature. For people that don’t know tab index, if you use the tab-key to browse through the different input elements (that includes text boxes, checkboxes, radio buttons and all other UI elements) tab index will be used to determine the order in which the elements will be browsed. Aggiorno will go through your page and list all the input elements you have on that page. It will also highlight all the elements it has found, you get a popup in which you can specify the tab index for all the elements on the page.

The only thing I’m missing in this list is the name of the input element we’re about to change. But keeping in mind that this is only RC0, this could be added in future releases. If you click on a row in the file column you will go to the corresponding line in your code file. I can live with that.

Fix Deprecated Elements for XHTML Compliance

This menu item searches your page for deprecated HTML tags like <FONT> or <CENTER>. It will replace those tags with inline CSS.

Fix Syntax Errors for XHTML Compliance

Using this option, Aggiorno will look for a variety of errors in your document: attributes that are not quoted and html tags that are still uppercase. If you want certain things to be retained, you can tweak the plug-in. It’s certainly no all or nothing action. This one is extremely useful and has literally saved me hours.

Oh yeah, it will also add the necessary and correct DOCTYPE to your document.

Preview

If you run one of Aggiorno’s options, you will get a preview window which will show you all the modifications it will make on your source code. It will highlight all changes and you can navigate through them. If you don’t like what it has done to your HTML code, you can back out. So nothing becomes final until you press the OK button on the preview window.I’ve added some screen shots to give you an idea about how powerful this tool really is.

Conclusion

I’m very enthusiastic about this plug-in, but some caution must be taken while using it. Some options will change the structure of your HTML, a possible consequence is that the rendering of your page could be different in some (or all) browsers. Test your pages before putting them out in the open!

There is no more excuse that your web pages aren’t built with mint HTML code. Aggiorno does all the dirty work for you and is a real time saver. It is extremely useful if you use it in a project that has been ported from .Net 1.1 to .Net 2.0 or that has badly written HTML code. But even when you’re starting a new project, it’s a handy tool to get your HTML code as perfect as possible. This tool is in my top 5 of best visual studio plug-ins and it doesn’t even have a full release yet! If you work in Visual Studio and care about valid and accessible web pages (and you should), this is a must install. And there is no reason why you wouldn’t because the RC0 is available for free.

This is only a brief touch of the possibilities of Aggiorno, there are many more options but you better see for yourself how powerful this plug-in is. There are some introduction videos on the Aggiorno web site as well.

What are you waiting for? Go get it!

Let me first clarify something. As Jan pointed out I am into Brazilian waxing but please, all you pervert guys stop sending me emails with questions about the subject!

Now that's taken care of, we can get to the matter at hand. A couple of days ago, somebody asked me what the best JavaScript / AJAX framework is to start a new web application project. Because we work mostly with Microsoft technologies the answer should be obvious: ASP.NET AJAX. But I have been working with ASP.NET AJAX for the past few months now and I really don't like it. The first problem with ASP.NET AJAX is rather well known throughout the community: the UpdatePanel. I have found a good article which explains why the UpdatePanel is evil. I would recommend not to use it. It plain sucks. The second fact that I hate about ASP.NET AJAX, including the control toolkit, is the fact that you are cluttering your HTML code with all sorts of custom server controls. I don't want clutter in my ASPX page, I want it to be as clean as possible (thank you ASP.NET MVC). I want my JavaScript in a separate file so I have a clear distinction between presentation (CSS), markup (xHTML) and behavior (JavaScript). I know you don't have to use the drag-and-drop method and that you can use the same ASP.NET AJAX classes in JavaScript, but doing this is painful because documentation is lacking.

These things don't stimulate you in becoming a better (web) programmer. In order to be able to solve the problems you encounter with your software, you have to know how stuff works. It doesn't pay off to be able to open a designer, drag and drop some server controls on it and then wrap them in an UpdatePanel to create a web page using AJAX. You are missing out on a lot of exciting stuff that you encounter when doing client side web programming. You are missing out on JavaScript, a whole new and exciting language. When learning a new programming language you once again have a way of doing things differently, you can see how the new language tries to solve the same problems in comparison to other programming languages and learn from it.

I know it is possible to reference the MicrosoftAjax.js file directly, and write out object oriented JavaScript. Most of the literature mentions that this is possible but very few really go into the matter.

If you compare them to the other JavaScript frameworks out there, jQuery, prototype (with scriptaculous), YUI, … Documentation is abundant and these frameworks don't try to give you the drag-and-drop experience. They just give you a decent framework, which is necessary with JavaScript, to start enriching your web pages. On wikipedia there is a comparison of the different JavaScript frameworks and ASP.NET AJAX isn't even included! I think that says a lot about the popularity and usage of ASP.NET AJAX.
So before choosing a JavaScript / AJAX framework, don't go blindly for the Microsoft solution. It's not the best around, try out the different frameworks and take the one you like. I have been using AjaxPro with prototype for my personal projects but development of AjaxPro has stopped. For new projects I am going to use ASP.NET MVC, which is great by the way, in combination with jQuery. Chad Myers has a very good how to on the matter.

To conclude I would like to share the different books I have been using/reading about the matter:

• Pro JavaScript Techniques (by John – mr. jQuery – Resig)
• JavaScript The Definitive Guide
• Prototype and script.aculo.ous: You never knew JavaScript could do this!
• jQuery in Action

I'll probably be writing a review on one or more of these books, although I'll first have to write about the pussy way of development like I promised Patrick.

First of all, let me welcome you to my brand new blog. It will serve as a personal reference and a way to (hopefully) become a better software developer by researching and writing about technology. And don't forget if you liked the article, subscribe to the RSS. It's free and saves you time!

Now let's get our hands dirty…

When designing a web form with ASP.NET you usually fire up the web forms designer that comes with Visual Studio and start dragging and dropping server controls on the page. This is the normal way of designing a web form, the way Microsoft promotes. They have provided us with a Label server control which we all use to put a text near a certain TextBox, DropDownList or something similar. A common web form might look something like this:

The markup for this form is:

Let's not get carried away with the look and feel of this form, it could be better, but that's not what what we care about in this article. Let's have a look at what happens under the surface, if we look at the source of this page we see the following piece of generated HTML :

The problem with the Label server control is that it generates a <span>-tag. The browser has no clue that a given label applies on a given input field. And the <span> doesn't describe its content, from a semantic point of view it's not right. Why is this necessary? Don't you see which label applies on which input field? That's right, for us it's most of the time easy to link a certain label to an input field. But visually impaired users have a harder time trying to figure out what they have to fill into the input field. If the input field and the label aren't close to each other, it's impossible for a screen reader to make the link between the label and the input field.

Instead of using the Label server control, we could use the <label>-tag. The html <label>-tag describes its content, in this case it describes that the text in front of the textbox, dropdownlist, … is actually the label for that input field. This is a much better practice and not only from a semantic point of view. Another benefit of using the html tag is that we can style it very easily via CSS. In order to couple the <label> to a certain input field we use the for attribute. The value of the for attribute should be the ID of the input field which the label describes.

If we change our form and use the newly learned <label>-tag, we get the following code:

Because the different <label>-tags are html elements and not server controls, ASP.NET won't mess with the markup and just leave it as it is. The HTML code that is generated is much cleaner, much more accessible specially for visually impaired visitors and on top we save on viewstate (if viewstate is not turned off, which you should whenever possible)!

A careful reader is asking himself right now: but what if I'm using master pages or a user control? When using master pages or user controls, ASP.NET changes the ID of the server controls in order to make them unique (certainly the case with user controls). To solve this we use some inline coding tags to get the ClientID of the server control into the for attribute of the corresponding <label>-tag. Did I lost you? Let's alter our example to make a bit more clear:

As you can see we use inline coding tags to fetch the clientID of the server control and fill it into the for attribute of the <label>-tag. If we look at the output of this page (it is wrapped in a master page) then we get the following html code (the input field ids have been truncated for your reading pleasure):

The for-attribute of each label matches the id of the input fields. And even if the page gets moved to a user control, we don't have to change anything. The ClientID is automatically filled out for us. Another nice side effect of using this technique: When clicking on a <label>-tag, the corresponding input field gets focus. This kind of behavior is implemented in every modern browser (and Internet Explorer 6).

I use this technique to create all my forms. If you have any remarks on this topic or post please feel free to leave a comment.

Download the examples of this article: AccessibleWebForms.zip (19.60 kb)

Useful reading:

• http://www.devarticles.com/c/a/HTML/Building-Accessible-Web-Forms/
• http://www.w3schools.com/tags/tag_label.asp
• http://webstandards.org/learn/tutorials/accessible-forms/beginner

Update: Chris pointed out in the comments that there is also an AssociatedControlID property on a <asp:label>. If you set this property to the ID of your server control, then a <label> is outputted which will automatically insert the correct for-attribute. I did a Google search on the property and found out that the famous Phil Haack has written an excellent blog post about the subject a while ago, go check it out.