Diagnostic Interview for Sr Phase Students

Diagnostic-Mock-Interview.md

Diagnostic Mock Interview -- Early Senior Phase

Topics

The following is a template for a 30-minute interview, meant to cover a variety of topics:

• CSS
• JS Fundamentals (scope, closure, callbacks)
• Algorithmic Problem Solving
• Web Dev Industry Practices

Question 1

CSS (8 mins)

Given the following HTML / CSS, add a few lines of CSS to center the #circle div both horizontally and vertically in the viewport (not the parent container). You may not use flexbox.

<div id="container">
  <div id="circle">
  
  </div>
</div>

#container {
  position: absolute;
  width: 500px;
  height: 400px;
  background-color: cyan;
}

#circle {
  border-radius: 50%;
  background-color: red;
  width: 100px;
  height: 100px;
   /*
     Add CSS Here...
   */
}

Solution

#circle {
  border-radius: 50%;
  background-color: red;
  width: 100px;
  height: 100px;
  position: fixed;
  left: calc(50vw - 50px);
  top: calc(50vh - 50px);
}

Question 2

JS Fundamentals (10 mins)

Create a function throttle that takes a callback function as an argument. throttle returns a new version of the callback func that can only successfully be invoked once 800ms has elapsed since it was last successfully executed.

Solution

const throttle = (func) => {
  let time = Date.now() - 800;
  let res
  return function(...args){
    if(Date.now() - time >= 800){
      let res = func(...args)
      time = Date.now()
      return res
    } else {
      return res
    }
  }
}

Question 3

Algorithmic Problem Solving (7 mins)

Create a function isPalindrome that takes a string, and returns a Boolean. The function should return true if the string is a palindrome (i.e, spelled the same forwards and backwards) and false if it isn't. You may not use any loops to solve this problem.

Solution

const isPalindrome = str => {
  if(str.length <= 1) return true
  if(str.charAt(0) != str.charAt(str.length - 1)) return false;
  else return isPalindrome(str.slice(1, str.length - 1));
}

Question 4

Web Development Industry Practices (5 mins)

Compare and constrast React with another front-end library or framework of your choice (e.g, Angular, jQuery, Elm, Vue.js, MVC, etc.)

NB: It's okay if you haven't tried out alternative technologies, but you should be able to speak to React's comparative strengths and weaknesses

Topics to consider:

• Virtual DOM
• One-way data flow
• Component Architecture
• Developer Workflow
• Performance tradeoffs

Solution

"React is a library developed by Facebook used for developing client-side applications. Unlike other front-end frameworks like Angular, Backbone, or Ember, React doesn't employ the classic Model View Controller design pattern. Like with other MVC frameworks, React developers will write one or several Components to make up their application's UI. Specific to React, Components may be written using class syntax (preferable if that piece of the UI requires it's own state) as well as JS functions (preferable if these components are presentational in nature). These components are often nested within one another in a tree-like structure, referred to as the Virtual DOM. This allows developers to take a modular, declarative approach to structuring their application. Elements of a Component's state may be passed down to a child component as a property of that child. This one-way data flow is a key part of React's speedy performance, especially when compared to other frameworks that employ two-way data binding such as Angular. Most React workflows involve transpiling the client-side code into a unified/minified bundle, allowing for a light-weight front-end with minimal dependencies, especially in comparison to bulkier libraries such as jQuery."