Ten essential tools for building ASP.net website

Ten essential tools for building ASP.net website

Recently used asp.net to build a simple public Web site for the company (the site's address: http://superexpert.com/). In this process, we use a lot of free tools, it would be interesting to summarize the necessary tools for building asp.net Web sites. These tools support both ASP.net Web forms and asp.net MVC.

Performance Tools

Read two books on the front-end performance of the site (these two excellent books are: "High performance Web Sites" and "even faster web Sites", the author is Steve Souders), I am very sensitive to the front-end performance of the site. According to Steve Souders's golden rule of performance:

"Front-End performance should be optimized first, with 80% or more of the end-user response time spent on this." "You can use these tools to reduce the size of the 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 (the title of this article is: CSS sprites:image slicing ' s Kiss of Death, you can refer to: http://www.alistapart.com/articles/ Sprites), the first mention of CSS sprites. When you use sprites, you need to combine multiple images used by a site into a single image. Then, in a Web page, use CSS trickery to display specific "child images."

The main advantage of sprites is that when a Web page is displayed, it can effectively reduce the number of requests. Requesting a large image is much faster than requesting multiple small images. In general, the more resources (images, JavaScript files, CSS files) are transmitted over a network cable, the slower your site will be.

However, most people are reluctant to use sprites because it takes a lot of work to use sprites. You have to merge all the images and then write the appropriate CSS rules to display the child images. Microsoft's Sprite and Image optimization Framework allows us to save the tedious work. This frame can automatically merge images for you. In addition, the framework includes a asp.net Web Forms control and a asp.net MVC helper that makes it easier to display child images. You can download the Sprite and Image optimization Framework from CodePlex.

Download Address: http://aspnet.codeplex.com/releases/view/50869

The Sprite and Image optimization Framework was written by Morgan McClean. At Microsoft, his office is next to my office. Morgan is a very clever man, he is an intern in Canada. When he built this framework, we discussed the framework together. (As far as I know, he is continuing to develop this framework.) ）

Morgan has added some advanced features to the framework. For example, the Sprite and image optimization Framework supports "Image inlining". When you use "image inlining", the real image is stored in the CSS file. This is an example of "Image inlining":

. Home_stephenwalther_small-jpg { width:75px; height:100px; Background:url (Data:image/png;base64,ivborw0kggoaaaansuheugaaaesaaabkcaiaaabb1lpeaaaab Gdbtueaalgofptrkwaaacbjsfjnaachdwaaja8aap1saacbqaaafxkaaomlaaa85qaagcxzpiv3aaakl s+znfreaaaaasuvork5cyii=) no-repeat 0% 0%; }

The real image (in this case, a picture displayed on the homepage of the superexpert.com website) is stored in this CSS file. If you browse the Superexpert.com website, you will find that few independent images can be downloaded. In the screenshot below, all images with red frames are sprites with CSS:

Unfortunately, there are "traps" that need to be noted when using the Sprite and Image optimization Framework. In order to circumvent these "traps", there are still some work to do around. In my future articles, I will describe in detail what these "traps" are and how to circumvent these "traps".

2,microsoft Ajax Minifier

At any time, you should merge by "Far future header", Minimize (minify), compress and cache all JavaScript files and CSS files. Microsoft Ajax Minifier can make it easier to minimize JavaScript files and CSS files.

Please do not confuse the minimization with the compression. You need to do both of these jobs. According to Souders's point of view, after you compress a JavaScript file, you can also reduce the volume by 20% (average) by minimizing it.

When you minimize a JavaScript file, or a CSS file, you can use a variety of techniques to minimize the size of that file before compressing that file. For example, you can minimize a javascript by replacing a long JavaScript variable name with a short JavaScript variable name, and by removing the necessary whitespace and annotations. You can minimize CSS files in the same way, such as replacing a long color name (#fffff) with a short color name (#fff).

Microsoft Ajax Minifier was developed by Ron Logan, a Microsoft employee. Internally, several large Microsoft sites use this tool. We also use this tool in the ASP.net team. I think Ron can put this tool on the CodePlex so that everyone in the world can use this great tool. You can download this tool from the ASP.net ajax site:

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

The documentation for this tool can refer to: http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx

I created a setup program for Microsoft Ajax Minifier. When I created that installer, I also created a Visual Studio build task that made it easier to minimize JavaScript files and CSS files when you automatically build in Visual Studio. You can learn how to configure this build task with Ajax minifier Quick Start. (about "Ajax minifier Quick Start", you can refer to: HTTP://WWW.ASP.NET/AJAXLIBRARY/AJAXMINQUICKSTART.ASHX)

3,yslow

YSlow This tool is provided by Yahoo, it is a free Firefox extension. It allows you to test the front-end of your site.

YSlow's download Address: http://developer.yahoo.com/yslow/

This is the current test result for the "superexpert.com" website:

The overall score for the "superexpert.com" site is "B" (not perfect, but also good). YSlow This tool is not perfect. For example, although the Superexpert.com Web site uses Microsoft Ajax Content Delivery network with a JavaScript library (for example, JQuery) (About Microsoft Ajax content Delivery Network, specific can refer to: http://www.asp.net/ajaxlibrary/cdn.ashx), but still because of not using Content Delivery network and get "F".

Normal Running time

When a website is released, you definitely hope that your site will not encounter any problems, has been in the normal running state. Now, I use these tools to monitor the "superexpert.com" Web site to make sure it's in the normal running state.

4,elmah

ELMAH is the abbreviation for the Error Logging Modules and handlers for asp.net. Elmah can let you keep track of any errors that occur in your site, and in the future you can check them again. You can download elmah:http://code.google.com/p/elmah/from the official website of the Elmah project free of charge.

Elmah supports both asp.net Web Forms and asp.net MVC. You can configure Elmah to store a variety of different errors (XML files, event logs, Access databases, SQL databases, Oracle databases, or computer RAM.) You can also allow Elmah to email you the wrong message when the error occurs.

By default, in a Web site that is already installed Elmah, you can access Elmah by requesting a Elmah.axd page. This is the appearance of the Elmah page of the "superexpert.com" site (this page is password protected, because in an error message, some information that should be kept confidential may be leaked.) ）

If you click on an error message, you can see the original asp.net yellow screen error message (Although this error message will never be displayed to the real user).

I used the new ASP.net Package Manager NuGet (formerly called nupack) to install Elmah. For NuGet, you can refer to Scott Guthrie's blog: http://weblogs.asp.net/scottgu/archive/2010/10/06/ Announcing-nupack-asp-net-mvc-3-beta-and-webmatrix-beta-2.aspx. You can download nuget:http://nuget.codeplex.com/from CodePlex.

5,pingdom

I use Pingdom to verify that the superexpert.com Web site is always in the normal running state. You can register Pingdom by browsing the "pingdom.com" approach. You can use Pingdom to monitor a website for free.

On the Pingdom website, you can configure how often you want to ping your site. I verify once every 5 minutes whether the superexpert.com website is always in the normal running state. I use the Pingdom service to verify that it can retrieve the string "Contact Us" from the home page of that Web site.

If your site is down, you can configure Pingdom to send an alert via email, Twitter, SMS, or the iphone. I use this pingdom iphone app:

6,host Tracker

If your site is down, you need some way to determine if it's a local network problem, or for everyone, your site is down. I use a website called "host-tracker.com" to check the extent of a site's downtime.

This is the "superexpert.com" site from all over the world can ping through when the results of Host-tracker display:

Note: Host-tracker ping the "superexpert.com" site from 68 locations (including: Roubaix, France and Scranton, PA, etc.).

Debugging

The "debugging" I'm talking about here is a very wide range of meanings. When building a Web site, I use the following tools to verify that I didn't make a mistake.

7,html Spell Checker

Why does Visual Studio not have a spelling checker built in? I don't know--I think it's a little weird. But, luckily, ASP. NET team has written a free spelling checker that you can use on the ASP.net page.

I found a spelling checker to be essential. Think your spelling skills are absolutely perfect, just fooling yourself. When I actually run the spelling checker and find all my spelling mistakes, I'm anxious to find a seam to get in.

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

8,iis SEO Toolkit

If people can't find your site through Google, then it's better not to build the site. Microsoft offers an excellent IIS extension called "IIS Search Engine Optimization Toolkit" (about IIS Search Engine optimization Toolkit specific reference: http:// Www.iis.net/download/seotoolkit), you can use it to detect problems that might affect page rankings. You can also use it to quickly create a sitemap for your site, and you can submit this sitemap to Google or Bing. You can even generate a sitemap for a asp.net MVC web site.

This is an overview of the analysis report of the "superexpert.com" website:

Note: There are many problems with the "sueprexpert.com" website. For example, a hyperlink with 65 pages has expired. You can take a closer look at the details of these issues and find out where and when these problems occur.

9,linqpad

If your ASP.net site needs access to a database, then you should use LINQ to entities this Entity Framework. Using LINQ, some magical queries written in C # are converted into SQL queries. If you're not careful in writing LINQ queries, you're likely to inadvertently build a poorly performing web site.

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

You can use LINQPad to perform a LINQ to Entities query, and then look at the results. You can also use it to view the SQL statements executed against that database:

10,.net Reflector

I use. NET Reflector. NET Reflector every day. This tool lets you disassemble an assembly into C # or vb.net code. When you don't have real source code, you can use. NET Reflector to view the "source" of an assembly. You can download the free version of the. NET Reflector from Redgate's 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 the MVC Image Helper works, I use the. NET reflector to disassemble the Sprite and image optimization framework. This is part of the image helper class disassembly code:

Summarize

In this blog, we discussed a few of the tools I used to build the "superexpert.com" Web site. I use these tools to improve the performance of the "superexpert.com" site, to improve the "superexpert.com" Site seo (Search Engine optimization), to ensure "superexpert.com" The normal running time of the website, or debug the "superexpert.com" website. All the tools discussed in this blog are free. In addition, all of these tools support both ASP.net Web Forms and asp.net mvc.