Frontend Questions on Interview: Frontend Questions

General questions

Mon, 01 Jan 0001 00:00:00 +0000

General questions #

Do you follow the news in the frontend world? How exactly? #

Yes, I follow the news to stay up to date with the latest developments in the frontend space and to understand how it is developing.

Main sources:

Twitter (X)

This social network is a great place to get the latest information on updates, technology developments and expert opinions. Here are some useful accounts:

Основи HTML/CSS

Mon, 01 Jan 0001 00:00:00 +0000

Основи HTML/CSS #

Що таке DOCTYPE і навіщо його використовують? #

Які основні теги структури HTML-сторінки? #

Що таке семантичні теги та навіщо вони потрібні? Наведіть приклади таких тегів. #

Що можете сказати про тег <br>? #

Які теги з найсвіжіших оновлень ви знаєте? #

У чому різниця між <div> і <span>. #

Що таке data-атрибути, в яких випадках їх використовуєте? #

Як використовують атрибути class та id? Яка різниця між класами та ідентифікаторами? #

Що таке внутрішні та зовнішні гіперпосилання і які вони мають атрибути? #

Що ви знаєте про SVG? Які є варіанти додавання SVG на сторінки сайту? Чим вони відрізняються? #

Як створити форму в HTML і забезпечити її валідацію? #

Які є типи списків у HTML? Що таке ul / ol / dl? #

Що таке iframe і для чого його використовують? #

Які методи відправки даних форми ви знаєте? #

Які основні відмінності між блоковими та вбудованими елементами в HTML? Як вони впливають на структуру сторінки? #

Які CSS-методології ви знаєте та які використовуєте самі? Обґрунтуйте вибір нинішньої методології. #

Що таке CSS-селектори? Наведіть приклади. #

Як працює наслідування в CSS? #

Що таке «модель коробки» в CSS і як її можна змінити? #

У чому різниця між margin і padding? #

Що таке Flexbox? Як реалізувати верстку за допомогою Flexbox чи Grid і який підхід найбільш доречний в якому випадку? #

Що таке медіазапити та як їх використовувати? #

Як можна приховати елемент за допомогою CSS? Чи однаково будуть працювати opacity: 0; display: none; visibility:hidden? #

Як можна зробити лого посередині екрана? #

Як розмістити хрестик для закриття справа зверху елемента? #

Як зробити останній елемент списку червоним, незалежно від довжини списку без JS? #

Які є можливості задати колір? #

Що таке z-index? Чи кожен елемент його має? #

Які переваги і недоліки використання CSS-препроцесорів? #

Які методи центрування елемента в CSS? #

Які методи вертикального центрування в CSS ви знаєте? #

Для чого існують різні рівні заголовків, якщо розмір можна встановити стилями? #

Які є варіанти позиціонування елемента на сторінці? #

Які бувають види display? Який використовуєте найчастіше? У чому особливість inline-block? #

У чому відмінність між position: relative та position: absolute ? #

Які одиниці розмірів є в CSS? #

Які ризики використання відʼємних значень для відступів? #

Що таке псевдокласи та псевдоелементи? В чому між ними різниця? Як ви використовуєте псевдокласи та псевдоелементи в CSS? #

Що таке адаптивний дизайн? #

Яка різниця між картинками, доданими через HTML-тег , і CSS-властивістю background-image? #

Як ви вирішуєте проблеми з кросбраузерною сумісністю в розробці вебсайтів, зокрема в контексті різних версій браузерів? #

Як із врахуванням HTML і CSS забезпечити доступність сайту? #

Як реалізувати responsive design, використовуючи CSS? #

Поясніть концепцію CSS-змінних. #

Які властивості CSS впливають на швидкодію? #

Що зазвичай найбільше знижує показники швидкодії сайту? #

Як зробити дві колонки на CSS так, щоб одна розтягувалася, а інша — ні? #

Які плюси та мінуси CSS-анімацій порівняно з JS-анімаціями? #

Як можна перебити important або досягти схожого ефекту без important? #

Чи валідний цей HMTL? Виправте всі помилки. Розкажіть про валідність HMTL загалом. #

<ul>
    <a href="/some-url"><li>Some Link in Menu</a></li>
    <a href="/some-url"><li>Some Link in Menu</li></a>
<ul>

Що таке mobile-first підхід, які його переваги та недоліки? #

Поясніть, як обчислюється специфічність у CSS-селекторах. #

Для чого використовують пре-/постпроцесори? #

Назвіть типи інпутів у формах. Як відправити форму на сервер (без JS)? #

Web Performance

Mon, 01 Jan 0001 00:00:00 +0000

Web Performance #

Що ви знаєте про Core Web Vitals? #

Чим відрізняються лабораторні та польові заміри перформансу? #

Які формати картинок знаєте, чим вони відрізняються? #

Ваш сайт довго завантажується на мобільному пристрої. Розкажіть крок за кроком, як будете шукати причину. #

Які інструменти використовуєте для оптимізації швидкості завантаження вебсторінки у роботі з HTML і CSS? #

Як ви оптимізуєте роботу зображень на вебсторінці для покращення продуктивності? #

Які методи оптимізації вебсторінок ви знаєте? #

Основи JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

Основи JavaScript #

Перерахуйте типи даних у JS. #

Чим відрізняється масив та обʼєкт? У яких випадках що використовуєте? #

Events в JS. Розкажіть про event propagation, bubbling, delegation, preventing тощо. #

У чому різниця між var, let і const. У яких випадках що потрібно використовувати? #

Чи можливо перевизначити const? #

Чи відомі принципи DRY, KISS, YAGNI ? #

У чому відмінності LocalStorage від SessionStorage? Як ви використовуєте LocalStorage та SessionStorage в JavaScript? У яких випадках вважаєте їхнє використання доцільним? #

Що таке замикання (closure) в JavaScript і як воно працює? #

Що таке область видимості змінної? #

Що таке анонімна функція? #

Що таке стрілкова функція і як вона відрізняється від звичайної функції? #

Які методи перебору масивів ви знаєте? #

Що таке JSON і як працювати з ним у JavaScript? #

Як виконується асинхронний код у JavaScript? #

Як ви працюєте з асинхронним кодом у JavaScript без використання async/await? Які інші підходи ви розглядаєте для роботи з асинхронністю? #

Різниця між == і ===. #

Що таке прототип у JavaScript? #

У чому різниця між null та undefined? #

Що таке контекст? Як можна змінювати контекст виконання функції? #

Що таке Promise? У яких випадках ви ним користуєтеся? #

Які особливості об’єктноорієнтованого програмування у JavaScript? #

Як з JS-коду звернутись до HTML-елемента та змінити його текст? #

Що таке деструктуризація? #

Що буде, якщо звернутись до елемента, якого немає за індексом (const arr = [’a’, ’b’]; console.log(arr[20])? #

У чому різниця між for..of та for…in? #

API браузера

Mon, 01 Jan 0001 00:00:00 +0000

API браузера #

Що таке DOM? #

Як JavaScript взаємодіє з DOM? #

Що таке AJAX? #

Як виконати HTTP-запит за допомогою JavaScript? #

Що таке JSONP і як його використовують? #

Які є способи зберігання даних у браузері? #

Що таке обробка подій у JavaScript? #

Що таке event bubbling та event capturing у контексті обробки подій у DOM? Як використовуєте ці концепції для ефективної обробки подій? #

Що таке делегування подій у DOM, як ви використовуєте цей підхід для оптимізації обробки подій, особливо на великих сторінках? #

Фреймворки та бібліотеки

Mon, 01 Jan 0001 00:00:00 +0000

Фреймворки та бібліотеки #

Навіщо використовують фреймворки, які їхні переваги та недоліки? #

Чим варто керуватися у виборі фреймворку? #

Що таке компонентно-орієнтований підхід? #

У чому проблема керування станом і які є підходи до її вирішення? #

Що таке віртуальний DOM? #

Які методи життєвого циклу компонентів ви знаєте? #

Як оптимізувати продуктивність рішень з використанням фреймворків? #

Що таке рендеринг на стороні сервера? Навіщо він потрібен, які бувають варіанти реалізації? #

Як взаємодіяти з API в межах бібліотек/фреймворків? #

Які особливості управління даними та маршрутизації? #

Які основні відмінності між Angular і React? #

Як ви розрізняєте класові та функціональні компоненти в React? В яких випадках вважаєте за доцільне використовувати той або інший тип компонента? #

Як можна оптимізувати продуктивність у React-застосунках? Які підходи використовуєте для уникнення надмірного рендерингу та для оптимізації часу завантаження компонентів? #

Як реалізуєте управління станом у React-застосунках? Які підходи використовуєте для підтримки читабельності та ефективного управління більш складним/глобальним станом? #

Як вирішуєте питання управління формами в React? Які підходи використовуєте для валідації та обробки форм? #

Як виконати код функції лише при першому рендері компонента? #

Як обробляєте події у React? #

Що таке React-хуки, які вбудовані хуки використовуєте? #

Яким умовам має відповідати функція, щоб бути хуком? #

Як ви робите серверний рендеринг у Next.js? Які переваги цього підходу бачите, у яких випадках вважаєте його найбільш доцільним? #

Що таке компоненти у Vue.js? #

Як працює директива ngIf в Angular? #

Є завдання порахувати коефіцієнт, який буде потрібен у компоненті і який залежить тільки від декількох констант у проєкті. Де його найкраще порахувати? #

Основи мережі та протоколи

Mon, 01 Jan 0001 00:00:00 +0000

Основи мережі та протоколи #

Що таке HTTP і HTTPS, яка між ними різниця? #

Які основні методи HTTP-запитів (GET, POST, PUT, DELETE) і їхні відмінності? #

Що таке статус-коди HTTP, наведіть приклади найбільш поширених. #

Що таке REST API і які його основні принципи? #

Які засоби безпеки використовують під час роботи з вебзапитами? #

Що таке JSON і XML і чим вони відрізняються у використанні? #

Що таке WebSocket і в чому його особливості порівняно з традиційними HTTP-запитами? #

Як функціонує кешування вебресурсів? #

Що таке SSL/TLS і як це використовують для реалізації безпеки? #

Робота з бекендом

Mon, 01 Jan 0001 00:00:00 +0000

Робота з бекендом #

Що таке API і як фронтенд взаємодіє з ним? #

Які є формати обміну даними між фронтендом і бекендом? #

Що таке CRUD-операції і як вони реалізуються на практиці? #

Як використовувати вебсокети для реалізації реального часу комунікацій? #

Які засоби аутентифікації та авторизації використовують у сучасних вебзастосунках? #

Які основні принципи безпечного зберігання та передачі користувацьких даних? #

Що таке GraphQL і в чому його переваги та недоліки порівняно з REST? #

Які стратегії кешування даних можуть бути використані у фронтенді? #

Як можна обробляти великі обсяги даних без негативного впливу на продуктивність фронтенду? #

Які інструменти і підходи використовують для моніторингу та відлагодження запитів до сервера? #

Алгоритми та структури даних

Mon, 01 Jan 0001 00:00:00 +0000

Алгоритми та структури даних #

Що таке алгоритмічна складність і як її оцінювати? #

Розкажіть про основні структури даних, такі як масиви, списки, стеки та черги. #

Які алгоритми сортування ви знаєте і як вони працюють? #

Як реалізувати пошук у ширину та пошук у глибину на графі й де це потрібно на фронтенді? #

Що таке рекурсія, наведіть приклади її використання. #

Як можна оптимізувати алгоритми за допомогою мемоізації? #

Які алгоритми пошуку ви знаєте і як вони відрізняються один від одного? #

Як працює хеш-таблиця та які її переваги та недоліки? #

Розкажіть про алгоритми роботи з деревами, такі як двійкове дерево пошуку. #

Які алгоритми можна використовувати для пошуку найкоротшого шляху в графі? #

Git і системи контролю версій

Mon, 01 Jan 0001 00:00:00 +0000

Git і системи контролю версій #

Що таке система контролю версій і навіщо її використовують? #

Які основні команди Git ви знаєте і для чого їх використовують? #

Яка різниця між git merge та git rebase? #

Що таке commit у Git і як його правильно формувати? #

Як виправити помилки в попередніх комітах? #

Що таке гілки в Git і як їх ефективно використовувати? #

Як створити нову гілку в Git? #

Які стратегії вибору віток використовують у різних розробницьких процесах (наприклад, Git Flow)? #

Як використовувати теги в Git? #

Що таке конфлікт злиття і як його вирішити? #

Які найкращі практики роботи з віддаленими репозиторіями? #

Як використовувати .gitignore файл? #

TypeScript

Mon, 01 Jan 0001 00:00:00 +0000

TypeScript #

Які основні відмінності між TypeScript і JavaScript? #

Які переваги та недоліки використання TypeScript? #

Що таке типи даних у TypeScript і як їх використовують? #

Розкажіть про інтерфейси в TypeScript і наведіть приклади їх використання. #

Як працюють Generics у TypeScript і чому вони корисні? #

Як можна використовувати Enums у TypeScript і які їхні переваги? #

Як TypeScript покращує безпеку типів проти JavaScript? #

Які можливості для рефакторингу та підтримки коду надає TypeScript? #

Що таке Decorators у TypeScript і в яких випадках їх використовують? #

Як у TypeScript використовують простори імен і модулі? #

Які стратегії міграції з JavaScript на TypeScript ви знаєте? #

Тестування

Mon, 01 Jan 0001 00:00:00 +0000

Тестування #

Чиєю відповідальністю є баг на продакшні — розробника чи тестувальника? #

Як ви тестуєте свій код? Чи писали код, який не можна було перевірити до деплою? #

Що таке ААА в тестуванні? #

Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

Accessibility #

Що таке вебдоступність? #

Як тестувати вебдоступність? #

Назвіть базові техніки створення доступних вебінтерфейсів. #

В яких випадках треба використовувати посилання, а в яких — кнопки? #

Який текст має міститися в атрибуті alt? #

Загальні питання

Mon, 01 Jan 0001 00:00:00 +0000

Загальні питання #

Назвіть принципи ООП. #

Поясніть кожну складову SOLID. #

Чому треба звертати увагу на складність алгоритму? #

На які сутності ви розділяєте файлову структуру на початку проєктування? #

Як ви розумієте, що настав час відокремити певну сутність у проєкті? #

Поверхово опишіть, як відбувається білд проєкту? #

Яка ваша улюблена технологія/інструмент/тег у розробці? #

Що ви робите, щоб код було легше підтримувати? #

Що таке рефакторинг і як ви його проводите? #

HTML/CSS

Mon, 01 Jan 0001 00:00:00 +0000

HTML/CSS #

Що таке мікророзмітка? #

Що таке SEO? На що має звертати увагу розробник для забезпечення гарних SEO-показників у майбутньому? #

Які техніки організації іконок на сайті ви знаєте? Назвіть плюси та мінуси кожної. #

Як можна оптимізувати CSS для кращої продуктивності? #

Що таке «сучасний CSS», на вашу думку? Що із сучасного CSS ви використовуєте в щоденній роботі? #

Чим відрізняються змінні в SCSS і CSS Custom Properties? У чому перевага тих чи інших? #

Як ви вирішуєте конфлікти стилів при роботі з декількома фронтендерами на проєкті чи запобігаєте цьому? #

У чому різниця між transition і animation? В яких випадках що використовуєте? #

Потрібно додати кастомні стилі для скролбару. Як би ви це зробили? #

Які методи ізоляції стилів ви знаєте? #

Навіщо потрібні CSS Logical Properties? Чи використовуєте їх? #

Розкажіть про свій досвід використання CSS Grid Layout. #

Як працює CSS-функція clamp()? Назвіть корисні приклади її використання. #

Як оптимізувати стилі для друку на принтері? #

Які CSS-фреймворки ви знаєте? З якими з них працювали на проєктах? Які плюси та мінуси вони мали? #

Як ви працюєте з адаптивними та резиновими макетами? Як розглядаєте проблеми, пов’язані з різними роздільними здатностями екранів і пристроями? #

Як організовуєте CSS-стилі у великих проєктах? Чи використовуєте які-небудь методології? #

Як обираєте між використанням і не використанням препроцесорів CSS, таких як Sass чи Less, у своїх проєктах? Які переваги ви бачите у цьому? #

Як впроваджуєте концепцію «компонентного» підходу у вашому CSS-коді? Які стратегії використовуєте для створення повторно використовуваних і легко модифікованих компонентів у ваших стилях? #

Як семантична верстка впливає на доступність сторінки? #

На що впливає doctype? #

Які препроцесори CSS ви знаєте і які їхні переваги? #

Як зробити посилання, з якого можна завантажити прикріплений файл? #

Чому іноді translate краще за position:absolute під час написання стилів? #

Назвіть особливості та відмінності flex і grid? Чому віддаєте перевагу? #

Дублювання HTML/CSS для responsive design: плюси, мінуси, підводні камені. #

Performance

Mon, 01 Jan 0001 00:00:00 +0000

Performance #

Які основні метрики вимірюють продуктивність сайту? #

Що таке Cumulative Layout Shift і як покращити його значення? #

Що таке Critical CSS? #

Як ви розробляєте анімації з погляду продуктивності, зокрема при використанні CSS або JavaScript? #

Які формати зображень краще використовувати у вебі? Які методи оптимізації зображень для вебу? #

Як управляєте інтеграцією сторонніх бібліотек або плагінів для зменшення впливу на продуктивність? #

Як реалізуєте lazy loading для зображень та інших ресурсів для оптимізації часу завантаження? #

Як використовуєте prefetching і preloading ресурсів для підвищення швидкості переходу між сторінками? #

У вас є сторінка галереї, на якій потрібно показати велику кількість відео з YouTube. Як би ви це реалізували так, щоб сторінка швидко завантажувалась? #

Вам потрібно відобразити таблицю на кілька тисяч рядків. Як би ви це втілили, щоб сторінка швидко завантажувалась і швидко реагувала на дії користувача? #

Як ви б організували завантаження великої кількості CSS-стилів на сторінці так, щоб користувач міг якнайшвидше взаємодіяти з нею, при цьому уникнувши зсуву макета? #

JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

JavaScript #

У чому різниця між LocalStorage, SessionStorage та cookies? #

Коли використовуєте Map та Set? #

Які знаєте способи, щоб виявити, чи перебуває елемент у viewport користувача? #

Що таке Service Workers, у яких випадках їх використовуєте? #

Що таке Websockets? Для чого вони потрібні? #

Як обробляєте помилки в застосунку? #

Що таке event loop? Як воно працює? #

У чому різниця між типами та інтерфейсами? #

Що таке модифікатори доступу? #

Що таке type guard? #

Яка мета створення abstract class? #

Які види обʼєктних моделей ви знаєте? #

Що таке поліфіли й для чого вони потрібні? #

Для чого використовують анонімні функції? #

Що таке ES6-модулі? #

Як використовуєте модульність у JavaScript для організації вашого коду? #

Які підходи використовуєте для уникнення конфліктів та забезпечення читабельності та масштабованості коду? #

Як ви оптимізуєте та працюєте з анімаціями в браузері? Які підходи використовуєте для досягнення високої продуктивності та плавності анімацій? #

Як реалізовуєте lazy loading великих ресурсів, таких як зображення або скрипти, для оптимізації завантаження сторінок? Як це взаємодіє з асинхронним кодом? #

Як використовуєте інструменти забезпечення якості коду, такі як ESLint? Як визначаєте та дотримуєтеся кодового стилю в проєкті? #

Як ви працюєте з архітектурою та патернами проєктування в JavaScript? Які конкретні патерни використовуєте для структурування коду та полегшення його розширення? #

Як би ви реалізовували відсотковий прелоадер на сайті, де треба завантажувати картинки, 3D-об’єкти та додаткові JSON-файли? #

Чи є у вас досвід з PWA? #

Що таке функції-генератори і яке їх практичне застосування? #

Розкажіть про всі способи використання оператора ’…’. #

Фреймворки та бібліотеки

Mon, 01 Jan 0001 00:00:00 +0000

Фреймворки та бібліотеки #

Розкажіть про управління станом у Vue.js. #

Як реалізувати маршрутизацію (routing) в React? #

Як оптимізувати рендеринг компонентів у React? #

Як оптимізувати продуктивність у великих React-застосунках? #

З якими проблемами в React-компонентах часто стикались? #

Як ви управляєте станами в React APP? Як передавати стани між кількома компонентами? #

Які підходи використовуєте для lazy loading компонентів, управління станом і кешування даних? #

Що таке side effects? З якими інструментами є досвід? #

Як вирішуєте проблеми маршрутизації в складних React-застосунках? Які підходи використовуєте для організації маршрутів та управління структурою застосунку? #

Як обробляєте анімації в React? Як використовуєте CSS-анімації та бібліотеки для створення плавних і високопродуктивних анімацій? #

Як використовуєте архітектурні патерни (наприклад, Flux або Redux) для ефективного управління станом у React-застосунку? Які переваги та обмеження бачите в застосуванні цих патернів? #

Як оптимізуєте та масштабуєте Next.js застосунки для високого трафіку? Як вирішуєте питання кешування, CDN, інших аспектів продуктивності? #

Що таке ре-рендер компонента, коли він відбувається чи можна вплинути на цей процес? #

Що таке React Context, коли його використовуєте? #

Що таке мемоїзація в React та коли вона потрібна? #

Як виконати код перед видаленням компонента з дерева? #

У яких випадках використовуєте useReducer? #

Які UI-бібліотеки знаєте, у чому їхні переваги та недоліки? #

Тести

Mon, 01 Jan 0001 00:00:00 +0000

Тести #

Для чого впроваджують тестування? #

Чи є випадки, коли тестування не є доцільним? #

Які види тестування знаєте? #

У чому різниця між е2е та unit-тестами? #

Які інструменти для автоматизації тестування знаєте? #

Як тестувати RESTful API? #

Що таке TDD? #

Як обираєте, чи покривати функціонал тестами? #

Як виявляєте та ізолюєте помилки в коді? Які інструменти для відладки використовуєте? #

Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

Accessibility #

Які рівні доступності знаєте? Чим вони відрізняються? #

Опишіть особливості імплементації навігації по сайту з клавіатури. #

Для чого використовують HTML5 Landmarks? #

Які проблеми з вебдоступністю трапляються в SPA-застосунках найчастіше? #

Дизайнер консультується з вами щодо дизайну майбутнього проєкту. Які поради в контексті доступності ви йому дасте? #

Загальні запитання

Mon, 01 Jan 0001 00:00:00 +0000

Загальні запитання #

Якими необхідними знаннями та навичками потрібно володіти Senior-розробнику? #

Якою має бути робота та комунікації в команді розробників? #

Які методи оцінки та планування проєктів використовуєте? #

На що звертаєте увагу під час вибору технологій на проєкті? #

Як підходите до менторства та розвитку менш досвідчених розробників? #

Як впроваджуєте нові технології або практики в команду? #

Як вирішуєте конфлікти та проблеми в команді? #

Як буде виглядати фронтенд-розробка за два-три роки? #

Які з нових фреймворків ви пробували використовувати? #

Які маєте пет-проєкти, можливо, займаєтеся опенсорсом? #

Чи виступаєте на конференціях/мітапах? #

Чи ділитеся десь регулярно професійними думками, в яких спільнотах берете участь? #

Які порекомендуєте подкасти/канали/авторів? #

Які нові інструменти ви почали використовувати і можете порекомендувати? #

HTML/CSS

Mon, 01 Jan 0001 00:00:00 +0000

HTML/CSS #

Які ви знаєте системи іменування класів? Чи взагалі використовуєте якісь? #

Як збираєте CSS? #

Чи доводилось працювати з Web Components? Що таке Shadow DOM? #

Чому деякі теги не мають псевдоелементів, наприклад img? #

Чи є місце для CSS-властивості float у сучасному вебі? #

Що таке адаптивна типографіка? Які техніки ви знаєте та використовуєте на своїх проєктах? #

Розкажіть про ваше бачення сучасного адаптивного вебдизайну: які існують альтернативи для media queries. Обґрунтуйте вибір одиниць виміру для брейкпоінтів та їх значення. #

У чому відмінність Node Sass від Dart Sass та які особливості міграції? #

Назвіть відмінності між @import, @use та @forward в Sass. #

Чи створюєте ви стайлгайди для своїх проєктів? Які техніки або інструменти використовуєте для цього? #

Які є альтернативи для overflow: hidden? #

Дизайнер наполягає на кастомізації стилів для всіх елементів складної форми. Які ваші дії? #

Які є кейси використання @media в CSS, окрім screen? #

Як вирішуєте проблеми з високим обсягом стилів і підтримкою великих кодових баз у великих проєктах? Які підходи та методології використовуєте для організації CSS-коду на рівні архітектури? #

Як оптимізуєте завантаження сторінок, зокрема використання Critical CSS та інших стратегій для зменшення часу до першого байту та часу до відображення? #

Розкажіть про ваш досвід використання препроцесорів CSS (наприклад, Sass або Less) та інших інструментів для автоматизації завдань під час розробки великих проєктів. #

Як вирішуєте завдання кросбраузерної сумісності на етапі розробки та як уникнути непорозумінь між розробниками та QA-командою під час тестування на різних браузерах? #

Як реалізуєте server-side rendering (SSR) або static site generation (SSG) із CSS-in-JS, перед якими викликами ви можете постати в цьому контексті? #

Яку нову фічу в CSS (з тих, що зараз перебувають на стадії розробки або імплементації в деяких браузерах) ви очікуєте найбільше? Чому саме цю? #

Уявіть, що ви дізналися про свій майбутній проєкт. Це великий публічний мультимовний сайт з арабською та японською мовами включно. На проєкті вам будуть допомагати два джуніор-фронтендери. Опишіть, як ви сплануєте CSS-архітектуру та підготуєте своїх джунів для такого проєкту. #

Вам потрібно зробити галерею картинок, які мають плавно гортатись при скролі вбік усередині галереї. Як би ви це реалізували? Чи можливо це зробити без JS? #

Performance

Mon, 01 Jan 0001 00:00:00 +0000

Performance #

На умовному сайті є кастомний декоративний шрифт, який негативно впливає на продуктивність. Назвіть усі можливі варіанти його оптимізації. #

Уявіть, що є старий проєкт на підтримці (не JS-стек, бек на PHP-фреймворку), який перекинули на вас з іншої команди. Завдання: максимально оптимізувати фронтенд-проєкту, вклавшись у бюджет і 16 годин. Опишіть вашу стратегію оптимізації та кроки в межах означених обмежень. #

У чому особливість підготовки та під’єднання фронтенд-асетів залежно від використання HTTP1 або HTTP2 на сервері? #

Чи ознайомлені ви зі складанням бюджету продуктивності (Performance Budget)? Як ви розумієте це поняття? #

Що таке DOM Reflow, Repaint, Composite? Як це працює? #

JavaScript

Mon, 01 Jan 0001 00:00:00 +0000

JavaScript #

Як паралельно пройтись по масиву Promises? А послідовно? #

Що таке Symbol? Яке його практичне застосування? #

Наведіть приклади реалізації патерну Observer у браузері. #

Наведіть приклади сценаріїв, які можуть призвести до витоку пам’яті у клієнтському коді. #

У чому різниця між Websockets і Server Send Event? #

Розкажіть про Service Workers. #

Як працювати з WebSockets для реалізації двостороннього зв’язку? #

Якщо якась анімація на сайті повільна (низький FPS), як дізнатися причину? Які причини бувають? #

Які способи організації коду/патерни використовуєте і чому? #

Які є варіанти зберігання даних на клієнті? #

Як би ви реалізували кешування на клієнті? Коли це доречно? #

Як ви реалізуєте аутентифікацію та авторизацію (якщо є) у вашому застосунку? Як ви дбаєте про безпеку та управління правами доступу на клієнтській та серверній стороні? #

Як ви використовуєте code splitting та lazy loading у коді для оптимізації завантаження сторінок та ресурсів? Як це впливає на продуктивність застосунку? #

Як ви реалізуєте автоматичне тестування під час розробки? Які інструменти використовуєте для unit-тестування, інтеграційного тестування та тестування взаємодії? #

Є завдання передавати дані між двома різними вебсайтами. Які є способи це робити? А якщо тільки client side? Якщо ми маємо доступ до коду обох сайтів? Якщо один показується на іншому через iframe? Якщо ж ми не маємо доступу до одного з них? #

Фреймворки та бібліотеки

Mon, 01 Jan 0001 00:00:00 +0000

Фреймворки та бібліотеки #

Що нового зʼявилось у 18-й версії React? #

Як тримати посилання на функцію з актуальними параметрами, але не викликати useEffect зайвий раз? #

У чому різниця між useLayoutEffect та useEffect, у яких випадках що використовуєте? #

Розкажіть про хук useTransition. #

Які патерни з React ви знаєте? #

Наведіть приклад React-патерну Compound components. #

Чи потрібні бібліотеки для state management, якщо є бібліотеки для кешування (React Query/SWR) і React Context? #

Як обробляєте помилки у React-компонентах? #

Поясніть, що відбувається в цьому коді та в яких сценаріях він може бути корисним: #

const useHandler = (f) => {
    const ref = React.useRef(f);
    ref.current = f;
    return React.useCallback((...args) => ref.current(...args), []);
};

Як управляти глобальним станом у застосунках на Angular через ngrx/store? #

Як ви підтримуєте консистентність дизайну та стилізації великих кодових баз React-проєктів? Які підходи або інструменти використовуєте для підтримання єдності інтерфейсу користувача? #

Як ви структуруєте та організовуєте компоненти великих React-застосунків? Які підходи використовуєте для логічного розділення компонентів, повторного використання та підтримки коду? #

Як управляєте формами в React, зокрема використовуючи бібліотеки для форм, такі як Formik чи React Hook Form? Як обробляєте валідацію, маскування та інші аспекти форм? #

У вас є завдання відрендерити великий список (100к + items). Як би виконали це завдання? #

Оптимізація React-компонентів: що варто робити, а що ні? Чи варто і коли варто використовувати useMemo та useCallback? #

Як збираєте React-застосунок? #

Які інструменти використовували для state management і чому обирали саме їх? #

Чи використовуєте інкрементальну перевірку (incremental static regeneration) в Next.js для оновлення статичних сторінок на основі часових інтервалів або змін у даних? Як це впливає на продуктивність і кешування? #

Тестування

Mon, 01 Jan 0001 00:00:00 +0000

Тестування #

Чи є у вас досвід покриття великих систем тестами? #

Чи є у вас досвід кастомізації тестових утиліт під потреби проєкту. #

Як організовувати тестові дані та робити їх відповідними до різних сценаріїв тестування? #

Як інтегрувати процеси тестування в системи неперервної інтеграції та розгортання? #

Як варто автоматизовувати тестування? Які інструменти та мови скриптів використовуєте? #

Як забезпечити консистентність результатів тестування в різних середовищах (розробка, тестування, продакшн)? #

Як визначаєте, коли програмний продукт готовий до випуску? Які критерії «зеленого світла» для релізу використовуєте? #

Чи знаєте підхід chaos engineering, якщо так, то як його можна застосувати на фронтенді? #

Алгоритми і структури даних

Mon, 01 Jan 0001 00:00:00 +0000

Алгоритми і структури даних #

З якими нетривіальними структурами даних ви працювали або які знаєте? #

Розкажіть про CRDT. #

Які алгоритми оптимізації використовували для підвищення продуктивності великих застосунків? #

Які алгоритми сортування вважаєте найбільш ефективними для обробки великих наборів даних? #

Як використовуєте динамічне програмування в реальних проєктах? Наведіть приклад. #

Розкажіть про практичне використання структур даних, таких як AVL-дерева або червоно-чорні дерева. #

Як можна реалізувати «глибоку заморозку об’єкта у JavaScript»? #

Як можна реалізувати серіалізацію об’єкта, який містить циклічні посилання? #

Як можна реалізувати Virtual DOM аналогічно реалізації в React? #

Архітектура

Mon, 01 Jan 0001 00:00:00 +0000

Архітектура #

За якими характеристиками оберете фреймворк для нового проєкту? #

За якими характеристиками оберете UI-бібліотеку для нового проєкту? #

Що таке сигнали, як вони реалізовані у різних фреймворках? #

Які переваги та недоліки монорепозиторіїв проти використання різних репозиторіїв? #

Опишіть CI/CD-процес у нинішньому проєкті. #

Що таке мікросервісна архітектура і її переваги порівняно з монолітною? #

Як ви б дизайнили систему для високої доступності та масштабування? #

Які патерни проєктування ви знаєте і де їх застосовувати? #

Які є стратегії масштабування вебзастосунків? #

Розкажіть про Single Page Application, його переваги та недоліки. #

Які архітектурні патерни вебзастосунків використовували та які їхні переваги? #

Як варто розробляти масштабовані та високопродуктивні фронтенд-системи? #

Чи ознайомлені ви з архітектурою мікрофронтендів? Можливо, знаєте конкретні реалізації? #

Як підтримувати баланс між готовими рішеннями та розробкою власних рішень у проєктах? Як варто ухвалювати рішення щодо вибору? #

Безпека

Mon, 01 Jan 0001 00:00:00 +0000

Безпека #

Як подбати про безпеку вебзастосунків? #

Поясніть принципи Cross-Site Scripting (XSS) і Cross-Site Request Forgery (CSRF) атаки та способи захисту від них. #

Які найкращі практики для забезпечення безпеки API? #

Розкажіть про захист від SQL-ін’єкцій. #

Що таке CORS і як його правильно налаштувати? #

Як керувати секретами у проєктах? #

Якби вас попросили скласти чекліст з безпеки для проєкту, то як би він був? #

Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

Accessibility #

Що таке ARIA, які її основні ролі, стани та властивості? #

Опишіть створення доступного модального вікна з нуля. Які є варіанти і на що треба звернути увагу? #

Чи знаєте ви особливості законодавства щодо вебдоступності в країнах основних клієнтів (Штати, ЄС, UK, Канада, Україна)? #

Уявіть, що я — клієнт, який нічого не знає про доступність і ніколи про це не замислювався. Переконайте мене, чому доступність — це важливо і чому я маю витрачати на це додаткові гроші. #