Top ten essential tools for building ASP. NET websites

Top ten essential tools for building ASP. NET websites

Recently I used ASP. NET to build a simple public website for my company (the address of this Website: http://superexpert.com /). In this process, we use a large number of free tools. It will be very interesting to summarize the necessary tools for building an ASP. NET Website. These tools support both ASP. NET Web Forms and ASP. net mvc.

Performance Tools

I have read two books about the front-end Performance of the website (these two excellent books are High Performance Web Sites and Even Faster Web Sites, by Steve Souders) in the future, I will be very sensitive to the front-end performance of my website. According to Steve Souders's prime performance rule:

"First, we should optimize the front-end performance. The end user's response time is 80% or more ." You can use the following tools to reduce the size of images used by ASP. NET applications, as well as the size of JavaScript files and CSS files.

1, Sprite and Image Optimization Framework

In an article in A List Apart (this article titled: CSS sprites: Image Slicing's Kiss of Death, For details, refer to: http://www.alistapart.com/articles/sprites), the first mention of CSS sprites. When using sprites, You need to combine multiple images used by a website into a single image. Then, on a Web page, use CSS trickery to display a specific "sub-image ".

Sprites can effectively reduce the number of requests when displaying a Web page. Requesting a large image is much faster than requesting multiple small images. Generally, the more resources (images, JavaScript files, and CSS files) transmitted over a network cable, the slower your website will be.

However, most people do not want to use sprites, because using sprites requires a lot of work. You must merge all the images and then write appropriate CSS rules to display the sub-images. Microsoft's Sprite and Image Optimization Framework saves us the effort. This frame can automatically merge images for you. In addition, this framework includes an ASP. NET Web Forms control and an ASP. net mvc helper, which makes it easier to display sub-images. You can download the Sprite and Image Optimization Framework from CodePlex.

: Http://aspnet.codeplex.com/releases/view/50869

Sprite and Image Optimization Framework is written by Morgan McClean. At Microsoft, his office is close to my office. Morgan is a very smart person. He is a Canadian intern. When he built the framework, we discussed the frame. (As far as I know, he is still developing this framework .)

Morgan adds some advanced features to this framework. For example, Sprite and Image Optimization Framework supports "image inlining ". When you use "image inlining", real images are stored in CSS files. This is an example of "image inlining:

Home_StephenWalther_small-jpg {   Width: 75px; Height: 100px; Background: url (data: image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAEsAAABkCAIAAABB1lpeAAAAB Bytes S + zNfREAAAAASUVORK5CYII =) no-repeat 0% 0%;   }

Real Images (in this example, an image displayed on the Superexpert.com website homepage) are stored in this CSS file. If you browse the Superexpert.com website, you will find that few independent images can be downloaded. In the following figure, all images with red boxes use CSS sprites:

Unfortunately, when using the Sprite and Image Optimization Framework, there are some "traps" that need to be noted. In order to bypass these "traps", there are still some peripheral work to be done. In my subsequent articles, I will detail what these "traps" are and how to bypass them ".

2. Microsoft Ajax Minifier

At any time, you should use "far future header" to merge, minimize (minify), compress and cache all JavaScript and CSS files. Microsoft Ajax Minifier makes it easier to minimize JavaScript and CSS files.

Please do not confuse the minimization and compression. You need to do both of these jobs. According to Souders, after you compress a JavaScript file, you can minimize the size of the file by 20% (average.

When you minimize a JavaScript file or a CSS file, you can use various techniques to minimize the size of the file before compressing it. For example, you can minimize a JavaScript by replacing the long JavaScript variable name with a short JavaScript variable name, and removing unnecessary blank and comments. You can minimize CSS files in the same way. For example, you can replace the long color name (# fffff) with the short color name (# fffff ).

Microsoft Ajax Minifier is developed by Microsoft employee Ron Logan. This tool is used internally by several large Microsoft websites. We also use this tool in the ASP. NET team. I think Ron can publish this tool to CodePlex so that everyone in the world can use this excellent tool. You can download this tool from the ASP. NET Ajax site:

: Http://www.asp.net/ajaxlibrary/Download.ashx

This tool documentation can refer to: http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx

I created an installer for Microsoft Ajax Minifier. When creating the installation program, I also created a Visual Studio generation task. When you automatically generate the program in Visual Studio, it makes it easier to minimize JavaScript and CSS files. You can use Ajax Minifier Quick Start to learn how to prepare this task. (For details about Ajax Minifier Quick Start, refer to: http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx)

3, ySlow

YSlow is a free Firefox extension provided by Yahoo. It allows you to test the front-end of your website.

Http://developer.yahoo.com/yslow/ of ySlow

This is the current test result of the "Superexpert.com" Website:

The overall score for "Superexpert.com" is "B" (not perfect, but not bad ). YSlow is not perfect. For example, although the Superexpert.com website uses the Microsoft Ajax Content Delivery Network (for Microsoft Ajax Content Delivery Network, refer to: http://www.asp.net/ajaxlibrary/cdn.ashx) that supports JavaScript libraries (for example: jQuery ), however, because the Content Delivery Network is not used, "F" is obtained ".

Normal running time

After a website is published, you certainly hope that your website will not encounter any problems and will remain in normal operation. Now, I use the following tools to monitor the "Superexpert.com" website and make sure it remains in normal operation.

4, ELMAH

ELMAH is short for Error Logging Modules and Handlers for ASP. NET. ELMAH allows you to record any errors on your website. In the future, you can re-check these errors. You can download ELMAH from the ELMAH official website for free at http://code.google.com/p/elmah /.

ELMAH supports both ASP. NET Web Forms and ASP. net mvc. You can configure ELMAH to store various errors (XML files, Event Logs, Access databases, SQL databases, Oracle databases, or computer RAM .) You can also ask ELMAH to email you the error message when an error occurs.

By default, in a website with ELMAH installed, you can access elmah by requesting the ELMAH. axd page. This is the appearance of the elmah page of the "Superexpert.com" website (this page is password-protected because some confidential information may be leaked in an error message .)

If you click an error message, you can see the original ASP. NET yellow screen error message (although this error message will never be displayed to real users ).

I used the brand new ASP. NET Package Manager NuGet (formerly called NuPack) to install ELMAH. For details about NuGet, refer to Scott Guthrie's blog: Workshop. You can download NuGet from CodePlex: http://nuget.codeplex.com /.

5, Pingdom

I use Pingdom to verify that the Superexpert.com website is always running. You can register Pingdom by browsing "Pingdom.com. You can use Pingdom to monitor a website for free.

On the Pingdom website, you can configure the frequency for Pingdom to ping your website. I verify that the Superexpert.com website is always running every five minutes. I use the Pingdom service to verify whether it can retrieve the string "Contact Us" from the home page of the website ".

If your website goes down, you can configure Pingdom to send an alert via email, Twitter, SMS, or iPhone. I am using this Pingdom iPhone application:

6. Host Tracker

If your website goes down, you need some methods to determine whether this is a problem with the local network or whether your website goes down for everyone. I use a website called Host-Tracker.com to check the extent to which a website is down.

This is the result of Host-Tracker when the "Superexpert.com" website can be pinged from all over the world:

Note: Host-Tracker can ping the "Superexpert.com" website from 68 locations (including Roubaix, France, Scranton, and PA.

Debugging

The "Debugging" I mentioned here has a wide range of meanings. When building a website, I use the following tools to verify that I have not made any mistakes.

7. HTML Spell Checker

Why does Visual Studio not have a built-in spelling checker? I don't know-I think this is incredible. However, fortunately, a free spelling checker is written by a former member of the ASP. NET team. You can use this spell checker on the ASP. NET page.

I found that a spelling checker is essential. Think that your spelling ability is perfect, just deceiving yourself. When I really run the spelling check tool and find all my spelling mistakes, I can't wait to find a place to crack.

The quickest way to add HTML Spell Checker Extension to Visual Studio is to select the "Tools" menu item in Visual Studio and click "Extension Manager ". Click "Online Gallery" and search "HTML Spell Checker ":

8. iis seo Toolkit

If people cannot find your website through Google, it is better not to build this website. Microsoft provides an excellent IIS extension called "IIS Search Engine Optimization Toolkit" (for details about the IIS Search Engine Optimization Toolkit, refer to: http://www.iis.net/download/seotoolkit ), you can use it to detect problems that may affect the page ranking. You can also use it to quickly create a sitemap for your website. You can submit This sitemap to Google or Bing. You can even generate a sitemap for an ASP. net mvc website.

This is an overview of the analysis report on the "Superexpert.com" Website:

Note: The "Sueprexpert.com" website has many problems. For example, the hyperlinks on 65 pages have expired. You can further view the details of these problems and find out the location and specific page of these problems.

9, LinqPad

If your ASP. NET Website needs to access a database, you should use the object framework of LINQ to Entities. Using LINQ, some magical queries written in C # are converted into SQL queries. If you are not careful when writing a LINQ query, you may accidentally build a website with poor performance.

LinqPad (LinqPad's official site: http://www.linqpad.net/) is a free tool that lets you experiment with your LINQ queries. It even supports Microsoft SQL CE 4 and Azure.

You can use LinqPad to execute a LINQ to Entities query and check the result. You can also use it to view the SQL statements executed on that database:

10,. NET Reflector

I use. NET Reflector every day .. NET Reflector this tool allows you to decompile an assembly into C # Or VB. NET code. When you do not have the real source code, you can use. NET Reflector to view the "source code" of an assembly ". You can download the free version of. NET Reflector from the Redgate Website: http://www.red-gate.com/products/reflector /.

I mainly use. NET Reflector to help me figure out how the code works internally. For example, to better understand how MVC Image helper works, I used. NET Reflector to decompile the Sprite and Image Optimization Framework. This is part of the disassembly code of the Image helper class:

Summary

In this blog, we discussed several tools I used to build the "Superexpert.com" website. I use these tools to improve the performance of the "Superexpert.com" website, improve the SEO (Search Engine Optimization) of the "Superexpert.com" website, and ensure the normal running time of the "Superexpert.com" website, or debug the "Superexpert.com" website. All the tools discussed in this blog are free of charge. In addition, all these tools support both ASP. NET Web Forms and ASP. net mvc.