Front End Programmer Interview Preparation Guide

Download PDF

Native - existing in JavaScript. Host - existing in the environment.

Jasmine and QUnit are JavaScript testing frameworks. I would familiarize yourself with the basics.

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.

== is equal to
=== is exactly equal to (value and type)

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.

The 3 equal signs mean "equality without type coercion". Using the triple equals, the values must be equal in type as well.

== is equal to
=== is exactly equal to (value and type)
0==false // true
0===false // false, because they are of a different type
1=="1" // true, auto type coercion
1==="1" // false, because they are of a different type

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.

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.

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.

A clear is used when you don't want an element to wrap around another element, such as a float.

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.

From right to left.

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.

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.

- 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.

$(document).ready(function(){
$('.loader img').click(function() {
$('.loader img').hide();
$('.loader img').hide();
});
});

(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.

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.

Visibility:Hidden; - It is not visible but takes up it's original space.
Display:None; - It is hidden and takes no space.

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.

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.

A GET request is typically used for things like AJAX calls to an API (insignificant changes), whereas a POST request is typically used to store data in a database or submit data via a form (significant changes). GET requests are less secure and can be seen by the user in the URL, whereas POST requests are processed in two steps and are not seen by the user. Therefore, POST requests are more secure.

The doctype declaration should be the very first thing in an HTML document, before the html 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.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.

1) Hex
2) RGB
3) Name (ie red)

.colorMe {
color:red;
color:#ff0000;
color:rgb(0,0,255);
}

☛ What are the limitations when serving XHTML pages?
☛ Are there any problems with serving pages as application/xhtml+xml?
☛ How do you serve a page with content in multiple languages?
☛ What are the different ways to visually hide content (and make it available only for screen readers)?
☛ Any familiarity with styling SVG?
☛ What are some of the "gotchas" for writing efficient CSS?
☛ What's the difference between inline and inline-block?
☛ Explain how this works in JavaScript (Yes, I admit this. I think I know it, but I don't think I have a 100% lock down on the answer here and I want a 100% lock down.)
☛ AMD vs. CommonJS?
☛ What's the difference between host objects and native objects?