1⟩ Do you know what is the difference between == and === ?
== is equal to
=== is exactly equal to (value and type)
Front End Developer
Home GUI Front End Developer
“Front End Programmer based Frequently Asked Questions by expert members with experience as Front End Developer. These questions and answers will help you strengthen your technical skills, prepare for the new job test and quickly revise the concepts”
67 Front End Developer Questions And Answers
2⟩ Explain what is lazy loading?
Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed.
Lazy loading is loading code only once user needs it. For Example, there is a button on the page, which shows different layout once user pressed it. So there is no need to load code for that layout on initial page load.
3⟩ What is the difference between a host object and a native object?
Native - existing in JavaScript. Host - existing in the environment.
4⟩ Tell me are you familiar with Jasmine or QUnit?
Jasmine and QUnit are JavaScript testing frameworks. I would familiarize yourself with the basics.
5⟩ Do you know what is a sprite? How is it applied using CSS? What is the benefit?
- A image sprite is a collection of images put into one single image.
- Using css positioning you can show and hide different parts of the sprite depending on what you need.
- Sprites reduces the number of http requsts thus reducing load time of page and bandwidth
Buy Buttons using Sprite as background:
Both buttons use the same background image. The only differece is in the positioning.
BUY BUY
Here is the actual background image:
And the CSS.
<style>
.orangeBuyBtn {
background: url('buyButtons-bg.gif') repeat-x 0 0;
border-color: #5B5752 #6B6B6B #808080;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
.greenBuyBtn {
background: url('buyButtons-bg.gif') repeat-x 0 -24px;
border-color: #5B5752 #6B6B6B #808080;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
</style>
Learn more about sprites at Smashing Magazine. Also see the Site Point article or this W3School Article.
6⟩ Explain the difference between static, fixed, absolute and relative positioning?
static is the default.
fixed is positioned relative to the browser.
absolute is positioned relative to its parent or ancestor element.
relative is positioned relative to normal positioning/the item itself. Used alone it accomplishes nothing.
7⟩ Tell me what are some of the online tools and resources you use when you have a problem? Where do you go to ask questions?
This question really just looks for how resourceful the candidate is, it also reflects on their problem solving process and may lead you to ask more questions.
8⟩ How do browsers read CSS?
From right to left.
9⟩ Tell me the difference between visibilityhidden; and displaynone;?
Visibility:Hidden; - It is not visible but takes up it's original space.
Display:None; - It is hidden and takes up absolutely no space as if it was never there.
10⟩ How to increase page performance?
(1) Sprites, compressed images, smaller images;
(2) include JavaScript at the bottom of the page;
(3) minify or concatenate your CSS and JavaScript; and
(4) caching.
11⟩ Using jQuery how would you hide the image when the user clicks it for the following code snippet? <div class="content"> <p>Some Content Here</p> <p class="loader"><img src="ajax-loader.gif"></p> </div>
$(document).ready(function(){
$('.loader img').click(function() {
$('.loader img').hide();
$('.loader img').hide();
});
});
12⟩ Explain some common IE6 bugs and how you dealt with them?
Ie6 is not dead, just ask China which represents a nice chunk of the worlds online population. Your pages should at least be functional on IE6, unless you dont care about half the worlds population.
13⟩ What is a clear?
A clear is used when you don't want an element to wrap around another element, such as a float.
14⟩ Tell us what is the difference between HTML and XHTML?
HTML is HyperText Markup Language used to develop the website.
XHTML is modern version of HTML 4. XHTML is an HTML that follows the XML rules which should be well-formed.
15⟩ Explain what is a javascript object?
A collection of data containing both properties and methods. Each element in a document is an object. Using the DOM you can get at each of these elements/objects and do some cool sh*t.
16⟩ Explain the difference between visibilityhidden; and displaynone?
Visibility:Hidden; - It is not visible but takes up it's original space.
Display:None; - It is hidden and takes no space.
17⟩ Tell me what is the difference between form get and form post?
Get:
With GET the form data is encoded into a URL by the browser. The form data is visible in the URL allowing it to be bookmarked and stored in web history. The form data is restricted to ASCII codes. Because URL lengths are limited there can be limitations on how much form data can be sent.
Post:
With POST all the name value pairs are submitted in the message body of the HTTP request which has no restrictions on the length of the string. The name value pairs cannot be seen in the web browser bar.
POST and GET correspond to different HTTP requests and they differ in how they are submitted. Since the data is encoded in differently, different decoding may be needed.
18⟩ Do you know what is a closure?
Closures are expressions, usually functions, which can work with variables set within a certain context. Or, to try and make it easier, inner functions referring to local variables of its outer function create closures.
19⟩ Tell me what is the difference between call and apply?
apply lets you invoke the function with arguments as an array. call requires the parameters to be listed explicitly. Also, check out this stackoverflow answer.
20⟩ Explain what is the difference between a prototype and a class?
Prototype-based inheritance allows you to create new objects with a single operator; class-based inheritance allows you to create new objects through instantiation. Prototypes are more concrete than classes, as they are examples of objects rather than descriptions of format and instantiation.
Prototypes are important in JavaScript because JavaScript does not have classical inheritance based on classes; all inheritances happen through prototypes. If the JavaScript runtime can't find an object's property, it looks to the object's prototype, and continues up the prototype chain until the property is found.
