Sunday, October 14, 2012

Bundling and Minification with MVC 4.0

With MVC 4.0 few new features has been introduced like 
  • web APIpport
  • Enhanced support for asynchronous methods
  • Mobile project support
Bandling and Minification is the most exiting feature

Now a days developer using different JS plagins and and css files to provide rich look to web application. That while loading web page browser require to request more number of resource files

Most of the browser support maximum six connections at a time to the server and  other resources has to wait for download completion

Bundling is combine the multiple files in to single file and decress the no of file and less number of file incress the pgae load performance.

Minification performs a variety of different code optimizations to scripts or css, such as removing unnecessary white space and comments and shortening variable names to one character.

minification example :
actual code
function test(value1, value2)
   return value1+value2;

minified code
function a(b,c){return a+b;}

Some of open source Javascript code provide minification version to improve the performance like Jquery, Jquery Mobile, modernizr etc.

While .net minification is developing minified version by the it self. Developer can control the which version either to serve minified version or full version of JS

Developer can contorl it using web.config

 debug="true" />

or by specifying following value while registering bundle

BundleTable.EnableOptimizations = true;

I have found some problem and also find some solution on stack overflow :

  • .net it self minified the script 
  • .net not render the script .min version
Jquery Mobile .net minified version not works on opera desktop browser as well opera mobile browser the Problem and solution are explain in below link

mvc4 bundler not including .min files 

Those features are already in used but .net has integrate this development and make development and deployment easy and save time. 


Wednesday, September 19, 2012

Convert desktop version of website to mobile site

Google has start a new application GOMO for convert your existing desktop web application version to mobile version.

Google has made collaboration with dudaMobile. It is very exiting application for Google.
The application is convert desktop version website in mobile website within few seconds.

  • Application not only convert site in to mobile version user can also select the theme for the mobile application.
  • User can edit/delete the content from the mobile application.
  • User can customize contains for mobile site.
  • Not only this Google is also providing free hosting for the site for a year.
  • User can also take free help from support team for a year.
Those all facility provide to only attract most of the individual/ organization to once convert their site into mobile application but it also has some drawbacks.

  • Your desktop site should be well designed before mobile conversion.
  • The application will convert all site in to mobile version it include each and every link which may not require for the mobile site and it may create extra load for the mobile application.
  • This application may not work on lower end mobile device or older smart phone.
so in conclusion I can say that this is best opportunity for individuals and organization who has their static site and want to develop mobile site, but for a well organize site or for dynamic site this is not a good choice.


Sunday, September 2, 2012

HTML5 Geolocation for Mobile

HTML 5 is develop not only to target desktop but also to target every device which can access internet like Mobile, Smart TV, Gaming console etc.

HTML 5 Geolocation  can be use with Mobile to develop various application, before this native application is the only way to develop Geolocation application of course developer can access the native features of Mobile device using Phonegap

With HTML5 it is possible to get as accurate geolocation information as device native application give. actually it is using different algorithms to get geolocation coordinate information. Developer can get accurate coordinate information of end user by using "enableHighAccuracy "  option.   

The navigator.geolocation object offers is quite small but offers the following (at the time of writing):

  1. void navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
  2. long navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
  3. void navigator.geolocation.clearWatch(watch_position_id)
position_options is specified as a JSON-style string with up to three parameters:

  • enableHighAccuracy – A boolean (true/false) which indicates to the device that you wish to obtain it’s most accurate readings (this parameter may or may not make a difference, depending on your hardware)
  • maximumAge – The maximum age (in milliseconds) of the reading (this is appropriate as the device may cache readings to save power and/or bandwidth)
  • timeout – The maximum time (in milliseconds) for which you are prepared to allow the device to try to obtain a Geo location

wpid=navigator.geolocation.watchPosition(geo_success, geo_error, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});

The success_callback_function is passed a single parameter, a position object which has the following properties:

  • coords.latitude – The current latitude reading
  • coords.longitude – The current longitude reading
  • coords.accuracy – The accuracy of the current latitude and longitude readings (in metres)
  • coords.speed – The current speed reading in metres per second (you can simply multiply by 2.2369 to convert to miles per hour or multiply by 3.6 to convert to kilometres per hour)
  • coords.altitude – The current altitude reading (in metres)
  • coords.altitudeAccuracy – The accuracy of the current altitude reading (in metres)

here we take a look of simple example

Example of a "one-shot" position request.

    function showMap(position) {
      // Show a map centered at (position.coords.latitude, position.coords.longitude).

    // One-shot position request.

you can use above example when developer want to use geolocation information once in a code

Example of requesting repeated position updates and handling errors.

    function scrollMap(position) {
      // Scrolls the map so that it is centered at (position.coords.latitude, position.coords.longitude).

    function handleError(error) {
      // Update a div element with error.message.

    // Request repeated updates.
    var watchId = navigator.geolocation.watchPosition(scrollMap, handleError);

    function buttonClickHandler() {
      // Cancel the updates when the user clicks a button.

Example of requesting a potentially cached position.

    // Request a position. We accept positions whose age is not
    // greater than 10 minutes. If the user agent does not have a
    // fresh enough cached position object, it will automatically
    // acquire a new one.

    function successCallback(position) {
      // By using the 'maximumAge' option above, the position
      // object is guaranteed to be at most 10 minutes old.

    function errorCallback(error) {
      // Update a div element with error.message.

Difference between  getCurrentPosition() and watchPosition()

The getCurrentPosition() method takes one, two or three arguments. When called, it must immediately return and then asynchronously attempt to obtain the current location of the device

The watchPosition() is doing  same but, The watch operation then must continue to monitor the position of the device and invoke the appropriate callback every time this position changes

Reference :

Saturday, August 25, 2012

Configure Web Application for iPhone/iPad

To develop rich mobile application there are some guide lines provide by safari developer library. Developer can develop web application like a native application using this guide lines. here are the highlight of some guide line

1) Specify Lunch icon/ web clip:
Developer can specify the lunch icon for web application like native application it is default feature of safari. It is not necessary to specify the lunch icon, safari provide default lunch icon for the web application.

  • To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iOS won’t add any effects to the icon.
  • To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

    <link rel="apple-touch-icon" href="/custom_icon.png"/>
  • In the above example, replace custom_icon.png with your icon filename. If you don’t want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.
  • To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

  • The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 57 x 57.
If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used. If multiple icons are suitable, the icon that has the precomposed keyword is used.
If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... or apple-touch-icon-precomposed... prefix. For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:
  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png
2)Define star up screen for iPhone/iPad

On iOS, similar to native applications, you can specify a startup image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

3)Hide status bar:

For hiding status bar for iOS device developer can use following meta tag:

 <meta name="apple-mobile-web-app-status-bar-style" content="black" />


Thursday, August 23, 2012

CSS 3 Media Queries

If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. This functionality was enabled in CSS2 by media types. Media Types let you specify a type of media to target, so you could target print, handheld and so on. Unfortunately these media types never gained a lot of support by devices and, other than the print media type, you will rarely see them in use.
The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things. For example:
  • width and height (of the browser window)
  • device width and height
  • orientation – for example is a phone in landscape or portrait mode?
  • resolution
If the user has a browser that supports media queries then we can write CSS specifically for certain situations. For example, detecting that the user has a small device like a smart phone of some description and giving them a specific layout.
The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices we can use the following syntax:
@media only screen and (max-device-width: 480px) {


above style only apply to devices which width is less than 480 px

We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic I can add the following:

@media only screen and (max-device-width: 480px) {
 div#wrapper {
  width: 400px;

 div#header {
  background-image: url(media-queries-phone.jpg);
  height: 93px;
  position: relative;

 div#header h1 {
  font-size: 140%;

 #content {
  float: none;
  width: 100%;

 #navigation {
  width: auto;

Linking a separate stylesheet using media queries

Adding the specific code for devices inline might be a good way to use media queries if you only need to make a few changes, however if your stylesheet contains a lot of overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
To add a separate stylesheet after your main stylesheet and use the cascade to overwrite the rules, use the following.
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
some more examples for mobile device and orientation

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */

/* iPhone 4 ----------- */
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */


Monday, August 13, 2012

The Magic of ASP.Net MVC Model Binding

          For the developer MVC not less then a magic. In developer develop the page and hit the page and request for the page for that page and server send response for that page (I am not going in to detail for handler as we are talking about MVC magic).
       It look like a magic because of the
1)The way we are accessing the MVC page (View)
2)The way data pass to the controller

         most of Developer aware with all the page life cycle. Let 's take look of MVC life Cycle

There are two MVC component perform the magic

       The ASP.NET Routing module is responsible for mapping incoming browser requests to particular MVC controller actions. By the end of this tutorial, you will understand how the standard route table maps requests to controller actions.

      The default route handler is already define in Globle.aspx as bellow

  public class MvcApplication : System.Web.HttpApplication
        public static void RegisterRoutes(RouteCollection routes)
                "Default",                                              // Route name
                "{controller}/{action}/{id}",                           // URL with parameters
                new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
        protected void Application_Start()

     When an MVC application first starts, the Application_Start() method is called. This method, in turn, calls the RegisterRoutes() method. The RegisterRoutes() method creates the route table.

      The default route table contains a single route (named Default). The Default route maps the first segment of a URL to a controller name, the second segment of a URL to a controller action, and the third segment to a parameter named id.

Imagine that you enter the following URL into your web browser's address bar:


The Default route maps this URL to the following parameters:

controller = Home
action = Index
id = 3

When you request the URL /Home/Index/3, the following code is executed:


     The Default route includes defaults for all three parameters. If you don't supply a controller, then the controller parameter defaults to the value Home. If you don't supply an action, the action parameter defaults to the value Index. Finally, if you don't supply an id, the id parameter defaults to an empty string.

      Let's look at a few examples of how the Default route maps URLs to controller actions. Imagine that you enter the following URL into your browser address bar:


    Because of the Default route parameter defaults, entering this URL will cause the Index() method of the HomeController class in Listing 2 to be called.

   In this way MVC identify which controller action to be invoke and which view to be rander

         The model binder takes a set of value providers, model metadata providers and validator providers and creates the objects in the parameters of your action methods, performs validation, and the resulting objects are passed in as parameters when the action method on the controller is invoked. That is how a form post can become a fully hydrated and validated object before you do anything explicitly in your controller. If you did not know it did all of that, well, pay attention because there is some interesting stuff ahead.   
    Will start with an example action method on a controller.
public ActionResult AFormPost(string aSimpleType,
ACoolModel aComplexType)
//Do whatever...
      Let us say that this action method would be found on your site at and you are posting to that url. The class in the framework that is responsible for calling the method above is called the ControllerActionInvoker (which you do not need to be too concerned about remembering as you do not use it directly). When the route is parsed by the runtime, that is the class that is responsible for calling an appropriate method on a controller. The ControllerActionInvoker sees that the action method has two parameters that it has to supply. To do that it uses the DefaultModelBinder to attempt to interpret the values available and force them into one of the two parameters specified. And where does it get its values? What are the available sources? Well, it looks in this order:

The form values.
The route data.
The query string.
The http file collection.

     These are called the "value providers". If it finds a value in the first provider, it will pull it from the first. If not, the second, and so on. It will look by name, so if you had a parameter named "foo" and a text input field also named "foo", it would match based on that. And it is not case sensitive.

      In the case of the first parameter in the example above, it will see that it is a simple model (like string, int, et al., as opposed to a complex model, which would be one defined by a separate class such as ACoolModel above) and will convert it to that type and assign it to the parameter.
    In the case of the second parameter, it will see that it is not a simple model and will instantiate an instance, figure out the properties, and for each one look in the value providers to find a value to assign to the property.

    In either case, if the assignment fails because of type conversion errors or the like, an error is added to the ModelState (the thing responsible for keeping track of the validation state of the model). The DefaultModelBinder will then look for any validators on the property and check those. If validation fails, an error will be added to the ModelState. More on validation and model state in the next tutorial.

    So that is the basics of the model binder. By creating your own model binder you can take complete control of the process. However, I have found that the default model binder works almost all of the time, but we will discuss how to create your own model binders at a later time.

     In summary, the model binder takes a set of value providers and creates the objects in theparameters of your action methods, performs validation, and the resulting objects are passed in as parameters when the action method on the controller is invoked. That is how a form post can become a fully hydrated and validated object before you do anything explicitly in your controller.


Wednesday, August 8, 2012

Mobile web testing

             When we are developing any web application we can test that application on browsers. In the same way we can test the mobile web application on mobile browser. but some time it is not possible to setup mobile testing environment Immediately as it is expensive in term of time and money.
             To set up testing environment we need the different mobile devices which is target for the same application and we also need to setup Wi-Fi  enlivenment to access the application through mobile devices

             But for a quick test specially  for unit testing one can use simulators. some of simulator are the same simulators which are use for native application development and some simulators are special design to test web application

1)Apple device(iPhone/iPad/IPod):
             For iPhone Mac Os hasp provide iPhone and iPad simulators, for windows device one can use ibbDemo2(ibbdemo2 link1 ,ibbddemo link2) or from web one can access this simulator
              one of the other way use the safari browser as a simulator as Apple default browser is safari to do this install the safari browser go to preferences an check the show developer menu option, now you can see the developer menu , from developer menu select user agent and you can change user agent from safari desktop to iPhone/iPod/iPad this is one the best way as we can debug the JS, CSS  and HTML

2)Android devices
         To test the web application on android device developer has to download and install the Android SDK you can download it from this: link .

         The other alternate is the safari browser by setting the custom user agent, you can search and add add the Android user agent in safari browser as both are web-kit browser

          But some of  HTML5 and CSS3 features developer has to install Targeted OS's simulator

3)Window Mobile
         For windows Mobile developer can download and install windows mobile SDK from this: link

        To test web application on BB device developer can download simulator from this: link

5)Opera Mobile/Mini
       Some smart phone user also install the opera browser for the mobile developer can download the opera mobile simulator from this: link and opera min simulator from this:link

Off-course simulators/emulators is provide 100% result ,but  it can use as alternate.I recommend to test application on actual mobile device before any build


Monday, August 6, 2012

MVC makes Mobile web Manageable

When we start development for mobile application our basic question is what is the platform or what architecture developer can use to develop mobile web application

  Mobile web application can develop with any platform (languages like Java, PHP , .net etc) but the architecture should be MVC

The main advantage of MVC is TDD we can easily test over code. but for mobile web application we have another advantage as bellow:

This is only require when developer want to target more than one device and want to provide native look and feel ex. for iPhone navigation should be at bottom and fix where in BB it should be at the top of page

With the MVC developer can commonly used the Model and Controller code only they need to develop different view for each targeted device using this way we can develop rich mobile application has also develop MVC architecture which a good choice to develop mobile application and Microsoft  has also provide mobile web development with MVC2 and MVC4

As I discussed previous here developer can design common model and controller and develop the different view for targeted device

Now next question is how to redirect end user to related view  (EX. if  end user access the web application via iPhone/iPod then he/she will be redirect to iPhone specific view which look like iPhone native app, and if end user access it via android then he/she will be redirected to Android view)

Even developer can develop one view to target desktop browser and other to target mobile device this view is known as generic mobile view

for that developer can use Mobile capable view engine which available on internet(Free). MVC is the open source architecture  from Microsoft so developer can also develop their own engine .

With MVC developer has to define related view under same folder (ex. iOS related views are stored under folder name iPhone and android related view are stored under folder name android )

Any request from and user is redirected to the view engine it will check the header information sp. user-agent information of the request and render the particular view accordingly

With MVC 4 the view storing convince in MVC 4 developer add the view in same folder but define the view like index.iPhone. extinction or index.Android. extinction as Microsoft has provide view engine in such a way

That is why MVC is the best option for mobile web development when we are targeting multiple device with different view(presentation).

1) MVC web application is easily manageable/easy maintenance .
2) MVC allow Test Driven Development
3) MVC projects are easily scale developer can easily add targeted view for without make any change in controller or model

1)Developer has to learn MVC  architecture
2) For small project TDD can increase the development time.


Friday, August 3, 2012

HTML 5 and Mobile Device :Myview

HTML5 is one of the hottest topic today for the discussion as a mobile web developer I want to share my view on HTML 5

On 14 February 2011, the W3C extended the charter of its HTML Working Group with clear milestones for HTML5. In May 2011, the working group advanced HTML5 to "Last Call", an invitation to communities inside and outside W3C to confirm the technical soundness of the specification. The W3C is developing a comprehensive test suite to achieve broad interoperability for the full specification by 2014, which is now the target date for Recommendation

HTML5 is the standard which defined by W3C and other open source working group.

For the development of those standard they have use broad view and consider all the browser from different device like mobile, Gaming console, Smart Tv and introduce many features for all type of devices that having browser and some them are not much useful for desktop/laptop browser

Tag are design so carefully that browser can render animation, video, audio without any plugin. 

As we all know only android native browser support the flash plugin, all other smart phone's native browser dose not have capability of use flash plugin to play video or animated flash file on browser

but with help of HTML 5 this will be possible to give support of animation and  video without flash player

let's take overview of some of HTML5 features

with the help of canvas tag and JavaScript developer can draw images, but not only images canvas can also use to develop animation.

With the help of Video tag developer can add video in webpage

With the help of Audio tag developer can add audio element in web page

4) Geo-location:
HTML 5 has develop Geo-loaction algorithm using which developer can use end user's  Geoloaction position information.

6)Application cache:
Using application cache developer can develop web application that can work in offline mode (without internet connection) once it downloaded on user machine user can access the application in offline

7)Storage :
HTML5 also allow developer to store values on client end, I am not talking about cookie. HTML 5 has provide
Session Storage: data remain on client machine for a session only
Local storage: data remain on client machine forever same as cookie key value pair
Web SQL db: developer can store large amount of data in table format just like database ,but those data are stored on client end

8) Worker:
Like ajax some of JavaScript code execute in other thread and it will note affect the performance of the main page loading thread,this can be use with heavy JavaScript function which take more time to execute. but developer can not access document, Window ,etc object in worker it is message base communication between main thread and worker thread

9) Web Socket ,Server Push:
It is bi-directional/ uni-directional communication of browser and server, can be use to develop application like facebook which can give updates on browser in regular interval

10)new input type:
There are many input types are introduce for mobile device they are not much useful for desktop machine like number,date, date time, URL, email add., search etc.

Client side validation without any JavaScript i.e. require and reg.expression validation

add SEO related information in tag

14)new Tags
like input type many new tag are introduce with HTML5 ex. output, section tags etc

This list dose not stop here it s going on and on .....

With this HTML 5 has make web powerful  , but currently no browser is supporting all the features of HTML 5 as it is under draft face but I am sure by the end of 2014 browser developer try to support most of the features of HTML 5.

HTML 5 will make developer life easy. 

Without HTML 5 all those is possible but developer has to suffer lot to archive all those functionality across the browser. 

Reference :

The rise of server side JavaScript

When first time I think about this it seems almost impossible, because as per my understanding JavaScript is client side scripting and it is execute by the browser. But the power of JavaScript has made it possible to have the server side JavaScript. This is very old concept it was first time introduce by Netscape Enterprise Server in late 1994 but Node.js has given more popularity to this concept. Moreover for Microsoft Azure has also adopted Node.js as development averment for cloud application.

Node.js is the server side JavaScript. Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. We can configure node JS to listen event on request on particular port and provide response to the request without any sever !

Node.js is currently using V8 JavaScript engine which was develop by Google. The same engine is used in Google chrome to parse the JavaScript.

Node.Js is the only one example we can find more server side JavaScript example on:
List of Server Side JS


Tuesday, March 27, 2012

Mobile web beginner

Mobile web development is as simple as web development for desktop but programmer should consider the basic thing i.e. device size and design pages accordingly more ever developer has to follow some guide lines

1) Add meta tag for view port

A typical mobile-optimized site contains something like the following:

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

This will fix the page render problems on mobile devices

first image is with meta tag viewport and second is without meta tag