How to use node-inspector with Grunt tasks?

How to use node-inspector with Grunt tasks?

Node Inspector is a debugger interface for Node.js applications that uses the Developer tools formerly WebKit Web Inspector. We can use node-inspector to debug grunt task. Node-inspector has the command node-debug, which launches node in a debug state and opens the browser to the node-inspector page, stopping when it hits the first debugger line or set breakpoint.

 

Strict vs. quirks modes – How to trigger each and why this matters?

Strict vs. quirks modes – How to trigger each and why this matters?

Quirks mode and strict mode are the two ’modes’ modern browsers can use to interpret your CSS.

Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older versions.

In HTML5, the only purpose of the DOCTYPE is to activate full standards mode. Older versions of the HTML standard gave additional meaning to the DOCTYPE, but no browser has ever used the DOCTYPE for anything other than switching between quirks mode and standards mode.

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