Monthly Archives: April 2015

What’s the correct way to communicate between controllers in AngularJS?

What’s the correct way to communicate between controllers in AngularJS?

The two best ways to communicate between controllers in Angular JS are:
a) $broadcast
b) $emit

$emit, $broadcast and $on all these methods come under the common “publish/subscribe” design pattern.If an event is fired up the $scope, it is because of $scope.$emit. If an event is fired down the $scope, it is because of $scope.$broadcast. If we want to listen for these events, then we use $scope.$on.

We need not fire events on $rootScope, unless and until we need each and every single scope in the application to be notified about the event, So accordingly, $broadcast method is fired on our own scope only if it required for the children scopes. And if it is required for parent scopes, then $emit is fired on your own scope.

What is “use strict”;? what are the advantages and disadvantages to using it?

What is “use strict”;? what are the advantages and disadvantages to using it?

This statement indicates that the code should be executed in “strict mode”. It is only declared at the beginning of a function/script.Strict mode will help save developers from errors they didn’t even know that existed in their code.

i) It will catch common coding errors, which will throw exceptions.
ii) When vulnerable actions are performed, it throws errors.
iii) It will show,let us know and disable the features that are poorly coded.

i) It will not allow us to use the “with” statement. This statement will causes security and performance problems.

ii) It will not allow us to use the “arguments.caller” property, due to security concernsWe do not have an alternate to this property, but we can hard code an additional parameter.

How do you organize your code? (module pattern, classical inheritance?)

How do you organize your code? (module pattern, classical inheritance?)

Modular pattern imitates the classes in conventional software engineering and it mainly focuses on the public and private access to methods & variables. The module pattern goals are to reduce the use of globally scoped variables, so as to decreasing the chances of conflicting with other code throughout an application.

This is also regarded as the most commonly used design pattern and it is also widely accepted in a number of large projects such as jQuery, Dojo, ExtJS and YUI.

• Organized and clean approach for developers
• We can encapsulate data.
• More clean code in the global namespace(avoiding conflicts).

• We cannot access private methods
• We can extend Private methods and functions.

Classical Inheritance
The classical inheritance in a way is similar to the inheritancein Java or C. Those who have backgrounds in those programming languages must be familiar. So by using classical inheritance, we are recreating the basic programming language’s behavior i.e. using classes and objects, which are instances of those classes.

So a classical pattern is used together with the“prototype”keyword added to the constructor and the newoperator.
1. Call a constructor function.
2. Have a child’s prototype point to the parent’s prototype.

How is responsive design different from adaptive design?

How is responsive design different from adaptive design?

Responsive and Adaptive design are two different designs which are aimed at the optimization of the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, and so on.

The principle of flexibility is the sole basis for Responsive Design. The technique is to have a single fluid design based upon media queries, flexible grids. Responsive images also can be used to create a user experience that flexes and changes based on multiple factors. The main benefit is that each user will experience a consistent design. The onlydisadvantage is that, it has a slower load time.

Adaptive Design can also be termed as progressive enhancement. Instead of one flexible design, adaptive design will detect the device and other features, and then it will provide the appropriate layout based on a predefined set of viewport sizes and other characteristics. The disadvantage is thatit can result in a lack of consistency across platforms and devices, but the load time is faster.

How do you serve a page with content in multiple languages?

How do you serve a page with content in multiple languages?

To serve a page with content in multiple languages, there are four steps:

1.You must have translated/localized pages on the server for each language you intend to support.
2.Your server must recognize the browser’s language request.
3.You must carefully name the files for the localized pages, so the server has a systematic way of locating them.
4.You need a method for serving a generic page when you don’t have the requested language.

The browser writes a value for the Accept-Language request header field that it sends to the web server. You can set this value in Preferences (Mozilla) or Internet Options (Internet Explorer). If you choose multiple languages, they are sent to the server as a comma-delimited list in your preferred order.

Deciding which page to serve is called content negotiation. Tim Berners-Lee’s discussion of generic web pages and their language variants describes two different naming conventions, and The Apache Web Server 2.0 compiles in content negotiation (the mod_negotiation module) by default. It postpends the two-letter language code to the URL and looks for files to serve. For example, if you set your browser preferred language to French and browse to, an Apache server would look for the file

Web servers do not normally handle multi-lingual requests automatically. The web server must have multiple language versions of a web page in order to serve them. It needs to know how the language-variant web pages are named. Besides naming them with a URI (, it may be possible to transmit the language variance as metadata in the HTTP header. This is the direction of the WebDAV protocol being developed by the IETF.

Describe what a “reset” CSS file does and how it’s useful?

Describe what a “reset” CSS file does and how it’s useful?

A set of CSS rules that will reset the styling of all HTML elements, is described as a “reset CSS”file.

In order to have pages with no styles appear more proper, all browsers havetheir own default stylesheet. Most of the browsers by default have links as blue and visited links as purple, they also give tables certain amount of border, also they apply variable font-sizes to h1, h2, h3, h4, h5, h6. and also certain amount of padding to almost all the elements in the page.

The aim of this reset file is ultimately to reduce the browser inconsistencies like default line heights, borders, color,font sizes of headings, paddings and margins.

HTML5 Vibrate APIS for Web and Mobile App Development

HTML5 Vibrate APIS for Web and Mobile App Development

Today all modern web applications are utilizing HTML5 APIs to create interactive websites and powerful gaming apps on mobiles. Up until now, vibration feature have been used only in mobile native apps to send some notifications. We’re going beyond that with vibration for the mobile-web application that can provide you feedback with tactile vibrations. Let’s check out this API in a little detail.

HTML5 Vibrate API, one of the exciting APIs that helps to programmatically access the hardware component of a mobile devices allowing it’s vibration capabilities to work. Imagine you came across a product that you would love to buy it for lesser price. Imagine you could be trying to do some online banking. As a developer, you can create a tactile vinration and let the user know that their session is going to timeout in a minute, and offer the user a quick and easy way to keep their session going without having to log in again.

Use ful Scenarios:

  • When a user tries to submit the form while the required field is left empty or the entered text does not match the requirement.
  • For creating the Notifications, alerts in Video games etc.
  • To engage mobile shoppers by prompting new offers


This api is simply a method in the navigator object. Below is the simple code sample that uses vibrate() method which you can tell the device to vibrate for a given duration.

// Vibrate once for 1 second
Vibration pattern can be customized by passing an array of numbers. In the below example the devices will vibrate for 1000 ms, wait 300 ms and vibrate again for 1000 ms.
// device will vibrate wait vibrate
navigator.vibrate([1000, 300, 1000]);

This alerts the device how long to vibrate pointing out how long the pauses between the vibrations should be. You can even halt the device from vibrating by just passing an integer value 0 or an empty array to the navigator.vibrate() method

Browser support:

Recent versions of Firefox and chrome browser supports this Vibration API property, but it supports other standard browsers by using moz and webkit prefixes respectively.

Vendor prefixes would be handy for compatibility:
// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
if (navigator.vibrate) {
// vibration API supported