Working on different web teams within various organizations throughout the years, a common issue that I’ve often encountered was the lack of process when it came to designing and developing web sites. Virtually everywhere that I have worked there has not been a standard, documented method or strategy that the “web team” could use to guide a project from start to completion. Thankfully, in one of my most recent roles, my team and I were tasked with doing just that, creating a process that made sense and that we could all use collectively to get our work done.

We called our process “The 4 D’s”

1. Definition
2. Design
3. Development
4. Deployment
5. Support (OK…not a D…but you get the picture)

The documents attached to this post are what we ultimately ended up with. A lot of what we created is based on common methods and best practices in project management and software development….so don’t expect any of this to be ground breaking stuff. We found that having a process like this in place kept projects well organized, kept all team members fully informed of client expectations, and minimized common issues like scope-creep, missed deadlines, blown budgets, and dissatisfied clients. Every member of the web team as well as our external clients were involved in creating this process, so at the end of the day everyone was comfortable with working within it.

Note that it is crucial to work very closely with your clients in the beginning stages of the development process (Definition/Design). The client should expect to deliver and sign off on clear business requirements (a member of the web team would work with the client to create the necessary documents) and also be readily available to answer any questions and sign off on milestones throughout the process. As development of the web site/application progresses, the client should be given periodic status updates. The bottom line is to keep an open line of communication between the web team and the client. In doing so, the chances of delivering a successful product will be greatly improved.

This process is intended as a general guideline in developing web sites and applications and is not meant to be followed rigidly. The scope and complexity of every project is different and as is the case, the degree of process/documentation required should vary depending on the project. Also, some clients require more visibility into projects than others so the level of detail in documentation  may vary as well.

Download From CodePlex

Introduction

After looking around for a simple, customizable ASP.NET control that reads weather and forecast data from weather.com’s xml feed…and finding nothing, I decided to create one myself.

This ascx control displays current weather and weather forecast data on your ASP.NET website straight from an xml feed on weather.com. This is meant to be very easy to implement and extremely easy to customize. All you need to do is add a few files to your site, copy and paste a couple lines of code, switch a few variables, and you’re off and running.

Oh…and this control also caches the xml data from weather.com so it doesn’t ping the xml data with every user request. I have it set to clear and refresh the cached data every 15 minutes, but you can set it to any time frame you want…or even turn off caching if you so chose.

Without further adieu, let’s get started.

Background

VERY IMPORTANT: You will first need to register on weather.com for their xml weather service. They provide this all for FREE. This will get you a License Key, PartnerID, and LocationID which are all required to use this control. So….go to weather.com now and get ‘em.

https://registration.weather.com/ursa/xmloap/step1??

Got ‘em? You’re 90% there…Keep reading.

Using the code

OK…so you have your weather.com account information. Now, download the zip file at the top of this web page and unzip it. Next, do the following:

Step1: copy the WeatherControl.ascx file into your web project

Step2: copy and paste the entire ccicons folder into your web project

Step3: copy the css folder into your web project (contains stylesheet.css)

Step4: in any aspx file you want to use this weather control, add the following code (see the default.aspx file for example) :

<%@ Register TagPrefix="My" TagName="Weather" src="WeatherControl.ascx" mce_src="WeatherControl.ascx" %>

And add the following code where you want the generated weather table to show up on your web page. YOU NEED TO ENTER YOUR OWN LicenseKey, PartnerID, and LocationID values that you got from weather.com!!!:

NOTE: For LocationID visit: http://aspnetresources.com/tools/locid.aspx

<My:Weather

        ID="Weather" runat="server"

        LicenseKey = ""

        PartnerID = ""

        LocationID = ""

        EnableWeatherCaching = "False"

        TimeToRefreshCache = "15"

        NumForecastDays = "3"

        showDateInForecast = "True"

        showWind = "True"

        forecastIconSize = "sm"

        showLastUpdateLabel = "True"

        showCelsius = "False"

        showKPH = "False"

        locationClass = "ccLoc"

        curTempClass = "temp"

        curDescClass = "cc"

        curWindClass = "curWind"

        fcastDateClass = "fcastDate"

        fCastTableClass = "fcastTable"

        fcastWeekdayClass = "fcastWeekDay"

        lastUpdateClass = "cc"

/>

 The definable properties listed above are all set to the control’s default values. I listed all of them so you can see which properties you can set in the control. They are pretty self-explanatory but if you want to see the definition of each property, just open the ascx file. You’ll see a comment next to each public property that describes it. If the default values for the control are OK for your application, then simply use the following code and just set your license variables and location id:

<My:Weather

        ID="Weather" runat="server"

        LicenseKey = ""

        PartnerID = ""

        LocationID = ""

/>

That’s it!

You can go into the ascx file and, at the bottom, change the format of the table to whatever layout you want.

If you want to customize it further…go nuts. You can pull even more data out of the weather.com xml file as well. Just use the two “Node Reading” functions at the top. See the code for examples on how to navigate through the xml tags…pretty self explanatory.Enjoy!

Minimize HTTP Requests

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

 CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it's not recommended.

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors. As described in Tenni Theurer's blog post Browser Cache Usage – Exposed!, 40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.

Use a Content Delivery Network

The user's proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective. But where should you start?

As a first step to implementing geographically dispersed content, don't attempt to redesign your web application to work in a distributed architecture. Depending on the application, changing the architecture could include daunting tasks such as synchronizing session state and replicating database transactions across server locations. Attempts to reduce the distance between users and your content could be delayed by, or never pass, this application architecture step.

Remember that 80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc. This is the Performance Golden Rule. Rather than starting with the difficult task of redesigning your application architecture, it's better to first disperse your static content. This not only achieves a bigger reduction in response times, but it's easier thanks to content delivery networks.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.

Some large Internet companies own their own CDN, but it's cost-effective to use a CDN service provider, such as Akamai Technologies, EdgeCast, or level3. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their application web servers to a CDN (both 3rd party as mentioned above as well as Yahoo’s own CDN) improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site.

Add an Expires or a Cache-Control Header

There are two aspects to this rule: 

• For static components: implement “Never expire” policy by setting far future Expires header
• For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests

 Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster. A web server uses the Expires header in the HTTP response to tell the client how long a component can be cached. This is a far future Expires header, telling the browser that this response won't be stale until April 15, 2010.

Expires: Thu, 15 Apr 2010 20:00:00 GMT

If your server is Apache, use the ExpiresDefault directive to set an expiration date relative to the current date. This example of the ExpiresDefault directive sets the Expires date 10 years out from the time of the request.

ExpiresDefault “access plus 10 years”

Keep in mind, if you use a far future Expires header you have to change the component's filename whenever the component changes. At Yahoo! we often make this step part of the build process: a version number is embedded in the component's filename, for example, yahoo_2.0.6.js.

Using a far future Expires header affects page views only after a user has already visited your site. It has no effect on the number of HTTP requests when a user visits your site for the first time and the browser's cache is empty. Therefore the impact of this performance improvement depends on how often users hit your pages with a primed cache. (A “primed cache” already contains all of the components in the page.) We measured this at Yahoo! and found the number of page views with a primed cache is 75-85%. By using a far future Expires header, you increase the number of components that are cached by the browser and re-used on subsequent page views without sending a single byte over the user's Internet connection.

Gzip Components

The time it takes to transfer an HTTP request and response across the network can be significantly reduced by decisions made by front-end engineers. It's true that the end-user's bandwidth speed, Internet service provider, proximity to peering exchange points, etc. are beyond the control of the development team. But there are other variables that affect response times. Compression reduces response times by reducing the size of the HTTP response.

Starting with HTTP/1.1, web clients indicate support for compression with the Accept-Encoding header in the HTTP request.

Accept-Encoding: gzip, deflate

If the web server sees this header in the request, it may compress the response using one of the methods listed by the client. The web server notifies the web client of this via the Content-Encoding header in the response.

Content-Encoding: gzip

Gzip is the most popular and effective compression method at this time. It was developed by the GNU project and standardized by RFC 1952. The only other compression format you're likely to see is deflate, but it's less effective and less popular.

Gzipping generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip. If you use Apache, the module configuring gzip depends on your version: Apache 1.3 uses mod_gzip while Apache 2.x uses mod_deflate.

There are known issues with browsers and proxies that may cause a mismatch in what the browser expects and what it receives with regard to compressed content. Fortunately, these edge cases are dwindling as the use of older browsers drops off. The Apache modules help out by adding appropriate Vary response headers automatically.

Servers choose what to gzip based on file type, but are typically too limited in what they decide to compress. Most web sites gzip their HTML documents. It's also worthwhile to gzip your scripts and stylesheets, but many web sites miss this opportunity. In fact, it's worthwhile to compress any text response including XML and JSON. Image and PDF files should not be gzipped because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.

Gzipping as many file types as possible is an easy way to reduce page weight and accelerate the user experience.

Put Stylesheets at the Top

While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: “Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times.” Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

Put Scripts at the Bottom

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.

An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.

Avoid CSS Expressions

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. They were supported in Internet Explorer starting with version 5, but were deprecated starting with IE8. As an example, the background color could be set to alternate every hour using CSS expressions:

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );

As shown here, the expression method accepts a JavaScript expression. The CSS property is set to the result of evaluating the JavaScript expression. The expression method is ignored by other browsers, so it is useful for setting properties in Internet Explorer needed to create a consistent experience across browsers.

The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations.

One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression. If the style property must be set dynamically throughout the life of the page, using event handlers instead of CSS expressions is an alternative approach. If you must use CSS expressions, remember that they may be evaluated thousands of times and could affect the performance of your page.

Make JavaScript and CSS External

Many of these performance rules deal with how external components are managed. However, before these considerations arise you should ask a more basic question: Should JavaScript and CSS be contained in external files, or inlined in the page itself?

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

The key factor, then, is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. This factor, although difficult to quantify, can be gauged using various metrics. If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

Many web sites fall in the middle of these metrics. For these sites, the best solution generally is to deploy the JavaScript and CSS as external files. The only exception where inlining is preferable is with home pages, such as Yahoo!'s front page and My Yahoo!. Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.

For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests that inlining provides, as well as the caching benefits achieved through using external files. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser's cache.

Reduce DNS Lookups

The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people's names to their phone numbers. When you type www.yahoo.com into your browser, a DNS resolver contacted by the browser returns that server's IP address. DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname. The browser can't download anything from this hostname until the DNS lookup is completed.

DNS lookups are cached for better performance. This caching can occur on a special caching server, maintained by the user's ISP or local area network, but there is also caching that occurs on the individual user's computer. The DNS information remains in the operating system's DNS cache (the “DNS Client service” on Microsoft Windows). Most browsers have their own caches, separate from the operating system's cache. As long as the browser keeps a DNS record in its own cache, it doesn't bother the operating system with a request for the record.

Internet Explorer caches DNS lookups for 30 minutes by default, as specified by the DnsCacheTimeout registry setting. Firefox caches DNS lookups for 1 minute, controlled by the network.dnsCacheExpiration configuration setting. (Fasterfox changes this to 1 hour.)

When the client's DNS cache is empty (for both the browser and the operating system), the number of DNS lookups is equal to the number of unique hostnames in the web page. This includes the hostnames used in the page's URL, images, script files, stylesheets, Flash objects, etc. Reducing the number of unique hostnames reduces the number of DNS lookups.

Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times. My guideline is to split these components across at least two but no more than four hostnames. This results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads.

Minify JavaScript and CSS

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Obfuscation is an alternative optimization that can be applied to source code. It's more complex than minification and thus more likely to generate bugs as a result of the obfuscation step itself. In a survey of ten top U.S. web sites, minification achieved a 21% size reduction versus 25% for obfuscation. Although obfuscation has a higher size reduction, minifying JavaScript is less risky.

In addition to minifying external scripts and styles, inlined <script> and <style> blocks can and should also be minified. Even if you gzip your scripts and styles, minifying them will still reduce the size by 5% or more. As the use and size of JavaScript and CSS increases, so will the savings gained by minifying your code.

Avoid Redirects

Redirects are accomplished using the 301 and 302 status codes. Here's an example of the HTTP headers in a 301 response:

HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html

The browser automatically takes the user to the URL specified in the Location field. All the information necessary for a redirect is in the headers. The body of the response is typically empty. Despite their names, neither a 301 nor a 302 response is cached in practice unless additional headers, such as Expires or Cache-Control, indicate it should be. The meta refresh tag and JavaScript are other ways to direct users to a different URL, but if you must do a redirect, the preferred technique is to use the standard 3xx HTTP status codes, primarily to ensure the back button works correctly.

The main thing to remember is that redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

One of the most wasteful redirects happens frequently and web developers are generally not aware of it. It occurs when a trailing slash (/) is missing from a URL that should otherwise have one. For example, going to http://astrology.yahoo.com/astrology results in a 301 response containing a redirect to http://astrology.yahoo.com/astrology/ (notice the added trailing slash). This is fixed in Apache by using Alias or mod_rewrite, or the DirectorySlash directive if you're using Apache handlers.

Connecting an old web site to a new one is another common use for redirects. Others include connecting different parts of a website and directing the user based on certain conditions (type of browser, type of user account, etc.). Using a redirect to connect two web sites is simple and requires little additional coding. Although using redirects in these situations reduces the complexity for developers, it degrades the user experience. Alternatives for this use of redirects include using Alias and mod_rewrite if the two code paths are hosted on the same server. If a domain name change is the cause of using redirects, an alternative is to create a CNAME (a DNS record that creates an alias pointing from one domain name to another) in combination with Alias or mod_rewrite.

Remove Duplicate Scripts

It hurts performance to include the same JavaScript file twice in one page. This isn't as unusual as you might think. A review of the ten top U.S. web sites shows that two of them contain a duplicated script. Two main factors increase the odds of a script being duplicated in a single web page: team size and number of scripts. When it does happen, duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.

In addition to generating wasteful HTTP requests, time is wasted evaluating the script multiple times. This redundant JavaScript execution happens in both Firefox and Internet Explorer, regardless of whether the script is cacheable.

One way to avoid accidentally including the same script twice is to implement a script management module in your templating system. The typical way to include a script is to use the SCRIPT tag in your HTML page.

<script src=”menu_1.0.17.js”></script>

An alternative in PHP would be to create a function called insertScript.

<?php insertScript(“menu.js”) ?>

In addition to preventing the same script from being inserted multiple times, this function could handle other issues with scripts, such as dependency checking and adding version numbers to script filenames to support far future Expires headers.

Configure ETags

Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser&apos;s cache matches the one on the origin server. (An “entity” is another word a “component”: images, scripts, stylesheets, etc.) ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component. The only format constraints are that the string be quoted. The origin server specifies the component&apos;s ETag using the ETag response header.

HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: “10c24bc-4ab-457e1c1f” Content-Length: 12195

Later, if the browser has to validate a component, it uses the If-None-Match header to pass the ETag back to the origin server. If the ETags match, a 304 status code is returned reducing the response by 12195 bytes for this example.

GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: “10c24bc-4ab-457e1c1f” HTTP/1.1 304 Not Modified

The problem with ETags is that they typically are constructed using attributes that make them unique to a specific server hosting a site. ETags won&apos;t match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests. By default, both Apache and IIS embed data in the ETag that dramatically reduces the odds of the validity test succeeding on web sites with multiple servers.

The ETag format for Apache 1.3 and 2.x is inode-size-timestamp. Although a given file may reside in the same directory across multiple servers, and have the same file size, permissions, timestamp, etc., its inode is different from one server to the next.

IIS 5.0 and 6.0 have a similar issue with ETags. The format for ETags on IIS is Filetimestamp:ChangeNumber. A ChangeNumber is a counter used to track configuration changes to IIS. It&apos;s unlikely that the ChangeNumber is the same across all IIS servers behind a web site.

The end result is ETags generated by Apache and IIS for the exact same component won&apos;t match from one server to another. If the ETags don&apos;t match, the user doesn&apos;t receive the small, fast 304 response that ETags were designed for; instead, they&apos;ll get a normal 200 response along with all the data for the component. If you host your web site on just one server, this isn&apos;t a problem. But if you have multiple servers hosting your web site, and you&apos;re using Apache or IIS with the default ETag configuration, your users are getting slower pages, your servers have a higher load, you&apos;re consuming greater bandwidth, and proxies aren&apos;t caching your content efficiently. Even if your components have a far future Expires header, a conditional GET request is still made whenever the user hits Reload or Refresh.

If you&apos;re not taking advantage of the flexible validation model that ETags provide, it&apos;s better to just remove the ETag altogether. The Last-Modified header validates based on the component&apos;s timestamp. And removing the ETag reduces the size of the HTTP headers in both the response and subsequent requests. This Microsoft Support article describes how to remove ETags. In Apache, this is done by simply adding the following line to your Apache configuration file:

FileETag none

Make Ajax Cacheable

One of the cited benefits of Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using Ajax is no guarantee that the user won&apos;t be twiddling his thumbs waiting for those asynchronous JavaScript and XML responses to return. In many applications, whether or not the user is kept waiting depends on how Ajax is used. For example, in a web-based email client the user will be kept waiting for the results of an Ajax request to find all the email messages that match their search criteria. It&apos;s important to remember that “asynchronous” does not imply “instantaneous”.

To improve performance, it&apos;s important to optimize these Ajax responses. The most important way to improve the performance of Ajax is to make the responses cacheable, as discussed in Add an Expires or a Cache-Control Header. Some of the other rules also apply to Ajax:

• Gzip Components
• Reduce DNS Lookups
• Minify JavaScript
• Avoid Redirects
• Configure ETags

Let&apos;s look at an example. A Web 2.0 email client might use Ajax to download the user&apos;s address book for autocompletion. If the user hasn&apos;t modified her address book since the last time she used the email web app, the previous address book response could be read from cache if that Ajax response was made cacheable with a future Expires or Cache-Control header. The browser must be informed when to use a previously cached address book response versus requesting a new one. This could be done by adding a timestamp to the address book Ajax URL indicating the last time the user modified her address book, for example, &t=1190241612. If the address book hasn&apos;t been modified since the last download, the timestamp will be the same and the address book will be read from the browser&apos;s cache eliminating an extra HTTP roundtrip. If the user has modified her address book, the timestamp ensures the new URL doesn&apos;t match the cached response, and the browser will request the updated address book entries.

Even though your Ajax responses are created dynamically, and might only be applicable to a single user, they can still be cached. Doing so will make your Web 2.0 apps faster.

Flush the Buffer Early

When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.

A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.

Example:

… <!– css, js –> </head> <?php flush(); ?> <body> … <!– content –>

Yahoo! search pioneered research and real user testing to prove the benefits of using this technique.

Use GET for AJAX Requests

The Yahoo! Mail team found that when using XMLHttpRequest, POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it&apos;s best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies). The maximum URL length in IE is 2K, so if you send more than 2K data you might not be able to use GET.

An interesting side affect is that POST without actually posting any data behaves like GET. Based on the HTTP specs, GET is meant for retrieving information, so it makes sense (semantically) to use GET when you&apos;re only requesting data, as opposed to sending data to be stored server-side.

Post-load Components

You can take a closer look at your page and ask yourself: “What&apos;s absolutely required in order to render the page initially?”. The rest of the content and components can wait.

JavaScript is an ideal candidate for splitting before and after the onload event. For example if you have JavaScript code and libraries that do drag and drop and animations, those can wait, because dragging elements on the page comes after the initial rendering. Other places to look for candidates for post-loading include hidden content (content that appears after a user action) and images below the fold.

Tools to help you out in your effort: YUI Image Loader allows you to delay images below the fold and the YUI Get utility is an easy way to include JS and CSS on the fly. For an example in the wild take a look at Yahoo! Home Page with Firebug&apos;s Net Panel turned on.

It&apos;s good when the performance goals are inline with other web development best practices. In this case, the idea of progressive enhancement tells us that JavaScript, when supported, can improve the user experience but you have to make sure the page works even without JavaScript. So after you&apos;ve made sure the page works fine, you can enhance it with some post-loaded scripts that give you more bells and whistles such as drag and drop and animations.

Preload Components

Preload may look like the opposite of post-load, but it actually has a different goal. By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you&apos;ll need in the future. This way when the user visits the next page, you could have most of the components already in the cache and your page will load much faster for the user.

There are actually several types of preloading:

• Unconditional preload – as soon as onload fires, you go ahead and fetch some extra components. Check google.com for an example of how a sprite image is requested onload. This sprite image is not needed on the google.com homepage, but it is needed on the consecutive search result page.
• Conditional preload – based on a user action you make an educated guess where the user is headed next and preload accordingly. On search.yahoo.com you can see how some extra components are requested after you start typing in the input box.
• Anticipated preload – preload in advance before launching a redesign. It often happens after a redesign that you hear: “The new site is cool, but it&apos;s slower than before”. Part of the problem could be that the users were visiting your old site with a full cache, but the new one is always an empty cache experience. You can mitigate this side effect by preloading some components before you even launched the redesign. Your old site can use the time the browser is idle and request images and scripts that will be used by the new site

Reduce the Number of DOM Elements

A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.

A high number of DOM elements can be a symptom that there&apos;s something that should be improved with the markup of the page without necessarily removing content. Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there&apos;s a better and more semantically correct way to do your markup.

A great help with layouts are the YUI CSS utilities: grids.css can help you with the overall layout, fonts.css and reset.css can help you strip away the browser&apos;s defaults formatting. This is a chance to start fresh and think about your markup, for example use <div>s only when it makes sense semantically, and not because it renders a new line.

The number of DOM elements is easy to test, just type in Firebug&apos;s console:
document.getElementsByTagName('*').length

And how many DOM elements are too many? Check other similar pages that have good markup. For example the Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).

Split Components Across Domains

Splitting components allows you to maximize parallel downloads. Make sure you&apos;re using not more than 2-4 domains because of the DNS lookup penalty. For example, you can host your HTML and dynamic content on www.example.org and split static components between static1.example.org and static2.example.org

For more information check “Maximizing Parallel Downloads in the Carpool Lane” by Tenni Theurer and Patty Chi.

Minimize the Number of iframes

Iframes allow an HTML document to be inserted in the parent document. It&apos;s important to understand how iframes work so they can be used effectively.

<iframe> pros:

• Helps with slow third-party content like badges and ads
• Security sandbox
• Download scripts in parallel

<iframe> cons:

• Costly even if blank
• Blocks page onload
• Non-semantic

No 404s

HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.

Some sites have helpful 404s “Did you mean X?”, which is great for the user experience but also wastes server resources (like database, etc). Particularly bad is when the link to an external JavaScript is wrong and the result is a 404. First, this download will block parallel downloads. Next the browser may try to parse the 404 response body as if it were JavaScript code, trying to find something usable in it.

Reduce Cookie Size

HTTP cookies are used for a variety of reasons such as authentication and personalization. Information about cookies is exchanged in the HTTP headers between web servers and browsers. It&apos;s important to keep the size of cookies as low as possible to minimize the impact on the user&apos;s response time.

For more information check “When the Cookie Crumbles” by Tenni Theurer and Patty Chi. The take-home of this research:

• Eliminate unnecessary cookies
• Keep cookie sizes as low as possible to minimize the impact on the user response time
• Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected
• Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

 Use Cookie-free Domains for Components

When the browser makes a request for a static image and sends cookies together with the request, the server doesn&apos;t have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.

If your domain is www.example.org, you can host your static components on static.example.org. However, if you&apos;ve already set cookies on the top-level domain example.org as opposed to www.example.org, then all the requests to static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static components there, and keep this domain cookie-free. Yahoo! uses yimg.com, YouTube uses ytimg.com, Amazon uses images-amazon.com and so on.

Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache the components that are requested with cookies. On a related note, if you wonder if you should use example.org or www.example.org for your home page, consider the cookie impact. Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it&apos;s best to use the www subdomain and write the cookies to that subdomain.

Minimize DOM Access

Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should: 

• Cache references to accessed elements
• Update nodes “offline” and then add them to the tree
• Avoid fixing layout with JavaScript

For more information check the YUI theatre&apos;s “High Performance Ajax Applications” by Julien Lecomte.

Develop Smart Event Handlers

Sometimes pages feel less responsive because of too many event handlers attached to different elements of the DOM tree which are then executed too often. That&apos;s why using event delegation is a good approach. If you have 10 buttons inside a div, attach only one event handler to the div wrapper, instead of one handler for each button. Events bubble up so you&apos;ll be able to catch the event and figure out which button it originated from. 

You also don&apos;t need to wait for the onload event in order to start doing something with the DOM tree. Often all you need is the element you want to access to be available in the tree. You don&apos;t have to wait for all images to be downloaded. DOMContentLoaded is the event you might consider using instead of onload, but until it&apos;s available in all browsers, you can use the YUI Event utility, which has an onAvailable method.

For more information check the YUI theatre&apos;s “High Performance Ajax Applications” by Julien Lecomte.

Choose <link> over @import

One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.

In IE @import behaves the same as using <link> at the bottom of the page, so it&apos;s best not to use it.

Avoid Filters

The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded. It also increases memory consumption and is applied per element, not per image, so the problem is multiplied.

The best approach is to avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE. If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users.

Optimize Images

After a designer is done with creating the images for your web page, there are still some things you can try before you FTP those images to your web server. 

• You can check the GIFs and see if they are using a palette size corresponding to the number of colors in the image. Using imagemagick it&apos;s easy to check using
  identify -verbose image.gif
  When you see an image useing 4 colors and a 256 color “slots” in the palette, there is room for improvement.
• Try converting GIFs to PNGs and see if there is a saving. More often than not, there is. Developers often hesitate to use PNGs due to the limited support in browsers, but this is now a thing of the past. The only real problem is alpha-transparency in true color PNGs, but then again, GIFs are not true color and don&apos;t support variable transparency either. So anything a GIF can do, a palette PNG (PNG8) can do too (except for animations). This simple imagemagick command results in totally safe-to-use PNGs:
  convert image.gif image.png
  “All we are saying is: Give PiNG a Chance!”
• Run pngcrush (or any other PNG optimizer tool) on all your PNGs. Example:
  pngcrush image.png -rem alla -reduce -brute result.png
• Run jpegtran on all your JPEGs. This tool does lossless JPEG operations such as rotation and can also be used to optimize and remove comments and other useless information (such as EXIF information) from your images.
  jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Optimize CSS Sprites

• Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
• Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
• “Be mobile-friendly” and don&apos;t leave big gaps between the images in a sprite. This doesn&apos;t affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100×100 image is 10 thousand pixels, where 1000×1000 is 1 million pixels

Don’t Scale Images in HTML

Don&apos;t use a bigger image than you need just because you can set the width and height in HTML. If you need
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image.

Make favicon.ico Small and Cacheable

The favicon.ico is an image that stays in the root of your server. It&apos;s a necessary evil because even if you don&apos;t care about it the browser will still request it, so it&apos;s better not to respond with a 404 Not Found. Also since it&apos;s on the same server, cookies are sent every time it&apos;s requested. This image also interferes with the download sequence, for example in IE when you request extra components in the onload, the favicon will be downloaded before these extra components.

So to mitigate the drawbacks of having a favicon.ico make sure:

• It&apos;s small, preferably under 1K.
• Set Expires header with what you feel comfortable (since you cannot rename it if you decide to change it). You can probably safely set the Expires header a few months in the future. You can check the last modified date of your current favicon.ico to make an informed decision.

Imagemagick can help you create small favicons

Keep Components under 25K

This restriction is related to the fact that iPhone won&apos;t cache components bigger than 25K. Note that this is the uncompressed size. This is where minification is important because gzip alone may not be sufficient. 

For more information check “Performance Research, Part 5: iPhone Cacheability – Making it Stick” by Wayne Shea and Tenni Theurer.

Pack Components into a Multipart Document

Packing components into a multipart document is like an email with attachments, it helps you fetch several components with one HTTP request (remember: HTTP requests are expensive). When you use this technique, first check if the user agent supports it (iPhone does not).

Avoid Empty Image src

Image with empty string src attribute occurs more than one will expect. It appears in two form:

1. straight HTML

<img src=”">

1. JavaScript

var img = new Image();
img.src = “”;

Both forms cause the same effect: browser makes another request to your server.

• Internet Explorer makes a request to the directory in which the page is located.
• Safari and Chrome make a request to the actual page itself.
• Firefox 3 and earlier versions behave the same as Safari and Chrome, but version 3.5 addressed this issue[bug 444931] and no longer sends a request.
• Opera does not do anything when an empty image src is encountered.

Why is this behavior bad?

1. Cripple your servers by sending a large amount of unexpected traffic, especially for pages that get millions of page views per day.
2. Waste server computing cycles generating a page that will never be viewed.
3. Possibly corrupt user data. If you are tracking state in the request, either by cookies or in another way, you have the possibility of destroying data. Even though the image request does not return an image, all of the headers are read and accepted by the browser, including all cookies. While the rest of the response is thrown away, the damage may already be done.

The root cause of this behavior is the way that URI resolution is performed in browsers. This behavior is defined in RFC 3986 – Uniform Resource Identifiers. When an empty string is encountered as a URI, it is considered a relative URI and is resolved according to the algorithm defined in section 5.2. This specific example, an empty string, is listed in section 5.4. Firefox, Safari, and Chrome are all resolving an empty string correctly per the specification, while Internet Explorer is resolving it incorrectly, apparently in line with an earlier version of the specification, RFC 2396 – Uniform Resource Identifiers (this was obsoleted by RFC 3986). So technically, the browsers are doing what they are supposed to do to resolve relative URIs. The problem is that in this context, the empty string is clearly unintentional.

HTML5 adds to the description of the tag&apos;s src attribute to instruct browsers not to make an additional request in section 4.8.2:

The src attribute must be present, and must contain a valid URL referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. If the base URI of the element is the same as the document&apos;s address, then the src attribute&apos;s value must not be the empty string.

Hopefully, browsers will not have this problem in the future. Unfortunately, there is no such clause for <script src=”"> and <link href=”">. Maybe there is still time to make that adjustment to ensure browsers don&apos;t accidentally implement this behavior.

This rule was inspired by Yahoo!&apos;s JavaScript guru Nicolas C. Zakas. For more information check out his article “Empty image src can destroy your site“.

For example, you can specify an icon for your web application used to represent it when added to the Home screen on iPhone OS, as described in “Specifying a Webpage Icon for Web Clip.” You can also minimize the Safari on iPhone OS user interface, as described in “Changing the Status Bar Appearance” and “Hiding Safari User Interface Components,” when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms.

Read “Viewport Settings for Web Applications” for how to set the viewport for web applications on iPhone OS.

Specifying a Webpage Icon for Web Clip

iPhone OS Note: The Web Clip feature is available in iPhone OS 1.1.3 and later. The apple-touch-icon-precomposed.png filename is available in iPhone OS 2.0 and later.

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iPhone OS.

• To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.pngor apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iPhone OS won’t add any effects to the icon.
• To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
  

  <link rel=”apple-touch-icon” href=”/custom_icon.png”/>

  In the above example, replace custom_icon.png with your icon filename. If you don’t want Safari on iPhone OS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.

See “Create an Icon for Your Web Application or Webpage” in iPhone Human Interface Guidelines for Web Applications for webpage icon metrics.

Specifying a Startup Image

iPhone OS Note: Specifying a startup image is available in iPhone OS 3.0 and later.

On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

In the above example, replace startup.png with your startup screen filename. On iPhone and iPod touch, the image must be 320 x 460 pixels and in portrait orientation.

Hiding Safari User Interface Components

As part of optimizing your web application for Safari on iPhone OS, have it launch in full-screen mode to look like a native application. When using full-screen mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read “Changing the Status Bar Appearance” for how to minimize the status bar.

Set the apple-mobile-web-app-capable meta tag to yes to turn on this feature. For example, the following HTML displays web content in full-screen mode.

You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

Changing the Status Bar Appearance

If your web application displays in full-screen mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iPhone OS. Do so using the status-bar-style meta tag.

This meta tag has no effect unless you first specify full-screen mode as described in “Hiding Safari User Interface Components.” Then use the status bar style meta tag,apple-mobile-web-app-status-bar-style, to change the appearance of the status bar depending on your application needs. For example, if you want to use the entire screen, set the status bar style to translucent black.

For example, the following HTML sets the background color of the status bar to black:

1- Preloaders.net : Preloaders.net has a nice categorized collection of GIF preloaders. You can set your preloaders’ background (transparent is also available) and foreground color, size with contrains proportion option and it’s animation speed.

2- Ajaxload : Ajaxload.info is still in Beta and the only option for it’s loading icon that you can set is it’s background and foreground color.

3- Load Info : LoadInfo.net options for it’s loading icon are background and foreground color and three predefined sizes which are 16×16, 24×24 and 48×48.

4- Web Script Lab : Web Script Lab’s Ajax Loading GIF Generator options for it’s loading icon are background and foreground color and three predefined speed which are normal, fast and slow.

5- Chimply : Chimply is in Beta stage but it has also a nice collection of categorized Ajax loading icons. Common settings include background and foreground colors and it’s width. Many advanced options will appear depending on what type of preloader you are going to select.

6- mentalized Activity Indicators 

7- SanBaldo Ajax Loading Animated GIF

Specifying a Webpage Icon for iPhone Home

We have two ways to design a custom icon that users can display on their Home screens using the Web Clip feature:

• a simple image where iPhone 1.1.3 and later automatically adds some visual effects so that it coordinates with the built-in icons. Specifically, iPhone 1.1.3 adds:
  • rounded corners
  • drop shadow
  • reflective shine

This is the image for Luscarpa.com:

and this is how it is on iphone home screen:

• an image precomposed, to this image iPhone doesn’t add effects.
  This is the image precomposed for Luscarpa.com:

  and this is how it is on iphone home screen:

How we can provide this image? There are two ways:

• place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. With this method you specify an icon for the entire website (every page on the website),
• add a link element to the webpage, as in:

<link rel=”apple-touch-icon” href=”/custom_icon.png”/>

<link rel=”apple-touch-icon” href=”/custom_icon.png”/>

or

<link rel=”apple-touch-icon-precomposed” href=”/custom_icon_precomposed.png”/>

<link rel=”apple-touch-icon-precomposed” href=”/custom_icon_precomposed.png”/>

With this code you specify an icon for a single webpage or replace the website icon with a webpage-specific icon.

Hide Safari Components

Add this line if you want that your web app/website don’t show the safari user interface components:

<meta content=”yes” />

<meta content=”yes” />

Status Bar Appearance

You can change the Status Bar of web app/website using the following line of code:

<meta content=”black” />

<meta content=”black” />

There are three different colors:

1-default

2-black

3-black-translucent

NOTE: If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

Specifying a Startup Image

On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this:

<link rel=”apple-touch-startup-image” href=”/startup.png”>

<link rel=”apple-touch-startup-image” href=”/startup.png”>

Here an example of my custom startup:

The image must be a png file and his dimensions 320 x 460 pixels in portrait orientation.
NOTE: this option works only if apple-mobile-web-app-capable is set to yes

Standalone Detection

You can develope custom features or effects for your standalone version of site, you can detect it using the boolean var window.navigator.standalone from javascript.

Note & Conclusion

All these tips only works for web pages that have been saved to the home screens and opened from there, if you access to your website using safari you don’t have this customizations. Remember also that any new link will be open in new browser tab so you lost these settings.

Is my opinion that if you develop a strongly ajax-oriented web application, so to avoid the users from stressing clicking and page refresh, allowing them to use just the “first page” , all these settings can be make your app amazing.

This website uses these options, you can test them adding it to your home screen of iPhone/iPod Touch, actually I’m using wordpress so there isn’t a customization to load all site with ajax so you can see the home page like web application, but if you click on a post link you will be redirect to safari.

Resources

• Safari Dev Center – Safari Web Content Guide

If you are using VB itself, then you will need to either include the reference to MS Excel or Create it as an object and then run the above code with the declaration to excel.. e.g

Dim Result
Dim obEx As New Excel.Application ‘Early Binding
Result=obEx.WorksheetFunction.XIRR(Conditions)
obEx.Quit
Set obEx = Nothing

OR

Dim obEx2 as Object
Set obEx2 = CreateObject(“Excel.Application”)
Result=obEx2.WorksheetFunction.XIRR(Conditions)
obEx2.Quit
Set obEx2 = Nothing
Using VB.NET
URL : http://msdn.microsoft.com/en-us/library/microsoft.visualbasic.financial.irr.aspx
           http://msdn.microsoft.com/en-us/library/daksysx3.aspx
‘ Define money format.
Dim MoneyFmt As String = “###,##0.00″
‘ Define percentage format.
Dim PercentFmt As String = “#0.00″
Dim values(4) As Double
‘ Business start-up costs.
values(0) = -70000
‘ Positive cash flows reflecting income for four successive years.
values(1) = 22000
values(2) = 25000
values(3) = 28000
values(4) = 31000

‘ Use the IRR function to calculate the rate of return.
‘ Guess starts at 10 percent.
Dim Guess As Double = 0.1
‘ Calculate internal rate.
Dim CalcRetRate As Double = IRR(values, Guess) * 100
‘ Display internal return rate.
MsgBox(“The internal rate of return for these cash flows is ” &
    Format(CalcRetRate, CStr(PercentFmt)) & ” percent.”)

Private Sub XIRRSample()
    ‘Print some samples of the XIRR function.

    Dim Flow() As Variant
    ReDim Flow(1 To 2, 1 To 2)

    Flow(1, 1) = -10000#
    Flow(2, 1) = #4/1/1984#
    Flow(1, 2) = 50674#
    Flow(2, 2) = #4/1/1994#

    GoSub One_XIRRSample
   

    ReDim Flow(1 To 2, 1 To 2)

    Flow(1, 1) = 10000#
    Flow(2, 1) = #4/1/1984#
    Flow(1, 2) = -50674#
    Flow(2, 2) = #4/1/1994#

    GoSub One_XIRRSample
�
    ReDim Flow(1 To 2, 1 To 2)

    Flow(1, 1) = -10000#
    Flow(2, 1) = #4/1/1989#
    Flow(1, 2) = 20660#
    Flow(2, 2) = #4/1/1994#

    GoSub One_XIRRSample

    ReDim Flow(1 To 2, 1 To 2)

    Flow(1, 1) = 10000#
    Flow(2, 1) = #4/1/1989#
    Flow(1, 2) = -20660#
    Flow(2, 2) = #4/1/1994#

    GoSub One_XIRRSample
    ReDim Flow(1 To 2, 1 To 2)
    Flow(1, 1) = -10000#
    Flow(2, 1) = #4/1/1993#
    Flow(1, 2) = 10482#
    Flow(2, 2) = #4/1/1994#

    GoSub One_XIRRSample
   

    ReDim Flow(1 To 2, 1 To 5)
    Flow(1, 1) = -10000#
    Flow(2, 1) = #1/1/1992#
    Flow(1, 2) = 2750#
    Flow(2, 2) = #3/1/1992#
    Flow(1, 3) = 4250#
    Flow(2, 3) = #10/30/1992#
    Flow(1, 4) = 3250#
    Flow(2, 4) = #2/15/1993#
    Flow(1, 5) = 2750#
    Flow(2, 5) = #4/1/1993#

    GoSub One_XIRRSample
   

    ReDim Flow(1 To 2, 1 To 4)

    Flow(1, 1) = -70000#
    Flow(2, 1) = #1/1/1990#
    Flow(1, 2) = 10000#
    Flow(2, 2) = #1/1/1991#
    Flow(1, 3) = 20000#
    Flow(2, 3) = #1/1/1992#
    Flow(1, 4) = 30000#
    Flow(2, 4) = #1/1/1993#

    GoSub One_XIRRSample
    ReDim Flow(1 To 2, 1 To 2)
    Flow(1, 1) = -10000#
    Flow(2, 1) = #4/1/1984#
    Flow(1, 2) = 10000#
    Flow(2, 2) = #4/1/1994#

    GoSub One_XIRRSample
    ReDim Flow(1 To 2, 1 To 2)
    Flow(1, 1) = -10000#
    Flow(2, 1) = #4/1/1984#
    Flow(1, 2) = 0#
    Flow(2, 2) = #4/1/1994#

    GoSub One_XIRRSample
    ReDim Flow(1 To 2, 1 To 2)

    Flow(1, 1) = -10000#
    Flow(2, 1) = #4/1/1984#
    Flow(1, 2) = -100#
    Flow(2, 2) = #4/1/1994#

    GoSub One_XIRRSample

    ReDim Flow(1 To 2, 1 To 512)

    Flow(1, 1) = -694369.54
    Flow(2, 1) = #10/22/1997#

    Dim intCur As Integer
    intCur = 2
    Dim lngMon As Long
    lngMon = 12 + 12 * 1997
    Do While lngMon <= 7 + 12 * 2009
        Dim bytMon As Byte
        Dim intYr As Integer
        bytMon = lngMon Mod 12
        intYr = lngMon \ 12
        If bytMon = 0 Then
            bytMon = 12
            intYr = intYr – 1
        End If

        Flow(1, intCur) = 8421.79
        Flow(2, intCur) = DateSerial(intYr, bytMon, 25)

        intCur = intCur + 1
        lngMon = lngMon + 1&
    Loop

    ReDim Preserve Flow(1 To 2, 1 To intCur – 1)

    GoSub One_XIRRSample

    Exit Sub

One_XIRRSample:

    Dim intCurFlow As Integer
    For intCurFlow = LBound(Flow, 2) To UBound(Flow, 2)
        Debug.Print Right$(Space$(3) & Format$(intCurFlow, “#,##0″), 3);
        Debug.Print ” ” & Right$(Space$(20) & Format$(Flow(1, intCurFlow), “$#,##0.00″), 20);
        Debug.Print ” ” & Format$(Flow(2, intCurFlow), “Short Date”);
        Debug.Print
    Next intCurFlow

    Debug.Print “XIRR = ” & Format$(XIRR(Flow()) * 100#, “#,##0.000 000″) & “%”
    Debug.Print

    Return
End Sub

Previously called an NT service, the core function of a Windows aervice is to run an application in the background. There are few things that make them different from a Windows application. A Windows service starts much before any user logs in to the system (if it has been setup to start at boot up process). A Windows service can also be setup in such a way that it requires a user to start it manually – the ultimate customization!

Windows services have their own processes, and hence run very efficiently. Normally a Windows service will not have a user interface for the simple reason that it can be run even if no one is logged into the system, but this is not a rule — you can still have a Windows service with a user interface.

In windows 2000 you can view a list of services currently running on your computer by opening Control Panel -> Administrative Tools -> Services

Creating A Windows Service in VB.NET

Prior to VB.NET, creating a Windows service was a lot of work, and was left to the C++ guru’s, as you had to use some system level procedures, which were extremely difficult. Thanks to VB.NET, however, this is becoming very easy and we shall now learn how to create a Windows Service in VB.NET.

There are a few things that you should know before we dive in, however. Windows services are not available under Windows 95, 98 or ME — you need to have Windows NT or Windows 2000 to run services.

The advantage to use .NET is that the framework incorporates all of the classes, which shall help us to create, install and control a Windows Service. Open Visual Studio .NET and create a new Windows service project, which we shall call “MyService”. Click OK.

Add a timer control from the toolbar in the Components tab (not the Windows Forms tab!). In the properties window of Timer1, change the interval property to 10000, which is 10 seconds.

Examining The Source Code

Double click the timer1 control to open up the code window for Timer1_Elapsed. Type in the following code:

Dim MyLog As New EventLog() ' create a new event log
' Check if the the Event Log Exists
If Not MyLog.SourceExists("MyService") Then
    MyLog.CreateEventSource("MyService", "Myservice Log") ' Create Log
End If
MyLog.Source = "MyService"
' Write to the Log
MyLog.WriteEntry("MyService Log", "This is log on " & _
CStr(TimeOfDay), EventLogEntryType.Information)

Type in the following code for the OnStart procedure:

Timer1.Enabled = True

Type in the following code in the OnStop procedure:

Timer1.Enabled = False

Our application is now ready, but there are a few things that we need to do before we move ahead when we build this application. The executable created is not a Windows application, and hence you can’t just click and run it — it needs to be installed as a service, but don’t worry, we don’t have to do it manually — VB.Net has a facility where we can add an installer to our program and then use a utility to install the service.

Adding an Installer to the Project

Open the service1.vb design window, right click on it and select Add Installer option, which will add an installer project (called ProjectInstaller.vb) with two controls — ServiceProcessInstaller1 and ServiceInstaller1 — to our existing project.

Select the ServiceInstaller1 control and open the property window. Change the ServiceName property and DisplayName property to MyService (this is the name you want to appear in the list of services in the services window). Select the ServiceProcessInstaller1 control and open the property window. Change the Account property to LocalSystem (this needs to be specified as we need to run the service on our local machine).

Now it’s time for us to build the application and create an executable. Select Build Solution from the Build menu to create an executable with installation instructions for the service.

Installing the Service

To install our service we need to use the InstallUtil program, which is a .NET utility to install Windows services. You can find it in C:\WINNT\Microsoft.NET\Framework\v1.0.3705

Note: This directory might be different on your computer, depending upon the version of the .NET framework you are working with Alternatively, you could run a .NET Command Window by selecting Start –> Programs -> Microsoft Visual Studio .NET -> Visual Studio .NET Tools >- Visual Studio .NET Command Prompt, which sets all of the required paths for you.

Type the following command in the command window:

InstallUtil "d:\My documents\development\applications\MyService\bin\Myservice.exe"

This is the path for the executable of the service we just created. Remember that VB.NET created the executable in the Bin folder under the project folder, so make sure you change this to your executable path.

Starting the service

Running a service and starting a service are two different things — when you install the service with InstallUtil you are running the service, but have yet have to start it.

To view and start the service, open Control Panel -> Administrative Tools. Now click Services, locate MyService, right click on it and select Start to start it:

Our service is now started. Open the Event Viewer from Administrative Tools and click Application Log to see the logs created by the Service (MyService) every 10 seconds. If you don’t see any logs click refresh (F5). You will have to keep refreshing to see the latest event logs:

Stopping the Service

This procedure is similar to installing the service but now we shall run the InstallUtil with the /U parameter, which will uninstall the service:

InstallUtil /U "d:\My documents\development\applications\MyService\bin\Myservice.exe"

(or the executable path on your computer).

Take note of the message to confirm that the service was uninstalled properly.

Tips

• Stop the service and close the service window before you install/uninstall the service.
• Always uninstall/install if you make any changes to the service application.
• Try avoiding a user interface, inputs and message boxes in the service application.
• Open ProjectInstaller.vb, select the ServiceInstaller1 control, and open the property window. Change the StartType property to automatic if you want to start the service automatically.
• If you want to debug your windows service, it isn’t quite as straight forward as usual. Start your service, then go to Debug|Processes in the Visual Studio IDE. Find MyService.exe (you may need to check a box to display system processes), and attach the debugger. Then you’ll be able to set breakpoints as usual – but not in the Start procedure

Conclusion

Windows services are often overlooked. You should use a Windows service instead of a standard application when you need to monitor or administer something in the background. The only disadvantage of using a service is the installation procedure, but I bet that there are more positive aspects then negative when selecting a Windows service over an application running with Windows Scheduler!

YouTube – Software Development Life Cycles: Waterfall Model, V-Model
  

The question comes up all the time across hundreds of .net forums.  Here it goes: “I just created a vb.net application that works perfectly fine on my local machine, however I need to run this one application on a server so other users can use it.  When I try to run it on the server I get a TON of errors.” The error generally looks like this (warning: It’s pretty long and ugly):

So the question is why does this happen now in .net, how can I get around it, and how do I stop it from happening in the future.  Before I get right down to the answers I would like to explain this (so you fully understand why this happens).

VB6 Gone Are The Days 

Gone are the days where you could write a VB6 application, compile it, throw it on a UNC shared path and apply some security rights to your end users.  That was too simple…but in reality it was a pretty poor method of doing things.  You would have to constantly be modifying the rights on network folders, your admins hated you with a passion.

CLR and CAS 

With the .net framework programs that run on the CLR use CAS (code access security).  What this means is you no longer assign rights to users / groups on a network.  Instead you assign trust to actual code that the programmer has developed.  Basically your applications assembly file is compared with the security policy of the machine.  When you run your application on your local machine and it works just brilliantly fine it’s due to the fact that you are running your code in the MyComputer zone.  By default the MyComputer zone has FullTrust (unrestricted permissions) to do virtually anything.  This is why the application works on your local pc just fine…now why is it not working on the server.

It Just Wont Work On That Server 

Your application bails on the server because the server is more restrictive given its zone is the LocalIntranet zone which does not have full trust to run an executable by just anyone from any machine.  In addition, it is a lot more secure (and that’s the whole idea behind microsoft security from now on, make it more secure).  It also makes a lot more sense since now not anyone can just throw executables in a server shared and run them.

Lets Discuss a Complete Example 

Pictures are worth 1000s of words..ya…so it’s best to stop yapping and to start showing.  Let’s go through a full blown example of an application that works fine on my local pc and bails on the server.  First and foremost it’s worthwhile to note that on most occassions applications bail on things that access other network structures, SQL data retrieval (working with the database), etc.  The reason why I have placed a bold item on the second item is because that is what we will work on as well as in most cases this is what most people run into problems tapping into a database.

So first and foremost the application.  We are going to write a useless application that simply pulls EmployeeID numbers from the Northwind database (The sample database given to us by MS on SQL Server).  The application has no use nor will we be writing pure beautiful code that takes advantage of stored procedures, triggers, yada yada yada.  The point of this post is not how to write clean code that taps into a database, it is simply to demonstrate how to avoid the security policy error in .net.

So lets start by creating a VB winform application.

I’m using VS 2005 so you may have to work around if you are using 2003..the code and the methodology is the same in both.

Click file->project

Select Visual Basic and highlight Windows

Select Windows Application

For the name you can call it AvoidSecurityException and store it anywhere (I usually use C:\Temp for temporary projects, and you can call it whatever you want.

Now we are going to work on our project.  Drag and drop a Button onto your form, it doesnt matter where.

Double Click the button so that it takes you to the code behind page.  Since we will be dealing with databases you need to import the System.Data.SQLClient namespace.  So above the public class Form1 add the text Imports System.Data.SQLClient.

Now we have the SQLClient namespace we can start writing our code in the Button1_Click event.   

We are pretty much done, told you it was a worthless application, just to show you what happens when placing this app on a server as opposed to your local machine.  Now go ahead and build your application:

From the menu at the top select Build->Build AvoidSecurityException (the name might be different here).

Once you build this application you can run it on your local machine.  Either run it within Visual Studio, or double click the executable found in your projects bin/debug directory.  You will notice a simple loop that message boxes the employee id numbers, hopefully there isn’t alot, if there is you will need to end the program (ctrl alt delete).

Great your program works, now you need to deploy it to a server so that all your other users on your network can use this program.  So you copy and paste your .exe file (the one that was in your bin/debug directory) to a network server share folder \\servername\folder.  Now you double click the exe from that shared network folder and you get that same message about an unhandled exception all the way down to System.Data.SqlClient.SqlClientPermission.

How To Avoid This 

There’s a couple of ways to avoid this.  You can do it the right way which takes a bit longer and seems to be a bit more complex, or you can do it the other way which is much quicker but is poor practice and a security vulnerability.

The 2 ways are:

• Create a strong name key and use it in your applications AssemblyInfo.vb file
• Modify the security policy to fully trust the LocalIntranet zone

The 2nd method (bad way of doing things) 

(From the .net security blog: http://blogs.msdn.com/shawnfa/default.aspx)

The easiest way to modify your security policy is by using the Microsoft .NET Framework Configuration utility from the control panel.  You can also run this tool from the command line by running mscorcfg.msc.

1. Expand the Runtime Security Policy folder
2. Expand the Machine policy level
3. Expand the Code Groups folder

To modify the polcy to trust a specific strong name:

1. Right click on All_Code, and select New
2. Create a new code group for your strong name, and hit next
3. Select a strong name membership condition from the drop down box
4. Hit the import button, and select your assembly.  The configuration tool will import your public key.  If you want to trust everything you sign with this key, leave the name and version boxes unchecked
5. Select the FullTrust permission set

To modify the policy to allow full trust for all Intranet assemblies:

1. Expand the All_Code code group
2. Right click the LocalIntranet_Zone code group, and select properties
3. Switch to the Permission Set tab, and select FullTrust

Reference: .net security blog 

The Right Way of doing it 

The correct and more preferred method is to create a strong name using the sn.exe tool and using that key in your application’s AssemblyInfo file to get around these horrendous errors.  So point to your visual studio 2005 program group from the start menu.  Select Visual Studio Tools then select Visual Studio Command Line

The command line will open.  Type in:

sn -k mykey.snk 

You can change mykey to any value you want such as myappskey.snk the main thing you want to make sure is you run it with the -k option.

sn -k myappskey.snk 

In my apps example I will stick with mykey.snk.  Result should look much like this

Notice how the key has generated and written as mykey.snk within the active directory.  Simply take and move this key to where you would like to store it.  Make sure you place it somewhere visible to the application, in addition do not store it in a local protected folder while the application is sitting on some shared server.  It needs to be able to see it (does not mean it has to physically see it within the same directory, just means it should be able to call it or have visibility to it).  Let us say you stored the key on some shared network drive.  Fine and dandy, now we need to modify our applications AssemblyInfo file to accept this key.

So go back to your project and look in the Solution Explorer for the AssemblyInfo.vb file.  If you do not see it click the “Show All Files” icon (second small icon on the solution explorer).  Then drill down into “My Project” and you will see it:

Double click this file, and you will be presented with something like so:

You will need to add the AssemblyKeyFile attribute to this so that your assembly is aware of your key.  So you can add it anywhere in this file.  I have added it under the AssemblyTrademark:

Notice it as:

<Assembly: AssemblyKeyFile(“\\networkserver\sharedfolder\mykey.snk”)> 

You will need to modify the path to point to where you have stored your .snk file.  Now rebuild your project.

Copy over your newly generated exe file to the shared network path so that all the other users can now run your application.  Run your application from that shared folder on that server and Voila you no longer get the security exception error.  The application message boxes the records from the database.

If You Still Get The Error 

Strange, you shouldn’t.  But if you did make sure your key (.snk) file is visible on some shared network folder.  Make sure your AssemblyInfo.vb file has an AssemblyVersion attribute (the line right before the last line in the image posted of the AssemblyInfo file).  Make certain you got the latest .exe compiled and that you’ve copied that file over to the server.

Finally last thing you can do is to select Build->Publish Project from VS 2005 and tell it to publish the .exe file to a shared (UNC) server.  Go through the wizard and get it to copy it automatically.  Sometimes you will need to install the latest .net framework on the server that hosts the exe file. 

One of my responsibilities where I work is to provide custom software for our BlackBerry smart phones. As of June 30, 2010, BlackBerry MDS Runtime will no longer be supported by RIM (Research in Motion). This posed a problem since we upgraded our users to new BlackBerry Bold 9700s this year. The new BlackBerry application platform focuses on two approaches; BlackBerry Widgets and Java. BlackBerry Widgets utilize web development languages such as HTML, CSS, Javascript and AJAX. Since I am not very familiar with Java development, I chose to migrate our existing MDS applications to BlackBerry Widgets.

RIM offers a plug-in for Microsoft Visual Studio that allows .NET developers to use a .NET programming environment to develop BlackBerry applications. The MDS plug-in worked great and provided the ability to reference a .NET Web Service with ease. The good news is, this plug-in has been updated to support new BlackBerry Widgets, however it’s still in Beta form. If you need to reference a web service in a BlackBerry Widget app you’ll notice immediately that it’s not as easy in the new web plug-in as was in the MDS plug-in. Not to worry though. With a little bit of AJAX, you can consume a web service without any problem and I’m going to explain and demonstrate how to do this from start to finish.

For this example, we’ll do the following:

• Create a BlackBerry Widget project in Microsoft Visual Studio 2008.
• Create a .NET Web Service with a simple “Hello World” method.
• Invoke the web service method in the BlackBerry Widget app using XMLHttpRequest.

First, you’ll need a couple of things before you can create a BlackBerry Widget; the BlackBerry Web Plug-in for Visual Studio and the Sun Java Development Kit 1.6 or Higher. Follow this link to get the Plug-in and JDK. The Web Plug-in for Eclipse is also provided, but for this example we’ll be using the Visual Studio Plug-in.

Once you have the Plug-in and JDK installed, open Visual Studio 2008 and Create a new Project. Here you should simply be able to select the BlackBerry Project type, then BlackBerry Widget and hit OK. However, since the Plug-in is still in Beta it’s a bit buggy. Before you can actually save a BlackBerry Widget project you have to create a separate project type first, and then add a BlackBerry Widget project as a new Project. If not, you’ll be presented with the following error when trying to save the project.

I didn’t research this issue so there could be other work-a-rounds and it’s possible you may not experience this error at all. I did encounter this error and I’m using Visual Studio Team System 2008 Development Edition and the MDS plug-in had also previously been installed.

So…instead of selecting the BlackBerry project type, expand Other Project Types and select Visual Studio Solutions. Select the Blank Solution Template, name it “HelloWorldWidget” or whatever you desire and click OK. Now, right-click on the Solution in the Solution Explorer and Add a New Project. This time, select the BlackBerry Project type, then the BlackBerry Widget Template. Again, name it “HelloWorldWidget” and click OK.

Two files will be created and added to your Widget project; config.xml and index.htm.

Before we go any further, let’s go ahead and create the Web Service. Add another New Project to your Solution. Under Visual Basic (used in this example) or Visual C# Project type, select Web and create an ASP.NET Web Service Application. Call it “HelloWorldService”. By default, a HelloWorld Web Method is already added to Service1.asmx.vb. If for whatever reason it’s not, add it.

Right click the Web Service in Solution Explorer, select Debug and Start new instance This will create a test ASP.NET Development Server we can use to call our service later.

Now let’s get back to the Widget. View the code of index.htm and add a simple input button to the body.

Eventually, clicking this button will display an alert box with the return string, “Hello World” from our web service. To do this, we just need a little AJAX script.

To keep our project neat and organized, create a New Folder in the Widget app and call it “scripts”. Right click the folder and select Add > New Item…. Select JScript from the BlackBerry category and name it “actions.js”.

Here we’re going to use XMLHttpRequest make a request to our web service and invoke the HelloWorld method. We’ll retrieve the response in XML, then parse the XML to retrieve our return string.

First, create the XMLHttpRequest object.

Now, you’ll need an event handler which will be called from the button click on the htm page. This will send the request for data to the web service. We’ll make the request by sending a GET method to the web service.

Make sure and change the url above to your test ASP.NET Development Server url.
The sayHello() function listens to the onreadystatechange property of the XMLHttpRequest object and calls another function that we’ll call callbackFunction(). This function determines when the server has completed our request and will handle the data returned.

The call back function checks for a readyState value of 4. This value indicates that the request has completed and we can use the data returned. There are other values that may be returned from this request but for this purpose we are interested in this value.
We’ll receive the data as text through the responseText property of the XMLHttpRequest object and then display it in an alert box.

Just a few more steps and we’re done! Open your config.xml file in your BlackBerry Widget application. Here you have several different configuration options you can change, however there is only one we are required to change before our widget will work correctly. We’ll need to give our widget access to the domain where our web service resides. Click Add Domain, then enter the domain into the textbox provided. Our web service is on our local machine so we’ll use http://localhost:2064. For this example, the ASP.NET Development Server is using port 2064, but this may be different on your machine.

Now let’s test it out! Make sure the widget application is set as the StartUp Project, then hit F5 (or start the debug instance from the GUI). The BlackBerry simulator should start loading and you will eventually be presented with your application. The BlackBerry Simulator is a pretty cool tool, as it does very well in simulating a BlackBerry device. You can also download other BlackBerry models to simulate from BlackBerry’s website.

Test the widget out by clicking the button that you created. Nothing happen? Good. We still have one more step before we can get a response, sorry. I wasted a lot of time trying to figure this one out, so I intentionally left it out above so it would stand out. We have to enable our web service to be invoked using SOAP and GET, as ASP.NET does not allow this by default. To do this, simply add the following code under system.web in your web service’s Web.config file.

Alright, now let’s run our widget application again! This time you should receive an alert box similar to the following after pressing the button:

Don’t worry, we’re still not finished. Our code at this point is just returning the XML from our web service method as plain text. You have a few options here. You can parse this text to retrieve the actual value, or you can return the data as XML using the responseXML property of the XMLHTTPRequest object. Then we can parse the XML with ease to get our “Hello World” string. Change your javascript callbackFunction() to look like the following:

If you want to learn more about XML Parsing, check on this link

Now the Widget application should display an alert box with a simple “Hello World” string.

You cannot call server-side code ‘directly’ from client-side code. That is because by design, the server side code executes at server side and client side code at the client. However there are some workarounds. To call serverside code from javascript, you will need to use AJAX, and the easiest way out, is to use the ASP.NET AJAX Extensions.

One option while using Microsoft ASP.NET AJAX is to call ASP.NET Web services (.asmx files) from the browser by using client script. The script can call a webservice containing server-based methods (Web methods) and invoke these methods without a postback and without refreshing the whole page. However this approach could be overkill sometimes, to perform the simplest of tasks. Moreover the logic needs to be kept in a separate .asmx file. We need something that is more ‘integrated’ with our solution.

The option we are going to use in this article involves PageMethods. A PageMethod is basically a public static method that is exposed in the code-behind of an aspx page and is callable from the client script. PageMethods are annotated with the [WebMethod] attribute. The page methods are rendered as inline JavaScript.

Let us explore PageMethods with an example. The example we will be discussing here may not be the best example to explain PageMethods, but it will give you an idea of how to call server side code from client side. In this example, we will be connecting to the Customers table in the Northwind database. We will have some textboxes which will accept the CustomerID and in turn return the Contact Name of that Customer. The method returning ContactName will be called whenever the textbox loses focus. We will be using the onblur event where a javascript code will take in the value(CustomerID) from the textbox. This javascript function will then call a PageMethod (server side code) which returns the ContactName without any page refresh.

I assume that you have downloaded and installed ASP.NET AJAX extensions for ASP.NET 2.0. If not, I would advise you to download the extensions from here and install it before moving ahead. At any point of time, if you find a difficulty in understanding the code, download the sample project attached with this article at the end.

Step 1: Create an ASP.NET AJAX enabled website. Go to File > New > Website > ASP.NET AJAX-Enabled Web Site. Give the solution a name and location and click Ok.

Step 2: Drag and drop 2 labels and 4 textbox controls. We will be accepting the CustomerID from the user in the 2 textboxes and displaying the ‘ContactName’ in the other two textboxes. The textboxes that will display ‘ContactName’ has some properties set that will make it appear as a label without a border. Just set the BorderStyle=None, BorderColor=Transparent and ReadOnly=True. The markup will look similar to the following:

<form id=”form1″ runat=”server”>    

        <asp:ScriptManager ID=”ScriptManager1″ runat=”server”/>

        <div>

        <asp:Label ID=”lblCustId1″ runat=”server” Text=”Customer ID 1″></asp:Label>

        <asp:TextBox ID=”txtId1″ runat=”server”></asp:TextBox><br />

            <asp:TextBox ID=”txtContact1″ runat=”server” BorderColor=”Transparent” BorderStyle=”None”

                ReadOnly=”True”></asp:TextBox><br />

        <br />

        <asp:Label ID=”lblCustId2″ runat=”server” Text=”Customer ID 2″></asp:Label>

        &nbsp;

        <asp:TextBox ID=”txtId2″ runat=”server”></asp:TextBox><br />

            <asp:TextBox ID=”txtContact2″ runat=”server” BorderColor=”Transparent” BorderStyle=”None”

                ReadOnly=”True”></asp:TextBox>&nbsp;<br />

            </div>

    </form>

Before moving ahead, we will store our connection string information in the Web.config. Add the following tag below your </configSections> tag. Remember we have created an ‘ASP.NET AJAX enabled website’. The tag </configSections> along with some other tags automatically get added to the web.config.

<connectionStrings>

            <removename=”all”/>

            <addname=”NorthwindConnectionString”connectionString=”Data Source=(local); Initial Catalog=Northwind; Integrated Security = SSPI;”/>

      </connectionStrings>

Step 3: Currently we will add a method, ‘GetContactName()’ which will accept a CustomerID and return the Contact Name information from the Northwind database, Customer table. We will then transform this method as a PageMethod.

C#

public static string GetContactName(string custid)

    {

        if (custid == null || custid.Length == 0)

            return String.Empty;

        SqlConnection conn = null;

        try

        {

            string connection = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

            conn = new SqlConnection(connection);

            string sql = “Select ContactName from Customers where CustomerId = @CustID”;

            SqlCommand cmd = new SqlCommand(sql, conn);

            cmd.Parameters.AddWithValue(“CustID”, custid);

            conn.Open();

            string contNm = Convert.ToString(cmd.ExecuteScalar());

            return contNm;

        }

        catch (SqlException ex)

        {

            return “error”;

        }

        finally

        {

            conn.Close();

        }

    }

VB.NET

 Public Shared Function GetContactName(ByVal custid As String) As String

        If custid Is Nothing OrElse custid.Length = 0 Then

            Return String.Empty

        End If

        Dim conn As SqlConnection = Nothing

        Try

            Dim connection As String = ConfigurationManager.ConnectionStrings(“NorthwindConnectionString”).ConnectionString

            conn = New SqlConnection(connection)

            Dim sql As String = “Select ContactName from Customers where CustomerId = @CustID”

            Dim cmd As SqlCommand = New SqlCommand(sql, conn)

            cmd.Parameters.AddWithValue(“CustID”, custid)

            conn.Open()

            Dim contNm As String = Convert.ToString(cmd.ExecuteScalar())

            Return contNm

        Catch ex As SqlException

            Return “error”

        Finally

            conn.Close()

        End Try

    End Function

Step 4: We will now transform this method as a PageMethod and then call this method GetContactName() from client side code; i.e. using JavaScript. To enable the method as a PageMethod, add the attribute [WebMethod] on top of the method:

C#

[System.Web.Services.WebMethod]

public static string GetContactName(string custid)

{

}

VB.NET

<System.Web.Services.WebMethod()> _

    Public Shared Function GetContactName(ByVal custid As String) As String

   End Function

At the sametime, add the attribute EnablePageMethods=”true” to the ScriptManager as shown below:

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePageMethods=”true”/>

Step 5: Let us now create the JavaScript that will call this server side code. Add a javascript file called script.js to your solution (Right Click Project > Add New Item > Jscript File > Rename file to script.js). Add the following code to the javascript file.

function CallMe(src,dest)

 {    

     var ctrl = document.getElementById(src);

     // call server side method

     PageMethods.GetContactName(ctrl.value, CallSuccess, CallFailed, dest);

 }

 // set the destination textbox value with the ContactName

 function CallSuccess(res, destCtrl)

 {    

     var dest = document.getElementById(destCtrl);

     dest.value = res;

 }

 // alert message on some failure

 function CallFailed(res, destCtrl)

 {

     alert(res.get_message());

 }

Step 6: We now need to reference this JavaScript file from our aspx page and invoke the ‘CallMe()’ method whenever the textbox loses focus. To do so:

Add a reference to the javascript file in the body tag as shown below:

<body>

<script type=”text/javascript” language=”javascript” src=”script.js”> </script>

    <form id=”form1″ runat=”server”>    

………

Step 7: To invoke the methods whenever the textbox looses focus, add these lines of code in the Page_Load() event

C#

if (!Page.IsPostBack)

        {

            txtId1.Attributes.Add(“onblur”, “javascript:CallMe(‘” + txtId1.ClientID + “‘, ‘” + txtContact1.ClientID + “‘)”);

            txtId2.Attributes.Add(“onblur”, “javascript:CallMe(‘” + txtId2.ClientID + “‘, ‘” + txtContact2.ClientID + “‘)”);

        }

VB.NET

If (Not Page.IsPostBack) Then

                  txtId1.Attributes.Add(“onblur”, “javascript:CallMe(‘” & txtId1.ClientID & “‘, ‘” & txtContact1.ClientID & “‘)”)

                  txtId2.Attributes.Add(“onblur”, “javascript:CallMe(‘” & txtId2.ClientID & “‘, ‘” & txtContact2.ClientID & “‘)”)

End If

As shown above, we are using the Attributes.Add that lets us add an attribute to the server control’s System.Web.UI.AttributeCollection object. The function ‘CallMe’ kept in the ‘script.js’ file will be invoked. We are passing the source and destination textboxes as parameters. The source textbox will contain the CustomerID. The CustomerID will be looked up in the Customers table and the corresponding ‘ContactName’ will be retrieved in the destination textbox.

Well that is all that is needed to invoke server side code from client side. Run the code. Type ‘ALFKI’ in the first textbox and hit the tab key. You will see that the javascript function goes ahead and calls the PageMethod GetContactName() using PageMethods.GetContactName. It passes the value of the source textbox which contains the CustomerID. The ‘ContactName’ returned is displayed in the second textbox below the first one, in our case the value displayed is ‘Maria Anders’.

Troubleshooting: ‘PageMethods Is ‘Undefined’’ error

1.    Try setting EnablePageMethods=”true” in the script manager tag

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePageMethods=”true”/>

2.    Don’t add the javascript references or code in the <head /> section. Add it to the <body> tag.

<body>

<script type=”text/javascript” language=”javascript” src=”script.js”> </script>

    <form id=”form1″ runat=”server”> 

    </form>

</body>

3.    Page methods needs to be static in code behind.

I hope you have got an idea of how to call server side code using JavaScript. I have used this technique successfully in a few projects and just love and admire PageMethods. I hope you found this article useful and I thank you for viewing it. The source code for this article can be downloaded from here.

So: if you want to make a custom icon for your website that will show up in the Springboard when a user makes a “webclip”, using their iPhone or iPod Touch, the dirt simple way is:

• Create a 57×57 PNG.
• Name it “apple-touch-icon.png”
• Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)

Boom. If you add a webclip for vjarmy.com, you’ll see my smiling mug.

If you want more flexibility – perhaps you don’t have access to the site root, perhaps you want to use a different file name or format – you can use a link tag in the head of the document, such as:

<head>

    <title>iHelloWorld</title>

    <link rel="apple-touch-icon" href="/whatever.jpg"/>
    OR
    <link rel="apple-touch-icon-precomposed" href="/whatever.jpg"/ />

</head>

I’ve tested this with a slightly larger (75×75) JPEG, and it works without trouble – it just scales things down.

If you’re testing this on your iPhone, you may notice a pause of a few seconds before the icon appears when you press “Add To Home Menu”. I’d imagine the icon only downloads when you request to make a webclip, instead of the “request it every time” method used for fetching favicon.ico. (As for why it’s a few seconds – well, that’s EDGE for you. The lag goes away when you use WiFi.)

Apple has more info on their iPhone Dev Center; look at “Create a WebClip Bookmark Icon”.

And don’t worry if your icon design skills aren’t up to snuff, but do worry if you care about the sanctity of your image:

Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application.

This was born from the design requirements of a recent project to have non-standard alerts to notify the user of a problem with data they had entered. The trick here was that all products use the same validation scripts, and not all of them fell under this requirement.

To modify the validation scripts to expect another argument that would have told it to use a DIV overlay or a standard alert would have proven difficult to implement and maintain. A co-worker (Dean) wondered out loud if it was possible to overload the alert method, and turns out – you can.

You can test the alert functionality with the following button. You can also type javascript:alert("Hello World"); from your browsers URL bar to see it work.

The markup for the above button is:
<input value = "Test the alert" />

Psuedo-modality is achieved by using a 100% wide and 100% tall absolutely positioned DIV element that acts as the parent element of the custom alert. This DIV overlays everything on the page and prevents user interaction with elements other than the custom alert. Note that a 1×1 transparent png image is set as the background-image — this prevents MSIE from allowing the parent DIV to be “hollow”, which would defeat its purpose.

Only one alert can exist at a time — the function will return if it detects the existence of a previous instance of the “modalContainer” parent element. Hitting the “Ok” button will remove the “modalContainer” element from the DOM along with its child elements and hand control of the page back to the user.

In browsers that support position:fixed, meaning all of them except MSIE6 and lower, the alert will stay with the user as they scroll. Thanks to Kevin for the education on that property value.

This has been tested and verified to work in MSIE6, Firefox 1.0, Safari and Opera 7.1+.

Note: This is a demonstration only. I am not saying that this is a production worthy alternative to the default behavior of the window.alert method as it does not allow for true modality. I am only showing what is possible – implement at your own risk. Feel free to contact me with any suggestions.

Source:

// constants to define the title of the alert and button text.
var ALERT_TITLE = “Oops!”;
var ALERT_BUTTON_TEXT = “Ok”;

// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
 window.alert = function(txt) {
  createCustomAlert(txt);
 }
}

function createCustomAlert(txt) {
 // shortcut reference to the document object
 d = document;

 // if the modalContainer object already exists in the DOM, bail out.
 if(d.getElementById(“modalContainer”)) return;

 // create the modalContainer div as a child of the BODY element
 mObj = d.getElementsByTagName(“body”)[0].appendChild(d.createElement(“div”));
 mObj.id = “modalContainer”;
  // make sure its as tall as it needs to be to overlay all the content on the page
 mObj.style.height = document.documentElement.scrollHeight + “px”;

 // create the DIV that will be the alert
 alertObj = mObj.appendChild(d.createElement(“div”));
 alertObj.id = “alertBox”;
 // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
 if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + “px”;
 // center the alert box
 alertObj.style.left = (d.documentElement.scrollWidth – alertObj.offsetWidth)/2 + “px”;

 // create an H1 element as the title bar
 h1 = alertObj.appendChild(d.createElement(“h1″));
 h1.appendChild(d.createTextNode(ALERT_TITLE));

 // create a paragraph element to contain the txt argument
 msg = alertObj.appendChild(d.createElement(“p”));
 msg.innerHTML = txt;
�
 // create an anchor element to use as the confirmation button.
 btn = alertObj.appendChild(d.createElement(“a”));
 btn.id = “closeBtn”;
 btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
 btn.href = “#”;
 // set up the onclick event to remove the alert when the anchor is clicked
 btn.onclick = function() { removeCustomAlert();return false; }

�
}

// removes the custom alert from the DOM
function removeCustomAlert() {
 document.getElementsByTagName(“body”)[0].removeChild(document.getElementById(“modalContainer”));
}

While Microsoft have released their new Virtual Earth ASP.NET Control, I still haven’t found a decent wrapper that converts addresses to langitude and longitude co-ordinates.  There is a Geo coder web service available here (this shows the co-ordinates for the White House) but it seems to only work for US addresses, which doesn’t help me at all.

So for the moment, I’m still using Google Maps, and have prepared the following to show you how to integrate Google Maps into your ASP.NET pages

Step 1. Get a Google Maps API key

In order to use Google Maps on your site, you need to register for a free Google Maps API key from here: http://www.google.com/apis/maps/

Step 2. Download the SubGurim Google Maps wrapper dll

This one is the best Google Maps wrapper I have found so far http://en.googlemaps.subgurim.net/descargar.aspx.  It is a commercial product (from $10), or you can put up with the overlayed text in the free versions.Download the gmaps.dll file and add it to your \bin directory. Step 3. Set up your aspx page

In your aspx page, add a few text boxes to gather the address details.  You can simply use one textbox, or split the address to enable validation for suburbs, countries, etc.  I haven’t included any form validation in my example.

<p style=”text-align:right; margin-right:300px”> Street Address: <asp:textbox ID=”txtStreetAddress” runat=”server” Width=”150px” /><br /> Suburb: <asp:textbox ID=”txtSuburb” runat=”server” Width=”150px” /><br /> Country: <asp:textbox ID=”txtCountry” runat=”server” Width=”150px” /><br /><br /> <asp:Button Text=”Show Map” ID=”lnkShowMap” runat=”server” /> </p>

You need to add your Google API key to your web.config file like so:

<appSettings> <add key=”googlemaps.subgurim.net” value=”YourGoogleMapsAPIKeyHere” /> </appSettings>

And finally, you need to register the SubGurim wrapper at the top of your page (or in your web.config if you have a number of pages that display maps):

<%@ Register Assembly=”GMaps” Namespace=”Subgurim.Controles” TagPrefix=”cc1″ %>

Step 4: Add code to display the mapFinally, add code that collates your address fields and calls the Google Maps wrapper.

Protected Sub lnkShowMap_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkShowMap.Click Dim strFullAddress As String Dim sMapKey As String = ConfigurationManager.AppSettings(“googlemaps.subgurim.net”) Dim GeoCode As Subgurim.Controles.GeoCode ‘ Combine our address fields to create the full address. The street, ‘ suburb and country should be seperated by periods (.) strFullAddress = txtStreetAddress.Text & “. ” & txtSuburb.Text & “. ” & txtCountry.Text ‘ Work out the longitude and latitude GeoCode = GMap1.geoCodeRequest(strFullAddress, sMapKey) Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng) ‘ Display the map GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal) Dim oMarker As New Subgurim.Controles.GMarker(gLatLng) GMap1.addGMarker(oMarker) End Sub

That’s it! Check out the demo or download the source code, and let me know if you find a good wrapper for the Virtual Earth ASP.NET control!