Що можуть спитати на співбесіді на позицію Frontend розробника

В даній статті зберу усі питання, які можуть пролунати на свівбесіді як Junior, Middle та Senior Frontend розробника. У якості фреймворка вибрав Angular, адже з ним більше всього досвіду.

Трішки про мій досвід

В Frontend’і я не дуже давно, проте уже достатньо часу. 2 роки тому осідлав пост Junior Frontend developer’а, потім став Middle. Та перед тим, як увійти в сферу, зафейлився приблизно на 10-15ти співбесідах, виконав близько 10ти тестових завдань, рекордне з яких містило більше 1000 строк коду. Про те, що мене там запитували, а також те, що б запитав я, які завдання б дав на лайв-кодинг, розкажу далі.

Питання

Загальні

  • Аутентифікація & авторизація
  • REST/RESTful API
  • Oauth, OpenID
  • Workers
  • CORS
  • Що відбувається, коли користувач вводить адресу сайту та завантажує його в браузері?
  • HTTP-протокол
  • RESTful API, GraphQL

JavaScript

2020

  • BigInt
  • globalThis
  • Promise.allSettled
  • Dynamic module import
  • Nullish Coalescing
  • Option chaining

Загальне

  • Як працює this, методи задання контексту (call(), apply(), bind())
  • Наслідування в JavaScript
  • Замикання
  • Мутабельність в JavaScript
  • Hoisting (підняття)
  • event bubbling
  • == === та відмінності
  • типи даних в JS
  • Відмінності Promise, async/await, (Observable при нагоді)?
  • Observable & Subject (Behaviour/Replay/Async) відмінності
  • Ітератори&генератори
  • асинхронність та event loop в JS
  • відмінності між function foo() {} і var foo = function() {}
  • ES6, що викоростовуєте
  • var, let, const та відмінності
  • стрілочні функції, відмінності від інших
  • ООП в JavaScript
  • HTML5 API
  • server-side рендеринг
  • CORS
  • State management, NgRx, Redux
  • WebSockets
  • repaint і reflow

Angular

  • async pipe
  • розумніта дурні компоненти
  • Promises & Observables
  • trackBy (for *ngFor)
  • Virtual scrolling
  • підписка на рівні шаблона, видалення підписок
  • RxJS operators
  • плюси односторонньої прив’язки
  • атрибутні і структурні директиви
  • Динамічні компоненти
  • Життєвий цикл компонента
  • Форми, валідатори
  • onPush, change detection
  • Routing, guards
  • @ViewChild & @ContentChild
  • <ng-template> <ng-container> <ng-content>
  • @Host, @HostBinding, exportAs
  • Zones
  • Dependency Injection

HTML

  • Як браузер відмальовує сторінку, reflow, repaint
  • HTML5 теги, їх семантична цінність
  • Мікроформати

CSS

  • Специфічність CSS
  • Робота з SVG
  • box-sizing
  • CSS grid, Flexbox – відмінності та особливості
  • CSS-анімації
  • Media queries, верстка для мобільних
  • Скидування CSS стилів
  • Кроссбраузерна верстка
  • @keyframes/transitions
  • selector’s weight
  • normalize/reset
  • media queries
  • em, rem, px, vw
  • floats, flex box, grid
  • CSS variables
  • SCSS
  • box-sizing: border-box
  • What is specificity? How do u calculate specificity?
  • What is shadow DOM?
  • What do you know about transition?
  • cross-browser compatibility

SEO

  • Що таке SEO та яка його роль в веб-розробці
  • Семантична верстка
  • Schema.org, OpenGraph

Задачі

  • Як скопіювати об’єкт
  • Як порівняти два об’єкти
  • Відмінності між null і undefined
  • Масив з унікальними значеннями
  • Зміна значення елементу в масиві
  • Трансформація масиву без map
  • Об’єднання декількох масивів в один
  • Перетин масивів
  • Сумування усіх значень в масиві

Реалізуйте

  • Функція duplicate([1,2,3,4,5]), що виведе [1,2,3,4,5,1,2,3,4,5]
  • isPrime
  • factorial
  • fibonacci
  • filter
  • reduce
  • reverse
  • indexOf
  • debounce
  • Promise/Promise.all

Питання на знання “особливостей” JS

  • 'foo' + + 'bar' // -> 'fooNaN'
  • 'b' + 'a' + + 'a' + 'a' // baNaNa
  • Number.MIN_VALUE > 0 // true
  • [1,2,3] + [4,5,6] // [1,2,34,5,6]
  • true + true // 2
  • (true + true) * (true + true) - true // 3
  • [] == true

Accessibility

  • Що таке screan-reader і як достягти доступності
  • Відмінності hidden, aria-hidden=”true” display: “none”
  • alt для картинок
  • Відмінності між legend, caption і label
  • Для чого існує атрибут title

Тестування

functional/performance/regression/system/unit/security testing

Висновок

Співбесіда – ще один шанс перевірити свої знання, познайомитись із новими людьми, і лише опісля приймати рішення щодо нової роботи. Рекомендую разок на півроку так “тестувати” скіли, ну а перед цим “пройтись” по вказаних вище питаннях.

Матеріал доповнюється…