How to write custom logging function in JavaScript

In this article we will be discussing, how to write custom logging function in JavaScript. Javascript provide various logging function by default like:

Why Custom Logging: But there are various instances when you would like to have custom logging function. Some of these instances might be like : Logging messages based on components basis(Each logging message have component name prefixed). Enable/disable logging with a flag, e.g., isDebug = true i.e You might want to have logs while development while no logs for production environment. Short logging syntax i.e logs(“Hello world”);   Above are just some common example in case …

Continue Reading

How to add comments in JSX

In this article i will be discussing what is JSX, JSX in React and how to add comments in JSX template. What is JSX: JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse. Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then …

Continue Reading

How to calculate the executing time of Javascript code

Are you looking out for the way using which you can get the executing time of Javascript code? Around the javaScript community i have seen people using various methods to achieve the same. Today i will discus various of them and also discuss which one is the better one and why.   Use Cases: There are a few situations where you’d use this high resolution timer instead of grabbing a basic timestamp: Benchmarking game or animation runloop code Calculating frame rate with precision Cueing actions or audio to occur at specific points in an animation or other time-based sequence Let’s …

Continue Reading

center text in SVG shapes

Whenever you place text inside any SVG shape (rectangle, ellipse, circle etc), you would like to center text in SVG shape. In HTML placing a text relative to parent can be easily done using “text-align: center” property, similarly you can place text center of SVG shape with help of “text-anchor: middle”.  For SVG, it is not that straight forward but i will explain below, how you can achieve it. Let’s first of all create an svg tag as follow:

Now lets add a <g> tag inside svg to group multiple tag inside.

Now let’s add a circle and text tag inside <g> tag. …

Continue Reading

New ES6 Features

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. Implementation of these features in major JavaScript engines is underway now. See the ES6 standard for full specification of the ECMAScript 6 language.   ES6 includes the following new features: Arrow Function Classes Destructuring Constant and let Arrow Function: Arrow functions are a new ES6 syntax for writing JavaScript Functions. They will save developers time and simplify function scope. ES6 fat arrow functions have a shorter syntax compared to function expressions and lexically bind to this value. Arrow Function Syntax:

JavaScript function can be written in two ways …

Continue Reading

Adding large number in JavaScript

Today i had an Interview with one of the company and interviewer guy (Ritesh) asked me very simple problem that “How will you add two numbers if numbers are very large/Add large number in JavaScript?”. Frankly saying, i never gave a thought about this problem ever. My interviewer didn’t got got impressed but still i thought of solving it. So below id the function that i have coded for it. Problem: Javascript support at most 53 bit of integer only. If number goes beyond it, Javascript loose precision.  Small number can be added simply as follow:

But if you try …

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