For the longest time I have been wanting to add my Twitter status to my blog in place of my quote right under my blogs name in the header.  (see above)  Today I sat down and figured out what I needed to do to accomplish this and to my surprise it only took all of 10 minutes to complete.

What you need in order to achieve the same for your own blog is:

1. Managed Fusion Url Rewriter and Reverse Proxy
   This is used to get around cross site scripting blocks that modern browsers impose on JavaScript.  It is used to create a proxy from a local URL to an external URL by fooling the browser in to thinking it is requesting the feed locally.
2. jQuery
   This is my favorite JavaScript framework, you can use your own, but my examples will be in jQuery.

The first thing you need to do is add a defined spot in your blog where you want the jQuery to write your twitter text status to. I created the following tag in my blog that has an ID of “twitter-status”, the inside of this tag will be replaced with whatever status is downloaded from twitter.

<span><a href="http://www.twitter.com/nberardi">twitter status:</a>&nbsp;<q cite="http://www.twitter.com/nberardi" id="twitter-status">status loading...</q></span>

The second thing you need to do is add a RewriteRule to the rewriter rules for a reverse proxy to the Twitter API. The rewriter rule that I used is:

# get twitter status
RewriteRule ^/twitter-status\.(.*) http://twitter.com/users/show/nberardi.$1 [NC,P]

So if you go to http://www.coderjournal.com/twitter-status.xml, you will get the direct feed that comes from http://twitter.com/users/show/nberardi.xml.

The third and last thing you need to do is add the jQuery JavaScript to the bottom of the page right above the </html>. What this script does is make a GET request to the URL that I defined above and downloads the content as JSON, which creates an object so that it can be used by JavaScript.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
    $.getJSON(
        "/twitter-status.json",
        { },
        // on successful call back
        function (data, textStatus) {
            $("#twitter-status").text(data.status.text);
        }
    );
</script>

So it was really that easy. And it can be done for any feed that you want to pull from anywhere on the internet, it just happened to be that in this case I wanted to grab a feed from twitter.

I have been a huge fan of jQuery ever since I started working on IdeaPipe about 10 months ago. Mostly because of its simplistic DOM access using standard CSS syntax that we all have to learn anyways in the modern Web 2.0 world. In addition to the ease of finding elements on your page, it also works very nicely with other frameworks, I have used it in combination with Microsoft AJAX, Google’s GData JavaScript, and TinyMCE.

Personally I found this to be amazing news, because Microsoft is shipping an Open Source project, licensed under MIT License, with its flag ship developer tool, Visual Studio.  Maybe if we play our cards right, we can start seeing other projects like NUnit and Moq start to ship with Visual Studio.  I have my fingers crossed.

John Resig the developer of jQuery had this to say on his blog:

Microsoft is looking to make jQuery part of their official development platform. Their JavaScript offering today includes the ASP.NET Ajax Framework and they’re looking to expand it with the use of jQuery. This means that jQuery will be distributed with Visual Studio (which will include jQuery intellisense, snippets, examples, and documentation).

And according to Scott Guthrie, Microsoft is also extending the standard product support to jQuery:

We will also extend Microsoft product support to jQuery beginning later this year, which will enable developers and enterprises to call and open jQuery support cases 24×7 with Microsoft PSS.

This is probably some of the most exciting, because it means that jQuery will be a supported stack in some of the more rigid enterprise development environments that won’t install anything that isn’t supported by Microsoft.  I also beleive this is great news for MVC, because jQuery makes MVC just that much more useful for the average developer.

Today I had the need to create a custom event using jQuery, in order to launch a customized form validation event from a global submit event. I did this so I could focus in on the first form field that had an error. My event from the global.js script, that is included on every page of IdeaPipe, looks like this:

$("form").submit(function () {
	var valid = $(this).validate();
	
	// if the form didn't validate then focus the input on the first error
	if (!valid) 
		$(this).find(":input[error]:first").focus();
		
	return valid;
});

This is pretty standard jQuery. What this code above does is set a custom function for the submit event for any <form /> tag on the page. The submit event will only be allowed to continue if a return value of true is returned from the function.

I was able to create this custom jQuery event with the following code:

jQuery.fn.extend({
	validate: function (fn) {
		if (fn) {
			return jQuery.event.add(this[0], "validate", fn, null);
		} else {
			var ret = jQuery.event.trigger("validate", null, this[0], false, null);
			
			// if there was no return value then the even validated correctly
			if (ret === undefined)
				ret = true;
			
			return ret;
		}
	}
});

There are two different states to this method. Primarily because in JavaScript all parameters are optional for functions. So the two states of this function are:

• validate(fn) – sets the event
• validate() – fires the event

An example of setting the event is:

$("form.user-login").validate(function () {
	var userNameValid = ValidateLoginUserName();
	var passwordValid = ValidateLoginPassword();

	return userNameValid && passwordValid;
});

In this example the form is valid if both the login user name and password validate.

An example of using the event is the same as the method above.

$("form").submit(function () {
	var valid = $(this).validate();
	// do some stuff	
	return valid;
});

This may not be the standard bind() and trigger() that most jQuery programmers are use to, but I needed an event that would return a value of true or false, so that I my submit event handler knows if it should focus on errors or continue the submit process.

Hope everybody finds this useful.