Front End Challenge

Challenge.md

Section 1: JavaScript Knowledge

1. Which option will be the correct results for the code below:

function waitFor(seconds) {
    const now = Date.now();
    const milliseconds = seconds * 1000;
    while((Date.now() - now ) < milliseconds){};
    console.log(`a`);
}

setTimeout(() => {
    console.log('b');
}, 1000);

setTimeout(() => {
    console.log('c');
}, 0);

waitFor(2);

setTimeout(() => {
    console.log('d');
}, 3000);

• A: c, b, a, d
• B: b, c, d, a
• C: a, b, c, d
• D: a, c, b, d

2. What's the output of the following code:

var fnList = [];
for (var i = 0; i < 5; i++) {
    fnList[i] = function () {
        return i;
    }
}

fnList.forEach(function(fn){
    fn();
});

• A: 0, 1, 2, 3, 4
• B: 1, 2, 3, 4, 5
• C: 5, 5, 5, 5, 5
• D: 4, 4, 4, 4, 4

Use promise to implement a constantly flashing traffic light.

The lights flashing order is:

• red light flashes for 2 seconds
• green light flashes for 2 seconds
• yellow light flashes for 1 seconds
• back to the red light and continue...

folk this codepen to implement

4. Which description below about let is correct:

• let defines a variable in a block scope
• let defines a variable globally
• let defines a variable locally to an entire function
• let defines a variable that can not be changed

5. Which description below about arrow function is wrong:

• it uses => to define
• when having more than one arguments, they need to be contained in ()
• when the function body is longer than one line, it should be wrapped by {}
• the this object inside the function body, is the same this object in the scope where the arrow function is called.

Section 2: Network

1. What's the difference between GET / POST request

• POST has request body, GET does not
• GET has the maximum url length restriction, post body does not have a limitation
• GET request can be cached, POST cannot
• others

2. Name four http codes and their meanings

• 200, ok
• 304, Cache
• 404, not found
• 401, Unauthorized
• 403, Forbidden
• 500, Server Error
• 503, Service Unavailable ...

3. Name solutions for cross domain issue

• postMessage
• jsonp
• server proxy
• server set CORS headers (Access-Controll-Allow-Origin)
• others

4. Explain the difference between browser local cache (200) and 304 unmodified

Section 3: CSS

1. Clear floats

Update the css for .wrapper to clear floats in this codepen

2. Flexbox

given this fixed HTML structure:

<div class="container">
  <div class="aside">Aside</div>
  <div class="main">Main</div>
</div>

implement the layout below using flexbox:

requirements:

• the size of the container is width: 100%; height: 400px
• the size of the aside is 200x200, the size needs to be fixed when page size changes
• the size of the main is height: 100%, the width needs to be responsive to page size

Fork this codepen to implement

Section 4: React

1. What is JSX

2. Functional vs class components

3. What is context

4. What is state

5. lifecycle callbacks (describe the usage of the following callbacks):

• componentDidMount()
• shouldComponentUpdate() (why it is useful for performance)
• componentWillReceiveProps() ...

6. What is a Higher-Order Component

Concretely, a higher-order component is a function that takes a component and returns a new component.

Section 5: Redux

1. What is Redux

2. What is the role for action / reducer / container / middleware

3. What is Immutability and why it is important (in Redux application)

Section 6: Challenge

A comprehensive challenge to test the candidate.