Basics of Webpack – module bundler

Webpack is a module bundler. It takes you code transforms and bundles it, then returns a new compiled version. If you want to write ES6 Javascript code or React then I think Webpack is the better option.

what-is-webpack

webpack – Module Bundler

Continue reading

Advertisements

AngularJS: Injecting service into a HTTP interceptor (Circular dependency)

Recently, I’m getting circular dependency error while I’m injecting my service to HTTP interceptor. Code works well if I’m remove my service dependency from HTTP interceptor.

Find my interceptor code below where I’m injecting my ‘waitingDialog‘ service which have ‘$uibModal’ (angular ui-modal) dependency. Continue reading

Common Developer Mistakes in AngularJS

Hi All,

After long time, finally got a time for blog. I found such a nice post on Toptal.com by Michal Mikolajczyk. He list out top 18 most common developer mistakes in AngularJS. Couple of mistakes that I found that I’m already did such as overusing of resolve, not using named views, not fully utilizing controllerAs syntax etc. Thanks Michal 🙂

Find out complete list here and list out your mistakes. Hope it will helps you as well !!!!

How to use Media Query in Javascript?

To make webpage responsive we use lots of media queries. Actually, Media Queries are a CSS feature that allows us to apply different screen width rules to our CSS. In many adaptive application we need to write JavaScript code which supports many devices. But these Media Queries in CSS what about in JavaScript? Can I use it in JavaScript? If yes, then how can I use Media Query in JavaScript?.

Well, now it is possible to use media query in JavaScript with the help of the window.matchMedia function. It is well supported and if you don’t need to support IE8 or lower you may use it without worry. Browser Support for window.matchMedia() is also pretty good.

Example

var mql = window.matchMedia("screen and (min-width: 800px)")
if (mql.matches){ // if media query matches
 alert("Window is 800px or wider")
}
else{
 // do something else
}

Continue reading

Some Javascript Tips and Tricks

Hi all,

Please find some Javascript tricks and tips :

Get the max or the min in an array of numbers

I think it’s an efficient way to find out minimum and maximum value from numeric array

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

Strange Floating point problems

0.1 + 0.2 === 0.3 // is false 
0.1 + 0.2 == 0.3 // is also false

I’m not aware about this strange floating point issue, even though I’m using javascript since last 5-6 years.
But why does this happen? 0.1 +0.2 is equal to 0.30000000000000004. What you need to know is that all JavaScript numbers are floating points represented internally in 64 bit binary according to the IEEE 754 standard. For more explanation, take a look to this blog post.

Different ways to Check the properties of an object

In JavaScript, we can check weather a property is present on an object, in different ways.

if ('undefined' !== typeof obj['prop']) { /* do something */ }

if ('prop' in obj) { /* do something */ }

if (obj.hasOwnProperty('prop')) { /* do something */ }

From among all ways, I think most efficient way is 1st one. Please find speed test here. This page will answer the burning question, “Which is faster?”

Avoid Negative arguments for splice Array Function

In below code, my from variable have value ‘-1’ and I’m passing it to splice function which is still return me [5]. So, make sure that the arguments passed to splice are not negative.

var numbersArray = [1,2,3,4,5]; 
var from = numbersArray.indexOf("foo") ;  // from is equal to -1 
numbersArray.splice(from,2);    // will return [5]