Front End Interview Questions¶

General¶

Techniques to increase website performance?¶

Decrease the amount of HTTP requests

Ensure animations are optimized at 60fps

Lazy Loading

Evaluate network profiler to see where delays are occuring

Compress images

What are some SEO best practises?¶

Ensure that your keyword is is mentioned early in the document as words at the top of a page are weighted more

Use unique titles, descriptions and content and avoid duplicate content

Start your title tag with your main keyword

Increase loading speed

Optimize images by using appropriate names and alt text

Explain what ARIA and screenreaders are, and how to make a website accessible.¶

Explain some of the pros and cons for CSS animations versus JavaScript animations.¶

What does CORS stand for and what issue does it address?¶

Cross Origin Resource Sharing. This allows for resources to be shared or not shared with domains that are outside the of the domain from which the resource is shared

Explain the difference between cookies, session storage, and local storage?¶

Session Storage is storage which is available for the duration of the browser session and is lost if the tab or window is closed. It WILL persist through a reload. Typically cookies are used to store identifying tokens for authentication, session and advertising tracking. They are sent to the server on every network request to the same domain. Local storage persists until it is explicitly deleted and can store up to 5MB of data

HTML¶

What does a doctype do?¶

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

What kind of things must you be wary of when designing or developing for multilingual sites?¶

What are data- attributes good for?¶

Consider HTML5 as an open web platform. What are the building blocks of HTML5?¶

Describe the difference between <script>, <script async> and <script defer>.¶

Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?¶

What is progressive rendering?¶

Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.¶

Have you used different HTML templating languages before?¶

CSS¶

What is CSS selector specificity and how does it work?¶

What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?¶

Describe Floats and how they work.¶

Describe z-index and how stacking context is formed.¶

Describe BFC (Block Formatting Context) and how it works.¶

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

How would you approach fixing browser-specific styling issues?¶

How do you serve your pages for feature-constrained browsers?¶

What techniques/processes do you use?¶

What are the different ways to visually hide content (and make it available only for screen readers)?¶

Have you ever used a grid system, and if so, what do you prefer?¶

Have you used or implemented media queries or mobile specific layouts/CSS?¶

Are you familiar with styling SVG?¶

Can you give an example of an @media property other than screen?¶

What are some of the “gotchas” for writing efficient CSS?¶

What are the advantages/disadvantages of using CSS preprocessors?¶

Describe what you like and dislike about the CSS preprocessors you have used.¶

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

Explain how a browser determines what elements match a CSS selector.¶

Describe pseudo-elements and discuss what they are used for.¶

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.¶

What does * { box-sizing: border-box; } do? What are its advantages?¶

What is the CSS display property and can you give a few examples of its use?¶

What’s the difference between inline and inline-block?¶

What’s the difference between the “nth-of-type()” and “nth-child()” selectors?¶

What’s the difference between a relative, fixed, absolute and statically positioned element?¶

What existing CSS frameworks have you used locally, or in production? How would you change/improve them?¶

Have you used CSS Grid?¶

Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?¶

Have you ever worked with retina graphics? If so, when and what techniques did you use?¶

Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?¶

How is clearfix css property useful?¶

Javascript¶

Explain event delegation.¶

Event delegation has to do with the bubbling of event occurences from a child up to parent elements. Using this, you can create one parent which handles all of the event triggers for it’s child.

Explain how this works in JavaScript.¶

The this keyword in javascript is used to represent the current object that is executing the function A regular function when invoked will create a new execution context, however its ‘this’ variable will look up to the global object. A object function will have a ‘this’ variable referring to it’s parent, which is the object you are within.

Can you give an example of one of the ways that working with this has changed in ES6?¶

In ES6, they introduced arrow functions which offer a new way to declare a function. Using arrow function will automatically bind the function to the ‘this’ of the global execution context

Explain how prototypal inheritance works.¶

Prototypal inheritance works on the idea that objects inherit from other objects. For example, if you created a new object (using the ‘new’ keyword) and had a function for it which is a constructor, it will initialize according the data in the constructor. If you want to add properties or methods which can later be executed on this object you will need to add them to the object prototype. All JS objects inherit properties and methods from it’s prototype

What’s the difference between a variable that is: null, undefined or undeclared?¶

null: an assigned value to a property undefined: a variable that has been declared but not assigned a value undeclared: a variable that was not declared with a variable declaration (let, var, const). This will throw an error if you are using strict mode. If you are not, it will create the variable on the global object.

How would you go about checking for any of these states?¶

You can check null with: obj === null You can check undefined with typeof(obj) === undefined You can check undeclared …

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

Closure is a function with preserved data Any function where you use variables from outside the function is a closure. A function which returns a function can be called with a specific value and assigned to a variable. This variable can later be invoked and pass it’s own paramaters whenever it needs too.

var updateClickCount=(function(){

var counter=0;

return function(){

++counter; // do something with counter

}

})();

In this example, the IIFE is ran one time automatically. It will set counter to zero and will set updateClickCount to the nested function. You can then use this nested function at any time to increment the counter.

What language constructions do you use for iterating over object properties and array items?¶

Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?¶

forEach: iterates over an array and applies some operation to each element of the list. map: iterates over the list and transforms each member of the list, and returns a new list of the same size with the transformed elements.

What’s a typical use case for anonymous functions?¶

A typical use case could be the convienence of doing callbacks as you can simply pass the function as a paramater. Anonymous function is a function expression

What’s the difference between host objects and native objects?¶

Host object - Objects provided by the environment like window, browser, document Native object - Objects provided my ECMAScript which is defined in the specification, such as Array or String

Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?¶

Person(){} is a function decleration var person = Person() returns the value of the function and sets it to the person variable var person = new Person() creates a new person object using the person function as a constructor

Explain the differences on the usage of foo between function foo() {} and var foo = function() {}¶

function foo() {} is a function decleration var foo = function() {} is a function expression which assigns the function to foo. It can then be invoked with foo()

Function declerations are hoisted into memory with all the containing code during compiling. Function expressions are not hoisted and cannt be called before they are declared.

Can you explain what Function.call and Function.apply do? What’s the notable difference between the two?¶

Both of these functions, along with .bind set the ‘this’ variable for it’s context. Call takes a list of arguments and apply takes an array with a list

Explain Function.prototype.bind.¶

bind is used to set the ‘this’ variable for function

What’s the difference between feature detection, feature inference, and using the UA string?¶

Explain “hoisting”.¶

Hoisting is something that Javascript does when compiling code with regards to functions and variables. Functions will be hoisted into memory with all its code, and can be called before they are written, physically in the code. Variables will be hoisted into memory however the value will be unknown and will be set to undefined

Describe event bubbling.¶

Event bubbling is commonly seen as event actions or handlers are triggered, and the action is then bubbled up to its parent elements

Describe event capturing.¶

What’s the difference between an “attribute” and a “property”?¶

What are the pros and cons of extending built-in JavaScript objects?¶

Pro’s it can add additional functionality that may be useful to specific applications Con’s outweighs the Pro’s, you should not extend built in JS objects. This can cause conflict resulting in bad errors. The built in objects are designed to work with the functionality they have implmented and adding more can cause the others to break

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

== compares the value, JS is dynamically typed meaning that “2” would coerice to 2 and “2” == 2 would return true === compaes the value and type, restricting coercion

Explain the same-origin policy with regards to JavaScript.¶

Why is it called a Ternary operator, what does the word “Ternary” indicate?¶

A three operand operator that is often used as a shorthand if statement. condition ? truthy : falsy

What is strict mode? What are some of the advantages/disadvantages of using it?¶

What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?¶

What tools and techniques do you use debugging JavaScript code?¶

Explain the difference between mutable and immutable objects.¶

In JS, immutable objects cannot be altered after their creation, where mutable objects can.

What is an example of an immutable object in JavaScript?¶

An example of immutability in JS is Numbers or Strings

What are the pros and cons of immutability?¶

immutable values cannot be modified after creation
To modify them you copy and modify the copy

How can you achieve immutability in your own code?¶

Explain the difference between synchronous and asynchronous functions.¶

What is event loop?¶

What is the difference between call stack and task queue?¶

What are the differences between variables created using let, var or const?¶

let - variable only available within the scope that it is defined var - variable available globally const - variable that is cannot be reassigned - it can be mutated, ex. a const arr can still push objects to it (mutate)

What are the differences between ES6 class and ES5 function constructors?¶

Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?¶

What advantage is there for using the arrow syntax for a method in a constructor?¶

Using an arrow function for a method in a constructor will assign the ‘this’ variable of the function to the global object (window).

What is the definition of a higher-order function?¶

Can you give an example for destructuring an object or an array?¶

Can you give an example of generating a string with ES6 Template Literals?¶

ES6 Template Literals allow for string with embedded js expressions. You can also make them multi line strings. These are created using backticks

string text ${expression} string text

Can you give an example of a curry function and why this syntax offers an advantage?¶

What are the benefits of using spread syntax and how is it different from rest syntax?¶

Why you might want to create static class members?¶

What is the difference between while and do-while loops in JavaScript?¶

While loops execute the condition before the statement. Do-While loops execute the statement before the condition, meaning that the statement will run atleast 1 time

Testing¶

What are some advantages/disadvantages to testing your code?¶

What tools would you use to test your code’s functionality?¶

What is the difference between a unit test and a functional/integration test?¶

What is the purpose of a code style linting tool?¶

What are some of the testing best practices?¶

Performance¶

What tools would you use to find a performance bug in your code?¶

What are some ways you may improve your website’s scrolling performance?¶

Explain the difference between layout, painting and compositing.¶

Network¶

Traditionally, why has it been better to serve site assets from multiple domains?¶

Do your best to describe the process from the time you type in a website’s URL to it finishing loading on your screen.¶

What are the differences between Long-Polling, Websockets and Server-Sent Events?¶

Explain the following request and response headers:¶

Diff. between Expires, Date, Age and If-Modified-…

Do Not Track

Cache-Control

Transfer-Encoding

ETag

X-Frame-Options