How to install Grunt

Grunt is basically a build / task manager written on top of NodeJS. Here are some common scenarios you would require grunt:
1) You have a project with SASS/ LESS files which need to be compiled to CSS files on the developers machine during development, For example whenever he saves a SASS file, you want it to be compiled to a CSS file automatically, for inclusion in your page. (grunt-contrib-sass)

2) When you save code on your machine during development, you want the browser to reload your page automatically (might seem like a small thing, but believe me this has saved me lots of time). (Live reload)

3) When a developer saves code on his machine, he wants a comprehensive list of JS errors / general best practice violations to be shown. (grunt-contrib-jshint)

4) You have a project with javascript files requiring minification, and generally generating a front end build seperately (in case you’re using say JAVA for your backend). (grunt-contrib-uglify)

5) You have a team of front end developers who’re working on the UI, and a team of backend developers working on the backend, you want the front end devs to use the backend REST API’s without having to compile & deploy code everytime on their own machines.
In case you were wondering, this isn’t possible with a typical web server setup because XHR isn’t allowed to be cross-domain by browser.
Grunt can setup a proxy for you redirecting XHR requests on your own system within the grunt connect server to another system! (grunt-contrib-proxy, grunt-contrib-connect)

Grunt Setup in local machine
You need to install node package manager inorder to use grunt.
Installation steps for node js
1) Download the Windows installer from the Official Nodes.js web site.
2) Run the installer (the package you downloaded in the previous step.)
3) Follow the prompts in the installer (Accept the license agreement, click the NEXT button and accept the default installation settings).
4) Restart your computer. (Note: You won’t be able to run Node.js® until you restart your computer.)

NodeJS is installed on Windows in the c:\Program Files\nodejs folder, but the npm modules are installed to the D:\Users\\AppData\Roaming\npm. The Windows installer for NodeJS does not add this folder to the PATH environment variable. So when you install new npm modules as global tools they will not be found.

To resolve this, you might need to add the node js path into environment variables. For Eg. My node js installed path is D:\Users\vandhana.jayaprakash\AppData\Roaming\npm. This needs to be added in environment variables like below.

Go to My computer -> Right Click and Properties -> Advanced System settings.
node environemnt
To see if Node is installed properly, open the Windows Command Prompt or a similar command line tool, and type node -v. This should print a version number, so you’ll see something like this v0.10.35.
Test NPM. To see if NPM is installed, type npm -v in Terminal. This should print NPM’s version number so you’ll see something like this 1.4.28

How to implement facebook share in web application

In this post, we will see how to share the website content in facebook.

STEP 1: Get a Facebook App ID for the domain
We should have an facebook account and developer account to get the app id.
To implement Share Button to your website, Facebook requires that your domain have an “App ID” a unique identifier which connects the user with your domain.

Follow this URL to create your app id. Fill the app details as shown in the below screenshot.

image1

Once the App is created is successfully, you will be redirected to dashboard page as shown below. Here you find you newly created APP ID for you Facebook application. Check below screenshot to get you APP ID.

image2

Now you have to give your domain url and app domain name as shown in the screenshot.
image3

Once it is done, make your app as public.
image4

STEP 2: Add the Facebook JavaScript SDK to your Web page.
Here is the code which has to be included in the head section of your HTML Page.

 
<script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR APP ID', 
status: true, 
version: 'v2.7',
xfbml: true});
};
(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script> 

NOTE: Make sure you replace ‘YOUR APP ID’ with your actual App ID for your website.

STEP 3: Add jquery code function to display share dialog box on click event.

 
<script type="text/javascript">
$(document).ready(function(){

$('#shareFb').click(function() {      
            FB.ui({
                  method: 'feed',
                  link: 'http://www.infosolutionsdemo.com/', 
                   picture: 'http://www.infosolutionsdemo.com/sample.jpg',
                  description: 'An example of how facebook share works'
                }, function(response){
                    console.log(response);
                }
            );
        });

});
</script>

This code tells jQuery to attach a Share dialog to the DIV in your code with the ID of “shareFb”.

Get Current location using HTML5 GeoLocation API

HTML5 GeoLocation API
The Geolocation API provides a method to locate the user’s exact (more or less – see below) position. This is useful in a number of ways ranging from providing a user with location specific information to providing route navigation. For privacy reasons, the user is asked for permission to report location information.

DEMO

Browser compatibility

— Firefox 3.5+

— Internet Explorer 9+

— Chrome 9+

— Safari 5+

— Opera 10+

Functions used for location user

getCurrentPosition()

— Used to get current position of the device.

WatchPosition()

— This method will be called automatically each time the position of the device changes.

ClearWatch()

— This  method is used to unregister location/error monitoring handlers previously installed using navigator.geolocation.watchPosition()

Code to get user location using Geolocation API
 
var options = { 
     enableHighAccuracy: true, 
     timeout: 5000, 
     maximumAge: 0 
}; 
var success = function(position) { 
var loc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      marker = new google.maps.Marker({ 
      position: loc, 
      map: _this.map, 
      icon : ACC.config.commonResourcePath + "/images/map-logo.png", 
      title: "You are here" }); 
}; 
var error = function() { 
     output.innerHTML = "Unable to retrieve your location"; 
}; 
navigator.geolocation.getCurrentPosition(success, error, options); 
current_loca
Explanation
By using navigator.geolocation.getCurrentPosition function, we can retrive the user location. For privacy reasons, the user is asked for permission to report location information. This method has three parameters( Success, error, options).
Syntax is as follows

navigator.geolocation.getCurrentPosition(success[, error[, options]])

Parameters

success

A callback function that takes a Position object as input parameter. Using this object we can fetch the latitude and longtitude of the current device.

error (Optional)

An optional callback function that takes a PositionError object input parameter. Using this we can find reason of error.

CODE    REASON

   1         Permission Denied

   2         Position Unavailable

   3         Time Out

options (Optional)

Containing option properties to pass as a parameter for navigator.geolocation.getCurrentPosition() and navigator.geolocation.watchPosition() functions

UI Developer Interview Questions in Verizon

I have attended the initial screening of technical telephonic interview.

Questions asked are as follows.

1)  What is the difference between canvas and svg?

<canvas> is an HTML element which can be used to draw graphics using JavaScript. This can be used to draw graphs, create animations etc.

The <canvas> element is not supported in older browsers, but is supported in recent versions of all major browsers.

The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property.  The declaration is as follows.

<canvas id=”animate” width=”250″ height=”250″></canvas>

SVG stands for Scalable Vector Graphics (SVG) is based on XML markup language, for describing 2D vector graphics.

2) Can you explain the difference between cookies, sessionStorage and localStorage.?

LocalStorage stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data – unlike cookie expiry.

Local storage and session storage are perfect for non sensitive data. The data stored in localStorage and sessionStorage can easily be read or changed from within the client/browser

so should not be relied upon for storage of sensitive or security related data within applications.

Data stored in the SessionStorage is only available for the duration of the browser session (and is deleted when the window is closed) – it does however survive page reloads.

In cookie, we can store 4096 bytes of data. Data stored in the cookie can be hacked by the user, unless the site uses SSL. We can also prevent injections like Cross-Site Scripting (XSS)/Script injection using httponly in the header.

3) Explain about quirks mode?

There are three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode.

Quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition.

However, invalid HTML – with respect to the chosen DOCTYPE – can also cause the browser to switch to quirks mode.

4) What is meant by hardware acceleration?

It means the graphical rendering is done on dedicated hardware (your GPU / graphics card) rather than your CPU. Hardware acceleration generally produces more fluid animation.In general you should always enable hardware acceleration as it will result in better performance of your application.

This will usually be a higher frame rate (the number of images displayed per second), and the higher the frame rate, the smoother the animation.

5) How can you load css resources conditionally?

Using CSS media querises we can load CSS contidionally. If you want to load the stylesheet for the device less than 600px, then you can declare as below.

<link rel=”stylesheet” media=”screen and (min-width: 600px)” href=”small.css”>

This style sheet will only load for screen size less than 600px.

6) Difference between article and section tag in HTML5. How can you nest them in your document?The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

So basically the section element should contain related information bunched under a common heading.

The HTML5 <article> element represents a complete composition in a web page or web application that is independently distributable or reusable, e.g. in syndication.

This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

We can nest article inside a section tag and vice versa. This is completely legal interms of HTML5.

7)  What happen when you dont use doctype?

When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications.

Also HTML5 tags such as < article >,< footer >, < header >, < nav >, < section > may not be supported if the Doctype is not declared.

8) Difference between html5 and html4?

From doctype to sematic tags, many new features has been introduced in html5

Doctype for html4 is as follows : <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

Doctype for html5 is <!DOCTYPE html>

In HTML5, new semantic elements like <header>, <footer>, <article>, <nav> <section> are added.

New form control attributes like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>. Some interesting API’s like Local Storage, Geolocation, Session staorage have been introduced.


9) What are data- attributes good for? 

 The data-* attributes is used to store custom data related to the page or application.

The custom data can be used in JavaScript to complete events or animations.

10) What is the use of doctype in a html document?

The doctype declaration should be the very first thing in an HTML document, before the tag.

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

In html5, the doctype declaration is :

<!DOCTYPE html>

11) How will you create CSS sprites. What is the use of sprites?

We can use photoshop to create sprite images. If you are using Grunt, then you can use <a href=”https://github.com/Ensighten/grunt-spritesmith”>grunt-spritesmith</a&gt; plugin to generte sprite images from the source folder.

12) How will you improve the site performance?

We can check the site performance using Website Speed and Performance Optimization tool.

Using a CDN

The performance of website it depends on the backbone servers and the distance from user’s location.

CDN makes the distribution of data easy. As they serve data via nearest possible servers to the user.

Minify and Unify Javascript and CSS resources

We can minify the javascript the CSS files to reduce the file Size. Also Unification of multiple files to one will reduce the HTTP request.

This inturn will load the website faster.

Optimize Image :

Its better to PNG image format to optimize the page speed.

We can Compress PNG images (while preserving transparency) for better performance.We have few online tools to do so. some of them are pngquant – lossy PNG compressor.

Apart from that we can also check the performance error reports in Google web master tools.

13) Main usage of semantic tags in HTML5?

Sematic tags clearly explain the meaning of the tag. For eg: <header> tag defines the header of the document.

These Semantic tags are helpfull in search engine optimization.

CSS Interview Questions And Answers – important good answers

Sharag's Tech Interview HELP

Which set of definitions, HTML attributes or CSS properties, take precedence?
CSS properties take precedence over HTML attributes. If both are specified, HTML attributes will be displayed in browsers without CSS support but won’t have any effect in browsers with CSS support.

How do I eliminate the blue border around linked images?
in your CSS, you can specify the border property for linked images:

a img { border: none ; }
However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.

Why call the subtended angle a “pixel”, instead of something else (e.g. “subangle”)?
In most cases, a CSS pixel will be equal to a device pixel. But, as you point out, the definition of a CSS pixel will sometimes be different. For example, on a laser printer, one…

View original post 10,438 more words

HCL – Web / UI Developer – interview questions and answer – HTML5 , CSS3 , JS & jQuery

Sharag's Tech Interview HELP

1) Explain about HTML5 local storage ?

There are two ways to store data in HTML as objects locally :

  1. localStorage – store data  across session acess
  2. sessionStorage – storing data for current session only

Data will be stored in key/value pair format.

example:

localStorage.empid=”420″;

sessionStorage.companyname = “SHARAG INFOTECH”;

2)  explain CSS media queries ?

CSS media queries are used to develop responsive templates for different layout of screen, print, mobile , tablet or any other resolutions

CSS media queries can be added in 3 ways as like CSS style sheet :

  1. Internal stylesheet :  <style type=”text/css”>
    @media only screen and (max-width: 600px){
    /* rules apply to the device resolution is 480px or less  */
    }
    </style>
  2. Imported stylesheet :   @import “tablet.css”   (min-width: 800px) and (max-width: 1200px);
  3. External stylesheet:  <link rel=”stylesheet” type=”text/css” href=”deskto.css” media=”screen and (min-width: 1200px), print and (min-resolution: 300dpi)” />

3) explain css inheritance ?

Inheritance…

View original post 1,096 more words

CTS Interview questions for UI Developer position (2-3 years experience)

Dear friends ,
I have recently attended CTS interview on november 8, 2014.
Interview process was quite easy. First round is technical face to face discussion second round is system test
third one is HR. I got selected and waiting for my offer letter

Technical round question:

1) How do you improve the performance of a website.
Performance of the site can be improved in several ways.
i) code unification :
Each CSS file must be loaded before the page can be displayed in an internet browser.
This causes an increase in the time to load the page. This will adversely affect the site performance. So it’s best to unify multiple CSS files into a single CSS file.

ii) compress css and javascript files:
We can compress a CSS file by removing unnecessary spaces, comments, or other
unnecessary indents to reduce the file size. We can also use an online tool to compress large CSS files.
Some examples are
-> CSS Minifier
-> Online version of the YUI Compressor for CSS/Javascript
-> CSS Compressor

iii) Using sprite images instead of multiple images. Sprite image is a collection of images
put together in a single image file. Respective image can be called using css background position property

iv) Always put javascripts at the bottom of the page.

2) What is bootstrap ?
Bootstrap is CSS framework for developing responsive, mobile first projects on the web. Current version of bootstrap is v3.3.6.  Bootstrap also comes with two preprocessors: less and saas.

Bootstrap uses 12 column grid system. Bootstrap’s grid system is responsive, and the columns will re-arrange depending on the screen size

3) What new features has been added in bootstrap 3?
Bootstrap 3 has following new features:
i) New Glyphicons icon font!
ii) Smallest file size.
iii) New grid system.
iv) its uses CSS compressors (Less/Saas)

4) Difference between container and container-fluid in bootstrap?
.container has a max width pixel value, whereas .container-fluid is max-width 100%.
.container-fluid continuously resizes as you change the width of your window/browser by any amount.
.container resizes in chunks at several certain widths, controlled by media queries (technically we can say it’s “fixed width”
because pixels values are specified, but if you stop there, people may get the
impression that it can’t change size – i.e. not responsive.)

5) Tell me latest jquery version ?
Latest version of jquery is : jQuery Core 2.1.1 (IE < 9 is not supported)

6) Difference between html5 tag and normal tag ?

HTML5 tag are called as semantic tags. A semantic element clearly describes its meaning to both the browser and the developer. Using semantic tags you could provide better structure in your document, and provide contextually rich information to robots, page readers, and potentially, search engines. Some of the sematic tags are given below.
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Non-semantic elements tells nothing about its content.

7) List out Some HTML5 tags?
<footer>
<header>
<section>
<main>
<mark>
<nav>
<cite>
<figure>

8) Difference between live and bind function in jquery.
The bind() method attaches one or more event handlers for selected elements, and specifies a function to run when the event occurs.
As of jQuery version 1.7, the on() method is the preferred method for attaching event handlers for selected elements.
The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead.

9) Does Internet Explorer 8 support HTML 5?
In IE versions prior to 9, unknown HTML elements would be parsed as empty elements.
You can use this IEHTML5 shim script to gain a basic level of support for the new semantic elements in HTML5. html5shiv exploits another quirk of IE to work around this bug: calling document.createElement(“tagname”) for each of the new HTML5 elements, which causes IE to parse them correctly.

10) Some new fautures of css3?
i) border-radius
Eg :
div {
border-radius: 25px;
border: 2px solid;
}

ii) box-shadow

 .box_shadow{
background-color: #EEEEEE;
box-shadow:3px 3px 3px 2px #797979;
height: 50px;
width: 100px;

}

iii) Text Shadow
a { text-shadow: #aaa 2px 2px 2px; }

iv) Multiple Backgrounds
Using this property we can use multiple background images. Syntax as follows

.container {
background: url(image/bg1.png) 0 0 no-repeat,
 url(image/bg2.png) 100% 0 no-repeat;
}

We don’t have support for older versions of IE browser. We need to provide a fallback for the browsers which don’t provide support for multiple backgrounds.

.container {
/* fallback */
background: url(image/bg1.png) no-repeat;
 
/* modern browsers */
background: url(image/bg1.png) 0 0 no-repeat,
 url(image/bg2.png) 100% 0 no-repeat;
}

v) Transition
We can add animation to an element using transition. We need to specify these parameters.
transition-property
transition-duration
transition-timing-function
transition-delay

Below code will animate the height of element.

div {
    width: 150px;
    height: 150px;
    background: red;
    /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: height;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: 1s;
    /* Standard syntax */
    transition-property: height;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

div:hover {
    height: 300px;
}

11) what is closest in jquery ? What’s the difference between .closest() and .parents(‘selector’)?
.closest() method begins its search with the element itself before progressing up the DOM tree, and stops when current element matches the selector.
.parents() Begins with the parent element, get the parent of each element in the current set of matched elements

12) What is json?
JSON stands for JavaScript Object Notation. JSON is language independent, lightweight data interchange format. JSON data is written as key value pairs.
Eg :”name”:”Vandana”

13) Explain position property in css?
The CSS positioning properties allow you to position an element. There are four different positioning methods: Static, Fixed, relative, absolute.

14) Difference between $(this) and this in jquery?
Keyword ‘this’ is a native DOM element. $(this) is a jQuery object that allows you to call functions such as .addClass() on it.

15) Will HTML5 canvas supported in IE ?
HTML5 canvas is not supported in IE version less than 9.
ExplorerCanvas(excanvas) a JS library is the option to render HTML5 canvas for IE6, 7, and 8.

16) what is jsonp?
JSONP is nothing but JSON with padding. JSONP is mostly used in RESTFull APIs(Cross domain request). JSONP is a simple trick to overcome XMLHttpRequest same domain policy. (As you know one cannot send AJAX (XMLHttpRequest) request to a different domain.). JSONP request appends the callback function with URL.

Eg: http://www.abcs.com/example.php?callback=simplecallback

Whenever the server receives the callback it will return the data. The data can be accessed using that call back function.
A simple implementation of JSONP request.

<script type="text/javascript">// <![CDATA[
<span class="mceItemHidden" data-mce-bogus="1">
(function() {
var <span class="hiddenSpellError" pre="var " data-mce-bogus="1">flickerAPI</span> = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.<span class="hiddenSpellError" pre="" data-mce-bogus="1">getJSON</span>( <span class="hiddenSpellError" pre="" data-mce-bogus="1">flickerAPI</span>, {
tags: "mount rainier",
<span class="hiddenSpellError" pre="" data-mce-bogus="1">tagmode</span>: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( <span class="hiddenGrammarError" pre="" data-mce-bogus="1">i</span>, item ) {
$( "<img>" ).<span class="hiddenSpellError" pre="" data-mce-bogus="1">attr</span>( "<span class="hiddenSpellError" pre="" data-mce-bogus="1">src</span>", item.media.m ).<span class="hiddenSpellError" pre="" data-mce-bogus="1">appendTo</span>( "#images" );
if ( i === 3 ) {
return false;
}
});
});
})();
</span>
// ]]></script>

17) How do you create a simple plugin in jquery?
Sample plugin creation code is given below:

(function($){
	    $.fn.showLinkLocation = function() {
	        return this.filter('a').each(function(){
	            $(this).append(
	                ' (' + $(this).attr('href') + ')'
	            );
	        });
	    };
	}(jQuery));
	 
	// Usage example:
	$('a').showLinkLocation();

18) List out some CSS Frameworks for creating responsive templates?
Bootstrap
-> Bootstrap is mobile first framework. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Foundation 3
-> Foundation 3 is built with Sass, a powerful CSS preprocessor. “Pricing Tables” is an interesting componenet in foundation 3. Pricing tables are suitable for marketing site for a subscription-based product. It also offers super cool features like Right-to-left text direction support.

Skeleton
Skeleton is a small collection of CSS files that can help to rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

YAML 4
YAML 4 is built on SAAS. You can check the documentation in the above link.

ResponsiveAeon
Responsive Aeon is a simple, fast, Intuitive css framework. It contains almost 120 lines of code and only 1kb minified.

For system test, they have given a sample mockup to work on. The task is we need to create a responsive template as per the mockup screen.
Please have a look at the link for system test. I have uploaded a folder in google drive which is a sample mockup for system test.

DOWNLOAD