You may face hard time starting TDD, but soon you will realize it is worth!

Here I am just sharing about my first experience with TDD approach, the writing is an opinon, if you have different, no issues, I would love to hear.

Prior to TDD approach to developing software application was  like looking no backward, thinking positively while running on code marathon track. The confidence on application was solely dependent on developer’s manual testing. Later this confidence gets sealed by QA team testing. 

TDD changes your thought process to good extent. It enables you to think or more specifically it demands you to think of test cases before writing your code. It asks you “what it should do” before you actually start doing it. 

It seems to be good thing, you should start doing. Initially I found it difficult to adapt, as I was writing lot of code which did not direct contribute to output. I thought writing this code is redundent effort and it is not that worth. I also had problems is estimating the time required. And “which things to test” was a mind blocking question.

I started with writing unit tests for important functions in app, this gave me on ground knowledge of how to write tests, how to run them. I think this is least you can do to dive into TDD i.e. write unit tests for imp functions, execute them, have fun with them. But there is much more yet to do to adapt TDD.

I think one should not loose hope while begining into TDD style. Start small, which will give you idea of environment and it also introduce you to the thought process. 

Few weeks after starting the TDD, we had requirement to change one of our core modules functionality. at this particular time already written tests helped me a lot to be ensured that everything is still working fine.

This was about how I have started into TDD approach. Concluding line I can draw from this is it takes patience and some effort to get familiar with it. 

I have plans to write more when I will get good experience, but I think that will be more on technical side of things.

Thanks ūüôā


Add Bootstrap sass(scss) to Angular 2


  1. Update .angular-cli.json ( which is in root folder of your Angular2 application) for
    1. “styleExt”: “css” to¬†“styleExt”: “scss”
    2. “styles”: [
      ] to¬†“styles”: [
  2. Update the styles.scss in src folder ( create if does not exist) for adding lines
    1. @import “./assets/bootstrap-sass/variables”;
      @import ‘../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap’;
  3. Install bootstrap sass module npm install –save bootstrap-sass
  4. Copy _variables.scss file from node_modules/bootstrap-sass/assets/stylesheets/bootstrap to src/assets/bootstrap-sass folder.
  5. (Optional) Update the above file src/assets/bootstrap-sass/_variables.scss for bootstrap customization.
  6. Run ng serve to compile the Angular2 application and see the changes in browser.




You may need to update src/assets/bootstrap-sass/_variables.scss for fonts path,


$icon-font-path: if($bootstrap-sass-asset-helper, “bootstrap/”, “../fonts/bootstrap/”) !default;


$icon-font-path: if($bootstrap-sass-asset-helper, “bootstrap/”, “../node_modules/bootstrap-sass/assets/fonts/bootstrap/”) !default;



Getting Started with Angular2 and Bootstrap

Getting Started with Angular2 and Bootstrap

# Install Angular2 Cli
npm install -g @angular/cli

# Create new application
ng new application-name

# Start serving application, see browser localhost:4200
ng serve

# In src directory, install bootstrap using bower
bower install bootstrap –save

# Link bootstrap style to application, edit .angular-cli.json
# add new element to app->styles array

# Stop and again start serving the application and it is ready!

JavaScript “this” at simplest level

In JavaScript “this” thing confuses the beginners as well as experienced ones sometimes. There is lot of stuff on Internet (may be like this one) and almost each book on JavaScript emphasizes on explaining “this“.

Here lets go through very simplest definition (though informal one) which can help us in understanding “this“.

this” is a reference to object to which enclosing method belongs and if there is no enclosing method “this” is global object “window“.


1. In global context, without enclosing function
// window….

Here “this” is in global context hence simply it is nothing but reference to “window” object.
2. In global context, within enclosing function

function foo(){

// window

Here “this” is in enclosing function which belongs to global object “window” (you can call here),
hence here “this” is “window”.


3. In enclosing function which is method of some object.

var foo = {
    bar: function (){
// foo

Here “this” is in enclosing function “bar” which belongs to object “foo”, hence “this” is a reference to “foo” object.


4. Another varient of #3, but with one more level of nesting

var person = {
¬† ¬† name: “Sachin”,
    showName: function () { console.log(; },
    employee: {
¬† ¬† ¬† ¬† name: “Web Develoepr Sachin”,
        showName: function () { console.log(;}

// Sachin

// Web Developer Sachin

Even if this example shows nesting here, but if we simply follow our informal defination “person.showName” method’s “this” is “person” object and “person.employee.showName” method’s “this” is “employee” object.


Let me know your comments.

Happy coding ūüôā

How to add sass syntax highlighting for sublime

When you are on sublime editor window,

  1. Enter Ctrl  + Shift + P, it will open command window for sublime.
  2. Type¬†“Install Package Control”
  3. Click¬†command “Install Package Control” form the list, it will install the package control for your sublime.
  4. Enter Ctrl + Shift + P, to open the command window. (Select Install Package)
  5. Enter the “sass” to search the sass support packages
  6. Select the appropriate one and click the package to install.
  7. Your done!, you can use these steps to install any package/support for sublime e.g. jade highlighting

Happy coding…. ūüôā

Better angular js validation messages using jquery validator

Angularjs validation messages requires you to

  1. Add lot of html markup
  2. Add validation rules to your html markup.

For simple, short forms this might be good but for big forms and regular use it will not fit. It makes html markup complex, making it hard for user to understand the form validation rules, change messages.

Before angularjs, in the time of jQuery plugins world, there was a plugin (and still exists) used for validations called jQuery Validator. This plugin allows you to keep rules, messages in single javascript object which is very easy to maintain. It also provides good range of validation rules along with custom rule creation.

This jQuery validator plugin can be used in angular js(the angular way), here it is Angular jQuery Validator.

Please see the documentation for how to get started.

It makes validation task really easy and manageable.