Solution to Prevent error $digest already in progress when calling $scope.$apply( )?

Solution to Prevent error $digest already in progress when calling $scope.$apply( )?

To check if a $digest is already in progress you have to check $scope.$$phase.$scope.$$phase will return “$digest” or “$apply” if a $digest or $apply is in progress. The difference between these states is that $digest will process the watches of the current scope and it’s children, and $apply will process the watchers of all scopes.

 

AMD vs. CommonJS?

AMD vs. CommonJS?

CommonJS is a project to define a common API and ecosystem for JavaScript. A part of CommonJS is the module specification. Node.js is a server-side JavaScript runtime and implements modules based on the CommonJS Module spec.

AMD (Asynchronous Module Definition) is another specification for modules. RequireJS is probably the most popular implementation of AMD.

One major difference from CommonJS is that AMD specifies that modules are loaded asynchronously – that means that modules are only loaded as they are needed, as opposed to loading all modules up front.

AMD is generally more used in client-side (in-browser) JavaScript development due to this, and CommonJS Modules are generally used server-side. However, you can use either module spec in either environment – for example, RequireJS offers directions for running in Node.js and browserify is a CommonJS Module implementation that can run in the browse.

Have you ever worked with retina graphics? If so, when and what techniques did you use?

Have you ever worked with retina graphics? If so, when and what techniques did you use?

On retina devices the websites are not broken. They just look vague and pixels start appearing as low resolution images. So the only way to correct is to resize the images by following one of the techniques below:

i) Using alternate high resolution pixels

Suppose we have an image of 200px by 400px (CSS pixels) and we want to display it properly in a retina display, we can upload an alternate image of size 400px by 800px in our server and render them whenever the webpage is opened in a retina device.

ii) Using @face-fonts instead of images icon

Image fonts will automatically resize themselves on the high resolution devices just like normal fonts do. Using @face-fonts is an alternate solution to Bitmap icons.

iii) Using SVG images instead of Bitmap images

Bitmap images are images that multiply their pixels in retina displays. But they come with a limitation of getting multiplied infinite number of times. This is where SVG images come into role. They also solve our problem of uploading alternate images of double resolution plus they solve the bandwidth problem too.

iv) Using JavaScript to replace all the images with double sized image

We can use JavaScript to replace all images in a webpage but it will be a difficult task replacing each one of them by writing individual code.

If you have 10 different stylesheets for a given design, how would you integrate them into the site?

If you have 10 different stylesheets for a given design, how would you integrate them into the site?

Every CSS file we use on a website will add time to our page load speed. CSS will not care where it is at or how many files it is in. However in most cases we can have a combination of two or more CSS files together.Developers handle this situation in multiple ways. Few of them simple combine by copy pasting one from another.

The other possible way to combine CSS files using YUI Compresser, that combines CSS and minimizes code and is good for performance. Few handle this by using build tools like GRUNT.

One CSS file that contains all the styles of the separate CSS files combined will work just as well and improve the page speed. Putting all of the CSS into one file substantially reduces the amount of time it takes to load our web pages because we are reducing the amount.

What are downsides of a CSS “reset”? What should be used as a better alternative?

What are downsides of a CSS “reset”? What should be used as a better alternative?

CSS Reset is file (with extension .css) which helps in reducing browser inconsistencies by creating common defaults styles for all browsers.

Downsides of “reset” file:
i) Creates new defaults that you may or may not want (unwanted code).
ii) Many a tiomes, developers end up re-writing the new defaults by styling many of them manually. Sometimes redundant code may creep in.
iii) It adds unnecessary load time.
iv) Developers own styles often gets overwritten,So a precautionary code has to be put in place (more code!)

A better alternative is to use Normalize.css

A Normalize CSS is acustom CSS file that will render all elements that comply with modern standards and are consistent. Other CSS files must not precede the normalize.css

The positive points:-
• Useful defaults are preserved.
• For a big range of elements, it normalizes the CSS
• It will fix bugs and common browser inconsistencies.
• Improves usability.
• Detailed comments explain what the code does.

What is the Difference between Grunt, NPM, Package and Bower?

What is the Difference between Grunt, NPM, Package and Bower?

Grunt: A Java Script task runner which can performrepetitive tasks like compilation, unit testing, minification, linting, etc to make our job easier.

NPM: Apackage manager for JavaScript. It manages dependencies for an application. It also allows users to install Node.js applications / modules that are available on the npm registry.

Package.json is a document you need to know about what application/modules you need to install. The most important things are the name and version fields, without whichthe package won’t install without them.

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.

Do we repopulate or recreate the view in backbone or just get rid of the objects?

Do we repopulate or recreate the view in backbone or just get rid of the objects?

It all depends on the Backbone application an individual is creating. We have to take into consideration of the lifespan of the objects created or involved. Because if the scope of the object is going to be for the entire application, then it is better not to kill the objects, which are going to be used. And it is better to delete the one’s which are of local scope / temporary. Also, repopulating the view in backbone suits well in the case when the data objects are dynamic (like just a data-refresh).

What do we do when elements appears as uncomplied/raw elements before page is rendered (like a blink or flicker) in angular Js (Angularjs – ng-cloak/ng-show elements blink)

What do we do when elements appears as uncomplied/raw elements before page is rendered (like a blink or flicker) in angular Js (Angularjs – ng-cloak/ng-show elements blink)?

To prevent the Angular HTML template from being displayed by the browser in uncompiledform while your application is loading, we use the ngCloak directive.

Adding the “display: none” property to the CSS might not be enough to stop the flickering / blink of the elements.If you are loading angular.js in the body the templates aren’t compiled soon, so to prevent the blink we can use the ng-cloak directive and include the following in your CSS:

[ng\:cloak], [ng-cloak], .ng-cloak {

display: none !important;
}

Difference between: function Person(){}, var person = Person(), and var person = new Person()?

Difference between: function Person(){}, var person = Person(), and var person = new Person()?

There are three different syntax we can use fordeclaring functionsin java script
i) Function Declaration
function Person(){
console.log(“Hello”);
}

A Function Declaration defines a named function variable without requiring variable assignment. Theyare declared as constructs which are standalone and cannot be nested within non-function blocks.

ii) Function expressions:
var Person = function(){
console.log(“Hello”);
};
A function expression looks similar to function declarations, except that the function is assigned to a variable name. The function name can be optional. If the name isn’t given, then we can term it as an anonymous.

iii) Function constructor:
varmyPerson = new Person();
Such a syntax declaration is used when creating an instance of a Class(Constructor). Here, we pass in an unlimited number of arguments in the front and use the keyword “new”.