Front End Interview Questions

Show me the two ways of making IIFEs. Why do they work? (JavaScript)

*(function(){ / code / }()); // Crockford recommends this one* *(function(){ / code / })();* *In JavaScript you cannot put a statement in a parenthesis. If JavaScript encounters the keyword function within a parentheses then it knows to read it as an expression and not a statement.* add a parenthesis at the end of the statement and you're all set.

Name a popular psuedo-class (CSS)?

*:active* when something activated by the user, such as when a link is clicked on. *:hover* when the mouse is over a page element *:focus* when an element gains focus, that is when it is selected by, or is ready for, keyboard input *:first-child* the first child of a given element

What is the difference between a fixed position element and an absolute positioned element (CSS)?

*Absolute* pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute box can be placed anywhere on the page using top, right, bottom and left. *Fixed* behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled. Think Headers and Footers

CSS Specificity

*The more specific a selector, the more preference it will be given when it comes to conflicting styles.* --*p* has a specificity of 1 (1 HTML selector) ----*div p* has a specificity of 2 (2 HTML selectors, 1+1) ------*.tree* has a specificity of 10 (1 class selector) div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10) --------*#baobab* has a specificity of 100 (1 id selector) -----------*body #content .alternative p* has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)

What is wrong with this piece of JavaScript: *function(){ /code / }();* ? Why doesn't it work as an Immediately invoked function expression? How can we fix it?

*When the parser encounters the function keyword in the global scope or inside a function, it treats it as a function declaration (statement), and not as a function expression, by default.* If you don't explicitly tell the parser to expect an expression, it sees what it thinks to be a function declaration without a name and throws a SyntaxError exception because function declarations require a name. Fix it by wrapping the function in parentheses.

What is the difference between px and em? (CSS)

*px* (such as font-size: 12px) is the unit for pixels. *em* (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size. So *em is a relative measurement*

How do you serve a page with content in multiple languages?

1.You must have translated/localized pages on the server for each language you intend to support. 2.Your server must recognize the browser's language request. 3.You must carefully name the files for the localized pages, so the server has a systematic way of locating them. 4.You need a method for serving a generic page when you don't have the requested language.

What is the difference between undefined, undeclared, and null? How would you go about checking for any of these states?

A *null* value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address. It has been declared and been assigned the value of null. An *undefined* value is a variable that is declared has no value assigned to it. An *undeclared* value is a variable that has been declared without the keyword var, and is global. ex. var name; ex. foo; Check for with typeof, which should return undefined for undefined and object for null and undeclared. If one of those two, use the identity operator "===" with null. If true null, if false, undeclared. http://lucybain.com/blog/2014/null-undefined-undeclared/

What's the difference between a host object and a native object?

A Native Object is an object that is of some Class that is native to JavaScript like: "Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", and "String". *A Host Object is an object provided by the environment in order to serve a specific purpose to that environment not defined in by the specification.* These objects are given from the environment, like the window or the browser. https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects

What is a closure? (JavaScript)

A closure is a relationship between two functions, an outer function and an inner function. *The inner function can be accessed only from statements in the outer function.* The inner function forms a closure: *the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.* This is important for privacy and the module pattern.

What is "this" in JavaScript (JavaScript)

A few different things actually: 1) When a function is called as a method of some object, its *this* is set to the object the method is called on. var bike = { ----name: "thomas", ----model: "bike1" } //this again is JSON notation var getName = function { ----return this.name; } 2) In a constructor, *this* refers to the object being created. from the docs: function C() { --this.a = 37; } var o = new C(); console.log(o.a); // logs 37 3) When a function is used as an event handler, *this* refers to the element the event fired from. $(this).addClass(highlighted);

What is absolute positioning? (CSS)

Absolutely positioned page elements are removed from the flow of the webpage, like when the text box in the print layout was told to ignore the page wrap. Absolutely positioned page elements will not affect the position of other elements and other elements will not affect them, whether they touch each other or not.

Why keep one JS/CSS file? (General)

Again, when a browser receives an HTML packet it generally has to make additional requests for information given what's in the head of the HTML file. If there's 5 different style sheets, then that's five more requests we have to make. If it's one style sheet its just one request.

What is an IIFE? (JavaScript)

An Immediately-Invoked Function Expression, which is rather self-explanatory. Signified by a pair of parentheses: ().

What is an interpreted language?

An interpreted language is a programming language for which most of its implementations execute instructions directly, without previously compiling a program into machine-language instructions.

What is float and when do you use it? (CSS)

Basically it moves block level elements around the page and lets you move other generally smaller or inline elements like text around the floated element. If the float value is set to clear then it goes below the floated values above it. https://www.w3schools.com/css/css_float.asp more on clear here: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

What is Block Formatting Context? (CSS)

Basically it's how the elements inside of a block level element relate to one another via floats, absolute and fixed positioning, inline blocks, tables etc.

What is the clear property in CSS?

Clear has four valid values. *Both* is most commonly used, which clears floats coming from either direction. *Left* and *Right* can be used to only clear the float from one direction respectively. *None* is the default, which is typically unnecessary unless removing a clear value from a cascade.

Explain event delegation (JavaScript)

Event Delegation uses JavaScript's event bubbling to listen to events amongst children instead of attaching a listener to an elements many children. ex. Applying a listener to a <ul> element on click instead of attaching a listener to the multiple <li> element ex 2. Books on a shelf: If I wanted to monitor whether or not books had been moved on a shelf I wouldn't put a sensor on each book, I'd put a sensor on the shelf, maybe a scale or something. src: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

What does a doctype do? (HTML)

First and foremost, *it tells your web browser what kind of document is enclosed helping your browser render the page correctly*. Nowadays, it tells web browsers to render HTML in *the most standard compliant mode they can (i.e in accordance with WC3 standards)*. Or more succinctly: In HTML5, the only purpose of the DOCTYPE is to activate full standards mode.

What does it mean to float an element in CSS? (CSS)

Floating helps developers move elements around the web page while making it that the elements remain in the flow, or block formatting context, of the page. Since web pages, due to the way we write, already have vertical flow, we use float to move elements to the left or the right. This is contrasted with absolutely positioned elements.

Give me a use case for a IIFE?

From the Alman reading: One of the most advantageous side effects of Immediately-Invoked Function Expressions is that, because this unnamed, or anonymous, function expression is invoked immediately, without using an identifier, a closure can be used without polluting the current scope. Basically it allows variables that are passed to the function, as Alman says, "save state" without becoming accessible in the greater programs scope. The best example of this is the module pattern. This function creates a variable counter, which is an interface to the variable i below. ex. // As explained in the above "important note," even though parens are not required around this function expression, they should still be used as a matter of convention to help clarify that the variable is being set to the function's *result* and not the function itself. 10.--var counter = (function(){ 11. ----var i = 0; 12. 13.----return { 14.------get: function(){ 15.--------return i; 16.------}, 17.------set: function( val ){ 18.--------i = val; 19.------}, 20.------increment: function() { 21.--------return ++i; 22.------} 23.----}; 24.}());

What's the difference between HTML and XHTML? (HTML)

In short, XHTML is HTML written with XML and packaged as such. It's basically HTML but stricter/with more rules. -all elements and attribute names must appear in lowercase -all attribute values must be quoted

In what order does the border style shorthand go (CSS)?

It goes *size, color, style* ex. p { ----border: 1px red solid; }

What is JSON? (JavaScript)

It's JavaScript Object Notation basically it's key value pairs. In JSON *keys in key-value pairs must be strings* ex. { "name":"John" } In JSON, values must be one of the following data types: --a string --a number --an object (JSON object) --an array --a boolean --null But most of this is handled by jQuery's AJAX function.

What is a property in JavaScript? (JavaScript)

It's simply *a variable/field that is attached to an object*, can be accessed using dot notation or named like so: ex. myCar['make'] = 'Ford';

What is FOUC and what causes it? (HTML)

It's when a browser loads the HTML without style. This happens when your stylesheets aren't in the head of the HTML document. Basically when your browser receives a packet over the internet it reads all the stuff in the head like CSS, retrieves all the stuff it needs from the web server you've requested, and then makes the webpage with the necessary style. Unless the stylesheet is in the head it can't do that, it'll make the request as soon as it gets to the line your stylesheet resides.

What's the difference between margin and padding? (CSS)

Margins are the space outside or around something. Padding is the space inside something. Basically, margins are considered to be outside of the element, and margins of adjacent items will overlap. Padding is considered to be a part of the element itself.

What's the difference between full standards mode, almost standards mode and quirks mode? (HTML)

Quirks mode: Useful for displaying information pre WC3 standards. IE 5 and Netscape. Full Standards: Displays HTML and CSS to WC3 standards.

What is REST?

Representational State Transfer Resources ----There are high level resources, that are kinda like classes. There's varying levels of access, like if you ask for a resource you'll get back a representation of the resource, like in the form of JSON or XML. Uniform Interface ----Defines the interface between client and service ----HTTP with GET, POST, PUT, DELETE ----URIs (Uniform Resource Identifier) ----HTTP Response (status, body) Statelessness ----There is no state on the server, all requests discrete, they contain enough information to get the information they need. Client-Server ----Clients and Server are discrete, must have an interface.

Name the four types of transformations (CSS)?

Skew Rotate Scale Translate

What is event bubbling? (JavaScript)

The browser checks to see if the element that was actually clicked on has an onclick event handler registered on it in the bubbling phase, and runs it if so. Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <html> element. *This is a problem if an ancestor of the element clicked has an event listener of the same type as the element that was clicked. Due to event bubbling, both events will be triggered.* This behavior can be avoid by calling stopPropagation()Bubbling also allows us to take advantage of event delegation — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have the effect of the event listener bubble to each child, rather than having to set the event listener on every child individually..

What is the difference between: *function Person(){};* *var person = Person();* and *var person = new Person();*

The first declares a function (but does not execute it). -------- *The second sets a variable person equal to the return value of the Person function.* It's easier to think of this if the function is mathematic like var area = square(5) where area is set equal to 25 -------- *The third creates a new object person based of the Person() function.*

What is the ternary operator?

The ternary or conditional operator is a small bit of syntax that tests a condition and returns one value/expression if it is true, and another if it is false *( condition ) ? run this code : run this code instead*

What is z-index and how does stacking work in CSS? (CSS)

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

What is the difference between classes and IDs in CSS? (CSS)

There are differing levels of DRYness. IDs are generally used for one of a kind elements whereas classes are used to style similar elements.

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

What is the problem:

What is wrong with this piece of JavaScript: *function foo(){ /code / }( 1 )* ? Why doesn't it work as an Immediately invoked function expression? How can we fix it?

While parens placed after an expression indicate that the expression is a function to be invoked, parens placed after a statement are totally separate from the preceding statment, and are simply a grouping operator (used as a means to control precedence of evaluation). The given piece of code is viewed as a statement, not an expression.

What is XML? (HTML)

XML stands for eXtensible Markup Language. XML was designed to store and transport data. It's similar to JSON.

How do you group CSS properties (CSS)?

You can give a group of *selectors* the same value by comma separating them. h2, .thisOtherClass, .yetAnotherClass { ----color: red; }

What is a typical use case for an anonymous function?

You generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked: ex. var myButton = document.querySelector('button'); myButton.onclick = function() { ----alert('hello'); }

How do you make a transition with CSS?

a:link { transition: all .5s linear 0; color: hsl(36,50%,50%); }

A note on block level elements, a block level element fits the entire width of its containing box, with an effective line break before and after it. So be sure to set the width of the biggest block element/container (CSS)

n/a

How would you capitalize the first letter of a piece of text? (CSS)

text-transform: capitalize