Creating a QueryString utility Class

Building up query strings is quite a common task in web development but there is currently no utility class in .Net that neatly facilitates this. So I thought I’d have a go at creating one that nicely encapsulates the build process and makes use of Generic Collections. And here is what I came up with!

public class QueryString
{
    private Dictionary _Params = new Dictionary();

    public overide ToString()
    {
        List returnParams = new List();

        foreach (KeyValuePair param in _Params)
        {
            returnParams.Add(String.Format("{0}={1}", param.Key, param.Value));
        }

        return "?" + String.Join("&", returnParams.ToArray());
    }

    public void Add(string key, string value)
    {
        _Params.Add(key, HttpUtility.UrlEncode(value));
    }
}

This can be used like so

QueryString query = new QueryString();

query.Add("param1", "value1");
query.Add("param2", "value2");

return query.ToString();

Filed under: Code

Switching from XHTML to HTML

There has been a noticeable shift of developers deciding to abandon the XHTML doctype due to the lack of movement in the delivery of XHTML 2.0 and the continued efforts of browser vendors to implement HTML 5 as the new standard and way forward. This to me makes sense so I have also decided to down tools with XHTML and go back to a HTML 4 strict doctype for now until I make the move up to HTML5.

This may not be the easy ride I was hoping for and I get the feeling that years of XHTML tag mentality may make the switch a little trickier than I thought. Take the following example…

I published my first piece of work and ran it through the W3C Validator and to my surprise (as it is quite simple markup) it failed on 1 error but in several places. The reason at first was not obvious but after reading up on empty elements it turns out that in HTML I should not be using a forward slash in front of the closing greater than character in self closing tags

The browser will see

<link rel=”stylesheet” type=”text/css” href=”style.css”/>

as

<link rel=”stylesheet” type=”text/css” href=”style.css”>>

A simple mistake to make and a simple mistake to rectify but I get the impression that this is the first in a long line of XHTML conventions I will need to, not shake off as I will still have XHTML projects to work on but retrain the mind on when working with HTML

Filed under: Web Development, HTML, Markup, XHTML

Postcode Lookup Usability Fail

Postcode lookups have been done in a variety of ways to ease the process of filling out dreaded on-line forms, which I think web designers hate building as much as web users hate… using.

Today I had to pay my water bill, cue web form, but this web form had probably the worst example of postcode lookup I have come across. To highlight the positive elements it was very clear where I had to enter my postcode and the ‘Get Address’ link was very clear. It was what came back afterwards that was the problem…

 

Thames Water Postcode Lookup

 

 

This hurts my eyes and my brain. Surely a simple field sort on this data would not be a huge task?

I don’t know whether Thames Water have built the functionality or if they are plugging on to a third party implementation (probably the latter) but I would urge them to fix this or get on to the third party to fix it and I would bet money that the conversion rate on this form would improve and if it didn’t improve well at least it would make the lives of thousands of people a little easier.

Filed under: User Experience, On-line Forms, Usability

Firefox shines again with 2 excellent add-ons

I was going to do the it’s my first blog post thing hurrah! But i’ve decided against and will just get stuck in. Now you could argue that I’ve actually done the “it’s my first blog post thing” anyway, what the hell Hello World! Sorry

Since the emergence of Google Chrome with WebKit’s code inspector, I have to admit that I have been using Firefox less and less and if I do it’s to check my designs for cross-browser compatability. Two recently discovered add-ons have changed all that!

Recently I have been doing some work on optimizing a project for speed and after a little research came across an offering from the Yahoo Developer Network YSlow. YSlow is an extension add-on to the ever popular and extemely useful Firebug plugin (most developers will be familiar with Firebug by now but if not I would urge you to spend part of your day today taking a look at it).

 

Yahoo YSlow extension in Firebug

 

So why do I love YSlow? Well in my experience as a Web Developer performace optimization always seems to be that part of the project that you’ll get round to at the end, after all the fun stuff’s been done! Then of course during post-release you spend alot of time handling bugs and subtle (yet necessary) feature additions and before you know it you only get round to optimizing when it becomes a problem. YSlow gets you right into the source of your performance bottle necks quickly, tells you which areas are causing a problem and exactly which elements you need to concentrate on. It also provides details about areas of optimization that I certainly have never considered, for example adding expires headers to images (which takes a bit of work, if like me you don’t have access to IIS with your hosting company). If you don’t fully understand the concepts it suggests there are also links through to the YDN for fuller explanations.

So while I was in the Firefox add-on mood I noticed a tweet from Sitepoint advertising a little Firebug extension add-on of their own, introducing FireScope. Sitepoint have recently re-designed the reference section of their website and FireScope is an add-on that sits right in Firebug and allows you to pull in data from Sitepoint’s reference whilst you are using Firebug. Now I think this is great, because most of us are quite familiar with a wide range of HTML tags now and their semantic meaning but I think it’s always a good idea to look back at some of the more basic concepts and just make sure that you’ve really fully understood those semantics. It also handily provides you with browser compatability charts and code examples.

 

A HTML and CSS reference extension for Firebug

 

Firefox with Firebug, YSlow and FireScope has definately become my tool of choice for the moment, welcome home Firefox!

Filed under: Tools, Web Development, Add-Ons, Browsers, Firebug, Firefox, Peformance, Reference