Setting up frontend development environment for modern JavaScript Apps


JavaScript is no longer a city car to ride in without even putting a seat belt, it has evolved into a ‘bat mobile’ so better suit-up for that.

JS world is probably the most polluted one with a plethora of libraries and frameworks, every day something new comes into the picture and there is always a temptation to use the latest. Jquery, Bootstrap, Angular, D3 & ReactJS are remarkable frameworks and libraries, they have a great contribution in revolutionizing the web. They have brought it to a state where we have stopped saying “Rich Web Applications”  anymore and the trend has moved towards quoting “Modern Web Applications”.  A fair amount of workload has been offloaded to the front-end nowadays.

Any framework or tool which has an architecture that allows extensibility and a good community around would generally succeed.

Selection of right tools and technology is very important for every project, there is no golden hammer to fix everything. For now, l would limit just to solve the problem of setting up the development environment.

Skip to setup steps

Expectations from a development environment are:-

  1. Easy debugging. Errors should be reported as accurately as possible
  2. Efficiently reload the page when source code changes
  3. Preserve the state of page, e.g if any CSS or HTML has changes just re-apply changes
  4. Efficient and automatic transpiling without undesirable behaviors (LESS,Stylus or ES6 etc.)
  5. Build project with easier configurations, allow extensibility and dependency management
  6. Help maintain the coding styles consistent in a multi-developer environment

Better off with WEBPACK

For now what seems to be future proof and best in town is webpack, we are going to setup our development environment using it.

Webpack is a module loader and bundler which means it will help you load all the different types of modules into your app and bundle them to a fewer output files. If you have been using require.js in past it would make more sense to you. I have come across with many rants like “Why do I need an extra file to load JavaScript in my file?” Sure no one said that you need to do it this way, the reason behind evolution of such tools is that they allow things wire-up in correct way and ensures an ecosystem for community to develop confidently plug-able components ready to use. Of-course webpack does much more than that.

What are different ways your can include your modules to code?

  1. Using script tags (e.g. <script src=”some-file.js”></script> )
  2. CommonJS pattern ( e.g. require(‘some-module-name’); )
  3. AMD (An improvement to CommonJS which works well with browsers)
  4. ES6 Modules (Future proof, but no native support available for all browsers)

These are the major module types to know for now, in case you want to build a library and share it with rest of the world to reuse without polluting the global space of their application, you would probably want to write it in a modular way (a style from one of the above). Now a developer can chose any style out of these.It would be a pain to keep a track of all those styles while including in your code base. On the other hand not all modules would not be required at once in your application, or may be sometimes you need to load them in a particular sequence to work.

Below points will ease the learning curve for webpack:-

  1. Webpack Loaders (Can perform some operations on files or tell how to manage static assets in your project)
  2. Even static assets like images are considered modules too
  3. Webpack might help solve biggest challenges like number of requests and tcp connections per browser
  4. Each loader might have their own configurations e.g. bable has .babelrc file where you define what presets to use with your scripts (Bable allows you to write futuristic JS )
  5. You can use bable to transpile  ES6,JSX or TypeScript etc. for that you need to configure presets in .bablerc for each (this can also be configured within webpack.config.js)
  6. webpack.config.js is the main configuration file for webpack
  7. Three key components are Loader, Plugin & Chunk

Steps to setup workspace for reactjs and webpack with ES6 loaders. I would skip the detailed explanation of webpack.config.js file in this post.

Install webpack globally

npm install webpack -g

npm init

create a package.json file with following configurations

  "name": "webapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --inline --colors --progress"
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.3.6",
    "fixed-data-table": "^0.6.1",
    "jquery": "^3.0.0",
    "lodash": "^4.13.1",
    "react-addons-pure-render-mixin": "^15.1.0",
    "react-bootstrap": "^0.29.5",
    "react-d3-basic": "^1.6.11",
    "react-d3-core": "^1.2.8",
    "react-dom": "^15.1.0",
    "react-sizeme": "^2.1.1",
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "html-webpack-plugin": "^2.21.0",
    "json-loader": "^0.5.4",
    "node-sass": "^3.8.0",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.1.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"

create webpack.config.js with following configurations

var HtmlWebpackPlugin=require('html-webpack-plugin');


        test: /\.(js|jsx)$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel', // 'babel-loader' is also a legal name to reference
            query: {
              presets: ['es2015','react']
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
    new HtmlWebpackPlugin({
      title:'Web App Demo',
      template: 'src/html_templates/index.html'
  devtool: 'source-map'

Create a .bablerc file to load react presets

  "presets": ["es2015", "react"],
  "plugins": ["transform-object-rest-spread"]

Now install all packages

npm install

You are now all set to start writing react code with ES6 standards. Write a test code in ./src/index.js file

import React from 'react';
import ReactDOM from 'react-dom';


<h1>Testing Webpack</h1>


, document.body);

Then execute

npm run dev

Terms to know before learning ReactJS


JSX : Allows you to write html like syntax within JavaScript code to dynamically create a HTML component. JSX is completely optional to work with, although it would be a breeze to write code using JSX as it simplifies the process of creating your html components.


Creating a page  heading with JSX code


'<h3>My Page Title</h3>',



You can write same functionality without using JSX as well and the code will look like this


React.createElement('h3',null,'My Page Title'),



VirtualDom: As the name suggests virtual DOM is something which emulates the real DOM (document object model) . For simplifying things we can assume that we hold all the mappings/copy of the actual HTML dom into a JavaScript object, advantage of doing so is that you have the state of each and every object on screen in a format which is independent of browser implementation and is in a form where you can efficiently read and manipulate it. Just for framing a mental model around it lets say the virtual DOM looks like this.


A Representation only for understanding purposes

This representation is not the actual form of virtual dom rather is it just for your understanding. React might be creating an object like this internally to keep the track of states of each component. Reason behind creating this abstraction layer is that, parsing DOM and manipulating it is slow process. React keeps a track of real DOM with this abstration layer and updates the html DOM based in the most effiecient way as and when needed. Some of the updates can be done in batch for a performace gain, all such things are taken care by react easily.

This is one reason that all the html components in a react application are created using JavaScript code programmatically.

Components : The very first thing about reactjs we would hear would be either “it uses virtual dom” or “it is component based”, now we have an idea about what virtual dom is let’s understand what a component is. In a simplified way a component is a piece of code (a react class) which is used to represent a UI element, this code binds all the attributes and behaviors of this element in to one structure. It is like defining a class for your element and then defining it’s properties and attaching some behaviors to it. Comparing it with angular the corresponding would be directives, but it is not optional in react rather is the only way you create your html elements. Internally it is very different how angular would handle a directive and react would handle a component.

Creating a simple component and rendering it to the screen.

<!DOCTYPE html>
<meta charset="UTF-8" />
<title>First React Component</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src=""></script>

<script src="client.js" type="text/babel"></script>
<div id="UserPic">



//Component in reatcjs is a class
//Variable name must start with a capital letter
var ProfilePicture=React.createClass({
return (<img src={this.props.picture} alt={this.props.username} />)
//Now you can create a html element using above Component
//Variable names must start with small letter
var username='John Doe';
var imagePath='';
var userProfilePic=<ProfilePicture picture={imagePath} username={username} />
//Render the Component to some div in your html page

Git quickies

    1. Accidentally committed changes, how do I undo my last commit?
      git reset HEAD~1
    2. Need to remove a file which I committed erroneously, how do I pull it back from commit to working area without losing my changes?
      git reset HEAD~1 [path/to/your/file]
      git commit -m &quot;Need to commit again so as to have it removed&quot;
    3. How do I create a tag and push?
      Creating a lite weight tag doesn’t ask for a commit message, but if you create heavy weight tag which resides inside DAG and can’t be moved, you will need to provide the commit message.

      git tag TAG_NAME
      git tag -a HEAVY_TAG_NAME -m &quot;Need to provide a commit message&quot;
      git push --tags
    4. How do I change the commit message before I push it to remote?
      git commit --amend
    5. How to add missed changes to the last commit?
         git commit --amend

6. How to exclude files from being pushed without messing everyone’s .gitignore file?

#Add the files to the excludes file, this file is unique for each developer
#.gitignore file should remain same for everyone.
#in case your file was already being tracked then you would need to issue one more command.
git update-index --assume-unchanged <<filename>>

Using JWT with PassportJS in your Express App


Getting things done right gives us motivation and confidence to move on to the next level. What if, implementing authentication in the application itself consumes too much of your time and still looks ugly?

If you have been wondering how to authenticate mobile apps in a more standard way, here is the starting point. My first mobile application used a randomly generated token, which was later saved in local storage and it was then propagated as a URL parameter. Yes, it wasn’t a matured thing to do but it worked.

The idea of token for validating authenticity is obvious. However, the implementation of it is not so simple, at least not for the first timers. PassportJS is one of the most popular authentication modules for node applications. To understand the role of PassportJS you can assume that it is a gatekeeper for your routes. This gatekeeper can allow or deny the requests to your routes based on some specific criteria. PassportJS allows different strategies, now what do you mean by a strategy? Let’s assume that you tell your gatekeeper to only allow people wearing authentic Facebook T-Shirt (FB Login) or people having a valid badge (token) which was issued by an authority you trust. Similarly, there can be other ways to define who gets the access and this is what is called an authentication strategy in case of passport.

In a token-based authentication first, we need to find a way to generate tokens. Here comes the role of node module jsonwebtoken (an authority who issued the badge), it does the job of creating a well formed and signed JWT.

JWT (2)

Next, you need to provide some instructions to your gatekeeper like where to look for the badge (token) and note down the badge number for a verification from a list of valid users etc. (extract information from token). In short this is the role of module passport-jwt.


We will be using “passportjs” ,”passpor-jwt” with “JWT” strategy for authentication. In this article, I will cover only the server-side implementation of it. We can use Postman for our testing and continue to build the frontend later. Remember there might be other node modules as well to do the same work, but the basic principle remains same.

Let’s get our app setup done. You can get the complete application code from GitHub link

npm install express-generator -g

express auth
cd auth
npm install
npm install jsonwebtoken passport passport-jwt bcrypt-nodejs body-parser mongoose --save

npm install bcrypt-nodejs --save
npm install bcrypt --save

SET DEBUG=auth:* &amp; npm start

Enable CORS, as our UI or client will be running on a different server. Add the following lines in your app.js file. Include mongoose module and your config file in your app.js and connect to the database.

var database = require('./config/db').database;
var mongoose = require('mongoose');
app.use(function(req, res, next) {
  res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;);
  res.header(&quot;Access-Control-Allow-Headers&quot;, &quot;Origin, X-Requested-With, Content-Type, Accept&quot;);

Create folders for models, controllers, and config. Inside config folder create a file called db.js which should contain the connection settings for your mongo database. Next, we create a schema for our user data.

Your app structure should look like this.

JWT Implementation

If you are on a windows machine use bcrypt-nodejs for encrypting the password. Otherwise, you can simply use bcrypt module. There are few differences between two, like the number of parameters in the function calls. You may check the details on their specific pages in case you get stuck somewhere or you may choose to ignore it for now as this is just for encrypting the password. I would be using a windows machine for this setup, so I am using bycrypt-nodejs.

Create your user model.

var mongoose = require('mongoose');
var bcrypt = require('bcrypt-nodejs');
var Schema = mongoose.Schema;

var userSchema = new Schema({

  return bcrypt.compareSync(passwd,this.password);
module.exports = mongoose.model('user',userSchema);

Create your user controller

var user = require('../models/userModel.js');
var secret = require('../config/main.js').secret;
var jsonwebtoken = require('jsonwebtoken');

module.exports = {
          message:'Something went wrong, could not find user',
          error: err

        // res.json(user);
        var pwdCheck=user.checkPassword(req.body.password);
          var token =  jsonwebtoken.sign(user,secret,{expiresIn:10000});

Now create a passport strategy

var JwtStrategy =  require('passport-jwt').Strategy,
    ExtractJwt = require('passport-jwt').ExtractJwt;
var User = require('../models/userModel.js');
var secret = require('../config/main.js').secret;

module.exports = function(passport){
  var opts={};
  opts.jwtFromRequest = ExtractJwt.fromHeader('token');
  opts.secretOrKey = secret;
  passport.use(new JwtStrategy(opts, function(jwt_payload, done) { console.log(jwt_payload.sub);
      User.findOne({_id: jwt_payload._doc._id}, function(err, user) {
          if (err) {
              return done(err, false);
          if (user) {
              done(null, user);
          } else {
              done(null, false);
              // or you could create a new account

Create a user


Now login and obtain a token.


Include token in headers and try to access the protected route.

logged in


Intro: What is JWT ?


Traditionally we have been using a cookie-based authentication mechanism to manage sessions.  A token-based authentication mechanism is much more beneficial in cases where your application acts as an identity provider for multiple other applications, as in the case of SSO systems, this approach is also very famous in APIs first designs and Mobile Apps. Here we will be discussing JWT which stands for JSON Web Token. JWT is a standard based token, this means that any application/language can generate a JWT token using these standards. There are special libraries for each of them.  In a token-based approach, a single token is used and sent to the server along with every request.

Understanding the format of JWT?

JWT consists of three parts separated by “.” (dot), as a tip to remember just like IP address has four parts separated by dots.

[ Claims ].[ Payload ].[ Signature ]

This is how a JWT token looks like.


PART 1 - (Publicly Visible)
PART 2 - (Publicly Visible)
PART 3 - (Signed with a secrete key)

You can copy this token and verify its contents here you will see something like this.


The first segment contains the standard claims required for JWT like token type, the algorithm used to sign the signature.

The second segment called as payload can be used to set the custom claims along with some standard information like time issued at and expiration time, these are just key-value pairs and can be anything like the email address, user’s role or location etc. it is up to the application how they want to use it later along with the authentication and what all custom headers they want to set to their tokens.

Yes, the first two parts are publicly visible and not encrypted, they are just encoded using some encoding techniques. The third part which is to ensure the token integrity is signed and can not be viewed until unless you provide the same secret key which you used to generate this token. The signature is generated by signing the hash of claims in the first segment & hash of payload (custom claims) in the second segment of the token with a secret key. Multiple algorithms can be used to create this signature. The information about the algorithm used is also embedded in the first part of the token so that this can be validated on the server side when requests are made.

How to send JWT in my HTTP request?

This can be done primarily in following three ways:-

  1. Send with a form post in a hidden field
  2. Send in as a request parameter in the URL
  3. Third is the most popular way, sending it along with the header information

One thing which should be very clear about it is that token (JWT) is publicly visible anyone can see this, but this doesn’t mean that it is an insecure way of authenticating. Even though the information is publicly visible but it is signed with a secret key. The integrity of the token is validated by the signature, in case anyone tampers this information the signature will not match and it will invalidate the token and request will not be authenticated against it.


Git workflow and difficult questions


When to merge master with my development branch?

It seems like my friend has already committed a validation library to master branch after I branched for my feature, I can get that feature if I can merge my development branch with the master. In this case, branch master is already few commits ahead and your development branch also has few commits.

git checkout development
git merge master

How is rebasing different then merge?

Assume that you have two folders on your local computer “master” & “development”.

MERGE: You take code from the master and merge it to your current branch. It’s like you copied additional new files from ./master folder to your ./development folder along with the commit history.

Tip to remember: copy from master folder to development folder (less risky as you aren’t disturbing master). 

REBASE: It’s the other way round, you take your development branch and write your commits on the master branch, the new commits which came after you branched will also be rewritten in the correct order.

Tip to remember: copy from development to master folder (have to be cautious while using it), never ever rebase your master on to development branch

When should I fork a git repository?

I liked some project on GitHub, but it would have been great if there would have been one more additional feature. I can develop it myself, but I don’t want to push it to the original repository. I am doubtful about it being really helpful to everyone else. This seems to be a right opportunity for anyone to fork and create one more copy of the code and develop an experimental or suggestive feature.

Another situation, I really think if we can build something more powerful on top of this lightweight framework. Using an existing project as the base project for your new project.

Tip to remember: for experimental, suggestive feature or using as the base for your new project.

What does force push do and when can I use it?

In a case if you have rebased your branch and your commit history now looks different than expected remote server will refuse to accept your push, this is the time you tell it to shut up and rewrite as per your new commit history.

It is always good to force push one branch at a time instead of using git push –force unless it’s your test project.

git push origin +master
git push origin +development

Tip to remember: I have sent a mail with not so good or incorrect content, I really wish I could recall the message back and replace with a new one.

Reverse proxy your NodeJS app with Nginx & Apache


First thing which might come in your mind when you hear reverse-proxy your node app would probably be “why do I need to do it?”. Answer to this question is debatable but pretty logical.

Let’s first understand what a Proxy and Revers proxy is.

Most people find it very easy to understand the proxy concept, reason is that you have used proxies and you know how it works and when to use it. What about reverse proxy? Reverse proxy also does the same job but it is implemented on the server side and you might not even be aware of reverse proxy serving your request.

Proxy Working


reverse proxy

reverse proxy

Functionality wise they pretty much do the same thing, act as a middle man. In case of proxy you preserve your identity to the real server, whereas a reverse proxy preserves the identity of the real application server for several reasons one of them is security.

Proxy is on a user front and you are aware of it, reverse proxy is implemented on the server side and you aren’t aware of it.

Reasons why would you want to use a reverse proxy with node applications :-

  • Reverse proxy is one way of adding security to your application
  • Can handle the requests gracefully when your node server has crashed and is restarting
  • Provides capabilities to blend power of node with other languages like PhP
  • You can leverage the features of Apache and Nginx e.g mod_rewrite, virtual hosts etc.

Node server wasn’t developed to replace any existing web servers like Apache and Nginx, which have already captured a fair share on the internet. NodeJS is really good when it comes to handling the number of requests, on the other hand it is prone to crash and restart. It is a common practice to use a reverse proxy in production environment with NodeJS applications.


Configuration for apache2

In apache it is done by creating a virtual host, this is specific to UBUNTU/Linux platforms you can do similarly for windows as well.

Assuming your node app is running on port 9000 and you have a server-down.html file with appropriate message in /var/www directory.

cd /etc/apache2/sites-available
vi myapp.conf

DocumentRoot /var/www/
Options -Indexes 
ErrorDocument 503 /erver-down.html 

ProxyRequests on 
ProxyPass /erver-down.html !
ProxyPass / http://localhost:9000/

#make sure you enable the proxy mods in apache
a2enmod proxy proxy_ajp
a2enmod proxy_balancer
a2enmod proxy_connect
a2enmod proxy_express
a2enmod proxy_fcgi
a2enmod proxy_fdpass
a2enmod proxy_ftp
a2enmod proxy_html
a2enmod proxy_http
a2enmod proxy_scgi
a2enmod proxy_wstunnel

sudo service apache2 restart

Configuration for Nginx

#installing nginx if you don't have
sudo apt-get install nginx
#default path to the web directory
ls /usr/share/nginx/html
#install php5-fpm
sudo apt-get install php5-fpm 
#enable it in php.ini by changing the value of cgi.fix_pathinfo from 1 to 0
sudo nano /etc/php5/fpm/php.ini
#enable php5-fpm to listen from socket
sudo nano /etc/php5/fpm/pool.d/www.conf
#make sure you have the below line in the file as it is 
listen = /var/run/php5-fpm.sock
sudo service php5-fpm restart
sudo nano /etc/nginx/sites-available/default

#add the following location block

#For NodeJS assuming you want to serve your node app at http://localhost/nodeapp
#you can use as well by creating another virtual server

location /nodeapp {
        rewrite ^/nodeapp/?(.*) /$1 break;  
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
#save it and restart nginx
sudo service nginx restart

Basics of GIT


GIT is extremely powerful and has gained popularity more than any other versioning system. It would be an advantage to have some basic understanding of GIT. This article will get you started with your git project in less than 15 minutes.

There are GUIs available to perform all these operations very easily and most of the code editors have git integration which will make it a lot easier.

Here are some basic concepts with which you can start your journey.

Initialize Git repository

To initialize a git repository, you have to run git init in an empty directory.

mkdir mygitrepo
cd mygitrepo
git init

Code life cycle
There are three stages  in the life cycle of your code in a git project.

  1. Working directory – Work here
  2. Staging Area – Changes ready to commit
  3. Git repository – Your local code repository, where everything is saved once you commit changes in staging area

How to check what changes have been staged for a particular file, you can use the git diff <<filename>> command to compare your working copy and staged copy.

Small Exercise

Here is a small example of the process to create a new file adding it to the git repository, then altering the content and comparing working copy with file in staging area using git diff command.

git init
touch mynewfile.txt
vi mynewfile.txt
#Add one line here and save.
git add mynewfile.txt
vi mynewfile.txt
#Add one line here and save.
#Add one second line here 
#and save the file to test 
#use git diff command.
git diff mynewfile.txt

This git diff will show that you have a second line, now to add working copy of our file to the staging area we have to add the file again using git add command. Finally your want to save everything to your repository by committing with a meaningful message so that you can identify later on that what changes you made on this day.

git commit -m &quot;This is my file in git repo.&quot;

Initially, while learning git it might feel that there are so many commands and you might also find uneasy repeating them for each and every file. Once you get used to it and understand concepts you can use the available GUIs as well and you will even love CLI.

To check the current status of your repository, you can use git status & to track the commits you can use git log command.

git status
git log

GIT Glossary

  • BRANCH – Git allows you to maintain multiple copies of your project by creating branches, like maintaining a stable version and a development version of your code. You can later merge the changes into one.
  • HEAD – The commit at the tip of the current working branch, it is generally your latest commit
  • CLONE – A local copy of code hosted somewhere on a central server
  • REMOTE –  Hosted code which should be cloned to work on, by default git names it as origin
  • FETCH – Bring the latest code from the remote

These are the only handful of must know keywords.

git show HEAD

Basic Operations

Creating checking and switching git branches.

#Check the current branch you are on.
git branch

#Create a new branch
git branch nameOfNewBranch

#Switch to a different branch
git checkout nameOfBranchYouWantToSwitchTo

#Merge new branch with master
#You should be on the branch you want to merge into
git checkout master
git merge nameOfNewBranchYouWantToMerge

#Delete the branch you don't need any more
git branch -d nameOfBranchYouWantToDelete

Adding, staging and reverting back files.

#Add files to be tracked
git add file1.php file.js file3.css

#Commit your changes
git commit -m &quot;This is a message for dummies.&quot;

#Revert back file in current working copy
#to the last committed state. 
git checkout HEAD fileName

#Remove a file accidentally added to 
#staging or in case you just don't 
#want to commit a specific file yet. 
git reset HEAD fileName

Reset everything back to a specific commit, use git reset with first seven characters of SHA hash of any commit HEAD where you want to return back to.

git log
commit 733815af3b49532507cebdc34c8d0fef0453e573
#then copy the first seven characters
#of your SHA and reset back to desired HEAD
git reset HEAD 733815a
git show HEAD
#git show HEAD will list
#all the changes you made
#on that HEAD

Git for teams

In the real world scenario where you would want to use git will have multiple users, working on the same code. The main repository is hosted on some central server, it can be internal or on the internet. To start with you will need to clone the repository to your local machine, where a local copy of the code will be maintained.

Cloning can be done via http or via ssh.

#get the copy of hosted code to begin with
git clone mydirName
git clone ssh://somecooldude@hisservervisssh/agitrepo.git mydirName

#show the remote server 
git remote -v

#refresh or sync your code with remote
git fetch

#once you have obtained the latest from remote,
#it would be at origin/master, but not available
#in your local master, so you will have to merge
#it to see the changes
git merge origin/master

#create your own branch and checkout
git branch my-work
git checkout my-work
git add --all
#adding all of my files to staging area
#push only my branch to the origin
git push origin my-work

Git is vast and offers too many features to use, but these are good to start with. There are n number of resources online, there are interactive courses available for free.

Hybrid mobile application development using Ionic


What is ionic framework?

Absolutely awesome framework ecosystem for hybrid mobile application development.

The Evolution

It is quite interesting to witness the evolution in mobile application development. It all started with an idea of using JavaScript to create platform independent apps using and this framework was called phonegap. We started combining it with frameworks like JQuery and then JQuery UI, finally there was a focused version of JQuery for mobile devices known as JQuery Mobile.

Today we have come very far from all this, yet the backbone is phonegap which has been bought by Adobe with an agreement that the free version of it called cordova will exist in parallel.

With the evolution of single page applications and a revolutionary framework like AngularJS, things have started speeding up.

There is something in the air which is making me hiiiiggg!! I smell it is JavaScript… 

Here is something you always wanted and needed for hybrid apps development.

Key highlights

  1. Provides a powerful and easy to use CLI for creating and managing your projects
  2. Provides started templates
  3. Native look and feel, highly focused on performance
  4. Integrated with cordova to provide native functionalities
  5. Infrastructure to send push notifications, sending push was never so easy
  6. A web app to design your app UI  (
  7. They are on their way for a better app delivery system
  8. Create icon and splash screens with single command
  9. And much more

I can’t even think of what more would anyone would want, it is really one of the more sweetest service/framework I have ever come across.

I am pretty sure if the Android’s default browser is fueled up a bit or they make chrome as the default browser for all the devices hybrid apps gonna rule the world. There is only one major reason why native apps still exist and are being developed i.e PERFORMANCE.

Ionic has done a very good job in bridging this gap, but it can’t be perfect unless the browsers start understanding that they have to grow up and browsers motto is no longer just browsing a lame website. It’s a whole new world with JavaScript everywhere.

How will an app built with ionic look like ?

customer appsc1



Using ez-mark JQuery plugin


Ez-mark is a handy JQuery plugin for customizing radio and check-boxes in HTML forms.  There is always a need of quick hack tutorial here it goes.

Quick over-view

Download->Include->Define target elements->Define CSS->Initialize

1- Download it and include the JavaScript & CSS files in your code, JQuery should have already been included

&lt;link rel=&quot;stylesheet&quot; href=&quot;ezmark.css&quot;&gt;
&lt;script src=&quot;jquery.ezmark.js&quot;&gt;&lt;/script&gt;


2-Selecting all radio and check-boxes to use default CSS of ez-mark


3- Done with beautification of check-boxes and radio buttons with default CSS provided in ez-mark package

To apply only to a specific set of inputs initialize using the selectors

Only for check-boxes/radio buttons



Neglect the check-boxes/radio buttons with specific class


How do I attach my own CSS to radio button?

&amp;nbsp; radioCls: 'my-class' ,&amp;nbsp; 
 selectedCls: 'my-class-selected' 

How do I attach my own CSS to check-boxes?

&amp;nbsp; checkboxCls: 'my-class' ,&amp;nbsp; 
 checkedCls: 'my-class-selected' 

We need to use options radioCls & selectedCls for radio buttons and for check-boxes the options are checkboxCls and checkedCls.
You may write the CSS the way you want, may be display an image or background color/gradient.