Web Technology Experts Notes

Thursday, 27 April 2017

Azure Blob storage Architecture

Question: What is Azure Blob storage?
Azure Blob storage is a service that stores unstructured large data in the cloud in form of objects/blob.
Blob storage can store any type of file like image, video OR text etc.
Stored data can be accessed through HTTP or HTTPS.

Question: What is Blob?
It is large file like an image, video or binary data.

Question: Why Blob Storage are used?

Streaming Audio/Video.
Storing data for backup and restore.
Store heavy data like images, audio and videos.
Access the data in browser.
Storing files for distributed access.

Question: What is structure of Blob storage?
An account can have one OR More container.
User can store the data in container.
For Example:

One Account 
    Movies (Container 1)
        movie1.mp4 (Blob data)
        movie2.mp4 (Blob data)
        movie3.mp4 (Blob data)

    videos (Container 2)
        video1.mp4 (Blob data)
        video1.mp4 (Blob data)
        video1.mp4 (Blob data)

    photos (Container 3)
        photo1.jpg (Blob data)
        photo2.jpg (Blob data)
        photo3.jpg (Blob data)
        photo4.jpg (Blob data)

Question: How to get azure client Libraries (using composer)?

1. Create a folder where you want to download the library.
Install composer (If not) php -r "readfile('https://getcomposer.org/installer');" | php

Create a composer.json (with following data)

{
   "require": {
     "microsoft/windowsazure": "^0.4"
   }
 }

Download the library with following command.
```
php composer.phar install
```

Question: Give a tutorial from where i can do list/add/update/delete the azure blob data?
https://docs.microsoft.com/en-us/azure/storage/storage-php-how-to-use-blobs

Question: In how many programming language code is available?

.NET
Java
Node.js
C++
Python
P?HP
Ruby
iOS
Xamarin

Question: What is mount in linux?
Mounting a filesystem means making the particular filesystem accessible.
When mounting a filesystem it does not matter if the filesystem is a hard disk partition, CD-ROM, floppy, or USB storage device.

Question: Differences between Azure Block Blob and Page Blob?
Block blobs are for your discrete storage objects like jpg's, log files, etc.
Page blobs are for random read/write storage, such as VHD's. Max size 1TB.

Question: What is the maximum length of an Azure blob name?
1024 max character.

Tuesday, 25 April 2017

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?

Initialization
State/Property Updates
Destruction

Question: What are the feature of ReactJS?

JSX: JSX is JavaScript syntax extension.
Components : React is all about components.
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?

React uses virtual DOM which is JavaScript object. This will improve apps performance
It can be used on client and server side
Component and Data patterns improve readability.
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, 24 April 2017

Node.js - Global Objects

Question: How to display the current filename?

console.log(__filename);

This gives you local filename of the current module.

Question: How to display the current directory name?

console.log(__dirname);

This gives you local dirname of the current module.

Question: How to call a function after 5 seconds?
For this, you can use a global function i.e setTimeout.

function helloFunction(){
   console.log( "Hello, World!");
}
/* helloFunction will call after 5 seconds*/
setTimeout(helloFunction, 5000);

Question: How to stop calling a function which was started with setTimeout?
For this, you can use a global function i.e clearTimeout.

function helloFunction(){
   console.log( "Hello, World!");
}
/* helloFunction will call after 5 seconds*/
var funcObj=setTimeout(helloFunction, 5000);

//stop funtion
clearTimeout(funcObj);

Question: How to call a function in every 7 seconds?
For this, you can use a global function i.e setInterval.

function helloFunction(){
   console.log( "Hello, World!");
}
/* helloFunction will call in every 7 seconds*/
setInterval(helloFunction, 7000);

Question: How to stop calling a function which was started with setInterval?
For this, you can use a global function i.e clearInterval

clearInterval(funcObj);

Question: What are different Console Methods to print info, error, warning etc?

console.log: Prints to stdout with newline.
console.error: Prints to stderr with newline.
console.dir: Uses util.inspect on obj and prints resulting string to stdout.
console.time: Mark the time
console.timeEnd: Mark the time end
console.trace: Print to stderr Trace

Question: What are Process Events?
The process object is a global object and can be accessed from anywhere.

process.on('exit', function(code) {   
   console.log('About to exit with code:', code);
});
console.log("Program Ended");

Question: What are different the Process Events?

exit
beforeExit
uncaughtException
Signal Events

Wednesday, 19 April 2017

How to install Zend Framework 2 in wamp using composer?

1. Download the composer

Go to php directory (Path:wamp\bin\php\php5.5.12) from where you can run the PHP commands.
In My Case, I goes to "D:\wamp\bin\php\php5.5.12" using cd commands.
Execute the following command.

php -r "readfile('https://getcomposer.org/installer');" | php

2. Download the Zend framework2 using composer.

You can set the path where you want to download the zf.
I have set the path to "D:/wamp/www/zf2", Please change this as per ur need.
Execute the following command.

php composer.phar create-project -sdev --repository-url="https://packages.zendframework.com" zendframework/skeleton-application "D:/wamp/www/zf2"

3. Virtual Host Setup

Add following code in httpd-vhosts.conf file.
My Local path: D:\wamp\bin\apache\apache2.4.9\conf\extra

<VirtualHost *:80>
    DocumentRoot "D:\wamp\www\zf2\public"
    ServerName zf2.loc
    <Directory "D:\wamp\www\zf2\public">
        Options FollowSymLinks MultiViews
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Add following code in hosts file
My Local path is : C:\Windows\System32\drivers\etc

127.0.0.1       zf2.loc

4. ReStart wamp Server

4. Open http://zf2.loc/

It must working, if not please comment. We let u know the reason.

Monday, 17 April 2017

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]
                    }
                },
            ]
        });
    });