How to install Grunt on Mac OSX

Grunt is a JavaScript task runner, a tool used to automatically perform frequently used tasks like minify CSS, SASS compilation and watching JS files for changes and much more. You can install Grunt on Mac OSX using npm (node packaging manager). Following are the most common tasks performed using grunt:   Uglify Javascript code. Concat multiple file. Watch files for changes Code validation with jsHint etc. Copy files from one location to another. Before installing Grunt, update your npm package (This might need sudo based on your system permission ).


If you are using sudo option, you are asked …

Continue Reading

How to change a commit/rewrite history

There are lot of cases when you have to rewrite history. Let’s us suppose, you are developing a feature and you have made 10 commits till the feature completion. but when you are merging that feature to the project, you wanna show only one commit msg for entire feature. In such a cases, we wanna rewrite existing commit history. Git allows us to rewrite history if required. While using git, you might get stuck in one of following situation. Fix the typo in commit you have made. Add some more changes in last commit. Fix the typo in commit you have …

Continue Reading

Javascript : Event binding on Dynamically created element

Whenever we bind events to DOM element, events got attached with all elements which are there in DOM but same events will not get attached to any element which is added dynamically. in order to understand event binding, let’s consider a below DOM structure.

Let’s apply some Styling to above HTML block.

Finally, let’s attach a addEventListener to element with class list-item.

Now if i click on final link, it will translate 30px in Y-axis. You can test the same in Codepen here. Now let’s add a dynamic DIV element with class list item and wrap it inside element with class …

Continue Reading