Glimpse - ASP.NET Debugging

As the name suggests Glimpse allows you to glimpse into what is happening on server side of your ASP.NET application. It can save you lot of time whilst debugging by providing plethora of information and also help you learn and understand the internal mechanics of ASP.NET.

You can install Glimpse using Nuget. Ensure you install the right packages for ASP.NET and the features you want use.

You can also use the package manager console to install Glimpse

install-package Glimpse.MVC4
install-package Glimpse.EF5

Glimpse is quite extensible and there are many other packages available from the community.

Once you have installed the packages required for your project, you need to turn on Glimpse by going to http://yourproject:port/Glimpse.axd

Now you can see stats from Glimpse hud in the bottom right corner of your application.

You basically turn Glimpse on and off with cookies, it does not run in background. You can setup security policy to control when you want to use it. For example, locally when debugging or with a specific cookie value, or your authorization role, or parent switch in the web.config.

The Glimpse view is inspired from developer tools like fire bug. The great thing about it is that each tab is a plugin itself and is all built with CSS and javascript.

You can see all the information from your Configuration file like your connection strings. Information on what environment the application is running on. Even SQL queries being run by entity framework and the time taken for them to complete.

Since the server is collecting information on all sessions, you can pull out a popup browser window of Glimpse and connect to sessions from other browsers. For example, you could debug a session for a customer remotely whilst they are performing actions.

I think it is a great tool which should be used in every ASP.NET project. You should watch this great introduction video on Glimpse site by Anthony and Nick.

Command Query Separation

'Command Query Separation' (CQS) is a design principle by which the methods of an object are categorised separately:

Commands: Changes the state of the system and does not return value.

Public Course Courses.Find(courseName)
{
//implementation
};

Query: Returns a result without having any side effects on the state (i.e. does not alter the observable state of the system).

public void Course.AllocateFaculty(faculty)
{
//implementation
};

Whilst CQS is a sound principle, but there are exceptions in many cases. Some these violations may be acceptable but other could be potentially dangerous.

Lets consider an example where this violation maybe acceptable. The classic violation is Stack.Pop() which is a command and a query. It removes and returns the object at the top of the stack. Another simple example which breaks the pattern but may be useful in multi-threaded programs:

public int IncrementCount()
{
  int copyOfCount;
  lock(_count)
  {
    _count++;
    copyOfCount = _count;
  }
  return copyOfCount;
}

You can manage this better making sure that if a command returns a value, it will go through an out parameter and the command will have a meaningful name IncrementAndReturnCount.

public void IncrementAndReturnCount(out int latestCount)
{
  lock(_count)
  {
    _count++;
    latestCount = _count;
  }
}

There are however instances where CQS violations cause dangerous side effects that can be difficult to debug. Consider the following method in the Course class:

public void GetSchedule()
{
  if(this.Schedule==null)
    this.Schedule = new Schedule();
  return this.Schedule;
}

It may seem very harmless that the method instantiates the schedule if it is null. But imagine someone added a new operation to send an alert all the allocated faculties of courses which do not have a schedule set.

foreach(var course in Courses)
{
  if(course.GetSchedule() == null)
    SendAlertToFaculties(course.AllocatedFaculties);
}

By adding command behavior to GetSchedule(), we have accidentally broken the code. Now we must spend time to re-factor the original code.

We can say CQS is clearly intended as a programming guideline rather than a rule for good coding.

Make your web site mobile friendly

Last year on an average 15% of traffic to sites was from mobile devices and this will continue to grow.

There are many solutions to optimize your site for mobile devices. For example adaptive design, responsive design, website conversion. Each has pros and cons, and ranges from free to thousands of dollars. The amount you spend depends on the requirements of your business and your visitors. We will walk through things you can do in context of responsive design to make your site mobile friendly.

Mobile meta tags

We can improve users browsing experience on certain devices by using the mobile webkit.

Viewport

This meta tag tells the browser how content should fit on the device's screen.

The above example tells the browser to set the viewport to the width of the device with initial scale of 1.0. We can turn off zooming by setting user-scalable=no or can limit the scaling level.

You can also set the width to a pixel value (e.g. 320px) but note not all devices have same width so it's better to stick with device-width and let browser take care of the rest.

You can look into some device specific settings on Android and iOS to further improve user's experience.

Home Screen Icons

iOS and Android devices also accept a rel="apple-touch-icon" (iOS) and rel="apple-touch-icon-precomposed" (Android) for links. They get used as icon on the user's home screen when they bookmark your site.

CSS3 Media Queries

Media queries enables the content's presentation to be customized to a specific range of output devices without having to change the content itself.

Screen Sizes

The example below shows how we can target mobile devices

A media query with the "only" keyword will cause non CSS3-compliant browsers to ignore it. The following example would target tablet screen sizes.

Some of the styling changes that you should enforce:

• Reduce extra whitespace/padding across the site. Space is premium!
• Remove :hover states. They'll never been seen on touch devices.
• Adjust the layout to be single column.
• Remove the box-shadow around big container div. Large box shadows reduce page performance.
• Remove opacity changes. Changing alpha values is a performance hit on mobile.

You can read more about media queries here.

CSS Frameworks

In context of responsive design CSS frameworks have many benefits. A well-built CSS framework or boilerplate can streamline the design process, save huge chunks of development time and ensure your website scales properly on all devices. Here are few you can look into:

• Bootstrap
• Less Framework
• Skeleton
• Foundation
• Gumby Framework
• Base