РоботаОновлено: Теги:

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

В даній статті зберу усі питання, які можуть пролунати на співбесіді як Junior, Middle та Senior Frontend розробника. Далі розкажу про те, що особисто мене запитували на співбесідах, а також те, що б запитав я, які завдання б дав на лайв-кодинг.

Питання

Загальні

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

JavaScript

  • Як працює 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
  • BigInt
  • globalThis
  • Promise.allSettled
  • Dynamic module import
  • Nullish Coalescing
  • Option chaining

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
  • normalize/reset або інші способи відключити дефолтні стилі
  • Медіазапити та верстка під мобільні
  • em, rem, px, vw та яка між ними різниця
  • floats, flex box, grid
  • CSS variables
  • SCSS
  • box-sizing: border-box та content-box
  • Специфічність селекторів CSS
  • Shadow DOM?

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

Висновок

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

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *