Responsive web design

What is responsive web design?

Responsive web design is a term that describes the concept of building a website in a way that allows the layout to change depending on what screen resolution the viewer has. Why? Well it is simply because computers are no longer the only devices with web browsers. With the advent of smartphones and tablets, the way users browse the internet has changed. And as a user you would want to have the same experience of browsing the net on any device. This presented a new challenge to web designers. How?

The screen resolution of the desktop computer and that of a phone or tablet are different. And to cater for this, the initial response was to design one web site for the desktop computer and the other for the mobile device. If you think about it, this is not a bad idea. However, this has its own shortcomings. Mobile devices are ever changing in size, so to design a single website that can cater again for the different sizes is a problem. And it is not only just small screens either. Large high-resolution displays are starting to become much more common than they used to be.

In short, the spectrum of screen sizes and resolutions is changing every day, and creating a different version of a website that target each individual device is not a practical way forward. This is where responsive web design comes to the rescue. Create one website that can be rendered on any device. In the next post I am going to go deeper with responsive web design showing you how you can create one.

We are also contributing to road accidents

Advancement in technology is a good thing. It improves our standards of living. Take for example the mobile-phone and the internet. Now you can call anyone anywhere as long there is coverage. With the internet, well you can now get information instantly, share your thoughts with the world and so on …

But are we responsible when we use all these goodies that we have? I once had a discussion as to what is the major contributor to road accidents in South Africa. And we couldn’t pin point the exact reason because all most all the points we came up with contributed. Apparently our innovations and creations in web and mobile development contributed, for instance, twitter; whats app; mix-it; Facebook and so on …

Yes these applications have helped us in one way or the other, but they are also destroying us. I am sure there is more or less the same debate when it comes to the use of guns. The manufacturer is not to blame, because he/she isn’t pulling the trigger. It is all up to the end user as to when and how to use these products.

Well I think as developers we need to take action and try to educate users on the dangers of texting, twitting or being on Facebook while you drive. It only takes a split second and before you know it you are either in a hospital or worse caused someone to die. I am urging all those who will be driving during this festive season or any other time, to be careful. DO NOT USE YOUR CELL PHONE WHILE YOU ARE DRIVING. Let’s embrace technology and use it to improve our lives not the other way round.  

Is Facebook necessary?

Have you ever wondered what it was like before Facebook? Or what will happen if Facebook is to be no more? For me it is not going to change anything, it's not like it will be the end of the world. But one thing for sure we have to give Mark Zuckerberg the respect he deserves for being innovative.

Before Facebook, i was not in touch with people i knew when i was doing my primary education or even with my relatives that are abroad. It all changed when i joined FB, i was amazed with how easy it was to be linked to  people, from relatives to friends and friends of friends ... So i was in touch but only for a short while. To be honest, i joined FB so that i can check on people i knew ... what are they doing ... who is married ... who has kids .... and so on ...

It was also a platform for engaging in meaningful debates ... be it sports, politics, relationships ... i could share my thoughts with a lot of people. But for some reason i just stopped using FB. If i want to be in touch with my brother or sister, i either call or send an email. If i want to talk about sports or politics i visit my friends. And guess what, i am still not in touch with people i knew when i was in primary ... I am sure they were more curious to know how i was doing than to get in touch with me again ... which i am also guilty of ...

So after FB, everything is still the same. Nothing has been added or removed in my life. And i just came to one conclusion ... for me it is not necessary. I do not know about you, maybe it is great ... you use it to remind you of people who are having birthdays ... to stoke someone ... to check progress on others ... to stay in touch with relatives and friends ... and so on ... I would, however, like to know what you think about FB ... till next time ...

Should We Support Old Browsers?

A lot has happened over the past 10 years. Browsers have evolved to adapt to new web technologies. From a user’s perspective, they are now faster, simple and easy to upgrade. On the other hand, from a developer’s view, it is now easy and faster to develop the look and feel of web applications.

For instance, let us look at one of CSS 3 new feature, box-shadow. The box-shadow, as the name implies, creates a shadow, for instance, on a rectangular div. Now in previous versions you would have to add an image to do that. This feature is supported in IE-9, Firefox 4+ and Chrome 3+ (and other browsers I did not mention).

Another example I can add is Html 5 which again has new elements and features that are supported in newer versions of browsers. Let us look at the input element as an example. You can now specify a text-input as an email. I am referring to it as a text-input because in older browser like IE-6, it will be rendered as a text-box. Now with this there is no need to add validation on the control to check if the value is a valid email. This is all taken care of for you.

These are just a few simple examples that I can point out, but there are a lot more benefits we can reap from using new browsers. Now as a developer you will be tempted to develop web applications or static sites that can only be rendered nicely in these new browsers. You would be impressed with what you would have accomplished in a short period of time and this will only last up to until you get a phone call from a client telling you that the design is not good or that validation is not working. Only to realise that you did not cater for old browsers.

Let us look at the box-shadow again as an example. Now as a fall-back plan you would put a background image that would show the shadow. With the email you would add a JavaScript validation to make sure that the value entered is a valid email. All this could be avoided. How? From the word go, develop bearing in mind there are people still using old browsers. Or simply ask your client to upgrade to new browsers which I would advocate for.

I think it is time we start to educate our clients the benefits of upgrading to new browsers. Not only does it cut development time, but it will also give them a good user experience. This is a win-win situation for all of us. I would also like to hear your thoughts on this.

KnockoutJs

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically, KO can help you implement it more simply and maintainably.

Read here for more information on KnockoutJs.

Implementation:

Now in this post, assuming you have read about KO, I want to show you how you can populate a dropdown list from the server and change text when a value is selected.

Please take note, I did this using . Net MVC 3. Now, i have two ActionResult function that return a Json object. The "studentObj" is an anonymous object that has two properties, student and rankings. Student is the student object with a ranking of  "Average". The rankings, is a list of Ranking that can be awarded to a student.

This is how we are going to display the information on the client side:

These are the results, when page loads for the first time:

And when student is ranked:

I am sure you can agree that this is a cleaner way of changing text depending with the action or event. Try to do this the normal way you were used to doing it and compare, i am sure you will be amazed.

Creational Design Pattern - The Singleton Pattern

A singleton is a class which only allows a single instance of itself to be created, and usually give simple access to that instance, hence the name single-ton. Singletons don’t allow any parameters to be specified when creating the instance because a second request for an instance but with a different parameter could cause problems. If the same instance should be accessed for all requests with the same parameter, the factory pattern is more appropriate.

There are different ways of implementing the singleton pattern in any language, however for this post; I am going to show you how to implement it in JavaScript. With JavaScript, singletons serve as a namespace provider, which isolate implementation code from the global namespace so as to provide single point of access for functions.

The singleton doesn’t provide a way for code that doesn’t know about a previous reference to the singleton to easily retrieve it – it is not the object or class that is returned by a singleton, it is a structure. For instance, closured variables are not actually closures but the function scope that provides the closure is the closure.

In its simplest form, a singleton in JS can be an object literal grouped together with its related methods and properties as follows:

var mySingleton  = {

Name:”Tendai”,
Surname:”Bepete”,
getFullname:function(){
      return this.Name + “ “ + this.Surname;
}

};

You can extend this further by adding private members and methods to the singleton by encapsulating variable and function declarations inside a closure:

var mySingleton = function(){
          var privateAge = 18; //something private like your age or salary
          function showPrivateAge(){
               console.log(privateAge);
          }     
return{
         showAge:function(){ // you can now make it public knowledge
             showPrivateAge();
         },
         Name:”Tendai”, //this the public can see
         Surname:”Bepete”,
         getFullname:function(){
            return this.Name + “ “ + this.Surname;
        }
} ;

};

var single = mySingleton();
single.showAge(); // logs something private - age;
console.log(single.Name); // logs Name;

Now let us consider a situation where the singleton is instantiated when it is needed.

Calling public methods is easy as follows: mySingleton.getInstance().getFullname();

How can the singleton pattern be useful? It is useful when exactly one object is needed to coordinate patterns across the system. Here is an example:

var singletonTest = SingletonTester.getInstance({pointX:20});
console.log(singletonTest.PointX); // outputs 20

Hope this has been helpful. Welcome to comments and suggestion.

Creational Design Pattern - Factory Pattern

To understand further about design patterns, let us look at what design is and what pattern is. Design is a blue print or sketch of something so it can be referred to as a creation of something in mind. Pattern, on the other hand, is a guideline or something that repeats. Now combining this, design patterns becomes creating something in mind that repeats or in other words capturing design ideas as a "pattern" to the problems.  

Now in this post I will look at one of the categories of design patterns and an example. Creational patterns define the best possible way in which an object can be instantiated. This describes the best way to create object instances. There are different types of Creational patterns and in this post we are going to look at the Factory pattern.

Factory Pattern

Factory of what? Of classes. In simple words, if we have a base class and a  number of sub-classes, and based on the data provided, we have to return the object of one of the sub-classes, we use a factory pattern. Here is an example:

In  this example, we use an abstract class as the base. The Ford, Toyota and BMW classes derive from the abstract class Vehicle.

abstract class Vehicle

{   

   abstract string Make {get;}

}

public class Ford : Vehicle 

{

      public override string Make

     {

        get

        {

           return "Ford";

        }

     }

}

public class Toyota: Vehicle 

{

      public override string Make

     {

        get

        {

           return "Toyota";

        }

     }

}

public class BMW: Vehicle 

{

      public override string Make

     {

        get

        {

           return "BMW";

        }

     }

}

static class Factory

{

    public static Make Get(int id)

    {

        switch(id)

        {

           case 0:

              return new Ford();

           case 1:

           case 2:

             return new Toyota();

           case 3:

           default:

             return new BMW();

       }

 }

static void Main()

{

    for(int i = 0; i <=3; i++)

    {

       var vehicle= Factory.Get(i);

       Console.WriteLine("Where id  = {0}, position = {1} ", i , vehicle.Make);

     }

}

Here is the Output 

Where id = 0, position = Ford
Where id = 1, position = Toyota
Where id = 2, position = Toyota
Where id = 3, position = BMW

The factory design pattern is found in the Factory class. The point of the Get method is to take a value and instantiate a class based on that value. It translate integers to objects with a switch statement. Because Ford, Toyota and BMW all derive from the same abstract class, the return type Make can be used. An implicit cast automatically casts the Ford, Toyota and BMW to Make references.

The Main method serves to demonstrate the Factory class in action. We use as part of the demonstration the integers 0, 1, 2 and 3. We user Get method with each of these values. Then, we show that the appropriate type of class was instantiated for each integer.

In short, the Factory patterns can be used in the following cases:

a) When a class does not know which class of objects it must create.
b) A class specifies its sub-class to specify which objects to create.
c) In programmer's language, you can use factory pattern where you have to create an object of any one sub-classes depending on the data provided.