How to prevent double curly brace notation from displaying before angular.js compiles document?

How to prevent double curly brace notation from displaying before angular.js compiles document?

The directive “ngCloak” is used to prevent the” {{ }}” notation from being displayed before angular.js compiles the document. This directive will hide the element until page has been rendered.

This directive can be applicable to the entire ‘body’ element or it can also be applicable multiple times for small chunks of code for the entire document. But the latter is the most preferable because it will allow progressive rendering of the browser.

Browsers such as IE 7, will not be able to provide support to the attribute selector, so the workaround for this is to include the directive as a class.

Other browsers -</strong>
<section id=””sample1””>{{Welcome}}</section>
For IE 7 -<section id=””sample1”” class=””ng-cloak””>{{Welcome }}</section>

What’s the difference between feature detection, feature inference, and using the UserAgentstring

What’s the difference between feature detection, feature inference, and using the UserAgentstring

Feature Detection is to verify if a feature works in a particular browser or not. The feature can be either a CSS property or a Java Script Method.

Feature Inference is to assume that a CSS property/ JS method is available in all the browsers, by verifying it in a single browser. The fact is it can or it cannot be available. For ex. the text( ) function is implemented in Chrome , but it is not implemented in Firefox which will give out an error eventually when used. So we have to be careful.

The User Agent is a software which identifies your operating system, browser and its version. When you a visit a particular webpage, the browser sends a user-agent string to the host, implying that only the content/data related to that particular browser should be displayed.

But among all the three techniques, feature detection is considered a good practice.

When to use PreventDefault( ) vs Return false?

When to use PreventDefault( ) vs Return false?

Firstly, in JavaScript’s event model, you will come across a concept called as event bubbling (which makes an event to propagate from child element to a parent element). In order to avoid such kind of bubbling effect, many developers use an event method called “stopPropagation( )”. Alternatively, developers have started to use “return false” statement to stop such propagation.

Now, there is another terminology called “preventDefault( )”. As the name indicates, this method prevents any default behavior of an element to trigger. Best use case is to prevent an anchor tag to open a link.

You may come across a scenario where you would like to prevent the anchor tag from opening a link (default behavior) as well as stop the event from going up to the parent.

In such situation, instead of writing two lines of code, you can get it done in single line i.e; “return false”.

How to Change an input’s HTML5 placeholder color with CSS?

How to Change an input’s HTML5 placeholder color with CSS?

A placeholder in input field looks like this:
By default the color of the placeholder is black (with some opacity).

In order to change the default color of a placeholder in input field, we can use pseudo-elements and pseduo-classes.
Mozilla Firefox
/* Mozilla Firefox 4 to 18 */
[one colon]
:-moz-placeholder {
color: #909;
opacity: 1;
/* Mozilla Firefox 19 & above */
::-moz-placeholder {
color: #909;
Webkit Browsers
::-webkit-input-placeholder {
color: #909;
Internet Explorer
/* IE 10+ */
:-ms-input-placeholder {
color: #909;
Points to Note:
IE 9 & Below and Opera 12 & below do not support any CSS selector for placeholders.
Firefox’s placeholder needs to use opacity: 1 to avoid any default contrasts.
It is highly recommended to use em’s for input elements’ dimensions to avoid any cutoff in placeholder’s text.

What’s the difference between .call and .apply?

What’s the difference between .call and .apply?

Call( ) and Apply( ) in JS is most commonly used to invoke a method or used in constructors & classes for Inheritance purposes.

The first parameter to be passed in these two methods is an Object (current reference/current context). The difference comes in the concluding parameters.

Apply( ) takes Array as it’s next parameter. The array represents the arguments for the target method.

Call( ) takes arguments in comma separated format.

Use apply ( ), if you don’t know the number of arguments you will be passing, or if they are already in an array.
With call ( ), you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

How and Why Unit Testing is Getting Popular?

How and Why Unit Testing is Getting Popular?

Unit Testing has moved from fringe to mainstream, which is great. It’s taken quite a while around the idea that unit testing is a necessity for most of today’s projects. Unit testing is the ultimate in assessing functionality of each unit while the application is being built. This helps prevent future errors by identifying and developing end-to-end test scenarios, ensuring the correctness of functionality as per business requirements.

Testing the final version of product or website can give errors that are difficult to solve.Therefore the best approach is to divide the software in elements
with different units and test them from the smallest to the biggest. Unit test allows developers to make big changes to code quickly. Most unit tests are written using some sort of test framework, a set of library code designed to make writing and running tests easier. But all you need is to choose the right tool that is specific to your platform and script based tools. Most popular JS test tools used by developers include:

qUnit - It is the oldest and it’s seen popular use in jQuery. Lots of support across the board, from Q&A to CI server support. It lacks fluent syntax and configuration
is complex. Makes 3rd party libraries relatively difficult.

Jasmine - It’s built to be easy to set up and use in almost any scenario. It has nice fluent syntax for assertions built-in, and does play pretty well with other assertion libraries. Supported by many CI servers. Asynchronous testing can be a bit of a headache. Expects a specific suffix to all test files (*spec.js by default).

Mocha - Built specifically for testing nodeJs modules. Its API is similar to that of Jasmine’s, with a bit of syntactic sugar added to make it more conductive to a wider range of scenarios, such as BDD. It has its own test runner baked in, so that’s a concern you should never have to worry about.

It also, unlike Jasmine, has really nice support for testing asynchronous methods. Allows use of any assertion library that will throw exceptions on failure. Supported by some CI servers and plugins.


Early detection and resolution of problem: Developers test individual units and resolve the problems without any impact of any other code. Through Unit testing, problems can be detected and resolved in early stage and save valuable time in entire software development life cycle.

Debugging Process: Unit testing makes debugging process very simple as only the latest changes made in the unit needs to be debugged in case of a test failure. Simplified Integration: Unit testing is advised to be used in bottom up testing method as it generally reduces the uncertainty within the unit itself, hence makes the integration easier.

Easy maintenance and changing of code: As independent and smallest units are tested, impacts of changes of other units/codes are less. Once the tests are completed, and bugs are fixed, same units can be reused.

Reusability of Codes: Codes need to be developed in modular form to perform unit testing. Modular codes are easier to reuse both for the same as well as any other projects.

Faster Development: Unit testing allows faster code development to the developer as they can write as well as test the code of their own instead of depending on “Developer’s test”. It helps to fix the bugs early.

Increases Confidence: Unit testing helps to increase developers confidence in terms of changing as well as maintaining code. Good unit tests are capable to catch all the errors that are caused because of the change in codes and help to fix it faster.


Time consuming: It can make the development of any application a long process because testing each unit takes time.

Thorough documentation: It requires thorough documentation. If the developer does not meet the criteria, then unit testing is going to be a waste of time. Many developers and programmers tend to rush and are impatient and this is a common reason why unit testing is never done and many applications never become productive.

Conclusion: Unit testing is a good approach to keep code maintainable, understandable, debuggable, and bug-free. Good unit tests make it possible to improve the production code. One can confidently refactor the system until the code is good. Direct benefits like cost, time and effort contributes most for the reasons behind the gaining popularity of unit test which is the leading trend in current software industry.


FlexBox VS Box Model

Flexbox is entirely new collection of CSS properties that lets developers to generate flexible layouts with just few lines of code.

Flexbox reacts same as its name. Flexbox provides block level arrangement of parent and child elements that are flexible to adapt to display size. This is an exciting concept of developing complex block model which lack flexibility especially on large scaled application with orientation changes, resizing, stretching, shrinking. Indeed, lots of developers found Flexbox model easy to use.

The fundamental concept of flex layout is to provide ability to alter its items width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space or shrinks them to prevent overflow. Flexbox property is supported by all latest versions of modern browsers Google Chrome 29.0 +, IE 11, FF 28.0 +, Safari 6.1 & Opera 12.10.

“Flexbox child elements can be positioned in any specific direction and can have flexible dimensions to adjust to the display area. Positioning child elements is thus much easier, and complex layouts can be achieved more simply with cleaner code.“

Now designers can manipulate the direction, alignment, and spacing of page elements with display:flexbox method. Properties such as Display: flex, flex-direction, justify-content flex-grow, etc allows developers to make consistent height for flex items. There are many spacing choices for flex items within the flexbox, both horizontally and vertically.

Spotlight on Box Model:

CSS Box Model has important components that essentially wrap the content area in the so-called box. Box Model is made up of 4 distinct parts Content, Padding, Border and Margin that interact with each other to form a box and calculates space of a block-level element that it takes up. Below you can see a schematic view of the CSS Box Model.

Few important properties that you will need for the box model are display: box, box-align, box-pack, box-flex, box-ordinal-group, and box-orient. The CSS3 box-sizing property allows you to specify the box model with values content-box | border-box | inherit. You can specify a border/padding value in relation to a fluid length element with the ‘box-sizing’ property that is supported by all major browsers.

This box model is extremely effective when you have two equal columns. If you provide them 50% width each and add some padding and maybe a border, the columns won’t show up side by side. This is an ideal scenario where you can set box-sizing to border-box and happily set the width to 50% for both boxes.

Now let’s have a look at how they differ:


  • It is direction agnostic and is ideally suited for aligning its contents in ways that Web apps and complex Web pages often need. By using flexbox, we can control row widths, column widths and column re-ordering on the screen.
  • Most appropriate for the components of an application and small-scale layouts.
  • Flexbox is not supported in IE and Safari. They are available in newer versions of Firefox(18.0 -moz) and Opera(12.10) and Chrome (21.0 – webkit). For modern browsers you should get a long way using flexbox standard syntax with the “-webkit-” vendor prefix added in.
  • Elements in page behave predictably when accommodating different screen sizes and different display devices.
    Works well for responsive websites when combined with other technologies such as Media Queries.

Box model

    • It works well for pages by giving basic floating positions, it lacks support to application components that have to change orientation, resize, stretch, or  shrink as the user changes, flips from vertical to horizontal, and so forth.
    • It is intended for larger scale layouts.
    • All major browsers support it, except IE7. Currently, Firefox is the only browser that needs a vendor prefix, so make sure to also include the “-moz-” prefixed declaration.

As you can see, Flexbox has great potential to make our lives so much easier if we need to set up a layout for a website. The bottom line is that both flexbox and box model radically change the way we approach layout and build websites. The properties both of these have flip our CSS approach on its head and makes us consider layout from a logical perspective.

Stay on 1.3 or Move to NEW ANGULAR 2.0?

Stay on 1.3 or Move to New Angular 2.0?

AngularJS 1.3 is the best version of Angular as of yet, it introduced a lot of awesome features with substantial performance and speed improvements. But Angular was not the same as it is today. The framework changed in the meantime to keep up with the ever changing web, and developers started picking it up too and more complex applications started being created. It has undergone significant changes from version 1.3 to 2.0 to improve almost every single part of AngularJS. Angular 2.0 was officially announced at the ng-conference. This version is being rewritten from scratch to take advantage of new browser features and integrate lessons learned from Angular up to this point.

Angular 1.3
<div ng-controller=”SantaTodoController”>
<input type=”text” ng-model=”newTodoTitle”>
<button ng-click=”addTodo()”>+</button>
<tab-pane title=”Tobias”>
<div ng-repeat=”todo in todosOf(‘tobias’)”>
<input type=”checkbox”>
<button ng-click=”deleteTodo(todo)”>

Angular 2.0
<input type=”text” [value]=”newTodoTitle”>
<button (click)=”addTodo()”>+</button>
<tab-pane title=”Good kids”>
<div [ng-repeat|todo]=”todosOf(‘good’)”>
<input type=”checkbox”
<button (click)=”deleteTodo(todo)”>
<tab-pane> </tab-container> </div>

Let’s take a closer look at the above example. You no longer see ng-model and ng-click in Angular 2.0, rather it uses square bracket notation. Just like in JavaScript, Angular 2.0 will also use parentheses to invoke methods.

New things in Angular 2.0

a) AtScript

AtScript is a language that is a superset of ES6 and it’s being used to author Angular 2.0. It uses TypeScript’s type syntax to represent optional types which can be used to generate runtime type assertions, rather than compile-time checks. It also extends the language with metadata annotations.

b) Child Injectors

Angular 2.0 has other new things to offer like CHILD INJECTORS. As name suggests child injector will inherit services from parents and moreover it will also have the ability to change them. Woaahh!! Pretty Powerful child!

c) Dynamic Loading

One main issue with angular 1.3 was developers weren’t able to easily add new feature (controller or directive) on the fly. But in Angular 2.0 everything is designed from scratch with asynch.

d) Directives

In Angular 2.0 there are three types of directives:

Component Directive – Creates a custom component composed of a View and a Controller. You can use it as a custom HTML element. Also, the router can map routes to Components.

Decorator Directive – Decorates an existing HTML element with additional behavior. A classic example is ng-show.

Template Directive – Transforms HTML into a reusable template. The directive author can control when and how the template is instantiated and inserted into the DOM.
Examples include ng-if and ng-repeat.

As an Angular developer, Igor Minar made clear in ng-europe conference that ” It’s still early days and design is still evolving and changes can be seen in actual framework and we’re trying to consider all the options. Perhaps will come up with something new and amazing! “. Many developers are excited about the modern approach the Angular team is taking with 2.0, a few seem to be predicting high, and a few more are worried about what they should do.

Moreover, Angular team already announced that they will keep supporting and updating 1.3 for next few years and there will be migration path from Angular 1.3 to 2.0. Some of the people that are using AngularJS right now might say this upgrade that the framework is getting is a good thing, while some might say it’s a bad one. But how can you really judge a product that’s still in development phase? Things can completely change at any point of time, so it’s too early to make an opinion about it. We have to wait and see how things turn out to be in the end and then decide if the transition from AngularJS 1.3 to 2.0 is worth it.

Data Visualization and User Interface

Data Visualization and User Interface

One of the things that has come to prominence in the last few years is data visualization. These days there are many great tools for making excellent infographics. In fact there are new blogs on the topic almost every week. Gone are the days when people used to make simple charts with Paint, today infographics come with 3D text, exotic colors, maps, interactive features and superb artistry. Infographics has made data visualization a lot more fun. Even the most basic excel data can now be made visually exciting.

Tools in Market:

For a beginner who does not have much info on data visualization tools, google chart API offers many static charts that are supported on manybrowsers. These infographics are okay for the beginner who does not mind Google look and does not require individualization or a personal look. For those who want bar charts and line graphs one may want to look at Flot. However, because Flot is a jQuery library, you will need to be familiar with jQuery in order to manipulate the graphics.

There are many other great data visualization tools which can help people create graphs and charts. These include Raphael, D3, and If you want interactive GUI controls, go for Crossfilter, Tangle, Modest Maps, Leaflet, Polymaps, Openlayers, CartoDB and Nodebox.For those who are already competent programmers and want something even more elegant than EXCEL for data visualization, go with R, Weka and Gephi.

These are just some of the newer data visualization tools available that require a different set of skills. The biggest mistake most people make when preparing data for visualization is choosing the wrong tool. Excel isn’t graphically flexible, but it is a good way to explore data. It is limited to default set of colours, lines and styles make it difficult to create graphics. One needs to learn the right skills to create superb data visualization. More important than learning how to draw, one must become versatile with the functional tools in each program so that they can maximize its use. For those who love interactive data visualization, use CSS, HTML and JavaScript/jQuery to create the interactivity. No matter what you select to make your data impressive, good visualization requires a lot of practice.

Cyberspace is a jungle and it is easy to get lost on how to improve data visualization. There are far too many tools and little guidance as to what to use and what not to use. Fly by night graphics companies charge exorbitant sums of money and most people are left with introductory seminars and programs and no one to turn to when the companies disappear.

Data Visualization under UI Radar:

The field of data visualization is expanding rapidly and for those who are interested in using a tool to amplify their data, it is important to know that there is no tool that will make you a PRO overnight. You must have a sense of creativity and analytical skill and if you have that, you can be a success with any tool. Too many people try to make enhanced visualizations but they lack knowledge of which graph to use. Buying the most expensive program for making data visualization does not make you great- if you have no creativity, then nothing will make your data appealing.

How to go about it?

If you know how to code, then its increases your potential to make data visualization to another level. Writing codes allows you to become versatile and add more complexities. You will be on another planet if you are a programmer. But do not get me wrong; not being a programmer does not mean that you cannot enhance data visualization. There are many graphics programs that are easy to learn even if you do not know the first thing about coding.

There are so many tools, take some time and learn what some of them can do and cannot do. Know what you want and then select the best tool. Use a tool that you feel comfortable with.

Once you become familiar with the tool, you can deal with all the complexities. If you learn how to use a tool to make data appealing, then you can get better insights.

Do not go to YouTube and use a tool that everyone is using. Use a tool that fits your need and see what it can do for you. You have to love the tool you use. If you do not like a tool, there is little chance of you becoming creative and your data visualization will WORSEN.

How to choose a correct tool?

Choosing the right data visualization tools will require the exercise of a sound judgment on whether it can address your data analytics needs. More advanced tools like Tableau, Qlikview, Custom View and myriad others have allowed users to create very interactive and imaginative ways to visually represent information. They all have promising features but you should be able to look for a tool that can provide you features like animation, personalization, dynamic data management, and multi-dimensional visualization that can adapt to the changing course of data influx to your business. These essential features from a data visualization tool can help you plot your data for better clarity and efficient data analysis.

Top benefits of data visualization with rich UI are.

  • Improved decision making
  • Better data analysis
  • Improved collaboration/Information saving
  • Provide self service capabilities to end users
  • Increased ROI
  • Time savings
  • Reduced burden on IT