10 Essential Tools for building ASP.NET Websites
http://stephenwalther.com/blog/archive/2010/11/22/10-essential-tools-for-building-asp-net-websites.aspx
10 Essential Tools for building ASP.NET Websites
I recently put together a simple public website created with ASP.NET for my company at Superexpert.com. I was surprised by the number of free tools that I ended up using to put together the website. Therefore, I thought it would be interesting to create a list of essential tools for building ASP.NET websites. These tools work equally well with both ASP.NET Web Forms and ASP.NET MVC.
Performance Tools
After reading Steve Souders two (very excellent) books on front-end website performance High Performance Web Sites and Even Faster Web Sites, I have been super sensitive to front-end website performance. According to Souders’ Performance Golden Rule:
“Optimize front-end performance first, that's where 80% or more of the end-user response time is spent”
You can use the tools below to reduce the size of the images, JavaScript files, and CSS files used by an ASP.NET application.
1. Sprite and Image Optimization Framework
CSS sprites were first described in an article written for A List Apart entitled CSS sprites: Image Slicing’s Kiss of Death. When you use sprites, you combine multiple images used by a website into a single image. Next, you use CSS trickery to display particular sub-images from the combined image in a webpage.
The primary advantage of sprites is that they reduce the number of requests required to display a webpage. Requesting a single large image is faster than requesting multiple small images. In general, the more resources – images, JavaScript files, CSS files – that must be moved across the wire, the slower your website.
However, most people avoid using sprites because they require a lot of work. You need to combine all of the images and write just the right CSS rules to display the sub-images. The Microsoft Sprite and Image Optimization Framework enables you to avoid all of this work. The framework combines the images for you automatically. Furthermore, the framework includes an ASP.NET Web Forms control and an ASP.NET MVC helper that makes it easy to display the sub-images. You can download the Sprite and Image Optimization Framework from CodePlex at http://aspnet.codeplex.com/releases/view/50869.
The Sprite and Image Optimization Framework was written by Morgan McClean who worked in the office next to mine at Microsoft. Morgan was a scary smart Intern from Canada and we discussed the Framework while he was building it (I was really excited to learn that he was working on it).
Morgan added some great advanced features to this framework. For example, the Sprite and Image Optimization Framework supports something called image inlining. When you use image inlining, the actual image is stored in the CSS file. Here’s an example of what image inlining looks like:
.Home_StephenWalther_small-jpg
{
width:75px;
height:100px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAIAAABB1lpeAAAAB
GdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKL
s+zNfREAAAAASUVORK5CYII=) no-repeat 0% 0%;
}
The actual image (in this case a picture of me that is displayed on the home page of the Superexpert.com website) is stored in the CSS file.
If you visit the Superexpert.com website then very few separate images are downloaded. For example, all of the images with a red border in the screenshot below take advantage of CSS sprites:
clip_image001
Unfortunately, there are some significant Gotchas that you need to be aware of when using the Sprite and Image Optimization Framework. There are workarounds for these Gotchas. I plan to write about these Gotchas and workarounds in a future blog entry.
2. Microsoft Ajax Minifier
Whenever possible you should combine, minify, compress, and cache with a far future header all of your JavaScript and CSS files. The Microsoft Ajax Minifier makes it easy to minify JavaScript and CSS files.
Don’t confuse minification and compression. You need to do both. According to Souders, you can reduce the size of a JavaScript file by an additional 20% (on average) by minifying a JavaScript file after you compress the file.
When you minify a JavaScript or CSS file, you use various tricks to reduce the size of the file before you compress the file. For example, you can minify a JavaScript file by replacing long JavaScript variables names with short variables names and removing unnecessary white space and comments. You can minify a CSS file by doing such things as replacing long color names such as #ffffff with shorter equivalents such as #fff.
The Microsoft Ajax Minifier was created by Microsoft employee Ron Logan. Internally, this tool was being used by several large Microsoft websites. We also used the tool heavily on the ASP.NET team. I convinced Ron to publish the tool on CodePlex so that everyone in the world could take advantage of it. You can download the tool from the ASP.NET Ajax website and read documentation for the tool here.
I created the installer for the Microsoft Ajax Minifier. When creating the installer, I also created a Visual Studio build task to make it easy to minify all of your JavaScript and CSS files whenever you do a build within Visual Studio automatically. Read the Ajax Minifier Quick Start to learn how to configure the build task.
3. ySlow
The ySlow tool is a free add-on for Firefox created by Yahoo that enables you to test the front-end of your website. For example, here are the current test results for the Superexpert.com website:
clip_image002
The Superexpert.com website has an overall score of B (not perfect but not bad). The ySlow tool is not perfect. For example, the Superexpert.com website received a failing grade of F for not using a Content Delivery Network even though the website using the Microsoft Ajax Content Delivery Network for JavaScript files such as jQuery.
Uptime
After publishing a website live to the world, you want to ensure that the website does not encounter any issues and that it stays live. I use the following tools to monitor the Superexpert.com website now that it is live.
4. ELMAH
ELMAH stands for Error Logging Modules and Handlers for ASP.NET. ELMAH enables you to record any errors that happen at your website so you can review them in the future. You can download ELMAH for free from the ELMAH project website.
ELMAH works great with both ASP.NET Web Forms and ASP.NET MVC. You can configure ELMAH to store errors in a number of different stores including XML files, the Event Log, an Access database, a SQL database, an Oracle database, or in computer RAM. You also can configure ELMAH to email error messages to you when they happen.
By default, you can access ELMAH by requesting the elmah.axd page from a website with ELMAH installed. Here’s what the elmah page looks like from the Superexpert.com website (this page is password-protected because secret information can be revealed in an error message):
clip_image003
If you click on a particular error message, you can view the original Yellow Screen ASP.NET error message (even when the error message was never displayed to the actual user).
I installed ELMAH by taking advantage of the new package manager for ASP.NET named NuGet (originally named NuPack). You can read the details about NuGet in the following blog entry by Scott Guthrie. You can download NuGet from CodePlex.
5. Pingdom
I use Pingdom to verify that the Superexpert.com website is always up. You can sign up for Pingdom by visiting Pingdom.com. You can use Pingdom to monitor a single website for free.
At the Pingdom website, you configure the frequency that your website gets pinged. I verify that the Superexpert.com website is up every 5 minutes. I have the Pingdom service verify that it can retrieve the string “Contact Us” from the website homepage.
clip_image004
If your website goes down, you can configure Pingdom so that it sends an email, Twitter, SMS, or iPhone alert. I use the Pingdom iPhone app which looks like this:
clip_image005
6. Host Tracker
If your website does go down then you need some way of determining whether it is a problem with your local network or if your website is down for everyone. I use a website named Host-Tracker.com to check how badly a website is down.
Here’s what the Host-Tracker website displays for the Superexpert.com website when the website can be successfully pinged from everywhere in the world:
clip_image007
Notice that Host-Tracker pinged the Superexpert.com website from 68 locations including Roubaix, France and Scranton, PA.
Debugging
I mean debugging in the broadest possible sense. I use the following tools when building a website to verify that I have not made a mistake.
7. HTML Spell Checker
Why doesn’t Visual Studio have a built-in spell checker? Don’t know – I’ve always found this mysterious. Fortunately, however, a former member of the ASP.NET team wrote a free spell checker that you can use with your ASP.NET pages.
I find a spell checker indispensible. It is easy to delude yourself that you are capable of perfect spelling. I’m always super embarrassed when I actually run the spell checking tool and discover all of my spelling mistakes.
The fastest way to add the HTML Spell Checker extension to Visual Studio is to select the menu option Tools, Extension Manager within Visual Studio. Click on Online Gallery and search for HTML Spell Checker:
clip_image008
8. IIS SEO Toolkit
If people cannot find your website through Google then you should not even bother to create it. Microsoft has a great extension for IIS named the IIS Search Engine Optimization Toolkit that you can use to identify issue with your website that would hurt its page rank. You also can use this tool to quickly create a sitemap for your website that you can submit to Google or Bing. You can even generate the sitemap for an ASP.NET MVC website.
Here’s what the report overview for the Superexpert.com website looks like:
clip_image010
Notice that the Sueprexpert.com website had plenty of violations. For example, there are 65 cases in which a page has a broken hyperlink. You can drill into these violations to identity the exact page and location where these violations occur.
9. LinqPad
If your ASP.NET website accesses a database then you should be using LINQ to Entities with the Entity Framework. Using LINQ involves some magic. LINQ queries written in C# get converted into SQL queries for you. If you are not careful about how you write your LINQ queries, you could unintentionally build a really badly performing website.
LinqPad is a free tool that enables you to experiment with your LINQ queries. It even works with Microsoft SQL CE 4 and Azure.
You can use LinqPad to execute a LINQ to Entities query and see the results. You also can use it to see the resulting SQL that gets executed against the database:
clip_image012
10. .NET Reflector
I use .NET Reflector daily. The .NET Reflector tool enables you to take any assembly and disassemble the assembly into C# or VB.NET code. You can use .NET Reflector to see the “Source Code” of an assembly even when you do not have the actual source code. You can download a free version of .NET Reflector from the Redgate website.
I use .NET Reflector primarily to help me understand what code is doing internally. For example, I used .NET Reflector with the Sprite and Image Optimization Framework to better understand how the MVC Image helper works. Here’s part of the disassembled code from the Image helper class:
clip_image013
Summary
In this blog entry, I’ve discussed several of the tools that I used to create the Superexpert.com website. These are tools that I use to improve the performance, improve the SEO, verify the uptime, or debug the Superexpert.com website. All of the tools discussed in this blog entry are free. Furthermore, all of these tools work with both ASP.NET Web Forms and ASP.NET MVC.
Let me know if there are any tools that you use daily when building ASP.NET websites.
If you liked this blog post then please Subscribe to this blog or Kick It for DotNetKicks.
posted on Monday, November 22, 2010 11:43 AM |
Comments
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Ryan Wentzel
on 11/22/2010 12:24 PM
Firebug always comes in handy.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Roland
on 11/22/2010 1:16 PM
Stephen is back and ready to write new good blog entries. That's great :D
There are 2 tools that are worth mentioning: Dot Less and Client Dependency Framework.
The former allows you to write your CSS code with variable, embedded rules, etc. You write your CSS rules in a programming way.
The latter combines your css and/or js files in one single file, compressed file that is cached. The tool targets ASP.NET stack, Web Forms or MVC.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Digiguru
on 11/22/2010 2:37 PM
Great post. Regarding ySlow, you can add an unlisted CDN to the cdn riule by following the steps in the ySlow FAQ.
http://developer.yahoo.com/yslow/faq.html#faq_cdn
Add Microsoft and sit back in glee as your ySlow gives you an almost perfect score :D
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Mads Kristensen
on 11/22/2010 10:14 PM
Also, for optimizing both sprite- and non-sprite images, use this free Visual Studio extension visualstudiogallery.msdn.microsoft.com/...
It uses SmushIt under the hood
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Naga Harish
on 11/22/2010 10:49 PM
Great work... you can also add firebug in the list
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Mojo
on 11/22/2010 10:57 PM
Great article!!!!! Much appreciated!
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Joe Chung
on 11/23/2010 12:20 AM
Fiddler and HTTP Watch are also indispensable tools for measuring Web site performance.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Lovett Standin
on 11/23/2010 12:38 AM
Hmmmm, a guy selling X says “X is the area to improve”.
I think you’ll find if you profile your apps, and they have been written correctly, your apps spend 80% of their time in the business or database layer.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Loginbd
on 11/23/2010 1:23 AM
oh my god ....Don't wanna learn more on ASP...Already head is full with PHP..Actually i am having little interest on ASP but i find it difficult for me....
http://www.loginbd.com
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Sylvain Audet
on 11/23/2010 5:51 AM
Great article Stephen and lots of interesting points but I don't like the first point.
Imho, in today's world, why would someone bother putting multiple images into one and even putting images within css file itself when ASP.NET provides a very simple and effective caching mecanism and average home bandwidth speed keeps increasing?
I believe this method is adding unnecessary extra development time that could be well spent otherwise.
Cheers from Chambly, QC! :)
Sylvain Audet
Senior .NET Developer
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Bruce Ferman
on 11/23/2010 7:47 AM
Add dynaTrace to the list, it's free and an excellent performance measuring, debugging, diagnostic, and benchmarking tool for IE.
http://ajax.dynatrace.com
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Rickj1
on 11/23/2010 9:26 AM
So with all this new spare time on your hands are you going to write ASP;NET 4.0 Unleashed a walkthrough building N-tier EF4 ASP.NET web site would be nice to have some guidance in since there is pretty much nothing out there the books out there on the subject are disappointing at best the ones I've read so far have give me good reason to keep working with classic ADO.NET and Linq to SQL
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Shariq Syed
on 11/23/2010 9:45 PM
Thanks a lot to share such very useful things. Again thanks.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Vishal Khanna
on 11/23/2010 10:56 PM
I am an open source fanatic, and thats why I really loved this blog post. Yslow and Pingdom are new stuff for me. Adding to that, ive been using the google seo toolkit and google analytics for quite some time, and thats a good stuff too.
Cheers
Vishal
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Haroon
on 11/24/2010 12:15 AM
Great article!!!!! Much appreciated!
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by new cars
on 11/24/2010 12:21 AM
Thanks for sharing this useful information! Hope that you will continue with the kind of stuff you are doing.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Chris Poulter
on 11/24/2010 12:45 AM
Great list of tools. Already use a few, will have to look at using the others.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by rtpHarry
on 11/24/2010 1:20 AM
Hmm only used three of those tools so far... time for me to get back on the new tech vibe?
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by SoftElegance
on 11/24/2010 4:20 AM
unfortunately HTML Spell Checker is not available for Visual Studio 2008, and looks like it use MS Word spelling dictionary.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by URACUT&PASTE
on 11/24/2010 4:28 AM
Nice cut and paste list, just like your book ASP.NET 3.5, what a waste of time trying to fix all the errors in that piece of garbage
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by software development
on 11/24/2010 5:19 AM
These days, there are lots of tools and applications being launched by various companies. Now, it is getting difficult to find one that can give best result by following your pre-defined criteria.
The tools listed in this articles are very useful, in fact i have tested and used most of them and very happy with what they are providing.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by James Chambers
on 11/24/2010 7:32 AM
Great list, thanks Stephen. I'm playing with the SIOF now...good stuff, and looking forward to your thoughts on the gotchas.
Congrats on the re-alignment with the company...was taken back a bit when the emails started bouncing. Glad to see you landing upright and all that. Best of luck.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Siva
on 11/24/2010 9:48 PM
Excellent listing.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by labatterie
on 11/25/2010 12:21 AM
A waste of time trying to fix all the errors in that piece of garbage ...
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by tugberk_ugurlu_
on 11/25/2010 12:35 PM
thanks a lot stephen. Very helpful post. Most of stuff is the ones I have already been using but http://www.linqpad.net/ is very perfect.
Also we could add NuGet here even though it comes with vs 2010.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by tugberk_ugurlu_
on 11/25/2010 2:19 PM
owww sorry stephen :( you mentioned of NuGet on the Elmah part. My bad !
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by tony
on 11/25/2010 5:27 PM
Very beautiful tools!!!
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by David
on 11/26/2010 8:46 AM
I might add that with ELMAH its possible to log that an event has occurred without throwing an exception. On my intranet site, I use this capture when a user has accessed the site using a browser other than IE 7 which is the current corporate standard. Once implemented, it allowed us to find about 20 users right off the bat that were still on IE 6.
'Here's the snippet at the heart of it all
Dim ExceptionMessage As New StringBuilder
ExceptionMessage.Append(NewStringBuilder.ToString)
Dim NewException As New NotSupportedException(ExceptionMessage.ToString)
Elmah.ErrorSignal.FromCurrentContext().Raise(NewException)
10 Essential Tools for building ASP.NET Websites
I recently put together a simple public website created with ASP.NET for my company at Superexpert.com. I was surprised by the number of free tools that I ended up using to put together the website. Therefore, I thought it would be interesting to create a list of essential tools for building ASP.NET websites. These tools work equally well with both ASP.NET Web Forms and ASP.NET MVC.
Performance Tools
After reading Steve Souders two (very excellent) books on front-end website performance High Performance Web Sites and Even Faster Web Sites, I have been super sensitive to front-end website performance. According to Souders’ Performance Golden Rule:
“Optimize front-end performance first, that's where 80% or more of the end-user response time is spent”
You can use the tools below to reduce the size of the images, JavaScript files, and CSS files used by an ASP.NET application.
1. Sprite and Image Optimization Framework
CSS sprites were first described in an article written for A List Apart entitled CSS sprites: Image Slicing’s Kiss of Death. When you use sprites, you combine multiple images used by a website into a single image. Next, you use CSS trickery to display particular sub-images from the combined image in a webpage.
The primary advantage of sprites is that they reduce the number of requests required to display a webpage. Requesting a single large image is faster than requesting multiple small images. In general, the more resources – images, JavaScript files, CSS files – that must be moved across the wire, the slower your website.
However, most people avoid using sprites because they require a lot of work. You need to combine all of the images and write just the right CSS rules to display the sub-images. The Microsoft Sprite and Image Optimization Framework enables you to avoid all of this work. The framework combines the images for you automatically. Furthermore, the framework includes an ASP.NET Web Forms control and an ASP.NET MVC helper that makes it easy to display the sub-images. You can download the Sprite and Image Optimization Framework from CodePlex at http://aspnet.codeplex.com/releases/view/50869.
The Sprite and Image Optimization Framework was written by Morgan McClean who worked in the office next to mine at Microsoft. Morgan was a scary smart Intern from Canada and we discussed the Framework while he was building it (I was really excited to learn that he was working on it).
Morgan added some great advanced features to this framework. For example, the Sprite and Image Optimization Framework supports something called image inlining. When you use image inlining, the actual image is stored in the CSS file. Here’s an example of what image inlining looks like:
.Home_StephenWalther_small-jpg
{
width:75px;
height:100px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAIAAABB1lpeAAAAB
GdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKL
s+zNfREAAAAASUVORK5CYII=) no-repeat 0% 0%;
}
The actual image (in this case a picture of me that is displayed on the home page of the Superexpert.com website) is stored in the CSS file.
If you visit the Superexpert.com website then very few separate images are downloaded. For example, all of the images with a red border in the screenshot below take advantage of CSS sprites:
clip_image001
Unfortunately, there are some significant Gotchas that you need to be aware of when using the Sprite and Image Optimization Framework. There are workarounds for these Gotchas. I plan to write about these Gotchas and workarounds in a future blog entry.
2. Microsoft Ajax Minifier
Whenever possible you should combine, minify, compress, and cache with a far future header all of your JavaScript and CSS files. The Microsoft Ajax Minifier makes it easy to minify JavaScript and CSS files.
Don’t confuse minification and compression. You need to do both. According to Souders, you can reduce the size of a JavaScript file by an additional 20% (on average) by minifying a JavaScript file after you compress the file.
When you minify a JavaScript or CSS file, you use various tricks to reduce the size of the file before you compress the file. For example, you can minify a JavaScript file by replacing long JavaScript variables names with short variables names and removing unnecessary white space and comments. You can minify a CSS file by doing such things as replacing long color names such as #ffffff with shorter equivalents such as #fff.
The Microsoft Ajax Minifier was created by Microsoft employee Ron Logan. Internally, this tool was being used by several large Microsoft websites. We also used the tool heavily on the ASP.NET team. I convinced Ron to publish the tool on CodePlex so that everyone in the world could take advantage of it. You can download the tool from the ASP.NET Ajax website and read documentation for the tool here.
I created the installer for the Microsoft Ajax Minifier. When creating the installer, I also created a Visual Studio build task to make it easy to minify all of your JavaScript and CSS files whenever you do a build within Visual Studio automatically. Read the Ajax Minifier Quick Start to learn how to configure the build task.
3. ySlow
The ySlow tool is a free add-on for Firefox created by Yahoo that enables you to test the front-end of your website. For example, here are the current test results for the Superexpert.com website:
clip_image002
The Superexpert.com website has an overall score of B (not perfect but not bad). The ySlow tool is not perfect. For example, the Superexpert.com website received a failing grade of F for not using a Content Delivery Network even though the website using the Microsoft Ajax Content Delivery Network for JavaScript files such as jQuery.
Uptime
After publishing a website live to the world, you want to ensure that the website does not encounter any issues and that it stays live. I use the following tools to monitor the Superexpert.com website now that it is live.
4. ELMAH
ELMAH stands for Error Logging Modules and Handlers for ASP.NET. ELMAH enables you to record any errors that happen at your website so you can review them in the future. You can download ELMAH for free from the ELMAH project website.
ELMAH works great with both ASP.NET Web Forms and ASP.NET MVC. You can configure ELMAH to store errors in a number of different stores including XML files, the Event Log, an Access database, a SQL database, an Oracle database, or in computer RAM. You also can configure ELMAH to email error messages to you when they happen.
By default, you can access ELMAH by requesting the elmah.axd page from a website with ELMAH installed. Here’s what the elmah page looks like from the Superexpert.com website (this page is password-protected because secret information can be revealed in an error message):
clip_image003
If you click on a particular error message, you can view the original Yellow Screen ASP.NET error message (even when the error message was never displayed to the actual user).
I installed ELMAH by taking advantage of the new package manager for ASP.NET named NuGet (originally named NuPack). You can read the details about NuGet in the following blog entry by Scott Guthrie. You can download NuGet from CodePlex.
5. Pingdom
I use Pingdom to verify that the Superexpert.com website is always up. You can sign up for Pingdom by visiting Pingdom.com. You can use Pingdom to monitor a single website for free.
At the Pingdom website, you configure the frequency that your website gets pinged. I verify that the Superexpert.com website is up every 5 minutes. I have the Pingdom service verify that it can retrieve the string “Contact Us” from the website homepage.
clip_image004
If your website goes down, you can configure Pingdom so that it sends an email, Twitter, SMS, or iPhone alert. I use the Pingdom iPhone app which looks like this:
clip_image005
6. Host Tracker
If your website does go down then you need some way of determining whether it is a problem with your local network or if your website is down for everyone. I use a website named Host-Tracker.com to check how badly a website is down.
Here’s what the Host-Tracker website displays for the Superexpert.com website when the website can be successfully pinged from everywhere in the world:
clip_image007
Notice that Host-Tracker pinged the Superexpert.com website from 68 locations including Roubaix, France and Scranton, PA.
Debugging
I mean debugging in the broadest possible sense. I use the following tools when building a website to verify that I have not made a mistake.
7. HTML Spell Checker
Why doesn’t Visual Studio have a built-in spell checker? Don’t know – I’ve always found this mysterious. Fortunately, however, a former member of the ASP.NET team wrote a free spell checker that you can use with your ASP.NET pages.
I find a spell checker indispensible. It is easy to delude yourself that you are capable of perfect spelling. I’m always super embarrassed when I actually run the spell checking tool and discover all of my spelling mistakes.
The fastest way to add the HTML Spell Checker extension to Visual Studio is to select the menu option Tools, Extension Manager within Visual Studio. Click on Online Gallery and search for HTML Spell Checker:
clip_image008
8. IIS SEO Toolkit
If people cannot find your website through Google then you should not even bother to create it. Microsoft has a great extension for IIS named the IIS Search Engine Optimization Toolkit that you can use to identify issue with your website that would hurt its page rank. You also can use this tool to quickly create a sitemap for your website that you can submit to Google or Bing. You can even generate the sitemap for an ASP.NET MVC website.
Here’s what the report overview for the Superexpert.com website looks like:
clip_image010
Notice that the Sueprexpert.com website had plenty of violations. For example, there are 65 cases in which a page has a broken hyperlink. You can drill into these violations to identity the exact page and location where these violations occur.
9. LinqPad
If your ASP.NET website accesses a database then you should be using LINQ to Entities with the Entity Framework. Using LINQ involves some magic. LINQ queries written in C# get converted into SQL queries for you. If you are not careful about how you write your LINQ queries, you could unintentionally build a really badly performing website.
LinqPad is a free tool that enables you to experiment with your LINQ queries. It even works with Microsoft SQL CE 4 and Azure.
You can use LinqPad to execute a LINQ to Entities query and see the results. You also can use it to see the resulting SQL that gets executed against the database:
clip_image012
10. .NET Reflector
I use .NET Reflector daily. The .NET Reflector tool enables you to take any assembly and disassemble the assembly into C# or VB.NET code. You can use .NET Reflector to see the “Source Code” of an assembly even when you do not have the actual source code. You can download a free version of .NET Reflector from the Redgate website.
I use .NET Reflector primarily to help me understand what code is doing internally. For example, I used .NET Reflector with the Sprite and Image Optimization Framework to better understand how the MVC Image helper works. Here’s part of the disassembled code from the Image helper class:
clip_image013
Summary
In this blog entry, I’ve discussed several of the tools that I used to create the Superexpert.com website. These are tools that I use to improve the performance, improve the SEO, verify the uptime, or debug the Superexpert.com website. All of the tools discussed in this blog entry are free. Furthermore, all of these tools work with both ASP.NET Web Forms and ASP.NET MVC.
Let me know if there are any tools that you use daily when building ASP.NET websites.
If you liked this blog post then please Subscribe to this blog or Kick It for DotNetKicks.
posted on Monday, November 22, 2010 11:43 AM |
Comments
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Ryan Wentzel
on 11/22/2010 12:24 PM
Firebug always comes in handy.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Roland
on 11/22/2010 1:16 PM
Stephen is back and ready to write new good blog entries. That's great :D
There are 2 tools that are worth mentioning: Dot Less and Client Dependency Framework.
The former allows you to write your CSS code with variable, embedded rules, etc. You write your CSS rules in a programming way.
The latter combines your css and/or js files in one single file, compressed file that is cached. The tool targets ASP.NET stack, Web Forms or MVC.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Digiguru
on 11/22/2010 2:37 PM
Great post. Regarding ySlow, you can add an unlisted CDN to the cdn riule by following the steps in the ySlow FAQ.
http://developer.yahoo.com/yslow/faq.html#faq_cdn
Add Microsoft and sit back in glee as your ySlow gives you an almost perfect score :D
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Mads Kristensen
on 11/22/2010 10:14 PM
Also, for optimizing both sprite- and non-sprite images, use this free Visual Studio extension visualstudiogallery.msdn.microsoft.com/...
It uses SmushIt under the hood
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Naga Harish
on 11/22/2010 10:49 PM
Great work... you can also add firebug in the list
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Mojo
on 11/22/2010 10:57 PM
Great article!!!!! Much appreciated!
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Joe Chung
on 11/23/2010 12:20 AM
Fiddler and HTTP Watch are also indispensable tools for measuring Web site performance.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Lovett Standin
on 11/23/2010 12:38 AM
Hmmmm, a guy selling X says “X is the area to improve”.
I think you’ll find if you profile your apps, and they have been written correctly, your apps spend 80% of their time in the business or database layer.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Loginbd
on 11/23/2010 1:23 AM
oh my god ....Don't wanna learn more on ASP...Already head is full with PHP..Actually i am having little interest on ASP but i find it difficult for me....
http://www.loginbd.com
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Sylvain Audet
on 11/23/2010 5:51 AM
Great article Stephen and lots of interesting points but I don't like the first point.
Imho, in today's world, why would someone bother putting multiple images into one and even putting images within css file itself when ASP.NET provides a very simple and effective caching mecanism and average home bandwidth speed keeps increasing?
I believe this method is adding unnecessary extra development time that could be well spent otherwise.
Cheers from Chambly, QC! :)
Sylvain Audet
Senior .NET Developer
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Bruce Ferman
on 11/23/2010 7:47 AM
Add dynaTrace to the list, it's free and an excellent performance measuring, debugging, diagnostic, and benchmarking tool for IE.
http://ajax.dynatrace.com
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Rickj1
on 11/23/2010 9:26 AM
So with all this new spare time on your hands are you going to write ASP;NET 4.0 Unleashed a walkthrough building N-tier EF4 ASP.NET web site would be nice to have some guidance in since there is pretty much nothing out there the books out there on the subject are disappointing at best the ones I've read so far have give me good reason to keep working with classic ADO.NET and Linq to SQL
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Shariq Syed
on 11/23/2010 9:45 PM
Thanks a lot to share such very useful things. Again thanks.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Vishal Khanna
on 11/23/2010 10:56 PM
I am an open source fanatic, and thats why I really loved this blog post. Yslow and Pingdom are new stuff for me. Adding to that, ive been using the google seo toolkit and google analytics for quite some time, and thats a good stuff too.
Cheers
Vishal
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Haroon
on 11/24/2010 12:15 AM
Great article!!!!! Much appreciated!
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by new cars
on 11/24/2010 12:21 AM
Thanks for sharing this useful information! Hope that you will continue with the kind of stuff you are doing.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Chris Poulter
on 11/24/2010 12:45 AM
Great list of tools. Already use a few, will have to look at using the others.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by rtpHarry
on 11/24/2010 1:20 AM
Hmm only used three of those tools so far... time for me to get back on the new tech vibe?
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by SoftElegance
on 11/24/2010 4:20 AM
unfortunately HTML Spell Checker is not available for Visual Studio 2008, and looks like it use MS Word spelling dictionary.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by URACUT&PASTE
on 11/24/2010 4:28 AM
Nice cut and paste list, just like your book ASP.NET 3.5, what a waste of time trying to fix all the errors in that piece of garbage
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by software development
on 11/24/2010 5:19 AM
These days, there are lots of tools and applications being launched by various companies. Now, it is getting difficult to find one that can give best result by following your pre-defined criteria.
The tools listed in this articles are very useful, in fact i have tested and used most of them and very happy with what they are providing.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by James Chambers
on 11/24/2010 7:32 AM
Great list, thanks Stephen. I'm playing with the SIOF now...good stuff, and looking forward to your thoughts on the gotchas.
Congrats on the re-alignment with the company...was taken back a bit when the emails started bouncing. Glad to see you landing upright and all that. Best of luck.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by Siva
on 11/24/2010 9:48 PM
Excellent listing.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by labatterie
on 11/25/2010 12:21 AM
A waste of time trying to fix all the errors in that piece of garbage ...
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by tugberk_ugurlu_
on 11/25/2010 12:35 PM
thanks a lot stephen. Very helpful post. Most of stuff is the ones I have already been using but http://www.linqpad.net/ is very perfect.
Also we could add NuGet here even though it comes with vs 2010.
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by tugberk_ugurlu_
on 11/25/2010 2:19 PM
owww sorry stephen :( you mentioned of NuGet on the Elmah part. My bad !
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by tony
on 11/25/2010 5:27 PM
Very beautiful tools!!!
Gravatar
# re: 10 Essential Tools for building ASP.NET Websites
Posted by David
on 11/26/2010 8:46 AM
I might add that with ELMAH its possible to log that an event has occurred without throwing an exception. On my intranet site, I use this capture when a user has accessed the site using a browser other than IE 7 which is the current corporate standard. Once implemented, it allowed us to find about 20 users right off the bat that were still on IE 6.
'Here's the snippet at the heart of it all
Dim ExceptionMessage As New StringBuilder
ExceptionMessage.Append(NewStringBuilder.ToString)
Dim NewException As New NotSupportedException(ExceptionMessage.ToString)
Elmah.ErrorSignal.FromCurrentContext().Raise(NewException)
Comments