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 ).

or

If you are using sudo option, you are asked …

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

Angular 2 communication using Services

In this article we will discuss about communication using Services in Angular 2. This is very useful when you have more than one components which need to access and manipulate single source of data. This method is usually used in the following scenario:   Service making API hit to server and share data across all the component inside the web app. Service that pull and push data across multiple component because of it’s singleton property (Single source of truth).   Above are just the very common use cases of this methods. There are other lot of situations where you will be …

Continue Reading

Looping an Array In JSX – React JS

When you already have working experience on any of the tempting engines or framework which provide looping DOM functionality, you want it to be everywhere. As you already know, we have ng-repeat in Angular 1, *ngFor in Angular 2 etc, Likewise in React js which use JSX for templating, you can use the following method to Looping In JSX Array element.

  Output: Sahil Jake Jon Thruster Note: Looping In JSX might give you following error: Error : Each child in an array or iterator should have a unique “key” prop. You can clear above error by providing a unique …

Continue Reading

Horizontally Center content

There are various methods to center align text as well any HTML content. Center aligning the text is pretty simple and can be done using just text-align:center property as following.

But what if when you have to center align any HTML element with any content inside it. In that case you can use any of the following method: 1. Horizontally Center content using margin : 0 auto You can use margin : 0 auto to any parent element and than your content inside it will be horizontally center align relative to it. Consider the below HTML structure for horizontally center align …

Continue Reading

Absolute Horizontal And Vertical Centering In CSS

There are many situation in CSS coding, when you wants to keep your content/text right at center both horizontally as well as vertically relative to it’s parent container element. In order to do Absolute Horizontal And Vertical Centering In CSS, we used to had various options as follow: Using absolute position & transition together. Let us first quickly dive right into above methods one by one and than we will discuss the new and better method to do it. Using absolute position & transition together: Let’s consider the following HTML structure.

I have two set of HTML structure in it. First having only …

Continue Reading

Vertical Center content

We all know very well that placing the Vertical Center content was always a pain. Previously, we used to achieve this by following 2 techniques but now we can also achieve the same using display: flex.   First Method (Using Display : inline-block) Second method (Using Display : table) Third Method (Using Display : Flex)   Let’s consider the simple HTML structure:

First Method (Using Display : inline-block) In first method, you can achieve the same using Display : inline-block as following :

Demo Fiddle : See the Pen vertical center content using Inline-block by Techhysahil (@techhysahil) on CodePen. Second …

Continue Reading

Error: Multiple instances of services

When you are working in Angular 2, you might got stuck in a situation where Angular 2 is creating multiple instances of your service. In Angular 2, Service are singleton object which can be used to fetch and push data from multiple components. First of all, try to understand that you only need to add your service once either in @NgModule or AppComponent(Top level component).

If you define your service in both of NgModule & AppComponent provider array than in that case 2 instances of that service will get created. Also Read: execute function inside template – Angular …

Continue Reading

execute function inside template – Angular 2

In Angular 2, You might wanna execute function inside template, that’s what i am gonna help you guy’s quickly. In Angular 2, Simple template interpolation can be done as follow:

Now what if you simply wanna print “NA” if no value corresponding to above interpolation exist. In that case you can either write a function which take above value and return required result as follow:

Now, you can change above template simply as follow:

In above template, i have applied evalDataFields() inside interpolation.  That’s it for this short Q&A… Happy coding…:)    

Continue Reading

How to take wordpress backup and schedule backup

WordPress is one of the most popular CMS for creating blogs and websites. A large number of blogs are published and updated using wordpress CMS. When you have blog, you also would like to think about it’s security. You never want to loose out of the data for your blog irrespective of any reason weather it is crashing of Server, Hacking or by mistake. So you might want to backup your database, template and plugin for your website. So in this article i will tell you about “How to take wordpress backup and schedule backup”.   So let’s get started without …

Continue Reading