SSW Rules to Better Websites - Development

After adding a rule on aspx page - what are the steps to do?

In order to keep the rule you add is healthy and doesn't has any grammar or spelling mistake, you should follow the below steps once you finish adding a rule on an aspx page:

1. Check the rule in MS Word to see if it has spelling or grammar mistakes
2. Run Link Auditor and Code Auditor on that page
3. Check the report and fix the error
4. Check in the page in TFS and repeat step 2 and 3 until Link Auditor and Code Auditor get all green ticks

Is your website designed to improve your Google Ranking?

Google is by a country mile the most popular search engine in the world. It's popular because it seems to rank pages so accurately and quickly time and time again. The secret to its success is its top secret PageRank Algorithm. Google developed its page ranking system in an effort to increase the quality of search results and has left all of its competitors for dead. As a result search engine optimization (SEO) gurus are always looking to find new ways to increase their Google rankings. As we all know, a website is a pretty nifty thing to have for a myriad of different reasons. But the truth is that it's worth is derived from the people that surf it, and if no one is surfing it, then it becomes useless. So who's the biggest website referrer? The answer is Google in almost every case.

So design your website with this in mind. In the eyes of a search engines, there are good and bad ways that you can design your website. Here's a list of suggestions to improve your Google ranking and other search engine optimization tips

Is your website structured?

I think the following structure allows you to keep your website clean of clutter:

• /Images - for all static images
• /Images/Dynamic - for all images used in dynamically generated pages
  NOTE: the reason we use two images directories is so we can exclude images used by dynamically generated pages from our link checking program. This is so we can work out the TRUE orphan images (and believe me, like coat-hangers they multiply quickly ...)
• /Includes - for all include files
• /Bin - for mdb's, dll's and udl's
• /Shop - for the shopping basket and related pages
• /Clients - for the client login page and related pages
• /Reports - for any SQL Server Reporting Services
• /zsMaintenance - for the administration section to modify web site settings
• /zsValidate - for all web server status and validation checks

The root directory should be clean, having only:

• default (.aspx, .asp, .htm)
• global.asa
• application.sln
   

Do all your employees know the quickest way to fix small web errors?

Firstly, I am appalled at how many companies I see that do NOT use a GUI for editing HTML pages. They use some text editor to get their HTML perfect. In addition the Mary from Marketing doesn't change intranet pages herself. She sends text changes she wants to the control freaks that run the web site.

Imagine this scenario... Mary notices a small error on a page in her intranet http://Intranet/Marketing/PressReleaseStandard.aspx She is a good employee... She fires up an email and reports the spelling error to info@s*w.com.au. As she sends it she says to herself "That it took more time to report the error than it would have taken me to fix it".

Well this should NEVER be the case if you have IE6 or IE7 and Microsoft Expression Web installed. IE allows the current page to be modified by loading up the source file in Microsoft Expression Web. That means that making quick changes to your website are truly just a few clicks away. Microsoft Expression Web will take a web address like http://intranet/marketing/PressReleaseStandard.aspx and opens the actual source code file (not the HTML output), if the website is a local network shared directory.

IMPORTANT: When using this function to edit pages always make sure the page is being viewed from an intranet server, eg 'bee'. If the page is being viewed on an external server, (eg. http://www.ssw.com.au), then Microsoft Expression Web will have problems capturing the server side script. This missing server side script will automatically be substituted for HTML, which will create errors when trying to save. Potentially loosing all the updated data.

Note: To be able to edit pages through Microsoft Expression Web the file extension must be associated with Microsoft Expression Web. The steps to do this are:

1. Create a new text file
2. Change the extension from .txt to .aspx or .htm (depending if your website is in .NET)
3. Right click and choose "Open With" and "Choose Program..."
4. Select "Microsoft Expression Web" and tick "Always use the selected program to open this kind of file"
5. Click OK

Figure: First you need to make Microsoft Expression Web the default for .aspx files

Now you need to add the edit icon to your IE6 or IE7 toolbar. Once this has been added those small changes that you need to make to your website will only be one click away.

Figure: Now you can open the web page with Microsoft Expression Web automatically

Tip for clean HTML: If you use Microsoft Expression Web (was FrontPage) as your editor, and you copy and paste formatted text (especially from Microsoft Word) into Microsoft Expression Web, it will paste in unwanted tags as it intelligently (joke) decides to keep the formatting. If your site uses CSS for formatting this is going to cause problems. Therefore always paste in unformatted text.

Figure: Original .aspx file with one click editing

Figure: Rendered HTML file from original .aspx file

NOTE to Administrators: If your employees are only able to edit pages in their rendered form (HTML file that is rendered from the original file), your FrontPage Server Extensions may have become corrupt. To resolve this problem remove and reinstall FrontPage Server Extensions from IIS using Windows Setup in Add/Remove Programs. After completing this it is important to configure and extend the FrontPage Server Extensions on any web that is required to be accessed through Microsoft Expression Web.  You may also need to Recalculate your web and Tighten Security by running the Detect and Repair option on the Check Server Health administration page.

Figure: Error when installing FrontPage Server Extension

1. run regedit.exe
2. go to KEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\
3. delete pendingfilerenameoperations
                    

Who tells you about bad links - customers or an automated program?

Many webmasters work with sites that have grown large over time and have consequently become difficult to maintain. They fix problems as customer report bugs. A better approach is to use a utility that will analyze your whole site and report any problems. Details

Do you run load tests on your website?

Once you have a website up and running, it is important to make sure that it keeps running under load. Local testing of the website will not always reveal the latent problems in the website when it is subjected to thousands of users. Typical issues that result from inadequate load testing are:

• 503 Service Is Temporarily Unavailable
• Very slow load times
• Application Crashes due to:
  • Insufficient resources - so application pools are recycled
  • Too many concurrent users causing race conditions
  • Too many users trying to connect to the database

Load Tests help you avoid these issues by prempting them before you go live. Some issues might be resolved by getting a better web server, while others might require code changes and optimizations.

In Visual Studio 2005 - Software Testers Edition, there is a built in Test Project to conduct load testing.

1. From the Test menu select New Test
2. Select Web Test and Create a new Test Project
   
3. Name the Test Project <Namespace>.WebUI.Tests
4. An Internet Explorer window will open with a recorder toolbar. Navigate to the web pages that need to be Load Tested
   
5. Click Stop when you are finished recording the pages to be tested
6. Click the Run button to make sure the tests run
   
7. Add a new Load Test
   
8. Follow the Load Test Wizard:
   • Load Pattern - Define the number of users hitting the site
   • Test Mix - Select the web test you recorded earlier
   • Browser Mix - Specify different types of browsers (leave as default)
   • Network Mix - Specify connection speeds of users (leave as default)
9. Click Finish
10. Click Run to run the load test
    
11. This will kick off the load test and show a live graph of user load, requests per second and response time

Do you have a Validation Page for your web server?

How can you know that all components are working correctly on your site? We believe it is vitally important to have a 'Validate Setup' page. This page will check the server and make sure:

• all the dlls are present (and registered for COM ones)
• all the web services are working
• all the databases are alive, etc.

You would be surprised how many dependencies a large webpage can have.The advantage of this page is if you ever need to redeploy your application on another server or you have some pages that are just not working as planned you can load up this page and get a quick diagnostics of your website.

Figure: Automatically validating our website

Figure: One of the components on this web site is down

See SSW Rules - Do you have a zsValidate page to test your website dependencies?

Do you make your site so it is easy to maintain?

If you have database driven pages on your website, you need a way of updating the data quickly and easily. Each page should have an 'Edit' link at the bottom, which is only visible when the site is running internally, that takes you directly to the page for editing the content on that page.

Figure: Embedded links allow SSW Employees to maintain testimonial entries easily

We also have a section of our website for automatically validating the web server settings, checking for broken links, validating data, setting configuration options and for checking that all necessary COM components and other dependencies are installed and working. Details

Do you synchronize files and folders using FTPSync or Beyond Compare?

An ftp site is just a copy of what you've got locally. Using a "dumb" ftp program allows you to update files you remember have changed, but that's not very efficient. FTP Sync and Beyond Compare are ftp programs that compare all the files on the web server to a directory on a local machine. Once FTPSync or Beyond Compare has completed an analysis of the files on the web server, it will compare things like date updated and file size and report which file is newer and what files will be overridden by uploading or downloading. We ONLY make changes on the local machine, so we can always upload files from the local machine to the web server.

This process allows you to keep a local copy of your live website on you machine - a great backup as a side effect.

Whenever you make changes on the web-site, as soon as they are approved they should be uploaded. You should tick the box that says 'sync sub folders', but when you click sync be careful to check any files that may be marked for a reverse sync. You should reverse the direction on these files. For most general editing tasks, changes should be uploaded as soon as they are done. Don't leave it until the end of the day. You won't be able to remember what pages you've changed. And when you upload a file, you should synch EVERY file in that directory. It's highly likely that un-synch'ed files have been changed by someone, and forgotten to be uploaded. And make sure that deleted folders in local server are deleted in remote server.

If you are working on some files that you do not want synced then put a _DoNotSyncFilesInThisFolder_XX.txt file in the folder. (Replace XX with your initials.) So if you see files that are to be synced (and you don't see this file) then find out who did it and tell them to sync. The reason you have this txt file is so that people don't keep telling the web master about the unsynced files.

NOTE: Immediately before deployment of an ASP.NET 2.0 application with FTPSync, you should ensure that the application compiles - otherwise it will not work correctly on the destination server (even though it still works on the development server).

Do you use a staging server?

After you've done your work locally using TFS, upload the site to a staging server and send an internal "Test Please" pointing to it. At SSW we use http://mockup.us.ssw.com.au/.

Client then can review the site on this URL too. Once approved, simply sync the website to the live server.

Do you always use query strings?

When you build a web application, any dynamic page you think a user may wish to bookmark directly should be controlled through querystring values rather than form values. In other words, search mechanisms should use the HTTP GET Request and Querystring values, rather than a POST with Form values. This allows:

• Bookmarking of the pages
• Gives the user to the ability to change the querystring values in the address bar, rather than having to go back to the input form.

Figure: The URL should always have all the parameters the user enters. Here Google is a good example.

You may hear that query strings are bad and they leave you wide open to SQL Injection Attacks (especially when you use SQL statements in the URL). I don't subscribe to the security issues being the determining factor... if I am determined enough, I can write a little application to send POST data to the webpage instead of in the query string. Both methods are open to SQL injection and invalid parameters, so you need to code to prevent that either way.

The bottom line is that if you are not giving appropriate parameters in the query string then you are reducing functionality.

Note: We all agree bookmarks are useful - it's the same for query strings.

Do you restrict your web pages to a reasonable size?

Web page size is an important factor. You want your page to look really good and have lots of nice looking images and large detailed backgrounds BUT this all comes at a cost. Not everyone is on broad band Internet and not everyone is prepared to wait for a large page to load. On average you should not have a web page that is over 101k in size. (This includes everything that a user has to load on that page. i.e. images, html, etc.)

It's also good practice to keep your pages less than 101k because that is the size of the Google cache. See our Rules To Better Google Rankings for more information.

Using Flash is a great way of having a visually intense web sites small enough for people to download. But if you wish to go down this alley, you must have an alternative site because not everyone can see flash on their browser. In addition Google doesn't index flash websites. See our Rules To Better Google Rankings

Only have large file sizes when you know that users will be expecting to download a large file (for example, product documentation)

Do you use a stats program?

Site Tracking is an important part of any active web page. You need to be able to see what your visitors are viewing, what they aren't, what they spend large amount's of time on, what pages are causing errors, what pages are directing visitors to you, etc. All this information help you better structure your site to what your visitors like. It also allows you to compare site traffic from one month to another.

I think that the following reports are most useful:

• Which are your most popular pages
• Which sites are referring the most hits to you
• Which key words are bring users to your site
• If you have downloads, which are the most popular

If you're looking to decide which web stats program to use, we've tested a few so check out the web stats programs we recommend. Depending on your stats software, you can even use them to get the web reports emailed to you on a regular basis.

Do you build criteria by using a where clause?

It is very common to come up with ways to filter data.
As an example you could do it like this.

ClientSearch.aspx?Client.ClientID='ssw'&Client.CoName='S'

>This allows you to easily extract fields and values, but it only works for the fields you hardcode. You could get around it by writing complex code to build a sql query, or ignore the ones that don't match.

But this gives exact matches. e.g.

ClientID=ssw

ClientID like '%ssw%'

ClientSearch.aspx?Client.ClientID=ssw&Client.ClientID.SearchMode=OR

But why do this when a WHERE clause in SQL can do all this
e.g.

ClientSearch.aspx?Where=Client.ClientID%20like%20'%ssw%'

Try this - ClientSearch.aspx?Where=Client.ClientID%20like%20'%ssw%'

The Pros for do this are:

• Quicker development time.
• SQL is very powerful - say I want to JOIN another table in the WHERE, I could use an IN statement and do a sub query - no extra code by the developer.
• Matches HTML syntax (named value pair) and as a developer you can get it easy. e.g.

  Request.QueryString("Where")

The CONS:

• It shows the database schema to the users - users maybe should not see the structure of the database.
• Security - the where clause could show data we don't want users to see.
• Got to add a little extra code to avoid sql injection.

Do you avoid using mailto: on your website?

Don't ever display valid individual email addresses or mailto:'s on a web site. Nasty people on the web have created "Email Harvesting" tools. These programs search public areas on the Internet to compile, capture, or otherwise "harvest" lists of email addresses from web pages, newsgroups and chat rooms. Any email address that is spelt out can be captured and therefore gets attacked with spam.

The best way to avoid it is not to display valid individual email addresses in text format (especially in the form of "mailto:") on your website.

• e.g. 
                              
                          

  Figure: Bad way - normal email address in text format

• e.g. FirstnameSurname
  

  Figure: Good way - use image

• Better way: encryption technique
  
1. Store email addresses in the web.config file
   

   <configuration>
       <appSettings>
       
           <add key="SampleEncodedEmailAddress" value="David@sample.com.au" />
       ...</appSettings>
   </configuration>

2. Encode them on the server using the BitConverter class
   

   Dim email As String = ConfigurationSettings.AppSettings("SampleEncodedEmailAddress")
   Application("SampleEncodedEmailAddress") = BitConverter.ToString( _
   ASCIIEncoding.ASCII.GetBytes(email)).Replace("-", "")

3. Decode on the client with a JavaScript function in the JavaScript
   

   <a id="linkContact" href="javascript:sendEmail('44617669644073616D706C652E636F6D2E6175')">CONTACT
   David</a>

   See the sample in action.

• Best way: use image with JavaScript

  The best way is a combination of 'good way' and 'better way'.

  This is how we get around the problem.

• Old way: use "*"or other symbol in the domain

  e.g. FirstnameSurname@s*w.com.au

  Note: Please change "*" in "s*w" to a "s".

  This way works well. Unfortunately, it is not understood by public.

We have a program called SSW Code Auditor to check for this rule.

Do you replace the 404 error with a useful error page?

Error page, you say? You worked hard to make sure my site has no errors!! Well, surfers don't always type URLs accurately. No website is immune to such errors.

A well-designed custom error page encourages surfers to remain in your site and help them to the right page. Although it's possible to redirect error codes straight to your home page, that doesn't tell visitors what's going on. It's more user-friendly to explain that there was a problem and provide some alternatives. Supply a link to your home page or other links, or offer your site's search function if you have one.

To see an example of our error page click this link Error Page

<customErrors mode="Off"></customErrors>

Figure: This is the default code in the web.config (Bad)

<customErrors mode="RemoteOnly" defaultRedirect="/ssw/ErrorPage.aspx">
    <error statusCode="404" redirect="/ssw/SSWCustomError404.aspx">
</customErrors>

Figure: this is the current code in the web.config of the SSW Site (Good)

For ASP.NET website, the detailed information would be presented to the remote machines when an unhandled error occurs if the customErrors mode is off.

This error information is useful for developer to do debugging. However, it would leak out some confidential information which could be used to get into your system by the hackers. We can assume that if a SQL exception occurs by accident, which may expose database sensitive information (e.g. connection string; SQL script). So, to prevent these leaks, you should set the "mode" attribute of the tag to "RemoteOnly" or "On" in the web.config file and create a user friendly customized error page to replace the detailed error information.

<customErrors mode="Off"></customErrors>

Figure: Setting "customErrors" attribute to "Off" is security risk (Bad)

<customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm"></customErrors>

Figure: Turning on "customErrors" protects sensitive information against Hacker (Good)

Figure: Unhandled Error (Bad)

Figure: The Customized Error Page (Good)

To see an example of our customized error page click this link Customized Error Page

Do you replace the 404 error with a useful error page? (Part 2: And avoid changing the URL)

When you request a URL of a file that doesn't exist, you will get an error message. You have to consider that this error message differs depending on which kind of server you are running.

On the IIS the default "HTTP 404 error" page will be shown. This page looks quite ugly, it is not customizable and has nothing to do with the layout and design of the rest of your site. The advantage of this solution is, that it doesn't change the URL in the Address text box of you browser. So it's easy to correct for a user if it's e.g. just a spelling mistake or a forgotten or mixed up letter and the user doesn't have to retype the whole URL.

Here is a standard 404 error page of the IIS. It does not change the URL.
It should look like this in Internet Explorer 6:

Figure: The default 404 error page of the IIS in IE6 (Bad)

Or look like this in Internet Explorer 7:

Figure: The default 404 error page of the IIS in IE7 (Bad)

In .NET you are allowed to define a custom error page. When a user tries to access a URL which doesn't exist, .NET changes the URL and redirects to the custom error page. The original URL is passed as a parameter to the new URL.

The advantage of this solution is, that the page looks nice and you can customize it according to the design and layout of your whole site.

The disadvantage is, that .NET changes the URL. So if the user wants to correct the URL he entered, for example because he just mixed up a letter, then this means quite a lot of work for him. He has to retype the whole URL or at least copy and paste the parameter out of the new URL. This is very uncomfortable for the user.

Here is a customized .NET 404 error page. It changes the URL.
It should look like this:

Figure: A customized .NET error page (Bad as the URL changes)

Our solution is to show the customized error page while not change the original URL. So if the user wants to do any corrections, e.g. a mixed up letter, he can do that by just editing the URL in the address bar.
The advantages of this solution are, that the site looks nice and matches the design of the whole site and that the user can easily change the original URL he typed.

You can try any page name that doesn't exist like xxxx.asp on the URL and it will open our 404 error page. The original URL is not changed in the address bar. It should look like this:

Figure: Our customized 404 error page without change the URL (Good)

In order to show the customized error page while not change the original URL, you can use Server.Transfer() to keep the original URL.

Server.Transfer("/ssw/ErrorPage.aspx")

Figure: Custom error page handler in Global.asax

Do you always use the MaxLength property to the same as the length of the field in the table?

Rule 1: Whenever you have a data entry page you should always use the MaxLength property to the same as the length of the field in the table (except for numbers).

       State:(maxlength="3")

Rule 2: Whenever you have a situation where you are using:

• the HTML TEXTAREA (does not have the maxlength property), or
• have a SQL Server table exceeding the limit of 8060 bytes. (Developers sometimes define the table with char/varchar sizes that exceed this, in order to give the user flexibility in which fields they want to store the data).

Figure: Design view of Products table in Northwind

Then you need to:

• add the JavaScript function eg. ValidateLength(control)
• add 2 properties to every data control  eg. dataType="char" onkeyup="validateLength(this)"

See demonstration

Do you name web pages to be consistent with database tables?

In a database driven page, it is important that the name of the page is based on the data that the page contains. For example, if a page shows client details and is based on the Client table, then the page should be called Client.aspx Another examples are:

• a search page. This page ssw/Kb/KBSearch.asp is for searching a table obviously called KB
• a search results page. This page ssw/KB/KBResult.aspx?searchOn=Words&searchFor=problem is returning the records for a table called KB
• a detail page. This page is showing the detail record for a record in the table 'KB'
  

Do you use a style sheet and heading tags for all your formatting?

Formatting rules shouldn't be specified in each individual page of your website. A style sheet should be used to dictate how the fonts, tables etc should be displayed.

This makes your site very easy to maintain. If you ever want to change the entire look and feel you should only have to change one file.

Here at SSW we ensure every page has this line: <LINK href="/ssw/Include/ssw.css" type="text/css" rel="stylesheet">

Do you make sure every page has a heading tag - H1, H2 or H3?

Every page should have a <H1>, <H2> or <H3> tag. This has the following benefits:

• Improves the ranking with the search engines (extra weighting is given to text in H1 and H2)
• Makes cleaner and leaner html
• You can edit the page in FrontPage (ctrl+alt+2 same as MS Word) or Dreamweaver without going to the HTML view

<p><span class="Heading">Introduction</span>


<br>Lets chatter about...</p>
		

<h2>Introduction</h2>

To adjust the formatting of the heading tags, you should redefine them in your style sheet:

H2

{

font-size: 16px;

font-family: Arial, Helvetica, sans-serif;

}

Do you use <DL> tag for image captions?

Image captions can present a bit of a puzzle to people trying to do proper markup. This results in either the completely wrong markup gets used (a caption is not a paragraph) or captions are simply wrapped in <table>s, <div>s and <span>s tag.

The proper way to insert a caption is to use the Definition List tag

<table>
    <tr>
    <td>
    <img border="1" src="Images/picture.jpg" alt="Default Front Page" />
    </td>
    </tr>
    <tr>
    <td>
    <b>Figure: this is the image caption</b>
    </td>
    </tr>
</table>

Figure: Incorrect caption as it is using <table> tag

<dl class="image">
    <dt><img src="Images/picture.jpg" alt="Default Front Page" /></dt>
    <dd>Figure: this is the image caption</dd>
</dl>

Figure: Correct caption as it is using <dl> tag

Do you avoid FONT tags throughout your site?

And as a consequence of the style sheet no page on our site should have the <Font> tag.

<font face="garamond, times" color="#FF0000" size="+1">
    this text uses font tag
</font>

Figure: Bad and inflexible text formatting using <font> tag

<div class="redText">this text uses css instead</div>

Figure: Good text formatting using CSS

Do you avoid using ASP/ASP.NET tags in plain HTML?

ASP and ASP.NET tags have no place in plain HTML pages. They simple increase the size of the file and are ignored by browsers, because the need to be processed on the server. When converting ASP.NET pages to plain HTML you must be careful to remove all of these tags.

<%@ Page Language="C#" %>
<html>
<ssw:inctop id="inctop" runat="server"></ssw:inctop>

Figure: Bad Example - ASP.NET tags accidentaly placed in a plain HTML documents

We have a program called SSW Code Auditor to check for this rule.

Do you know the best way to display code on your website?

Any website designer that needs to display code should be aware that there is a very simple method for simply formatting code, and there is a slow and complex method.

The complex method requires formatting each line with HTML tags (such as <br> and &nbsp;) to ensure the code looks nice and pretty.

The simpler method uses <pre> tags. Pre (standing for "preformatted") means that the code is formatted exactly as it is written in the HTML window. This means the page designer can format code in a very simple fashion, without worrying about tags.

I think it's also better to put code in a table, so it's easy to distinguish.

NOTE: <code> tags should not be used because they only provide the font courier - you still have to manually indent all of your code as in the bad code display example below.

<font face="Courier, Times, Arial, Verdana" size="3">

public class Configuration<br>

&nbsp;{<br>

&nbsp;&nbsp;public static string MySetting<br>

&nbsp;&nbsp;{<br>

&nbsp;&nbsp;&nbsp;get<br>

&nbsp;&nbsp;&nbsp;{<br>

</font>

Figure: Bad Code Display Example - using <font>

<code>

public class Configuration<br>

&nbsp;{<br>

&nbsp;&nbsp;public static string MySetting<br>

&nbsp;&nbsp;{<br>

&nbsp;&nbsp;&nbsp;get<br>

&nbsp;&nbsp;&nbsp;{<br>

</code>

Figure: Bad Code Display Example

<pre>
public class Configuration
{
    public static string MySetting
    {
        get
        {
</pre>

Figure: Good Code Display Example

Tip: Do not use auto-format (Ctrl-K, Ctrl-F) in Visual Studio when updating page with <pre> tags, or it will destroy all the code formatting. We have made a suggestion to Microsoft to fix this.

Do you check if your page contains malformed Html?

Today's web browser are very lenient when it comes to malformed HTML, but such malformed HTML should still be avoided at all cost, otherwise the rendering of your pages will become unpredictable. But such malformed HTML are not easy to pick up, especially if the page is a generated server page, such as .asp or .aspx pages.

At SSW we integrate an utility call Tidy with SSW Code Auditor to provide a powerful and robust solution to this problem. This way Code Auditor can automatically validate our websites and provide an informative report on all malformed html found on our site.

We have a program called SSW Code Auditor to check for this rule.

Do you always have a default/index page?

Many times a website contains directories that don't have an index page, and this means a user navigating via the URL, see a 404 error. You don't want this to happen, so make sure you always have an index page in every directory.

It is usually a default.aspx file, however depending on the webserver configuration; it might be index.html or index.php etc.

Figure: Bad example - If you remove the page name on this URL http://www.infragistics.com/dotnet/netadvantage/silverlight/data-visualization.aspx#Overview, the user gets a 404 error

We have a program called SSW Code Auditor to check for this rule.

Do you chose efficient anchor names?

1. Meaningful- When you use named anchors in a webpage, use meaningful names. When you are sending the URL by email it helps indicate what you are talking about, and in addition, list numbers often change. An anchor like "#13" becomes incorrect when the order changes.


2. Case sensitive- Are "http://www.ssw.com.au/ssw/NETUG/DeveloperLinks.aspx#usergroups" and "http://www.ssw.com.au/ssw/NETUG/DeveloperLinks.aspx#UserGroups" the same? Answer is "no" because they might be not case sensitive when they test them in IE, but are in other browsers. An efficent way of checking this is to run is to run SSW Link Auditor and fix the errors reported in the broken local links' section.


3. No spacing- When you are defining an anchor name, make sure there are no spaces within the name.
   Bad: <a name="Some Anchor Name">
   Good: <a name="SomeAnchorName">


4. Don't start with a #- When you are defining an anchor name you DO NOT use a #.
   When you are referencing an anchor you DO use a #.
   This is a common mistake, because the # is used on the "href".
   Bad: <a name="#SomeAnchorName">
   Good: <a name="SomeAnchorName">

We have a program called SSW Code Auditor to check for number 3 and 4 on this rule.

Do you avoid using UNCs in HREFs?

Initially I thought errors of this nature would be picked up in the link checking utility. However that is not the case, because the link checker will not report any problems if you run it locally - which is the normal method. The reason it won't see the problems, is because the link checking utility does not check hard coded links to local servers (e.g. http://localserver/ssw/Default.aspx), so therefore it is testing a page that will exist internally, but the page will not exist when uploaded to the web (eg.http://www.ssw.com.au/ssw/Default.aspx).

Bad: <a href="//ant/ssw/LookOut.htm">

Good: <a href="/ssw/LookOut.htm">

We have a program called SSW Code Auditor to check for this rule.

Do you make sure that your page can be saved offline?

After the security update MS02-023 or later (including Internet Explorer 6 Service Pack 1), Internet Explorer now blocks access to StyleSheet code if the code is on a different domain/server. This means page with external CSS reference will fail to save offline and will receive a "Error when saving webpage" error message. So if you want to save your page offline, copy the css file to the same server.

<LINK href="http://anotherserver/ssw/ssw.css" type=text/css rel=stylesheet>

Figure: Cannot save offline

<LINK href="/ssw/ssw.css" type=text/css rel=stylesheet>

Figure: Can save offline

We have a program called SSW Code Auditor to check for this rule.

Do you use the "type" attribute in <object> tags?

Rather than specifying CodeBase or ClassID attributes in an object tag, the preferred method, for portability reasons, is to specify the MIME type. For instance, with Flash, you would specify a type of "application/x-shockwave-flash". This allows the browser to load the user's preferred plugin instead of specifying a particular object. This also reduces the number of security warnings a user may see.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="120" height="120" id="Untitled-1" align="middle">
</object>

<object type="application/x-shockwave-flash" width="120" height="120" id="Untitled-1" align="middle">
</object>

We have a program called SSW Code Auditor to check for this rule.

Do you make sure you remove the debug page attribute?

The debug attribute in the web.config file is very useful for ASP.NET developers. When an error occurs the developer gets detailed error report containing the stack trace, line number and what the error is.

<%@ Page Language="vb" Debug="true" %>

But when debug attribute in the Web.config file is set to true (by setting debug="true" in your web page), it generates symbolic information (.pdb file) every time the compiler compiles your .aspx pages as well as disables code optimization.,So, it slows down the execution of every page.

So if you are a developer remember to remove the debug attribute and instead use custom error messages for your web pages

We have a program called SSW Code Auditor to check for this rule.

Do you use Markup Validation Service to check your HTML and XHTML code?

Markup Validation Service allows you to check your webpage against the W3C recommendations. When developing webpages you want to create a clean and valid web page. It makes it easyier for someone else to read and add new parts to a web page. Every web language like HTML has its own Syntax it must follow in order to produce a clean and valid web page, Markup Validation Service allows you to achieve that goal. Go to Markup Validation Service

1. Enter the URL or Upload HTML file and click Check
2. Review the Results and make changes if web page is not Valid

Figure: You can Choose to Validate by entering a URL or by Uploading a File

Figure: Displaying Information about your check

Figure: Displaying Results and Errors with web page checked

Do you use CSS Validation Service to check your CSS Style Sheet?

CSS Validation Service allows you to check your webpage against the W3C recommendations. When developing web pages you want to create a clean and valid web page. It makes it easyier for someone else to read and add new parts to a web page. Every web language like CSS has its own Syntax it must follow in order to produce a clean and valid web page, CSS Validation Service allows you to achieve that goal. Go to CSS Validation Service

1. Enter the URL or Upload file or by Direct Input and click Check
2. Review the Results and make changes if web page is not Valid

Figure: You can Choose to Validate by entering a URL or by Uploading a File

Figure: Displaying Results and Errors with web page checked

Do you close quotations of all your html attributes?

It is always better to make sure there are equivalent closing quotations for HTML attributes. A small mistake of missing a quotation could lead to undesired results on the web page.

<SPAN style="VS FONT-SIZE:12 pt; BACKGROUND: #cccccc;>

Figure: Can you see the missing quote? Code Auditor can. (bad code)

<SPAN style="VS FONT-SIZE:12 pt; BACKGROUND: #cccccc;">

As you can see from the above example, just missing a quotation makes the whole layout of the text different. So be very careful that you make sure you have closed all opening quotations of attributes with equivalent closing quotations.

We have a program called SSW Code Auditor to check for this rule.

Do you check for funny apostrophes?

When you copy stuff from word to frontpage it puts in a funny apostrophe.

• shouldnt (Words apostrophe), rather than
• shouldn't (Front Pages apostrophe)

Some versions of frontpage have incompatible character sets that don't support this and they will see shouldnt. Make sure you check your web pages for this funny apostrophe.

Do you have generic exception handler in your Global.asax?

Add your code to handle generic exception of your ASP.NET application in Application_Error.

Sub Application_Error(ByVal sender As Object, ByVal e As 
EventArgs)

Dim objLastError As Exception = Server.GetLastError()
If 
objLastError.InnerException.ToString.IndexOf("IO.FileNotFoundException") 
> 0 Then

Dim strQueryString As String = Request.Url.Query.ToString()
If strQueryString.Length = 0 Then
'404 error. Append .error so that IIS will take over it and 
log it in log file correctly.

Response.Redirect(Request.Path + ".error", True)
Exit Sub
End If
End If

Dim strSubject As String = "Error"

Dim strEmailMessage As String
strEmailMessage += "An error occured on the SSW Website. 
Please send this to the Web Page admin." & vbNewLine & 
vbNewLine
strEmailMessage += "Server Name: " & 
Request.ServerVariables("SERVER_NAME") & vbNewLine
strEmailMessage += "Server IP Address: " & 
Request.ServerVariables("LOCAL_ADDR") & vbNewLine
strEmailMessage += "Client IP Address: " & 
Request.ServerVariables("REMOTE_ADDR") & vbNewLine
strEmailMessage += "Error In Page: " & Request.Url.ToString() 
& vbNewLine

If Request.UrlReferrer Is Nothing Then
strEmailMessage += "Referring URL: <non available>" & 
vbNewLine
Else
Dim strUrlReferrer As String = 
Request.UrlReferrer.ToString.ToLower
strEmailMessage += "Referring URL: " & strUrlReferrer & 
vbNewLine
' we don't want to know if the user comes in from a bad link 
outside our site - we can't fix that
If strUrlReferrer.IndexOf("ssw.com.au") = -1 And 
strUrlReferrer.IndexOf("ant") = -1 And 
strUrlReferrer.IndexOf("localhost") = -1 And 
strUrlReferrer.IndexOf("seal") = -1 Then
strSubject = "Warning Only (bad link outside our site so 
probably not worth fixing)"
strEmailMessage += "Warning Only (bad link outside our site 
so probably not worth fixing)" & vbNewLine
End If
End If

strSubject = "SSW Web Site: " + strSubject + " in page: " + 
Request.Url.ToString

strEmailMessage += vbNewLine & "Error Message: " & 
objLastError.Message & vbNewLine & vbNewLine
strEmailMessage += "Error Stack: " & objLastError.ToString & 
vbNewLine & vbNewLine & vbNewLine
SSWMT.GlobalFunctions.SendEmail(strEmailMessage, strSubject, 
"info@s*w.com.au", "sswErrorLog@s*w.com.au", False)

' Move this error to the error page so i can get the error 
message			
If Not 
Convert.ToBoolean(SSWMT.GlobalFunctions.GetWebConfigString("DisableCustomError")) 
Then
Server.Transfer("/ssw/ErrorPage.aspx")


End If

End Sub
		

Do you understand that there are 2 other types of errors that cant be caught and handled by the global exception handler in Global.asax?

Figure: BEE is not an application - there is no way you can put code in the global.asax because it does not exist

Figure: BEE is not an application - there is no way you can put code in the global.asax because it does not exist

We have a program called SSW Link Auditor to check these two errors.

Do you precompile your ASP.NET 1.1 and 2.0+ sites?

It always much better for your developers to find errors rather than your clients and end-users. ASP.NET 2.0 has precompilation built-in. However, you can perform similar validation in ASP.NET 1.1 as well. For more information go to Precompile ASP.NET Sample in SSW Knowledge Base.

Do you release build your web applications before you deploy them?

Additionally to the reasons found on rule Do you always deploy Release builds to production, there are more reasons doing this with ASP.NET

• ASP.NET conducts a batch compilation on "release builds", which means it tries to compile all files in the current folder into one DLL
• No resource caching is performed on debug build assemblies, which means that each request/response for a resource is not cached

According to MSDN web developer tips, you can choose one of the following to release build your web application

• In web.config file, set <compilation debug="false"/>
• Disable the <compilation debug="true"/> switch for all ASP.NET applications on the server by setting the following in Machine.config

      <system.web> 
          <deployment retail="true"/> 
      </system.web>
  

  The setting in machine.config will also turn off trace output in a page and detailed error messages remotely

  Machine.config file is typically located at %SystemRoot%\Microsoft.NET\Framework\%VersionNumber%\CONFIG.

Do you avoid using Web Site Projects?

If you're creating new web apps in ASP.NET 2.0, do you still use Web Site projects? We strongly recommend using the new Web Application projects.

What's the difference between the two? There is a detailed comparison here, but to summarize:

• Web Site projects have no project file and it creates multiples assemblies. (This result in a lot of annoying scenarios.)
• Web Application projects have a physical project file and along with all other standalone classes within the project are compiled into a single assembly.

Please see our kb - How to upgrade VS 2005 Web Site Projects to be VS 2005 Web Application Projects? to do the upgrade.

Do you use AJAX on your web site?

ASP.NET AJAX is a new Web development technology from Microsoft. With ASP.NET AJAX, developers can quickly create pages with sophisticated, responsive user interfaces and more efficient client-server communication by simply adding a few server controls to their pages.

Do you check if your website is running?

If you want to know your website is working or not, you need to add a ping check to the machine also a HTTP Content Scan to the website in WhatsUp. We use WhatsUp to do real-time monitoring.
Follow these steps to check your website in WhatsUp:

1. Add your website as a new device.

   

   Figure: New device

2. Ping monitor is added automatically.

   

   Figure: Ping monitor

3. Add a HTTP Content Scan monitor.

   

   Figure: HTTP Content Scan

4. Edit the scan script. In the script you can see 2 key words "Send" and "Expect".
   "Send" expression is a http request to your website.
   "Expect" expression is a regular expression to check the key word in response from your website.

   

   Figure: Edit scan script

5. Add the monitor to your device.

   

   Figure: Add monitor

Once a device is down or up, a WhatsUp action will tell SQL Reporting Services to send out a notification report.
Our report looks like this:

Figure: Website works

Figure: Website doesn't work

Do you avoid deploying source code on the production server?

When you are deploying an ASP.NET project (no matter it's a Web site or a Web application), do not copy all files of this project to the production server because source code will be deployed during this simple copy and it makes easier for others to access or tamper the source code of your site.

Instead, please use 'Publish' utility to deploy your Web site or Web application. This utility can remove the source code from the site.

1. Web Site Project

   Publish Web Site dialog box is designed to precompile and deploy your Web site to a new location (whatever it is, ftp://..., http://... or drive:\path). During the deployment, source code are removed automatically. Besides, the precompilation process finds any compilation errors and identifies the errors in the configuration file.

   To access this dialog box, please open a Web site that you want to deploy and click Build menu, then click Publish Web Site.

   

   Figure: How to open Publish Web Site dialog box

   

   Figure: Publish Web Site dialog box

   See more about Publishing Web Sites.

2. Web Application Project

   The Publish Web dialog box enables you to build and publish a Web application project to a new location. Like Publish Web Site dialog box, this utility can remove source code. However you have to select Only files needed to run this application to specify it. Other benefit of this utility is that potential errors and compile-time errors in the Web.config file and in other non-code files can be found.

   To access this dialog box, open a Web application project that you want to publish and click Publish ApplicationName on the Build menu.

   

   Figure: How to open Publish Web dialog ('WebApp' is the name of this application)

   

   Figure: Publish Web dialog box

   See more about How to Publish Web Applications.

Don't use LinkButton?

If we want to refresh and databind the same page from client side, we can use the javascript function calls "__doPostBack". We shouldn't fire this post back in LinkButton. Otherwise, there will be an error.

Figure: Right click the link with __doPostBack event

Figure: New window with incorrect URL

ASPX:
<asp:Panel runat="server" ID="mUpdatePanel" OnLoad="mUpdatePanel_Load">
    <asp:Label runat="server" ID="lblTime" />
    <br />
    <asp:GridView ID="gvList" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" />
        </Columns>
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="Name" />
        </Columns>
    </asp:GridView>
    <br />
    ID:<asp:TextBox ID="txtID" runat="server"/>
    Name:<asp:TextBox ID="txtName" runat="server"/>
</asp:Panel>
                        
C#:
protected void mUpdatePanel_Load(object sender, EventArgs e)
{
    lblTime.Text = DateTime.Now.ToLongTimeString();
    ArrayList mList = (ArrayList)ViewState["List"];

    if (txtName.Text.Length > 0)
    {
        Client mClient = new Client();
        mClient.ID = Int32.Parse(txtID.Text);
        mClient.Name = txtName.Text;
        mList.Add(mClient);
        ViewState["List"] = mList;
        gvList.DataSource = mList;
        gvList.DataBind();
    }
}
                        

Sample Code

<a href="javascript:__doPostBack('mUpdatePanel','');">Refresh</a>
                        

Bad Code

<input type="button" onclick="javascript:__doPostBack('mUpdatePanel','');" value="Refresh" />
                        

Good Code

We have a program called SSW Code Auditor to check for this rule.

Do you keep your "DataBinder.Eval" clean?

Remember ASP code, you had lots of inline processing. Using DataBinder.Eval encourages the same tendencies. DataBinder.Eval is OK, so is formatting a number to a currency. But not formatting based on business rules. The general rule is, any code between <%# and DataBinder.Eval is bad and should be moved into protected method on the form.

Here is a good and a bad way to binding fields in ASP.NET in a datagrid.

Putting all the field binding code AND the business rule in the control

• Bad: Business logic is in the presentation layer (.aspx file)

• Bad: No intellisense

• Bad: Compile errors are not picked up

<asp:Label id="tumorSizeLabel" runat="server" Text='<%# iif( Container.DataItem.Row.IsNull("TumorSize"), "N/A",DataBinder.Eval(Container, "DataItem.TumorSize", "0.00")) %>'/>

Bad code

Putting the code on the ItemDataBound Event.

• Good: Business logic is in the code behind (.vb or .cs file)

• Good: intellisense

• Bad: Code Bloat

• Bad: Have to use server control for all controls (viewstate bloat)

In server page: <asp:Label id="tumorSizeLabel" runat="server" />
In code behind:
Private Sub patientDataGrid_ItemDataBound( ByVal sender As Object, ByVal e As DataGridItemEventArgs)_
Handles patientDataGrid.ItemDataBound
If( e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then
Dim tumorSizeLabel As Label = e.Item.FindControl("tumorSizeLabel")
Dim rowView As DataRowView = CType(e.Item.DataItem, DataRowView)
Dim row As PatientDataSet.PatientRow = CType(rowView.Row, PatientDataSet.PatientRow)
If row.IsTumorSizeNull() Then
tumorSizeLabel.Text = "N/A"
Else
tumorSizeLabel.Text = row.TumorSize.ToString("0.00")
End If
End If
End Sub

Good code

Do you avoid using document.getElementById(id) and document.all(id) to get a single element, instead use selector $(#id)?

$(#id) is a selector of jQuery. It gets the single element with the given id.

jQuery is a fast and concise JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

With jQuery, you can write less code but do more work.

<h1 id="Head1">Hello</h1>
<script type="text/javascript" language="javascript">

    document.all("Head1").style.color="red";
</script>
                        

Figure - Bad Code.

<h1 id="Head1">Hello</h1>
<script type="text/javascript" language="javascript">

    document.getElementById("Head1").style.color="red";
</script>
                        

Figure: Bad Code.

<h1 id="Head1">Hello</h1>
<script type="text/javascript" language="javascript">

    $("#Head1").css("color","red");
</script>
                        

Figure: Good Code - Using $("#Head1")

Do you know how to generate maintenance pages?

In every application you focus on is the important business problems e.g. Invoices with multiple deliveries. Plus you have lots of lookup tables e.g. CustomerCategory. It is smart to work on the important business problems and have the lookup tables done automatically using a code generator.
The code generators to generate maintenance pages automatically, come from MS and from 3rd parties. The current choices are:

1. We recommend NetTiers (a template for Code Smith) in our 'The Best 3rd Party .NET Tools'. It is an open source template and the output code is of good quality. There are many amazing features:
   
   • Creates a full website project, already pre-configured and ready to begin coding against your data immediately.
   • Creates a full set of administration web controls, that serves as a basic yet fully functional web administration console for database.
   • Creates a full set of typed DataSource controls for your entire API with design time support, they are similar to the ObjectDataSource, only these are full featured and are actually developer friendly.
   • Creates a full webservice API for your domain, perfect for a .net winforms or smart client application and is simple to configure.
2. AspDB is an alternative choice. You can click via a code generator (Designer) to produce a complete and acceptable Web DB application in several minutes.
3. BLinQ is a tool to generate websites that use LinQ to show and edit data. DEAD - now replaced by ASP.NET Dynamic Data.
4. ASP.NET Dynamic Data provides the Web application scaffolding that enables you to build rich data-driven Web applications. This scaffolding is a mechanism that enhances the functionality of the existing ASP.NET framework by adding the ability to dynamically display pages based on the data model of the underlying database, without having to create pages manually.
   WARNING: ASP.NET Dynamic Data is in Beta and not installed on SEAL and SEALUS. ASP.NET Dynamic Data has been released in VS.NET 2008 SP1.

Do you avoid using ReportViewer local processing mode?

ReportViewer control is a powerful control designed for Windows application and Web application to process and display reports. This control can be configured to run in local processing mode and remote processing mode.

• Local Processing Mode
  This mode uses client report definition (.rdlc) files, all report processing is performed on the computer that hosts the application. All data used by the report must be retrieved from data that the client application provides, so you have to configure the ReportViewer control's Data sources, Report parameters.
  See Configuring ReportViewer for Local Processing for more information.
• Remote Processing Mode
  This mode needs the Microsoft SQL Server 2005 Reporting Services report server, The report server processes the data and renders the report into an output format. The ReportViewer control retrieves the finished report from the report server and displays it on the screen, so you have to configure the ReportViewer control's report server information.
  See Configuring ReportViewer for Remote Processing for more information.

If you use local processing mode in your Web application, there are more configuration to do for the ReportViewer control, report processing will also slow down the web server.

Do you always use the Visual Studio designer for data binding where possible?

It's convenient and efficient for developers to use designer for databinding instead of using code. It also can be easily reviewed and understood by other developers.

Figure - Create DataSource (Good).

Figure - Choose a business object (Good).

Figure - Choose a method (Good).

Figure - Select display / value field for the ListBox (Good).

private void RefreshLeftData()
{
    List<Para> listLeft = lawFirm.GetParaLeft();
    lstLeft.DataSource = listLeft;
    lstLeft.DataTextField = "ParaName";
    lstLeft.DataValueField = "ParaID";
    lstLeft.DataBind();
}
                        

Figure: Bad Code - Databinding by code.

public static List<Para> CreateLeftPara()
{
    ClsLawFirm bLawFirm = new ClsLawFirm();
    return bLawFirm.GetParaLeft();
    
}
                        

Figure: Good Code - Databinding by designer

Do you use SSO (Single sign-on) for your websites?

Many companies have more than one web applications running under different versions of .NET framework in different subdomains, or even in different domains. They want to let the user sign in once and stay logged in when switching to a different web site, and this is SSO (Single Sign-On).

In ASP.NET the logged-in user status is persisted by storing the cookie on the client computer, base on this mechanism, they are two possible solutions.

1. Share one cookie across the web applications.
   The Forms authentication cookie is nothing but the container for forms authentication ticket. The ticket is encrypted and signed using the <machineKey> configuration element of the server's Machine.config file. So if the web applications are hosted on the same machine, the point is to create a shared authentication cookie. Configure the web.config and create the cookie manually can achieve this.
   Following scenarios may suit this solution.
   
   • SSO for parent and child application in the virtual sub-directory
   • SSO for two applications in two sub-domains of the same domain
2. Create its own cookie for each site by calling a page which can create cookie in its own domain.
   If the web applications are hosted on different machine, it is not possibly to share a cookie. In this case each site will need to create its own cookie, call the other sites and ask them to create their own ones.
   Following scenarios may suit this solution.
   
   • SSO for two applications in different domains

Do you use Windows Integrated Authentication?

Windows Integrated Authentication is the preferred option for use with intranet applications. When using Windows Integrated security, you don't need to implement the login system and user accounts database. The biggest advantage is if the user is already logged in to your domain they don't need to sing in to your application, it automatically logs them in instead of them having to login manually.

Do you always put JavaScript in a separate file?

ASP.NET injects many lines during page rendering, so if you are using inline JavaScript, the line numbers will change during client side JavaScript debugging in VS.NET, FireBug or IE8 developer Tools.

Figure: Bad Code - Using Inline JavaScript

Figure: Bad Code - On PostBack Line numbers are changed for Inline JavaScript

Figure: Good Code - Using JavaScript on Separate file

So you should always put JavaScript in a separate file.  Then the line numbers will stay consistent during debugging.
Keeping JavaScript in separate file is also good for production as it improves performance due to browser caching.

NOTE: During development, remember to hit CTRL-F5 to force browser to re-fetch the files from server or you may be debugging old version of the JavaScript file.

Do you use jQuery instead of JavaScript?

jQuery is the MUST HAVE tool for web developers. There are 3 good reasons why you should use jQuery.

1. Cross Browsers (IE 6.0+, Firefox 2+, Safari 3.0+, Opera 9.0+, Chrome)
2. Powerful and easy to use
   • Same selectos as CSS
   • Designer can learn it fast
   • More readable JavaScript code
3. Plug-ins - Tons of useful plug-ins and functionalities

window.onload = function() { 
	alert("Welcome"); 
}
                   

Figure: Bad Example - Using JavaScript 'onload' event.

$(document).ready(function() {
    alert("Welcome!"); 
});
                        

Figure: Good Example - using jQuery document 'ready' event.

Do you know what are the best examples of visually cool jQuery plug-ins?

Below are some of the best visually cool jQuery plug-ins. Use these as guidelines for building your jQuery plug-ins:

• Bubble Navigation (Hover each menu item to bubbling animation)
• Quicksand (Click sort by to see shuffling animation)
• Nivo Slider (Click on arrows to see sliding animation)
• Sponsor Flip Wall (Click on each square to see flipping)
• Photo shoot effect (Click on the big image to see photo shoot effect)
• HTC Clock

Do you know what are the best examples of technically cool jQuery plug-ins?

Below are some of the best technically cool jQuery plug-ins. Use these as guidelines for building your jQuery plug-ins:

• Ajax Upload (show a preview of the file being upload) )
• AutoSuggest jQuery plugin (Type in the textbox to see suggestions)
• jQuery.popeye (Click the 'Enlarge' button to see effect)
• Open Standard Media Player (jQuery + HTML5)
• jsPlumb connector

Do you use server side comments?

Use server side comments:

• Use <%-- Comment Here --%> instead of <!-- Comment Here --> (Doesn’t get rendered to the client, saves us a few precious kilobytes)
• Use CTRL + K, C to comment and CTRL + K, U to uncomment