Frontend interview

interview.md

Workflow:

• Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
• Какую VCS используете? Как работали в команде? PR, методологии, оценка времени
• Использовали CI?
• Как узнаете о новинках в мире JS? Какие конференции/митапы посятили за последние полгода? Какую технологию изучили недавно?

Базовые вопросы

• Как браузер отрисовывает HTML-страницу на экране? (что происходит после получения ответа от сервера)
• Что такое FOUC?
• Как можно оптимизировать загрузку внешних ресурсов на странице?

CSS:

1. Какие единицы измерения CSS использовали? какие существуют?
2. Какие инструменты используете для CSS. (препроцессоры, постпроцессоры)
3. Что такое box-sizing и чем он удобен?

JS:

1. Что будет выведено в консоль и почему?

  console.log(false == '0')
  console.log(false === '0')

2. Развернуть каждое слово в предложении Пример: "Welcome to this Javascript Guide!" должно стать "emocleW ot siht tpircsavaJ !ediuG"
3. Вернуть только уникальные элементы из массива

  var array = [1, 2, 3, 5, 1, 5, 9, 1, 2, 8];

4. Числа Харшад Числа харшад, или числа Нивена — натуральные числа, делящиеся нацело на сумму своих цифр. Таким числом является, например, 1729, так как 1729 = (1 + 7 + 2 + 9) × 91. Необходимо написать функции:

   • проверка, что число является числом харшад
   • получить заданное количество чисел харшад, начиная с указанного

5. Что будет выведено в консоль?

  for(var i=0; i<5; i++) {
    setTimeout (function() {
      console.log(i);
    }, i * 1000);
  }

6. Можно ли сделать этот код рабочим?

  var a = { id: 1 },
      b = { id: 2 };

  a + b === 3;
  b - a === 1;

7. Какой результат будет?

  var b = 5;
  b.a = ‘some string’;

  console.log(b.a);

8. Реализовать функцию curry

  function sum(a,b) { return a + b; }

  function curry(method) {
    // ...
  }

  var add2 = curry(sum, 2);
  add2(3) === 5;

9. Что будет в консоли?

  function name(a){
    var a = 1;

    console.log('Fist ' + a);

    function a() {};
    console.log('Second ' + a );
  }

  name(2);

10. Скопировать массив

  var arr = [1, 2, 3, 4, 5];

11. Расскажите про event loop в JS. Как максимально быстро вызвать функции после текущего event loop'a
12. Расскажите, что делает оператор new
13. Передать в конструктор все аргументы из функции в исходном порядке
14. Найти общий корень для двух узлов в дереве

XX. Необязательно

  // first
  100['toString']['length']

  // будет ли ошибка?
  1..z

  // third
  var a = (1,5 - 1) * 2

ES6:

1. Какими возможностями ES6 пользуетесь?
2. WeakMap / WeakSet, в чем преимущество?

React/Redux:

1. Почему React? в чем ключевая особенность?
2. Что такое Virtual DOM?
3. Какие способы оптимизации рендеринга используете?
4. Какие преимущества у stateless компонента?
5. Что использовали для тестирования?

Дополнительно:

• reflow / repaint
• Layout trashing
• Вынос в отдельный слой композиции