Sunday, August 25, 2013

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)

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)

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;
    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)
    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()
    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)
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.

Monday, August 19, 2013

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.


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: