I started building a quick site to administer some parts of the app and debug the data easier. This being a location aware project, I decided to use Bing Maps and therefore a lot of javascript and JQuery goodness.

After writing a the javascript code to perform basic CRUD operations on two data types it became clear this was going to be very repetitive. The code required to perform CRUD operations is very consistent. Consistent like the auto-generated help pages are.

I decided to build a way to auto-generate a javascript access object to my WCF REST service.  Here’s my first crack at it.

The Pitch

A js file that is a one-to-one javascript clone of the a webservice api. All implemented using jquery Ajax callbacks.
“Sure. What’s so special about that?”

Here’s what’s so special my friends. Its 100% generated on the fly directly by the webservice itself! [oohs from the crowd]
When I make a change to the webservice, any javascript client automagically gets the updated js file.[aahs from the crowd]
Just add the 5 lines of code to jquery-enablify(real word) any webservice(seriously. any webservice), and you’re done. Just set it, and forget it![crowd waves $5 bills in the air]

This makes javascript access to a webservice much simpler. All you need to write in js is event handling and UI logic now.

Creating the JQuery Code Generator

I came across this helpful blog post about programming your own WCF help page. This was the real kickstart to all of this.

First, find the current endpoint and all of its operations.

internal static string GenerateJqueryJs()
{
    ServiceEndpointCollection endpoints =
        OperationContext.Current.Host.Description.Endpoints;
    OperationDescriptionCollection operations = null;
    Type contract = null;
    ServiceEndpoint currentEndpoint =
               endpoints.Where(e > e.Contract.Name ==
                     OperationContext.Current.EndpointDispatcher.ContractName).FirstOrDefault();

    contract = currentEndpoint.Contract.ContractType;
    operations = currentEndpoint.Contract.Operations;

    String functions = GenerateFunctions(operations, contract);
    String classTemplate = JQueryTemplates.ClassTemplate;

    return classTemplate.Replace("{functions}", functions)
        .Replace("{class_name}", contract.Name);
}

The GenerateFunction method iterates over all the operations and writes a jquery method for each one.  It then takes the returned string off all the functions and insert it into the class template which simply wraps all the functions in a single javacscript “class” to isolate them from other javascript functions.

private static String GenerateFunctions(OperationDescriptionCollection operations, Type contract)
{
StringBuilder js = new StringBuilder();
foreach (OperationDescription operation in operations)
{
    js.Append(Environment.NewLine);

    WebGetAttribute get = operation.Behaviors.Find<WebGetAttribute>();
    WebInvokeAttribute invoke = operation.Behaviors.Find<WebInvokeAttribute>();
    MethodInfo method = contract.GetMethod(operation.Name);

    if (get != null)
    {
        js.Append("\r\n" +
            GenerateGetMethod(JQueryTemplates.GetTemplate, get, method) + ",");
        js.Append("\r\n" +
            GenerateGetMethod(JQueryTemplates.GetByUriTemplate, get, method) + ",");
    }
    else if (invoke != null)
    {
        switch (invoke.Method)
        {
            case "PUT":
                js.Append("\r\n" +
                    GenerateInvokeMethod(JQueryTemplates.PostTemplate,invoke, method) + ",");
                break;
            case "DELETE":
                js.Append("\r\n" +
                    GenerateInvokeMethod(JQueryTemplates.DeleteTemplate,invoke, method) + ",");
                break;
            case "POST":
                js.Append("\r\n" +
                    GenerateInvokeMethod(JQueryTemplates.PostTemplate,invoke, method) + ",");
                break;
            default:
                continue;
        }
    }
    else
    {
        continue;
    }

}
return js.ToString().TrimEnd(' ', '\n', '\r', ',');
}

This method simply determines what the HTTP verb is and calls a generateXXXMethod method to generate the actual javascript function code.
You’ll notice the using a JQueryTemplates class. This class simply contains string constants holding templates for the jquery functions.

For example. The javascript function template for GET verbs is as follows:

public const string GetTemplate = @"
{method_name} : function({params}successCallback, errorCallback) {
    jQuery.ajax({
        type: 'GET',
        url: {uri},
        contentType: 'application/json; charset=utf-8',
        success: function (responseText) {
            var response = eval(responseText);
            successCallback(response);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            var error = eval('(' + xhr.responseText + ')');
            errorCallback(error);
        }
    });
}";

The GenerateGetMethod simply starts with this template and does a search and replace on all placeholders with the real value. Placeholders are contained in {squiggly brackets}.

Enabling the service

Now that the code is in place to generate templated JQuery code from a WCF service, the next step is to actually expose the endpoint.
This requires only a slight modification to the standard approach to WCF REST service endpoints.

[WebGet(UriTemplate = "/jqueryservice.js", BodyStyle = WebMessageBodyStyle.Bare)]
[OperationContract]
public Stream Javascript()
{
    string jsFileContents = WebHttpJavascriptGenerator.GenerateJqueryJs();
    Encoding encoding = Encoding.ASCII;
    WebOperationContext.Current.OutgoingResponse.ContentType = "text/plain";
    byte[] returnBytes = encoding.GetBytes(jsFileContents);
    return new MemoryStream(returnBytes);
}

The only change here is returning that I’m returning a Stream instead of an object. WCF does not serialize Streams which allows you to write raw content to the output. The first line is the only real logic. The rest is boilerplate.

The Service is Ready

That’s it! Your auto-generated JQuery javascript file exposing your WCF REST service is ready to go at

yourservice/jqueryservice.js

Consuming The Service from Javascript

All that hard work(not really) leads up to this. First you need to ensure all your ajax requests add the accept header of “application/json”.

jQuery.ajaxSetup({
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Accept", "application/json")
        xhr.setRequestHeader("Authorization", authorization)
    }
});

This is also where you would add any other required headers such as Authorization. From this point forward, all JQuery ajax requests will contained the headers defined in the “beforeSend” function.

Now the fun stuff.

ItemService.GetItems(
    function(items){
    //access all items here...
    },
    function(error){
    //handle error
    }
);

ItemService.UpdateItem(item,
    function (response) {
    //item was updated
    },
    function (error) {
    //handle error</div>
    }
);

That’s it. Now functions to access the REST service are built on the fly and guaranteed always up to date. No more synchronizing APIs.

What’s Next?

While I really like this solution, there are a few things to improve.

1. As you can see these templates are JQuery specific. With a little bit of refactoring, I’d like to make it easier to add new outputs. Scriptaculous and actual HTML create/update forms come to mind. The first thing would be to move the templates out of code and into external files.
2. I’d like to update the templates to allow optional and named parameters the same way JQuery does for callbacks.
3. Javascript intellisense files for Visual Studio.
4. Add caching to the endpoint to prevent regenerating the code every time.
5. Finer control over output formating. Javascript naming convention lowercase function names.
6. The code that generates the list of parameters is very limited right now. There’s no support for endpoints with querystring parameters and multiple parameters support is untested.

That’s it for now. I’ll post further improvements as they happen.

The Idea: A system that acts as a tweet router. The first application; Micro Press Releases.

On one side, Business owners would sign up with their twitter accounts and supply some basic information about their business.

• Name
• City
• Date Founded
• Industry ex. Tech-Web-Social Network
• Stage ex. Pre-seed, funded, established
• Number of empoyees range
• Annual Revenue range

On the other side, anyone can sign up with their twitter account and select the types of companies they would like to receive news about. ex. I would pick all tech startups in Ottawa and Toronto, Digg, Google, and Apple by name, as well as any alternative fuel companies.

Click to enlarge screenshot

Let’s assume this venture is called TwitterWire. The domain is taken, but nothing is hosted there. I already checked.

You would then follow user twitterwire on Twitter and automatically receive all twitter wire news releases that meet the criteria you selected. This makes for a great way to keep up to date with all the happenings in the business/startup world.

To the right is a screenshot with a mockup of how the tweets could be displayed. These two tweets from Devshop and Shopify(1st and 5th tweets) would appear because they matched the criteria I selected, without me having to discover and follow them myself. At the top is how you would submit your own micro press release.

Step 1: Build the site to allow twitter users to submit their business and subscribe to other business’ feeds. Build a system that follows everyone who has registered and upon receiving a tweet from them, fire it off to anyone who’s listening criteria matches the tweeter company.  Twitter wire tweets would be nothing more than a headline and a link.

Getting startups to sign up first would be a great starting point. There’s nobody more willing to share information about their company.

Business’ get to broadcast their news. Everyone gets to easily keep up to date with what’s going on. Everybody wins.

Step 3: Profit

To get started, I figured I’d spend five minutes getting maybe5 mobile. I came across MoFuse. They claim a mobile version of your site in minutes. Really? Just minutes?

Actually, it took about 4 minutes, and that’s including the time it took me to add another CNAME entry to my DNS server so you can access it from m.maybe5.com. Even DNS changes are fast nowadays!

At first glance, it seems like a really nice product. The site looks good on my BlackBerry and their iPhone widget(I hate that term) looks pretty slick. Here it is below so you can see for yourself.

Between MoFuse and the wordpress mobile admin plugin, I can manage and view my blog all from my BlackBerry.

The evil Mr. Burns-like figure at Fido is slobbering over the new money they will make from my increased data usage. “Excellent.”

An interesting story about gaining a new client via word of mouth.

A lady sees her neighbour’s new hairdo and says “I really like your hair. Where did you get it done?”. The reply is “This girl Guisselle, over at The Spa”.

A couple of days later, the same lady notices a co-worker’s hairdo and asks the same question. The reply is “My hairdresser Guisselle, at The Spa”.

The very same week, she asks yet another co-worker about her hairdo. The reply is “This girl at The Spa, …”. The lady interrupts with “Let me guess. Guisselle?”. “Yes! How did you know?”.

It was at this point the lady decides to make an appointment with Guisselle.

It took seeing Guisselle’s work three times and seeing how happy her customers were before this lady decided to go ahead and try her services out for herself.

How many satisfied customers do you need to have out there willing to talk about your product or service before your reputation reaches that tipping point? This is the point at which all your hard work pleasing customers starts to really pay off. Your reputation for quality precedes you and not just because one person is happy, but many.

This lady may very well not really trust the opinion of any one of those people individually, but after all of them express the same opinion, she can’t help but try Guisselle’s service out for herself.

I’m afraid I don’t think there’s a short cut to reaching this tipping point. There’s nothing marketing or a new software feature will do to build that reputation.

A lot of hard work and making sure every customer is happy. That’s the only way.

Guisselle has put in the hard work and is now at the top of the scale from one to awesome.

I love it! Words of a truly satisfied person. Full interview here.

My prediction. This will be on an iPhone in the near future. That is, if Apple is smart enough. This could actually be the end to the blackberry qwerty keyboard.

As it turns out, his current computer isn’t good enough to play back the videos the camera records. The solution?
A brand new dual core system with a 500gig drive and a 19″ flat panel display.

Here’s a man that was born in 1922. He witnessed many of the twentieth century inventions like the band-aid, frozen food, quartz watches, the aerosol can, bubble gum and electric shavers. He knew the world before scotch tape, radio, ballpoint pens, and the microwave were invented. Now he’s probably got more processing power on his desk than was existent in the whole world when he was born.

A Ford from the 1930s

When he was growing up, the main method of communitcation was the telegraph. He was in his 20s when television stations started rolling out. He was in his 30s when credit cards were introduced, and in his 40s when the handheld calculator was invented. Fast forward 30 more years and he was in his 70s when I started browsing a text based internet with a 2400 baud rate modem.

He witnessed the introduction of the rotary dial phone, and the growth of commercial flight in the 1930s. Pretty much any technology we have now, he lived without, saw the introduction of, and witnessed become mainstream.

Today, in 2008 he calls Guatemala to speak with family using Skype, and he gets his latin news online, using Firefox no less. He can record 20+ hours of high def footage on an internal hard drive on his new camcorder and produce a DVD in a matter of minutes.

Its amazing to think how drastic technology has changed during his life. I hope I’ll reach his age and be as healthy as he is. I wonder what tech toys I’ll be playing with then.

How much will technology change in the next 86 years?

One thing is for sure. You have to sprint as fast as you can.

"Be Tom Cruise in Cocktail..."

I was at the grocery store today with my fiance and our grocery tab rang up to $60 and change. We handed the cashier a twenty dollar bill, $40 in fives, and the change.

Can you believe it took the cashier 3 tries to count it? After the final count she paused, stared at the money for a second, looked up and said “sixty?”. We confirmed it was $60 and the transaction was completed.

I know that’s a lot of fives, but you would think a cashier would know how to count money. That is after all, a pretty integral part of the job. I’m no linguist, but I’m pretty sure the word ‘cashier’ is somehow derived from the word ‘cash’.

If you’re going to do a job, you have to be simply amazing at it. I don’t think it matters what the job is. If you’re bored, find something to challenge you. Do the job faster, neater, with one arm behind your back. Just make sure you do it well.

Be Tom Cruise in Cocktail, Jack Bauer, or House. There’s no point in being mediocre. Be awesome.

“On a scale from one to awesome, I’m super-great.”-Strong Bad

Where are you?

I imagine(and hope) in real life, the ratio of helpers to those needing help would be much better.

In an event as extreme as this or a natural disaster, would you be helping or being helped?