Dean Hume's Blog

WebP - Advanced image optimization using ASP.NET MVC

Most modern web pages contain a lot of images. These images often make up the bulk of a web page request. According to the HTTPArchive, images make up over 50% of the average web page and if you are looking to optimize on the performance of your web page, the best place to start is often with the images on your page. By optimizing your images and simply reducing the amount of bytes that your users are downloading, you can drastically improve your page load times.

There are some great tools out there that will allow you to optimize and compress your images, but you can only optimize your images to a certain extent before they start to lose their quality. It's about time we start looking at newer formats of images in order to decrease their file size, yet still maintain the image quality. This is where the WebP format comes in. It is pronounced as 'weppy' and is a new image format that was developed by the team at Google.

WebP images are 26% smaller in size compared to PNGs and are 25-34% smaller in size compared to JPEG images. That is a massive saving! Google use WebP images instead of PNG images in Picasa, Gmail and its Chrome Web Store. Given the number of requests Chrome Web Store serves, this adds up to several terabytes of savings every day! As a web developer, you can use the WebP image format to create smaller and richer images that can help make the web faster. In order to compare the differences in image size, let's compare the following PNG below:

The image above is a PNG image that has a file size of 12KB. If I take this same image and convert it to WebP, it comes in at 4KB - that's almost a third of the size. Imagine being able to make that saving on each image in your website without compromising on quality!

While WebP images are awesome, unfortunately they are not without their limitations. WebP images are only currently supported in Google Chrome, Opera, Android, and Google Chrome Frame plugin for Internet Explorer. I still think that we should provide our users with the best and fastest browsing experience possible, so why not still offer this option to users that are capable of viewing WebP images?

In this article, I am going to run through an example that will show you how to create a simple HTML helper that you can use in your ASP.NET MVC applications to serve WebP images to browsers that are capable of handling them. In the case when the browser isn't capable of serving the images, it will simply fall back to its default image type. This simple change will reduce the size of the images on your page and improve your load times.

In order to get started with WebP images, you first need to download the encoder from the Google developer’s website.

The encoder allows you to easily encode most image formats into their WebP equivalent using a command line tool. Once you have downloaded the pack, it contains a set of tools that will allow you to encode and decode images into WebP format. The pack also contains a decent readme file that will get you up and running. The pack contains a tool called cwebp.exe which accepts the following syntax:

cwebp input.png -o output.webp

Once you fire up the command line and run the tool, pass it the original image and the name you would like it to output the WebP image to. It will produce a result similar to the following image:

Now that our image that has been converted into a WebP image, we can build a helper that will determine whether or not to display a WebP image or the original PNG image. I am going to steal/re-use some code that I wrote about in a previous article.

First up, we need to write a method that will detect if the browser is capable of handling WebP images.

The above method will detect if the current browser is Chrome, Opera, or Android. If true, it will return a Boolean notifying us that we can return the WebP image instead. Next, we need to create an HTML helper method that will return the path of the WebP format image depending on the browser capabilities.

The method above will detect if the browser is capable of handling WebP images and then replace the extension on the file with the new ".webp" extension. In order to use this Html helper, you simply need to call it in your view like so:

@Html.DrawImage("/content/images/visualstudio.png","Visual Studio")

We are almost there. If you hit F5 and fire up your application, you will see something similar to the following image:

The image isn't quite showing up correctly, and if you navigate directly to the link in Chrome, you will receive a HTTP 404.3 error. "HTTP Error 404.3 - Not Found The page you are requesting cannot be served because of the extension configuration".

This is happening because the browser doesn't know how to interpret the WebP image because the mime type hasn't been sent through with it from the server. In order to rectify this, we simply need to add the MIME type to the Web.Config file.

When the MIME mapping has been added to your Web.Config, IIS will send this MIME type back with the WebP image request and the browser will understand how to display the image. After adding the config settings, fire up the application and tadaaaa!

If you use this HTML helper in your application, it will automatically determine whether or not to display the WebP equivalent image to your users or not. You will need to keep a copy of both the WebP image and the original image (PNG, JPG, and GIF) in order for this example to work. WebP images are still in their infancy, but I would like to see them being adopted by more and more websites. They are a great way to serve quality images to your users without compromising on quality.

If you would like to download a copy of the source code used in this example, it is available via the following link.

Twitter bootstrap typeahead and ASP.NET MVC - Key/Value pairs

I suck at creating CSS. As a backend developer, I've always managed to get by with my CSS skills, but I've always been jealous of my front end developer colleagues when it comes to their ability to create beautiful web pages. Fortunately, the guys at Twitter have developed a great front-end framework that comes with pre-rolled CSS and JavaScript plugins.

The Twitter Bootstrap framework looks great on most devices and comes with a responsive grid which makes developing and designing very easy. It gives back-end developers like myself the opportunity to create half decent webpage designs. I have actually been using it on a recent side project when I came across the JavaScript typeahead plugin that comes with the framework. It is a great plugin that allows you to create styled AJAX style, type ahead search boxes.

The image above represents a typical example of how the search box will look. The Bootstrap website provides great documentation for most of the framework, but seems to provide little documentation for this particular plugin. Whilst it's very easy to work with a simple list of strings, the few examples that I found on the net didn't really show how to work with Key/Value pairs. Most searches that I need to perform will require an ID lookup going on in the background. In this post, I am going to show you how to get up and running with ASP.NET MVC and the typeahead plugin. We are also going to get it working with key/value pairs that are being retrieved in a chunk of JSON from an MVC controller.

If you haven't already downloaded the Twitter Bootstrap framework, get started by downloading it from the site. Next, we are going to start with our view. I've created a simple view with a textbox that is going to do the lookup.

At the bottom of the view, I've included a reference to the jQuery library and the typeahead plugin. I've added the JavaScript at the bottom of the page in order to maintain performance best practices. At the top of the view, I've added a reference to the Bootstrap CSS file which is used to style the page.

You will also notice that the text box has a data attribute called data-provide="typeahead". This attribute notifies the plugin that we are going to be performing a lookup with this textbox. Next, we are going to create the JavaScript that will wire it all up. Add this code into the same view just after referencing the Bootstrap libraries.

The above code is going to perform an HTTP Post request that is going to hit our controller and return a JSON string of the countries and their associated codes. On line 3, I have created an array that is going to contain the key/value pairs. Once the HTTP post has a successful response with the data that it needs, it is going to add them to this array, so that we can retrieve it at a later stage. You will also notice that around line 16, there is a function called "process". This function takes the array of results and searches through according to what the user types.

This typeahead plugin has a set of overridable options that can be used to cater for different scenarios when interacting with the lookup. We are going to use the "updater" function in this example. This function is called by the typeahead plugin once the user selects an item, which gives us a chance to do something with the selection. On line 19, we are using this function to retrieve the country shortcode from the array of key/value pairs that we mapped earlier. We are also setting the text of a div to match the shortcode. Depending on what you need to do with the key, you might want to set the value of a hidden field, update another field, etc.

We have built all the JavaScript that is needed to retrieve the data, and now we need to add an Action method on our controller that will return the JSON string of the countries.

The above code builds a list countries with a short code and country name. This list will be serialized into the JSON string that we need to do the lookup. Once serialized, the JSON string that it returns will look a little something like this:

[{"ShortCode":"US","Name":"United States"},{"ShortCode":"CA","Name":"Canada"},{"ShortCode":"AF","Name":"Afghanistan"},{"ShortCode":"AL","Name":"Albania"},{"ShortCode":"DZ","Name":"Algeria"},{"ShortCode":"DS","Name":"American Samoa"},{"ShortCode":"AD","Name":"Andorra"},{"ShortCode":"AO","Name":"Angola"},{"ShortCode":"AI","Name":"Anguilla"},{"ShortCode":"AQ","Name":"Antarctica"},{"ShortCode":"AG","Name":"Antigua and/or Barbuda"}]

Although I am simply building up a list of countries, you might want to hit the database and return more meaningful data. When we run this and see it in action, it will produce a search bar that is similar to the following image:

And once you select a certain country from the list, it will update the div with the selected ID accordingly.

For more information on the Twitter Bootstrap plugin, check out the website. If you would like to learn more about the overridable functions that the typeahead plugin provides, please refer to this great blog post.

Free icon packs for developers

Over the years, I have started to hoard a collection of links to various free icons that I find on the net. Often, I use these icons to spruce up simple prototypes or just make my web pages look livelier. Unfortunately, I've been collecting these links to icon packs and never get the chance to use half of them! If you are a web developer that has need for free icons, then this might be for you.

This article will hopefully provide you with a list of free icons that you can use in your day to day development. This list features five great icons packs that are available to download today.

IconMonstr

IconMonstr is an awesome site that provides you with a list of over 1000 icons that are freely available to download. Every time I re-visit the site, there seems to be more icons that have been added. You are able to download the icons in either PNG or SVG format.

To download the icons, please visit iconmonstr.com

IcoMoon

Having only recently discovered the site, I am quickly becoming a big fan of the IcoMoon fonts. There is a free pack available that provides you with 450 free icons that come in PNG or SVG format.

To download the pack, please visit the site.

Simple Icons

This list was recently featured on the Smashing Magazine website, but I thought that these icons were definitely worth a repost.

Simple icons can be downloaded from the site at simpleicons.org and come with 116 PNG icons in eleven sizes, ranging from 16px to 4096px.

The Entypo Pictogram Suite

Entypo is a set of 250+ pictograms that also contains a set of icon fonts. If you aren't familiar with icon fonts, think of them as Wingdings for the web. They scale really well and don’t require http requests for each character making them perfect for the web. For more information on icon fonts, check out this blog.

And to download the icon pack, check out the entypo.com website.

Typicons

Typicons are a set of free vector icons embedded in a webfont kit for easy use in your UI. Again, this icon pack comes in both PNG or SVG format.

For more information or to download the pack, please visit the website at typicons.com

I hope you have found this list useful! If you have any icons that you think are worthwhile adding to this list, please feel free to leave a comment below.

The Google PageSpeed API & MVC 4

I often use tools such as Yahoo! YSlow and Google PageSpeed to profile the performance of my websites. These tools offer useful performance suggestions that will improve the speed and performance of my sites if implemented correctly. They both plug into the browser and can be run at the click of a button. Depending on how often you profile your website, it can be quite a manual process running the tool through the browser every time you wish to check the performance of a web page. Fortunately, Google have developed an API for the Google PageSpeed service.

The API allows you to programmatically generate PageSpeed scores and suggestions and makes it easy to integrate performance analysis into your development tools and workflow. If your company or organisation is interested in web performance, you could build tools around this and use it as part of your Continuous Integration process. You could even use it to build a performance dashboard for all of your products. It's a pretty cool API that can be easily implemented.

In this article, I am going to run through a simple example using ASP.NET MVC 4 and the PageSpeed API that will show you how to retrieve performance results for a webpage. The API will return performance information about your site such as the score, performance rule/result, and the rule impact.

API key

In order to get started, you will need to get an API key from the Google APIs Console. In the Services pane, activate the PageSpeed Insights API and go to the API Access tab. The API key is near the bottom of that pane, in the section titled "Simple API Access." After you have an API key, your application can append the query parameter key=yourAPIKey to all request URLs.

Using the service

Once you have your key, calling the API is a pretty simple process. You simply need to hit the following URL with the API key and the page to be checked.

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url={pageURL}&key={yourAPIKey}

Try and use that URL in your browser with your API key and page to test. The API returns a set of results in JSON which is easy to read and work with.

In this example, I am going to use ASP.NET MVC 4 to work with the API and build a simple dashboard. Using the power of C# and MVC 4, we can write an ActionMethod that is asynchronous and calls the API in a non-blocking fashion. The code below shows this ActionMethod in action.

On line 1, I am adding a simple 'async' keyword in the declaration of the Action. This signals to the framework that we are going to run this Action asynchronously.

On line 4 and 5, I am calling the Google PageSpeed API using the web page that I want to profile as well as the API key that we generated earlier. You may also notice that I have decorated the client.GetAsync method with an await operator. This notifies the framework that it needs to await the completion of this method. The beauty of the new asynchronous functionality in .NET makes it really simple to write asynchronous code. It is no longer a complex and tedious task to get your code to run asynchronously.

On line 10, I am using the await operator again and reading the contents of the HTTP request that I made in line 5. Finally, I am deserializing the contents of the response into an object that I can return to my view. The code snippet below shows the object that the HTTP response is deserialized into.

It's as simple as that! You can choose to do whatever you want with the data on your views. As part of an experiment, I used the results from the Google PageSpeed API and built a performance dashboard.

It is still in the early stages, but I am hoping to add to this continually. For more information, check out the page on this site at www.deanhume.com/Home/PageSpeed

Frontend Single Point of Failure

At this year's Velocity Europe conference, I watched a great talk by Google's Patrick Meenan about 3rd party scripts and frontend Single Point of Failure (SPOF). A single point of failure is a part of a system that, if it fails, will stop the entire system from working. Quite often, you may add 3rd party scripts such as jQuery, social sharing buttons or Ad tracking scripts to your website with the best intentions, but depending on the way that these scripts are loaded you could potentially create a frontend single point of failure that can block the entire site!

If these 3rd party scripts are not implemented and deployed properly they pose a significant risk for the websites that host them. Finding and tracking frontend SPOFs on your website is not always easy, but fortunately there are tools available that will help you detect them. One of the tools that was discussed at Velocity Europe was SPOF-o-matic. This tool is an excellent plugin for Google Chrome that detects frontend single points of failure and allows you to simulate these 3rd party resources being unavailable.

Once you have downloaded and added the plugin to Chrome, simply navigate to your desired webpage. If you have any scripts that are blocking the webpage, you will notice a number in the top right-hand corner of the browser above the plugin. This number represents the number of scripts that could potentially block the website.

Click on the plugin and you will be presented with a list of the blocking scripts.

If you choose to enable resource blocking and reload the page, you will be presented with a great example of what would happen if a server that was hosting the 3rd party script went down. The results can be pretty devastating and this can happen to all sites, from major eCommerce companies to small startups.The video below shows what happens to this very page when it becomes blocked by a 3rd party script. The video on the left shows the page without it being blocked by external scripts, and the video on the right shows the same page being affected by a SPOF. Notice the difference in load times!

Please download the video at the following link

As you surf the web with this plugin enabled, you may notice how many websites have blocking scripts on their pages! If possible, the best option is to load these scripts in an async or non-blocking way.

When embedding scripts on your site, consider using the async or defer tags to load them asynchronously. I have previously blogged about these HTML attributes and the way that you can use them to asynchronously load JavaScript. Another option is to actually use JavaScript itself to load the third party script - there are some great examples in this blog post.

If you work with 3rd party scripts on your site, you will need to be mindful of the pitfalls that could occur if they aren't implemented properly. You could save yourself from an embarrassing outage!

For some further reading, check out the following links:

http://www.stevesouders.com/blog/2010/06/01/frontend-spof/

http://calendar.perfplanet.com/2012/spofcheck-fighting-frontend-spof-at-its-root/

I'm writing a book! Fast ASP.NET Websites

Ever since I first started writing code, I've always been interested in the performance of websites and making them faster. It's amazing how a slow website can be brought to life with a few simple tweaks to your website setup. There is nothing more satisfying than seeing someone use a website that you have worked on and exclaim, "Wow, this is fast!"

In the open source community, there is a big focus on website performance and building stronger, faster websites. However, this same information on web performance isn't as readily available within the .NET community. This prompted me to write a step-by-step book that will guide you and show you how to improve the performance of your websites. Even if you think your website is already fast, I'm pretty sure that you can make it even faster!

The first section of the book is based on front-end performance, and you’ll discover how to use profiling tools such as Yahoo! YSlow and Google PageSpeed to take your website from zero to 100. The next section looks at some of the finer details of web page performance and leveraging HTML5 to improve the performance of your site. The final section of the book is dedicated to ASP.NET Webforms and ASP.NET MVC specific techniques that will improve your page load times across your website.

Each chapter also comes with source code examples in both ASP.NET MVC and ASP.NET Webforms, which allows you to follow along and make improvements to your site regardless of your development style. The changes in each chapter are easy to follow and make use of the new Visual Studio 2012 features that are available. As part of some early marketing material, excerpts from a few of the chapters and they are available online on Codeproject and DevCurry for you to read.

The book will be published by Manning and is officially available in early summer 2013. However, if you would like to read chapter-by-chapter while it's being written and get access to the final book as soon as it's finished, it is available on Manning.com via the Manning Early Access Program - anyone can sign up! I will update this blog with progress of the book periodically, and I look forward to releasing it to you in early summer 2013!

Disabling Flash in browsers

I am currently working in a team where we are replacing an older Flash implementation of a product with a shiny new HTML5 version. Quite often we find ourselves needing to disable Flash in many different browsers as we run through the testing process with the new product. I often forget how to do this because there are so many browsers, so I thought that compiling a list of instructions for each browser might come in handy for other developers and testers out there too.

Google Chrome

Let's begin with Google Chrome. In your address bar type "about:plugins". This will bring up a page that displays all the plugins that you have installed for Google Chrome. Generally, the first plug-in on the list is Adobe Flash player, so you can simply disable it there.

Internet Explorer 9

Flash can be easily disabled in Internet Explorer using the settings menu. Click on the settings “cog" in the top right hand corner of the browser and choose "Manage add-ons".

Next, click on "Toolbars and Extensions" and choose "Shockwave Flash Object". In the bottom right hand corner of the pop up window is a button that allows you to disable the Flash add-on.

Firefox

Firefox has an easy to access menu that you can use to disable Flash. Start by clicking the "Firefox" menu in the top left hand corner and selecting "Add-ons".

You will be presented with a screen that looks similar to the image below:

If you browse through the list of plugins, you will notice the Shockwave Flash plugin. This can be easily disabled with the enable/disable button that is located next to it.

Safari

Disabling Flash in Safari is a little trickier than the other browsers and always seems to catch me out. In the top right hand corner of the browser is a settings "cog". Click this and choose "Preferences".

Next, you will need to navigate to the "Security" tab on the menu.

There is no option to disable individual plug-ins, so you will need to uncheck the checkbox and disable all plugins.

Opera

The final browser on this list is Opera. Disabling Flash in Opera is a very simple process. Simply hit F12 and you will be presented with a menu similar to the image below.

Simply uncheck "Enable plug-ins" and flash will no longer run in the browser. This list of browsers is far from complete and there are a few more browsers that I would like to add to this list. Please feel free to suggest more browsers and I will get them added to the list!

.NET Caching - File Dependencies

In a previous blog post, I wrote about the built in support that .NET has for in-memory caching. It sits under the System.Runtime.Caching namespace and can be easily added to any application to give you a great improvement in performance. You can store any type of object in the cache and this makes it extremely useful for storing different types of data.

In this post, we are going to run through a very handy feature that is built into the System.Runtime.Caching namespace - FileChangeMonitor. As the name suggests, FileChangeMonitor will monitor the contents of a file and respond as soon as any changes are made to that file. Instead of having your cache expire at a certain date or time, you can add a file dependency to your cache using the FileChangeMonitor. It means that when the contents of a certain file change, your cache becomes invalidated and you will need to retrieve a fresh copy. This is ideal for certain situations where you might be caching the contents of a file and don't want to stop and restart your entire application just for the changes to take effect.

Let's take a closer look at an example the FileChangeMonitor in action. The following snippet contains the code that is needed to add a file into cache using the FileChangeMonitor.

In line 1, we are obtaining a reference to the default MemoryCache instance. The following line contains a reference to the CacheItemPolicy that we will be using as a reference to store the data with. Using the _cache.Get method in line 10, we are trying to retrieve the data from the cache based on the cache key. If nothing is found, then we simply try and read the contents of the file and add it into cache.

The most important part to notice here is this line

_policy.ChangeMonitors.Add(new HostFileChangeMonitor(new List { ImportantFilePath }));

Here, we are adding a FileChangeMonitor into the list of ChangeMonitors that will be stored against the data in the cache. This important piece of information will be used to check if the contents of the file have changed and if so it will invalidate the cache. This will cause the null check on line 14 to fail and a new version of the contents will be read from the file.

The flow of logic for the above piece of code might look something like the image below

It's that easy! I have found this .NET feature to be very helpful when dealing with caching. I hope after reading this that it benefits you too!

The Five Whys

I've been reading a book called the Lean Startup recently. It is filled with great advice and the Lean Startup is basically a business approach that aims to change the way that companies build and launch new products. Whilst reading the book I came across a chapter that dealt with a technique called the Five Whys. This technique instantly piqued my interest as it is relates quite closely to problem solving in a product development environment.

The Five Whys technique was originally developed by Sakichi Toyoda and was used within the Toyota Motor Corporation during the evolution of its manufacturing methodologies. It is a methodology that allows us to get to the root cause of a problem. The system takes its name from an investigative method of asking the question "why?" five times in order to understand what has happened. In theory this sounds simple, but putting this into practice is a lot harder than it sounds. By systematically going through a problem five times, you force yourself to get to the real root cause of the problem.

An example of how this could be applied to a software development process may look something similar to the following:

Why did the signup form fail? Because the API returned an error.
Why did the API return an error? Because the email address wasn’t being validated and caused the API to fail.
Why wasn’t the email address being validated? Because we didn’t think it was necessary.
Why don't we have email validation in place? Because we rushed to get code out and didn't think we needed it.
Why are we releasing code on a Friday night? Because there is no policy in place that says that we can't.

If this systematic procedure of asking "why" five times wasn't done, we wouldn't have gotten to the root cause of the problem. We might have just fixed the signup form and not the root cause of the problem. There could be a number of reasons why a development team may only look at the initial issue instead of the root cause of the issue, but by using the Five Whys you are ensuring that nothing slips through undetected. At each stage of the Five Whys, you are also able to identify different actions that need to be done in order to fix the problem.

The Five Whys doesn't only relate to software development, it can be applied to all manner of issues that need resolving. In fact, the National Health Service in the United Kingdom actually use this technique when dealing with hospital issues. A key phrase to keep in mind in any Five Why exercise is "people do not fail, processes do". You will often find that the root cause of the issue can be resolved by a simple change in process. The Five Whys can act as a powerful feedback loop. By simply making small adjustments to your processes and revisiting them with the Five Whys, you can ensure that little by little, large problems are resolved at the root cause.

I have only given a brief summary on the Five Whys, but for more information check out the book - The Lean Startup or for more information take a look at this article. The next time that an issue affects your team, I recommend that you give the Five Whys a try!

Improve Page Load Times With DNS Prefetching

I'm often looking for ways to improve the performance of my websites and provide a better experience for users. Quite often you may find that your site is running efficiently and performing well. You may also have run your application through Google PageSpeed or Yahoo! YSlow and come out with a great score. However, one thing that has always affected my page load times is the time that it takes to lookup the DNS for the different components on a page. For example, the image below shows a waterfall chart for the resources that load on the first page of my blog:

Notice the dark blue part of the bar that appears before most components in the waterfall chart. This dark blue is the time the DNS lookup takes when downloading a resource. It's quite a large percentage of the component download time! Even if the component is optimized and has been minified/bundled/smushed, you still have the DNS lookup to contend with. I used webpagetest.org to generate a table with the DNS lookup times of this website.

As you can see from the image above, those times are quite high and it would be much more efficient if we could cut down on this time and speed it up. Fortunately, there is a cool trick that will make the load time of your webpages happen even faster. It's known as DNS prefetching, and it's really easy to implement. All that you need to do is include the following attribute as a link at the top of your webpage.

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

DNS prefetching is an attempt to resolve domain names before a user tries to follow a link. Once a domain name has been resolved and if the user does navigate to that domain, there will be no delay due to DNS resolution time. On this blog, you hit the main page and are presented with a lot of links to the different posts. If I am able to prefetch the DNS of some of the external links before a user navigates to the next page, I will be able to cut down a huge chunk on the DNS lookup time for the next page. According to the Chromium documentation, if a user resolves a domain name to an IP address and this is cached, the resolution time can be as low as 0-1ms (a thousandth of a second). That is pretty impressive!

I added DNS prefetching to this site and definitely noticed improved load times. There is currently support for this in most major browsers (excluding IE), so it doesn't make sense not to use this in your web applications today! DNS prefetch is a safe HTML5 feature that will simply be ignored if used by older browsers if not supported. If your webpages uses content from multiple domains, this is definitely a clever way to speed up your page load times!

Velocity Conference Europe 2012 - Roundup

This week saw the return of Velocity Conference Europe to our shores. With a great line up of speakers, this conference is a gathering of hundreds of web ops and performance professionals that get together to share their ideas and expertise. Without a doubt, this is one of my favourite conferences.

In my next few blog posts, I hope to cover some of the great things that I have learnt while attending this conference. In the meantime, I wanted to put together a collection of links and slides that relate to the different presentations. My brain is still reeling with hundreds of ideas and my notepad seems to reflect this!

The following are just a few of the presentations that stood out for me. For more information on the conference and the other presentations, please see the website.

Move Fast and Ship Things - Girish Patangay (Facebook)

The conference kicked off with an exciting talk from Girish Patangay, one of the release engineers at Facebook. Surprisingly, Facebook deploy new code at least twice a day every day to tens of thousands of servers! The Facebook source code is largely written in PHP and in order to improve the scalability of its PHP-based infrastructure, Facebook developed a special compiler called HipHop. HipHop compiles all their PHP code into a single 1.5 GB binary. Deploying a 1.5 GB file across all of their servers can take time and in order to speed the process up, they use a BitTorrent deployment system. To read more about their deployment process, check out this link.

Webpagetest.org - Patrick Meenan (Google)

I have been using webpagetest.org for some time now to test the speed and performance of my websites from different locations around the world. Patrick Meenan from Google gave a presentation on some of the newer features of webpagetest.org such as the SPOF tab and the ability to profile a website using a mobile phone agent. If you haven't used webpagetest.org before, I thoroughly recommend that you check it out. The site is totally free, and it can give you an interesting insight into how your website performs from other locations throughout the world.

Make Your Mobile Web Apps Fly - Sam Dutton (Google)

Sam Dutton from Google gave a talk about mobile web performance and ways that you can improve the speed of your mobile web applications. Below is a list of a few of the topics that he talked about:

-- Creating Fast Buttons for Mobile Web Applications - https://developers.google.com/mobile/articles/fast_buttons

-- Who killed my battery? An interesting insight into the way that bad code can affect the battery performance of a mobile website.

-- Unnecessary JavaScript code can be wasteful. Use a code coverage tool to remove any unused code.

Scaling Instagram - Mike Krieger (Instagram)

Instagram has been a huge success and was recently bought by Facebook for $1 billion. They have surpassed the 80 million user mark, and not surprisingly Mike Krieger gave an interesting presentation about the techniques that Instagram use to scale their services. The team at Instagram only consists of 7 people. Considering that the website has such a massive user base, this is a monumentous accomplishment!

I have included a link to the presentation below:

Mobile Profiling - Remy Sharp (Left Logic)

If you develop websites for mobile devices, you will know what a pain debugging and profiling can be. Most of the mobile browsers don't really come with adequate debugging tools and simulators just don't get close enough to the real thing. Remy Sharp gave a great presentation about mobile profiling and some of the ways that you can get around the problems that mobile developers face. One of the tools that you can use is jsconsole.com. Remy developed this himself in order to solve a few of the problems that he was having while debugging a mobile website.

Another free tool is IWebInspector which allows you to debug Safari on iPad and iPhone.

To wrap up...

I was also lucky enough to bump into Steve Souders who was one of the hosts for this years event.

He is a great guy and if you haven't already done so, I recommend checking out his website. If you are interested in web performance he has two great books - High Performance Websites & Even Faster Websites. That's about it for this year's event. If you get the chance next year, I thoroughly recommend attending this conference!

Visual Studio 2012 - A week in perspective

I am one of the lucky ones. Fortunately my company gives us a MSDN subscription and this goes a long way toward keeping up with the latest Microsoft Software. I have been eagerly awaiting the release of Microsoft Visual Studio 2012 which came out last week.

I was a little apprehensive about installing Visual Studio 2012 and running projects in Visual Studio 2010 side-by-side as I work in a team. Fortunately, the latest version offers a compatibility feature that allows you to run 2010 projects in 2012 and vice versa. It will need to add some migration settings to the project, but I have tested this and you can still open the project in Visual Studio 2010 without any problems.

Installing

After downloading the Web Installer, I began to install the software. I was very impressed with the overall install time. It clocked in at about 30 minutes and only one restart - pretty impressive considering how long it took to install VS 2010 and the SP1 service pack for it! I am running Visual Studio 2012 on Windows 7 and the first thing I noticed on the installer screen is the shiny new "Metro" style layout.

Once the installation was complete and Visual Studio started up for the first time, I was presented with the new grey-ish theme.

Not a bad layout at all. It takes some getting used to, but I was thoroughly impressed with the speed with which solution files and projects opened. It seems as if the Visual Studio team have placed a lot of emphasis on the speed in Visual Studio 2012.

Asynchronous Code

Visual Studio 2012 is also packed with plenty of new features. I have been quite keen to start messing around with the new Asynchronous features that have been introduced with .Net 4.5 Framework. The async CTP was cool, but it just didn't quite feel right until the correct version was released. Now writing asynchronous tasks is super easy using the System.Threading.Tasks namespace.

For more information on the new asynchronous methods in C#, check out this link.

AntiXSS

By default, the AntiXSS Library is included with Visual Studio 2012. In order to use it in your project, you simply need to add the following to your Web.config file.

For more information on the AntiXss Library, check out the following link.

ASP.net MVC 4 and Webforms Updates

There have been a load of cool new features introduced, including the new Bundling and Minification feature which sits under the System.Web.Optimization namespace. It allows you to automatically minify and bundle your CSS and JavaScript files and works in both MVC and Webforms. MVC 4 is also included by default, which means you get all the shiny new features of this latest release of ASP.net MVC.

Nuget by default

Visual Studio 2012 ships with Nuget by default, which makes getting all the latest libraries in your application the click of a button away.

The Reference Manager also has some noticeable changes:

Editor Updates

The JavaScript, HTML and CSS editors in Visual Studio 2012 are completely new and they greatly improve the overall development experience.

Publishing

There are slightly updated publishing tools with the latest release. They allow you to save different versions of your release, which can be handy if you frequently deploy to a dev and live environment.

It also includes a totally new way of deploying your Windows Azure projects. No longer do you need a separate Azure project just to publish your application. You can easily do this as if it were a standard deploy to an FTP location

IIS express & ASP.net Performance

The lastest version of IIS 8 ships with Visual Studio 2012 by default. I have been using IIS express for a while now in Visual Studio 2010 as a separate download, and it performs really well. You get all the features of a fully blown IIS, without needing to deploy to your local IIS every time.

The ASP.net team have also focussed on the speed and performance of ASP.net websites. These changes include how much memory a website occupies and also the time it takes to launch a web server process for the site when the site assemblies are no longer in memory. For more information, check out this link.

Summary

Overall I think that this latest release of Visual Studio 2012 is awesome. It feels a lot faster, and every click seems to respond instantly. The colour scheme is a little grey, but I guess this is the way that the overall "Metro" theme is moving. This is a great product and an exciting time to be a .Net developer!

Net Magazine Article

An article that I recently wrote for Net Magazine is coming out in the September 2012 issue. The article talks about Content Delivery Networks and the benefits that using one can bring to the speed of your page load times. I am a big fan of the magazine, and it's definitely worth a read if you haven't read it before!

The issue will be on sale in most good book stores and should hit the shelves around the 14th of August. For more information about Net Magazine, please check out this link.

Hidden Gems inside .Net Classes

Surprisingly, there are loads of great data snippets hidden inside .Net classes. If you've ever found yourself adding localization to your website, you may have come across the CultureInfo Class in .Net. I know that sometimes I have needed to get a list of country ISO codes and have struggled to get a comprehensive list, or I have needed to retrieve the list from a Database containing the names. This can add an extra Database call and could result in extra code maintenance, and possibly a performance hit.

Well, this is where CultureInfo comes to the rescue. Using this Class, you will be able to easily retrieve a list of country names and their ISO codes using built-in .Net code.

Which gives you a list of 128 countries and their region information:

We can then use the RegionInfo Class to retrieve native names, currencies and ISO codes:

This gives you:

You can also retrieve the month names and day names:

Okay, so all of these are in English...what about other languages? You simply need to set the culture and you will be able to see the results in your chosen language.

Another really handy class is the TimeZoneInfo class, it allows you to retrieve a list of time zones along with their names and values natively using .Net. It can be used to represent any time zone in the world.

Whoa! No need to store and maintain a list of cultures, day, month or timezone names any more. Much better!

Lazy Loading Social Sharing Buttons

Social sharing buttons play a big part on the web today. They are used to drive traffic to the site, and if done correctly can be very successful. Unfortunately, the loading of these buttons has its downsides on performance. Having many social sharing buttons on your site can slow it down because it will block any other scripts from loading while it is waiting for the document to render the social media from the different domains.

In my last blog post, I wrote about asynchronously loading JavaScript. To achieve the best page load and responsiveness it is advisable to asynchronously load these social sharing buttons. However it isn't always that easy to do this without writing a lot of code to cope with the loads of different social buttons. This is where Socialite.js comes in. It's a great library that is very easy to implement and activate a load of social sharing buttons. I like that you can easily add Twitter, Google+, Facebook, LinkedIn and many more buttons with one library and no repeating code. For a demo of the code, please visit the demo site. I also really like the phrase that they use on the site - "If you're selling your soul, you may as well do it asynchronously".

There are some great samples on the site that run through an onload demo, hover demo, and scroll demo. In this post we are going to run through a scroll demo - this is pretty similar to lazy loading images and only loads the buttons when the user's viewport comes into place. In order to add it to your page, you will first need to add a reference to the script. Next, create an element with the class socialite and a class like twitter-share to specify the social network and type of widget.

In order to get it to simply load asynchronously, all you need to do is call it like so:

Socialite.load();

However, as we are going to run through the scroll demo we need to do things slightly differently. At the bottom of your page, include the following code.

The above code uses jQuery and listens for any changes to the window viewport. It then checks if the socialButtons element is within the viewport. I am pretty sure that you could write this more effectively, but as I am not a JavaScript developer - you will have to forgive me!

In order to view a working demo, please click the following link. There is now no excuse not to load these social sharing buttons asynchronously - no more PageSpeed loading scores being affected by these buttons!

HTML5 Asynchronous JavaScript

HTML5 has a handy little attribute called 'async'. This attribute can be used together with Script tags to asynchronously load JavaScript. No more fancy code to get your JavaScript to run asynchronously - you just need to add this to a script tag and it just works.

In order to improve page performance and stop Scripts from blocking your page loading, this is the ideal way to go about it. Many a time you will see a blank page while a large JavaScript file is being downloaded and parsed and this is because it is blocking the DOM. In theory, if you have two scripts that need to load in a page and you are using async, they don't need to wait on each other, but instead can run at the same time and in parallel. Another very useful tag attribute that can be used together with 'async' attribute is the 'defer' attribute.

It is also very similar but instead of loading the file asynchronously, it guarantees that the files are executed in the order they occur in the page. It only runs the scripts after parsing is completely finished. I created a small demo page and applied the 'async' attribute to all my script tags. As the page relied on jQuery, the first thing that I noticed was that I had a JavaScript error on the page.

This occurs because all the JavaScript on the page was trying to load at once, and because code further down couldn't find a reference to the jQuery library, this caused an error. In order to get this to work, I needed to make the script that relied on jQuery load last - using the 'defer' attribute.

Comparison

I set up two test pages so that I could compare the differences between the two versions. I used Chrome Developer Tools to create a waterfall chart that shows the differences between the load times. If you are using Chrome as your browser, simply fire up the developer tools by hitting F12.

The is the original version without async.

This is the new version using both async and defer.

Notice the difference between the two - you can see that the async version doesn't block the page from loading and also loads the page slightly faster. The DOMContentLoaded has completed and then finally the knockout.js file is loaded asynchronously afterwards. It is important to note that the DOMContentLoaded has finished and it wasn't blocked while the knockout.js file was able to continue loading asynchronously.

You can view the two files and profile it for yourself - here is the version without async and the version with async. The test pages that I set up are quite small and load relatively quickly. You might notice that with larger pages and more intensive JavaScript files that the page load difference is more noticeable. There is a great demo page on the IE website that lets you see the HTML5 Async scripts loading visually and gives a good understanding of what we are trying to achieve.

Support

At the moment, the browser support for the Async attribute looks like this :

- FireFox 3.6+
- Internet Explorer 10+
- Chrome 8+
- Safari 5.0+
- Android Browser Honeycomb and Ice Cream Sandwich
- Possible support in Opera starting in 12+

If it important to remember that most browsers support the async attribute when it is used in conjunction with the "true" value (async="true"). This is because when the attribute first came out many browsers only originally supported this, however the newer HTML5 way of doing this would be to write async without the "true" value. For more information on browser support for the Async Attribute, see this question on StackOverflow.

A Basic Guide to Building Chrome Extensions

Google Chrome has come a long way since it's early days. I am a big fan of the Chrome Developer tools and use it in my day to day development. There are also loads of great tools and extensions that are on offer at the Chrome store, and most are available to download for free.

Depending on your requirements, creating a Chrome extension is really quick and easy - all it requires is a little knowledge of JavaScript and HTML. In this post, I am going to run through a tutorial that shows you how to create a small Chrome extension that allows you to display the top 5 posts on this blog from the RSS feed in a popup. It is a pretty basic example, but will give you a good understanding of Chrome extension development.

In order to build an extension, the main starting point is the Manifest.json file. This contains all the configuration settings and will be used when your extension is loaded into the browser.

From the code above, you can see that I am setting the name of the extension as well as the icons, titles, and description. All these values will get used by the browser when the extension is loaded up.

Next, let's create our popup page. This can be done using standard HTML and easily allows you to add CSS styling and JavaScript to the page. Notice how this page (feed.html) is the same page that we referenced in the Manifest.json file.

I used a little piece of code that is supplied by Feedburner.com to add a small feed on any website. Once this was in the page I was ready to upload the changes and test it out! In order to upload your newly created extension, click on the settings icon in the browser.

Then choose Tools -> Extensions

Next 'Load Unpacked Extension' - this will allow you to load your extension in the folder that it was created. It will look for the Manifest.json file and the feed.html file that it references. If you look in the top right hand corner of the browser, you should notice your new icon!

Now when we open it, it doesn't look that great - it could do with some CSS styling.

We can simply add this to the HEAD tag on the feed.html page.

Which then looks like this:

And that's it! In order to see the many features that are available - check out the Chrome Developer website. If you come across any issues while creating these extensions, I always find it really useful to use the Chrome Developer Tools to inspect the code for any errors. In order to do so, right click on your extension and choose 'Inspect pop-up'. This will give you easy access to debug your code.

In order to download the example created in this post, please click here. For other great Chrome extension samples to get you up and running, visit the Chrome Developer site.

I have also created a basic extension that is available on the Chrome store, it allows you to easily create QR Codes and Barcodes in a handy extension - it is available to download here.

Running multiple browsers in one test run with Selenium

The beauty of Selenium is that it allows you to test your UI against all of the common browsers out there at the moment. Writing the code to test for a test scenario is quick and easy and getting up and running with Selenium can be done in a matter of minutes. Selenium works alongside Nunit and also nicely slots in with your automated build environment.

Instead of writing a new test class every time you want to test a different browser, rather harness the power of Nunit and get it to do all the hard work for you! That way, you can run multiple browsers against the same code in one test run.

Instead of using writing your test class like this:

Change it to use the where clause in C#. The where clause is used to specify constraints on the types that can be used as arguments for a type parameter. In this example, we are declaring a generic class and allowing the type parameter T to implement the IWebDriver interface. This way every time the TestFixture is run, it will use the type that we are passing to it.

For more information on the where clause in C#, please see the following links - here and here. This is a rather basic example, but you can see how this can be applied to any example using multiple browsers.

Hope this helps with your testing!

Selenium WebDriver - Using a Headless Browser in .Net

If you have ever run a large suite of automated tests using Selenium WebDriver, you will know that sometimes it can take ages to complete. This coupled with different versions of browsers can be a bit of a pain. This is where Headless Browsers come in.

In the simplest of terms, a headless browser is a web browser without a graphical user interface. This means that the browser can access web pages but doesn't ever display them to a user and this makes it super useful because it is lightning fast, lightweight and in-memory. Instead of having to wait for the browser to load a new window and then open and close, you can send it a large chunk of URLs to check and it will be able to handle them fast and efficiently.

This comes in very useful when writing selenium tests that you want to get up and running quickly. At my workplace, we also have our Selenium automated tests incorporated into our CI builds. I spent a while looking for .net solutions out there that are easy to get started with and don't require much change to your existing code. There is a great Java version out there called HtmlUnit, but I couldn't find any decent .net ones....until I came across SimpleBrowser. Fortunately SimpleBrowser works using the IWebDriver interface, which means it quite easy to get started with.

I have blogged quite a bit previously about using Selenium WebDriver, so for more information on the basics, please check out this link. Let's begin by taking a look at a simple example - first, you will need to download the latest version of SimpleBrowser from Github. Next, add a reference to the SimpleBrowser libraries.

As you can see, no GUI was displayed to the user - it all ran in the background and was super fast and efficient. I ran this against a large suite of tests and noticed that it ran extremely quickly! SimpleBrowser supports cookie-based sessions, HTTP/HTTPS, CSS selectors, etc. However, there is also currently no support for JavaScript - this may or may not be seen as a problem depending on how your site is coded (You may have considered progressive enhancement).

I did come across this issue when testing:

Some older versions of the Webdriver.dll might not work, but fortunately there is a workaround for this - you can update your app.config to bind to any older versions - this seemed to work for me.

Either way, I think this is a great tool and will start putting it to good use! To download a copy of the project in this article, please click here.

Dynamic Favicons using HTML5 Local Storage and TinyCon

I was perusing Github the other day and I came across this awesome little JavaScript library. It's called TinyCon and it's a small library for manipulating the favicon in your browser. It adds alert bubbles and changing images pretty similar to the way Gmail does.

It's basically a really fun little library that allows you to add a notification bubble to your favicons. I started to play around with the code provided on Github and got up and running in no time.

Using this simple example will give you something like this:

As you can see the above example is really simple and not really real world. It's using a timer to update the icon every second. After messing around with the example on the site, I wondered how I could apply the notifications to this site. If I checked the last blog entry that they read on this site, then I would be able to notify them if there were any new blog post's since their last visit. It's just a fun experiment really!

If you are a regular visitor to the site, you might notice that you have a notification next to the favicon. This is how I went about it.

This site is coded using MVC2 so I added a new variable on my Controller to the TempData called "TotalPageCount". This is then added to a hidden field on the page that I can use to read the value from.

Next, I am adding a quick check to see if the user's browser will be able to cope with HTML5 Local Storage. If they are able to use it, I check if they have visited before and if so compare it with the previous value (to check for any updates). If there are any new blog posts since their last visit then I simple use TinyCon and add a notification to the favicon. I am no great JavaScript master, so please forgive me if you spot any better ways of achieving the same goal in the code!

Oh, there is also a gotcha when dealing with dynamic favicons. I started running through the example on the TinyCon site and came across this error when debugging:

It took me a while to solve this, but thanks to this post on StackOverflow I managed to solve it. Basically, you need to have the favicon in your own domain or it will cause a security exception. Once that is in place, you should be able to get up running without any problems.

If the browser doesn't support dynamic favicons, it will gracefully fall back and update the title with a number instead. This blog post is really a bit of fun, but I can see a load of uses for the helpful little library.

MVC Asynchronous Controller : The Basics

When I first saw the Asynchronous Controllers introduced in MVC 2, I couldn't wait to start playing around. I thought that it would be a really easy to get up and running with a simple example, but after searching online for a few working examples - pretty much all of them used an event based pattern that wasn't easy to understand. In this blog post I am going to run through a really simple example that will show you the basics of Asynchronous Controllers, and show you how easy they really are.

There are some massive benefits to using Asynchronous Controllers with MVC. If your application is I/O or network limited, adding an Asynchronous Controller can help your application stay responsive. It's also a really sexy way of handling long running operations without blocking your application. In this post, I am going to run through a simple example using an Asynchronous Controller and show you just how easy it really is to get up and running. The easiest way by far is using the Task Parallel library. I have also blogged about the Task Parallel Library using Parallel Invoke, for more information please read this post.

Right, let's get started. In Visual Studio, create a new empty MVC application and add a new controller. I've called mine HomeController. Then you need to change the Controller so that it inherits from the AsyncController base class instead of the Controller base class.

Next up, I am going to add a method called IndexAysnc(). Asynchronous actions are written in a similar fashion to standard synchronous requests. It is important to name the Action Methods correctly, as they need to end in 'Async' or 'Completed'. In a synchronous controller, you would normally only have one Action Method per HTTP action. However, in an Async method, you get both Async and Completed appended to the name - but the View name will still be Index. So in this example, our URL will still be /Home/Index

If you notice in the method above, it is making use of the Task.Factory.StartNew() method that comes with the Task Parallel Library. It is a great way to add threading to your application and it also makes the code really streamline. Inside the StartNew() method I am adding some simple code to download the HTML from this website, but you could replace this with any custom long running method of your choice. Next, add the final part of the async method (Completed). If we follow the naming convention, it should be IndexCompleted.

You may also notice that in the code above that I am using AsyncManager.OutstandingOperations. This notifies the MVC pipeline of how many operations are pending completion. This is necessary because MVC has no way of knowing what operations were kicked off by the action method or when those operations are complete. When the counter hits zero, the pipeline understands that it needs to complete the overall operation.

This is just a simple method that returns the data to our view, from here you can return anything that was executed asynchronously to your View. It's that simple! If you would like to run through this example the project is available for download, please click here to download.

MVC and HTML5 Web Workers

HTML5 Web Workers are cool. As a developer that spends most of his time working with server side code, I like to think of Web Workers as .net's System.Threading for the front end. Basically, Web Workers allow you to run client side scripts without interrupting the page or any other scripts that are currently running. They are basically an API specification that lets you create background JavaScript threads to process CPU intensive tasks. The major advantage to using Workers is that it allows long tasks to be executed without blocking to keep the page responsive. It's really good for fire-and-forget tasks and tasks that you can leave to run while the user continues working on the page. Another great thing about Workers is that getting started with them is really easy.

In this post, I am going to run through a simple example using Asp.net MVC. We are going to build a page that performs a long running task on the server using Web Workers. First off, create a new MVC project in Visual Studio.

Then add a new Controller, and let's add a new method on the Controller - I called mine "Webworkers".

This is just going to be a simple page that calls a long running process on our Controller using HTML5 Web Workers. Add the following code to your View.

Right, let's break this down a little. Firstly, I am including a reference to Modernizer in the HEAD tags. If you created a new MVC3 in Visual Studio it will automatically get added to your Scripts folder. Using Modernizer is a quick and efficient way to ensure that your users browser has the required features. Next, I am including a bit of JavaScript on the page to call our Worker. As you can see I am telling the Worker to execute a script called "LogStats.js". This is just a simple piece of code that does an AJAX call to a method on my Controller. I will run through that in more detail later. The Worker then uses a method called "onMessage" to get the status of the thread. Depending on how you write your code, you could also consider this your "Success" status. Let's run through the code that is executed by the Worker - "LogStats.js".

The above code is using XMLHttpRequest object to do a simple POST request to a method on our Controller. Let's create the method on the Controller and call it "UpdateStats". In this example, I am not passing any parameters through, but these could just as easily be added onto the request. Workers use a method called "postMessage" to return a result to the thread that called it. Whatever we return in this postMessage will be returned to the original thread.

That's it! If you fire up the example, you will notice that the code executes in the background and doesn't affect the responsiveness of the page. In this example I have called a method on a controller in the background, however you could run some intensive JavaScript on the front end too. The list of uses for using HTML5 Web Workers is endless! The HTML5 Web Workers are "truly" asynchronous.

Support

As you will have noticed, I included a reference to Modernizer to check if the browser supports Workers. At the time of writing this article, there is a surprising amount of support for Web Workers. However, some of the major browsers (IE) are still playing a bit of catch-up. Firefox, Chrome, Safari, Opera and IE (10) all offer support for Workers. For more information check out caniuse.com. If the browser that you are targeting doesn't fully support Web Workers yet, you could simply fall back to calling the service traditionally.

For more information on the HTML5 Web Workers spec, please check out the W3C draft. There are some good simple examples on using Workers on the site. A copy of the project used in this example is available to download here.

Web.config Transformation Features in Visual Studio 2010

When developing applications in Visual Studio, I normally pay a lot of attention to my Solution Explorer. However, I recently spotted something that I didn't notice before. Well, at least something that I haven't paid attention to! In Visual Studio 2010, if you click on the Web.config file and expand the node - there are two extra files - Web.debug.config and Web.Release.config. Now if you open them you will notice that they contain XML that is similar to your normal Web.config file.

What do these transformations do? Well, after some investigation I learnt that if you update the Web.Release.config file with the appropriate configurations for your live environment, and change your solution configuration to "Release mode" and publish from your solution explorer, you can override Web.config settings based on environment. If you wanted to update your connection string only when you published in release mode, this is the perfect way to go about it!

Let's run through a simple example. First update your Web.Release.Config file with the appropriate syntax.

You should notice the attribute xdt:Transform="Replace" has been added. This tells the build to use this new section in the config file when you publish your project. Next, we can simulate deploying to our live environment. Update your Solution Configuration to "Release mode". As a side note, when you deploy your application to a live environment, you should be publishing in release mode - it will remove the debug="true" attribute from your web.config. Having your application with the debug attribute set to true will cause some considerable reduction in performance. Check out this link for more information.

Then publish the web application via solution explorer. Right click on your application and choose publish. From here you can choose file system or FTP.

If you now look at your published application, you will notice that there is only one Web.config file. When we open it, the Web.config matches the changes that we made in the Web.Release.config file.

Where I work we are currently using TeamCity along with Nant scripts on our CI server. This works great once you are setup in a team environment, but I sometimes feel that working with the Nant script syntax could be easier. I have also worked in an environment before where we used Team Foundation and MSBuild scripts and that worked really well too. However, if you are a lone developer that is working from home or just working on a side project these Web.config transformations are perfect. I know that when I make any small updates to this blog, using the transformations makes life a lot easier.

I have only given you a quick summary on the Web.config transformation syntax that is available for web project deployment. There are also loads of other options that are available to transform your web.config file. You can use Conditions, XPath, Inserts, and Replace. For more information please take a look on the MSDN site.

Selenium Webdriver - Wait for an element to load

I am currently working on a project that uses a lot of AJAX and delayed loading of HTML elements. This means that when a page loads, the object that I am looking for might not necessarily have appeared yet. In many instances the element may only be added to the DOM after an amount of time by the use of some JavaScript.

At first, we decided to write our automated tests as normal using Selenium Webdriver - but we soon noticed that this would be a bit trickier if the elements that we needed to test only appeared after the page loaded. After a bit of research, I came across Explicit and Implicit Waits in Selenium. In Selenium, waiting is having the automated task execution elapse a certain amount of time before continuing with the next step. There are two different kinds of waits - Explicit and Implicit Waits. An explicit wait is code you define to wait for a certain condition to occur before proceeding further in the code. An implicit wait tells WebDriver to poll the DOM for a certain amount of time when trying to find an element or elements if they are not immediately available.

Let's run through a quick example using both waits. In this example I am going to run through the search functionality on the Bookatable.com homepage. This is a good example to use because the automplete functionality only appears after the user has typed in the text box. In this example we are going to test that the correct search results get returned when we enter certain keys.

In the code below we navigate to the Bookatable.com website. Then we find the element named "ddRestaurants", click the element and enter the letters "or" in the textbox.

Unfortunately the above code will fail with the following error:

OpenQA.Selenium.NoSuchElementException : Unable to locate element: {"method":"class name","selector":"ac-row-110457"}

This is because we expect to see the autocomplete pop-up element appearing instantly and because the Selenium code is executing faster than the Ajax takes to complete it won't be able to find the element and it will throw an error.

Explicit wait

This is where the explicit wait starts to become really useful. Instead of instantly looking for an element, we can tell Webdriver to wait for a certain amount of time before we continue with the next step. The example below runs through the usage of an explicit wait. In order to use the wait functionality in Selenium Webdriver, you will need to add a reference to the Webdriver.Support.dll, as well as the standard Webdriver.dll. You can either download this directly from the Selenium website, or I like to use the Nuget packages and add it directly from the Solution Explorer in VS2010.

If you run this test, you will notice that it passes successfully because we have explicitly told it to wait for a certain amount of time before continuing.

Implicit Wait

Another option that is available to use is the implicit wait. The difference with the implicit wait is that it will tell Webdriver to poll the DOM for a certain amount of time when trying to find an element or elements if they are not immediately available.

The example below runs through an implicit wait. Notice how it differs from an explicit wait.

One thing to keep in mind is that once the implicit wait is set - it will remain for the life of the WebDriver object instance. Personally I prefer to use the explicit wait because it only pauses before continuing, but you will need to decide on what suits your situation best. For more information on waits in Webdriver, please follow this link.

I have created a small sample with the tests used in this post. For more information - please download here.

Rendering PDFs with pdf.js using HTML5 and JavaScript

The web is full of PDFs floating around out there. How many times have you tried to open a PDF file on a machine and not had the correct software installed? It can be very frustrating. For most users out there they already have the correct software installed to view PDFs, but as users move towards tablets or newer machines - they may not have it installed. Another issue is that often certain PDF readers and plugins don't support important PDF features - which is a bit of a problem if you want your website to be accessible to everyone out there and if you want all your users to have the same experience.

A couple of clever guys over at Mozilla have thought about this and have come up with a genius way of displaying PDFs inside your browser using Javascript and HTML5. The code is available for download on Github. PDF.js is community-driven and supported by Mozilla Labs which means its good news for us as developers. In the long run this plugin is intended to render PDFs natively within Firefox itself and will eventually ship with Firefox. For now though, we can start using the power of this plugin within our applications today.

Here I am going to run through a simple implementation of PDF.js and show you how easy it is to use. First head on over to Github and download the latest code required to start developing.

Then create a web page and embed similar to the following page.

As you will notice, there is a file called HelloWorld.js in the HEAD tag of the code above. My HelloWorld.js file looks like the code below - but you can also include the code directly in your page instead of linking to the file externally.

I have created a simple demo page that showcases the features that PDF.js offers. Please click here to view.

When I was testing with different PDF files, I noticed that certain characters aren't quite supported yet. As this is still an experiment and a work in progress, I expect new developments and additions will be constantly added. Keep this in mind if you notice any irregularities when working with this.

Using PDF.js also brings a security improvement for our users. It uses only safe web languages and doesn’t contain any native code pieces attackers could exploit. The only disadvantage that I can think of when using this code is that it might not work on some older browsers, which either way they can still view the documents using a traditional PDF viewer. Hopefully a polyfill will arrive soon for older browsers. For further information take a look on Github and the PDF.js team's website.

Go ahead and start using PDF.js in your applications today!

Memcached for C# - A Walkthrough

A while ago I wrote about Object caching in .NET 4. I think that the Object Caching in .NET 4 is a great tool to use for caching and literally takes minutes to get up and running. However, one of the downsides of using the System.Runtime.Caching in .NET 4 is that every time your application pool recycles in IIS, you lose the objects in cache. The same happens if you make a change to your web.config or redeploy your application.

This isn't a problem if you are running smaller applications and cached data isn't vital to their performance. However, for high-traffic applications that need to have the cache up all the time, this becomes a problem. Another thing to consider is the possibility of load-balanced servers - using the Object Caching in .NET 4 isn't distributed. That means it will only store its cache per application pool. If you have two servers it means that you will have two different cache stores.

I have recently been introduced to the world of Memcached. Memcached is a free & open source, high-performance, distributed memory object caching system intended for use in speeding up dynamic web applications by alleviating database load. You can think of it as a short-term memory for your applications. The brilliant thing about Memcached is that you run it on one server and point all the applications to the Memcached server. This way all servers use the same cache! Another bonus is that even if you redeploy your app, or recycle the app pool in any way - the cached objects are still there. This is great news for larger applications that need to be online constantly and can't afford any downtime with regards to it's cache.

Memcached is no new comer to the web. It is used by major players such as Wikipedia, Flickr, Twitter, Youtube, WordPress.com and Digg. The advantages of using Memcached are endless and getting it setup on your machine is really simple. There are two parts to getting Memcached setup - you need the Memcached server and then you need to get the client API. There are few client API available for most of the common languages out there (Ruby, C#, PHP, C, Java).

I had a bit of trouble actually finding a decent ready-to-go implementation of Memcached for Windows. I got my version 1.4 from this site, but it seems that there are also other versions available here and here. Once you have downloaded the files, you can either run Memcached as a console application or install it as a Windows service (This is the recommended option). In order to install it as a service, run the following from the command line:

C:\yourmemcachedpath\memcached -d install

Next, you need to get the client API to start using the cache. There are a few different options with regards to the C# client API, but I chose Enyim Memcached. Open Visual Studio, create a new project and add a reference to the Enyim.Caching library that you downloaded.

You will also need to update your web.config or app.config to include the following lines. In your configSections:

And then just before the end of the web.config file add the following:

You will notice that the address is "127.0.0.1" and port "11211". This would normally be the network location that your Memcached server is hosted on, but in this instance I am testing it locally and this is the default.

Using the library is really simple and intuitive. Although it's not a real world example, the following code will store and retrieve a value from the cache.

A while ago I wrote about Object caching in .NET 4. I created a little wrapper that used simple syntax and wrapped around the System.Runtime.Caching namespace. Using the same class, we can just update it to point to our Memcached server. If it makes it easier for you to use the class I wrote and combined with the Memcached API, it is available for download here. Also, just in case the Memcached servers are not available at any of the locations I defined above - you can download version 1.4 here.

I searched the web and found that there is very little documentation with regards to C# out there - I hope this article helped to get you up to speed with Memcached!

MVC Data URI HTML Helper

I have recently been looking into web page performance and one of the things I came across is the Data URI scheme. When you reference an image in your HTML, the client needs to go and retrieve the image. This creates an HTTP request and adds to the time it takes for the page to load.

What is the Data URI scheme? - well, it is a URI scheme that provides a way to include data in-line in web pages as if they were external resources. Instead of adding a reference to your image as a path or URL, you embed the image directly into the document using a Base64 encoded string. The browser automatically understands the string and decodes it there and then - instead of retrieving it via an HTTP request.

Normally you would retrieve the image like so:

Instead, if you used Data URI's it would look something like this:

By changing your code to the above example to use Data URI's, it means one less HTTP request. Imagine if you had a resource intensive page - if you updated your HTML to include the Data URI's that would cut down significantly on the HTTP requests and this would in turn speed up the load time! This means that we never need to request that image again!

This opens up a world of possibilities in terms of serving slower internet connections. If you are serving your site to Mobile browsers, this is an ideal way to speed up the load time. The code above can also be included in CSS.

Another advantage of using Data URI's is that web browsers are usually configured to make only a certain number (often two) of concurrent HTTP connections to a domain, so inline data frees up a download connection for other content.

Putting it all together

So, what's the catch I hear you say? Well, as with most new features the older browsers don't offer support. However, it's better than you think. FireFox, Chrome, Opera, Safari and IE8+ all offer support for Data URI's. Another factor to take into consideration is that every time you make a change to an image you need to update the Data URI. This could become quite a maintenance nightmare if your site was quite image intensive. This is where Asp.net MVC comes in.

Using the power of HTML helpers in MVC, I decided to put together a small project that would handle progressive enhancement and older browsers. In my MVC project, I created a new class and called it "ImageHelper". Then I added a method to check the browser version and determine if it is capable of handling Data URI's:

I then added another method that would convert the given image to a Base64 string.

In the above method, I am getting the path of the image on the server then reading it into a MemoryStream and converting the bytes to a Base64 string. After that it's all wrapped up in a method that creates the image tag for us.

Then you simply call it on your view like so:

You may wish to extend the above method to handle any further image attributes such as id, style, width, etc. Another way that this could be extended would be to add a layer of caching so that once the Base64 string has been converted, it simply needs to be retrieved from cache. I have previously written about caching in .Net.

I have noticed that the Base64 strings are quite large depending on the size of your image. Base64-encoded data URI's are 1/3 larger in size than their binary equivalent. However, this overhead is reduced to 2-3% if the HTTP server compresses the response using Gzip. I use the MVC Gzip Actionfilter as described on this page.

That's pretty much it! If you view the source on this page you will notice that quite a few of the images are using Data URI's. It's really easy to get up and running and it can add a significant improvement to your page load times. The project is available for download here, or if you would simply like to include the class in your project you can download it here.

Responsive Design and CSS3 Media Queries

Regular readers on this site will notice that there has been a major change on the site lately. The design of the site has changed as well as the layout. I have been playing around with the idea of Responsive design and also updating the look and feel of this site for a while. It was quite colourful before and was in need of some serious updating!

This is how it used to look before the update:

Responsive design

So, what is Responsive design? Well, it is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation. The term Responsive Web Design was coined by Ethan Marcotte and is the practice of using fluid grids, flexible images, and media queries to progressively enhance a web page for different viewing contexts. Imagine only having to code one front end and having it adapt no matter what the screen size or device that you are using. This is what responsive design aims to achieve. If you resize the browser on this page you will notice that the layout adapts accordingly - give it a try!

The advantage of using Responsive web design is that we only have to support one UI layer and we don't need to worry about the device that is accessing the page. Previously I would intercept the User-Agent of the user and if it matched a list of devices, I would redirect to a specially designed mobile page. Now, all I need to do is provide the correct layout according to the screen size.

For more information on Responsive design check out this article.There is also a great gallery for responsive design called Mediaqueri.es. Scott Hanselman also recently updated his blog to use CSS3 mediaqueries.

Using the CSS

Now, I'm no UI developer and I'm not really that good with CSS - so I needed a way to get this site developed quickly and easily. I have also been experimenting with responsive design and CSS3 media queries in order to get this site enhanced to be able to handle any screen size.

The advantage of using media queries is that you can display different CSS styles depending on the size of the browser window and viewport. You simply use it in your stylesheet like normal CSS.

The following CSS will apply if the viewing area is smaller than 600px.

And the following CSS will apply if the viewing area is greater than 900px.

You can also combine multiple queries.

As I'm no expert with CSS and Responsive design, I needed a boilerplate that would make development quick and easy. After some searching on the net, I came across Skeleton. I can't emphasize enough how easy it is to use this boilerplate. Skeleton uses best practices and works alongside your styling. It is not a UI framework, it's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is. Skeleton is based on a variation of the 960 grid system and getting up to speed with it takes no time at all.

If you were using Skeleton and the above snippet of HTML, it would resize according to resolution automatically. Simply download the files from the site and get coding!

Fallback

Okay, so do older browsers support CSS3 mediaqueries? Well, unfortunately they don't - but there is a solution. There are a few different libraries out there that will simply allow older browsers to handle the queries. I use css3-mediaqueries-js and there is also the popular Respond.js. Both of these libraries will allow older browsers such as IE 5+, Firefox 1+ and Safari 2 to support CSS3 mediaqueries.

If you haven't already taken a look at the Mediaqueri.es website - take a look at some awesome responsive websites out there.

MVC and the HTML5 Application Cache

HTML5 has loads of awesome features and recently I have been playing around with a feature called the Application Cache. The Application Cache is designed to allow you to run your web application offline - that is, without a network connection. A web browser that implements HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When you don't have a network connection, the browser will automatically switch over to the local copies instead. Most modern browsers offer support for the Application Cache this includes FIREFOX (3.5+), SAFARI (4.0+), CHROME (5.0+), OPERA (10.6+), IPHONE and ANDROID. Unfortunately, Internet Explorer doesn't currently offer support for Application Cache.

So...what if we could use the benefits of the Application Cache with an online application? The user could access all the resources that they need from the Application Cache instead of the server, and in turn the page would load a lot faster. Another added advantage of using the Application Cache is that there would be a reduced server load and the browser only needs to download anything new instead of fetching the resources that it already has.

Let's get started with the basics of using the Application Cache in an ASP.net MVC project. In order to enable the Application Cache you need to include the manifest attribute on the HTML tag.

The manifest file can be located anywhere on your web server and contains a list of the things that you want to store in the Application Cache. You could always simply link to a static text file on your server, but I quite like to use the MVC ActionResult and View to return a dynamic manifest file. The browser will continue to use the cached version of the resources until the manifest file has changed or been updated. It can sometimes make debugging your application a nightmare, so if you are reloading your page and find that you are only seeing the cached version - you will need to make a change to the manifest file in order for the browser to fetch the new version.

Right, let's create our dynamic manifest page. Add a new method on your controller - I called mine "Manifest". Notice how the MVC route matches up to the manifest attribute link we supplied on the HTML tag.

Next, add a view for that ActionResult.

Close to the top of the View you will notice a ContentType of "text/cache-manifest". All manifest files must be served with a content type of text/cache-manifest. The manifest file also needs to begin with "CACHE MANIFEST" on the first line.

You should also notice that on that View there is a method called AppendHash(). Thanks to my colleague @ShirtlessKirk for coming up with this idea, this is the Ninja way of handling changing resources.

The method reads the resources and creates a Hash string based on the contents. This way the Hash Key only changes based on whether the resource has changed. This is then appended onto the end of the filename with a Querystring. The Hash Key will only change if the file has changed - this means no updating your manifest file every time a resource (CSS, Javascript, etc.) file has changed! I won't go into too much detail about the class and method that appends the Hash to the file URL, but the whole solution in this article is available for download here.

In order to see the Application Cache in action, let's fire up a browser. I quite like to test with Google Chrome, because the Developer Tools make it quite easy to see what's in the Application Cache. If you hit CTRL-SHIFT-J you should notice the Google Chrome Developer Tools appear. The first time a page loads with the manifest and Application Cache you will notice something like this appearing in the tools console:

As you can see it is downloading the resources that are in the manifest file. If you choose the RESOURCES tab, and then drill down to the Application Cache, you should notice something like this (notice the hash appended):

If we reload the page, all the resources will be loaded from the Application Cache and not be downloaded from the server. Check the Developer Tools console:

An important thing to keep in mind is that any pages that you add the manifest attribute to will be cached in the browser - this INCLUDES THE PAGE ITSELF! You can't just cache the resources and not the page - it's not really designed to work this way. So, the disadvantage of using the Application Cache is that it doesn't play too well with server side dynamic pages. If you think of a website, the pages that you would add to the Application Cache would normally be the pages that are static or pages that don't change that often. If you add the manifest attribute to your Master Page you will cache your entire application and not notice any changes when refreshing - Instead consider only adding this to pages that aren't updated regularly.

For more information on the HTML5 Application Cache, please take a look at this website. If you would like to download the example solution used in this article, please download it here.

C# Parallel Invoke

While working through some code, I noticed a method that I have never seen before. I knew that the .Net 4 Framework had introduced a Parallel Class that helped make parallel ForEach Loops easier, but after some searching I came across the ParallelInvoke() method.

So, I jumped on the MSDN site and learnt a little bit more about Task Parallels. It makes running one or more independent tasks concurrently really easy with it's fluent interface. After some reading, I noticed that there are a few benefits that can be gained from running tasks asynchronously. This is taken from the MSDN site:-

More efficient and more scalable use of system resources.

Behind the scenes, tasks are queued to the ThreadPool, which has been enhanced with algorithms (like hill-climbing) that determine and adjust to the number of threads that maximizes throughput. This makes tasks relatively lightweight, and you can create many of them to enable fine-grained parallelism. To complement this, widely-known work-stealing algorithms are employed to provide load-balancing.

More programmatic control than is possible with a thread or work item.

Tasks and the framework built around them provide a rich set of APIs that support waiting, cancellation, continuations, robust exception handling, detailed status, custom scheduling, and more.

So, let's write some code examples! In order to run two tasks concurrently, you need to follow the pattern below.

Parallel.Invoke(() => DoSomeWork(), () => DoSomeOtherWork());

As you can see, the Parallel Library uses a lot of Lambda expressions to define delegates. If you would like more information on Lambda expressions, please read this article.

Before you get started adding any code you will need to add a reference in your project to theSystem.Threading.Tasks library. Next, add the method following the above pattern.

As you can see the three methods will run concurrently, and it was pretty straightforward to implement! For more information on the Task Parallel Library, please check out the MSDN site.

Automatic Resource File Translation with the Microsoft Translator Service

On a recent project that I have been working on, we needed the application to be multi-lingual and localized for different countries. The best option for us on this project was to use resource files (.resx) and let .Net handle the rest for us. Now creating these resource files wasn't really a problem, but adding and translating one for each of the languages we needed was going to take some time. This made me think if there was an easier way to do this. I had also recently been playing around with the Microsoft Translator Service and also wrote a blog post about it.

When using resource files, we already have the English version of the text - so why not simply just translate that into the languages that we need? I decided to write a tool that would use the Microsoft Translator Service to translate and create different resource files in the languages in needed. The tool reads the Resource file (it is an xml file) and makes a request to the service and once complete writes a new resource file in the appropriate language. It uses a separate config file to choose the languages that it needs to translate to.

Pros and Cons

Yeah....I know that using translation services might not always produce entirely accurate translations, but one of the great things about using the Microsoft Translator Service is that it lets you choose a rating level of the translation which ensures a better 'quality' of the translated text. I would also say that there are a lot of common keywords that we use in everyday applications - for example 'email' or 'home page'. Using this tool / service to translate the resource files save time and you could always review the resource files and tidy up the discrepancies afterwards. It also makes testing your multi-lingual applications a breeze. Every time you add new text to your default resource file, just run the tool and it will regenerate the resources files in the languages of your choice.

There are three files that are needed to run this tool - a T4 file, the DLL that does the translation and the config file that contains the languages to translate into - and that's it. All you need to do is drop the 3 files into your App_GlobalResources folder on your MVC application/Webforms application and you are ready to go.

Let's run through a simple example. If you haven't already you will need to sign up for a BING appId. I have also written a previous article on how to use the Microsoft Translator API. You will need to add the BING appId to the config.xml in order for your translations to go through. Next, drop the three files in the App_GlobalResources folder on your Web application.

Next, you are going to need to include the T4 file in your application. Click the "Show all files" button in your Solution Explorer in Visual Studio.

If you expand your App_GlobalResources folder you will notice that there is a TT4 file called "TranslateResources.tt". Right click and choose "Include in project". Once it is included in your project right click the file and choose "Run custom tool".

It's that easy - the T4 file will run in the background and translate your resource files. If you look in the App_GlobalResources folder, you will notice that it has been translated into the languages configured in the config.xml file!

TT4 files are a great way to run custom tasks in Visual Studio. For more information on T4 code generation please check this out.

If you would like to download just the three files that are needed to get translating - click here, else if you would like to download the source and play around - click here

Measuring Web Page Performance with Selenium 2 and the Web Timings API

I have always been interested in measuring web performance, and especially in measuring the improvements in performance. A while ago I attended a Selenium Meetup in London and heard an interesting presentation by one of the QA guys working at Mozilla. He talked about measuring the performance of a web page over a period of time using Selenium 2 and logging these statistics so we can track client-side performance improvements.

Only recently I came across one of his articles that talked about using the built-in Web Timings API that most new browsers use. IE9, Chrome, and Firefox are adding a new API for web pages and it is also a standard that is being introduced by the W3C. This is great news for us as developers, and it enables us to benchmark our performance over a period of time. Imagine every time your set of Unit Tests run when you check in and at the same time it logs the page metrics. As you add new functionality or improve on page speed, the tests would log these metrics. This would allow us to chart the improvements / decrease in performance with real stats - awesome!

I have to be honest, most of this idea is inspired by the article on his site. I wanted to put it all together and provide a quick page to view these statistics. Let's take a look at the steps.

Firstly, I used the standard method that was provided.

I created a class that calculates the performance metrics and saves them to an XML file for us to retrieve later. I won't go into detail about that class, except that it basically takes page timings and uses the values to calculate a more readable value in milliseconds and saves them to an XML file. A few of the timings might look something like this:

connectStart: 1280867125399

connectEnd: 1280867125489

If you notice, it isn't entirely readable but if we take the connectEnd and minus it from the connectStart - we get a more readable value in milliseconds for the connect time. Just to give you an idea of how the timings work, here is a diagram showing the overview of the timings.

Once the extension has been added you simply use it on your unit test like so:

Lastly, I added a small .net MVC application that reads the XML files that have been created over a period of time and displays them using a Google Chart. This gives us a basic overview of our performance history

If you notice the change in the chart, you can see that as more functionality was added the chart peaked. Towards the end of the chart, and the most recent data, you should notice that the load time dropped.

I have included a small project that details the work that I did to get this up and running. Please click here to download.

Microsoft Translator API

As the web grows, more and more international businesses are turning to the web. The demand for a multi-lingual website has never been so great. There are currently a few pay services out there that offer a translation API and also a few free ones (Google and Microsoft). One of the services that I have been looking at recently is the Microsoft Translator service. The API has support for SOAP, AJAX and HTTP which is a great addition to the API.

In this example, we are going to take a look at the Translator SOAP API. It's really easy to use you get up and running in a matter of minutes. One of the great things I like about this service, is that you can add your own translations to the translation memory. This means that you can add your own self translated text if you prefer. Eventually this will keep on building and the service will improve over time. The API also allows you to choose your translated text based on a rating, which is useful if you are looking for accurate translations.

First, sign up for a BING appId. Once signed up you will need to use this appId in order to make any requests to the service. Sign in with your Windows Live ID and generate an application ID according to the instructions. So, keep it in a safe place and don't share it where necessary.

Let's start off by translating some simple text. You need to add a service reference in your project to the translator API. Right click on references in your project in the solution explorer and choose "Add Service Reference"

Then add the following address. We are going to call our Namespace "TranslateService".

I added another class to my project to wrap these methods around the Visual Studio generated code, but you could always call it directly - depending on your preferences.

I am calling these methods via unit tests, but normally this would go in your application code.

Call it and voila! We have our translated text.

Another great feature of this API is that you can request a WAV file with the translated speech. Once the method has been included in our project, you simply call it and it will return the URL of a WAV file containing an audio version of the text you requested.

I've only really touched on a few of the features, but adding translated text to your site based on the user preference could be a great addition to your site. This tool is a great starting point - hope this helped a little!

Explicit Interface Usage in C#

Where possible, I try and program against interfaces as much as possible. I do this because I like Interface-based programming and because I like the characteristics that it brings to the table: reusability, maintainability, and extensibility. It also allows you to effectively test your code using Mocks.

Whether or not you like to code this way, you may however find that there are certain situations in which you need to explicitly set the usage of an interface. When working in a team of developers it is possible that a method on a class could be called using the concrete class instead of an interface. This would break the general interface based concept as a whole and it would also make it a lot harder to find at a later stage.

Now there is a quick way to get around this, however it still needs to be enforced as a coding style. Let's say we have the following Interface:

Normally, we would call it like this:

Instead, if we call it like this:

It now forces the next person to call the method to do so from the interface. If they try to call the concrete class the following error should occur.

But when called correctly:

It's also not too late to do this change to an existing project, it will show up all the concrete classes that have been called.

For some further reading, please check out this link on MSDN and this one for a tutorial on MSDN

Asp.net MVC HTML5 Toolkit - Latest Updates

HTML5 has some fantastic features available to us, and I've tried to add as many of those features as I can to this toolkit. For more information on some of the features available to HTML5 form fields, please take a look at this article.

I've added quite a few updates to the latest release of the ASP.net HTML5 Toolkit. If you haven't worked with the MVC Html5 toolkit before, please take a look at the following post.

Video & Audio

Support has been added for Audio and Video. In order to start using the video control, you simply call it the way you would call a normal textbox - with a slight twist!

With the video control you will be able to add the controls attribute and the autoplay attribute to your video. Once the control has rendered, it will look something like this:

Your browser does not support the video tag

The Audio control is quite similar

When the control renders, it will look something like this:

Autofocus, Readonly and Disabled

You can now add the following HTML5 features to your input fields.

Autofocus
Readonly
Disabled

The library is still tiny and is only 10 kb, so it is super lightweight and efficient. The Nuget package has also been updated and is available for download

Hope you enjoy!

Selenium 2 - Get Number of Rows in a Table

I was recently browsing through some of the questions on StackOverflow and came across this question. The question was around how you would count the number of rows in a table using Selenium 2 and Python. If you need a bit of a background to Selenium 2, I have written a little about it before.

Now although the question was about the Python API, I wanted to try and get it working using the C# API. It was a pretty basic question and I wasn't really working on anything at the time so I started to have a look. Selenium has got built in support for XPath and this makes the solution to the question a lot easier.

Start off by navigating to the page that you want to verify.

Then find the element you are working with - in our case it will be a table.

Next, let's use a little Lambda Expression to find the elements that match the XPath - tr

We can wrap this all together in a method.

And call it like so in a test using the new class we have created.

You could also use this method to count any number of tags in HTML. I've put this all together in a little helper class and included a sample on how to count the number of options in a select list. The full solution source code is available for download here.

MVC 3 and Remote Validation

I must admit, I've been a bit of a slow starter when it comes to Asp.net MVC 3. I am an avid fan of MVC 2 and haven't really taken the time to look at MVC 3 until now. Wow - I am impressed though! There are a load of new features that have been added and the product just feels like it is getting better and better.

While I was browsing the Asp.net MVC 3 Home page and reading through the feature list, one of the things that caught my eye was the new Remote Validation support that has been added. Remote Validation is the ability to call a custom server-side validation method via the client-side. This is very handy if you want real time validation without posting your form to validate the fields and see the results.

One very useful real world example where you could apply Remote Validation, is the ability to check if a Username already exists when registering a user. Another example could also be checking if a password meets a certain complexity requirement.

Let's take a look at the example of checking if a username exists.

Firstly create the Model that we are going to use and validate. You need to add the RemoteAttribute above the UserName field. The parameters that are passed in are the ActionName and the Controller Name. This is where our custom validation method is going to reside.

Then add the View that you would like to validate.

And the code in your controller.

NOTE: The validation won't work if OutputCache has been added, this is because we need to check the user's input dynamically.

Next we need to add the method that is going to validate the field. As good practice it is better to split the validation onto another Validation Controller. You could always have your validation on the same controller as the View - it's also a matter of preference.

Finally, in the Master page (or simply the View), you need to add the JavaScript references to :

That's it - fire up your application and test with some values. If the username has already been taken you should notice a View similar to the following:

Else the username has not been taken and you will notice something like this:

If you view the source on the page, you should also notice that there are some attributes that have been auto-generated and added to the textbox. The remote URL is also visible and that is the Action and Controller that we are using to validate the username.

As you might have noticed, it's really easy to add custom validation with the new features that have been added to MVC 3, so get out there and get playing!

ASP.net MVC HTML5 Toolkit is now available as a Nuget Package

Great news for those of you out there that use the MVC HTML5 Toolkit - it is now available to download as a Nuget package. If you haven't already had a look at the MVC HTML5 Toolkit, please read this article for more info or visit the Codeplex site.

For those of you out there that haven't yet heard of Nuget or started playing with it yet, please go to the website for more on how to install it. Basically, it's a free open source developer focused package management system for the .NET platform that simplifies the process of incorporating third party libraries into a .NET application during development. If you are working with a complicated library that has many dependencies, instead of manually adding each one and updating your configuration files - you simply download the Nuget package and it will update your entire project with the libraries and relevant config settings.

Once you have installed the Nuget tools, it literally takes seconds to add the MVC HTML5 Toolkit to your project. There are two ways of adding a package to your project.

Firstly, you can add a library package reference via the solution explorer.

Then search for MVC HTML5.

There is also the alternate way to add packages to your project via the Package Manager Console. You need to search and filter for the package you are looking for.

Then run the command to install the package.

Once you have completed either of these methods you will notice that the reference has been added to the solution explorer. Every time the toolkit is updated and you request it again you will be able to see the updates on the Library Package page and get the latest version without any effort!

Even if you don't use Nuget in your projects you may still want to download the HTML5 toolkit and add it manually. There are many benefits of HTML5 that I have blogged about before, please have a read here and here.

There are loads of other great projects that have been added to the Nuget gallery already. Please check them out at Nuget.org

I have also created a quick video that gives a run through on how to download the package using Nuget, please check it out.

A Simple Guide to using OAuth with C#

If you are a newbie to OAuth you might understand how confusing it can be at first! I started off looking at building a small application that consumed an OAuth service as a side project. I kinda just dived right in without understanding how OAuth worked and got myself very confused. I have found that there are loads of examples out there explaining in Ruby, Java and Python - but not that many in C#.

Eventually I found something on Stackoverflow that explained everything to me. The answer was well detailed and even included a code sample This kinda got the ball rolling and I managed to get a working example running. In this article I'll explain a little bit more about OAuth and how simple it really is once you get started.

Firstly, let me start by explaining what OAuth is and why you should use it. OAuth is a simple way to publish and interact with protected data. It is a safer way to give people access to this data when they are calling an API, as each request to the API is signed with encrypted details that only last for a defined duration (e.g. 2 Hours). There are quite a few services out there that use the OAuth standard and some of the big ones are Twitter, Twitpic, Digg and Flickr. There is a good article on the OAuth site that explains more.

I'm not going to go too deep into the whole OAuth process, but I always find that a code sample helps explain things better. Let's take a look at a summarized version of how the process works.

Register your app with the service that you are developing it for. e.g. Twitter, Twitpic, SoundCloud etc. You will receive a consumer key and secret.
You, the developer of the app then initiates the OAuth process by passing the consumer key and the consumer secret
The service will return a Request Token to you.
The user then needs to grant approval for the app to run requests.
Once the user has granted permission you need to exchange the request token for an access token.
Now that you have received an access token, you use this to sign all http requests with your credentials and access token.

I decided to experiment with the Soundcloud API as I regularly check out new music on the site. There is a great wrapper that has already been built for C# OAuth - I used it to connect to the API. Please download it here.

To begin the process you need to pass the Consumer Key and Consumer Secret to the service to acquire a Request Token. You will get given this when you register your application with the site.

Now that we have the request token, we need to prompt the user to grant us permission. If you are using a desktop application like I am in this example, use System.Diagnostics.Process to open a new browser window with the URL.

This should open up a window like the following:

Once the user has logged in they will be given a key that they need to paste back into your application.

Now, as many users out there might not really be savvy enough to actually do this - the answer on Stackoverflow has a good example of how to bypass this. The article explains an idea that involves some HTML screen scraping to grab the pin. You could use this to copy the pin and use it in your application. This way the user only really needs to authenticate and your app will do the rest. In this example I am just copying the pin and pasting into the Quick Watch window in Visual Studio.

Then we need to exchange the Request Token for an Access Token.

The Access token is used to sign the HTTP request in the Header.

Now that we have the header, we can start requesting information. Pass the information to a GET HTTP request with the Content Type set to "x-www-form-urlencoded" and the Header set as our Authorization Header that we just created. I've bundled this into a separate method as we are going to be using this repeatedly if we need to make other calls to the service.

That's it! We are now calling a secure service to get the data.

Here are some further links explaining more about OAuth:

http://oauth.net/

http://hueniverse.com/oauth/

http://en.wikipedia.org/wiki/OAuth

And more on the SoundCloud API:

https://github.com/soundcloud/api/wiki/

Capturing Web Page Screenshots with Selenium 2

There have been many times when I have run a Unit Test that has failed and afterwards I wondered where it went wrong. The ability to see what occurred on the page or how it looked at the time would be a great benefit. I've been writing a few automated tests lately and looking for a way to implement this functionality. Luckily, Selenium 2 provides easy functionality that allows you to capture a screenshot of the page at the time that a unit test is being run - and it's really easy too.

If you aren't really familiar with Selenium 2, please check out another post I wrote that provides a simple guide to getting started with Selenium. There is also quite a few resources available on the Google code site.

Right, let's get started. I am going to create a simple example that checks if the page has redirected to a different page and if so, we save a screenshot of the page. Once you have added references to the Selenium 2 and Nunit we need to declare our driver. For this instance I am using the FirefoxDriver - You could also test this using the other drivers that come with Selenium 2, for example IE and Chrome.

Then write the unit test that we will use and check if an error is thrown.

Let's break this down.

Navigate to the URL that we think will throw an error.
Check if the current URL matches the URL that we originally navigated to.
If the current Url and the original URL doesn't match we call the method SaveScreenShot.
Finally, we fail the test.

Here is the method that we use to save the screenshot.

Let's break this method down a little further.

First, we use the FireFoxDriver to get the screenshot for us.
Next I am building up a unique file name based on the current date and time, you could change this to anything.
Then save the image.

This is a very simple example and would definitely need to be expanded on in a real world situation. However, there are so many usages that this little function can be applied to. If you wanted you could also save a log file with the details of the unit tests and the reasons for failure. There is also the possibility of forwarding on an email with an attached screenshot when the test fails.

I have also included a sample project that is available for download. It contains the example in this post as well as the original examples that were contained in my other Selenium 2 article.

Hope this helps!

Automated Testing with Selenium 2 and NUnit

I have recently been looking into an awesome tool called Selenium. What is Selenium? Well, it's a suite of tools that you can use to automate web application testing across many platforms. I recently attended a Selenium Users Group at the Google London Head Offices where they discussed the many usages of Selenium.

Why would you want to use it? Well, imagine you had a web application that did the same thing even after a new deployment. You would need to regression test the entire front-end of the application. With Selenium, you could automate all those tests and run them at the click of a button. Not only that, but you could integrate this into your build process! One of the presentations that were shown to us during the Selenium Users Group meeting was how Mozilla use Selenium to test the workings of Firefox. Previously they would have hundreds of front-end tests to run, but once they automated the process it took a matter of minutes!

At the moment the latest version of Selenium is available to download - Selenium 2. It is currently and alpha release, but it's still definitely available to use and is working well. I have recently been playing around with it to build some automated tests. It easily integrates with Visual Studio and Nunit (or any testing framework that you use), and the API is also really easy to use.

There is also a plugin for Firefox that is available for download. It has an easy to use GUI that records clicks, typing, and other actions to make a test, which you can play back in the browser. However, for this article I am going to write the unit tests using the Selenium 2 API.

Let's get started. Once you have downloaded Selenium 2 from the website, you need to add a reference to the library in your project.

Then, we need to declare an instance of the WebDriver Interface.

Next I want the test to navigate to my blog's URL.

Once it has loaded the page, locate a Search Box in the HTML code, enter a value in the textbox and submit the page.

Finally I am just using Nunit to check that the title of the page is correct and matches my search entry.

It's as easy as that! Okay, let's do something a little more detailed. If you access this blog without JavaScript enabled, a small message appears at the top of the page saying "This site is best viewed with JavaScript enabled". This is a personal preference and just appears because not all of the elements on this site work without JavaScript. Now, if I wanted to check that this message always appears without JavaScript disabled I could easily write a test to do this - and it can be run again and again in seconds.

This time - before we instantiate the WebDriver, we set the FireFoxProfile to have JavaScript disabled. After that we use the WebDriver as usual with the new profile.

After that, simply search the elements on the page for the matching HTML Table tag. Loop through the results and see if we have our messagebox.

MessageBox found.....Wahey!!

One of the great things about this tool is that it has a driver for Firefox, IE and Chrome. So you can write you tests to run against all these browsers!

I have created a small demo project that is available for download. It contains the source code used in these examples as well as a few more.

A Year of Blogging

This has been my first year of blogging! Whew! 1 year and 42 articles later - I never thought I'd be writing this. I had always thought about starting my own blog to write some technical articles, but I just never made the time and always had an excuse not to get one started. At first starting your own blog might seem quite daunting. I was also worried that the articles I wrote weren't going to be technical enough. Another worry was that I didn't have enough things to write about. So finally, towards the end of last year I decided that it was time to finally get one started. Would anyone bother reading it? Who knows - It would be a good learning curve though! The next big question was whether or not to use a ready built CMS / Blog engine or build one myself? Well, I decided to do it the hard way and build my own engine. If you've got the time and passion to do this, I would definitely recommend it. There are a lot of things to learn from building every aspect of your own site. That said - there are some awesome CMS / Blogs ready to roll out there. I quite like Wordpress, BlogEngine.NET and maybe even Tumblr. You could always look on Codeplex and even contribute to one of the existing ones on there.

If you do decide to build your own blog, I do recommend getting some form of source control in place. I use beanstalk to store all my code.

They offer great support for Subversion and Git and currently have a trial account option that is more than sufficient for a single developer.

Highlights

When I first started out it took a while to get visitors flowing regularly through the site. Patience is definitely a big part of blogging - but you should also blog because you love it. You might not get as many hits as you expect on your site or on a certain article that you wrote - but it definitely takes a while to build up the content as well as the traffic on your site.

Throughout the year there have been a few highlights and things that have kept me blogging. I spent some time and recently wrote an HTML5 toolkit for MVC which has had an awesome response from the community out there. I got a few tweets from ScottGu and Scott Hanselman. It was definitely an exciting moment to get recognized by some of the big dogs!

I also got the toolkit featured on the Asp.net homepage which was great. Unfortunately, when I signed up for my profile to Asp.net I grabbed a goofy picture of myself that I could find on my PC - bad idea. I didn't actually think that I would get an article featured on the front page of Asp.net! This is what happens when you add goofy photos to your profile!

There was also some coverage on the Channel 9 weekly roundup video.

If you haven’t already had a look at the HTML5 toolkit for MVC, please check it out on Codeplex.

I originally started off hoping that if more than ten people read my blog that would be awesome. Surprisingly however there are a lot of developers out there just like me that are constantly reading and crave knowledge from the internet, the response from the community out there has been great.
Throughout the year a few ideas popped into my head and I decided to give them a try - having a blog is a great way to get these ideas out there. For a lot of people out there blogging might not be for you, which is totally understandable considering the time and dedication it takes to keep on writing and editing articles. However, if the idea of having your own blog appeals to you - I would definitely recommend it. It has been a great learning curve for me. It forces you to constantly keep up to date with what is out there on the net and keeps you thinking all the time. There is a great article out there by Scott Hanselman entitled - 32 ways to keep your blog from sucking I would definitely recommend you have a read.

If you feel that blogging is for you, get out there and get writing!

And finally some stats from the past year -

Hits - 32,872
Visits - 51,290
Around 400 ReTweets ......and loads of research!

Thanks for visiting my site!

Basic Introduction to writing unit tests with Moq - Part 3

This post is the third part of a series on Mocking with Moq. If you haven't already taken a look at the first two posts on the basics of Moq, please check it out.

Mocking a method within the same class

So, recently I came across a problem where I had a method on a class that I needed to mock its return value. It had no interface and I wasn't sure if there was a way to mock it. Fortunately there is a way - and it's pretty easy to do! Let's take a look.

In the previous articles that we have looked at, we wrote a few tests for a simple eCommerce Basket (Cart) system. In this example we are taking a look at a very simple method that calls another method to get the Geolocation details of an IP address. If you would like to know more about this Geolocation service - please check out the article on Scott Hanselman's blog.

We don't want to call the 3rd party service every time we run our tests, so we need to mock out the return value. In this instance our method doesn't have a matching interface.

In the above method we pass in the basket object and an IP Adress that we need to find out the details for. Previously, I would have done this using an Interface - but for the purpose of this example let's say there is no Interface. Where previously we would have mocked the Interface we now need to mock the class under test.

In our setup we now mock the Class instead of the Interface.

There are still a few more things that need to be done in order to get this to work. The method that we are calling needs to made virtual and we need to use the CallBase property on the Mock. The Callbase property is a boolean and decides whether or not to call the base member virtual implementation.

And update the method signature to virtual.

Then we put it all together.

If you run through this test you will now see that the same class will return a mock value. I've put together this example on top of the code that came with the first two posts and can be downloaded here.

Custom OData API using WCF Data Services

I have recently been glued to my screen watching some of the awesome presentations that were shown at the recent PDC 2010. There were some really amazing presentations and one of them really caught my eye. It was a talk about the power of ODATA and the support that Microsoft are building into Visual Studio for it. The presentation was entitled "Inside Some of The Top OData Services" by Pablo Castro. You should still be able to stream the presentation on the PDC player.

One of the things that he showcased was the ability to use Entity Framework and WCF Data Services in order to create an OData API. As I watched him quickly put together an example, I thought to myself that there was no way it could be that easy - Really!? So, I decided to put together a small sample using my Blog's Database. These are the steps that I took.

Firstly, add a new Entity Data Model. Right click on your Project - select Add New Item. I called mine BlogData.

Next, choose Generate from database.

On the next screen, choose your database connection and name your Entity Connection Setting. I called mine "DeanTestEntities", but you could call yours anything.

You should then have a screen displaying a Model Browser of your database entities.

I need to link my two tables together so that I can associate my comments with the relevant blog entry. Right click on your table and choose Add | Association. I added an association between my BlogPost model and the Comment table. They need to be joined on BlogId.

After that, all I needed to do was to add a WCF Data Service and wire it up. Right click on your project and choose Add | New Item | WCF Data Service. We are almost there, all we need to do is wire it up. Once you have created your WCF Data Service you should be presented with some autogenerated code. You will need to replace the following line with the name of the Entity Connection String we used when we created the Entity Data. Mine was called DeanTestEntities.

Replace

With the following. I also uncommented the line that contained "SetEntitySetAccessRule". This allows all user to access the API. I hope to talk more about Entity Access rules in a future post.

That's it. We now have a working API that we can start using. Fire up your application. This is what I see when I open the application in my browser.

If I use the href in the data, and update my URL to be http://locahost/blog.svc/BlogPosts. This new URL then navigates to my Blogpost entity and displays like so. Awesome!

I can now use the associations and links in the data to get anything I need. If I try changing the URL to -http://locahost/blog.svc/BlogPosts(2) - I get the blog entry with the Id of 2.

Or if I try - http://locahost/blog.svc/BlogPosts(2)?expand=Comments - I get the blog entry and all comments associated to it. If you remember we set up the associations in the Model Browser.

I can order by - http://localhost/blog.svc/BlogPosts?orderby=Title

Or even get only the value without any xml brackets - http://localhost/blog.svc/BlogPosts(2)/Title/$value

Building this small OData sample around my existing application literally only took about 20-30 minutes. I was really surprised at how easy it was. There are a few more things that I would like to take a look at, but I will try and cover that in future post.

For more information on this awesome feature please take a look at:

Scott Hanselman's Article
There is a large list of consumers and producers that are available on the OData website.
You could also view the presentation by Pablo on the PDC website.
Also check out Pablo's blog and see what the team are up to.

Proxy Authentication - Helper Class

If you have ever created an application that requires you to access the internet or call a 3rd party service over the web, you may have come across the issue of the user being behind a proxy server and having to authenticate. The common issue that I have come across is the famous error message:

"The remote server returned an error: (407) Proxy Authentication Required".

Recently, I was working on the SmushMySite Application and although it worked perfectly on my machine at home - many other people were getting a proxy authentication error. As soon as I tried the application at work - BANG! - I got the same error. As I'm sure that I will come across this issue again, I decided it was probably best to write a little helper class. You may have come across better methods, but this seems to work for me. It might seem a little confusing a first, but it will all come together.

Firstly, I recommend you take a look at the following article just to get up to speed with HTTP HEAD requests and checking if the user has an internet connection. This is done by making a simple HTTP HEAD request to see if the user can connect. If they can't, we should get a "407 Proxy Authentication Required" exception.

Okay, let's break this down. The above method I am using checks if the user requires authentication when connecting to the internet. It uses the Default Credentials property to determine if the system credentials in the current security context will work. The CheckExists method is called, and if a 407 exception is returned then we know that the user needs to authenticate.

Once the user has provided us with their credentials, we need a method to verify that their details are correct and then authenticate them.

In the above method, we pass in the Credentials and attempt to connect again. Using the CheckExists method, we can determine if the user is able to connect using the credentials that they entered. If it was successful, the credentials have been set again we can access the internet as normal. However, if the authentication failed, we can prompt the user to re-enter their credentials. This could be due to incorrect username, passwords or domain.

I have put these methods in a class called ProxyHelper. Let's put it all together and call the methods that we have created.

As you can see in the above code, I have added a little bit of extra logic to show useful messages to the user. You might want to handle this slightly differently depending on the setup of your application.

Just to make this a little easier to understand, I have put all the code above into a WPF example that is available to download.

HTTP HEAD Request - Benefits / Usages

Until recently, I had heard of the HTTP HEAD method but never actually used it, or quite understood it's usages. I'm sure most of us have used some of the common HTTP Verbs before such as GET or POST. Let me explain a little bit about the HTTP HEAD request method. According to Wikipedia it does the following:

"Asks for the response identical to the one that would correspond to a GET request, but without the response body. This is useful for retrieving meta-information written in response headers, without having to transport the entire content."

How is this useful to us? Well, let's say for example we needed to check if a resource was available or online but we didn't want to download it. We could simply use the HEAD request to check if it was there - it doesn't download any response and this saves us bandwidth. We can also get the Content Length and the Last Modified date which we can use to further decide whether or not to download the resource. Let's take a look at how to do this in .NET - I have created a simple method that checks if the resource exists.

It's that simple! If we get a response without exception this means that we are able to access the resource. You may want to do some further exception checking, but what you do with it after that is up to you!

For some further reading, please take a look at:

http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods

http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

jQuery Mobile - Optimizing your Website for Smartphone's and Tablets

As developers today, our websites are constantly being accessed from different forms of devices - PC's, Mac's, iPhones, Blackberry's, iPads - and the list goes on! Developing websites and content that conforms to all these standards can be a nightmare. Luckily, jQuery has just released a version of their library called jQuery Mobile. Not only does it provide sleek, clean and semantic HTML - but it is a unified JavaScript User Interface that works across the most-used Smartphone web browsers and tablets. What does this mean for us as developers? Well, it means that we now have a unified JavaScript library that we can use to write web-based applications that can be used by Smartphones & Tablets - plus it's really easy to use!

Let's take a look at a simple example using jQuery mobile. First off, you need to use the new HTML5 doctype in your page.

Next, include a reference to the jQuery Mobile library and stylesheets.

Now, we are ready to get started. First off, let's start by defining the layout of the page. Each view or "page" on the mobile device is identified by an element with the data-role="page".

Inside that, we can further define the page layout.

That is all that is needed to start coding your site. It's that easy! There is also a boilerplate template that is available on the site.

http://jquerymobile.com/demos/1.0a1/#docs/pages/page-template.html

Okay, so now we have defined our page - let's start making it sexy. The library comes with themes that are even easier to use, plus they take advantage of CSS3 properties. Simply assign a data-theme attribute to the header or footer.

The default theme currently contains five style and you simply define the swatch by the swatch letter.

If we wanted to style a link as a button, add the data-role="button" attribute.

It then appears as

Let's say we wanted to add an icon to our button.

Which appears as

There are many more features available with the jQuery Mobile library, and I'm sure as it expands and progresses we will see a lot more from it! I've just touched on some of the great features that it currently offers, but for more information please check out http://jquerymobile.com

On this site, I already had a iPhone enabled version of my site - but it didn't quite work across all mobile devices. I decided that it was time to update the mobile site to make it available to more devices. Please check it out at - http://www.deanhume.com/mobile

SmushMySite - Image Optimization Tool Update

The SmushMySite tool has just been updated with a load of new enhancements. For those of you that aren't familiar with the SmushMySite tool, it is a free image optimization tool that takes advantage of the Yahoo Smush.it™ service. It is a quick and easy way to optimize all images on webpage, or all images on your site. You simply enter the URL of the page with the images you want to optimize and it will process and spit out all the optimized images! If you want to optimize your entire site - you simply point it to your site's sitemap - it's that easy!

The latest release now has support for CSS images, which means it will now check your URL for any images that are referenced via CSS and optimize them too, making your life a lot easier!

For more information, please check out the original article.

The latest release has:

- List item
- Support for CSS images
- Update with Silverlight Jetpack Theme
- Better validation for URL's and Extensions
- Now handles ASP.net images - input type="image"
- Better checks for duplicate images

To download the latest version, please visit http://smushmysite.codeplex.com/

SmushMySite Image Optimization Tool - Smush.it™

When I am developing a web site, I am always looking for ways to improve the speed and page load times. I have used a few tools such as Yahoo's YSlow and Google's Page Speed Analyzer. If you have played around extensively with YSlow you may have noticed that there is a small column on the components tab called "Smush.it".

Smush.it™ is an awesome tool that optimizes images by removing unnecessary bytes from the image without changing its look or visual quality. After Smush.it™ runs on a web page it reports how many bytes would be saved by optimizing the page's images and provides a downloadable zip file with the minimized image files.

I was recently playing around with the tool that is included as part of the YSlow tool for Firebug. Now the tool that comes part of the firebug plugin is great, but the process is a bit manual if you have loads of images on your website. I also had a look at the Smush.it site, which provides an online tool for you to upload images and then retrieve the optimized images as a zip file. On the site, there is also the option to input the URL's of the images on you site. This got me thinking, what if there was a way to optimize all images on my site, or even all images on one of my web pages.

I decided to write a tool that would help with this. Enter SmushMysite - it is a tool that allows you to link to a URL or website sitemap, which then processes all the images on the page and copies the optimized images to an output directory. I can sometimes be lazy and any way to automate this process makes life a lot easier. Be sure to download this tool at http://smushmysite.codeplex.com. It has been written using WPF and C# 4, and you might be prompted to install .NET Framework 4 when installing the tool.

Below is just a quick walkthrough about the tool and how it works.

The Main Menu Screen

The ability to optimize images for a given URL

The ability to optimize images for a given sitemap. The tool will run through all URL's on the sitemap.

Once the tool has finished running, you will be able to view the results of the optimization as well as any errors that may have occured during the process.

One thing to keep in mind when using this tool is that it is still in the early development stages and there are a few known issues. If you come across any issues with this tool, or have any advice on how to improve it / suggestions - please contact me and let me know. Please be sure to include the URL that you were running against.

List of known current issues:

Doesn't currently process images in CSS files. This is being looked at for future releases.
Generally only works with image URL's that end in correct image formats (ie. jpg, gif, png, etc.)
"407 Authentication Error" occurs when connecting from a proxy. One of the things I am looking at in future releases is to allow for proxies.
Websites that have too many redirections in the page load may cause errors.

There are also a few things that I would like to add to this tool and these are some of the upcoming features that I would like to have ready for future releases:

Ability to loop through the CSS file and retrieve and optimize all the images.
Full support for proxies and the ability to enter Username and Password when prompted.

For more details and frequently asked questions on Smush.it™, please visit the FAQ.

Again, to download the tool please visit - http://smushmysite.codeplex.com

Object Caching - .NET 4

As a developer, we need to use all the tools at our disposal to develop faster and more robust applications. One of the ways we can achieve this is by using caching. Caching is the process of storing frequently used data on the server to fulfil subsequent requests. Now there are a few different types of caching available to the .NET developer, but in this article I am going to discuss data caching using the object cache. The cache object enables you to store everything from simple name / value pairs to more complex objects such as datasets and entire pages.

Previously, the cache object used to fall under the System.Web.Caching.Cache namespace. Due to it's power and awesomeness, many developers would copy this namespace into their projects and use it in other applications such as Windows Forms and WPF apps. With the release of .NET 4, the namespace has been refactored and totally rebuilt into the new namespace of System.Runtime.Caching. The old namespace is still available, but any new enhancements will be added to the System.Runtime.Caching namespace.

In this example, I am going to take a look at Object Caching. For more types of caching available to you in the .net framework - check out this link. Now, let's look at a code example and run through how easy it is to add some caching to your application. I'm going to use an example of some of the caching I use when building on this site.

To start, you add a reference to the System.Runtime.Caching object in your project.

If you wanted to add an item to the cache, you would need to do the following:

In this line, we are obtaining a reference to the default MemoryCache instance. Using the new .NET Caching runtime, you can have multiple MemoryCaches inside a single application.

ObjectCache Cache = MemoryCache.Default;

Then we add the object to the cache along with a key. The key allows us to retrieve this at a later point.

Sometimes you might come across a scenario where a similar object will have similar name, in this case you might want to build a dynamic key string to identify your objects.

Cache.Add("Key", objectToCache, DateTime.Now.AddDays(30));

Retrieving our object is just as simple, but this time let's make a re-usable method that is a lot sexier.

For this example I have added the above method to a class called CacheLayer, and if we wanted to call the method that has just been created:

Let's put the whole thing together in a real world example and show the power of caching.

In the above example, we check if the cache contains the data that we are looking for based on the key. If it doesn't contain the data, we retrieve it from the Database and then add it to the cache. Then the next time that the method is called it won't have to hit the Database, but simply get the data from memory. This saves a lot of time and overhead!

NOTE: If you make changes on your application, you might not see them immediately because they might be in cache. You might need to remove the object in order to see your changes - you can always add them back in!

In order to wrap all this up, I have created a little class that you can easily call and use for your caching needs. If you would like to download just the class file - click here

Else if you prefer to download the full class library project with working unit tests

Analytics - Bounce Rate

If you are a fellow blogger or Webmaster then read on, because this might interest you somewhat. When I first started out blogging, I added Google Analytics to my site to track visitors and stats. It's a great free tool and generally a really accurate service, and I'm certain that millions of people use this service. However, one of the things that I found was that my bounce rate was unusually high. It was and still is sitting at around 80%.

Now, if you aren't really familiar with bounce rates Wikipedia gives a great description of this.

"Bounce rate (sometimes confused with exit rate) is a term used in web site traffic analysis. It essentially represents the percentage of initial visitors to a site who "bounce" away to a different site, rather than continue on to other pages within the same site."

The formula used to calculate bounce rate is:

Bounce Rate = Total Number of Visits Viewing Only One Page / Total Number of Visits

Having a high Bounce Rate made me think the articles I was writing weren't getting read - or even worse people were just leaving as soon as they saw the content! A while later, I read a post by Dave Ward at Encosia entitled "How 30 seconds dropped my bounce rate by 78%". In it he explains how bounce rates are measured by Google analytics. For example, if you spend five minutes reading this single post and then leave the site, Google Analytics will report your visit the same as if you left instantly. Now, if you are a blogger - this could make your statistics appear as if people aren't bothering to read your articles. However, if Google or any other site analytics package sent a second request to calculate how long you actually spent on a page, this would make your results appear dramatically different.

After following his advice, I decided to setup and run the same stats provider alongside my Google Analytics tracker. The provider that he uses is called GetClicky. GetClicky is a real time web analytics service - this means that when you login and view your stats, you are seeing up to the minute data on the traffic to your web site. They also use a client side tracking code to "ping" the site every now and then and check if the user is still viewing the page. So, instead of relying on a second page view to calculate bounce rates, it uses the "pinging" instead. After a few months of running the two stats services alongside, this is the difference that I noticed:

Google

GetClicky

That's quite a remarkable difference! I definitely recommend trying this service out and seeing if you notice any improvements on your bounce rate. I'm not advising against the use of Google Analytics (I still use it), but if you are getting a low bounce rate on your Google Analytics results you might want to try out this service!

MVC and the Google Visualization API (DataTable)

Google have created an awesome visualization API. It enables you to add live charts, graphs and tables to your web pages. It is quite flexible and has some great features that are quite easy to use once you get started. I started playing around with this API and decided to build a datatable using ASP.net MVC and the visualization API.

Click here to view a simple demo.

Let's start off by adding a reference to the latest jQuery library. Then we will need to add another reference to the Google API script. And finally, we are going to use a Javascript file to write our code to create the table.

Add a Javascript file to your project, let's call it "TableResults.js". Add the code below to your Javascript file. I have broken this down into two separate parts for easier readability.

Okay, let's break this code down to get an idea of what's going on.

1. Initially we are loading the Google Visualization API and instructing it to use the tables package.
2. This is the location of our MVC Controller that we want to post to.
3. Add the Column names and data types.
4. Loop through all the results that we got back and set the data to the appropriate column.

And now the second part of the file:

5. We are adding a Number Formatter to the column. If the number is negative, we change the column to red. We are also prepending a currency symbol in front of the value. This is an optional feature that you can use to jazz up your table.
6. This is another Column Formatter, but this time we are adding a colour to the column if it falls between certain range. Again, this is optional.
7. Finally, the paging is being enabled and the paging size is being set to 2. The reason I am setting it so low is because I am only returning a small amount of data for this demo. You may want to set this higher depending on your preferences.

Next, add a method to our Controller. This should be the same as the name that we mapped in our Javascript file.

We have one last thing to do, and this is just to add a div to our view that will contain the table and its data.

And that's it!

The great advantages of using this API to help construct your tables is that it has features like Column formatting, paging and sorting, as well as the ability to totally manipulate the look and feel of your table. For more information on column formatting and paging please refer to the documentation. The API offers some additional features such as the ability to add Bar Formatters and Arrow Formatters.

Bar Formatter

Arrow Formatter

I've created a small solution based on this tutorial.

Download

For further reading on this API, please take a look at the following links.

http://code.google.com/apis/visualization/documentation/examples.html

http://code.google.com/apis/visualization/documentation/reference.html#DataTable

A Simple Guide to SQL Compact 4

There has been quite a lot of interest building up recently around SQL Compact 4. Now, if you are not familiar with SQL compact, it's basically a database engine that is free and totally embedded. You don't need to install a database anywhere on your server. Not only that, but it works with existing .NET based data API's (Entity Framework, NHibernate). Another great advantage of using a SQL CE database is that it is totally file based and you can store your database files within the \App_data folder of your web application. So, for someone like me who is running a simple blog that doesn't really require a massive DB, this is really ideal. If you use shared hosting services and you need to use SQL Compact - no problem, it runs under medium trust which means it works perfectly.

I decided to play around with a few sample exercises using SQL CE, and these are the steps that I took. Firstly, download the preview from this link. Even if you are running your application under .NET 3.5 this will work perfectly. Next, we need to create a database using SQL server:

1.In SQL Server Management Studio, open Object Explorer.

Note: You can use SQL Server Management Studio or SQL Server Management Studio Express to create a database. If you need to, you can install SQL Server Management Studio Express from Microsoft Download Center.

In Object Explorer, click Connect, and then choose SQL Server Compact.

2.In the Connect to Server dialog box, select from the Database file drop-down list.

3.In the Create New SQL Server Compact Database dialog box, type a file path and file name for the new database file. You can optionally select the default collation, case sensitivity, and choose whether you want to encrypt or password-protect the database. If you choose to encrypt or password-protect the database, type a password, and then click OK.

4.Click Connect to connect to the new SQL Server Compact database. The database is now displayed in Object Explorer.

UPDATED
At present you can only create a SQL 3.5 Compact database using SQL Management Studio. In order to create a SQL 4 Compact Database you need to use the SQL CE toolbox. Full instructions are available on the site.

Okay, so now we have created our database let's add a table to it. Right click on tables and choose new table. Let's name ours blog. After that, we are going to add some fields to the DB.

Now that the database is complete, you need to copy the .sdf file from it's file location and paste in under the \App_Data folder on your website.

In order to start coding, we need to add a reference to the SQL Server Compact 4.0 libraries.

For this example I am going to use Entity Framework as the data API. Next, add a new entity data model to our project. Right click on the solution explorer and choose add => new item => ADO.net entity data model, let's call ours "CompactRepository".

Next, choose generate from database. Then select your database from the drop down list. Then, choose all the tables / stored procedures you want to include in your model. Finally click finish.

Let's start writing some code. Using EF makes our life a lot easier and now we can start coding against our database. We can start by adding an entry to our blog table.

And then writing code to retrieve a record is just as simple.

One thing that I noticed while working on this is that it sometimes threw an exception - "SQL Server Compact Edition is not intended for ASP.NET development". I'm not sure what is causing this, but it could be down to this being a CT edition. If you add the following line of code to your app - - it should all be sorted. Depending on your solution structure, you might want to put it in the global.asax.

For some further reading and information on SQL Compact 4, check out this link

Download this sample

MVC Experiment : An Alternative to Captcha

I'm sure most of you have at some point been exposed to a CAPTCHA control on the net. They come in loads of forms and are used to tell the difference between humans and computers (bots). If you have a website on the net, you are prone to lots of different kinds of attacks from bots - such as CSRF (Cross-Site Request Forgery)

You may have noticed that on some sites you get asked simple math questions or other simple questions when submitting or posting information. One of the more common controls out there is a captcha like control:

Generally these types of verification work very well, but personally I have always been annoyed by them. However, I even use a captcha control on this site from reCAPTCHA. Some users out there might not be very technical and these controls can confuse them, which may lead to a drop conversion rates. That said, this sort of verification is vital to keep our application secure.

I was recently browsing the net when I came across this article about an alternative to CAPTCHA. It involved making the user slide a slider to the end of a bar in order to verify that they are human. It really got me thinking how I could get this implemented in MVC as well as keeping it as secure as possible.

So, let's start off by creating a simple MVC application just to test this approach. First we build our model -

Then let's update our view:

We need to include the references to jQuery and the jQuery UI toolkit.

Then let's whack together a little bit of Javascript to handle the slider:

Okay, let me break this down a little and explain whats going on here. In Part 1, I'm creating a variable with a random number between 40 and 100. This variable is used to determine the max value of the slider, as well as determine how far the user has slid the control.

In Part 2, I am using the stop event on the slider. For more information on the jQuery UI slider, check out - http://jqueryui.com/demos/slider/ . Part 3 takes advantage of the random number that we set earlier and basically just checks that slider's current value has exceeded the random number. Once it has, we submit the form using jQuery submit();

Finally in Part 4, we are setting the max amount that the slider can be - ie. the random number. I decided to use a random number for this because every time the page refreshes it will generate a different number, so writing some dangerous script that could repeatedly run this would be slightly more difficult.

We have one last thing to do in our controller before this is complete. As this code stands a user could still post to our controller which raises the problem of repeat posting. We can then build an attribute that would be able to look out for this. Enter the ASP.NET MVC AntiForgeryToken. If we add the following code on our view:

It renders like so:

So, now we can create our attribute and add it to our HTTPPost method on our controller:

The ValidateAntiForgeryToken Attribute checks to see that the cookie and hidden form field left by the Html.AntiForgeryToken() HtmlHelper essentially exists and match. If they do not exist or match, it throws an HttpAntiForgeryException. Let's try and combine that with a check to see if the UrlReferrer is not null and the UrlReferrer matches this site. If it doesn't match, then we know that the post didn't come from this site - so in this instance it can't be safe.

And that's it! If someone tries to fake a post to your site instead of going through the controller they will get an error. One of the things to keep in mind with this option is that it is merely an alternative to CAPTCHA and it is something that I have been exploring. This hasn't been fully tested and I can't guarantee that this will keep spammers at bay. Another one of the downfalls of using this is that the user needs to have javascript enabled, but there could be workarounds to that. If you have any other ideas on how to make this option more secure please let me know! This is a very simple screenshot of how this demo would look - it could do with some jazzing up.

For some more information about the ASP.net AntiForgeryToken check out this link

And some more useful information on Brad Wilson's site.

I have also created a demo project that you can download:

Download

ASP.net MVC HTML5 Toolkit

If you haven't started playing around with HTML5 yet, you should definitely check it out. I've blogged about some of the features of HTML5 before, so if you take a look at this post, it should give you a fairly idea of what HTML5 is about.

I try and play around with ASP.net MVC as much as possible and this site is also written in MVC 2. One of the things that I thought about adding to MVC is the ability to have all the textboxes and controls updated to use HTML5. One of the great things about HTML5 is that even though some browsers do not currently support it, you will still be able to use it in your web applications and the browser will just handle it as a normal HTML control if it doesn't recognize it.

So, I've finally got around to creating a proper project and solution for these controls. You can find the project on codeplex at http://mvchtml5.codeplex.com/

Getting started

Firstly, you need to add a reference in your project. Simply right-click on your project in the solution explorer and select "Add reference". Then browse to the location of the System.Web.Mvc.Html5.dll.

Then, you simply call it the same way you would call a normal textbox in your MVC view.

There is also added support for Strongly-Typed HTML Helpers

And any additional html attributes:

Another great thing about HTML5 is that it offers native support for placeholders - no more need for heavy javascript!

You can also call the new Html5 Range and Number input types.

And they display like so:

If you currently use model validation in your controllers, you will be happy to know that this is also supported. So, if you check if your model state and it is not valid, the appropriate CSS will be added in the same way that it currently is with the standard textboxes.

Additional Information

These are some extra attributes that are also available with this toolkit:

Support for Textbox Placeholders
Support for HTML attributes
Support for HTML5 Range and Number input types.
There is also support for the following input types in the toolkit: Text, Color, Email, Search, Time, Tel, File, Date, Datetime, Month, Week, Range, Number

In terms of requirements to be able to use this toolkit, you will need:

Asp.net MVC 2
Asp.net 3.5 framework sp1 - download here.

If you would like to contribute to this project, or you simply find any bugs and would like to report them please let me know.

Test your MVC routes with Moq

Routing is a great feature that ships with MVC. The ASP.NET Routing module is responsible for mapping incoming browser requests to particular MVC controller actions. One of the great things about routing in MVC is the ability to rewrite a URL and make it a lot more readable. This is also meant to be better for SEO, but I like that fact the URL's are easy to type and easier to remember.

If you've had a look at an ASP.NET MVC application before you will notice that it handles URL's differently to your standard ASP.NET Webforms. One of the things that I worry about when playing around with the routing is messing up other routes. This is where unit testing comes in very handy.

A great way to test this would be to use a Mocking framework. I normally use Moq, but you could use any .Net based mocking framework. For this example however, we will stick to Moq. If you haven't worked with Moq before, please take a look at these two other posts that I have written on them here and here.

Lets take a look at the default route that is included in our Global.asax file.

One of the advantages of using Moq in this instance, is that it allows us to create a fake HttpContextBase and HttpRequestBase. Lets apply this and write a unit test to test this:

In the first section (Arrange), we are setting up the fake data that the HttpContextBase should return. Once that is done we tell it to return the route "~/Home/About".

We then get our RouteCollection to return the route data for that HttpContextBase that we have setup.

And finally, we are checking all the values that are returned to see if they match the Controller, the action and any Id that was passed in. Let's try this same pattern for another route that is a little more complicated. We should be able to test for similar results.

In this instance, the route is slightly different. We are also going to add a bit of complexity by adding some parameters.

Again we are mocking an HttpContext and setting it up to return the route "~/Home/Product/Jeans/2". If this were in a controller and we were passing a model to the view, we would expect the view to return a product with an id of 2 - ie a pair of jeans.

Finally, we can test that the values passed in the URL - "~/Home/Product/Jeans/2" are getting sent and the routes are getting mapped correctly.

I hope this helps with any issues you may have had with testing your routes in MVC. It might also be a good idea to run a set of tests against your routes whenever you make any changes!

Professional Asp.net Mvc 2 Book Giveaway - Result

Firstly, I would like to thank everyone that entered the competition and also everyone that contributed by leaving a comment on the blog. There have been a load of great ideas and I will definitely be implementing them on the site. Hopefully you will see these changes over the next few weeks!

Okay, so in terms of the draw - it took place last night and the lucky winner is Paul Irvine. I hope you enjoy the book and I will be in contact shortly regarding getting the book to you.

For those of you that didn't win, I still recommend you get yourselves a copy of the Professional Asp.net Mvc 2 Book as I have one myself and it is a great book if you are keen to learn about Asp.net MVC! Thanks again to everyone that entered!

Professional Asp.net Mvc 2 Book Giveaway

If you haven't already read Professional Asp.net Mvc 2, you should really check it out. Luckily though, I also have a free copy of this freshly released book to give away. If you are new to Asp.net MVC, this book is a great way to get you up to speed and help you build real world websites with the framework. It is written by a host of great authors such as Jon Galloway, Phil Haack, Scott Hanselman, Scott Guthrie, and Rob Conery. The book covers pretty much everything you need to be a MVC 2 ninja!

So, it's really easy to win this book and there are three ways to win. You can either comment on this thread, you can subscribe to the RSS feed or via email, or you can retweet this page's url. If you comment on this thread, please let me know what aspects of this site you would like to see improved, any interesting topics that you would like to see on the site, or just to say hi really! If you aren't already subscribed to the site, you can do so by clicking here for RSS and here for email. Also, if you comment on this thread please be sure to include a valid email address so that I can get in contact if you win!

And finally, the winner will be chosen at random on the night of Sunday 01/08/2010.

Good luck!

HTML5 Input Types

If you've been browsing around the web lately, you may have noticed that there has been a lot of hype and attention slowly building around Html5. Now, I didn't really understand it all until I started to take a look at some of the awesome new features that Html5 has. At the moment, most modern browsers support Html5, but only a few of them truly take advantage of it's power.

One of the great aspects of Html5 is the new set of input types and how the browser handles them. Now instead of using Javascript or heavy CSS to enable any features, the browser will offer native support. A good example of this would be the placeholder attribute on a textbox. Previously, we would use jQuery or Javascript to accomplish this, but now all you need to do is include this as an attribute on your Html.

And this is the result:

Very cool stuff indeed. So let's say we also wanted to include some validation on our input fields. Let's validate an email address. Just add the attribute type like so:

And a little css to show the validation error:

And the result is the following:

As soon as you enter the correct value it reverts as normal:

It's that simple, and this extends to a load of other input types. For example: search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range and color. Using the native widgets means you don't need to send the heavy Javascript and CSS required to pull off these widgets, speeding up page load and improving responsiveness. Plus, the new input types look really good a page!

At the moment, Chrome and Opera and IE (sort of!) are the only browsers to offer native support for these features, although most browsers with new releases should offer support for this very soon. Even if your browser doesn't support it at the moment, you can get your Html ready for when it does as adding these attributes will not have a negative impact at all. If you are running the latest version of Chrome/ Opera / IE at the moment, click on this link and check out some of the cool features that are on offer in HTML5.

Besides the cool input types, there are a load of awesome new features that Html 5 offers that can enhance and speed up your site. Check out this link for more information.

Another cool feature that I have started playing with is the Html5 support for audio and video elements. This allows us to easily embed media into HTML documents. Simply add the following tag in your HTML:

And Video:

If you would like to see how your browser fares up with HTML5, run the HTML5 test and see your score. So, get started today using these awesome new features and feel the power of HTML5!

Some further reading and great sites:

http://www.html5rocks.com

http://html5tutorial.net/

HTML5 and Css - http://www.storiesinflight.com/html5/backgrounds.html

Compiling LINQ queries for improved performance

I've been using Linq to Sql for quite a while now, and here and there I have heard of compiling your Linq queries mentioned. Now I know that this feature has been around for a while in terms of .net, but I have never actually got round to using it. I started to look into it and found out that it is actually really easy, and it really does improve the performance of your query.

So this is how you would write a standard linq query:

But if we wanted to compile it, we need to write it slightly differently. First we start off with a func :

And then if we need to call this, we simply do the following:

The magic is all in the CompiledQuery.Compile() !

Things to consider

You may not benefit from precompiling your queries in all circumstances. Bear in mind that a compiled query needs to be run more than once for the compilation and caching to be truly effective. In some circumstances, if you are using a complex query, precompiling might add a little overhead. Overall though, I would definitely still recommend that you compile your LINQ queries to improve your performance. You will definitely notice the results!

Here are some links I came across whilst researching this topic:-

Some more information about the positives and negatives of precompiling LINQ queries - http://msdn.microsoft.com/en-us/magazine/ee336024.aspx

From the MSDN site:- http://msdn.microsoft.com/en-us/library/bb399335.aspx

Basic introduction to writing unit tests with Moq - Part 2

This post is the second part of a series on Mocking with Moq. If you haven't already taken a look at the first post on the basics of Moq, please check it out.

In this post, I hope to cover some other basic aspects of mocking such as Verifying, Exceptions and strict Mock behaviour. There are a lot of awesome aspects of mocking out there, and I still try and experiment with them as much as possible. In the first post, I talked about the advantages of using mocking to simulate different objects and exceptions that we need to work with. For these examples you will need to have nUnit and Moq installed. Let take a look at some of these features.

Exception Handling

Let's say for example you wanted to simulate an exception that your code would throw and you weren't sure how your code would react. This exception might also be a difficult exception to simulate under normal circumstances, but with mocking we can throw this easily and test the results.

Let try an example:

In the above code, we are setting up our mock object and telling it exactly what it is going to return. So in this instance we are telling it to throw an ArgumentOutOfRangeException, this could be any exception that you might want to test, as well as any custom exceptions you may have. It's as simple as that to start testing for exceptions.

Now we also want to check with nUnit that this exception was actually thrown.

Verifying

Sometimes you might also want to check that a certain method was called, or even how many times that method was called. An easy way to do this is by using the Verify() method.

Once you have setup your mock, verifying is an easy task:

The above code checks that the method GetBasket() was called once. There is also more options to choose from when deciding how many times the method was called, such as AtLeast, AtMost, Exactly, Between, etc.

Strict Mock Behaviour

When we are initially setting up initializing all our variables and setting up our mock objects, we can also set the mock behaviour of that object. For example:

Now, if we haven't set up any of the interfaces, Moq will throw a nasty error. If I run my test again with the new strict mock behaviour I get the following error:

Moq.MockException : IBasketDal.GetCustomerName(1) invocation failed with mock behavior Strict. All invocations on the mock must have a corresponding setup.

This is because there is another method that I haven't setup correctly. Once the missing method has been setup this will go green!

And finally

I hope this post has helped a little with understanding more about mocking and using Moq. Hopefully now you will become a master of mocking like Nelson above. Again, I've included a project with some of the examples that we run through in this post - download here. If you are using MS Test, you might want to update the project to accordingly.

Lazy loading images with jQuery

Some of the articles written on this site are pretty image intensive and take up a lot of resources when loading up. An awesome way to improve page load times as well as providing a better user experience is to use lazy loading for your site.

There is a excellent jQuery plugin called Lazy Loader which delays the loading of images in long webpages. If you have a blog site like this or a site that has long posts and requires the user to scroll down, this might be a good option for you. Basically, it only loads the images inside the visible part of the page that the user is viewing. You may have already noticed this effect while browsing other sites, or even this site.

Another good thing about this plugin is that it is really easy to use. Take a look at this code for example:

First add the references to jQuery and the plugin.

Then add the javascript.

In order to get the greyed loading effect with your images, you will need to add a 1px grey image placeholder. Add the reference to the image in your code as above.

On this site there is a good example of a long article that uses lazy loading. If you are building your site for progressive enhancement, this will also just not load so the user won't notice anything different.

Check out the site for more info on this plugin.

I've also included a really simple example project, check it out.

Set up IIS 7 to run a secure site locally - HTTPS

I've recently been working on a project where I needed to get a development site running using SSL on IIS 7. If its the first time you've done this it can be a little tricky, but IIS 7 has made it super easy to create self signed certificates. You may also need to be able to run your site on IIS locally instead of using cassini, so that you can still debug. These are some of the steps I took to get it up and running:

If you dont already have IIS installed on your PC, go to Control Panel -> Programs -> Programs and features and select “Turn Windows Features on or off”. Select Internet Information Services. Make sure ASP.NET is selected under World Wide Web Services -> Application Development Features.

Go to Control Panel -> Systems and Security -> Administrative Tools -> Internet Information Services (IIS) Manager.

Select your Computer Name on the left under Connections. Now double click Server Certifcates under IIS group.

Select Create Self-Signed Certificate from the actions panel. Enter a name for your certificate. A new certificate should be added to the list with the name you just gave it.

Select a site in the tree view and click Bindings... in the Actions pane. This brings up the bindings editor that lets you create, edit, and delete bindings for your Web site. Click Add... to add your new SSL binding to the site. Select Bindings from Actions panel. Select Add and then select https for type and select the cerificate you just created for SSL certificate. Select OK.

The web site should now have 2 bindings, one for *.80 (http) and one for *.443 (https).

We need to go back to Visual Studio, right-click the Secure Web Site Project and select Properties. Now select the Web tab. For Servers select to use Local IIS Web Server. Set the Project Url to be https://localhost (or whatever you have named your website to be in IIS)

Some browsers will display an error page because the self-signed certificate was issued by your computer, not a trusted Certificate Authority (CA). If you just click "Continue to this website", you will be redirected as normal.

Enabling 32 bit applications

I have also come across this little curveball before:

System.BadImageFormatException: Could not load file or assembly or one of its dependencies. An attempt was made to load a program with an incorrect format.

System.BadImageFormatException: is not a valid Win32 application

If you have recently deployed your asp.net application and it used to run perfectly, and then all of a sudden when running in IIS7 you get the above error, you might need to enable 32 bit applications in your application pool.

Basically, go into your IIS 7 manager console, find the application pool your app is running in, right-click on it, go to Advanced Settings, and change the Enable 32-bit Applications setting to true:

Tada! Hopefully everything should be running again!

MVC Google Maps HtmlHelper - Dynamic Maps

I've recently been looking for a MVC helper class for Google maps. I came across this well written MVC HtmlHelper for static Google maps. Unfortunately I was looking for a helper that was for the dynamic version of Google charts. I needed to be able to add markers on the maps with dynamic text and possibly even images.

So, a great way to re-use code in MVC 2 is the Htmlhelper class. I have also written about this before where I wrote a Google Charts Htmlhelper. For this example however, I also needed to take advantage of the great way that MVC combines with Javscript to return JSON data.

First, I wrote a method that would return my JSON data to the client side.

public ActionResult GetMarkers()

{

// This would normally be our call to the Db,

//else we could populate this

// with some data as Ive done here.

MarkerList markers = GetMarkersObjects();

return Json(markers, JsonRequestBehavior.AllowGet);

}

I wrote a small Javascript file that will handle the JSON and pass it on to Google and draw the map.

Incorporating this into a Html helper was pretty easy:

/// <summary>

/// Draws the map.

/// </summary>

/// <param name="helper">The helper.</param>

/// <param name="key">The key.</param>

/// <param name="jsonUrl">The json URL.</param>

/// <param name="mapWidth">Width of the map.</param>

/// <param name="mapHeight">Height of the map.</param>

/// <returns>The html of the map.</returns>

public static string DrawMap(this HtmlHelper helper, string key, string jsonUrl, string mapWidth, string mapHeight)

{

StringBuilder mapHtml = new StringBuilder();

// Google Maps API Link

mapHtml.Append("<script src=\"http://maps.google.com/maps");

mapHtml.Append("?file=api&v=2&sensor=false&key=");

mapHtml.Append(key);

mapHtml.Append("\" type=\"text/javascript\"></script>");

// Hidden value

mapHtml.Append("<input type=\"hidden\" ");

mapHtml.Append("id=\"MarkerUrl\" value=\"");

mapHtml.Append(jsonUrl);

mapHtml.Append("\" />");

// Map Div

mapHtml.Append("<div id=\"map\" style=\"width: ");

mapHtml.Append(mapWidth);

mapHtml.Append("px; height: ");

mapHtml.Append(mapHeight);

mapHtml.Append("px\"></div>");

// Maps javascript file

mapHtml.Append("<script type=\"text/javascript\" ");

mapHtml.Append("src=\"/Content/GoogleMapping.js\"></script>");

return mapHtml.ToString();

}

Now when you call the Html you simply need to do the following in your page:

<%= Html.DrawMap("your_api_key_goes_here","/Home/GetMarkers","550", "400")%>

The first parameter is the API key that you need when accessing Google maps, it's free and easy to sign up for one, just go to http://code.google.com/apis/maps/signup.html. The second parameter is the location of the JSON service that we need to call to get the data (The name of the method that we wrote in the controller).Finally the third and fourth parameters are the width and height respectively.

This is how the map will look.

I have created a sample project that you can download, but you will need to get an API key in order for the map to display correctly. There is also a minified version of the Javascript included in the project that you might want to switch to.

Download

Rich Snippets and Structured Data - RDFa

I've always been interested in optimizing this site for search engines and trying my best to make this site as efficient as possible. I recently stumbled across a blog post by the Google webmaster team that explained a little about rich snippets and how search results are returned when they have been marked up using structured HTML. I was pretty impressed with the way the results showed up.

Try some of these other queries and notice how the search results appear:

Simpsons Apples

Avila Boston

Both Google and Yahoo provide support for structured data, and I'm sure many more will follow soon (I don't think that Bing supports it just yet). Surprisingly, updating your site is really easy, and all you need is a basic knowledge of HTML.

You can mark up your structured HTML content in any of three formats:

microdata
microformats
RDFa

For this site I chose to use RDFa, although you can use any of the three formats and it will be picked up by Google and Yahoo. Below is an example of some of my HTML that I have updated to include RDFa.

Here is an example of the HTML:

Yahoo and Google have testing tools that you can use to check your results. I would say that I prefer the Yahoo version (called SearchMonkey) for now, merely because it offers a much better UI and a lot of work has been put into SearchMonkey. I would still recommend checking your pages in both tools for consistency. Google will probably offer better support for structured HTML soon.

These are the results for the above page on the SearchMonkey testing tool:

And Google rich snippets testing tool:

At the time of this article going live, this site was not included in the Yahoo search results. I have just re-submitted this site to the search engine crawlers again and I am hoping for it to be updated soon. However you can check that the structured HTML is being parsed by the search engines. Try this link (http://www.deanhume.com/Home/About) in the validate markup section.

Marking up your data for rich snippets won't affect your page's ranking in search results, and the search engines also don't guarantee that the markup will be included in search results. However, RDFa makes web browsers smarter by giving people more options when viewing a web page, such as adding you to their address book, adding an event to their calendar, getting directions to a place described by RDFa, or searching online bookstores for a book marked up using RDFa. I would definitely recommend using it!

Here are some useful links to get you started:

http://developer.search.yahoo.com/start

http://www.google.com/support/webmasters/bin/answer.py?answer=99170

http://knol.google.com/k/google-rich-snippets-tips-and-tricks#Basic_instructions

http://rdfa.info/wiki/RDFa_Wiki

Measuring the Performance of Built-in .Net Classes

I've always wondered which built-in .Net classes are faster compared to others. There is a lot of conventional wisdom surrounding certain code classes in .Net and which ones are better to use than others. One thing that I always try and keep in mind when writing code is that different situations have different needs. As I am always keen to learn more about my trade, I decided to write some simple performance tests to see how these different classes compare against one another. Once I got into writing them, I decided to test more and more built in .net operations.

First off, I wrote a simple class using the .Net Stopwatch Class that would measure and record the time that each operation took to complete. I found this to be a great exercise to learn about these .Net operations and also how to write better, more efficient code.

Firstly, I started off by comparing the For Loop and the Do While Loop. The two methods below just add a incremented string to a generic list. This is the code I used:

While Loop vs. For Loop

/// <summary>

/// Loops through the list until it

/// reaches a count of 3000.

/// </summary>

public void WhileLoop()

{

List<string> list = new List<string>();

int x = 0;

{

list.Add("Test" + x);

x++;

} while (x < 3000);

}

Then the For Loop:

/// <summary>

/// Loops through the loop until it reaches a count of 3000

/// </summary>

public void ForLoop()

{

List<string> list = new List<string>();

for (int i = 0; i < 3000; i++)

{

list.Add("Test" + i);

}

Now surprisingly, the while loop was faster in every circumstance that I ran it. I ran them both in different orders, and I also varied the size of the object that I was testing with. I also understand that this is a very simple way of testing, but it basically proves the performance for each of these methods. So far I found this pretty interesting, so next why not test a lambda expression versus a two different kinds of loops. Basically, I wanted to find the quickest way to search through a list.

Lambda Expression vs. ForEach Loop vs. For Loop

Using a Lambda Expression:

populatedList.Find(x => x == "Test2500");

Using a ForEach Loop:

foreach (string findString in populatedList)

{

if (findString == "Test2500")

{

return;

}

Using a For Loop:

for (int i = 0; i < ListLoop.Count; i++)

{

if (populatedList[i] == "Test2500")

{

return;

}

So this time, I found a definite difference in speed. The Lambda expression was a lot faster than looping through the list until I found what I wanted. Surprisingly though, using a for loop was quite significantly slower than the Lambda expression. Now I know the difference between these times is very small, but when you use these a lot in an application any small gain in performance can increase exponentially.

HashSet<T> vs. List<T>

For the next test, I wanted to test the performance of HashSet versus a Generic List. I kinda already knew that a HashSet would be faster because it has been built for high performance operations, but I wanted to see how much faster.

Surprisingly, when I had a small amount of records in my object that I was searching I only really received a small difference between the two. But, when I upped the records from 3000 to 13,000 and then searched through the records I noticed a definite difference. The HashSet was taking 0.0003ms to return results as opposed to the List which took about 0.2148ms. That's quite a difference!

Conclusion

One thing to bear in mind that there are a lot of factors involved in performance testing something like this, and also times and speed will vary from machine to machine. However, I can draw an overall conclusion based on the facts that these tests proved time and time again that certain classes were faster than the other. I am using Visual Studio 2008 and NUnit to run these tests.

So to finalize what I observed:

A While Loop is slightly faster than a For Loop when adding to a list.
A HashSet is a lot faster than a Generic List (Although it is not always applicable to use a hashset)
Using a Lambda expression is a lot faster than searching through a Generic List using a loop.

Also, for more information on Lambda expressions take a look at my other post that I wrote.
If anyone has any suggestions or techniques that they prefer to use then please give me a shout.

Useful SQL Script to generate Countries & US States

I'm currently working on a project where I need to quickly insert a list of Countries and Us States into a database table. This is not the first time that I've needed to have a useful script handy for this sort of thing. I had a quick look around the net and couldn't find exactly what I needed. So, I've put together two scripts, one to create a table of US States and one to create a table of Countries.

Download the two scripts:

Countries - here
US States - here

If you've got any useful SQL scripts like this please let me know and I'll add it to this list.

Basic Introduction To Writing Unit Tests With moq

What is mocking? Well....according to Wikipedia it is:

"In object-oriented programming, mock objects are simulated objects that mimic the behavior of real objects in controlled ways. A computer programmer typically creates a mock object to test the behavior of some other object"

In short, Mock objects are a great way to simulate an object that we need to work with. Sometimes we may also come across situations or states that are difficult to reproduce. Say for example we need to simulate a network error, or a specific error in our DB, with a mocking framework we can easily do this. Another great thing about mocking frameworks is whatever external data is being used won't be affected. We can simulate a DB call and not affect our DB at all. You can also write a mock for a piece of code that doesnt exist.

Why use Mocks

When writing unit tests, we only need to write tests that cover a specific area of code. The code under test or class under test may interact with other classes or external systems, but we only need to isolate the class that we are working with. Enter a mocking framework, this makes it a lot easier for us to re-use our mock objects and write great unit tests.

When I first started to get into TDD, it took me a while to get my head around mocking. Personally I feel that Moq is a really easy framework to use. That said, there are loads of other frameworks out there . For this example (and also because I have only worked with this framework), I'm going to use the Moq framework

Implementation

Moq is an open source framework and has adopted an API that tries to be both simple to learn and easy to use. The API also follows the arrange-act-assert style and relies heavily on .NET 3.5 features, such as lambdas and extension methods. The learning curve is quite easy, but you need to feel comfortable with using lambdas.

Let's say we need to mock the data layer for our example project.

First, lets set up our mock that we are going to use.

var _mock = new Mock<IBasketDal>();

Then we need to tell this mock what its going to do, and what it will return

_mock.Setup(x => x.GetCustomerTotal(It.IsAny<int>())).Returns(25.5);

In the above line of code, we are telling the framework to pass in any variable into the GetCustomerTotal method, and we are telling this method to return a value of 22. In this way, we never hit the database - our mock will intercept and tell the method to return the result that we chose. This way, we can test for certain scenarios easily. We don't have to mess with the data to get a certain circumstance to work, we just tell it what we want it to do! Simples!

We call our method and check that the result returned is correct.

DataAccess.Basket totals = _target.CalculateBasketTotals(1);

Assert.That(totals.Total, Is.EqualTo(25.5), "The basket totals did not add up correctly");

Conclusion

As you can see using a mocking framework is a great way to go about TDD. I hope this tutorial helped a bit with understanding the basics of writing mocks using Moq. It is a very basic introduction to Moq, but for more info please check out the website for more information.

Moq Details
Google repository
Clarius Consulting
Introduction to moq

Ive included a small demo project to go along with this post. In order to run this project, you will need to install nUnit and moq. You could also eaily adapt this to run with another testing framework.

Postmark - Email delivery for web apps

I recently stumbled across the following site and looked at some of their applications that they have on offer. One of the great tools that they offer is a tool called Postmark. Postmark helps deliver and track transactional emails. The service basically replaces using SMTP, and allows you to send mails and track statistics for emails sent, bounces and spam complaints. Its pretty awesome if you are a blogger like myself and need to track your emails easily and with less cost.

At the moment it is still currently in beta, although you can request and invite to start playing around with at this stage. It has full support for .Net as well as Ruby, Php, and Python among others. There is currently a github directory to download the .Net support library from. Another great feature of Postmark is that it has support for JSON.

Postmark removes the setup and server maintenance that would normally be associated with setting up something like this. Check it out. There is also some more info on their blog

Useful Lambda Expressions

A really useful built in feature of .Net is the Lambda expression. I've been using these for a while, but until I started looking into it, I never realized how useful these can actually be. There are loads of quick, nifty ways to get things done that might take twice as long if not using a lambda expression.

All lambda expressions use the lambda operator =>, which is read as "goes to". Sometimes these expressions look a little confusing, but once you understand the general use they are quite easy to read.

Lets take a look at how we traditionally found an item in a generic list:

List<Car> carColours = new List<Car>();

foreach (Car car in carColours)

{

if (car.Colour == "red")

{

return car.Colour;

}

The above code works, but lets try and make this sexy with a Lambda expression:

List<Car> carColours = new List<Car>();

carColours.FirstOrDefault(car => car.Colour == "Red");

So, let me explain the code above. Im using the lambda expression to search the list for the first value that has a colour of Red. In one line, I can now do what previously took me four. I also find that this is a lot easier to read. Here are some other useful expressions to use :-

1. Populate a new list with values that match

List<Car> matches = carColours.FindAll(val => val.Colour != "Red");

2. Another example of getting values from a list

var weightLessThanSix = carColours.TakeWhile(n => n.Weight < 6);

We could supply multiple parameters and return all numbers until a number is encountered whose value is less than its position.

var matches = carColours.TakeWhile((n, index) => n.Weight >= index);

3. Say for example I wanted to provide a cleaner way to declare a event handler.

This was the traditional way:

public void CreateControls()

{

DropDownList1.SelectedIndexChanged += new EventHandler(DropDownList1_SelectedIndexChanged);

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

// Do something

}

Which now becomes -

public void CreateControlsLambda()

{

DropDownList1.SelectedIndexChanged += (sender, e) => { Button1.Text = "Event Fired"; };

}

Much slicker!

4. Find the lowest or highest value in a list

decimal maxWeight = cars.Max(car => car.Weight);

decimal minWeight = cars.Min(car => car.Weight);

Or the weight between a range

decimal weightBetween = cars.FirstOrDefault(car => car.Weight < 9.0m).Weight;

As you can see, using lambda expressions can make your code a lot slicker and more readable. Some of the examples I have given are only really the tip of the iceberg when it comes to working with lambda expressions. If you have any examples that could be useful or any suggestions, please let me know and I'll add it to this list.

For some further reading check out:

http://blogs.msdn.com/ericwhite/pages/Lambda-Expressions.aspx

http://msdn.microsoft.com/en-us/library/bb397687.aspx

http://www.informit.com/articles/article.aspx?p=1245158&seqNum=4

Rendering a Usercontrol as a String for Webservices

I am currently working a project at work that requires us to use progressive enhancement so that our site is accessible to all users regardless of whether they have javascript enabled. One of the issues that we came across was keeping only one version of the html that we needed to use, regardless whether we were rendering our HTML client side or server side.

That way, we only ever had one version of the HTML and this also allowed us to use the same usercontrol server side. This also makes it easier for us to maintain the code.We decided to use usercontrols and just render them as a string to the client side, it is a sneaky approach but it seems to be working nicely.

In order to render your user control as a string, simply do the following.

public string RenderViewDdl(string path, List<string> data)
{

     Page pageHolder = new Page();
    ctlUserControl viewControl = (ctlUserControl)pageHolder.LoadControl(path);
    viewControl.Data = data;
     pageHolder.Controls.Add(viewControl);
     StringWriter output = new StringWriter();
     HttpContext.Current.Server.Execute(pageHolder, output, false);

   return output.ToString();
}

There is also a public variable on the usercontrol that allows you to set the data to display using these lines.

public partial class ctlUserControl : System.Web.UI.UserControl

{

public List<string> Data;

protected void Page_Load(object sender, EventArgs e)

{

ddlItems.DataSource = Data;

ddlItems.DataBind();

}

While working on this, one of my colleagues (Mr. Robin Osborne - thanks Robin!), came across an error while trying to render a usercontrol with an asp.net server side control (For example a drop down list).

This is the following error he received:

System.Web.HttpException: Error executing child request for handler System.Web.UI.Page'. ---> System.Web.HttpUnhandledException: Exception of type 'System.Web.HttpUnhandledException' was thrown. ---> System.Web.HttpException: Control 'ctl00_ddlCities' of type 'DropDownList' must be placed inside a form tag with runat=server.

1. In order to solve this problem, generate a new “page” class that inherits System.Web.UI.Page and overrides VerifyRenderingInServerForm to do nothing:

public class PageOverride : System.Web.UI.Page
{
public override void VerifyRenderingInServerForm(System.Web.UI.Control control)
{
}
}

2. When creating your Page holder, use the new page (PageOverride) instead of Page in your rendering:

Page pageHolder = new ctlUserControl.PageOverride();

This is sneaky and it works like a charm! I've included a small project that show this in action.

Download

Further reading
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

http://stevesmithblog.com/blog/render-control-as-string/

http://jamesewelch.wordpress.com/2008/07/11/how-to-render-a-aspnet-user-control-within-a-web-service-and-return-the-generated-html/

http://weblogs.asp.net/scottgu/archive/2006/10/22/Tip_2F00_Trick_3A00_-Cool-UI-Templating-Technique-to-use-with-ASP.NET-AJAX-for-non_2D00_UpdatePanel-scenarios.aspx

http://encosia.com/2008/02/05/boost-aspnet-performance-with-deferred-content-loading/

Improving the performance of your MVC application

In the constant quest to deliver faster, slicker websites it is important to try and improve the users experience. This could include improving the page load speed, smooth navigation or page accessibility.

While working on this site, I have tried to improve page loading speeds as much as possible. There are a lot of tricks that you can do to improve the speed of your site. I have constantly been learning new things by delving into the world of site performance.

These are a few of the steps that I took to speed up my site.

Caching the Datalayer

I would say that for this site, caching the data layer has improved my site speed the most. By using the built in caching option that comes with ASP.net it is really easy to do this. Check out this link for more info.

Output Caching

Output caching is another way to greatly increase the speed of your mvc application. It greatly cuts back on the amount of work your application has to do, and I've definitely noticed a big increase in speed since adding this to my site.

By adding:

[OutputCache(Duration = 86400, VaryByParam = "None")]

Check out this link for more details

Minify Js & CSS

Minification involves removing unnecessary characters from code to reduce its size. This reduction in size greatly improves load times. There are some great tools out there to use - JSMin, YUI Compressor, etc.

There are also loads of articles out there on how to minify your JS and CSS. If you need a bit of help, I have written a custom T4 template to do this on this site

Gzip Compress

I have tried to use Gzip compression as much as possible on this site. This is an awesome article that allows you to easily do this on an MVC site with the use of MVC attributes.

Use a Content Delivery Network

Serving your content from multiple worldwide servers allows much faster loads time on the user's side. These servers can be used to cache and deliver all types of content. On this site I am using the Google CDN to load my jQuery API. To do this, you simply need to replace your local version of jQuery with the one on the CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Google has support for loads of different javascript libraries. Microsoft also offers Microsoft AJAX CDN, which service you choose to go with is all up to you.

Combine Resources

Combining your resources into one file is another way to speed up your site. After some searching I came across this library called Combres for MVC.

I have recently added this functionality to my site and I'm giving it a trial run, but so far I have noticed decent results on different page speed analyzers. I might just keep it in there!

After updating the code as much as possible and following these rules, these are the before and after screen shots of the site speed.

Before:

After:

Its still not perfect, but as you can see this is a much better result.

Most of these techniques could also be used on sites that are not MVC sites. If you are a Firefox user, I recommend downloading and installing the page speed plugin. It is a great tool to help you identify areas in your site that need speeding up.

If you have any suggestions or tips that you would like to add to this, please drop me a mail. I am always keen to learn new techniques.

While working on this site, these are some of the links I picked up along the way:

http://codeclimber.net.nz/archive/2009/04/17/how-to-improve-the-performances-of-asp.net-mvc-web-applications.aspx

http://developer.yahoo.com/performance/rules.html

http://msdn.microsoft.com/en-us/magazine/cc163854.aspx#S10

Developing Applications for Windows 7

I've just got my hands on a shiny new computer, maxed out with new RAM and Windows 7.
So far I am very impressed with Windows 7, although it looks pretty similar to Vista, its a lot slicker and I can't really seem to find any faults just yet. I also find developing a breeze as it seems a lot smoother when building larger solutions in Visual Studio.

So, as with any new toy I decided it was time to get playing. I searched around and got my hands on the Windows 7 API code pack. There are some awesome new features in Windows 7, and this pack gives you access them. Jump Lists, Icon Overlay, Progress Bar, Tabbed Thumbnails, and Thumbnail Toolbars just to name a few. First off I started to look at Jump Lists. To open a Jump List, just right-click a program icon on the Windows 7 taskbar.

You can easily create these for your application and you can customize them too. There are
a few apps out there that take advantage of this, check out Google's Chrome for Example.

Right, lets get started with our app. First we need to add a reference to the
Microsoft.WindowsAPICodePack and the Microsoft.WindowsAPICodePack.Shell

If we want to create jump lists in an application add the following lines of code:

// Create the Category

JumpListCustomCategory customCategory = new JumpListCustomCategory("Resources");

JumpList jumpList = JumpList.CreateJumpList();
jumpList.AddCustomCategories(customCategory);

// Create the link to open
string systemFolder = Environment.GetFolderPath(Environment.SpecialFolder.System);

JumpListLink taskManager = new JumpListLink(Path.Combine(systemFolder, "taskmgr.exe"), "Task Manager");

// Add the link to the jumplist
jumpList.AddUserTasks(taskManager);

// Refresh the jump list
jumpList.Refresh();

The above code creates a category called Resources and a link under the category that points to the Windows Task Manager. Your jumplist can be customized to include any links you need or anything that enhances the users experience. Next, I wanted to take a look at overlay icons on the taskbar. Icon overlays are small images placed at the lower-left corner of the icon that represents a Shell object. They are normally added to an object's icon to provide some extra information.

In order to use overlay icons you need to add the following lines of code:

StockIcon stockIcon = new StockIcon(StockIconIdentifier.Error, StockIconSizes.ShellSize, false, false);

TaskbarManager.Instance.SetOverlayIcon(stockIcon.Icon, "");

I recommend downloading the Windows API code pack and having a look at the samples provided, they cover everything you need to know and have some pretty easy to follow examples. The API pack also has support for sensors and power management, so it's pretty cool if your PC has these capabilites built in. The pack also contains loads of other samples that will help you take advantage of the new features in Windows 7.

I've included a small solution file that showcases the different features that I've written about
in this post. It's not really a fully complete project, but it's a good start to get you developing with Windows 7 and WPF.

Download

For further reading check out these sites:
http://www.developer.com/net/article.php/3846211/Take-advantage-of-the-Windows-7-TaskBar-in-your-next-project.htm

http://www.codeguru.com/csharp/.net/net_general/tipstricks/article.php/c16621/

http://blogs.microsoft.co.il/blogs/sasha/archive/2009/02/16/windows-7-taskbar-overlay-icons-and-progress-bars.aspx

Toastify - Hotkeys for Spotify

Toastify is a great little app that allows you to add hot-keys to Spotify. If you haven't already heard of Spotify, it is a streaming player that allows you to listen to music for free.

I've been looking for a way to add hot-keys to Spotify for ages, and came across this slick application. It's written in C# and WPF.

From the site:

Toastify adds some missing functionallity to the Spotify client (Windows only). It shows a popup, toast style, dialog on track change and it allows you to use global hot keys for Play/Pause, Next, Previous etc.

It is fully configurable and uses an XML file to set the hot-keys. Although the keys that it comes with by default are pretty handy.

Check it out.

Vote for your favourite .NET DI (IoC) Framework

I've started to take a look at Dependency Injection Containers (IoC), mostly because we have started using them where I work and also just out of general interest and trying to get my mind around how they work.

From Wikipedia:

Inversion of control, or IoC, is an abstract principle describing an aspect of some software architecture designs in which the flow of control of a system is inverted in comparison to procedural programming. In traditional programming the flow is controlled by a central piece of code. Using Inversion of Control this central control as a design principle is left behind. Although the caller will eventually get its answer, how and when is out of control of the caller. It is the callee who decides how and when to answer. The principle of Inversion of Control is also known as the Hollywood Principle. Inversion of Control as a design guideline serves the following purposes:

There is a decoupling of the execution of a certain task from implementation.

Every system can focus on what it is designed for.

Every system does not make assumptions about what other systems do or should do.

Replacing systems will have no side effect on other systems.

During my investigations I came around a load of .Net IoC frameworks, a lot of them had their own pros and cons, and a lot of people were hard core supporters of certain frameworks. Currently where I work we have chosen to go with Castle Windsor, although on this website I am currently playing aroung with Ninject.

Most of these frameworks have the same common concepts, but I would like to find out what your favourite IoC frameworks are. Below is a voting panel, so please choose your favourite framework and feel free to comment on why you chose yours.

UPDATE: The voting has closed and this is how the results finished up.

For some further reading on this topics, these are some of the links I came across whilst researching this topic:

http://en.wikipedia.org/wiki/Inversion_of_Control http://www.hanselman.com/blog/ListOfNETDependencyInjectionContainersIOC.aspx http://www.martinfowler.com/articles/injection.html http://blog.ashmind.com/index.php/2008/08/19/comparing-net-di-ioc-frameworks-part-1 http://blog.ashmind.com/index.php/2008/09/08/comparing-net-di-ioc-frameworks-part-2

Thank you for your votes!

MVC HtmlHelper for Google Charts

Asp.net Mvc has an awesome little class called the HtmlHelper class. I have only recently started to get into creating custom HtmlHelpers, and I thought that creating a small Google charting helper would be a good place to start.

From the Microsoft MSDN site:
The HtmlHelper class provides a set of helper methods whose purpose is to help you create HTML controls programmatically. All HtmlHelper methods generate plain HTML and return the result as a string.

This is great if you need to create html that you are constantly reusing. For this example I am using the Google charting API. It allows you to dynamically generate charts and you don't need to download or install anything. There are loads of different charts that you can generate with the API including line charts, bar charts, pie charts and maps to name a few. In order to create a simple chart you need to use the following code:

Which will produce the following:

This is a good example to get started with, so lets get started. First, you need to create a new class, lets call it GoogleChart.

Next lets create the method that will accept some values and return the html we need as a string:

public static class GoogleChart

{

/// <summary>

/// Draws the chart.

/// </summary>

/// <param name="helper">The helper.</param>

/// <param name="chartType">Type of the chart.</param>

/// <param name="chartData">The chart data.</param>

/// <param name="chartSize">Size of the chart.</param>

/// <param name="chartLabel">The chart label.</param>

/// <returns></returns>

public static string DrawChart(this HtmlHelper helper, string chartType, string chartData, string chartSize, string chartLabel)

{

StringBuilder chartHtml = new StringBuilder("<img src='http://chart.apis.google.com/chart?chs=");

chartHtml.Append(chartSize);

chartHtml.Append("&chd=t:");

chartHtml.Append(chartData);

chartHtml.Append("&cht=");

chartHtml.Append(chartType);

chartHtml.Append("&chl=");

chartHtml.Append(chartLabel);

chartHtml.Append("' />");

return chartHtml.ToString();

}

If we need to call this code on our view we simply do the following.

The intellisense now picks up the values we added in our class, and returns the following code on the view:

And tada....

It's as simple as that and this functionality can be used all over your site. This helper can also be extended to accept different objects, depending on your model, and you may want to consider making this a little more strongly typed. Using the HtmlHelper class can be used in many different circumstances and really just makes life easier.

I've also created a small demo project that can be downloaded here.

Another good example using HtmlHelpers to create a slick little reCaptcha HtmlHelper can be found here.

Create Barcodes and Pdf's in C# with iTextSharp

An easy way to create PDF files is to use iTextSharp. It is an opensource PDF library that allows to you generate PDF files on the fly. It's great if you need to dynamically create a PDF using dynamic data. Also, I found that this is a great tool to easily make barcodes. You can create common barcodes such as Code 128, Code 39, EAN 128, and Code 39 ext.

You can download a copy of the library here. There are also a load of tutorials which can be located on the site.

I've included a copy of a small project that I've whacked together using the library which shows how to create a barcode in a PDF.

Minify Javascript files automatically with a T4 template

After my last post, I decided to dive a little more into T4 templates and learn more about them. After some goofing around, I decided to write a template that would minify js files automatically using the Yahoo YUI compressor for .net - http://www.codeplex.com/YUICompressor.

T4 is a code generator that is built into Visual Studio, so you can start playing straight away.

In order to use my T4 template, you simply need to download a copy of YUI compressor and add a reference in your project. You will also need to add a reference to the EcmaScript.Net.modified dll.

Once that is done, drop the template into the same folder as your js files. The template will automatically run once its dropped into the folder and it will spit out the minified version of your js. If you need to run it again after making any changes just right click and choose run custom tool, and it will update the files.

I know that there are a few other ways of minifying your javascript files, but for me this seemed like a nice simple, slick way to do it. Plus I also learnt a little about T4 templates. This is only the tip of the iceberg when it comes to T4 templates, and I reckon there is loads more power that can be harnessed from this cool little tool.

Download a copy of the project here

Some further reading:
http://www.olegsych.com/2008/09/t4-tutorial-creatating-your-first-code-generator/

http://blogs.msdn.com/webdevtools/archive/2009/01/29/t4-templates-a-quick-start-guide-for-asp-net-mvc-developers.aspx

Scott Hanselmans blog

Dot Less and Minifying Css

A colleague introduced me to this wicked library for css files. If you are lazy like me, this tool is a great way to use variables in your css code so that you dont end up repeating yourself. Taken directly from the site: http://www.dotlesscss.org/

"Write regular CSS with your .NET apps,
then add a few variables, mixins and nested rules.
less (pronounced dot-less) is a .NET port of the funky ruby LESS libary"

Here is an example of some code that could be used in your css files:

@brand_color: #4D926F;
 
#header {
  color: @brand_color;
}
 
h2 {
  color: @brand_color;
}

You could also us nested rules:

#header {
  color: red;
  a { 
       font-weight: bold; 
       text-decoration: none; 
    } 
}

Dot less also has other great features built in such as mixins and operations. The operations let you perform mathematical operations such as add, subtract, multiply etc. This is very exciting stuff for css files! I've had a great time playing around with this.

Implementing this in your solution is an easy process. Simply add a reference to the dotless.Core.dll. Then link like any style sheet in your page / Master page.

<link href="../css/screen.less"rel="stylesheet" type="text/css" media="screen" />

Update your web.config httphandlers.
<add type="dotless.Core.LessCssHttpHandler,dotless.Core" validate="false" path="*.LESS" verb="*"/>

Here are some more details from one of the creators of the tool:
http://enginechris.wordpress.com/2009/11/23/my-thoughts-on-using-dotless-and-the-less-syntax/

I also came across this awesome post by Phil Haack:
http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

He has created a T4 template to minify the created .less files into .css again. If you are lazy like me, this is a great way to do this automatically. Just drop the template into your relevant folder and it will pick up the .less files and minify them for you as .css files. It uses the YUI Compressor for .NET to compress the files.

Custom error pages in MVC

I was recently looking for an efficient method of redirecting users to an error page when an exception is thrown in an MVC application. A useful way of doing this is with the HandleErrorAttribute. In order to handle exceptions thrown by your action methods, you need to mark your method with this attribute. The HandleErrorAttribute also allows you to use a custom page for this error.

First you need to update your web.config file to allow your application to handle custom errors.

<system.web>
<customErrors mode="On" >
</system.web>

Then, your action method needs to be marked with the atttribute.

[HandleError]
public class HomeController : Controller
{
    [HandleError]
    public ActionResult ThrowException()
    {
        throw new ApplicationException();
    }
}

By calling the ThrowException action, this would then redirect the user to the default error page. In our case though, we want to use a custom error page and redirect the user there instead.So, let's create our new custom view page.

Next, we simply need to update the HandleErrorAttribute on the action method.

[HandleError]
public class HomeController : Controller
{
    [HandleError(View = "CustomErrorView")]
    public ActionResult ThrowException()
    {
      throw new ApplicationException();
    }
}

I found that I needed to update my web.config to also reflect the new custom error page.

<system.web>
<customErrors mode="On" defaultRedirect="CustomErrorView" >
</system.web>

You can place your custom error page in the same directory as your view, or you can place it in the Shared view folder, either way this should work.

Unfortunately the HandleErrorAttribute wont work with 404 errors and 500 page errors. Ah, but what happens if I need to display a custom page? No problem, we just need to update our web.config and create an action method to handle the view.

The controller:

public class ErrorController : Controller
    {
        // Return the 404 not found page 
       public ActionResult Error404()
      {
           return View();
      }

       // Return the 500 not found page 
       public ActionResult Error500()
      {
           return View();
      }
    }

This could also be done with a static page if needed:

There are a number of other ways of handling errors in MVC, but personally I have found this to work the best for me. You will want to add your own error logging on top of this, and this can be easily done in the controllers.

You can download a copy of the project here

MVC routing - 404 errors when directing away from home page

So, once I got the site up and running and I thought I was home and away.
My home page worked perfectly, but as soon as I clicked away from the home page I got a 404 error page. Now I assumed that the only reason I was getting this was because of the site being on a hosted site, and that the hosting site used IIS 6.

I googled around a little and found out that it had to do with the IIS settings on the hosted site. It worked perfectly locally until I deployed the site. A few of the search sites suggested changing the extension in the routing to .mvc, amongst other things.
Nothing seemed to work, except the following.

For me, the only thing that seemed to fix it was a changed to change the wildcard mapping for aspnet_isapi.dll in the IIS settings. Fortunately for me, my hosting company was kind enough to change the settings on my site for me. I'm not sure if your hosting company will do this for you, but this was an instant fix

This can be done by opening IIS manager, right clicking on your app, click on properties, then on configuration at the bottom. Click Insert and paste in
C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll - (You might want to click on the .aspx extension and click edit and copy the path of the aspnet_isapi.dll from there).

Another important thing to remember is to uncheck the "verify that file exists" checbox.

Once this was done everything seemed to run smoothly again. Awesome!

Bin deploying MVC

Welcome to my site! It has been developed using MVC 2 beta (Which I intend to update as soon as the full release comes out), Subsonic 3.0 and a SQL 2005 DB. Ive written everything from scratch and Ive still got a lot to learn about the cool features that are available in the new MVC 2.

So, I thought Id just detail some of the issues I encountered whilst setting up the site. On my local environment developing and setting up an MVC 2 app was a breeze. I was initially a bit worried about deploying my site to a hosting company and having it still work with the MVC 2 on it. My hosting company does provide an MVC 1 service which is great, but when I initially uploaded my site to the hosting provider I got an error asking for MVC version 2 dlls.

After some searching around I found this great article : http://haacked.com/archive/2008/11/03/bin-deploy-aspnetmvc.aspx

Although this was orginally written within MVC 1 in mind, it worked perfectly for me with MVC 2. All the changes involved were including the following files with my deployment:

System.Web.Mvc
System.Web.Routing
System.Web.Abstractions

In order to fix this problem, right click in your Solution Explorer and then expand the references. Choose the required Dll's and set "copy local" to true.

Finally, you can publish the application and it should work as expected!

So, even if your hosting company doesnt have MVC installed it isnt a problem.