Steve Wellens

SignalR is Magic

Tue, 02 Sep 2014 20:46:00 GMT

Recently, I attended a Twin Cities .NET User Group presentation on SignalR. I had heard about SignalR several times and was curious.   Plus there was free pizza…<burp>.

SignalR has revamped the way I think about web sites.   Normally, a browser requests some data and the server sends it. Ajax allows discreet calls to avoid full post-backs and full page rendering…but it is still a “request and wait” protocol. A web client can also poll a web server which allows the server to choose when and what to send to the clients. But that is a kind of ‘duct-tape’ programming.   It is interesting to note that internally SignalR will fall back to polling protocols if a more modern transport isn’t supported by the browser.

In a nutshell: SignalR allows the server to actively push data to clients.

I decide to try writing my own SignalR Application: A Live Golf Scoring system.    Here is a link to a live demo of the final application: http://www.stevewellens.com/LiveGolfScores/

Here is what the final product looks like, note there are three browsers, IE, Chrome and FF all showing the exact same data:

Here’s how I did it.

1) In Visual Studio, select File, New Web Site…, Asp.Net Empty Web Site (.Net Framework 4.5 is the default).

2) Add a default.aspx page. Right click the project and select Add, Add New Item, Web Form. You might want to type something on the form and run the program…just to make sure things are OK.

3) Use Nuget to add Micosoft ASP.NET SignalR. If you’ve never used Nuget, it is like a sous-chef for programmers: It does the dirty, tedious work. It adds SignalR and all the dependent libraries automatically:

Holy Crap! That’s a lot of stuff. It also added jQuery library files. I swallowed the bile that was rising in my throat and bravely moved on.

4) Next I had to add an OWIN Startup class. This was new to me. I didn’t want to spend hours studying what all those libraries do. That would defeat the reason for using third-party tools. So I just followed the instructions in the readme.txt file that was installed. You can also right click the project and select Add OWIN Startup Class.

The final Startup.cs code should look like this:

 // Startup.cs
using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(Startup))]

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        app.MapSignalR();
    }
}

5) Put a breakpoint on app.MapSignalR(); and run the program. Make sure the breakpoint is hit. There is no use proceeding until the startup code runs.

6) Create a Datatable to hold the golf scores and bind it to a GridView to display them. Note the DataTable is stored in the Application object so all sessions have access to it. The SignalR code also has access to it.

Notes: My initial attempt worked: 3 people could post scores and each would see the other scores. However, when a 4th person joined, they didn’t see the previously entered scores. I realized I needed to store the scores on the server. I ended up throwing away the html table I started with and used a DataTable to store the scores and a GridView to display them.

For completeness, below is the entire code of default.aspx.cs:

using System;
using System.Collections.Generic;
using System.Data;
using System.Web;
using System.Web.UI;

public partial class _Default : System.Web.UI.Page
{
    // ---- Page Load ------------------------

    protected void Page_Load(object sender, EventArgs e)
    {
        // populate the listboxes
        DDLPlayer.Items.Add("Tiger");
        DDLPlayer.Items.Add("Phil");
        DDLPlayer.Items.Add("Rory");
        DDLPlayer.Items.Add("Steve");

        for (int Hole = 1; Hole <= 18; Hole++)
            DDLHole.Items.Add(Hole.ToString());

        for (int Score = 1; Score < 10; Score++)
            DDLScore.Items.Add(Score.ToString());

        // populate the GridView
        GridViewScores.DataSource = GetScoresTable();
        GridViewScores.DataBind();
    }

    // ---- Get Scores Table ----------------------------------------------
    //
    // if it doesn't exist yet, create it.
    // it uses what ever players are in the DDLPlayer object

    private DataTable GetScoresTable()
    {
        DataTable ScoresTable = Application["ScoresTable"] as DataTable;

        if (ScoresTable == null)
        {
            ScoresTable = new DataTable();
            ScoresTable.Columns.Add(new DataColumn(@"Golfer\Hole", typeof(String)));
            for (int HoleIndex = 1; HoleIndex <= 18; HoleIndex++)
                ScoresTable.Columns.Add(new DataColumn(HoleIndex.ToString(), typeof(int)));

            for (int PlayerCount = 0; PlayerCount < DDLPlayer.Items.Count; PlayerCount++)
                ScoresTable.Rows.Add(ScoresTable.NewRow());

            for (int PlayerCount = 0; PlayerCount < DDLPlayer.Items.Count; PlayerCount++)
                ScoresTable.Rows[PlayerCount][0] = DDLPlayer.Items[PlayerCount].Text;

            // PrimaryKey is needed so we can find the player row to update
            ScoresTable.PrimaryKey = new DataColumn[] { ScoresTable.Columns[0] };

            Application["ScoresTable"] = ScoresTable;
        }
        return ScoresTable;      
    }
}

7) Next we need a way for a client to call the server. This is SignalR stuff: Create a class derived from Microsoft.AspNet.SignalR.Hub and add the PostScoreToServer function to it.

//ScoresHub.cs:
using System;
using System.Collections.Generic;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Data;

public class ScoresHub : Hub
{
    // ---- Post Score To Server ------------------------------------------
    // called by clients   
    // (this gets converted to a callable javaScript function called postScoreToServer 
    //  and is sent to the clients)

    public void PostScoreToServer(String Player, int Hole, int Score)
    {
        // send the new score to all the other clients
        Clients.All.SendMessageToClient(Player, Hole, Score);

        // store the scores in a 'global' table so new clients get a complete list
        DataTable ScoresTable = HttpContext.Current.Application["ScoresTable"] as DataTable;

        DataRow CurrentPlayer = ScoresTable.Rows.Find(Player);

        CurrentPlayer[Hole] = Score;
    }
}

Here is the first bit of magic: When SignalR starts up, it parses the ScoresHub code and creates JavaScript that gets sent to the clients when the client requests it.

Server                                          Client 
PostScoreToServer C# ----- SignalR Magic -----> postScoreToServer JS

8) Then we need a way for the Server call a client function. In other words, where did the SendMessageToClient function come from? Rather than include it piecemeal, here is the entire Default.aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title>Live Golf Scores from Steve Wellens</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery.signalR-2.0.1.js"></script>
    <script src='<%: ResolveClientUrl("~/signalr/hubs") %>' type="text/javascript"></script>

    <script>
        var scoresHub;

        $(document).ready(DocReady);

        // ---- Doc Ready -------------------------------------------

        function DocReady()
        {
            $("#ButtonPostScore").click(PostScoreToServer);     // hook up button click

            // use a global variable to reference the hub. 
            scoresHub = $.connection.scoresHub;

            // supply the hub with a client function it can call
            scoresHub.client.SendMessageToClient = HandleMessageFromServer;

            $.connection.hub.start();   // start the local hub
        }

        // ---- Post Score to Server ------------------------------------

        function PostScoreToServer(Player, Hole, Score)
        {
            var Player = $("#DDLPlayer").val();
            var Hole = $("#DDLHole").val();
            var Score = $("#DDLScore").val();

            scoresHub.server.postScoreToServer(Player, Hole, Score);
        }

        // ---- Handle Message From Server -------------------------------

        function HandleMessageFromServer(Player, Hole, Score)
        {
            // get the correct table row
            var tableRow = $("#GridViewScores td").filter(function ()
            {
                return $(this).text() == Player;
            }).closest("tr");

            // update the hole with the score
            tableRow.find('td:eq(' + Hole + ')').html(Score);
        }

    </script>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            width: 2em;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <asp:GridView ID="GridViewScores" runat="server">
        </asp:GridView>
        <p>
            Player: <asp:DropDownList ID="DDLPlayer" runat="server"></asp:DropDownList>
            Hole:   <asp:DropDownList ID="DDLHole"   runat ="server"></asp:DropDownList>
            Score:  <asp:DropDownList ID="DDLScore"  runat="server"></asp:DropDownList>

            <input id="ButtonPostScore" type="button" value="Post Score" />
        </p>
        <h3>View this page with multiple browsers to see how SignalR works!</h3>
    </form>
</body>
</html>

Here is the second bit of magic: Assigning* a function to the client Hub makes the function available to the server!

scoresHub.client.SendMessageToClient = HandleMessageFromServer;

*Remember, JavaScript allows you to attach new variables and function onto any object.

When the client hub starts up, the attached function metadata gets sent to the server and converted to C# code….to be called by the server!

Client                                               Server
HandleMessageFromServer JS ---- SignalR Magic -----> SendMessageToClient C#

Done. That is it. That is the magic of SignalR.

Here is a link to a live demo: http://www.stevewellens.com/LiveGolfScores/

Bonus Note: Almost every article on SignalR warns of the gotcha that when the server function is in Pascal case, it gets converted to Camel case: MyFunction -> myFunction. Going from client to server doesn’t have that problem since you specify both the C# function name and the JavaScript function name: scoresHub.client.SendMessageToClient=HandleMessageFromServer;

Finale

I wish that was the end of my epic tale….but it isn’t. Here is roughly how I spent my time:

Activity	Developer Time
SignalR code	5 percent
DataTable, GridView, Html, CSS	30 percent
Deployment*	65 percent

*Deployment did not go smoothly.

When the SignalR server code runs, it prepares JavaScript code to be sent to the client. When I deployed the application, the client requested the code but it could not be found: There were runtime exceptions at the client.

Doing online searches for SignalR help is tough. Much of the information is MVC specific which I wasn’t using (that architecture is not appropriate for every application). Much of the information I found was already out of date and obsolete. These are all suggestions I found researching my problem:

<%--<script src="signalr/hubs/" ></script>--%>
<%--<script src="/signalr/signalr/hubs/" ></script>--%>
<%--<script src="/signalr/hubs/" ></script>--%>
<%--<script src="~/signalr/hubs"></script>--%>
<%--<script src="Scripts/ScoresHub.js"></script> (hard copy of scripts)--%>
<script src='<%: ResolveClientUrl("~/signalr/hubs") type="text/javascript" %>'></script>

Some posts suggested certain libraries needed to be on IIS so I contacted my hosting service and described my problem.

They asked me to create a new sub-domain and try running my project from that. It worked! Whew, that meant the server and IIS was configured properly.

I was running the application from a subdirectory on my main domain and apparently SignalR doesn’t like that…it gets confused.

I contacted the hosting service again and said I didn’t want to use a sub-domain. They suggested using a virtual directory that pointed to the subdirectory. I tried it and it worked!

I normally don’t do this, but I’ve got to plug my host provider: http://www.arvixe.com/

Arvixe is the best. I have had nothing but good experiences with them.

(Don’t ask me about my cell phone service provider support…THAT was a totally different experience involving frustration, profanity and wasted time trying to communicate with incompetent boobs).

I hope someone finds this useful.

Steve Wellens

CodeProject

Secret Covert Hush-Hush White Space in the DOM…EXPOSED!

Sun, 05 Jan 2014 02:30:00 GMT

Lurking in the shadows of the Stack Overflow website, selling aerosol cans of Bug-No-More to the rubes, I came across a question I thought I could answer. The OP (original poster) was using JavaScript to select and modify HTML elements without success.

The HTML was simple:

<ul>
    <li><a href="#" id="prev">Prev</a></li>
    <li><a href="#" id="middle">Middle</a></li>
    <li><a href="#" id="next">Next</a></li>
</ul>

First he created a simple function to make sure the basics were working (a very good practice). It colored the middle li element and it worked fine:

function middle()
{
    document.getElementById("middle").parentNode.style.backgroundColor = "yellow";
}

get the middle element using its id (an a tag)
move up one element via the parentnode (to the li)
color the li

Next, he created a function to color the siblings of the middle element.

function prevNextSibling()
{
    document.getElementById("middle").parentNode.previousSibling.style.backgroundColor = "pink";

    document.getElementById("middle").parentNode.nextSibling.style.backgroundColor = "cyan";
}

get the middle element using it's id (an a tag)
move up one element via the parentnode (to the li)
get the previous/next sibling
color the li

It didn't work.

When I debugged the code, I saw that nextSibling was returning an object that did not have a style property. What the heck was up with that?

In FireFox the debugging window looked like this:

In Chrome the debugging window looked like this:

In Internet Explorer the debugging window looked like this:

Hey, what the heck are those "Text = Empty Text Nodes" in the Internet Explorer window? What they are, my curious friend is the cause of the problem: nextSibling and previousSibling are returning Empty Text Nodes which do not have a style attribute.

To be perfectly clear:

ALL three browsers have Empty Text Nodes.
ONLY Internet Explorer displays them in its debugger.

Internet Explorer is the best browser in this situation.

So what are these Empty Text Nodes?

http://www.w3.org/DOM/faq.html#emptytext

And what is the fix?

If the siblings are the same type, as they are in the original problem, use:

previousElementSibling

nextElementSibling

Otherwise, move two siblings to skip over the Empty Text Node sibling:

previousSibling.previousSibling

nextSibling.nextSibling

Either way, it works:

Oooh, pretty.

So, in addition to learning about white space nodes in the DOM, we learned that having multiple browsers installed can be a good thing.

I hope someone finds this useful.

Steve Wellens

CodeProject

Code Builder for jQuery AJAX (Calling Web Services)

Sun, 04 Aug 2013 00:30:00 GMT

Getting stuck in the cycle of code-build-test, code-build-test… can drain you physically, mentally, emotionally and spiritually. In the back of your mind you know the clock is ticking and you are not making headway. Of course the boss keeps sticking his sweaty head into your tiny cube and asking, "Any progress?" What a jerk. The intern who is supposed to be helping you keeps asking stupid questions he could find on Google: the lazy meathead. The department secretary just told you they lost your time sheet so you'll have to fill out another one: Too bad you didn't make a copy. Your waist is getting thicker and your hair is getting thinner.

Well I can't help you with any of that.

Except, maybe for the first problem; if you are using jQuery's AJAX function, perhaps I can offer relief from the dreaded code-build-test cycle.

To help figure out the myriad of options when using the jQuery AJAX function to access Web Services, I created a web page with the most useful (as far as I know) options in a table with check boxes, values and descriptions. It builds the jQuery AJAX code automatically and you can execute it directly from the web page. We can break the cycle of code-build-test.

Here is a sample of the generated code:

Here is part of the Settings table:

Here are three divs I connected to three events to display the results:

So, as you enable options and change their values, the code is updated. You click the Execute button and wait for the server to respond.

I managed to get the code (JavaScript, CSS and HTML) into one file. Only the jQuery code is external. So if you are developing calls into a local project, you could download (steal/borrow) the page and put it into your own directory for testing.

Notes:

The HTML5 CSS property resize:both did not work correctly in all the browsers I tested (OK, it was IE) so I used the jQuery function resizeable.

I thought about putting up an hour glass cursor while waiting for the calls to finish or time out. But the 'A' in AJAX stands for Asynchronous, the web page is not blocked waiting for the server. An hour glass cursor would be inappropriate.

I put Save and Restore buttons in so if you get something that works, you can save it. Then feel free to experiment knowing you can always go back to a known good set of options. Typically most people will use this to find the minimum set of options. To remember the settings, I use localStorage, an HTML 5 feature.

Here are a few free public web services I tested the page with:

http://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20location%3D%2248907%22&format=json

http://api.geonames.org/postalCodeLookupJSON?postalcode=55427&country=US&username=demo

I linked the jQuery libraries locally. In theory, CDN's are a great idea. In reality, they can paralyze sites. The next time you see a web page that is stuck loading, look at the status bar. Chances are it's loading from an external site.

I'm not an expert at jQuery AJAX by any means. If you see something I missed, or something useful that could be added to the page, please contact me.

And, before I forget, a link to the web page: jQuery AJAX Code Builder

This was a fun project. I hope someone finds it useful.

Steve Wellens

CodeProject

Calling WCF Services with jQuery…Stripped Down

Mon, 04 Feb 2013 04:50:00 GMT

Years ago, when I created my first ASMX Web Service and called it from an application, it was easy and it was fun. I was able to call functions on a server, from a client, with little effort. What a great and powerful tool!

Then WCF came out and was deemed the 'best practice' and the 'preferred' method. Developers were encouraged to use it. Sadly, it was a nightmare of complexity. Rube Goldberg would have been proud.

I recently began investigating calling WCF Services with jQuery. There aren't many articles or working samples that are simple enough to be a good starting point for development or proof of concept. I gathered what I learned and decided to cut out as much superfluous details from the paradigm as possible: I tried to make it palatable.

This is the smallest working example of jQuery calling a WCF Service anywhere (as far as I know).

Caveats:

WCF services are fragile. Use a good source control system or some substitute. If you make a change and everything is still working, check it in and label it. That way, when you break your code (and you will) and can't figure out what happened, you can revert to a known good version.

Normally the cache is your friend. When developing, the cache is your enemy. When your code changes don't seem to be having any effect, clear the cache and/or restart the web server. Sometimes I put message boxes or log strings in the code to see if it actually being executed.

We Don't Need No Stinking Interface:

I've got nothing against interfaces; I even blogged about them here. But I'm going to guess that less than one percent of web services require the use of an interface—maybe less than one in a thousand—maybe less than that.

The default template for WCF services uses an interface for a contract—an inexplicably stupid decision.

Here is how I removed the unneeded complexity.

In the interface file, the generated class looks something like this:

[ServiceContract]

public interface IService1

    [OperationContract]

    string GetData(int value);

I moved the contract attributes into the implementation class.
I added a WebInvoke attribute to the functions.
I removed the interface inheritance from the service implementation class.
I deleted (yes deleted!) the interface file.
In the config file, I changed the contract to be the implementation class, NOT the interface class.

Then I deleted all but one function in the implementation class…to get it really lean and mean.

Here is the final WCF Service CS code:

using System;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.ServiceModel.Web;

[ServiceContract]

public class MyService

    [OperationContract]

    [WebInvoke(Method = "POST",

               BodyStyle = WebMessageBodyStyle.Wrapped,

               ResponseFormat = WebMessageFormat.Json)]

    public string MyFunction(string Count)

        return "The Count you passed in is: " + Count.ToString();

Here is the HTML/JavaScript/jQuery code file.

<!DOCTYPE html>

<html>

<head>

    <title>Call WCF</title>

    <script src="Scripts/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

        var counter = 0;

        function CallMyService()

            counter++;

            $.ajax({

                type: "POST",

                url: "MyService.svc/MyFunction",

                data: '{"Count": "' + counter + '"}',

                contentType: "application/json", // content type sent to server

                success: ServiceSucceeded,

                error: ServiceFailed

});

        // ---- WCF Service call backs -------------------

        function ServiceFailed(result)

            Log('Service call failed: ' + result.status + '  ' + result.statusText);

        function ServiceSucceeded(result)

            var resultObject = result.MyFunctionResult;

            Log("Success: " + resultObject);

        // ---- Log ----------------------------------------

        // utility function to output messages

        function Log(msg)

            $("#logdiv").append(msg + "<br />");

    </script>

</head>

<body>

    <input id="Button1" type="button" value="Execute" onclick="CallMyService();" />

    <div id="logdiv"></div>  <!--For messages-->

</body>

</html>

Note I am using a simple HTML page to call the service. It's my way of showing, "There's nothing up my sleeve." You can download the full project here. I recompiled it to .NET 4.5.

There is no project or solution file, open it as a Web Site.
Run/Browse the CallWCF.html file.
Click the Execute button.

You should see this:

I hope someone finds this useful.

Steve Wellens

CodeProject

CSS3 box-shadow and Visual Studio Features

Wed, 16 Jan 2013 21:30:00 GMT

A few years ago, while creating an ASP.NET web site, I decided to add a gradient border to "sex up" the look of the site. Using a sophisticated image editing program, I created a small gradient image. I made sure the ending color of the gradient matched the color of the body in the target page. Here it is:

I added CSS to display it like this:

background-image: url(BlendLeft.ico);
background-repeat: repeat-y;

The CSS replicated the image up and down the left side of the browser window:

Pretty cool, eh? I decided it would be even cooler to have the gradient on all four sides of the window. My goal was to make it look like a soft picture frame.

I spent hours and hours trying to create and use the eight images required.

Top Left Corner
Top
Top Right Corner
Right
Bottom Right Corner
Bottom
Bottom Left Corner
Left

I planned and created, sliced and diced, snipped and stitched, hundreds of different gradient images trying to keep the pixel dimensions and color transitions straight. I created several versions of web pages that displayed the images. I tried doing it programmatically where you could enter the start and end colors and the width of the border — the program generated and saved the eight pre-named images. However, I had no control over the gradient algorithms. I never could get smooth transitions between the images. I started to investigate writing my own gradient algorithms but ran out of time. Alas, I failed like a kite in a hurricane, like a fat kid in gym class, like a poodle in a shark tank.

Then CSS3 came out.

Two of the interesting new features in CSS3 are text-shadow and box-shadow. Shadows are traditionally used to give a three-dimensional effect to visual elements. While studying and playing with these new features, I was surprised to find the shadows could be placed anywhere and the box-shadow property had an inset tag….hmmm.

I used this on an html body element:

    box-shadow: 0 0 50px green inset;

…and got this:

Yippee ki-yay!!! This is EXACTLY what I spent hours trying to do…in one line of code.

Here is the full CSS for the body tag:

body
{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    box-shadow: 0 0 50px green inset;
}

My holy grail has been found.

By the way, you can apply the box-shadow to other elements...like this div:

While playing and experimenting with the new CSS3 features, I came across a few helpful Visual Studio features you may not know about.

CSS Color Picker

In the CSS editor, when a color is expected, you are given a list of predefined colors to pick from:

The result looks like this:

    color: red;

That's nice, I like seeing the word red instead of #ff0000.

If you type '#' to enter a color, you get the following pop-up window:

That's nice, you can click a color and it will supply the hexadecimal value:

    color:#f00;

That's nice too. If you click the double down arrow on the right side of the pop-up and you get this:

You can select any color and it will insert the hex values.

And, you can use the eye dropper to select any color from any window showing on your PC.

And, try moving the Opacity slider. Then you get values that include the alpha component like this:

    color:rgba(255, 216, 0, 0.74);

It's useful AND fun.

Multiple Browser Launch

First, if your project requirements include targeting multiple browsers, my sincere condolences. It is tedious and painful work.

But you do get some help from Visual Studio. In the following pull-down select "Browse With…"

Unsurprisingly, you get the "Browse With" window:

As you can see, you can select multiple browsers. Hold down the Control Key and click the browsers you want.

Then click the 'Set as Default' button.

You can hit Cancel to exit the window, the settings are remembered.

Now the selection says "Multiple Browsers" and when you start the web site, all the browsers you selected will be launched. It really speeds things up when you are in tweak-check-tweak-check-tweak-check mode. I wish there was a setting to automatically save all changes before launching the browsers.

I hope some finds this useful.

Steve Wellens

CodeProject

Google and Bing Map APIs Compared

Mon, 10 Dec 2012 01:00:00 GMT

At one of the local golf courses I frequent, there is an open grass field next to the course. It is about eight acres in size and mowed regularly. It is permissible to hit golf balls there—you bring and shag our own balls. My golf colleagues and I spend hours there practicing, chatting and in general just wasting time.

One of the guys brings Ginger, the amazing, incredible, wonder dog.

Ginger is a Hungarian Vizlas (or Hungarian pointer). She chases squirrels, begs for snacks and supervises us closely to make sure we don't misbehave.

Anyway, I decided to make a dedicated web page to measure distances on the field in yards using online mapping services. I started with Google maps and then did the same application with Bing maps. It is a good way to become familiar with the APIs.

Here are images of the final two maps:

Google:

Bing:

To start with online mapping services, you need to visit the respective websites and get a developers key.

I pared the code down to the minimum to make it easier to compare the APIs. Google maps required these CSS styles (or it wouldn't work):

html 
{
    height: 100%;
}

body 
{
    height: 100%;
    margin: 0;
    padding: 0;
}

Here is how the map scripts are included. Google requires the developer Key when loading the JavaScript, Bing requires it when the map object is created:

Google:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&libraries=geometry&sensor=false" > </script>

Bing:

<script  type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"> </script>

Note: I use jQuery to manipulate the DOM elements which may be overkill, but I may add more stuff to this application and I didn't want to have to add it later. Plus, I really like jQuery.

Here is how the maps are created:

Common Code (the same for both Google and Bing Maps):

    <script type="text/javascript">

        var gTheMap;

        var gMarker1;

        var gMarker2;

        $(document).ready(DocLoaded);

        function DocLoaded()

            // golf course coordinates

            var StartLat = 44.924254;

            var StartLng = -93.366859;

            // what element to display the map in

            var mapdiv = $("#map_div")[0];

Google:

        // where on earth the map should display

        var StartPoint = new google.maps.LatLng(StartLat, StartLng);

        // create the map

        gTheMap = new google.maps.Map(mapdiv,

                center: StartPoint,

                zoom: 18,

                mapTypeId: google.maps.MapTypeId.SATELLITE

});

        // place two markers

        marker1 = PlaceMarker(new google.maps.LatLng(StartLat, StartLng + .0001));

        marker2 = PlaceMarker(new google.maps.LatLng(StartLat, StartLng - .0001));

        DragEnd(null);

Bing:

        // where on earth the map should display

        var StartPoint = new  Microsoft.Maps.Location(StartLat, StartLng);

        // create the map

        gTheMap = new Microsoft.Maps.Map(mapdiv,

                credentials: 'XXXXXXXXXXXXXXXXXXX',

                center: StartPoint,

                zoom: 18,

                mapTypeId: Microsoft.Maps.MapTypeId.aerial

});

        // place two markers

        marker1 = PlaceMarker(new Microsoft.Maps.Location(StartLat, StartLng + .0001));

        marker2 = PlaceMarker(new Microsoft.Maps.Location(StartLat, StartLng - .0001));

        DragEnd(null);

Note: In the Bing documentation, mapTypeId: was missing from the list of options even though the sample code included it.

Note: When creating the Bing map, use the developer Key for the credentials property.

I immediately place two markers/pins on the map which is simpler that creating them on the fly with mouse clicks (as I first tried). The markers/pins are draggable and I capture the DragEnd event to calculate and display the distance in yards and draw a line when the user finishes dragging.

Here is the code to place a marker:

Google:

// ---- PlaceMarker ------------------------------------

function PlaceMarker(location)

    var marker = new google.maps.Marker(

            position: location,

            map: gTheMap,

            draggable: true

});

    marker.addListener('dragend', DragEnd);

    return marker;

Bing:

// ---- PlaceMarker ------------------------------------

function PlaceMarker(location)

    var marker = new Microsoft.Maps.Pushpin(location,

        draggable : true

});

    Microsoft.Maps.Events.addHandler(marker, 'dragend', DragEnd);

    gTheMap.entities.push(marker);

    return marker;

Here is the code than runs when the user stops dragging a marker:

Google:

// ---- DragEnd -------------------------------------------

var gLine = null;

function DragEnd(Event)

    var meters = google.maps.geometry.spherical.computeDistanceBetween(marker1.position, marker2.position);

    var yards = meters * 1.0936133;

    $("#message").text(yards.toFixed(1) + ' yards');

    // draw a line connecting the points

    var Endpoints = [marker1.position, marker2.position];

    if (gLine == null)

        gLine = new google.maps.Polyline({

            path: Endpoints,

            strokeColor: "#FFFF00",

            strokeOpacity: 1.0,

            strokeWeight: 2,

            map: gTheMap

});

    else

       gLine.setPath(Endpoints);

Bing:

// ---- DragEnd -------------------------------------------

var gLine = null;

function DragEnd(Args)

   var Distance =  CalculateDistance(marker1._location, marker2._location);

   $("#message").text(Distance.toFixed(1) + ' yards');

    // draw a line connecting the points

   var Endpoints = [marker1._location, marker2._location];

   if (gLine == null)

       gLine = new Microsoft.Maps.Polyline(Endpoints,

               strokeColor: new Microsoft.Maps.Color(0xFF, 0xFF, 0xFF, 0),  // aRGB

               strokeThickness : 2

});

       gTheMap.entities.push(gLine);

   else

       gLine.setLocations(Endpoints);

Note: I couldn't find a function to calculate the distance between points in the Bing API, so I wrote my own (CalculateDistance). If you want to see the source for it, you can pick it off the web page.

Note: I was able to verify the accuracy of the measurements by using the golf hole next to the field. I put a pin/marker on the center of the green, and then by zooming in, I was able to see the 150 markers on the fairway and put the other pin/marker on one of them.

Final Notes:

All in all, the APIs are very similar. Both made it easy to accomplish a lot with a minimum amount of code.

In one aerial view, there are leaves on the tree, in the other, the trees are bare. I don't know which service has the newer data.

Here are links to working pages:

Bing Map Demo

Google Map Demo

I hope someone finds this useful.

Steve Wellens

CodeProject

Favorite Programmer Quotes…

Wed, 28 Nov 2012 18:24:00 GMT

"A computer once beat me at chess, but it was no match for me at kick boxing." — Emo Philips

"There are only 10 types of people in the world, those who understand binary and those who don't. " – Unknown.

"Premature optimization is the root of all evil." — Donald Knuth

"I should have become a doctor; then I could bury my mistakes." — Unknown

"Code softly and carry a large backup thumb drive." — Me

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." — Martin Golding

"DDE…the protocol from hell"— Charles Petzold

"Just because a thing is new don't mean that it's better" — Will Rogers

"The mark of a mature programmer is willingness to throw out code you spent time on when you realize it's pointless." — Bram Cohen

"A good programmer is someone who looks both ways before crossing a one-way street." — Doug Linder

"The early bird may get the worm but it's the second mouse that gets the cheese." — Unknown

I hope someone finds this amusing.

Steve Wellens

CodeProject

The Low Down Dirty Azure Blues

Sat, 13 Oct 2012 01:30:00 GMT

Remember the SETI screen savers that used to be on everyone's computer? As far I as know, it was the first bona-fide use of "Cloud" computing…albeit an ad hoc cloud. I still think it was a brilliant leveraging of computing power.

My interest in clouds was re-piqued when I went to a technical seminar at the local .Net User Group. The speaker was Mike Benkovitch and he expounded magnificently on the virtues of the Azure platform. Mike always does a good job. One killer reason he gave for cloud computing is instant scalability. Not applicable for most applications, but it is there if needed.

I have a bunch of files stored on Microsoft's SkyDrive platform which is cloud storage. It is painfully slow. Accessing a file means going through layers and layers of software, redirections and security. Am I complaining? Hell no! It's free!

So my opinions of Cloud Computing are both skeptical and appreciative.

What intrigued me at the seminar, in addition to its other features, is that Azure can serve as a web hosting platform. I have a client with an Asp.Net web site I developed who is not happy with the performance of their current hosting service. I checked the cost of Azure and since the site has low bandwidth/space requirements the cost would be competitive with the existing host provider: Azure Pricing Calculator.

And, Azure has a three month free trial. Perfect! I could try moving the website and see how it works for free.

I went through the signup process. Everything was proceeding fine until I went to the MS SQL database management screen. A popup window informed me that I needed to install Silverlight on my machine.

Silverlight? No thanks. Buh-Bye.

I half-heartedly found the Azure support button and logged a ticket telling them I didn't want Silverlight on my machine. Within 4 to 6 hours (and a myriad (5) of automated support emails) they sent me a link to a database management page that did not require Silverlight.

Thanks!

I was able to create a database immediately. One really nice feature was that after creating the database, I was given a list of connection strings. I went to the current host provider, made a backup of the database and saved it to my machine. I attached to the remote database using SQL Server Studio 2012 and looked for the Restore menu item. It was missing. So I tried using the SQL command:

RESTORE DATABASE MyDatabase

FROM DISK ='C:\temp\MyBackup.bak'

Msg 40510, Level 16, State 1, Line 1

Statement 'RESTORE DATABASE' is not supported in this version of SQL Server.

Are you kidding me? Why on earth…? This can't be happening!

I opened both the source database and destination database in SQL Management Studio. I right clicked the source database, selected "Tasks" and noticed a menu selection called "Deploy Database to SQL Azure"

Are you kidding me? Could it be? Oh yes, it be!

There was a small problem because the database already existed on the Azure machine, I deployed to a new name, deleted the existing database and renamed the deployed database to what I needed. It was ridiculously easy.

Being able to attach SQL Management Studio to remote databases is an awesome but scary feature. You can limit the IP addresses that can access the database which enhances security but when you give people, any people, me included, that much power, one errant mouse click could bring a live system down. My Advice: Code softly and carry a large backup thumb-drive.

Then I created a web site, the URL it returned look something like this: http://MyWebSite.azurewebsites.net/

Azure supports FTP, but I couldn't figure out the settings until I downloaded the publishing profile. It was an XML file that contained the needed information.

I still couldn't connect with my FTP client (FileZilla). After about an hour of messing around, I deleted the port number from the FileZilla setup page….and voila, I was in like Flynn.

There are other options of deploying directly from Visual Studio, TFS, etc. but I do not like integrated tools that do things without my asking: It's usually hard to figure out what they did and how to undo it.

I uploaded the aspx , cs , webconfig, etc. files.

Bu it didn't run. The site I ported was in .NET 3.5. The Azure website configuration page gave me a choice between .NET 2.0 and 4.0. So, I switched to Visual Studio 2010, chose .NET 4.0 and upgraded the site. Of course I have the original version completely backed up and stored in a granite cave beneath the Nevada desert. And I have a backup CD under my pillow.

The site uses ReportViewer to generate PDF documents. Of course it was the wrong version. I removed the old references to version 9 and added new references to version 10 (*see note below). Since the DLLs were not on the Azure Server, I uploaded them to the bin directory, crossed my fingers, burned some incense and gave it a try. After some fiddling around it ran. I don't know if I did anything particular to make it work or it just needed time to sort things out.

However, one critical feature didn't work: ReportViewer could not programmatically generate PDF documents. I was getting this exception: "An error occurred during local report processing. Parameter is not valid."

Rats.

I did some searching and found other people were having the same problem, so I added a post saying I was having the same problem: http://social.msdn.microsoft.com/Forums/en-US/windowsazurewebsitespreview/thread/b4a6eb43-0013-435f-9d11-00ee26a8d017

Currently they are looking into this problem and I am waiting for the results. Hence I had the time to write this BLOG entry. How lucky you are.

This was the last message I got from the Microsoft person:

Hi Steve,

Windows Azure Web Sites is a multi-tenant environment. For security issue, we limited some API calls. Unfortunately, some GDI APIS required by the PDF converting function are in this list.

We have noticed this issue, and still investigation the best way to go. At this moment, there is no news to share. Sorry about this.

Will keep you posted.

If I had to guess, I would say they are concerned with people uploading images and doing intensive graphics programming which would hog CPU time. But that is just a guess.

Another problem.

While trying to resolve the ReportViewer problem, I tried to write a file to the PDF directory to see if there was a permissions problem with some test code:

String MyPath = MapPath(@"~\PDFs\Test.txt");

File.WriteAllText(MyPath, "Hello Azure");

I got this message: Access to the path <my path> is denied.

After some research, I understood that since Azure is a cloud based platform, it can't allow web applications to save files to local directories. The application could be moved or replicated as scaling occurs and trying to manage local files would be problematic to say the least.

There are other options:

Use the Azure APIs to get a path. That way the location of the storage is separated from the application. However, the web site is then tied Azure and can't be moved to another hosting platform.
Use the ApplicationData folder (not recommended).
Write to BLOB storage.
Or, I could try and stream the PDF output directly to the email and not save a file.

I'm not going to work on a final solution until the ReportViewer is fixed. I am just sharing some of the things you need to be aware of if you decide to use Azure. I got this information from here. (Note the author of the BLOG added a comment saying he has updated his entry).

Is my memory faulty?

While getting this BLOG ready, I tried to write the test file again. And it worked. My memory is incorrect, or much more likely, something changed on the server…perhaps while they are trying to get ReportViewer to work. (Anyway, that's my story and I'm sticking to it).

*Note: Since Visual Studio 2010 Express doesn't include a Report Editor, I downloaded and installed SQL Server Report Builder 2.0. It is a standalone Report Editor to replace the one not in Visual Studio 2010 Express.

I hope someone finds this useful.

Steve Wellens

CodeProject

Elegance, thy Name is jQuery

Sun, 08 Apr 2012 13:15:00 GMT

So, I'm browsing though some questions over on the Stack Overflow website and I found a good jQuery question just a few minutes old. Here is a link to it. It was a tough question; I knew that by answering it, I could learn new stuff and reinforce what I already knew: Reading is good, doing is better. Maybe I could help someone in the process too.

I cut and pasted the HTML from the question into my Visual Studio IDE and went back to Stack Overflow to reread the question. Dang, someone had already answered it! And it was a great answer. I never even had a chance to start analyzing the issue.

Now I know what a one-legged man feels like in an ass-kicking contest.

Nevertheless, since the question and answer were so interesting, I decided to dissect them and learn as much as possible.

The HTML consisted of some divs separated by h3 headings. Note the elements are laid out sequentially with no programmatic grouping:

<h3 class="heading">Heading 1</h3>
  <div>Content</div>
  <div>More content</div>
  <div>Even more content</div>
<h3 class="heading">Heading 2</h3>
  <div>some content</div>
  <div>some more content</div>
<h3 class="heading">Heading 3</h3>
  <div>other content</div>
</form>
</body>

The requirement was to wrap a div around each h3 heading and the subsequent divs grouping them into sections. Why? I don't know, I suppose if you screen-scrapped some HTML from another site, you might want to reformat it before displaying it on your own. Anyways…

Here is the marvelously, succinct posted answer:

$('.heading').each(function(){
    $(this).nextUntil('.heading').andSelf().wrapAll('<div class="section">');
});

I was familiar with all the parts except for nextUntil and andSelf. But, I'll analyze the whole answer for completeness. I'll do this by rewriting the posted answer in a different style and adding a boat-load of comments:

function Test()
{
    // $Sections is a jQuery object and it will contain three elements
    var $Sections = $('.heading');

    // use each to iterate over each of the three elements
    $Sections.each(function ()
    {
        // $this is a jquery object containing the current element
        // being iterated
        var $this = $(this);
       
        // nextUntil gets the following sibling elements until it reaches
        // an element with the CSS class 'heading'
        // andSelf adds in the source element (this) to the collection
        $this = $this.nextUntil('.heading').andSelf();
       
        // wrap the elements with a div
        $this.wrapAll('<div class="section" >');
    });
}

The code here doesn't look nearly as concise and elegant as the original answer. However, unless you and your staff are jQuery masters, during development it really helps to work through algorithms step by step. You can step through this code in the debugger and examine the jQuery objects to make sure one step is working before proceeding on to the next. It's much easier to debug and troubleshoot when each logical coding step is a separate line of code.

Note: You may think the original code runs much faster than this version. However, the time difference is trivial: Not enough to worry about: Less than 1 millisecond (tested in IE and FF).

Note: You may want to jam everything into one line because it results in less traffic being sent to the client. That is true. However, most Internet servers now compress HTML and JavaScript by stripping out comments and white space (go to Bing or Google and view the source). This feature should be enabled on your server: Let the server compress your code, you don't need to do it.

Free Career Advice: Creating maintainable code is Job One—Maximum Priority—The Prime Directive. If you find yourself suddenly transferred to customer support, it may be that the code you are writing is not as readable as it could be and not as readable as it should be. Moving on…

I created a CSS class to enhance the results:

.section
{
    background-color: yellow;
    border: 2px solid black;
    margin: 5px;
}

Here is the rendered output before:

…and after the jQuery code runs.

Pretty Cool! But, while playing with this code, the logic of nextUntil began to bother me: What happens in the last section? What stops elements from being collected since there are no more elements with the .heading class? The answer is nothing. In this case it stopped collecting elements because it was at the end of the page. But what if there were additional HTML elements?

I added an anchor tag and another div to the HTML:

<h3 class="heading">Heading 1</h3>
  <div>Content</div>
  <div>More content</div>
  <div>Even more content</div>
<h3 class="heading">Heading 2</h3>
  <div>some content</div>
  <div>some more content</div>
<h3 class="heading">Heading 3</h3>
  <div>other content</div>
<a>this is a link</a>
<div>unrelated div</div> 
</form>
</body>

The code as-is will include both the anchor and the unrelated div. This isn't what we want.

My first attempt to correct this used the filter parameter of the nextUntil function:

nextUntil('.heading', 'div')

This will only collect div elements. But it merely skipped the anchor tag and it still collected the unrelated div:

The problem is we need a way to tell the nextUntil function when to stop. CSS selectors to the rescue!

nextUntil('.heading, a')

This tells nextUntil to stop collecting elements when it gets to an element with a .heading class OR when it gets to an anchor tag. In this case it solved the problem. FYI: The comma operator in a CSS selector allows multiple criteria.

Bingo!

One final note, we could have broken the code down even more:

We could have replaced the andSelf function here:

$this = $this.nextUntil('.heading, a').andSelf();

With this:

// get all the following siblings and then add the current item
$this = $this.nextUntil('.heading, a');
$this.add(this);

But in this case, the andSelf function reads real nice. In my opinion.

Here's a link to a jsFiddle if you want to play with it.

I hope someone finds this useful

Steve Wellens

CodeProject

Cool CSS 4 Feature: pointer-events

Fri, 24 Feb 2012 17:40:00 GMT

CSS 4? Really? CSS 3 isn't fully released yet! What on earth is going on here?

It all started when I was fooling around with GIMP, the extremely powerful free graphics editor. I took a public domain image, re-sized it, gave it a transparent background and then added a perspective shadow.

It is beautiful.

I wanted to see the image in "action" so I put it on a web page. But because of the way HTML elements are rendered, there was nothing behind my gorgeous image to demonstrate the transparency. I could have used a background color but instead I gave the image an absolute position and positioned it over a button:

It looks 3-dimensional but you can't click on the button with the mouse. The transparent part of the image is like having a sheet of glass over the button. You can tab to it and use the space bar but it's really not useable as it is.

I recalled reading about the CSS pointer-events property. I assigned it to the image and voila! It worked…at least on FireFox. IE hasn't implemented this feature yet.

Here is a jsFiddle that shows it in action. If your browser supports pointer-events, you will be able to click the button:

Here is a direct link to the jsFiddle (just in case iframes aren't allowed here): http://jsfiddle.net/Steve_Wellens/6GbwK/37/

When I did a bit of research on the pointer-events property, I found it had been pushed into CSS4 because it had "issues". Here is a link that documents re-assigning this feature from CSS3 to CSS4: http://wiki.csswg.org/spec/css4-ui#pointer-events

Here's a table showing what browsers/versions currently support it: http://caniuse.com/pointer-events.

The big question is how do you rationalize this to your boss? Here is a list of business justifications:

I hope someone finds this useful.

Steve Wellens

CodeProject

Log4net: Log to a JavaScript Console

Mon, 23 Jan 2012 00:00:00 GMT

While lurking and skulking in the shadows of various technical .Net sites, I've noticed many developers discussing log4net in their blogs and posts; log4net is an extremely popular tool for logging .Net Applications. So, I decided to try it out. After the initial complexities of getting it up and running, I was suitably impressed. Could it be…logging is fun? Well, I don't know if I'd go that far…at least I'd never admit it.

One of the great features of log4net is how easy it is to route the logs to multiple outputs. Here is an incomplete list of outputs…or 'Appenders' in the log4net vernacular:

AdoNetAppender	Logs to databases
ConsoleAppender	Logs to a console window
EventLogAppender	Logs to Windows event log
FileAppender	Logs to a file
RollingFileAppender	Logs to multiple files
SmtpAppender	Logs to an email address
TraceAppender	Logs to the .Net trace system
AspNetTraceAppender	Logs to the Asp.Net page trace
MemoryAppender	Logs to a memory buffer
Etc., etc., etc.

Wow.

I've been doing a lot of work with jQuery/JavaScript and it dawned on me that seeing server side logging strings in a JavaScript Console could be useful.

So I wrote a log4net JavaScript Console Appender. Strings logged at the server will show up in the browser's console window. Note: For IE, you need to have the "Developer Tools" window active.

I'm not going to describe how to setup log4net in an Asp.Net web site; there are many step-by-step tutorials around. But I'll give you some hints:

Each step must be followed or it will not work (duh).
Putting the log4net settings in a separate configuration file is more complicated than having the settings in web.config: Start with the settings in web.config.
The name in this line of code: LogManager.GetLogger("MyLogger");
...refers to this section in the configuration file: <logger name="MyLogger">

I built the Appender and a test Asp.Net site in .Net Framework 4.0. Here's the jsConsoleAppender.cs file:

using System;

using System.Collections.Generic;

using System.Text;

using log4net;

using log4net.Core;

using log4net.Appender;

using log4net.Layout;

using System.Web;

using System.Web.UI;

namespace log4net.Appender

    // log4net JSConsoleAppender

    // Writes log strings to client's javascript console if available

    public class JSConsoleAppender : AppenderSkeleton

        // each JavaScript emitted requires a unique id, this counter provides it

        private int m_IDCounter = 0;

        // what to do if no HttpContext is found

        private bool m_ExceptionOnNoHttpContext = true;

        public bool ExceptionOnNoHttpContext

            get { return m_ExceptionOnNoHttpContext; }

            set { m_ExceptionOnNoHttpContext = value; }

        // The meat of the Appender

        override protected void Append(LoggingEvent loggingEvent)

            // optional test for HttpContext, set in config file.

            // default is true

            if (ExceptionOnNoHttpContext == true)

                if (HttpContext.Current == null)

                    ErrorHandler.Error("JSConsoleAppender: No HttpContext to write javascript to.");

                    return;

            // newlines mess up JavaScript...check for them in the pattern

            PatternLayout Layout = this.Layout as PatternLayout;

            if (Layout.ConversionPattern.Contains("%newline"))

                ErrorHandler.Error("JSConsoleAppender: Pattern may not contain %newline.");

                return;

            // format the Log string

            String LogStr = this.RenderLoggingEvent(loggingEvent);

            // single quotes in the log message will mess up our JavaScript

            LogStr = LogStr.Replace("'", "\\'");

            // Check if console exists before writing to it

            String OutputScript = String.Format("if (window.console) console.log('{0}');", LogStr);

            // This sends the script to the bottom of the page

            Page page = HttpContext.Current.CurrentHandler as Page;

            page.ClientScript.RegisterStartupScript(page.GetType(), m_IDCounter++.ToString(), OutputScript, true);

        // There is no default layout

        override protected bool RequiresLayout

            get { return true; }

From the Asp.Net test application, here's the web.config file. In the pattern for the JSConsoleAppender, I added the word SERVER: to differentiate the lines from client logging. Note there are two other Appenders in the log…just for fun!

<?xml version="1.0"?>

<configuration>

  <!--BEGIN log4net configuration-->

  <configSections >

    <section name="log4net"

             type="log4net.Config.Log4NetConfigurationSectionHandler, log4net"/>

  </configSections>

  <log4net>

    <appender name="LogFileAppender"

              type="log4net.Appender.FileAppender">

      <param  name="File" value="C:\Log4Net.log"/>

      <layout type="log4net.Layout.PatternLayout">

        <param name="ConversionPattern"  value="%d %-5p %c %m%n"/>

      </layout>

    </appender>

    <appender name="TraceAppender"

              type="log4net.Appender.TraceAppender">

      <layout type="log4net.Layout.PatternLayout">

        <conversionPattern value="%date  %-5level [%property{NDC}] - %message%newline" />

      </layout>

    </appender>

    <appender name="JSConsoleAppender"

              type="log4net.Appender.JSConsoleAppender">

      <layout type="log4net.Layout.PatternLayout">

        <!--Note JSConsoleAppender cannot have %newline-->

        <conversionPattern value="SERVER: %date %-5level %logger:  %message  SRC: %location" />

      </layout>

    </appender>

    <logger name="MyLogger">

      <level value="ALL" />

      <appender-ref ref="LogFileAppender"  />

      <appender-ref ref="TraceAppender"  />

      <appender-ref ref="JSConsoleAppender"  />

    </logger>

  </log4net>

  <!--END log4net configuration-->

  <system.web>

    <compilation debug="true"

                 targetFramework="4.0"/>

  </system.web>

</configuration>

Here's the default.aspx file from the test program, I added a bit of JavaScript and jQuery:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Log4Net Test</title>

    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(DocReady);

        function DocReady()

            if (window.console)

                console.log("CLIENT: Doc Ready!");

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <h5>Log4Net Test</h5>

        <asp:Button ID="ButtonLog" runat="server" Text="Do Some Logging!"

            onclick="ButtonLog_Click" />

    </div>

    </form>

</body>

</html>

Here's the default.cs file from the test program with some logging strings:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using log4net;

public partial class _Default : System.Web.UI.Page

    private static readonly ILog log = LogManager.GetLogger("MyLogger");

    protected void Page_Load(object sender, EventArgs e)

        log.Info("Page_Load!");

    protected void ButtonLog_Click(object sender, EventArgs e)

        log.Info("Soft kitty, warm kitty");

        log.Warn("Little ball of fur");

        log.Error("Happy kitty, sleepy kitty");

        log.Fatal("Purr, purr, purr.");

And finally, here are the three output logs:

From the JSConsoleAppender (IE Developer Tools), it includes a client log call with the server log calls:

From the TraceAppender, the Visual Studio Output window:

From the LogFileAppender (using Notepad):

You can download the solution/projects/code here.

I hope someone finds this useful.

Steve Wellens

CodeProject

Goodby jQuery Templates, Hello JsRender

Thu, 01 Dec 2011 13:30:00 GMT

A funny thing happened on my way to the jQuery website, I blinked and a feature was dropped: jQuery Templates have been discontinued. The new pretender to the throne is JsRender.

jQuery Templates looked pretty useful when they first came out. Several articles were written about them but I stayed away because being on the bleeding edge of technology is not a productive place to be. I wanted to wait until it stabilized…in retrospect, it was a serendipitous decision.

This time however, I threw all caution to the wind and took a close look at JSRender. Why? Maybe I'm having a midlife crisis; I'll go motorcycle shopping tomorrow.

Caveat, here is a message from the site: Warning: JsRender is not yet Beta, and there may be frequent changes to APIs and features in the coming period.

Fair enough, we've been warned.

The first thing we need is some data to render. Below is some JSON formatted data. Typically this will come from an asynchronous call to a web service. For simplicity, I hard coded a variable:

    var Golfers = [

        { ID: "1", "Name": "Bobby Jones", "Birthday": "1902-03-17" },

        { ID: "2", "Name": "Sam Snead", "Birthday": "1912-05-27" },

        { ID: "3", "Name": "Tiger Woods", "Birthday": "1975-12-30" }

];

We also need some templates, I created two. Note: The script blocks have the id property set. They are needed so JsRender can locate them.

    <script id="GolferTemplate1" type="text/html">

        {{=ID}}: <b>{{=Name}}</b> <i>{{=Birthday}}</i> <br />

    </script>

    <script id="GolferTemplate2" type="text/html">

        <tr>

            <td>{{=ID}}</td>

            <td><b>{{=Name}}</b></td>

            <td><i>{{=Birthday}}</i> </td>

        </tr>

    </script>

Including the correct JavaScript files is trivial:

    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>

    <script src="Scripts/jsrender.js" type="text/javascript"></script>

Of course we need some place to render the output:

    <div id="GolferDiv"></div><br />

    <table id="GolferTable"></table>

The code is also trivial:

    function Test()

        $("#GolferDiv").html($("#GolferTemplate1").render(Golfers));

        $("#GolferTable").html($("#GolferTemplate2").render(Golfers));

        // you can inspect the rendered html if there are poblems.

        // var html = $("#GolferTemplate2").render(Golfers);

And here's what it looks like with some random CSS formatting that I had laying around.

Not bad, I hope JsRender lasts longer than jQuery Templates.

One final warning, a lot of jQuery code is ugly, butt-ugly. If you do look inside the jQuery files, you may want to cover your keyboard with some plastic in case you get vertigo and blow chunks.

[Edit]

Someone asked me if it was possible to include the templates in an external file. This seemed to work:

<!--#include virtual="Scripts/RenderTemplates.js" -->

I hope someone finds this useful.

Steve Wellens

CodeProject

HTML 5 and jQuery – A Match Made in Heaven

Sat, 20 Aug 2011 02:00:00 GMT

I recently attended an ASP.NET MVC seminar hosted by the Twin Cities .Net User Group. The speaker was K. Scott Allen. Scott is a charismatic, gifted speaker and did a great job. You can always pick up useful items when watching an expert write a program from scratch.

When I saw what he did with jQuery and HTML 5 Custom Data Attributes, I got so excited I ran around the room squealing like a little girl and wetting my pants until someone threw an unopened can of pop at my head and knocked me out cold. Well, that didn't happen, but what Scott did was interesting enough to compel me to write this post.

What are HTML 5 Custom Data Attributes?

They are attributes that YOU create for an HTML element that starts with "data-"

Here's an example:

    <asp:TextBox

        ID="TextBox1"

        CssClass="TextEntry"

        data-entryType="Date"

        runat="server">

    </asp:TextBox>

data-entryType="Date" is a Custom Data Attribute. Note that asp:TextBox will render as an input element in the browser.

What is incredibly useful, is that jQuery can select elements by Custom Data Attributes. This is better than using CSS class names because CSS is for visual appearance and the CSS classes may be applied to elements you do NOT want to select with jQuery.

In the following example, I have three text boxes for entering data. They all share the same CSS class. Two of the textboxes are marked with a Custom Data Attribute to specify a date type of input.

Page Includes:

    <script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>

    <script src="Scripts/jquery-ui-1.8.15.custom/development-bundle/ui/jquery-ui-1.8.15.custom.js"

        type="text/javascript"></script>

    <link href="Scripts/jquery-ui-1.8.15.custom/css/smoothness/jquery-ui-1.8.15.custom.css"

        rel="stylesheet" type="text/css" />

CSS:

    .TextEntry

        background-color: Cyan;

jQuery:

<script type="text/javascript">

    $(document).ready(DocReady);

    function DocReady()

        $("input[data-entryType = 'Date']").datepicker();

HTML:

<table>

    <tr>

        <td>

            Company Name:

        </td>

        <td>

            <asp:TextBox ID="TextBoxCompanyName" CssClass="TextEntry" runat="server"></asp:TextBox>

        </td>

    </tr>

    <tr>

        <td>

            Start Date:

        </td>

        <td>

            <asp:TextBox ID="TextBoxStartDate" CssClass="TextEntry" data-entryType="Date" runat="server"></asp:TextBox>

        </td>

    </tr>

    <tr>

        <td>

            End Date:

        </td>

        <td>

            <asp:TextBox ID="TextBoxEndDate" CssClass="TextEntry" data-entryType="Date" runat="server"></asp:TextBox>

        </td>

    </tr>

</table>

With this code, the jQuery DatePicker is effortlessly (in a manner of speaking) attached to the correct HTML elements.

There were other slick things demonstrated at the seminar and although it was a seminar on MVC, most of the features demonstrated were applicable to ASP.NET forms.

I have an open mind about MVC…if it allows me to satisfy my client's needs in a more timely fashion than ASP.NET forms, then bring it on.

However, when I see source code mixed in with HTML markup, it looks like a giant step backwards towards classic ASP. I understand the frustration of dealing with the HTML output from the ASP.NET controls. Oh, yes, I do. But you don't have to use every control and there are controls that do give you 100% control over the HTML. So, I will continue to proceed with caution.

I hope someone finds this helpful.

Steve Wellens

CodeProject

Five Phases of Developer Maturity

Fri, 15 Jul 2011 16:30:00 GMT

I generally don't post stuff like this but…what the hell…

Are you a good developer? A great developer? A World Class developer? Perhaps you only think you are a good developer. Maybe you are a terrible developer and don't even know it. The only way to know for sure is to get feedback from other developers and the users of your software.

I believe developers go through several learning phases on their way to becoming World Class developers. There are no short cuts…the dues must be paid. Here are five phases I have observed…as they relate to the code produced:

Phase I: It Works. The first time you get a program to work is immensely rewarding: You have mastered the computer. It was tough…but patience and persistence paid off. Not everyone can do what you just did. Not everyone can make a program work. You are special. You have experienced the magic of bending a machine to your will.

However, sometimes your program crashes. Sometimes it gives unexpected results. How were you to know those pesky users would type in letters when digits were expected? Sadly, some developers never get beyond this phase. Some begin to see themselves as 'creative visionaries': their code is 'proof of concept' and wasn't designed for actual use (so they say). Implementation details are left to others. Often these people are arrogant and fool managers into believing they are gifted. It is a sad programming shop where this occurs.

Phase II: It Works Good. At this phase, the developer has learned to really test the code. They test every input and account for every output. They check the return value of every function. They installed exception handlers and deal with the exceptions raised in testing. The program is now bullet-proof, tsunami-proof and even pointy-haired manager proof. It took extra work but now it is rock solid. No more embarrassing crashes.

But there is a slight problem; the code is a pile of convoluted spaghetti with deeply nested if-else clauses and case statements. It's disgusting to look at and it's embarrassing to admit you can't maintain your own code. When someone asks for a new feature, you take a sick day and update your resume.

Phase III: It is Good. The code works well and it's solid. But, you rewrite it anyway—sometimes several times. You re-organize it so it is clear to read and easy to understand. The code is logically separated into functions, classes and modules. There are concise helpful comments in the code. An intern may view the code and sneer, "What's the big deal, that's simple, I could have written that". No, he couldn't. He has no idea what it took to get the code to that state. Simplifying complexity is an art that cannot be taught.

Phase IV: It has Added Value. While working on the code, you created several functions and classes that can be reused in other projects. It takes more work to make a module reusable...three times as much work is the general consensus. The reusable modules help other projects get a head start. Other developers trust you and, more importantly, they trust your code. You recognize when to consider 'outside' code and understand the risk/reward of doing so. Leveraging the work of skilled developers is not a short cut, it's smart.

Phase V: It is Delivered Early. After mastering code, design and system architecture, there is only one frontier left to keep the job interesting…beat the schedule. Statistically, 30 to 50 percent of software projects fail. Even more are late. When you can deliver on-time solid code that is easy to maintain, you are gold. Caveat: Schedules are calculated guesses. You can plan all you want but as Mike Tyson succinctly put it: "Everyone has a plan, until they get hit."

So, there it is—my two ¢ents.

Steve Wellens

Note to Professional Editors: I'm aware the text vacillates between second and third person form…but it seemed to work that way so I broke the rules.

CodeProject

Learning to Like Linq or, Loving the Linq Loquacious

Sat, 28 May 2011 16:05:00 GMT

Once upon a time, long, long ago, I was working at a company that gave their engineers some shiny, state-of-the-art, new-fangled HP calculators. They were awesome; instead of battery-draining LEDs for display, they used something called an LCD. And, they had buttons galore: more buttons than any other calculator at that time. We positively drooled at their appearance. They looked something like this:

But when it came time to do something useful, like adding two numbers, instead of entering:

3 + 5

You had to enter:

3 5 +

What the heck? Crazy! It's all mixed up! It was using something called: Reverse Polish Notation (postfix instead of infix notation).

A small number of people used their calculators for a few weeks but eventually everyone retired them to a bottom desk drawer. After spending our entire lives with infix notation, no one wanted to change: Learning something new is hard; unlearning something old is harder.

Years later, while I was becoming a software engineer by going to school at night, we studied designing calculator software. Then it made sense: Pushing and popping operators and operands on and off a stack is very efficient for the developer and the computer. Sadly, it is unfriendly for the user.

I believe Linq suffers from the same malady.

Here is a pseudo SQL statement:

    select MyNumber from MyTable where MyNumber > 1

Here is a similar Linq query:

    from MyNumber in MyList where MyNumber > 1 select MyNumber

What the heck? Crazy! It's all mixed up!

It's Reverse Polish SQL!

How many developers have looked at Linq the first time and said, "No thanks, please go away"? A plethora, I'm sure.

Recently however, I took on a contract that required Linq knowledge. Guess what? You can use the Linq library functions, which are extension methods, without having to delve into the abomination of Reverse Polish SQL.

Here's an example, create a new array that contains the elements common to two other arrays:

    int[] MyList1 = new int[] { 1, 2, 3, 4 };

    int[] MyList2 = new int[] { 1, 7, 3, 12 };

    int[] MyList3 = MyList1.Intersect(MyList2).ToArray();

One line of code! The Intersect method is a Linq extension method. Being able to accomplish a complex task with one line of code is exhilarating and empowering. Did I really say exhilarating? I've got to get out more.

Here are a few more Linq extension method examples:

    double Average = MyList1.Average();

    int Sum = MyList1.Sum();

    MyList3 = MyList1.Where(x => x > 2).ToArray();

OK, Linq is awesome. I am sold. To get a list of available functions, right-click on a Linq Extension method and select "Go To Definition". There are too many functions and overloads to list here. The functions above are in the System.Linq namespace in the static Enumerable class. There are other classes in the namespace but Enumerable is the easiest one to jump into. Here are the others: Linq Namespace.

I hope someone finds this useful.

Steve Wellens

BTW, I have gotten used to the abomination of Reverse Polish SQL. Hmmm, I wonder where that old HP calculator went to.

CodeProject

Five Bucks says you’ll Bookmark this Site: jsFiddle.net

Wed, 02 Mar 2011 23:15:00 GMT

In my never-ending wandering of technical web sites, I've been encountering links to jsFiddle.net more and more. Why? Because it is an incredibly useful site:

It is a great 'sandbox' to play in. You can test, modify and retest HTML, CSS, and JavaScript code.
It is a great way to communicate technical issues and share code samples.

There are four screen areas: Three inputs* and one output:

The three inputs are:

HTML
CSS
JavaScript

The output is:

The rendered result

Here's a cropped screen shot:

What am I thinking? Here's the actual page: Demo

*There are other inputs. You can select the level of HTML you want to run against (HTM5, HTML4.01 Strict, etc). You can add various versions of JavaScript libraries (jQuery, MooTools, YUI, etc.). Many other options are available.

If I wanted to share this code with someone manually, they would have to copy and paste three separate code chunks into their development environment. And maybe load some external libraries. Not many people are willing to make such an effort. Instead, with jsFiddler, they can just go to the link and click Run. Awesome.

I hope someone finds this useful (and I was kidding about the five bucks).

Steve Wellens

jQuery Selector Tester and Cheat Sheet

Sun, 13 Feb 2011 19:00:00 GMT

I've always appreciated these tools: Expresso and XPath Builder. They make designing regular expressions and XPath selectors almost fun! Did I say fun? I meant less painful. Being able to paste/load text and then interactively play with the search criteria is infinitely better than the code/compile/run/test cycle. It's faster and you get a much better feel for how the expressions work.

So, I decided to make my own interactive tool to test jQuery selectors: jQuery Selector Tester.

Here's a sneak peek:

Note: There are some existing tools you may like better:

http://www.woods.iki.fi/interactive-jquery-tester.html

http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose

My tool is different:

It is one page. You can save it and run it locally without a Web Server.
It shows the results as a list of iterated objects instead of highlighted html.
A cheat sheet is on the same page as the tester which is handy.

I couldn't upload an .htm or .html file to this site so I hosted it on my personal site here: jQuery Selector Tester.

Design Highlights:

To make the interactive search work, I added a hidden div to the page:

<!--Hidden div holds DOM elements for jQuery to search-->

<div id="HiddenDiv" style="display: none">

</div>

When ready to search, the searchable html text is copied into the hidden div…this renders the DOM tree in the hidden div:

// get the html to search, insert it to the hidden div

var Html = $("#TextAreaHTML").val();

$("#HiddenDiv").html(Html);

When doing a search, I modify the search pattern to look only in the HiddenDiv. To do that, I put a space between the patterns. The space is the Ancestor operator (see the Cheat Sheet):

// modify search string to only search in our

// hidden div and do the search

var SearchString = "#HiddenDiv " + SearchPattern;

try

    var $FoundItems = $(SearchString);

Big Fat Stinking Faux Pas:

I was about to publish this article when I made a big mistake: I tested the tool with Mozilla FireFox. It blowed up…it blowed up real good. In the past I’ve only had to target IE so this was quite a revelation.

When I started to learn JavaScript, I was disgusted to see all the browser dependent code. Who wants to spend their time testing against different browsers and versions of browsers? Adding a bunch of ‘if-else’ code is a tedious and thankless task. I avoided client code as much as I could.

Then jQuery came along and all was good. It was browser independent and freed us from the tedium of worrying about version N of the Acme browser.

Right? Wrong!

I had used outerHTML to display the selected elements. The problem is Mozilla FireFox doesn’t implement outerHTML.

I replaced this:

// encode the html markup

var OuterHtml = $('<div/>').text(this.outerHTML).html();

With this:

// encode the html markup

var Html = $('<div>').append(this).html();

var OuterHtml = $('<div>').text(Html).html();

Another problem was that Mozilla FireFox doesn’t implement srcElement.

I replaced this:

var Row = e.srcElement.parentNode;

With this:

var Row = e.target.parentNode;

Another problem was the indexing. The browsers have different ways of indexing.

I replaced this:

// this cell has the search pattern

var Cell = Row.childNodes[1];

// put the pattern in the search box and search

$("#TextSearchPattern").val(Cell.innerText);

With this:

// get the correct cell and the text in the cell

// place the text in the seach box and serach

var Cell = $(Row).find("TD:nth-child(2)");

var CellText = Cell.text();

$("#TextSearchPattern").val(CellText);

So much for the myth of browser independence. Was I overly optimistic and gullible? I don’t think so. And when I get my millions from the deposed Nigerian prince I sent money to, you’ll see that having faith is not futile.

Notes:

My goal was to have a single standalone file. I tried to keep the features and CSS to a minimum–adding only enough to make it useful and visually pleasing.

When testing, I often thought there was a problem with the jQuery selector. Invariable it was invalid html code. If your results aren't what you expect, don't assume it's the jQuery selector pattern: The html may be invalid.

To help in development and testing, I added a double-click handler to the rows in the Cheat Sheet table. If you double-click a row, the search pattern is put in the search box, a search is performed and the page is scrolled so you can see the results. I left the test html and code in the page.

If you are using a CDN (non-local) version of the jQuery libraray, the designer in Visual Studio becomes extremely slow. That's why there are two version of the library in the header and one is commented out.

For reference, here is the jQuery documentation on selectors:

http://api.jquery.com/category/selectors/

Here is a much more comprehensive list of CSS selectors (which jQuery uses):

http://www.w3.org/TR/CSS2/selector.html

I hope someone finds this useful.

Steve Wellens

Create Image Maps with GIMP

Thu, 03 Feb 2011 03:45:00 GMT

Having a clickable image in a web page is not a big deal. Having an image in a web page with clickable hotspots is a big deal. The powerful GIMP editor has a tool to make creating clickable hotspots much easier.

GIMP stands for GNU Image Manipulation Program. Its home page and download links are here: http://www.gimp.org/ (it is completely free).

Beware: GIMP is an extraordinarily advanced and powerful image editor. If you wish to use it for general image editing tasks, you have a steep learning curve to climb. FYI: I used it to create the shadows you see on the images below. Fortunately, the tool to make Image Maps is separate from the main program.

To start, open an image with GIMP or, drag and drop an image onto the GIMP main window. I'm using the image of a bar graph.

Next, we have to find the Image Map tool and launch it (Filters->Web->Image Map…):

Why is the Image Map tool under Filters and not Tools? I don't know. It's mystery—much like the Loch Ness Monster, the Bermuda Triangle, or why my socks keep disappearing when I do laundry. I swear I've got twenty single unmatched socks. But I digress…

Here is what the Image Map tool looks like:

If we click the blue 'I' button, we can add information to the Image Map:

Now we'll use the rectangle tool to create some clickable hotspots. Select the Blue Rectangle tool, drag a rectangle, click when done and you'll get something like this:

You can also make circle/oval and polygon areas. You can edit all the parameters of an image map area after drawing it.

Rectangle settings (for fine tweaking):

JavaScript functions (it's up to you to write them):

Here is a setup with two rectangles and one polygon area:

When you hit save a map file is generated that looks something like this:

<img src="BarGraphImage.png" width="326" height="306" border="0" usemap="#BarGraphImageMap">

<map name="BarGraphImageMap">
  <!-- #$-:Image map file created by GIMP Image Map plug-in -->
  <!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
  <!-- #$-:Please do not edit lines starting with "#$" -->
  <!-- #$VERSION:2.3 -->
  <!-- #$AUTHOR:Steve Wellens -->
  <!-- #$DESCRIPTION:A bar graph with  no instrinsic value -->
  <area shape="rect" coords="213,62,253,269" onmouseover="ImageMapMouseHover(&apos;Biggest Bar&apos;)" onmouseout="ImageMapMouseHover(&apos;&apos;)"  nohref="nohref"></area>
  <area shape="rect" coords="114,131,158,267" href="~/Details2.aspx"></area>
  <area shape="poly" coords="57,44,76,100,181,102,183,62,142,34" href="http://www.microsoft.com"></area>
</map>

Paste the contents into a web page and you are almost there. I made some tweaks before it became usable:

Replaced ' with apostrophes in the javascript functions.
Changed the image path so it would find the image in my images directory
Tweaked the href urls.
Added Title="Some Text" to get tool tips.
Cleaned out the comments.

Result:

The final markup (with JavaScript function):

<script type="text/javascript" language="javascript">

    function ImageMapMouseHover(Msg)
    {
         $("#Label1").html(Msg);
    }

<img src="Images\BarGraphImage.png" width="326" height="306" border="0" usemap="#BarGraphImageMap">

<map name="BarGraphImageMap">
  <area shape="rect" coords="213,62,253,269" onmouseover="ImageMapMouseHover('Biggest Bar')" onmouseout="ImageMapMouseHover('')"  nohref="nohref"></area>
  <area shape="rect" coords="114,131,158,267" href="Details2.aspx" title="Details 2"></area>
  <area shape="poly" coords="57,44,76,100,181,102,183,62,142,34" href="http://www.microsoft.com"></area>
</map>

It may seem like a lot of bother but, the tool does the heavy lifting: i.e. the coordinates. Getting the regions positioned and sized is easy using a visual tool…much better than doing it by hand.

This, of course, isn't a full treatise on the tool but it should give you enough information to decide if it's helpful.

I hope someone finds this useful.

Steve Wellens

CodeProject

The jQuery ‘live(…)’ Function

Mon, 24 Jan 2011 18:40:00 GMT

[UPDATE]

The live function has been deprecated: "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers."

http://api.jquery.com/live/

On the Asp.Net forums where I am a moderator, a developer was having a problem hooking up click events to the rows of a dynamically created html table. He didn't want to embed the onclick handler in the table rows as each row was created so he tried using jQuery. The problem was he was trying to hook up the click event before the table was created. How to help him?

The jQuery live(…) function comes to the rescue!

What can I say about jQuery and the live(…) function? It's like falling in love with a beautiful woman, who is kind, can cook and keeps a tidy house. So you marry her and then you find out that she's heiress to a trust fund worth millions!

The jQuery live(…) function is an esoteric function; in fact, you may never find cause to use it in your entire career. But if you do use it, it can solve some problems very elegantly.

To put it succinctly, instead of this:

    $('#MyTable tr').click(function()

        alert("Table row clicked");

})

Use this:

    $('#MyTable tr').live('click', function()

        alert("Table row clicked");

})

The live(…) function causes the event handler to be automatically assigned to elements matching the selector…including elements that haven't been created yet. You heard that correctly. It assigns events to elements that don't exist.

As rows are created and added to the table element in question, they automatically get the event handler assigned.

While working on this I became curious and looked at the source code for the jQuery live(…) function. That was a mistake. A big mistake. There is a quote from Otto von Bismark that goes something like, "…two things you don't want to see made are sausage and legislation." I think we can add the jQuery source code to that list. To be fair, I understand that jquery code runs on millions of browsers daily. Sacrificing some readability and maintainability for performance is perfectly reasonable under these circumstances.

Fortunately, the online documentation provides a good description of how the function works: http://api.jquery.com/live/

Bonus Information: While I was poking around in the jQuery source code (with a safety rope, hard hat and air-sickness bag) I happened across some lines like these:

    if ( name === "find" ) 
    if ( arguments.length === 2 )

I'd never seen this before and it's not even mentioned in a book called The JavaScript Bible. It's called the Identity Equal Operator (there is also an Identity Not Equal operator !==). It checks both type and value. In other words, it does not do a type conversion before checking for equality. Here's an illustration of how it works compared to the equality operator:

    var x = 3;

    // equality
    x == 3 is true
    x == '3' is true
    x == "3" is true

    // identity equality
    x === 3 is true
    x === '3' is false
    x === "3" is false

[Edit/Update]

It has been pointed out to me that jQuery 1.4 introduced the delegate(...) function which does the same thing as the live(...) function but inserts the event handler closer to the selected elements rather than at the root of the DOM so it's performance is better. However, another person pointed out if you are attaching events to dozens of elements (say anchors) it's better to have a single handler at the top of the DOM. Here is the best article I found discussing the differences: http://test.kingdesk.com/jquery/bind_live_delegate.php

I hope someone finds this useful.

Steve Wellens.

CodeProject

Web.Config is Cached

Sat, 15 Jan 2011 16:21:00 GMT

There was a question from a student over on the Asp.Net forums about improving site performance. The concern was that every time an app setting was read from the Web.Config file, the disk would be accessed. With many app settings and many users, it was believed performance would suffer.

Their intent was to create a class to hold all the settings, instantiate it and fill it from the Web.Config file on startup. Then, all the settings would be in RAM. I knew this was not correct and didn't want to just say so without any corroboration, so I did some searching.

Surprisingly, this is a common misconception. I found other code postings that cached the app settings from Web.Config. Many people even thanked the posters for the code.

In a later post, the student said their text book recommended caching the Web.Config file.

OK, here's the deal. The Web.Config file is already cached. You do not need to re-cache it.

From this article http://msdn.microsoft.com/en-us/library/aa478432.aspx

It is important to realize that the entire <appSettings> section is read, parsed, and cached the first time we retrieve a setting value. From that point forward, all requests for setting values come from an in-memory cache, so access is quite fast and doesn't incur any subsequent overhead for accessing the file or parsing the XML.

The reason the misconception is prevalent may be because it's hard to search for Web.Config and cache without getting a lot of hits on how to setup caching in the Web.Config file.

So here's a string for search engines to index on: "Is the Web.Config file Cached?"

A follow up question was, are the connection strings cached?

Yes. http://msdn.microsoft.com/en-us/library/ms178683.aspx

At run time, ASP.NET uses the Web.Config files to hierarchically compute a unique collection of configuration settings for each incoming URL request. These settings are calculated only once and then cached on the server.

And, as everyone should know, if you modify the Web.Config file, the web application will restart.

I hope this helps people to NOT write code!

Steve Wellens