The Definitive “Front-End Developer Job Interview Questions” And My Answers

// Stored as Json
var dataToStore = JSON.stringify(data);
localStorage.setItem('someData', dataToStore);
// Retrieve
var localData = JSON.parse(localStorage.getItem('someData'));

I made a pen exploring localStorage:

Deferred Execution: script defer
Delays script execution until the HTML parser has finished. A positive effect of this attribute is that the DOM will be available for your script. However, since not every browser supports defer yet, can’t rely on it.

Asynchronous Execution: script async
HTML parsing may continue and the script will be executed as soon as it’s ready.

However, modern browsers have implemented ‘speculative parsing’ – where the browser ‘looks ahead’ in the HTML and begins downloading resources before scripts download and execute. (reference)

34) What is progressive rendering?
It is rendering the data as it’s being downloaded. This is particularly useful on documents that have tons of text. You can see it on a page that has a lot of text – and where the scrollbar will get shorter in length as more data comes in – increasing the vertical size of the document – yet, it would display the downloaded text immediately. As more data came down the pipe – the page would get longer. This didn’t rely on the closing body or html tag – and it certainly wouldn’t render the entire page on the server – then download – which is a standard complaint about modern frameworks. But there is a technique called “Flushing the Buffer” that can be implemented on the server. I don’t know that much about the technique, but found a few resources discussing it. Ref 1 Ref 2

CSS Questions:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.screen-reader-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

// Additional Stylesheet

// Unrecognized Characters and 'End of Line /9' Hack.
// There are so many similar IE hacks like this
// Check Paul Irish's link below for the definitive list (2009)
.lte-ie8 .name {
  color: green; /* IE8 and older */
  *color: blue; /* IE7 and older */
  _color: red; /* IE6 and older */
}
#name { color: blue\9; } 

Paul Irish has an extensive list to refer to when and if these types of issues arise. Also to note, earlier I discussed using ‘normalize’ over ‘css reset’ – part of that reason is because it addresses many of the cross browser form element quirks you will find.

.hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important; 
  width: 1px !important; 
  overflow: hidden;
}

@media print{
 a:after{content:" (" attr(href) ") ";
 font-size:0.8em;
 font-weight:normal;
}

Recently while building an application for Progressive Insurance it was expected that a user would be able to print the results of their schedule sorting. The requirements weren’t too challenging, the application opened a new window with table data that called a separate stylesheet.
Here is a codepen:

Post-­proces­sors have to be implicit to silently improve CSS (prefixes, fall­backs, etc.) and pre-­processors have to be explicit (use its own language) to gen­er­ate CSS. (Ref – comment #1)

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Which gives you the flexibility to say “Everything should be box-sizing: border-box but if I set this somewhere to box-sizing: content-box, there is a good reason and I would like the descendants to keep that style.” Here is my pen:

display: contents;
display: list-item;
display: inline-list-item;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container ;
display: run-in;

/* Global values */
display: inherit;
display: initial;
display: unset;

So, what is a ‘ruby’ display property? ruby annotations are for showing pronunciation of East Asian characters. I made a pen exploring the magic of ruby.

You can use cascading to your advantage by doing something as simple as this. You are now set up for flexible, web-safe, font variety for much of your blog:

body { font-size:100%; line-height:1.125em; }
h1   { font: 1.5em Georgia; }
p    { font: 1em Palatino; }

I feel like I’ve been doing this so long, that it’s hard to put into words. It’s just understood. That said, we have all run into a “wtf” moment when you really need to dig into devtools to see why a thing is doing what you think it shouldn’t.

I just wanted to add one more part to this question. How is the CSS inheritance calculated?
Specified value: The user agent determines whether the value of the property comes from a style sheet, is inherited or should take its initial value.
Computed value: The specified value is resolved to a computed value and exists even when a property doesn’t apply. The document doesn’t have to be laid out for the computed value to be determined.
Used value: The used value takes the computed value and resolves any dependencies that can only be calculated after the document has been laid out (like percentages).
Actual value: This is the value used for the final rendering, after any approximations have been applied (for example, converting a decimal to an integer). Ref: Smashing Mag

	
	

// But a real world situation for a fashionable site that 
// wants to deliver the cutting edge image formate (webP) but has strict 
// requirements to deliver the perfect size - will look more like this:

	
	
	
	
	
	
	

So all in all, it’s pretty hairy. There is lots of markup and future maintenance – but I admit it is the best solution I have seen so far and I appreciate all the effort that has been put into it.

JS Questions:

// HTML







 	
Item 1






 	
Item 2







//JS document.getElementById("parent-ul").addEventListener("click", function(e) { if(e.target) { console.log("Clicked on: ", e.target.id); } });

var c = {
    name: "c obj",
    log: function() {
        console.log(this); // Logs as 'Object' with name, etc
        this.name = "Updated c obj";
        console.log(this); // METHODS 'mutate' the object that I am contained in
        var setname = function(newname){
            this.name = newname; // This ODDLY attaches back to the WINDOW object - JS bug?
        }
        setname("Updated c once more!");
        console.log(this); // Output: "Updated c obj" again due to bug
        console.log(window.name); // Output: "Updated once more!"
    }
}
c.log();
//Rewritten to reference correct this
var d = {
    name: "d obj",
    log: function() {
        // To avoid the bug, we can set the this to self
        // as the first line of the object method and reference that instead
        var self = this;
        console.log(self); 
        self.name = "Updated d obj";
        console.log(self); 
        var setname = function(newname){
            self.name = newname; 
        }
        setname("Updated d once more!");
        console.log(self);
    }
}
d.log();

function Person(fn, ln) {
 this.fn = fn;
 this.ln = ln;
}
var peter = new Person("Peter", "Dillon");
Person.prototype.getFullName = function() {
 return this.fn + " " + this.ln;
}
console.log(peter.getFullName());

Rather than wasting memory space attaching the method to every instance of Person(), now anytime an instance of Person() needs that method they can just call the prototype method.

var Module = (function() {
  var privateMethod = function(num) {
    var num;
        num = num;
    alert(num);
  };
  return {
    func_1: function() { console.log("func 1"); },
    func_2: function() { console.log("func 2"); },
    publicMethod: function(num) {
      privateMethod(num);
    }
  }
})();

Module.func_1();
Module.func_2();
Module.publicMethod(5);
Module.privateMethod(2); 
// Output of above: Uncaught TypeError: Module.privateMethod is not a function
// Inaccessible - it's private!

$.ajax({
    url: 'http://your-app.com/api/news/today',
    dataType: 'JSONp',
    success: function(data, status) {
        $.each(data, function(key, value){
            //handle the data                
        });
    },
    error: function() {
        //handle the error
    }
}

If an element has a default value, the attribute shows the default value even if the value has changed (Ref)

$('input').prop('value', '456user');
$('input').prop('value'); // returns "456user"
$('input').attr('value'); // returns "user123"

In the future, if a browser decides to implement its own version of your method, your method might get overridden (silently) in the browser’s implementation. Ref:

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.

window.onload is the built-in Javascript event, but as its implementation had subtle quirks across browsers (FF/IE6/IE8/Opera), jQuery provides document.ready, which abstracts those away, and fires as soon as the page’s DOM is ready (doesn’t wait for images etc.).

$(document).ready (note that it’s not document.ready, which is undefined) is a jQuery function, wrapping and providing consistency to the following events:
document.ondomcontentready / document.ondomcontentloaded – a newish event which fires when the document’s DOM is loaded (which may be some time before the images etc. are loaded); again, slightly different in IE and in rest of the world
and window.onload (which is implemented even in old browsers), which fires when the entire page loads (images, styles, etc.)

function duplicate(arr) {
    arr = arr.concat(arr);
    console.log(arr)
}
duplicate([1,2,3,4,5]);

for (var i = 0; i < 100; i++) {
    if (!(i % 3) && !(i % 5)) { console.log( i + " FizzBuzz") }
    else if (!(i % 3)) { console.log( i + " Fizz") }
    else if (!(i % 5)) { console.log( i + " Buzz") }
    else { console.log(i) }
};

// Simple forEach
function logArrayElements(element, index, array) {
 console.log('a[' + index + '] = ' + element);
}
[2, 5, , 9].forEach(logArrayElements);
//  Output: 
// a[0] = 2
// a[1] = 5
// a[3] = 9
// -----------------------------------
// hasOwnProperty()
var o = {
 name: "my name",
 date: "today",
 myFunc: function() { log(name + " " + date) }
}
for (prop in o) {
  if (o.hasOwnProperty(prop)) {
  console.log(prop + ": " + o[prop])
  }
}
// Output: 
// name: my name
// date: today
// myFunc: function () { log(name + " " + date) }
// -----------------------------------
// Combo
var myObj = { name : "Jim", age : 32, title : "Mr." }
Object.getOwnPropertyNames(myObj).forEach(function(val, idx, array) {
  console.log(val + ' -> ' + myObj[val]);
});
// Output:
// name -> Jim
// age -> 32
// title -> Mr.

JavaScript runtimes contain a message queue which stores a list of messages to be processed and their associated callback functions. These messages are queued in response to external events (such as a mouse being clicked or receiving the response to an HTTP request) given a callback function has been provided. If, for example a user were to click a button and no callback function was provided – no message would have been enqueued.

Testing Questions:

Performance Questions:

Screen refresh ideally happens at 60fps (frames per second.) When an animation or scroll is happening, the screen tried to put up 1 picture per frame. Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms) In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10ms. (reference)

Network Questions:

HTTP Actions

• Do Not Track
• Cache-Control
• Transfer-Encoding
• ETag
• X-Frame-Options
• What are HTTP actions? List all HTTP actions that you know, and explain them.

Coding Questions:

Rather than run, copy, paste – I will try to explain why each results in the way it does.

var foo = 10 + '20';

ANSWER: 1020 – As a result of type coersion, the compiler sees a string last and says okay make that first one a string too. Another example: boolean == integer
the boolean operand will be converted to an integer: false becomes 0, true becomes 1. Then the two values are compared.

add(2, 5); // 7
add(2)(5); // 7

Two make line 2 work: Create a function that takes the params and adds them in a nested IFFE with a return. But to make line 1 work you have to do a check to see b is defined, if not you invoke the IFFE with the second parameter. ANSWER:

function add(a,b){
        var d = function(b) { return a + b; };
        if(typeof b == 'undefined') {
            return d;
        } else {
            return d(b);
        }
    }
console.log(add(2)(3)); // 5
console.log(add(2,3)); // 5

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

It takes the string and returns it in reverse palindrome style – includes the spaces. “goh angasal a m’i”

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

This assigns the string “bar” to a global (window) variable named foo. The initial window.foo || does nothing.

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar); // Output: Hello World
})();
alert(foo + bar); // Uncaught ReferenceError: bar is not defined

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

.length starts from 1 (not 0) so output = 2.

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

undefined – the prop foo.x is never created anywhere.

console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
console.log('three');

Even though setTimeout is set to 0 – it gets pushed to the end of the line in the callstack. In testing I discovered that all of the following asynchronous IFFE’s were also processed before the setTimeout.

Fun Questions:

My Additional Questions:

• setTimeout doesn’t take into account what else is happening in the browser. The page could be hidden behind a tab, hogging your CPU when it doesn’t need to, or the animation itself could have been scrolled off the page making the update call again unnecessary. Chrome does throttle setInterval and setTimeout to 1fps in hidden tabs, but this isn’t to be relied upon for all browsers.
• setTimeout only updates the screen when it wants to, not when the computer is able to. That means your browser has to juggle redrawing the animation while redrawing the whole screen, and if your animation frame rate is not synchronized with the redrawing of your screen, it could take up more processing power. That means higher CPU usage and your computer’s fan kicking in, or draining the battery on your mobile device. Nicolas Zakas explains the impact timer resolution has on animation.

el.onclick = function() {}
el.addEventListener('click', start , false);

Inline events (line 1) may only have one inline event assigned. Inline events are stored as an attribute/property of the element, meaning that it will be overwritten by a second onclick event. addEventListener can have an unlimited succession of events fired.