Три (не)душних питання для співбесіди Front-end Middle

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Співбесіди я проводжу часто. Іноді комерційні, частіше публічні на своєму каналі Сергій Бабіч та Дивовижний світ веброзробки. І переді мною часто постає проблема хороших питань, бо я від усієї душі терпіти не можу типові «100 питань для співбесіди». Чому — тема окремої розмови.

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

Ось, як приклад, наводжу три питання з учорашньої співбесіди рівня Front-end Middle з Максимом Собко І окремо зауважу, що вам пропоную не відповіді на ці питання, а мої очікування від ваших відповідей. Чому? Типова відповідь не покаже ваших знань чи незнань. Тому краще зрозуміти, як відповідати, а не що відповідати. Отже, три випадкових питання з учорашнього етеру:

Якби вам потрібно було створити дашборд, які підходи та інструменти ви б використали? (HTML, CSS)

Відповідь «в лоб» — CSS grid та @media й @container query. Але важливо пояснити, чому обрано саме цей підхід, враховуючи виклики: адаптацію до різних розмірів екранів, збереження структури та зручність дашборду на різних пристроях.

У відповіді варто не лише назвати технології, а й пояснити, як вони вирішують завдання. Добре коротко окреслити вимоги й обмеження, щоб показати комплексний підхід, а не просто вибір інструментів «за замовчуванням».

Дуже важливо памʼятати, що в подібних питаннях короткої відповіді недостатньо, адже мета у них — розкрити ваші практичні знання, а не лише те, що ви в принципі знаєте про існування цих технологій.

Які види стейту та сховищ для нього доступні розробникам, та які дані де варто зберігати? (JS, Frameworks)

Це доволі хитре питання про розуміння видів стейту та їх застосування. Важливо пояснити, які дані слід зберігати локально для компонентів, які — глобально для всього застосунку, а які отримувати із сервера або зберігати між сеансами, залежно від потреби.

Також очікується, що кандидат згадає про способи зберігання, як-от sessionStorage чи localStorage, і пояснить їх використання. Відповідь має демонструвати практичний підхід до вибору стратегії зберігання даних і розуміння їхньої ролі у вирішенні задач.

А чому питання хитре? Бо воно не стільки про те, яку кількість того чи іншого назве кандидат, скільки про розуміння розділення відповідальности, про різні види даних, їхню критичність, безпеку і таке інше.

Ви отримуєте терміновий запит на нову фічу, демо якої клієнту потрібно показати уже за місяць на великій конференції. Ваші дії? (Behavioural)

Тут мова йде про важливість правильної пріоритизації завдань у жорстких дедлайнах: зосередження на ключових цілях, як-от розробка мінімально життєздатного продукту (MVP), спрощення другорядних задач і ефективне управління часом.

Також важливо підкреслити роль комунікації — узгодження пріоритетів із командою та замовником, щоб уникнути зайвих правок. Окремо цінуватиметься готовність адаптувати план до нових викликів, зберігаючи фокус на досягненні основних цілей.

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


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


Подивитися ж, куди можуть завести ці питання під час співбесіди, ви можете в останньому випуску співбесід на моєму ютуб-каналі:

Також варто звернути увагу на корисні оголошення, і обовʼязково взяти участь в розіграші подарунків в рубриці Питання від партнера.

І, звичайно ж, підписатися та залишити коментар під відео, навіть якщо він буде надзвичайно душний ;)

👍ПодобаєтьсяСподобалось24
До обраногоВ обраному5
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Чудові питання. Подобається.

Коментар видалено автором допису.

Коментар видалено автором допису.

1. OOP
2. SOLID
3. design patterns / anti-patterns
не дякуйте :)

Ви вирішили відразу найдушнішим шляхом піти?)

Дякуємо за ваш час, ми вам передзвонимо :)

Перші два питання то дійсно на міддла? Здається що це навіть джун повинен розуміти.

Я ці питання і синьйора, і ліда можу питати. Суть не в питанні, а у відповіді на нього.

Та ну то понятно, просто навіть гарна відповідь на просте питання не означає рівень міддла на фронтенді. Але це імхо, я не повчаю, просто дивно що такі прості речі питають на такий рівень.

Знову ж таки, я не вважаю це простим запитанням. Чому? Бо я слухаю відповідь. І якщо людина дасть на нього простору відповідь, це мене не влаштує. Якщо пояснить, аргументує вибір, наведе за та проти — оце буде хороший рівень відповіді. Це якщо ми говоримо про мідла та вище

Ну то ясно, що просто «я візьму grid, @container та додам трохи @layers» недостатньо, я це враховував.

він [middle розробник] визначає важливість задач

Мене якраз нещодавно колеги просили поділитись досвідом. Питали про red flags на інтервʼю. Дякую за підказку.

прошу дуже, у мене ще є, звертайся

Дивовижний світ недушнільних питань

До речі, ваше питання про мікрофронтенд вийшло трохи розпливчастим — «як впиляти динамічний контент». Було б зрозуміліше, якби ви сформулювали його так: «Наш дашборд написаний на Vue, але потрібно інтегрувати компонент на React. Як це можна реалізувати?» Думаю, у такому випадку інтерв’юер краще зрозумів би, про що йдеться і одразу здогадався б про мікрофронтенд.

Це було навідне питання, яке мало б дати зрозуміти, що наш дашборд — це доволі статичний контент в плані HTML, CSS, JS, які треба тягнути з сервера, а от блоґ уже динамічний і частозмінюваний. Щоб наштовхнути на думку, що не варто їх тримати в одному репо.

Якби вам потрібно було створити дашборд, які підходи та інструменти ви б використали? (HTML, CSS)
Відповідь «в лоб» — CSS grid та @media й @container query.

Залежить від вимог. Адаптивність не завжди є необхідною. Контейнер квері не працює в старих браузерах, якщо чарти на канвасі — треба ResizeObserver і ті всі медіа-квері нічим не допоможуть.

Це чудовий початок відповіді на це запитання!

Блістаю на тех-співбесідах 🌝

Initial stack: jQuery, Bootstrap, Backbone partially migrated to React 15

Якби вам потрібно було створити дашборд, які підходи та інструменти ви б використали? (HTML, CSS)

Бутстрап. Тривіальні задачі оптимально вирішувати тривіальними інструментами і не морочити нікому голову.

Чи це вже занадто немодно і треба з нуля писати стилі і думати що там буде в користувача на Пікселі в величезній таблиці на 25 колонок?)

а що саме? Таблиці чи флоати? )

використовувати готові рішення)

Я б уточнив щодо вимог та часових обмежень. Bootstrap притягнути до себе завжди можна, але якщо дашборд простий, то нащо? Це додаткові КБ до білда, це може бути банально overkilled. Також уточнив би, а на чому проєкт вже зараз. Якщо раптом там вже є бібліотека/фреймворк, то може інструменти вбудовані. Іншими словами, я обачно ставлюсь до сторонніх рішень.

Ви отримуєте терміновий запит на нову фічу, демо якої клієнту потрібно показати уже за місяць на великій конференції. Ваші дії? (Behavioural)

Т. зв. українське ІТ в усій красі, просто таки еталон

а швидше про те, як він визначає важливість задач, а ще наскільки він розуміє потребу бізнесу,

так питання наче як для співбесіди Front-end Middle, а не BA, чи Product/Project whatever, хіба ні?

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

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

Т. зв. українське ІТ в усій красі, просто таки еталон

Та майже будь-який стартап в принципі, незалежно від країни. Якщо є хороші шанси зачепити жирного клієнта (а бувають такі, що можуть подвоїти семизначний ARR з напівпинка), то й місяця на нову фічу може й не бути :) Звісно, з адекватним менеджментом таких «перемог» намагаються уникати за будь-яку ціну, але се ля ві — іноді дійсно треба щось навелосипедити на позавчора бо навіть на вчора буде пізно. Інший варіант тієї ж проблеми — коли компанія стикається з якоюсь проблемою яка загрожує самому її існуванню. Мотивація геть інша, челенж подібний: потрібно швидке рішення за відсутності часу зробити все «по підручнику».

Третє питання — бест. Постійно стикаюсь із подібним у крутих компаніях на рівень сеніор+.

Ситуація стандартна: зроби задачку, яку всі естімейтять на 200+ годин. Ти оцінюєш MVP на 20 годин, а виконуєш за годину(бо така таска прилітає). І тут головне — не «пиляти ночами», а зрозуміти, що дійсно потрібно бізнесу: ти аналізуєш, ріжеш усе зайве, концентруєшся на суті.

Це чудова практика, і навіть певний «дзен». У такі моменти мозок переключається в режим, де ти наче той дід азіатської зовнішності з довгою бородою, що літає у повітрі й бачить усю задачу цілком.

Проте задача, як мені здається, більше на зріст мідлів, ніж на естімейт рівню мідла. І, найскладніше — не виконати подібну задачу, а скласти її так, щоб вона відповідала рівню посадової ролі. А потім ще оцінити відповідь кандидати. А тут впораються хіба що мастодонти рівня Бабіча. xD

Тому, я б сказав, не для всіх. Форсити ще ринок і форсити для подібного майндсету)

Постійно стикаюсь із подібним у крутих компаніях на рівень сеніор+

Для сеніор+/тім лідів — так, задача цілком відповідає рівню. Для мідла — це проста перевірка на «терпілу»

Якби вам потрібно було створити дашборд, які підходи та інструменти ви б використали? (HTML, CSS)

Подивився би як це зроблено в лідерів ринку з подібним функціоналом (наприклад графана) і вже вибирав би підхід.

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

Розбити на юзер сторі,виставити залежності, заестімейтити(в sp, просто щоб розуміти складність), виставити пріоріті, педалити що встигнемо по пріорітету.

Дякую ) Це цікавий початок відповіді

О господи, ще одне дарування з хитрими питаннями, відповіді на які він або вчора прочитав, або всією командою півроку дрочили той дашбоард, а тепер мідлу на інтерв’ю треба сходу розповісти про всі граблі, на які вони наступили. Нахіба ви ото все питаєте якщо по факту відповіді на нього самі не знаєте? Випендритись які ви розумні? Так це й так всі знають, не треба це доводити.
Третє питання то бімба. Це взагалі бити за таке треба. Навіщо мідл фронтенду робити роботу проджект менеджера?
Де ви беретесь такі розумні?

І вам не хворіти

дай вам боже здоровʼя

Також часто проводжу співбесіди і вже мабуть років з 10 надаю перевагу саме story-driven формату. Буває, кандидат готується відповідати про різницю між let та var, а тут такий поворот.
Початок розмови може бути таким: «ПМ прийшов до тебе з таском зробити оптимізацію перформансу на фронті для старого проекту. Це і-комерс проект, який був написаний 10 років тому рендомним індусом на якомусь php фреймворці. На все про все є 10 годин». Від кандидата очікується розуміння приорітетів, бюджету, знання інструментів (як браузерних, так і ні), основних метрик, форматів для різного типу ассетів, технік щодо css, js, зображень, кастомних фонтів, анімацій тощо. А далі все залежить від сеніорності посади, бо навіть про оптимізацію шрифтів можна годину розмовляти при бажанні.
Але, нажаль, зазвичай відповідь зводиться до «еее мініфікация-конкатенація і плагін для кешування».

нічо, привчим потроху і кандидатів, і інтервʼюєрів до цього підходу )

Це цікаве питання, багато залежить від самого проєкту, якщо на оптимізацію є 10 годин, то треба досліджувати пару найбільш критичних вузьких місць та щось з ними робити, але без конкретики, бо що саме робити залежить від продукту.

Але 10 годин замало навіть на те, щоб зібрати відповідні дані, щоб знати де потенційні вузькі місця.

Ось і цікаво спостерігати, які саме інструменти для дослідження критичних місць людина обирає, якими метриками володіє, що саме вважає критичним, і чи взагалі тримає контекст питання про початкові умови. Останнім часом молодь, яка виросла здебільшого на реакті, не завжди уявляє потенційні особливості фронту десятирічного ікомерс проекту на php платформі.

Цей коментар треба в рамочку.

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

Може 90% імпакту від оптимізації буде лежати на беке над тюнингом SQL. Можливо треба буде концептуально переробити ті сторінки які найбільш часто використовуються.

Я б рахувала скільки займає відповідь, найбільш популярні сторінки, як часто пробивається кеш. Ну ще можна чат спитати що він скаже, іноді може на цікаві ідеї навести, а може і не то сказати, тут треба вміти розрізняти.

Нуу, це більше бекендно-фулстекерський підхід. Добре, якщо фронт може зрозуміти, що потенційна є проблема з sql, але це другорядне в цьому випадку. Мені скоріш цікаво, чи здогадається людина подивитися кастомні шрифти. Бо 10 років тому google fonts особливо не юзалися, зато були популярні кастомні шрифти, в TTF форматі на той час. І доволі часто такі шрифти могли важити 2-3мб і були основним блокувальником рендерінгу сторінки. І як вирішувати цей момент можна обговорювати з півгодини ізі

Я б, як бекендер, точно б не подумала про шрифти xD В голову прийшло кешування фронту, повільний рендерінг якихось компонентів, великий розмір якихось скриптів... Але ж шрифти можна підвантажити вже після завантаження сторінки, чи не все так просто?

З 3мб шрифтами буде зрозуміло з першого завантаження сторінки проєкту з табу network (а також з 10 мб іконки, таке теж буває), я про складні речи коли дурниці вже пофіксили, а все ще треба проходити пікові навантаження.

Щодо обговорення, я не знаю, якщо виявиться що проблема в важкому ресурсі, то я б йшла розібратись і читати які підходи є для вирішення, що буде якщо відключити ці шрифти? або віддавати з ноди яка поруч з користувачем через CDN, кешувати їх назавжди в браузері, віддавати тільки там де вони дійсно потрібні (а потрібні вони? може підібрати схожі, але системні), підвантажувати після того, як сторінка вже завантажена і використовується, віддавати їх архівованими, віддавати бандлом, щоб проблема була не в latency, і.т.д. (це я з голови, мабуть, якщо почитати, то скажу більш толкове щось)

Ну ось в цьому і краса такого типу співбесід. Ви б мені оце відповіли, я б щось релеватне запитав в тому ж контексті, але під іншим кутом (щось типу ПМ видав ще 10годин і сказав порішати з accessibility. А потім ще 15 на анімації і в кінці про варіанти переробки такого проекту на якісь модні мікросервіси). Ми б годину потеревеніли, і в кінці вам би було зрозуміло, чи цікаво було б працювати з такими задачами, а мені плюс мінус зрозуміло, чи готова людина до них

Хіба Lighthouse такі проблеми (і навіть більше) не покаже?

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

Що робити, якщо там роботи на місяць (при оптимістичному сценарії), а дають лише 10 годин? 🤔 10 годин тільки на аналіз може піти, і то буде мало.

І таке буває :) На цьому моменті можна обговорити швидкі фікси, які зроблять найбільший імпакт на перформанс, і перевести бесіду в естімейти для роботи, яка можлива поза 10 годин. Для деяких бізнесів це потенційний апсел. А якщо видно, що людина може не тільки зробити адекватний естімейт на план робіт, а ще й вміє продавати свою ідею, то її вже можна дивитися на ліда

В нормальному проекті може 10 год не вистачити не те що на аналіз, а на те щоб його запустити.
Ну хіба що лендінг пейдж якийсь, де оптимізація зводиться до компресії фонового зображення та компресії жаваскріпт файлів, то там так, вистачить.

«Дякую за відповідь, наш ейчар зв’яжеться з вами щодо фідбеку»
А якщо серьйозно, то що таке «нормальний проект»? Щось типу корпоративної бездонної адмінки чергового банкінгу, де естімейти надаються типу «4-6 місяців на таск»?
А якщо я роблю крутий анімований лендос для всесвітньо відомого тайтлу, і там доволі жорсткі умови щодо естімейтів та дедлайнів, бо реліз блокбастеру чи гри ось-ось? Чи це є «нормальним проектом», чи таке собі, нормальні пацани таким займатися не будуть? :)

Перепрошую, але лендос це щось нове для мене, тому хз що там нормальні пацани тим лендосом роблять.

я коли працював в розетці, локально фронт щоб налаштувати і підняти — потрібно було майже день, бо там купа кастомних докер імеджів, форвардінг портів, енв константи, які зашиті на директорію і тд... а тут 10 годин щоб вже були фікси 😄

Це ж теоретична задача. Питання не в тому, щоб все пофіксити в 10 годин, а в умінні ідентифікувати потенційні вузькі місця, фікс яких принесе максимальний профіт

Залежить від ситуації, як у вас з роботою. Якщо це єдиний проект і відмова грозить залишитись без хліба — то треба якось домовлятись, але загальний принцип в таких випадках:
«Poor planning on your part does not constitute an emergency on my part» (Bob Carter)

Коментар видалено автором допису.

Цікаво, як би ви віднеслись до відповіді «от в мене є стаття на цю тему, хочете почитати?» (бо в мене вона є)

з великим інтересом. Але попросив би хоча б поверхнево переказати )

Мені здається, що нині вага статей трохи впала, бо ШІ вміє дуже добре допомагати з ними. Ось виступ десь на конфі чи мітапі — оце діло :)

Я мав схожу задачу на старті своєї ІТ кар’єри й ворогу його не побажаю. І якщо в мене таке питають на співбесіді, то майже напевно таке є на цій роботі й я туди не піду вже. Може через травматичний досвід з оптимізацією jQuery файликів на 20 тисяч рядків коду.
Але я розумію, що це більше приклад, до слова, так би мовити.

До речі, якщо у вас виникають додаткові питання стосовно питань, це теж, по суті, частина відповіді на них. Питати про питання, напевно, так само важливо, як і відповідати на них.

Але за умови, що у вас нормальний інтервʼюєр.

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

Laravel з якимось готовим пакунком для дашбордів 🤣

я би дуже здивувався, почувши таку відповідь на питання з секції HTML/CSS ) Зараз підфіксаю в тексті )

Але б одразу було зрозуміло що людина шарить 😁

Підписатись на коментарі