senior-frontend-developer-test-answers.md

Javascript / Senior Front-end Developer

Interview Test

Share your answers as Markdown through Gist and include code as Markdown code blocks. No worries, there is more than one way to answer the questions 👍

Q1

Write a function (without using external libraries) in ES6 that converts the user entered date formatted as M/D/YYYY to the format YYYYMMDD which is required by an API endpoint. It should convert ”12/31/2016” to ”20161231” for example. Furthermore, it should validate that the passed date is formatted correctly using a Regular Expression (let's assume all months have 31 days). Write unit tests for your convert function using the syntax of a BDD-style test framework of your choice.

mocha.setup('bdd');
const expect = chai.expect;

const convertDate = ((dateStr) => {
  const validFormat = /^[1-12]+\/[1-31]+\/\d{4}$/;
  
  if (!validFormat.test(dateStr)) {
    return 'Invalid date';
  }
  
  let [month, day, year] = dateStr.split("/");
  
  return `${year}${month}${day}`;
});

describe('convertDate', () => {  
  it('should validate that the passed date is formatted correctly', () => {
    let date = '';
    
    let result = convertDate(date);
    
    expect(result).to.equal('Invalid date');
  });
  
  it('should convert the user entered date formatted as M/D/YYYY to YYYYMMDD', () => {
    let date = '12/31/2016';
    
    let result = convertDate(date);
    
    expect(result).to.equal('20161231');
  });
});

mocha.run();

(live example on CodePen: http://codepen.io/cfleschhut/pen/OXgavR)

Q2

What are the pros and cons of using Promises instead of callbacks?

Pros:

• In complex asynchronous code – think a series of multiple Ajax-calls that depend on each other – promises can mitigate the effect of having to create deeply nested callbacks (the so-called “pyramid of doom” or “callback hell”) and thereby make asynchronous code more easy to read and manage.
• Rather than passing a function that represents the next step (a callback), promises invert control and return an object that represents the future state. This allows code to maintain control over the flow of execution. Code appears to flow linearly by chaining .then(foo).then(bar) calls.

Cons:

• Targeting browsers/environments with incomplete support of the official promises API specification (IE < Edge, Node < v4) requires usage of a promise library (like Q or bluebird) or polyfill.

Q3

What is the difference between responsive design and adaptive design?

• Adaptive: Layout container components have a predefined fixed width that adapts to various browser viewport sizes. The most well-known example of a CSS framework providing an adaptive layout by default is Bootstrap (from medium/tablet viewport size upwards and without using the .container-fluid classname). Adaptive layouts can be seen as a subset of responsive design.
• Responsive: All layout components are fully fluid and have no pixel-based fixed widths applied. Components widths are specified in relative units (em, rem or %). One commonly-used fully responsive CSS framework is Zurb Foundation.

Q4

Explain the difference between layout, painting and compositing.

Shipping a frame to the browser screen (the “pixels-to-screen pipeline”) generally follows the order of JavaScript > Style > Layout > Paint > Composite that each influence the rendering performance of a page, for example fast scrolling and smooth animations. First the JavaScript runs, then style calculations, then layout.

• Layout: Once the browser knows which rules apply to an element it can begin to calculate how much space it takes up and where it is on screen. Layout is where the browser figures out the geometric information for elements: their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element.
• Paint: Painting is the process of filling in pixels. It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements. Drawing is typically done onto multiple layers.
• Composite: Since the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly.