Archive for November, 2010



Use the exe from following link and run it in your machine to know whether your machine hardware is HAV supported or not …

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=0ee2a17f-8538-4619-8d1c-05d27e11adb2&displaylang=en

Want to know more about Virtual Machine? Check links …

http://en.wikipedia.org/wiki/Virtual_machines

http://en.wikipedia.org/wiki/Comparison_of_platform_virtual_machines

Test-driven development requires developers to create automated unit tests that define code requirements (immediately) before writing the code itself. The tests contain assertions that are either true or false. Passing the tests confirms correct behavior as developers evolve and refactor the code. Developers often use testing frameworks, such as xUnit, NUnit … etc to create and automatically run sets of test cases.

Assemble Activate Assert or Arrange Act Assert is a good Pattern to follow as part of Unit Testing in TDD.

  • All TestCases first Assemble the data resources they intend to use.
  • Then they Activate a target method. (Preferrably the one you name your real test case after!)
  • Then they Assert that some side-effect, from that method, is within tolerance.

Visual Studio – supports built-in testing capabilities for following different types of tests. QAs can install Visual Studio Test Edition and can use Test Project for their testing. Use Test List Editor for selecting/running different tests.

  • Unit Test/Unit Test Wizard – helps in creating new Unit test for a class file. This will be helpful for both developers and testers to perform unit level testing.
  • Coded UI Test – used for recording the UI activities of a manual test. 
  • Database Unit Test – used for testing stored procedures and functions.
  • Generic Test – is for wrapping an executable as a test method. You can wrap the executable using generic Test and can include the same in test automation.
  • Ordered Test – is for executing multiple test scripts in a particular order. 
  • Web Performance Test – used for recording the URLs and generating the code for performance testing.
  • Load Test – is used for performing load test on an application. It simulates multiple users as virtual users and executes the test scripts to simulate the real user load on different servers like Application Server, Database server and Web server. Load test can be used with any of the test scripts. 
  1. Namespace – Microsoft.VisualStudio.TestTools.UnitTesting, Assembly – Microsoft.VisualStudio.QualityTools.UnitTestFramework.dll
  2. Few Main attributes – [TestClass], [Owner(“VJ”)], [TestMethod], [ExpectedException(typeof(ContractException), “SongId must be positive number”)]

NUnit –

  1. Uses Constraint-based modal.
  2. NUnit.Framework is the main namespace
  3. Following are the few main attributes used in many test cases …
    • [TestFixture], [SetUp], [Test], [ExpectedException(typeof(InsufficientFundsException))], [Ignore(“Decide how to implement transaction management”)], [Category(“LongRunning”)], [Culture(“fr-FR”)]
  4. Following are the main assertions used in Constraint based modal
    • Equality (Assert.AreEqual/.AreNotEqual), Condition (Assert.IsTrue/IsNull/IsEmpty/IsNan), Comparison (Assert.Greater/GreaterOrEqual/Less/LessOrEqual)

References

More about TDD refer http://en.wikipedia.org/wiki/Test-driven_development

There are users across the internet who don’t have Javascript. Good websites try to code in such a way that allows all users to access content, with or without Javascript or other plugins.

Then all the cool Javascript interaction and such is added on top later, for Javascript-enabled users (the majority). This is called Progressive Enhancement, a buzz word you should know about if you’re in the web development.

Code rendered inside noscript tag will only render when the user doesn’t have javascript enabled. So at the very least we can do something like this

<noscript> Java script is required for this page to view, please enable it through your browser options </noscript>

More about noscript tag …

<noscript>
<div id=”example”>I want to get this innerHTML</div>
</noscript>

<script type=”text/javascript”>
alert($(‘example’).innerHTML);
</script>

This javascript snippet just returns an empty string. To make it work we can sorta hack it in FF, IE, and Opera.

$(“div img[src*=’cg=myspace’]”).attr(“src”, “//secure-nz.imrworldwide.com/cgi-bin/m?ci=nz-fim&cg=myspace-music&cc=1”);
var nos = document.getElementsByTagName(“noscript”)[0];
// in some browsers, contents of noscript hang around in one form or another
var nosHtml = nos.textContentnos.innerHTML;
if ( nosHtml )
{
var temp = document.createElement(“div”);
temp.innerHTML = nosHtml;
// lazy man’s query library: add it, find it, remove it
document.body.appendChild(temp);
var ex = document.getElementById(“example”);
document.body.removeChild(temp);
alert(ex.innerHTML);
}

In Google’s Chrome, the noscript element has no children in the DOM i.e. everything ignored if scripting is enabled in the browser, and we may expect this to be true in other browsers as well as future versions of the browsers.

Create custom controls from existing user controls

ASP.NET has always supported two different ways of authoring server controls:

  1. Custom controls: These are controls written from scratch exclusively using code. Essentially, you write a class that extends Control (directly or indirectly), and you take care of everything. You need to write logic to create child controls that you want to use, and you override the Render method to perform rendering. Typically, you build this control into a redistributable assembly (that is, a DLL), which can then be used by any ASP.NET applications, simply by placing the assembly in the “bin” directory of the application (or in the Global Assembly Cache).
  2. User controls: These controls are written using an .ascx file, which looks much like an aspx page. That is, you can simply drag and drop the UI elements that you want to use into the design surface. You don’t need to worry about control creation, nor about overriding the Render method.

Article in below link by David Ebbo shows how we can have the best of both worlds by turning an ascx user control into a redistributable custom control, by making use of the new ASP.NET precompilation features

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

Below link gives another approach which may not be that interesting …

http://webproject.scottgu.com/CSharp/UserControls/UserControls.aspx

Getting UserControl response – useful when loading section of page in AJAX call

StringBuilder sb = new StringBuilder();
UserControl uc = new UserControl();
Overlay ctrl = uc.LoadControl(“~/controls/Overlay.ascx”) as Overlay;
ctrl.SetInfo();
ctrl.RenderControl(new HtmlTextWriter(new StringWriter(sb)));
return sb.ToString();

IE6/IE7 are tough browsers to fix any UI related issues. You need to understand few hacks to solve those issues. Refer http://www.webdevout.net/css-hacks for more details.

A Java/.NET developer (not a core UI developer) may not have thorough idea on following css attributes. Knowing them makes your life easy in case if you are fixing any related UI issues.

Opacity, z-index, float, position

.modal-overlay {
opacity:0.85;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
overflow:hidden;
cursor:pointer;
position:absolute;
z-index:102;
background:transparent url(‘/close-button.png’) no-repeat scroll right top;
}

IE uses filter attribute and skips opacity attribute & other browsers skips filter.

JQuery – Samples

Posted: November 22, 2010 in JQuery
Tags:

1. Check class exist or not – if($(“#id”).hasClass(“narroww”))
2. Change element width/height (one or more “,” separated targets) – $(“#id1 .clsname, #id2 .clsname”).width(10px).height(10px);
3. Set css – $(“#id”).css(‘visibility’, ‘hidden’);
4. The difference between .css(‘height’) and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element’s height needs to be used in a mathematical calculation.
5. Show/Hide elements based on class/id/tag –
 $(“#id”).show(); $(“#id”).hide();
 $(“a”).show(); $(“a”).hide();
 $(“.myclass”).show(); $(“.myclass”).hide();

Events –

If you are using JQuery 1.4+ then always use unbind before calling bind, otherwise events will fire more than once due to binding the same event multiple times. Performance will be bad in case if you have too many links on page and you are attaching events to them through JQuery bind method.

1. $(this).unbind(‘hover’); does not work. So use either $(this).unbind(‘mouseenter’).unbind(‘mouseleave’); or $(this).unbind(‘mouseenter mouseleave’);
2. To unbind all events use $(this).unbind(); unbind() doesn’t work with hardcoded inline events Ex: <div id=”some_div” onmouseover=”do_something();”>

Javascript – Prototype Object

Posted: November 22, 2010 in Javascript
Tags: ,

If u’re interested in extending JavaScript and creating your own objects and libraries, the prototype object is a must learn topic.

Like the the pre-built ones, such as document or Math, Custom objects allow us to build up our own personal JavaScript “toolbox” that extends beyond what the pre-build objects have to offer.

The prototype object of JavaScript, introduced starting in JavaScript 1.1, is a prebuilt object that simplifies the process of adding custom properties/ methods to all instances of an object. In JavaScript, we’re allowed to add custom properties to both prebuilt and custom objects.

Ex:

<script type=”text/javascript”>
function computearea() {
var area = this.radius * this;
.radius * 3.14;
return area;
}
function computediameter() {
var diameter = this;
.radius * 2;
return diameter;

}
function circle(r) {
//property that stores the radius
this.radius = r;
this.area = computearea;
this.diameter = computediameter;
}

var mycircle = new circle(20);
//alerts 1256
alert(“area=”+ mycircle.area());
//alerts 400
alert(“diameter=”+ mycircle.diameter());

</script>
A custom property added this way only exists for that instance of the object. If I were to spit out another instance of circle(), called “bigcircle”, for example, bigcircle.radius would by default return “undefined” until I go over the process again of first defining bigcircle.radius, as with mycircle.

When you just wished all instances of the object would recognize the custom property, that’s where the prototype object of JavaScript comes in.

Let’s define the custom property “pi” in the above in a way so it’s a default property of all instances of circle():

//First, create the custom object “circle”
function circle(){}
circle.prototype.pi=3.14159;
// create the object method
function alertmessage(){
alert(this.pi);
}

circle.prototype.alertpi=alertmessage;

While you are free to use the prototype object on any custom objects, this is NOT the case with prebuilt ones (such as image, string etc). JavaScript only allows you to “prototype” prebuilt objects that are created with the new keyword, such as the following:

  • The image object
  • The string object
  • The date object
  • The Array object

Let’s see an interesting example on how to extend the prebuilt String object of JavaScript to include a method that writes any string backwards when called upon

<script type=”text/javascript”>
/*code for extending String object with method that writes text backwards*/
//core custom method for writing text backwards
function outputbackwards(){

for (i=this.length-1;i&gt;=0;i–)
document.write(this.charAt(i));
}

//Attach custom method to string object
String.prototype.writeback=outputbackwards;
var message1=”Welcome to my site!”;
message1.writeback();
var message2=”Today is a beautiful day”;
message2.writeback();

</script>

call() vs apply()

JavaScript 1.3 includes two new methods for the Function object, call() and apply(). The apply() method is a variation on the call() method. The apply() method lets you pass the parameters from one method to the other in a different way than the call() method does it.

The call() method requires the full list of parameters, as shown in the previous page: exterior.call(this, extColor, doorCount, airWing, tireWidth);

The apply() method, on the other hand, lets you specify arguments on its second parameter: exterior.apply(this, arguments);

References

The prototype object of JavaScript – http://www.javascriptkit.com/javatutors/proto.shtml
JavaScript closures – http://www.mennovanslooten.nl/blog/post/62
JavaScript 1.3 Overview, Part I – http://www.webreference.com/js/column25/index.html
JavaScript 1.3 Overview, Part II – http://www.webreference.com/js/column26/index.html
Object Oriented Programming in JavaScript – http://mckoss.com/jscript/object.htm

AJAX Sample

Posted: November 22, 2010 in Uncategorized
Tags: , , , ,
1. JQuery – AJAX
 
jQuery.ajaxSetup( options ) – A set of key/value pairs that configure the default Ajax request. All options are optional.

Ex:
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”,
data: myData
});

Sets the defaults for Ajax requests to the url “/xmlhttp/”, disables global handlers and uses POST instead of GET. The above Ajax request then sends some data without having to set anything else.

Note: Global callback functions should be set with their respective global Ajax event handler methods-.ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()-rather than within the settings object for $.ajaxSetup().

Show a loading message before AJAX request starts

Ex:
$(“#loading”).ajaxStart(function(){
$(this).text(‘Triggered ajaxStart handler.’);
//$(this).show();
});

2. Microsoft AJAX Toolkit Sample
 
<div id=”OverlayContent”>
Content will be shown here!
</div>

<div class=”data”>
<div class=”bums clearfix”>
<div class=”bum”>
<a href=”#” class=”bumoverlay” data-bumid=”556119″>
<img src=”default_large.jpg”/>
</a>
</div>
<div class=”bum”>
<a href=”#” class=”bumoverlay” data-bumid=”556119″>
<img src=”default_large.jpg”/>
</a>
</div>
</div>
<div class=”lists clearfix”>
<div class=”list”>
<a href=”#” class=”listoverlay” data-listid=”2″ data-uid=”10″>
<img src=”med_9745314cb3f92d6460abfdb895c865d0.jpg”/>
</a>
</div>
<div class=”list”>
<a href=”#” class=”listoverlay” data-listid=”3″ data-uid=”10″>
<img src=”med_9745314cb3f92d6460abfdb895c865d0.jpg”/>
</a>
</div>
</div>
</div>

<script>
var OverlayControl = function() { }

OverlayControl.prototype = {
Key : ‘MediaContent’,
ShowbumOverlay : function(e, element) {
var aid = element.getAttributeNode(‘data-bumid’).value;
var r = new Sys.Net.WebRequest();
r.set_url(‘/Modules/abc.asmx/GetData?’);
r.set_body(String.format(‘contentkey={0}&queryparams={1}’, e.Key, ‘bum;’ + aid));
r.set_httpVerb(‘POST’);
r.set_userContext(this);
r.add_completed(e.ResponseHandler);
r.invoke();
},
ShowlistOverlay : function(e, element) {
//alert(this.childNodes[0].getAttributeNode(‘data-uid’).value);
var listid = element.getAttributeNode(‘data-listid’).value;
var uid = element.getAttributeNode(‘data-uid’).value;
var r = new Sys.Net.WebRequest();
r.set_url(‘/Modules/abc.asmx/GetData?’);
r.set_body(String.format(‘contentkey={0}&queryparams={1}’, e.Key, ‘list;’ + listid + “;” + uid));
r.set_httpVerb(‘POST’);
r.set_userContext(this);
r.add_completed(e.ResponseHandler);
r.invoke();
},
HideOverlay : function(e, element) {
var target = $(‘#OverlayContent’);
target[0].innerHTML = “Content will be shown here!”;
},
ResponseHandler: function(executer, args) {
var ele = executer.get_webRequest().get_userContext();
//try
//{
if (executer.get_responseAvailable())
{
var result = executer.get_xml();
var target = $(‘#OverlayContent’);
if (document.all)
target[0].innerHTML = result.documentElement.firstChild.text;
else // Firefox  
target[0].innerHTML = result.documentElement.firstChild.textContent;
}
//}
//finally {
// userContext._requestingData = false;
//}
}
};

var overlayCtrl = new OverlayControl();

// Attach event (mouseover, mouseout) & event handler to every bum <a> tag
var bums = $(‘.bumoverlay’);
for(i=0;i <>
var currentbum = bums[i];
$addHandler(currentbum , “mouseover”,
// javascript closures implementation in for-loops – http://www.mennovanslooten.nl/blog/post/62
function(overlayCtrl, currentbum ) {
return function() {
overlayCtrl.ShowbumOverlay.apply(currentbum , [overlayCtrl, currentbum ]);
}
}(overlayCtrl, currentbum )
);
$addHandler(currentbum , “mouseout”,
function(overlayCtrl, currentbum ) {
return function() {
overlayCtrl.HideOverlay.apply(currentbum , [overlayCtrl, currentbum ]);
}
}(overlayCtrl, currentbum )
);
}

// Attach event (mouseover, mouseout) & event handler to every list <a> tag
var lists = $(‘.listoverlay’);
for(i=0;i <>
var currentlist = lists[i];
$addHandler(currentlist, “mouseover”,
function(overlayCtrl, currentlist) {
return function() {
overlayCtrl.ShowlistOverlay.apply(currentlist, [overlayCtrl, currentlist]);
}
}(overlayCtrl, currentlist)
);
$addHandler(currentlist, “mouseout”,
function(overlayCtrl, currentlist) {
return function() {
overlayCtrl.HideOverlay.apply(currentlist, [overlayCtrl, currentlist]);
}
}(overlayCtrl, currentlist)
);
}
</script>

Content Management Solutions

Posted: November 21, 2010 in CMS
Tags:

I have been working on many Web Applications and Content Management Solutions for many years and based on my experience I want to share expected features out of any content management system for wide acceptance and long survival …

Must Have Features –

  • Manage content – Based on Culture (en-US, en-IN, en-NZ … etc) for international support, active/inactive, Schedule (start/end date, culture based timezone selection), Freequency based (0%, 25%, 50%, 100% … etc, i.e. serving multiple contents randomly on a section of the page or on the page)
  • Content organization – By Hierarchial Folders, Content grouping (Like Taxonomy in Ektron), Content placeholders or placements
  • Meta data support
  • Html Editor – For easy content management
  • Content approval workflow process
  • Native support for XML & XSLT
  • Version/History – Check-in/Check-out, Rollback, Compare content options
  • File Management – Images, Document, Videos (upload files directly to CDN or backend process)
  • Template Management – Content producers who are not familiar with html can edit content through templates – Velocity template system, JSON builder, XSD builder for XML … etc
  • Form Management – To quickly create user action forms (Like XML based Smart Forms in Ektron)
  • Page Management – To quickly create static web content pages based on existing content and make it live in few minutes (Like Page Builder in Ektron)
  • Filter or Rule based content – (Preferred Cul, IP Culture, Logged in, User Range, Query String … etc)
  • Notification system – subscribe to everything for updates, Email Templates, culture based email message management
  • Site Navigation Management (Like Menus in Ektron)
  • Direct links to entire system – Easy bookmarking, share options, links in notifications
  • Polls, Surveys, Message Boards
  • Search – Content, Images, Documents, Videos
  • Simple URLs (Like URL aliasing in Ektron)
  • Security – User Management (Users, Roles & Rules or Rights), Rights for all features, Rights delegation on content folder hierarchies
  • Content Archival
  • Clicks & impressions tracking
  • Reporting system
  • Audit across system for all activities
  • Personalization, Widgets

Good to have Features –

  • Browser Add ons – Locate CMS content sections, content, version
  • Security – Word verification (captcha … etc) while posting content can be optional and user specific
  • Security – Integration to Directory Services (Like Active Directory)
  • Content Indexing
  • Social networking features – Forums, Blogs, Wiki, Chat Room
  • Podcast or RSS
  • Standard advertisement sections/template options – Skyscraper, Full Banner, Half Banner, Gutter (transperent page background), Leaderboard, Rectange, Medium Rectangle
  • Custom control library with AJAX which has native CMS support (Like Ektron control Library) (Server control API, Web service API, Plug-In extension API)
  • Debugging system – Way to identify and quickly fix when a page or site is down. Track Page wise content sections and their recent updates, Site wise recently updated content items across pages
  • Quick links, Hyperlinks, Image Collections
  • Developer/Content Producer workarea – Daily tasks, notifications, reports, checkouts
  • Multi site support – Content syncronization or replication between geographical servers

Performance –

  • Create & maintain content files (xml or text based) pushed to all prod servers based on updates. Don’t access CMS server directly from web applications
  • CDN based images, script files, css files and static pages

Tools & Techs & References-

High Performance Sites

Posted: November 21, 2010 in ASP.NET, Web Development
Tags:

Points of concentration 2 build high performance web pages …

  • Make Fewer HTTP Requests
  • Reduce DNS Lookups – 2 to 4 are good and properly split Components Across Domains, cookie-free domains are ideal
  • Avoid Redirects
  • Make Ajax Cacheable and use GET for AJAX requests
  • Preload/Postload Components
  • Reduce the Number of DOM Elements – avoid iframes, empty image src and DOM access through script scaling images in html
  • Avoid 404s
  • Use a Content Delivery Network (CDN)
  • Reduce Cookie Size
  • Put Stylesheets at Top and JS files at bottom
  • Avoid inline JavaScript and CSS and duplicate scripts
  • Minify JavaScript and CSS
  • Avoid attaching too many Event Handlers to the elements – consider event delegation/bubble up
    Optimize Images, CSS Sprites and make favicon.ico Small and Cacheable

For .NET web pages …

  • Avoid server controls
  • Use Generic Handlers (.ashx files) where ever possible. ASP.NET web forms inherit from the Page class. This provides them with many events and a very detailed initialization and event model. When we don’t need for dynamic images, XML, binary files, AJAX calls use handlers which will give 5% to 10% performance boost. Refer http://dotnetperls.com/ashx for more info

References –