Showing posts with label Frontend Interview Questions and Answers. Show all posts
Showing posts with label Frontend Interview Questions and Answers. Show all posts

Tuesday, 3 October 2017

How to create built in web server in PHP?

How to create built in web server in PHP

Question: In which PHP Version Built-in web server come?
PHP 5.4


Question: Can we run php without apache?
Yes, We can run the php independent.


Question: Can we test our application with Built-in web server feature?
Yes, We can.


Question: Can we test our application with Built-in web server feature?
Yes, We can use this feature to test our module.


Question: Can we go LIVE with Built-in web server ?
Not, Its recommended We should not go LIVE with this Built-In Web Server.


Question: How to check If built-in Web server is available in your PHP Build?
Way 1
print the phpinfo() in php. and Search for Built-in HTTP server , If found means It is available.

Way 2
in php command line, execute following command

php -h

Search -S (Run with built-in Web server), If found means It is available.


Question: How to run PHP Script with built-in Web Server?
Go to file Location and execute following command from command line.
php -S 0.0.0.0:8080 myfile.php



Question: What is use of -S?
It is used to specify the Ip Address with port with which bind.


Question: What is use of -t?

It is used to specify the target folder.


Question: How to detect the request by built-in Web Server?
if(php_sapi_name()=='cli-server'){
    echo "this is request by built-in Web Server";
}



Question: Give full working example of built-in Web Server?
  1. Create a file hello.php
  2. Login to command line
  3. Go to that particular folder in command line
  4. Execute following command.
    php -S 0.0.0.0:8080 hello.php
    



Friday, 15 September 2017

Web sockets online Tutorial - Page2

Web sockets online Tutorial - Page2

Question: Difference between socket and websocket?
WebSockets run from browsers and connecting to Server over a similar to HTTP. it require a permanent connection to its server.
Sockets are more powerful and generic and not restricted to http protocol OR browser.



Question: How to detect the message type in onmessage event?
  
socket.onmessage = function(event){
   if(typeOf event.data === String ) {
      console.log("Received data string");
   }
}



Question: How does Web Socket support Single TCP Connection?
In Web a new TCP connection is initiated for a each HTTP request and terminated after the response is received which means A new TCP connection need for each HTTP request. Whereas In WebSocket, the HTTP connection is upgraded and client and server communicate over that same TCP connection.


Question: How Web Socket support on Bi-directional?
In Web client(like browser) only can send the request to server then server send the response to the same client only.
Whereas In WebSocket, there is no pattern like request/response and Both (Client/Server) can send message to other party.


Question: How Web Socket support on Full Duplex?
In Web client(like browser) only can send the request to server then server send the response to the same client only. At a given time, either client is talking to server or server is talking to client. Whereas In WebSocket they can talk each other.


Question: What is the WebSocket API?
The WebSocket API is the asynchronous communication from client to server and it takes place over single TCP socket using the ws (unsecure) or wss (secure) protocol and can be used by any client or server application.


Question: How can we secure WebSocket API?
Normal Web Socket API start with ws but secure API start with wss.

Question: What is Ajax Long-Polling?
  1. A client requests a webpage using HTTP.
  2. The server does not immediately respond with the requested information but waits until there's new information available.
  3. When there's new information available, the server responds with the new information.
  4. The client receives the new information and immediately sends another request to the server, re-starting the process.



Question: What is Comet in HTML5?
Comet is a collection of techniques prior to HTML5 which use streaming and long-polling to achieve real time applications.


Question: What is Server Sent Events?
Server Sent Events (SSE) connections can only push data to the browser.
online stock quotes, or twitters updating timeline or feed are good examples of an application that could benefit from SSE.


Question: How to add http headers in Websockets client API?
We can not add custom header in Web sockets.


Question: How can we pass auth while calling Connecting WebSocket?
 var ws = new WebSocket("ws://username:password@example.com/path");



Question: Is PHP support for Web Sockets available?
Yes, for this you need install the library.
Apache Module: https://github.com/disconnect/apache-websocket
PHP WebSocket: http://code.google.com/p/phpwebsocket/
Ratchet: https://github.com/cboden/Ratchet
Wrench: https://github.com/varspool/Wrench


Wednesday, 13 September 2017

Web sockets online Tutorial

Web sockets online Tutorial

Question: What is WEBRTC?
WebRTC is an API that support browser-to-browser applications for voice calling, video calling, and P2P file sharing.


Question: What is Web Socket?
WebSocket is a protocol, providing full-duplex communication channels over a single TCP connection.


Question: How does WebSocket work?
WebSockets provide a persistent connection between a client and server that both parties can use to start sending data at any time.
The client establishes a WebSocket connection through a process known as WebSocket handshake.


Question: Why should I use WebSockets?
Because the server can actively push information to the client any time.
And the client can push information to the server without HTTP requests.
WebSocket is designed for low protocol and wire-level overhead - chunky HTTP headers.


Question: What is difference between WebRTC vs Websockets?
WebRTC is designed for high-performance, high quality communication of video, audio and arbitrary data (Browser to Browser).
WebSocket is designed for bi-directional communication between client and server (Browser to Server and vice versa).


Question: Importance of Websockets?
  1. Web Socket is an independent TCP-based protocol but support other protocol.
  2. Web Socket is a transport layer on top.
  3. Define sub-protocols for example XMPP, STOMP, and AMQP.
  4. Used JavaScript that can interpret the Web Socket handshake, establish and maintain a Web Socket connection.



Question: How websocket established the connection ?
  1. The client establishes a connection through Web Socket handshake.
  2. Client sending a HTTP request to the server.
  3. Header is also sent from which server can get the details



Question: Give example of Web Socket connection?
//Declare variables
var output;
var wsUri = "ws://echo.websocket.org/";

//Defination of init function
function init() {
    output = document.getElementById("output");
    testWebSocket();
}
function testWebSocket() {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) {
        onOpen(evt)
    };
}

function onOpen(evt) {
    output.innerHTML = 'Connected';
}

//Call on load
window.addEventListener("load", init, false);

ws://echo.websocket.org/ Here ws is used for Web socket.
It is public URL you can use it for testing.
After testing, you need to create your own because you can't use it in your production OR development server.


Question: How to send error message in Web Socket?
  
    var wsUri = "ws://echo.websocket.org/";
    var output;

    /* Init the WebSocket */          
    function init() {
       output = document.getElementById("output");
       startWebSocket();
    }

    /* Declare the Socket Function */          
    function startWebSocket() {
       websocket = new WebSocket(wsUri);

       websocket.onopen = function(evt) {
          onOpen(evt)
       };

       websocket.onclose = function(evt) {
          onClose(evt)
       };

       websocket.onerror = function(evt) {
          onError(evt)
       };
    }

    /* Function Defination */                  
    function onOpen(evt) {
       writeToScreen("Web Socket Connected");
       doSend("This is custom message");
    }

    function onClose(evt) {
       writeToScreen("Web Socket Dis Connected");
    }

    function onError(evt) {
       writeToScreen('Error :' + evt.data);
    } 

    function doSend(message) {
       websocket.send(message);
       writeToScreen("Sent Data: " + message); 

    }

    function writeToScreen(message) {
       var pre = document.createElement("div");          
       pre.innerHTML = message; output.appendChild(pre);
    }

    window.addEventListener("load", init, false);



Wednesday, 5 July 2017

Emoji / Emotions icons integration in CHAT

emoji/emotions icons integration in existing chat

Hello Users,
Here, I will give an example to integrate the emoji/emotions icons in your Chat . Its done for node based chat, but still you can use for Ajax based chat.
 Its quite simple, you just need to replace the emotions code to images.
 For Example
:) - Happy
:( - Sad

Whenever new message appear, then you need to replace the smiley code to images OR previous message need to replace the smiley code to corresponding image.

Follow the Below Simple steps to Integrate in CHAT.


  1. Step1: Download imoji icons from following links:
    https://drive.google.com/open?id=0BxKVas2R9pKlYmo2eHEtbjMtRk0

    place all image in \public\images\emoticons
  2. Setup the static images path in express JS project.
        var express = require('express');
        var app = express();
        var http = require('http').Server(app);
    
        //set the public path
        app.use(express.static('public'));
        
  3. In Client side, display the empotions
    JavaScript functions to convert the code to smiles
    
        function replaceTextwithAllowedEmojis(text){        
                var returnText = text;
                //Emotions
                var emoticonCodes = [':)',':(',';)',':P',':D',':|',':O',':?','8)','8o','B)',':-)',':-(',':-*','O:-D','>:-D',':o)',':idea:',':important:',':help:',':error:',':warning:',':favorite:'];
                
                //Emoji iconds
                var emoticonFiles = ['smile.png','sad.png','wink.png','razz.png','grin.png','plain.png','surprise.png','confused.png','glasses.png','eek.png','cool.png','smile-big.png','crying.png','kiss.png','angel.png','devilish.png','monkey.png','idea.png','important.png','help.png','error.png','warning.png','favorite.png'];
    
                var emojiHtmlStrPrefix = '<img class="emoticon" src="/images/emoticons/&#39;;
                var emojiHtmlStrPostfix = &#39;" />';
                
               
                for(var i=0; i<emoticoncodes .length="" emoticoncodes="" i="" if="" returntext.indexof=""> -1)){
                        // replace text with its icon file
                        var imgHtmlStr =  emojiHtmlStrPrefix+emoticonFiles[i]+emojiHtmlStrPostfix;
                        returnText = returnText.replace(emoticonCodes[i],imgHtmlStr);
                    }
                }
                return returnText;
        }
    </emoticoncodes>
  4. Display the above functions.
    
                socket.on('chat_message', function(dataObj) {                
                    $('#messages').append($('
    [li]').html(replaceTextwithAllowedEmojis(dataObj.text)));
                });
    



Monday, 29 May 2017

Angularjs 2 Interview Questions and Answers

Angularjs 2 Interview Questions and Answers


Question: Why AngualrJS2 over AngualrJS1?
  1. Angular 2 is simpler and faster than Angular 1.
  2. You can update the large data sets with minimal memory overhead.
  3. It will speed up the initial load through server side rendering.



Question: What are the feature of AngualrJS2?
  1. Angular 2 is faster than Angular 1
  2. Angular 2 is easier than Angular 1
  3. It supports old browsers also including IE9+ and Android 4.1+.
  4. It is a cross platform framework.
  5. Angular 2 is mainly focused on mobile apps.
  6. Code structure is very simplified than the previous.



Question: How to install AngualrJS2 in NodeJS?
  1. Create an folder and go inside that folder using command line.
  2. Create en empty file package.json and add following contents.
    {
      "name": "angular2-demo",
      "version": "1.0.0",
      "scripts": {
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "typings": "typings",
        "postinstall": "typings install"
      },
      "license": "ISC",
      "dependencies": {
        "angular2": "2.0.0-beta.7",
        "systemjs": "0.19.22",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.2",
        "zone.js": "0.5.15"
      },
      "devDependencies": {
        "concurrently": "^2.0.0",
        "lite-server": "^2.1.0",
        "typescript": "^1.7.5",
        "typings":"^0.6.8"
      }
    }
  3. Create an empty file tsconfig.json and add following contents.
    {
      "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
      },
      "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
      ]
    }
  4. Create an empty file typings.json and add following contents.
    {
      "globalDependencies": {
        "core-js": "registry:dt/core-js",
        "jasmine": "registry:dt/jasmine",
        "node": "registry:dt/node"
      }
    }
  5. Execute following command from command line.
    npm install

Tuesday, 25 April 2017

React JS Interview Questions and Answers

React JS Interview Questions and Answers

Question: What is ReactJS?
React is front end library developed by Facebook.


Question: Why ReactJS is used?
React is used to handle the view part of Mobile application and Web application.


Question: Does ReactJS use HTML?
No, It uses JSX which is simiar to HTM.


Question: When ReactJS released?
March 2013


Question: What is current stable version of ReactJS?
Version: 16.2.0
Release on: November 28, 2017


Question: What is Repository URL of ReactJS?
https://github.com/facebook/react



Question: What are the life Cycle of ReactJS?
  1. Initialization
  2. State/Property Updates
  3. Destruction



Question: What are the feature of ReactJS?
  1. JSX: JSX is JavaScript syntax extension.
  2. Components : React is all about components.
  3. One direction flow: React implements one way data flow which makes it easy to reason about your app



Question: What are the Advantages of ReactJS?
  1. React uses virtual DOM which is JavaScript object. This will improve apps performance
  2. It can be used on client and server side
  3. Component and Data patterns improve readability.
  4. Can be used with other framework also.



Question: How to embed two components in One component?
import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}

export default App;

Monday, 17 April 2017

Bootstrap Datatable Example - Export into CSV


Bootstrap Datatable Example - Export into CSV
Bootstrap DataTables integration provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled consistently by Bootstrap. It also provide sorting and searching. It enable to download the data as csv.


HTML Part
<table cellspacing="0" class="display nowrap" id="example" style="width: 100%px;">
            <thead>
<tr>
                    <th>Employee Name</th>
                    <th>Designation</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Date</th>
                    <th>Salary</th>
                </tr>
</thead>
            
            <tbody>
<tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>320,800</td>
                </tr>
<tr>
                    <td>Fiona Green</td>
                    <td>Chief Operating Officer (COO)</td>
                    <td>San Francisco</td>
                    <td>48</td>
                    <td>2010/03/11</td>
                    <td>850,000</td>
                </tr>
<tr>
                    <td>Shou Itou</td>
                    <td>Regional Marketing</td>
                    <td>Tokyo</td>
                    <td>20</td>
                    <td>2011/08/14</td>
                    <td>163,000</td>
                </tr>
<tr>
                    <td>Michelle House</td>
                    <td>Integration Specialist</td>
                    <td>Sidney</td>
                    <td>37</td>
                    <td>2011/06/02</td>
                    <td>95,400</td>
                </tr>
<tr>
                    <td>Serge Baldwin</td>
                    <td>Data Coordinator</td>
                    <td>Singapore</td>
                    <td>64</td>
                    <td>2017/04/09</td>
                    <td>138,575</td>
                </tr>
<tr>
                    <td>Zenaida Frank</td>
                    <td>Software Engineer</td>
                    <td>New York</td>
                    <td>63</td>
                    <td>2010/01/04</td>
                    <td>125,250</td>
                </tr>
<tr>
                    <td>Zorita Serrano</td>
                    <td>Software Engineer</td>
                    <td>San Francisco</td>
                    <td>56</td>
                    <td>2017/06/01</td>
                    <td>115,000</td>
                </tr>
<tr>
                    <td>Jennifer Acosta</td>
                    <td>Junior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>43</td>
                    <td>2013/02/01</td>
                    <td>75,650</td>
                </tr>
<tr>
                    <td>Cara Stevens</td>
                    <td>Sales Assistant</td>
                    <td>New York</td>
                    <td>46</td>
                    <td>2011/12/06</td>
                    <td>145,600</td>
                </tr>
<tr>
                    <td>Hermione Butler</td>
                    <td>Regional Director</td>
                    <td>London</td>
                    <td>47</td>
                    <td>2011/03/21</td>
                    <td>356,250</td>
                </tr>
<tr>
                    <td>Lael Greer</td>
                    <td>Systems Administrator</td>
                    <td>London</td>
                    <td>21</td>
                    <td>2009/02/27</td>
                    <td>103,600</td>
                </tr>
<tr>
                    <td>Jonas Alexander</td>
                    <td>Developer</td>
                    <td>San Francisco</td>
                    <td>30</td>
                    <td>2010/07/14</td>
                    <td>86,600</td>
                </tr>
<tr>
                    <td>Shad Decker</td>
                    <td>Regional Director</td>
                    <td>Edinburgh</td>
                    <td>51</td>
                    <td>2008/11/13</td>
                    <td>183,000</td>
                </tr>
<tr>
                    <td>Michael Bruce</td>
                    <td>Javascript Developer</td>
                    <td>Singapore</td>
                    <td>29</td>
                    <td>2011/06/27</td>
                    <td>183,000</td>
                </tr>
<tr>
                    <td>Donna Snider</td>
                    <td>Customer Support</td>
                    <td>New York</td>
                    <td>27</td>
                    <td>2011/01/25</td>
                    <td>112,000</td>
                </tr>
</tbody>
        </table>




CSS Part

<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"></link>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"></link>


JavaScript Part

<script language="javascript" src="//code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js" type="text/javascript"></script>         
<script language="javascript" src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js" type="text/javascript"></script>

    $(document).ready(function() {
        $('#example').DataTable({
            "order": [[0, "asc"]]/* First column in ascending order */,
            dom: 'Bfrtip',
            "pageLength": 5, /* Number of records */
            buttons: [
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4]
                    }
                },
            ]
        });
    });




Thursday, 18 August 2016

How to get visitor location with JavaScript ?

How to get visitor location with JavaScript ?

Today there are lots Free/Paid API avaiable which give you client information.
Following are two example which give you client information like city, country, country code, ip, local date time, timezone etc with javascript.
Question: How to get visitor location javascript with freegeoip.net?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready( function() {
   $.getJSON("http://freegeoip.net/json/", function(result){
       console.log(result);                        

       });
   });

Output
{  "ip": "112.196.3.177",
  "country_code": "IN",
  "country_name": "India",
  "region_code": "PB",
  "region_name": "Punjab",
  "city": "Mohali",
  "zip_code": "",
  "time_zone": "Asia/Kolkata",
  "latitude": 30.78,
  "longitude": 76.69,
  "metro_code": 0
}



Question: How to get visitor location javascript with ipinfo.io?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready( function() {
   $.getJSON('http://ipinfo.io', function(data){
    console.log(data)
  })
    }); 
</script>

Output
  {"ip": "112.196.3.177",
  "hostname": "No Hostname",
  "city": "Mohali",
  "region": "Punjab",
  "country": "IN",
  "loc": "30.7800,76.6900",
  "org": "AS17917 Quadrant Televentures Limited"
}



Wednesday, 17 August 2016

Bootstrap Interview Questions and Answers for 3 Month Experience

Bootstrap Interview Questions and Answers for 3 Month Experience

Question: Why Use Bootstrap?
  1. Responsive features: Website built using bootstrop will automatically adjust themselves on all devices like all type phone, ipad, and all type of desktop/laptop.
  2. Bootstrap is compatibile with all browser (mobile and desktop).
  3. Easy to start.
  4. Fast development


Question: How to start Bootstrap without downloading?
Just including following files in web page, and start working on bootstrp.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


Question: What doctype use by bootstrap?
Just including following files in web page, and start working on bootstrap.
HTML5 doctype



Question: What are meta tag require to set for proper rending in mobile?
<meta name="viewport" content="width=device-width, initial-scale=1">


Question: Which main class need to declare for fixed layout and fluid layout?
.container For fixed layout.
.container-fluid For fluid layout.


Question: How many column are allowed in Bootstrap Grid System?
12


Question: How many Grid Classes are available in Bootstrap Grid System?
4
  1. xs: phones
  2. sm : tablets
  3. md : desktops
  4. lg : large desktops



Question: Basic Structure of a Bootstrap Grid?
<div class="row">
<div class="col-*-*">
</div>
</div>
<div class="row">
<div class="col-*-*">
</div>
<div class="col-*-*">
</div>
<div class="col-*-*">
</div>
</div>




Question: What are Structure of Bootstrap Grid?
What are Structure of Bootstrap Grid



Question: What are the classes used for Success and warning?
.bg-primary: Important message.
.bg-success: successful message.
.bg-info: Informatoinal message.
.bg-warning: Warning message.
.bg-danger: Represent message.



Question: How to make an image Rounded Corners?
Just add below class in img tag.
.img-rounded



Question: How to make an image Responsive?
Just add below class in img tag.
.img-responsive



Question: How to make an youtube video as Responsive?
Just add below class in iframe tag.
.embed-responsive-item



Question: How to make an div with rounded border?
Just add below class in tag.
.well



Question: How to make display successful or failure message with cross link?

<div class="container">
<h2>
Alerts</h2>
The .fade and .in classes adds a fading effect when closing the alert message.<br />
<div class="alert alert-success fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Success!</strong> Successful Message.
  </div>
<div class="alert alert-info fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Info!</strong> Informational Message.
  </div>
<div class="alert alert-warning fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Warning!</strong> Warning Message.
  </div>
<div class="alert alert-danger fade in">
<a aria-label="close" class="close" data-dismiss="alert" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">&#215;</a>
    <strong>Danger!</strong> Something danger.
  </div>
</div>



Wednesday, 10 August 2016

Twitter Bootstrap Interview Questions and Answers


Twitter Bootstrap Interview Questions and Answers

Question: How to make twitter bootstrap menu dropdown on hover rather than click?
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}



Question: How can I make Bootstrap columns all the same height??
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}



Question: What is sr-only in Bootstrap 3??
It is class used to hide information intended only for screen readers from the layout of the rendered page.


Question: How to disallow twitter bootstrap modal window from closing?
<a data-backdrop="static" data-controls-modal="my_div_id" data-keyboard="false" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#"></a>



Question: What are different 4 tiers in twitter bootstrap?
  1. Extra small devices like smartphones (.col-xs-*)
  2. Small devices like tablets(.col-sm-*)
  3. Medium devices like laptops (.col-md-*)
  4. large devices like laptops/desktops(.col-lg-*)



Question: How to use media queries in twitter bootstrap 3?
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}



Question: How to use media queries in twitter bootstrap 4?
@media(min-width:34em){}
@media(min-width:48em){}
@media(min-width:62em){}
@media(min-width:75em){}



Question: What is an em?
An em is a unit in the field of typography, One em is equal to the 16 point size.



Question: How to open a Bootstrap modal?
$('#myModalId').modal('toggle');
$('#myModalId').modal('show');
$('#myModalId').modal('hide');
 



Question: How to make responsive image with align center?
.img-responsive {
    margin: 0 auto;
}
 



Question: How to create Confirm box before deleting modal/dialog?
Add data-target="#confirm-delete-id" in A tag

<a data-href="/delete-rec?id=203" data-target="#confirm-delete-id" data-toggle="modal" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">Delete record #203</a>
 

Add HTML for confirmation box
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete-id" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
                <a class="btn btn-danger btn-ok" href="https://www.blogger.com/null">Delete</a>
            </div>
</div>
</div>
</div>

 



Question: How to disabled the button?
$('#buttonId').prop('disabled', true);
 



Wednesday, 27 July 2016

How to detect and change Browser user agent?

How to detect and Browser user agent?

Question: What is Browser user agent?
It is software agent which acting on behalf of a user.
Actually it s user agent is a Single line of string which helps to detect the request. When an request is sent to web server then user agent of browser is also sent in header which helps the web server to identifying the browser and operating system.


Question: What is use of Browser user agent?
It helps the web server to identifying the browser and operating system.
Means with the help of user agent, web server can get the know which browser of OS is request the data.
Web site uses this customize content for the capabilities of a particular device.


Question: Who is using of Browser user agent?
Web Server (Websites) are using the user agent. With the help of user agent they get to know mobile OR Desktop.
then web server sent back the data as per requested device.


Question: How user agent is sent to Server?
When an browser send request to web server. then request header is sent to web server along with request data.


See Example of Request Header:
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.5
Cache-Control:max-age=0
Connection:keep-alive
Cookie:user_segment=Prospect; _ga=GA1.2.1900507711.1469603080
Host:example.georama.loc
Referer:http://example.georama.loc/
User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:47.0) Gecko/20100101 Firefox/47.0

User Agrent is
User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:47.0) Gecko/20100101 Firefox/47.0
Above is user agent of mozilla having version 47.0


Question: What is my current user agent ?
http://www.useragentstring.com/


Question: How to detect Browser user agent?
with use of user agent string, you can detect the browser and OS. Open: http://www.useragentstring.com/ Add the user agent string and click on Analyse.


Question: Can we change Browser user agent? If Yes, How?
Yes, We can change the user agent.
With help of User-Agent Spoofing, We can change the user agent.


Question: What is User agent spoofing?
Spoofing means behave differently than in actuality.


Question: Who is User agent spoofing?
Spam bots, Web scrapers, hackers uses the spoofing to hide their identity.


Question: How to change the useragent in Chrome, Safari & Firefox?
http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/


Tuesday, 26 July 2016

Overriding The Default Text Selection Color With CSS

Overriding The Default Text Selection Color With CSS

Question: Write CSS for change the default Text Selection to red.?
::selection {
  background: red; /* Blink/WebKit Browsers */
}
::-moz-selection {
  background: red; /* Gecko Browsers */
}



Question: Change the default Text Selection to BLUE for paragraph (p.webtechnology)?
p.webtechnology::selection {
  background: blue; /* Blink/WebKit Browsers */
}
p.webtechnology::-moz-selection {
  background: blue; /* Gecko Browsers */
}

See Demo Below

Blue Color On Selection




Question: Change the default Text Selection to RED for paragraph (p.redcolor)?
p.redcolor::selection {
  background: red; /* Blink/WebKit Browsers */
}
p.redcolor::-moz-selection {
  background: red; /* Gecko Browsers */
}

See Demo Below

Red Color Selection




Monday, 18 July 2016

WebRTC Examples

WebRTC Examples

Question: What is full form of WEBRTC?
Web Real-Time Communication


Question: What is WEBRTC?
WebRTC is an API that support browser-to-browser applications for voice calling, video calling, and P2P file sharing.


Question: Who started on WEBRTC? and when?
Google on May 2011.


Question: What are manjor components in WEBRTC?
  1. Audio Calls
  2. Video Calls
  3. Share data viz peer-to-peer
  4. Access Camera and Microphone



Question: Where will WEBRTC effect?
Real time communication such as text/audio/video between users by utilizing the browsers.


Question: What is full form of WHATWG?
Web Hypertext Application Technology Working Group.


Question: What is WHATWG?
WHATWG is a community of people interested in evolving HTML and HTML related technologies.


Question: What is WebSocket?
WebSocket is a protocol providing full-duplex communication channels over a single TCP connection.
OR
WebSocket can do communication between client to server OR server to client.



Question: Give an example of WebRTC Audio call?
https://simplewebrtc.com/demo.html?test-audio-call


Thursday, 3 March 2016

Dojo Interview Questions and Answers for Fresher

Dojo Interview Questions and Answers for Freshers

Question: What is Dojo?
It is JavaScript framework used for rapid development of cross-platform applications and web sites. Also known as Dojo Toolkit.


Question: What is current Stable release of Dojo?
1.10.4 / January 18, 2015


Question: In Which language, Its written?
JavaScript


Question: What is offical website of dojo?
http://dojotoolkit.org


Question: From where I can download dojo?
http://dojotoolkit.org/download/


Question: How to load dojo from CDN?
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>



Question: Is it opensource??
Yes, It is.


Question: What are different section/parts of Dojo library?
  1. dojo: Its core files.
  2. dijit: It have user-interface modules for widgets and layout
  3. dojox: It have assorted module
  4. util: It have tools like optimization, documentation, style-checking and testing.



Question: What are different Advantages of Dojo?
  1. Associative arrays
  2. Objects and classes
  3. Regular expression
  4. Loosely typed variables



Question: What are different Features of Dojo?
  1. Widgets
  2. Asynchronous communication
  3. Packaging system
  4. Client-side data storage
  5. Server-side data storage



Question: What is the basic structure in Dojo?
/index.html - The application entry point.
/app - The application module.
/app/main.js - The main script for app module.


Question: What is Widget Toolkit in Dojo?
Widget is a user interface object that has a layout and HTML+CSS bound by JavaScript. Dojo have widgets like Tabs, sorting table and dialogs etc.


Question: How to use Dojo Editor widget?
<script>
dojo.require("dojo.widget.textEditorId");
</script>
<textarea dojotype="textEditorId"> </textarea>



Question: Give some dojo components name?
  1. DOJO Tree
  2. DOJO Button
  3. DOJO Grid
  4. DOJO List box
  5. DOJO Calendar



Question: What is difference between DOJO and jQuery?
DOJO jQuery
JavaScript toolkit or framework JavaScript library
HTML and JavaScript based tool kit supports almost all web languages
Dojo requires higher network bandwidth Works good in low network bandwidth
Good for bigger website and application Good for small application.



Wednesday, 16 December 2015

EmberJS Interview Questions and Answers

EmberJS Interview Questions and Answers


Question: What is npm install?
NPM is a NodeJS package manager. It is used to install the node programs.


Question: How to install NPM on windows?
Download MSI from https://nodejs.org/download/release/ for 32bit|64bit system.


Question: How to update NPM on windows?
npm install npm
OR
Download Latest MSI from https://nodejs.org/download/release/latest/ for 32bit|64bit system.


Question: How to install Ember using npm?
npm install -g ember-cli



Question: How to get to know the Version of Ember?
ember -v


Question: How to get the Version of node?
node -v


Question: How to create a new project?
ember new my-newproject



Question: How to go inside new project for execute project based commands?
cd my-newproject



Question: What are different commands available in ember-cli?
ember g route about
It will give you list of commands available for Ember.


Question: How to define view.?
Ember.View.create({
   templateName: 'NameOfTemplate',   
});



Question: How to implement IF,ELSE,NOT in ember handlebar?
{{#unless isValid}}
  
{{else}}
    
{{/unless}}



Question: How to add/Delete data in Array?
//In JS
App.obj = Ember.Object.create({
    "things": Ember.A(["Testing1", "Testing2"])
});
App.obj.things.pushObject("3"); // Add data

// HTML + Handlebars
{{#with App.obj}}
    
    {{#each things}}
  • {{this}}
  • {{/each}}
{{/with}}



Question: Explain the core concept of EmberJS
  1. Store: It is central repository and cache of all records available in an application. It can be accessed by controller and admin.
  2. Models: A model is a class which defines the data of properties and behavior.
  3. Records: A record is an instance of a model which contains information that is loaded from a server.
  4. Adapter: It is responsible for translating requested records into the appropriate calls t
  5. Serializer: Translating JSON data into a record object.
  6. Automatic Caching:Used for caching



Question: What is Ember-data?
Ember-Data is a library that retrieve records from a server, store them, update them in the browser and save them back to the Server.


Question: What is Application Template?
Application Template have header, footer and contents which display on page. there can be many Template in one application.


Question: What is ember.mixin class?
Ember.mixin class can create objects, whose functions and properties can be shared among other instances and classes.


Tuesday, 15 December 2015

Basic Ember js Interview Questions and Answers


Basic Ember js Interview Questions and Answers


Question: What is EmberJS?
It is javasScript framework based on Model-view-controller(MVC) and written in javascript. It allows developers to create scalable single-page web applications by incorporating common idioms.
In this, Route is used as model, template as view and controller manipulates the data in the model.


Question: What is old name of EmberJS?
SproutCore MVC framework


Question: In which language, EmberJS is written?
javaScript


Question: When First EmberJS was released?
December 08, 2011


Question: When latest EmberJS was released?
November 16, 2015


Question: What is latest version of EmberJS?
2.2.0


Question: Who created EmberJS?
Yehuda Katz


Question: Is it opensource?
Yes, It is free to use.


Question: What is offical website of EmberJS?
http://emberjs.com/


Question: What are basic models of EmberJS?
  1. Routes: State of application is represented by URL and each URL has a corresponding route object that.
  2. Models: Use to load data from Server.
  3. Templates: This is html of layout.
  4. Components: It is custom tag.
  5. Services: Services are just singleton objects to hold long-lived data such as user sessions



Question: Why I use EmberJS?
  1. Open source JavaScript framework
  2. Flexible framework that embraces the concept of fast web page
  3. It has smaller size as compare to other library
  4. Data binding Support



Question: What are the Features of EmberJS?
  1. Creating reusable modules
  2. Handlebars Templates
  3. Automatice determines the route and controller during declaration of the route resources
  4. Used routes
  5. Extensive view type support.
  6. Easy to configure



Question: List out main components of Ember.js?
  1. Models
  2. The Router
  3. Controllers
  4. Views
  5. Components
  6. Templates
  7. Helpers



Question: What are different template components in Ember.js?
  1. Partial
  2. View
  3. Render
  4. Yield
  5. Outlet


Question: What controller does in Ember.js?
Decorate the model returned by the route.
It can listen to actions performed by users.


Question: Explain what is Ember-data?
It is a library that retrieve records from a server, store, update in the browser and save them back to the server.


Question: How you can define a new ember class?
use extend () method.


Question: What is Enumerables in Ember.js ?
enumerable is any object that contains a number of child objects, and enables you to work with those children using the Ember.


Question: Explain Application Template ?
Application Template is a default template that is used when your application starts.


Question: How you can create instances in Ember.js?
use create() method.


Question: What is Ember.Namespace.Class ?
It is used to define an object which contains other objects and data.


Question: Explain the role of adapter? Adapter queries the back end, each adapter is made up of particular back end.

Monday, 14 December 2015

Express Js Interview Questions and Answers

Express Js Interview Questions and Answers


Question: What is Express Js?
Express JS is a framework which helps to develop web and mobile applications. Its works on nodejs plateform. Its sub part of node.js.



What type of web application can built using Express JS?
you can build single-page, multi-page, and hybrid web applications.



Question: What are core features of Express framework?
  1. Allows to set up middlewares to respond to HTTP Requests
  2. Defines a routing table which can works as per HTTP Method and URL.
  3. Dynamically render HTML Pages


Question: Why I should use Express JS?
Express 3.x is a light-weight web application framework to help organize your web application into an MVC architecture on the server side.



Question: How to install expressjs?
http://expressjs.com/en/starter/installing.html


Question: How to get variables in Express.js in GET Method?
var express = require('express');
var app = express();

app.get('/', function(req, res){
    /* req have all the values **/  
  res.send('id: ' + req.query.id);  
});
app.listen(3000);



Question: How to get POST a query in Express.js?
var bodyParser = require('body-parser')
app.use( bodyParser.json() );       // to support JSON-encoded 
app.use(bodyParser.urlencoded({     // to support URL-encoded 
  extended: true
})); 



Question: How to output pretty html in Express.js?
app.set('view options', { pretty: true }); Question: How to get the full url in Express?
var port = req.app.settings.port || cfg.port;
res.locals.requested_url = req.protocol + '://' + req.host  + ( port == 80 || port == 443 ? '' : ':'+port ) + req.path;



Question: How to remove debugging from an Express app?
var io = require('socket.io').listen(app, { log: false });
io.set('log level', 1); 



Question: How to to 404 errors?
app.get('*', function(req, res){
  res.send('what???', 404);
});



Question: How to download a file?
app.get('/download', function(req, res){
  var file = __dirname + '/download-folder/file.txt';
  res.download(file); 
});



Question: What is the parameter “next” used for in Express?
app.get('/userdetails/:id?', function(req, res, next){
 });

req and res which represent the request and response objects
nextIt passes control to the next matching route.