ASP.Net MVC and Progressive enhancement...

28. April 2010 14:40

I was reading an article on Google's use of hash-bang in order to provide a consistent means of Ajaxy content for crawling/display. There are three points to resolve here. 1. Handling those cases where someone posts an ajaxy url, with the hash endpoint to facebook or twitter so that the search engines have a convention to handle these types of urls. 2. Being able to deal with the Ajaxy endpoint, the original content and the ajax callback content. 3. Being able to deal with those browsers that don't have scripting.

It got me thinking, how would one could work with progressive URL's via MVC and a few thoughts occurred to me. First, if the controller name is always the first portion of the url from the application base, if the MVC routing engine could simply replace the ?_escaped_fragment_= portion of the uri to be equal to the original route. For example http://mysite/controller/action/1?_escaped_fragment_=/otheraction/2 would be equivalent to http://mysite/controller/otheraction/2 on the backend. Second, How difficult would it be for the default view engine to be transposed in the instances of an expected response type give html, vs js. Similar to how WCF over http handles JSON via the same endpoints as XML. I know this has been discussed in the past.

Where this leads me, is thinking it might be nice to have an ASP.Net MVC 2 based framework, with conventions for handling these scenarios as a default. I like ASP.Net MVC quite a bit, and have followed Castle and Fubu as well. I'm merely thinking that it would be nice if there were a default starter kit towards creating a browser and search engine friendly Ajaxy application. It really isn't easy. I think that the google hash-bang solution leaves out the people that don't have scripting enabled, getting a hash-bang endpoint is near worthless, save for a <noscript>script disabled indexable links here</noscript>. And progressive enhancement (aka Hijax) techniques don't allow for a browser engine to properly index copy/pasted urls. Having some level of convention to support both is necessary. I think it's equally necessary for google to post the _escaped_fragment_ based urls in the search results for those users who have scripting disabled.

Tags: , ,

JavaScript T-Shirt

20. April 2010 09:44

Thinking it would be cool to put this on a T-Shirt, with the jsninja.org logo on the front, and the following code snippet on the back.

    var a = ["lawn","off","get","my"];
    var o = (function(){
        var u = function(){
                var t = this;
                var s = arguments;
                return [t[s[0]],t[s[1]],t[s[2]],t[s[3]]];
            };
        var b = Array.prototype.slice.call(arguments);
        var a = b.shift();
        return u.apply(a,b).join().replace(/\,/g,' ');
    }(a,2,1,3,0));
    alert(o[0].toUpperCase() + o.substr(1) + '!');

HttpContext Items Collection

19. April 2010 11:07

Just a short little post, I do intend to followup my last post with a post with code on combining/minifying your JavaScript and CSS, this just caught my attention, and wanted to mention it. 

In the process of doing some technical screenings, it is really suprising how many people don't understand or even know about the HttpContext Items Collection in ASP.Net.  More...

Packaging JavaScript

13. April 2010 10:59

I've been working on a number of web based applications recently, and have taken to using a few techniques that I thought I would share. I won't be sharing the code so much, which is ASP.Net centric, but will discuss what I am trying to accomplish.More...

Single-window state machine.

1. April 2010 15:19

I'm currently working on a project where one of the applications has a subform, or child form that has interactions that are separate from the main page within the application. The main page is essentially a filter form, with a results grid. Each item in the grid displays a child form, when the child form is completed, the original screen is displayed again.

Sounds simple enough right? Well, the business desire is to have the filter option form keep its' settings when returning to the page. My initial solution was to use a jQueryUI dialog based option (via an IFrame). Which works great, except in certain conditions IE7 flickers when the mouse moves in/out of the IFrame itself if there are scroll bars present. ugh.

I didn't want to use cookies, or server-side session state as these will affect all windows using the main form. If a user launches the app in a new window, with different filters set, I didn't want these windows to effect each other. Then it occurred to me, I could use window.name to store the state of the form when entering, and leaving the page. I tend to store an "__original_value__" for each form element when a page loads, that way its' easy enough to return to default values later on via code.  More...

Gotta love a new desktop computer.

7. March 2010 14:50
CPU Usage

Okay, so I've been coveting some new hardware for some time now, I setup pretty much my whole family and most of my friends with updated hardware over the holidays, and wanted to get something for myself after the tax return came in.

I tried to pick hardware with decent value along with some higher customer ratings on various sites like newegg and amazon. For the most part I wanted to strike a performance balance. With my son's computer I went with a Core i7-750 and a massive ATI Radeon HD 5870. My goals were slightly different, I don't have a need for maximum gaming performance, and wanted a bit more CPU oomph for today's video encoders, and for my virtual machines. I went with Windows 7, simply because I like the UI. I considered Ubuntu's 10.04 development release, but decided to go for the stability of Windows 7. Cable management is usually a concern for me, as I like to be proud to show what's under the hood, so to speak. I also really wanted the performance boost that an SSD gives, I'm really happy the pricing has come down to a fairly reasonable point. All in all, the build cost me around $1350 altogether. I'm including links to the products I used on Amazon, but you can find it all on newegg pretty easily as well.  More...

Tags:

Paged Results in T-SQL

23. February 2010 19:08

Okay, so I wanted to return a paged result set from a Stored Procedure in Microsoft SQL Server in T-SQL. The results in question can be easily fed via a web service endpoint to a Silverlight, DHTML or other dynamic grid. My own use is to populate a jqGrid.

The features I need are to be able to return only the relevant results for the current page, as well as a count of the total rows available. I need to be able to input the current page number, an arbitrary page size, as well as dynamically sort on a given column. My real world use is a fairly complex set of joined tables, with several input parameters, so I am going to limit me queries to one table with the following format:

CREATE TABLE MyList (
    [id] UNIQUEIDENTIFIER PRIMARY KEY DEFAULT NEWID(),
    [created] DATETIME NOT NULL DEFAULT GETDATE(),
    [name] NVARCHAR(100) UNIQUE NOT NULL DEFAULT '',
    [description] NVARCHAR(250) UNIQUE NOT NULL DEFAULT ''
);

More...

JS Function arguments and optional arguments

19. February 2010 12:13

I hate to admit it, but I do read Stephen Chapman's Blog, and to be honest I tend to find a lot of the things he covers as incomplete, or outright not the best way to do something. A lot of entries are simple repeats of past entries as well. In the past I've had comments censored, specifically when he stated that you should just ignore IE in a prior post, I had a bit of a strongly worded response. In any case, today's entry covered Optional Function Arguments. There's one small point he missed the boat with here regarding the arguments instance.

"That is as far as the similarity to arrays goes though as none of the other methods and properties that can be used with arrays can be used with the arguments object."

It is possible to easily convert the arguments object to an Array instance though. Here's a simple example.

function argumentsToArray() {

  //convert object arguments to args Array
  var args = Array.prototype.slice(arguments, 0);

  //alerts true
  alert(args instanceof Array);

}


I've thought about, and may actually do more of these annotation posts. I've also been thinking about doing some compilation posts with information from Ajaxian, DailyJS and a few other sites.

Detect empty values in JavaScript

15. February 2010 11:14

Okay, this is a quick one. There are several states that can be considered empty in JavaScript, a non-numeric value in a number, an invalid date, and empty string, an undefined value, and a null value. The issue is that some of these require testing against isNaN, and others will evaluate as matching null or an empty string (ex: the number zero and the boolean false). What I wanted was a simple method to check for a non-empty object or string, here it is.

function isEmpty(obj) {
    if (typeof obj == 'undefined' || obj === null || obj === '') return true;
    if (typeof obj == 'number' && isNaN(obj)) return true;
    if (obj instanceof Date && isNaN(Number(obj))) return true;
    return false;
}


How it works, is first it tests for an 'undefined' object, an object that is explicitly equal to null, or explicitly equal to an empty string. If it matches, it's empty. From here there's some more specific checking, if it's a number type of variable, and isNaN (Not a Number), then it's empty. If it's a date, and Number(obj) (which gets the value of the date as a Number) isNaN, then it's an invalid date, and ergo isEmpty. Otherwise the isEmpty returns false (valid, non-empty value). Hope this helps some of you. :)

Classy JavaScript - Best Practices

11. February 2010 13:26

Okay, so you really want to be able to have some of your JavaScript methods to have access to a variable that is private, but maintains state between calls. The first piece of knowledge, is that you can have the contents of a function execute itself at runtime.

(function(){ /*Your actions here*/ })();

This is a very common method of defining complex classes and libraries, that can have their own variables or methods that aren't otherwise available to the object model outside this closure. When you utilize "this" within the function's closure it will be default to the global object, which in the Browser DOM is "window".

(function(){
    this.test = "Test Value";
})();
alert(test); //alerts "Test Value"

Usually when creating libraries in JavaScript it's a good idea to create namespaces for your library. More...

Tracker1

Michael J. Ryan aka Tracker1

My name is Michael J. Ryan and I've been developing web based applications since the mid 90's.

I am an advanced Web UX developer with a near expert knowledge of JavaScript.