Питання кандидату на посаду front-end розробника
Питання кандидату на посаду front-end розробника
Примітка: Цей репозиторій містить підбірку питань, які можуть бути використані на співбесідах на посаду front-end розробника. Тут пропонуються лише ідеї, не варто задавати всі запитання відразу (інакше однієї години точно не вистачить).
Також, майте на увазі, що багато питань не потребують однозначної короткої відповіді, а лише допомагають завести бесіду на ту чи іншу тему (даючи змогу кандидату показати себе в усій красі).
Зміст
- Автори
- Загальні запитання
- Запитання по HTML
- Запитання по JavaScript
- Приклади коду на JavaScript
- Запитання по jQuery
- Запитання по CSS
- “Світська бесіда”
⬆ Автори:
Цей проект було засновано в 2009 році завдяки співпраці @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed та @iansym.
Наразі проект підтримують:
З тих пір він був активним завдяки цим чудовим людям.
⬆ Загальні запитання:
- Чому ви навчились вчора/цього тижня?
- Що цікавить та захоплює вас у програмуванні?
- З якою технологічною складністю вам довелося стикнутись нещодавно і як ви її вирішили?
- Чи можете ви розповісти про якісь техніки які ви використовуєте для підвищення продуктивності під час створення або підтримки веб-сайту?
- Опишіть деякі кращі практики використання SEO або техніки які ви нещодавно використовуватили?
- Чи можете ви пояснити будь-які типові техніки або нещодавні проблеми які ви вирішувати відносно безпеки (security) на front-end?
- Що особисто ви зробити на минулих проектах аби покращити підтримуваність свого коду?
- Поговоримо про середовище розробки якоми ви надаєте перевагу.
- З якими системами контролю версій (VCS) ви знайомі?
- Опишіть послідовність ваших дій під час створенння нової web-сторінки.
- У вас є 5 різних файлів зі стилями, яким чином їх найкраще інтегрувати на сторінку?
- Чи можете ви пояснити у чому різниця між progressive enhancement і graceful degradation?
- Яким чином ви б оптимізували ресурси веб-сайту?
- Скільки ресурсів одночасно браузер може завантажувати з одного домена?
- Які є виключення?
- Назвіть 3 способи зменшення часу завантаження сторінки (сприйманого або реального)
- Якщо ви прийшли на проект, де для форматування використовується табуляція, а ви звикли до пробілів, як ви вчинете?
- Опишіть як би ви реалізували просте слайд-шоу?
- Якби у вас була можливість опанувати одну нову технологію в цьому році, що б це було?
- Поясніть важливість стандартів і комітетів стандартизації.
- Що таке блимання нестилізованого контенту (Flash of Unstyled Content)? Як його уникнути?
- Поясніть що таке ARIA та читачі екрану та як зробити сайт доступним для людей з обмеженими здібностями?
- Поясніть деякі переваги та недоліки CSS анімації в порівннянні JavaScript анімацією?
- Як розшифровуюється CORS та які проблеми він вирішує?
- Як ви вирішуєте розбіжності у поглядах зі своїм керівником або іншим працівником?
- Які ресурси ви використовуєте аби дізнаватись про найсвіжіші тенденції у front-end розробці та дизайні?
⬆ Запитання по HTML:
- Для чого потрібен
doctype
і скільки різновидів Ви можете назвати? - В чому різниця між standards mode і quirks mode?
- Які обмеження накладають стандарти XHTML?
- Чи можуть виникнути проблеми при подачі сторінок із типом
application/xhtml+xml
?
- Чи можуть виникнути проблеми при подачі сторінок із типом
- Як слід оформляти сторінку, на якій контент може бути на різних мовах?
- Що потрібно мати на увазі при розробці багатомовних сайтів?
- Чи можна використовувати синтаксис XHTML в HTML5?
- Як використовувати XML в HTML5?
- Чим корисні
data-
атрибути? - Які box-моделі є в HTML4 і чи є відмінності в HTML5?
- Якщо розглядати HTML5 як відкриту web-платформу: на чому вона базується, з яких компонентів складається?
- Поясніть різницю між cookies, sessionStorage і localStorage.
- Чи знайомі з підводними каменями верстки поштових шаблонів?
- Яка різниця між
GET
іPOST
?
⬆ Запитання по JavaScript:
- Якими js-бібліотеками Ви користувалися?
- Ви коли-небудь заглядали в вихідний код бібліотек / фреймворків, якими користувалися?
- Чим JavaScript відрізняється від Java?
- Що-таке хеш-таблиця?
- Що таке
невизначені (undefined)
інеоголошені (undeclared)
змінні? - Що таке замикання і як / для чого його використовують?
- На Вашу думку, як слід їх використовувати?
- Де зазвичай використовуються анонімні функції?
- Поясніть “JavaScript module pattern” і де він (патерн) застосовується
- Бонус, якщо згадана чистота глобального простору імен
- Що, якщо Ваш модуль не укладено в простір імен?
- Як Ви організуєте свій код? (module pattern, наслідування)
- У чому різниця між host-об’єктами і нативними об’єктами?
- У чому різниця між останніми двома рядками:
function Person(){}
var person = Person()
var person = new Person()
- У чому різниця між
.call
і.apply
? - Що робить і для чого потрібен метод
Function.prototype.bind
? - Коли Ви оптимізуєте свій код?
- Поясніть, як працює наслідування в JavaScript?
- Де досі використовується
document.write ()
?- У більшості згенерованих банерів, хоча так робити не рекомендується
- У чому різниця між feature detection (визначення можливостей браузера), feature inference (припущення можливостей) і аналізом рядку user-agent?
- Розкажіть про AJAX якомога детальніше
- Поясніть, як працює JSONP (і чому це не справжній AJAX)
- Чи використовували Ви коли-небудь шаблонізації на JavaScript?
- Якщо так, які бібліотеки використовували? (Mustache.js, Handlebars etc.)
- Поясніть, що таке “hoisting”
- Поясніть event bubbling
- У чому різниця між “атрибутом” (attribute) і “властивістю” (property)?
- Чому не слід розширювати нативні JavaScript об’єкти?
- Коли слід розширювати нативні JavaScript об’єкти?
- У чому різниця між подіями
document load
іdocument ready
? - У чому різниця між
==
і===
? - Як отримати параметри з URL’а поточного вікна?
- Поясніть
same-origin policy
в контексті JavaScript - Розкажіть про
event delegation
- Які Ви знаєте патерни організації наслідування в JavaScript?
- Зробіть так, щоб цей код працював:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
- Опишіть принцип мемоізаціі (уникнення повторних обчислень) в JavaScript
- Чому тернарний оператор так називається?
- Що таке тернарність функції?
- Що робить рядок
" use strict ";
? Які переваги та недоліки від її використання?
⬆ Приклади на JavaScript
~~3.14
Питання: Яке значення повертає цей фрагмент коду?
Відповідь: 3
"i'm a lasagna hog".split("").reverse().join("");
Питання: Яке значення повертає цей фрагмент коду?
Відповідь: “goh angasal a m’i”
( window.foo || ( window.foo = "bar" ) );
Питання: Чому дорівнює window.foo?
Відповідь: “bar” (тільки якщо вираз window.foo був хибним, інакше змінна збереже своє початкове значення),
var foo = "Hello";
(function() {
var bar = " World";
alert(foo + bar);
})();
alert(foo + bar);
Питання: Що покажуть ці два alert?
Відповідь: “Hello World” и ReferenceError: bar is not defined
var foo = [];
foo.push(1);
foo.push(2);
Питання: Чому дорівнює foo.length?
Відповідь: 2
var foo = {};
foo.bar = 'hello';
Питання: Чому дорівнює foo.length?
Відповідь: undefined
⬆ Запитання по jQuery:
- Розкажіть про “chaining”.
- Розкажіть про “deferreds”.
- Які Ви знаєте прийоми оптимізації коду, що використовує jQuery?
- Що робить
.end()
? - Як додати простір імен до обробника подій? Для чого це потрібно?
- Назвіть 4 різних види аргументів, які приймає функція jQuery()?
- Селектор (рядок), HTML (рядок), Callback (функція), HTMLElement, об’єкт, масив, масив елементів, об’єкт jQuery тощо.
- Що таке черга ефектів (fx queue)?
- В чому різниця між
.get()
,[]
, і.eq()
? - В чому різниця між
.bind()
,.live()
, і.delegate()
? - В чому різниця між
$
і$.fn
? Що таке$.fn
взагалі? - Оптимізуйте даний селектор:
$(".foo div#bar:eq(0)")
⬆ Запитання по CSS:
- Що таке “reset” CSS і для чого він потрібен?
- Поясніть, що таке плаваючі елементи (floats) і як вони працюють?
- Які ви знаєте методи заборони обтікання (clearing) і де які застосовуються?
- Що таке CSS спрайт? Як вони реалізуються на сторінці або сайті?
- Які Ваші улюблені методи підміни тексту картинкою (image replacement) і коли Ви їх використовуєте?
- CSS property hacks, умовне підключення .css файлів…
- Як Ви забезпечуєте відображення сторінок в старих / обмежених браузерах?
- Які прийоми / процеси Ви при цьому використовуєте?
- Якими способами можна візуально приховати елемент (залишивши його доступним для екранного диктора, екранного зчитувача)?
- Ви коли-небудь використовували сіткову верстку (grid system, grid design)? Якщо так, яка Ваша улюблена?
- Чи доводилося Вам використовувати або реалізовувати media queries або верстку під мобільні пристрої?
- Чи доводилося Вам стилізувати SVG?
- Як оптимізувати сторінки для друку?
- Які є підводні камені в оптимізації продуктивності CSS?
- Ви використовуєте CSS препроцесори? (SASS, Compass, Bourbon, Stylus, LESS)
- Якщо так, розкажіть, що Вам в них подобається і не подобається?
- Як Ви зверстаєте макет, який використовує нестандартні шрифти?
- Webfonts (сервіси на кшталт Google Webfonts, Typekit, Fontsquirrel etc.)
- Розкажіть, як браузер визначає, на які елементи накладати CSS стилі?
- Чи доводилося стикатися з Retina-дисплеями?
- Чи чули про систему БЕМ (Блок-Елемент-Модифікатор)?
- Якщо так, то в чому її суть? Розкажіть про систему нотифікації селектор.
⬆ “Світська бесіда”:
- Найкрутіше, що Ви коли небудь робили і чим пишаєтесь?
- Чи знаєте Ви секретний жест HTML5-банди?
- (неперекладаємий гумор) Are you now, or have you ever been, on a boat.
- Що Вам найбільше подобаються у Ваших інструментах розробника?
- У Вас є якісь особисті проекти?
- Візьміть аркуш паперу і напишіть в стовпчик букви A B C D E. Тепер відсортуйте стовпчик в алфавітному порядку за спаданням, не написавши жодного рядка коду.
- Засічіть, через скільки часу кандидат переверне аркуш
- Пірат або ніндзя?
- Бонус за комбінацію. Аргументовану. +2 за зомбі-пірат-ніндзя-мавпу
- Чим би Ви займалися, якщо не Web-розробкою?
- Яка Ваша улюблена “фішка” Internet Explorer?
- Закінчіть речення: Brendan Eich та Doug Crockford є __________ мови JavaScript.
- jQuery: хороша бібліотека або велика бібліотека? Тема для дискусії…