Web Technology Experts Notes

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

Wednesday 10 August 2016

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?

Extra small devices like smartphones (.col-xs-*)
Small devices like tablets(.col-sm-*)
Medium devices like laptops (.col-md-*)
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?

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

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

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?

Audio Calls
Video Calls
Share data viz peer-to-peer
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

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?

dojo: Its core files.
dijit: It have user-interface modules for widgets and layout
dojox: It have assorted module
util: It have tools like optimization, documentation, style-checking and testing.

Question: What are different Advantages of Dojo?

Associative arrays
Objects and classes
Regular expression
Loosely typed variables

Question: What are different Features of Dojo?

Widgets
Asynchronous communication
Packaging system
Client-side data storage
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?

DOJO Tree
DOJO Button
DOJO Grid
DOJO List box
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.