Front-end developer interview questions

Since picking up some contract work for time to time, I get asked quite a lot of different questions in interviews. In the moment I’m really rubbish at answering “techy” questions. I think it’s just a hard thing to explain in person/words. When I don’t know an answer, or just have a massive fail in explaining it, I write the question down and find out more about it. So next time I can give a better answer.

Here’s some topics that came up and the resources that helped lately…

Table of contents

General

What is the difference between a framework and a library?

The key difference between a library and a framework is “Inversion of Control”. When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you

What purpose do Work Workers serve and what are some of their benefits?

Web Workers are background scripts that do not interfere with the user interface or user interactions on a webpage, allowing HTML to render uninterrupted while JavaScript works in the background.

Describe the difference between cookies, sessionStorage, and localstorage

Cookies are small text files that websites place in a browser for tracking or login purposes. Meanwhile, localstorage and sessionStorage are new objects, both of which are storage specifications but vary in scope and duration. Of the two, localstorage is permanent and website-specific whereas sessionStorage only lasts as long as the duration of the longest open tab.


CSS

What are the advantages/disadvantages of using CSS preprocessors?

Describe pseudo-elements and discuss what they are used for

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

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

Elements with display: inline-block are like display: inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.

Have you played around with the new CSS Flexbox or Grid specs?

Flexbox or Flexible boxes, is a new layout mode in CSS3 Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents.

Grid specs CSS Grid Layout is a specification for creating two-dimensional grids Grid is a companion to the Flexible Box Module (flexbox). Flexbox is designed for one-dimensional layout, so things can be arranged in an unbroken line. Grid is designed for two-dimensional layout, meaning the items don’t need to sit next to each other. In the future we’re likely to use both: Grid Layout for main page areas, and flexbox for the smaller UI elements it excels with.

What’s the difference between a @mixin and a @extend in SCSS?

@mixin: A mixin lets you make groups of CSS declarations that you want to reuse throughout your site

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

@extend directive provides a simple way to allow a selector to inherit/extend the styles of another one.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

%placeholder are classes that aren’t output when your SCSS is compiled

%awesome {
    width: 100%;
    height: 100%;
}
body {
    @extend %awesome;
}
p {
    @extend %awesome;
}

Output

body, p {
    width: 100%;
    height: 100%;
}

Note: Extends produce more compact CSS than mixins do, but this benefit is diminished when CSS is gzipped. If your server serves gzipped CSS (it really should!), then extends give you almost no benefit. So you can always use mixins! - https://www.sitepoint.com/sass-extend-nobody-told-you/


Html

What are semantic and non-semantic elements?

A semantic element clearly describes its meaning to both the browser and the developer.

non-semantic elements: <div> and <span> - Tells nothing about its content. semantic elements: <form>, <table>, and <article> - Clearly defines its content.

What are data- attributes good for?

The HTML5 data attribute lets you assign custom data to an element. When we want to store more information/data about the element when no suitable HTML5 element or attribute exists.

Have you used different HTML templating languages before? And what did you like about them?

What experience do you have with web accessibility?


JavaScript

Asynchronous vs synchronous

“When you execute something synchronously, you wait for it to finish before moving on to another task. When you execute something asynchronously, you can move on to another task before it finishes.” - Adam Robinson

// Synchronous
console.log('Hello');
console.log('World');

// Hello
// World
// Asynchronous
setTimeout(() => {
    console.log("World");
}, 1000);
console.log("Hello");

// Hello
    // Wait a second....
// World

Reference: Adam Robinson on stackoverflow

What is an IIFE?

An IIFE protects a module’s scope from the environment in which it is placed. - James Padolsey

An IIFE or Immediately Invoked Function Expression, is a common JavaScript design pattern used by most popular libraries (jQuery, Backbone.js, Modernizr, etc) to place all library code inside of a local scope.

() => {
  const greeting = "Hello World";
}
console.log(greeting);

// greeting is not defined

Reference:

What is CORS?

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated. - Wikipedia

CORS or Cross Origin Resource Sharing is a W3C spec that allows cross-domain communication from the browser.

When Site A tries to fetch content from Site B, Site B can send an Access-Control-Allow-Origin response header to tell the browser that the content of this page is accessible to certain origins. (An origin is a domain, plus a scheme and port number.) By default, Site B’s pages are not accessible to any other origin; using the Access-Control-Allow-Origin header opens a door for cross-origin access by specific requesting origins.

For each resource/page that Site B wants to make accessible to Site A, Site B should serve its pages with the response header:

Access-Control-Allow-Origin: http://siteA.com

Modern browsers will not block cross-domain requests outright. If Site A requests a page from Site B, the browser will actually fetch the requested page on the network level and check if the response headers list Site A as a permitted requester domain. If Site B has not indicated that Site A is allowed to access this page, the browser will trigger the XMLHttpRequest’s error event and deny the response data to the requesting JavaScript code.

References:


Functional Programming: is a programming paradigm—a style of building the structure and elements of computer programs—that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. - wikipedia

Object-oriented programming (OOP) is a programming language model organized around objects rather than “actions” and data rather than logic. Historically, a program has been viewed as a logical procedure that takes input data, processes it, and produces output data.

Other common programming paradigms include:

Isomorphic and Universal

They are basically names for the same thing… but one is better than the other.

Isomorphic describes the relationship the form of code but not the “underlying ideas and philosophy.” Universal is perfered as it better describes the relationship to how code is executed both on the server and client.

Reference: