Using Bootstrap to build a simple UI

In my previous post about Using Jasmine to Test JavaScript, I used an example to convert Length for different Units (LengthConverter.js). Next, I decided to go ahead and build a simple UI for the Length Conversion, using Twitter Bootstrap.

Version 3 of Twitter Bootstrap is different from the previous versions, as it is a mobile-first framework and can claim to be one of the best CSS frameworks for building responsive website designs. The reason I used it was because it would be really fast and easy to put a nice UI together.

To get started download the latest version from and use the basic template to start working with a minimal Bootstrap HTML5 document.

The main components of Twitter Bootstrap V3 are:

  • Fluid grid system that scales up to 12 columns (example)
  • CSS base for typography and UI components with consistent styles (docs)
  • jQuery plugins to build an interactive experience on the website (docs)

And honestly, the docs / examples on the site (provided by links above) are so good that you probably don’t need any other reference tutorial.

So here is my Length Units Conversion UI built with bootstrap (


Source code:


Using Jasmine to Test JavaScript

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not rely on browsers, DOM, or any JavaScript framework. It has a clean, obvious syntax to be able to write tests easily. []

The best way to start with Jasmine is to dive straight into examples.
Example: 1 – Use ‘describe‘ to define a test suite and ‘it‘ to define a spec

describe("A simple test suite - is just a function really!", function() {
  it("A simple test spec - is also just a function!", function() {
    var a = 12;
    var b = a;

Example: 2 – I am taking an example to convert length for the following units:

Kilometer, Meter, Centimeter, Millimeter, Mile, Yard, Foot, Inch, Nautical mile

I want to define a convert function
function convert(number, baseUnit)” which will take a number and a baseUnit as an input,
for example convert(1, ‘Kilometer’) and return back a hash of all converted units
example return: {‘Kilometer': 1, ‘Meter': 1000, … }

So in a true TDD (Test Driven Development) style I am going to write my tests first and then write code to make them pass. For this example I am actually going to create a video, which should show you how to get started with Jasmine on your machine and write specs..

Jasmine has a rich set of matchers (used in spec for example toBe( ), not.toBe( ), etc) included. You can refer to the Jasmine doc for full reference, but here are some of them for reference…

  • toEqual – represents the regular equality == operator
  • toBe – represents the exact equality === operator
  • toBeNull: tests the actual against a null value
  • toBeUndefined – tests the actual against “undefined”
  • toBeDefined – opposite of the JS “undefined” constant
  • toMatch – calls the RegExp match() method behind the scenes to compare string data.
  • toBeLessThan/toBeGreaterThan: for numerical comparisons.
  • toBeCloseTo: for floating point comparisons.
  • toThrow: for catching expected exceptions.

And yes, in my LengthConverter example I could also use toBeCloseTo( )  instead of comparing the units with crazy decimal numbers… I will be updating that example soon and will add a UI to it as well.

Source Code: LengthConverter.js, LengthConverterSpec.js


Geolocation in HTML5


Geolocation is a technology to retrieve current geographical location of a user.


So consider an example that you are visiting a city for the first time and looking for sight-seeing locations close to your hotel. However, you do not know where to go and which places to look for. Therefore, it will be helpful if you have some application that can help you locate such places and provide feedback for the same. In that case you as a user will have to allow the application to detect your location and provide you that feedback.

An application like map can also use Geolocation to give you direction to a target location.


The HTML5 Geolocation API uses certain features, such as Global Positioning System (GPS), Internet Protocol (IP) address of a device, nearest mobile phone towers, and input from a user, in the users’ device to retrieve the users’ location. The users’ location retrieved by using the Geolocation API is almost accurate depending upon the type of source used to retrieve the location.

There is a really good demo of HTML5 Geolocation here (

The Geolocation API provides the following methods:

1. getCurrentPosition(successCallback, errorCallback, options)

Used to retrieve the current geographical location of a user.


as the name suggests is a callback function when the geolocation is successful at locating the current position of a user. It takes position object as an argument. This position object specifies the current geographic location of a user as a set of geographic coordinates. Here is the list of properties available

  • coords.latitude
  • coords.longitude
  • coords.accuracy
  • coords.altitude
  • coords.altitudeAccuracy
  • coords.heading
  • coords.speed
  • timestamp

is a callback function to handle errors that may occur while retrieving the location of a user. The third parameter,


specifies a set of options, such as timeout for retrieving the location information. Both of these are optional parameters.

2. watchPosition(successCallback, errorCallback, options)

The function returns a watchId and calls successCallback with the updated coordinates. It continues to return updated position as the user moves (like the GPS in a car).

3. clearWatch(watchId)

Stops the watchPosition() method based on the watchId provided.

Before retrieving the users’ location by invoking getCurrentPosition() we can also check whether the browser supports the geolocation feature.

Listing 1: Consider the following code snippet to check whether the browser supports the geolocation feature:

if (navigator.geolocation) {
  alert("Your browser supports geolocation.");
} else {
  alert("Your browser does not support geolocation.");

Listing 2: Consider the following code snippet for retrieving the users’ location by using the getCurrentPosition() method:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(userPositionSuccess, userPositionError);
} else {
  alert("Your browser does not support geolocation.");

function userPositionSuccess(position) {
  alert("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);

function userPositionError() {
  alert("There was an error retrieving your location!");
Handling Errors

At times, the user may not provide the permission to access his location. Or the error may also occur when a user checks the current location on a mobile device and the device goes out of coverage area or the network connection is timed out. We can handle different types of errors by using some pre-defined error codes.


Listing 3: So we can now can improvise on our errorHandler callback function to give more appropriate message:

function userPositionError(errorObject) {
  switch(errorObject.code) {
    case errorObject.PERMISSION_DENIED: alert("User denied the request for tracking the location"); break;
    case errorObject.POSITION_UNAVAILABLE: alert("User's location is not available"); break;
    case errorObject.TIMEOUT: alert("The request to retrieve user's location is timed out"); break;
    case errorObject.UNKNOWN_ERROR: alert("An unknown error occurred"); break;

Ok! That should be good enough to make use of Geolocation in an application now.

P.S. Just don’t use javascript alert in your real app, that was just to demo the function.

Web Design: Art or just another form of Web Development?

After many years of web development, some with really good interface designs and some not so good ones I have come to a conclusion that one should not expect Software Developers to be good at Design as well. Designing is a very personal thing: some people are more artistically inclined than others, and we can’t expect every developer to be able to pass some university art school program.

Have you seen sites that look similar to these images?

Bad website design

Cluttered website design

Yes! They do exist …

As a Software Developer, I use to get confused about what makes a good design. People say that beauty is in the eye of beholder so judging the design depends on personal taste. But that is not true …

Software Developers use rational thinking in the work they do, whereas a good design requires a lot of emotion. Wondering why emotion? Because Web Design is not just about creating an interface, it is about creating an experience. Aarron Walter wrote this great book on Designing for Emotion and he rightly says that “It is not enough for our websites to be usable. They need to be human.

Web Design is more than just using right colors and fonts, it is about building an interaction with your user. It is about building a relationship with the user, keeping them aware, keeping them informed and not make them feel stupid. Most importantly not to frustrate them. So think about your user emotions while creating that design.

Luckily web designs are not designed in a meaningless context which makes the whole creative process easier to discuss. For example, I could give you contexts like jewelry design site or a site to sell marketing software and you would view the design in that context and provide more useful critique. The following two designs are only good within their contexts otherwise you won’t hang these as a painting in your home.



The above two designs will stimulate users in a different ways. A web design may look fantastic and be incredibly stimulating but unless the project is to look fantastic and be incredibly stimulating it may not be a good design. Whether it is signing up a form, staying on a page, sharing content, or any number of other actions, there should always be specific quantifiable goals for web design.

The design that successfully accomplishes the goal may look fantastic and be incredibly stimulating but that is a consequence of the goal and not the goal itself. An important distinction and one that when kept in mind makes ultimately using design effectively much easier.

So.. Is Web Design just an Art? Definitely Not!  It is about designing an experience for an effective human-computer interaction that involves person’s behavior and perception about the product as an effective, easy to use and efficient tool.

Programming for the passion

"If you have confidence, you will set yourself up in the right frame of mind to succeed."

You have probably heard this statement a lot of times before, but you simply can’t fake confidence. The only way to achieve confidence is to succeed. There is no other way around it.

So what’s the mantra to success? It is Passion! Software Programming is not just a job, it’s an Art – it’s Poetry. It’s the taste of success that comes with every little task that you’ve mastered, and smart solutions you’ve found that turn out advantageous.

With Passion comes Motivation and thus Progress. Software development is not only huge, but also evolving very fast. A good developer enjoy’s keeping up-to-date, since he knows that there’s always a better way to do something. Learning new ways, satisfies his hunger and the great man rightly said “Stay hungry. Stay foolish.”.


Developing software is fairly addictive: you start with a blank file, and at the end you have something that at the end is useful at the very least, and possibly brilliant at the other extreme. And when you are truly addicted to something, you enjoy it so much that you don’t get frustrated as often or tripped up over the little things. You don’t constantly think about what can go wrong. You put your mind in the right emotional frame. This gives you the benefits of confidence even when logically you feel like confidence would be faking it.

At the end of the day, there are always things you just don’t know. “The important thing is not to stop questioning. Curiosity has its own reason for existing.” – Albert Einstein

So for the love of it, open your next blank file and write that next piece of code. Enjoy your next challenge and take over a throne!

I mostly code for the intellectual challenge. To solve problems and make useful things.