Skip to content

Instantly share code, notes, and snippets.

@SamanthaLFreeman

SamanthaLFreeman/frontendInterviewQuestions.md

Last active January 3, 2020 21:42
Show Gist options
  • Save SamanthaLFreeman/5aadc21974a1f60da96f3c750d3914a6 to your computer and use it in GitHub Desktop.
Save SamanthaLFreeman/5aadc21974a1f60da96f3c750d3914a6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
frontendInterviewQuestions.md

HTML

  • What does a doctype do?

    • The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

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

    • If your document is HTML (ie. served as text/html), use the lang attribute to set the language of the document or a range of text.

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

    • Machine translation, no culture awareness, SEO not localized, special characters, dates

  • What are data- attributes good for?

    • The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.
    • Before JavaScript frameworks became popular, front end developers used data- attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

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

    • Semantics: allowing you to describe more precisely what your content is.
    • Connectivity: allowing you to communicate with the server in new and innovative ways.
    • Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
    • Multimedia: making video and audio first-class citizens in the Open Web.
    • 2D/3D graphics and effects: allowing a much more diverse range of presentation options.
    • Performance and integration: providing greater speed optimization and better usage of computer hardware.
    • Device access: allowing for the usage of various input and output devices.
    • Styling: letting authors write more sophisticated themes.

  • Describe the difference between a cookie, sessionStorage and localStorage.

    • LocalStorage

    • Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data

    • Storage limit is the maximum amongst the three

    • SessionStorage

    • The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.

    • Data is never transferred to the server.

    • Storage limit is larger than a cookie (at least 5MB).

    • Cookie

    • Stores data that has to be sent back to the server with subsequent requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side (normally from server-side).

    • Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side.

    • Size must be less than 4KB.

    • Cookies can be made secure by setting the httpOnly flag as true for that cookie. This prevents client-side access to that cookie

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

    • <script> - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
    • <script async> - The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes). Use async when the script is independent of any other scripts on the page, for example analytics.
    • <script defer> - The script will be fetched in parallel to HTML parsing and executed when the page has finished parsing. If there are multiple of them, each deferred script is executed in the order they were encoun­tered in the document. If a script relies on a fully-parsed DOM, the defer attribute will be useful in ensuring that the HTML is fully parsed before executing. There's not much difference from putting a normal <script> at the end of . A deferred script must not contain document.write.

  • 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?

    • Placing s in the — Putting s in the head is part of the specification. Besides that, placing at the top allows the page to render progressively which improves user experience. The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is stuck viewing a blank white page. It prevents the flash of unstyled contents.
    • Placing s just before — <script>s block HTML parsing while they are being downloaded and executed. Downloading the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
    • An exception for positioning of <script>s at the bottom is when your script contains document.write(), but these days it's not a good practice to use document.write(). Also, placing <script>s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. One possible workaround is to put <script>in the and use the defer attribute.

  • What is progressive rendering?

    • Progressive rendering is the name given to techniques used to improve performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.
    • It used to be much more prevalent in the days before broadband internet but it is still useful in modern development as mobile data connections are becoming increasingly popular (and unreliable)!

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?

JavaScript

  • Explain event delegation.
  • Explain how this works in JavaScript.
    • Can you give an example of one of the ways that working with this has changed in ES6?
  • Explain how prototypal inheritance works.
  • What's the difference between a variable that is: null, undefined or undeclared?
    • How would you go about checking for any of these states?
  • What is a closure, and how/why would you use one?
  • 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?
  • What's a typical use case for anonymous functions?
  • What's the difference between host objects and native objects?
  • Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?
  • Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
  • Can you explain what Function.call and Function.apply do? What's the notable difference between the two?
  • Explain Function.prototype.bind.
  • What's the difference between feature detection, feature inference, and using the UA string?
  • Explain "hoisting".
  • Describe event bubbling.
  • 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?
  • What is the difference between == and ===?
  • Explain the same-origin policy with regards to JavaScript.
  • Why is it called a Ternary operator, what does the word "Ternary" indicate?
  • 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.
    • What is an example of an immutable object in JavaScript?
    • What are the pros and cons of immutability?
    • 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?
  • 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?
  • 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?
  • 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?
  • How can you share code between files?
  • Why you might want to create static class members?
  • What is the difference between while and do-while loops in JavaScript?

Coding

  • Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5
  • What will be returned by each of these?
console.log("hello" || "world")
console.log("foo" && "bar")
  • Write an immediately invoked function expression (IIFE)

Question: What is the value of foo?

var foo = 10 + '20'; Question: What will be the output of the code below?

console.log(0.1 + 0.2 == 0.3); Question: How would you make this work?

add(2, 5); // 7 add(2)(5); // 7 Question: What value is returned from the following statement?

"i'm a lasagna hog".split("").reverse().join(""); Question: What is the value of window.foo?

( window.foo || ( window.foo = "bar" ) ); Question: What is the outcome of the two alerts below?

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); Question: What is the value of foo.length?

var foo = []; foo.push(1); foo.push(2); Question: What is the value of foo.x?

var foo = {n: 1}; var bar = foo; foo.x = foo = {n: 2}; Question: What does the following code print?

console.log('one'); setTimeout(function() { console.log('two'); }, 0); Promise.resolve().then(function() { console.log('three'); }) console.log('four'); Question: What is the difference between these four promises?

doSomething().then(function () { return doSomethingElse(); });

doSomething().then(function () { doSomethingElse(); });

doSomething().then(doSomethingElse());

doSomething().then(doSomethingElse); Question: What will the code below output to the console and why?

(function(){ var a = b = 3; })();

console.log("a defined? " + (typeof a !== 'undefined')); console.log("b defined? " + (typeof b !== 'undefined')); Question: Consider the two functions below. Will they both return the same thing? Why or why not?

function foo1() { return { bar: "hello" }; }

function foo2() { return { bar: "hello" }; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment