Ten essential tools for building an ASP (-recommended)

A simple public Web site (the address of the site: http://superexpert.com/) was recently built for the company using ASP. In the process, we used a lot of free tools, and it would be interesting to summarize the tools necessary to build an ASP. These tools support both ASP. NET Web forms and ASP.

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:

"The front end performance should be optimized first, and the end user's response time is 80% or more spent on this." "You can use these tools to reduce the size of the images used by the ASP, as well as the volume of the JavaScript files, 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, for specific reference: http://www.alistapart.com/articles/ Sprites), the first mention of CSS sprites. When you use sprites, you need to combine multiple images of a website into a single image. Then, in a Web page, use CSS trickery to display a specific "sub-image."

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) that 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 sub-images. Microsoft's Sprite and Image optimization Framework allows us to eliminate these tedious tasks. This framework can automatically merge images for you. In addition, the 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

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 the 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 an "image inlining":

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

The real image (in this case, a picture displayed on the home page 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 following, all images with a red frame are sprites using CSS:

Unfortunately, there are some "traps" to note when using the Sprite and Image optimization Framework. In order to circumvent these "traps", there are some surrounding work to be done. In my later articles, I will elaborate on what these "traps" are, and how to circumvent these "traps".

2,microsoft Ajax Minifier

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

Please do not confuse the minimization with 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 reduce the size of that file as much as possible before compressing that file. For example, you can minimize a JavaScript by replacing long JavaScript variable names with short JavaScript variable names, and by removing the necessary whitespace and annotations. You can minimize CSS files in the same way, for example, by replacing long color names (#fffff) with short color names (#fff).

Microsoft Ajax Minifier was developed by Microsoft's staff Ron Logan. Internally, the tool is used by several large Microsoft sites. We also use this tool in the ASP. I think Ron can post this tool on CodePlex so that everyone in the world can use this great tool. You can download this tool from the ASP. NET AJAX site:

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

The documentation for this tool can be consulted: 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 makes it easier to minimize JavaScript files and CSS files when you build them automatically in Visual Studio. You can use Ajax minifier Quick Start to learn how to prepare this build task. (for "Ajax minifier Quick Start", 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: http://developer.yahoo.com/yslow/

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

The overall score for the "superexpert.com" site was "B" (not perfect, but good). YSlow This tool is not perfect. For example, although the Superexpert.com Web site uses the Microsoft Ajax content Delivery Network (for example, jQuery) of the supported JavaScript libraries (for Microsoft Ajax content Delivery Network, refer to: HTTP://WWW.ASP.NET/AJAXLIBRARY/CDN.ASHX), but still because the content Delivery network is not used to get "F".

Normal operating time

When a website is published, you certainly hope that your site will not encounter any problems and is always in a normal state of operation. Now, I use these tools to monitor the "superexpert.com" website to ensure that it is always in a normal state of operation.

4,elmah

ELMAH is an abbreviation for the Error Logging Modules and handlers for ASP. Elmah can let you record any errors that occur on your site, and in the future, you can re-examine these errors. You can download elmah:http://code.google.com/p/elmah/free of charge from the official website of the Elmah project.

Elmah supports both ASP. NET Web Forms and ASP. 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 ask Elmah to email you the wrong message when the error occurs.

By default, in a Web site where Elmah is already 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 in an error message, some information that should be kept confidential may be disclosed.) ）

If you click on an error message, you can see the original ASP. 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 site is always in the normal state of operation. You can register Pingdom by browsing the "pingdom.com" method. You can use Pingdom to monitor a website for free.

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

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

6,host Tracker

If your site is down, you need some way to tell 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" website from all over the world can be ping through the time, Host-tracker display the results:

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

Debugging

The "Debug" I'm referring to here is very broad in meaning. When building a website, I use these tools to verify that I did not make a mistake.

7,html Spell Checker

Why isn't there a spelling checker built into Visual Studio? I don't know--I think it's a little weird. Fortunately, however, the ASP. NET team has written a free spell checker that you can use on the ASP.

I found a spelling checker to be essential. Think your own spelling ability is absolutely perfect, just self-deception. When I really ran the spell checker and found all my spelling mistakes, I couldn't wait to find a ground seam.

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

8,iis SEO Toolkit

If people can't find your site through Google, it's better not to build this site. Microsoft has provided an excellent IIS extension, called "IIS Search Engine Optimization Toolkit" (for the IIS Search engine optimization Toolkit specifically refer to:/http Www.iis.net/download/seotoolkit), you can use it to detect problems that may affect page rankings. You can also use it to quickly create a sitemap for your site, and you can submit the Sitemap to Google or Bing. You can even generate a sitemap for an ASP. NET MVC site.

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

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

9,linqpad

If your ASP. NET site needs access to a database, then you should use the Entity Framework of LINQ to Entities. Using LINQ, some of the magical queries written in C # are converted into SQL queries. If you're not careful when writing LINQ queries, you're likely to build a poorly performing website unintentionally.

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 execute a LINQ to Entities query and see the results. You can also use it to view the SQL statements executed against that database:

10,.net Reflector

I use the. NET Reflector. NET Reflector tool every day to enable you to disassemble an assembly into C # or vb.net code. When you have no real source code, you can use. NET Reflector to view the "source" 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 disassemble the Sprite and image optimization framework. This is part of the disassembly code for the image helper class:

Summarize

In this blog, we discussed several tools that I used when I built the "superexpert.com" website. I use these tools to improve the performance of the "superexpert.com" website, improve the SEO of the "superexpert.com" website (Search Engine optimization), and make sure that "superexpert.com" Web site uptime, or debug the "superexpert.com" site. All the tools discussed in this blog are free. In addition, all of these tools support both ASP. NET Web Forms and ASP.

Ten essential tools for building an ASP (-recommended)