Що можуть спитати на співбесіді на позицію 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
Висновок
Співбесіда — ще один шанс перевірити свої знання, познайомитись із новими людьми, і лише опісля приймати рішення щодо нової роботи. Рекомендую разок на пів року так “тестувати” скіли, ну а перед цим “пройтись” по вказаних вище питаннях.
Залишити відповідь