Front End Interview Questions

Front 1

Can you describe the difference between progressive enhancement and graceful degradation?

Back 1

-web development methodologies

-web environment varies within browsers, devices and even user preferences.

-Progressive enhancement is the method in which the very basic feature that covers all environments is implemented first, and then adding up the additional enhancement for a specific environment.

-graceful degradation, a feature is implemented regardless of its compatibility, and the fallback for the feature is implemented later.

-Generally progressive enhancement is much safer way, and graceful degradation spends less time to create a product.

*Feature detection is a technical way to implement the methodologies described above. There're many features which are implemented in a browser, but not in another. Feature detection is to detect if a certain feature can be used in a given environment.

Front 2

Explain what "Semantic HTML" means.

Back 2

-Semantic HTML is to use HTML as what it means.

-HTML is a markup language, and each tags have their own meanings. If it's element, it means that it's a main header. We shouldn't use the element just to make a text bigger. It's Semantic HTML to make it clear that a tag is used properly for what it means. Semantic HTML helps developers to read and comprehend the code easily, and also make the non-person such as search engines parse the page right.

Front 3

How would you optimize a websites assets/resources?

Back 3

I have worked on smaller projects, that do not require much optimization, but things like:

-File concatenation

-File minification (Grunt)

-CDN Hosted

-Caching (Redis)

Front 4

Why is it better to serve site assets from multiple domains?

Back 4

To avoid overloading on one server, the browser has the limit on the number of resources loaded from a domain simultaneously. The number varies between browsers. So it's better to serve resources from multiple domains for increasing the number of resources loaded simultaneously in a page.

Front 5

If you jumped on a project and they used tabs and you used spaces, what would you do?

Back 5

Conform to the conventions (stay consistent)

Front 6

Write a simple slideshow page.

Back 6

CSS3 Transitions:

-transition-property

-transition-duration

-transition-timing-function

-transition-delay

Front 7

Describe what a "reset" CSS file does and how it's useful.

Back 7

-A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

-Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

Front 8

Describe Floats and how they work. (CSS)

Back 8

-It's a box that is pulled to the left or right and let the following content flow along its side.

-They are still in the flow of the page, but whereas the elements used to be stacked vertically, now they're side by side. Very commonly used for things like navigations.

-Has an annoying collapsing effect on the parent container. Fixed by clearing the float in the container.

Front 9

What are the various clearing techniques and which is appropriate for what context?

Back 9

- Empty Div Method:

- Overflow Method: setting auto or hidden overflow property on parent will expand it to contain the floats.- The Psuedo Method: uses the parent's :after to add the clear: both property.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both;}

Front 10

Explain CSS sprites, and how you would implement them on a page or site.

Back 10

A way to reduce HTTP requests by combining images together into one big image so you only have to request that one.

Implementation:

1) When developing a site, I usually save the spriting toward the end when I know all the images that I plan to use.

2) Whether using photoshop or sprite generator, the idea is to cram all the images into one big image, usually separated by a pixel.

3) In the css, put the background image on a sprite class that you use for all your image elements.

4) To specify a specific image or icon, set another class with the background positions and sizes of the image.

They can't do repeating graphics well.

Front 11

What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS)

Back 11

SASS: nested rules, variables, mixins, selector inheritance and to top it all off ... Compass.

Front 12

How would you implement a web design comp that uses non-standard fonts?

Back 12

Webfonts can just link to a webfont as a stylesheet, use @import, or javascript

Front 13

Explain how a browser determines what elements match a CSS selector?

Back 13

-Browsers read selectors from right-to-left.

-First looks for all elements matching the key selector (the right-most).

-Then checks if it matches or is under the next (left-most) element.

Front 14

Question: Implement a modulo function that satisfies the below:

modulo(12, 5) // 2

Back 14

var modulo = function(a, b){return (a%b)}

Front 15

What value is returned from the below statement?

"i'm a lasagna hog".split("").reverse().join("");

Back 15

"goh angasal a m'i"

Front 16

Value of window.foo:

( window.foo || ( window.foo = "bar" ) );

Back 16

"bar"

Front 17

Outcome: var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Back 17

Alerts "Hello Word", Second function bar is not defined.

Front 18

var foo = [];foo.push(1);foo.push(2);

what is length of foo

Back 18

2

Front 19

What does doctype do?

Back 19

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

Front 20

What's the difference between standards mode and quirks mode?

Back 20

doctype defines whether to use standards mode, almost standards mode, or quirks mode. Depending on the browser, in standards mode, what displays on the page should be just your code, almost standards may have some quirks, and if you are in quirks mode, you are way too old.

Front 21

What are the limitations of XHTML pages versus HTML5?

Back 21

XHTML does not have good browser support. So problems can arise from places like internet explorer, safari etc.HTML5 has more descriptive semantics.XHTML is not extensible if you hope to support Internet Explorer or the number of other user agents that can’t parse XHTML as XML. They will handle the document as HTML and you will have no extensibility benefit.The new version of HTML has features like offline storage or the ability to handle data even when the app is no longer connected to the internet

Front 22

What are data- attributes good for?

Back 22

to store data in the html tag that will not show up on the page

Front 23

Describe the difference between cookies, sessionStorage and localStorage.

Back 23

sessionStorage (as the name persists) is only available for the duration of the browser session (deleted when window is closed)

localStorage can live for as long as you specify, up to 60 days I believe?

cookies only allow you to store strings, used for authentication purposes and persistence of user data, all cookies valid for a page are sent from the browser to the server for every request to the same domain - this includes the original page request, any subsequent Ajax requests, all images, stylesheets, scripts and fonts.

Front 24

Explain event delegation

Back 24

Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent.That event listener analyzes bubbled events to find a match on child elements

when the event bubbles up to the UL element, you check the event object's target property to gain a reference to the actual clicked node.

document.getElementById("parent-list").addEventListener("click", function(e) { // e.target is the clicked element! // If it was a list item if(e.target && e.target.nodeName == "LI") { // List item found! Output the ID! console.log("List item ", e.target.id.replace("post-"), " was clicked!"); }});

Front 25

Explain how 'this' works in JavaScript

Back 25

http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work

Front 26

Explain how prototypal inheritance works

Back 26

A prototype is an internal object from which other objects inherit properties. Its main purpose is to allow multiple instances of an object to share a common property. Thus, object properties which are defined using the prototype object are inherited by all instances which reference it.

http://www.htmlgoodies.com/html5/tutorials/javascript-prototypical-inheritance-explained.html

Front 27

How do you go about testing your JavaScript?

Back 27

Mocha

Front 28

AMD vs. CommonJS?

Back 28

AMD using require

Front 29

What's a hashtable?

Back 29

all objects in JavaScript are hash tables

Front 30

Explain why the following doesn't work as an IIFE: function foo(){ }();

Back 30

Because foo isn’t being called! Here’s a rewrite:function foo(){}();This is a function definition, it defines foo. But it’s not a function expression - that is, it’s not understood by the JS parser to actually call a function.

(function foo(){ return 'bar';}());

Front 31

What's the difference between a variable that is: null, undefined or undeclared

Back 31

A variable is undeclared when it does not use the var keyword. It gets created on the global object (that is, the window), thus it operates in a different space as the declared variables.

Something is undefined when it hasn’t been defined yet. If you call a variable or function without having actually created it yet the parser will give you annot defined error

null is a variable that is defined to have a null value. (object with no value)

Front 32

What is a closure, and how/why would you use one?

Back 32

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

Front 33

What's a typical use case for anonymous functions?

Back 33

Anonymous functions are typically used as callbacks.

function takesACallback(callback) { // do some interesting things here return "The callback says: " + callback();}takesACallback(function() { return "I'm the callback!";});

Front 34

Explain the "JavaScript module pattern" and when you'd use it.

Back 34

The objective is to hide the variable accessibility from the outside world. Have a function, inside a variable (private), return statement with other functions that can be called function.innerfunction()

Front 35

How do you organize your code? (module pattern, classical inheritance?)

Back 35

Modularity

Front 36

What's the difference between host objects and native objects?

Back 36

Standard native objects are defined in this specification. Some native objects are built-in; others may be constructed during the course of execution

Object (constructor), Date, Math, parseInt, eval, string methods like indexOf and replace

Any object that is not native is a host object.

window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName

Front 37

Difference between: function Person(){}, var person = Person(), and var person = new Person()

Back 37

function Person() {} Declares a function (but does not execute it).It will usually have some code between the curly brackets.

var person = Person()Declares a variable (person), invokes a function (Person) and sets the value of person to the return of the function.

var person = new Person()Creates a new instance of an object based on the Person function. So the variable (person) is now an Object, not just a string or a number.

Front 38

What's the difference between .call and .apply

Back 38

The difference is that apply lets you invoke the function with arguments as an array; callrequires the parameters be listed explicitly. A useful mnemonic is "A for array and C for comma."

Front 39

explain Function.prototype.bind

Back 39

bind allows you to set which object is treated as this within the function call.

bind allows-set the value of "this" to an specific object. This becomes very helpful as sometimes this is not what is intended.reuse methodscurry a function

Front 40

Can you explain how inheritance works in JavaScript?

Back 40

n simple terms, inheritance is the concept of one thing gaining the properties or behaviours of something else. To say A inherits from B, is saying that A is a type of B. A Bird inherits from Animal because a Bird is a type of Animal - it can do the same things, but a little more (or differently)!

Front 41

When would you use document.write()?

Back 41

It seems that the only “approved” time to use document.write() is for third party code to be included (such as ads or Google Analytics). Since document.write() is always available (mostly) it is a good choice for third party vendors to use it to add their scripts. They don’t know what environment you're using, if jQuery is or isn’t available, or what your onload events are. And with document.write() they don’t have to.

Front 42

What's the difference between feature detection, feature inference, and using the UA string

Back 42

When you check if a certain feature exists, that’s feature detection.

When you make an assumption that because one feature is present (or not) another one will also be present (or not). (And you know what people say about when you assume something...)

“UA” stands for user agent, which means the browser (and a whole lot of other stuff). Mine looks like this:

But you can see in there (at the end) it says what browser I’m on. So it would be possible to check for a specific version of Chrome by “sniffing” the user agent string. This is generally considered bad practice (but seems to be slightly better practice than feature inference).

Front 43

Explain AJAX in as much detail as possible

Back 43

Ajax is asynchronous, which mean you can use it to get new informations from the server without reloading the whole page.

-type: POST GET

-url: you want to get

-data: as you're sending your request with POST, you cannot pass data directly from the URL. So you have to pass them like that. { nameVar: 'value', .... } If you were sending with GET, you could directly write them into url like : "http://my_url.php?var1=val1&var2=val2 etc

-beforeSend:function() You can define an action before sending your ajax request

-success:function(data) If your request is successful, you can do something. By successful it means if server answer 200 i guess, anyway ... If you have a response from server... ;)

Front 44

Explain how JSONP works (and how it's not really AJAX)

Back 44

JSONP calls are an interesting hack with the script tag that allows cross-origin communication. In a JSONP call, the client creates a script tag and puts a URL on it with an callback=xxxx query parameter on it. That script request (via the script tag insertion) is sent by the browser to the foreign server. The browser just thinks it's requesting some javascript code.

Front 45

Explain "hoisting".

Back 45

var myvar = 'my value';

(function() {

alert(myvar); // undefined

var myvar = 'local value';

})();

It should now make perfect sense why myvar is alerting undefined. As we learned, as soon as the local variable, myvar, was declared, it was automatically hoisted to the top of the function scope…above the alert. As a result, the variable had already been declared at the time of the alert; however, because initializations aren’t hoisted as well, the value of the variable is: undefined

Front 46

Describe event bubbling.

Back 46

If you have a div, with an ul and li, if you click an li, it will trigger a function if defined in the div

Front 47

What's the difference between an "attribute" and a "property"?

Back 47

$('input').prop('checked'); // returns true$('input').attr('checked'); // returns "checked"

Front 48

Why is extending built in JavaScript objects not a good idea?

Back 48

When you extend an object, you change its behaviour.Changing the behaviour of an object that will only be used by your own code is fine. But when you change the behaviour of something that is also used by other code there is a risk you will break that other code.

Front 49

Difference between document load event and document ready event?

Back 49

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load

Front 50

What is the difference between == and ===?

Back 50

JavaScript has both strict and type-converting equality comparison. For strict equality the objects being compared must have the same type and:

Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.

Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is not equal to anything, including NaN. Positive and negative zeros are equal to one another.

Two Boolean operands are strictly equal if both are true or both are false.

Two objects are strictly equal if they refer to the same Object.

Null and Undefined types are == (but not ===). [I.e. (Null==Undefined) is true but (Null===Undefined) is false]

Front 51

Explain how you would get a query string parameter from the browser window's URL.

Back 51

location.search

Front 52

Explain the same-origin policy with regards to JavaScript.

Back 52

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It is a critical security mechanism for isolating potentially malicious documents.

Front 53

Make this work:[1,2,3,4,5].duplicate(); //[1,2,3,4,5,1,2,3,4,5]

Back 53

Array.prototype.duplicate = function(){

return this.concat(this)

}

[1,2,3,4,5].duplicate()

Front 54

Describe a strategy for memoization (avoiding calculation repetition) in JavaScript.

Back 54

??

Front 55

Why is it called a Ternary expression, what does the word "Ternary" indicate?

Back 55

So a ternary operand accepts three parameters.

if(conditional) {

// one truethy_block // two

} else {

falsey_block // three

}

conditional ? truethy_block : falsey_block

Front 56

What is "use strict";? what are the advantages and disadvantages to using it?

Back 56

Strict mode throws more errors and disables some features in an effort to make your code more robust, readable, and accurate.

It catches some common coding bloopers, throwing exceptions.It prevents, or throws errors, when relatively “unsafe” actions are taken (such as gaining access to the global object).It disables features that are confusing or poorly thought out.

Front 57

What are the ways to communicate between modules of your application using core AngularJS functionality? Name three ways.

Back 57

Communication can happen:

Using services

Using events

By assigning models on $rootScope

Directly between controllers, using $parent, nextSibling, etc

Directly between controllers, using ControllerAs, or other forms of inheritence

Front 58

Which means of communication between modules of your application are easily testable?

Back 58

Using a service is definitely easy to test. Services are injected, and in a test either a real service can be used or it can be mocked.

Events can be tested. In unit testing controllers, they usually are instantiated. For testing events on $rootScope, it must be injected into the test.

Testing $rootScope against the existence of some arbitrary models is testable, but sharing data through $rootScope is not considered a good practice.

For testing direct communication between controllers, the expected results should probably be mocked. Otherwise, controllers would need to be manually instantiated to have the right context.

Front 59

The most popular e2e testing tool for AngularJS is Protractor. There are also others which rely on similar mechanisms. Describe how e2e testing of AngularJS applications work.

Back 59

The e2e tests are executed against a running app, that is a fully initialized system. They most often spawn a browser instance and involve the actual input of commands through the user interface.

Front 60

When a scope is terminated, two similar “destroy” events are fired. What are they used for, and why are there two?

Back 60

The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”. The first one can be used by AngularJS scopes where they are accessible, such as in controllers or link functions.

scope.$on(‘$destroy’, function () { // handle the destroy, i.e. clean up.});

Front 61

How do you reset a “$timeout”, and disable a “$watch()”?

Back 61

The key to both is assigning the result of the function to a variable.

To cleanup the timeout, just “.cancel()” it:

var customTimeout = $timeout(function () { // arbitrary code}, 55);$timeout.cancel(customTimeout);

The same applies to “$interval()”.To disable a watch, just call it.

// .$watch() returns a deregistration function that we store to a variable

var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {

if (newVal) { // we invoke that deregistration function, to disable the watch deregisterWatchFn(); ...

}});

Front 62

Name and describe the phases of a directive definition function execution, or describe how directives are instantiated.

Back 62

The flow is as follows:

First, the “$compile()” function is executed which returns two link functions, preLink and postLink. That function is executed for every directive, starting from parent, then child, then grandchild.

Secondly, two functions are executed for every directive: the controller and the prelink function. The order of execution again starts with the parent element, then child, then grandchild, etc.

The last function postLink is executed in the inverse order. That is, it is first executed for grandchild, then child, then parent.

Front 63

How does interpolation, e.g. “{{ someModel }}”, actually work?

Back 63

t relies on $interpolation, a service which is called by the compiler. It evaluates text and markup which may contain AngularJS expressions. For every interpolated expression, a “watch()” is set. $interpolation returns a function, which has a single argument, “context”. By calling that function and providing a scope as context, the expressions are “$parse()”d against that scope.

Front 64

How does the digest phase work?

Back 64

In a nutshell, on every digest cycle all scope models are compared against their previous values. That is dirty checking. If change is detected, the watches set on that model are fired. Then another digest cycle executes, and so on until all models are stable.

Front 65

List a few ways to improve performance in an AngularJS app.

Back 65

The two officially recommended methods for production are disabling debug data and enabling strict DI mode.

The first one can be enabled through the $compileProvider:

myApp.config(function ($compileProvider) { $compileProvider.debugInfoEnabled(false);});

The second one can be set as a directive:

The performance gain lies in the fact that the injected modules are annotated explicitly, hence they don’t need to be discovered dynamically.

Front 66

How can you declare a class in Javascript?

Back 66

In javascript there's no classes like in Java, what we actually call a class is in reality a function simulating a class behaviour. For being so flexible, there are many ways to create a class in javascript, below you'll find 3 ways of doing that.

Class using function as a constructor:

function Person(name) {

this.name = name;

}// Creating an object

var person = new Person("Rafael"); person.name;

Class Literal notation:

var person = {

name: "",

setName: function(name) {

this.name = name;

}

}

person.setName("Rafael"); person.name;

Singleton through a function:

var person = new function() {

this.setName = function(name) {

this.name = name; }

this.sayHi = function() {

return "Hi, my name is " + this.name; }

}

person.setName("Rafael");

alert(person.sayHi());

Front 67

How would you organize your Javascript code?

Back 67

'module pattern', where we separate our javascript into logical modules, or namespaces. What you'll see below is an example of how I would separate my user module.

Front 68

How can you add a method to a class already defined?

Back 68

You can add a new method to a javascript class using prototype:

function Person(name) {

this.name = name;

}

Person.prototype.walk = function() { console.debug(this.name + " is walking.");

}// Calling the new method

var person = new Person("Rafael"); person.walk();

// "Rafael is walking."