Deep Dive in UX fundamentals

We are living in an era of specializations and strong affiliations. In the paradigm of software development, this phenomenon can be seen in full swing. For better or worst, we have established rigid criteria on the basis of skill sets. A very common division for a web development team is Web / Front end Developer, Server side developer and Web Designer or User Experience Engineer.

Even thou, these type of categorizations or separation by skill; enhance and encourage specialization, but often cause compartmentalization and stereotypes. I see this as a limitation that can hamper the creative and learning process.

Recently, this fact become more evident on me. I participated in a Visual Design Hackathon @Autodesk and there I got the opportunity to see how User Experience folks work. I saw the amount of thought and effort involved in the whole process. The process which starts with product requirements, branding, client and stakeholders expectation and translates into visual design and overall experience. It was an excellent opportunity for a developer like me to understand the details (not just talking about mocks and style guides :D)

I am glad to participate in such an event. I strongly encourage fellow Devs to go and venture into an uncharted territories whenever an opportunity arises. This will help in bridging a gap between UX and UI professionals. Moreover, this will allow the development of shared understanding and vocabulary.

User interface is the outcome and result of collaboration and teamwork instead of just an aspect or part of the product. Collaborations like Visual Design Hackathon plays a vital role in the development of open culture.


Keeping true to agile

Its always nice to revisit the principals that you endorse or believe in. Being a Scrum-Master, I try to remain true to agile manifesto. Recently, while working on a blog related to inner source (more on it later), I visited Agile Manifesto. Its been a while since I went this site. It serves a good reminder regarding what is important and what is not.

I encourage all agile practitioners to checkout Agile Manifesto and if you feel like endorsing; do so (i surely did :)).

In fact, this applies to everything.

Go revisit the principals you believe in and if you feel like endorsing; do so.

Go revisit an old friend or a dear old Book and remind yourself that you still believe.

because Time, Influence and Thoughts…all have the tendencies to blur, modify and change…

Take care


FOSSASIA has become one of the most popular tech / dev conferences of the region. I got an opportunity to talk @ FOSSASIA this year. The atmosphere was great and met some amazing people.

I talked about my on-going project “Aware User Interface”. A user interface that can learn, adapt and evolve according to user’s context. The contexts in focus are 1) Environment and 2) User (surrounding, proximity, physiology and psychology).

I will post separate blogs about my new initiative “Aware User Interface”. On the side note, it was a pleasant surprise when I saw Apple’s Keynotes on 21st March, where they introduced #nightshift and #truetone. I talked about the same thing a day earlier🙂


Angular 2.0: Chapter 1 ‘New Horizon’

Time for some ‘Hello World’. This is by far the most effective way of learning a new tool or technology. Let’s do this a bit differently. We will call our first app ‘New Horizon’. It is a hello world on steroids (or steroids of mild potency). The basic idea is taken from

1: Install Node

We will use Node Package Manager (NPM) to setup the project. In order to use NPM, install Node. Note: This is not mandatory. I choose it because its simple and scalable. Feel free to use anything that you like. Alternate way is to go for non-installation path by using CDN hosted libraries (out of the scope of the current tutorial).

2: Setup Project and Modules

Create a folder for the project (mkdir is a handy command to do that). From command prompt, go to the newly created folder and run the following commands

  • npm init (this command will ask all sort of questions, if you want the default settings, go for npm init -y).
  • npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 –save –save-exact (this command will install the latest alpha of angular and systemJS library. This is the latest alpha at the time of writing this blog. Do check to ensure the latest one).
  • npm i typescript live-server –save-dev

Q: Hmm, I can understand the fact that we have to install Angular 2, but what’s up with all the other stuff?

Good Catch. Lets break things down

SystemJS – It is the universal dynamic module loader. This will be a useful tool when creating multi-module application.

Typescript – It is a super set of ECMA-Script 6 with support of data types. As most of you know, Javascript is a weak type language. With Typescript, this is not a weakness anymore. Plus, Angular 2 is written in TypeScript. Having said that, this is not mandatory as ES5 version angularJS is also available (along with the one for Dart). So, long story short, we will be writing the code in Typescript (with extension of ‘ts’). Since, Browser can only understand ES5 (and some ES6), the code is trans-piled to ES5 before going to the browser.

LiveServer – A quick way to create a web server to publish and see your work.

After running these commands, check ‘package.json’ file in the project folder. This file now contains the details of the installed packages. npm package file can be used to write rudimentary scripts to help manage the application. Add the following script to the script tag in the package.json file.

“tsc”: “tsc -p src -w”,
“start”: “live-server –open=src”

We will run these commands later. Note: If you want to go further, you can setup Grunt or Curl to manage your application. They have more functionality.

3: Finalize directory structure.

Following is the folder structure, I am using for the demo application. You can do the same.

Tutorial_1_1 (1)


4: Entry point to the application: Create Index.html

Index.html is the entry point of the application.


This is a very simple setup for an application with angular2 and systemJS libraries included. SystemJS is used to import the application modules.Note: System is a global object created by SystemJS.

As an alternate, you can to the following:

System.import(‘scripts/app.js’); // No need to add config.


If you are not interested in SystemJS all together, then you have to relay on DOMContentLoaded event to manually bootstrap your root component. Checkout this nice article:

5: Root Component: App.ts

The first step will be to import required modules. Unlike Angular 1, not every component or module is available in the context. We need to import the ones needed. For the root app component, we need the basic stuff (Component, View & Bootstrap).

import {
} from "angular2/angular2";

Import statement defines the modules we want to use to write our code.

Second step is to create a root component. Consider root component like an ‘np-app’ directive. There are three main aspects of the new component of Angular.

Component Annotation: The annotation that provides basic information about the directive and how it will interact with the outside world (DOM).

View Annotation: The annotation that provides the basic template of the component along with the information of the directives that can be used in the template.

Definition class: provides meaning to the component. The properties of the class can be used in the template.

    template: `Hello World on Steroids`
class AppComponent {}

Last part is to tie everything together. Bootstrap the new component to the root level of the application:

// Use this function to Bootstrap or Loading a new component at the root level of the application.