15 мая 2015 / Фронтенд

Вопросы для собеседования кандидату на должность Front-end разработчика

Это перевод популярного репозитория от html5bp — Front-end Job Interview Questions (en), который существует с 2009 года. Список вопросов составлялся и дополнятся известными во front-end людьми, поэтому на этот список можно положиться. Перевод делал не я (вернее я хотел, но он оказался уже переведен).

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

Также, имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).

Общие вопросы: [↑]

Вы пользуетесь Твиттером?
- Если да, то кто присутствует в вашей ленте?
Кого из мировых front-end разработчиков вы знаете?
- А российских front-end’щиков?
У Вас есть аккаунт на GitHub?
- Если да, то за какими интересными проектами вы следите?
Какие блоги Вы читаете?
Какие системы управления версиями вам приходилось использовать?
Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
Опишите последовательность Ваших действий, когда вы создаете новую Web-страницу
Можете ли пояснить разницу между progressive enhancement и graceful degradation?
- Бонус, если также расскажете про feature detection (определение возможностей браузера)
Объясните, что означает «Семантическая разметка»
Какой Ваш основной браузер для разработки и какими инструментами Вы в нем пользуетесь?
Как можно оптимизировать загрузку внешних ресурсов на странице?
- Комбинация из потенциальных решений:
  - Конкатенация
  - Минификация
  - Использование CDN
  - Кэширования
  - и т.д.
Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?
- Сколько ресурсов браузер может одновременно качать с одного домена?
Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)
Если Вы присоединились к проекту, где для форматирования используются табы, а Вы привыкли использовать пробелы, как Вы поступите?
- Предложите использовать EditorConfig (editorconfig.org)
- Останетесь верным своим привычкам
- Выполните команду :retab!
Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)?
Знакомы ли с шаблонизаторами (Smarty, HAML etc.)
Реализуйте примитивное слайд-шоу
- Бонус, если Вы это сделаете без использования JS
Какие инструменты Вы используете для тестирования производительности кода?
- JSPerf (jsperf.com)
- Dromaeo (dromaeo.com)
- и т.д.
Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было?
Объясните важность стандартов и комитетов по стандартам
Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?

Вопросы по HTML: [↑]

Для чего нужен doctype и сколько разновидностей Вы можете назвать?
В чем разница между standards mode и quirks mode?
Какие ограничения накладывают стандарты XHTML?
- Могут ли возникнуть проблемы при подаче страниц с типом application/xhtml+xml?
Как следует оформлять страницу, в которой контент может быть на разных языках?
- Что нужно иметь в виду при разработке многоязычных сайтов?
Можно ли использовать синтаксис XHTML в HTML5?
Как использовать XML в HTML5?
Чем полезны data- атрибуты?
Если рассматривать 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 etc.
Что такое очередь эффектов (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, conditionally included .css files…
Как Вы обеспечиваете отображение страниц в старых/ограниченных браузерах?
- Какие приёмы/процессы Вы при этом используете?
Какими способами можно визуально скрыть элемент (оставив его доступным для экранного диктора, screen reader)?
Вы когда-нибудь использовали сеточную верстку (grid system, grid design)? Если да, какая Ваша любимая?
Приходилось ли вам использовать или реализовывать media queries или верстку под мобильные устройства?
Приходилось ли вам стилизовать SVG?
Как оптимизировать страницы для печати?
Какие есть подводные камни в оптимизации производительности CSS?
Вы используете CSS препроцессоры? (Sass, Compass, Bourbon, Stylus, LESS)
- Если да, расскажите, что вам в них нравится и не нравится?
Как Вы сверстаете макет, который использует нестандартные шрифты?
- Webfonts (сервисы вроде Google Webfonts, Typekit, Fontsquirrel etc.)
Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
Приходилось ли сталкиваться с Retina-дисплеями?
Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)?
- Если да, то в чем её суть? Расскажите о системе нотификации селекторов.

«Светская беседа»: [↑]

Самое крутое, что Вы когда либо делали и чем гордитесь?
Вы знаете секретный жест HTML5-банды?
Что Вы больше всего любите в Ваших инструментах разработки?
У Вас есть какие-нибудь личные проекты?
Возьмите листок бумаги и напишите в столбик буквы A B C D E. Теперь отсортируйте столбик в алфавитном порядке по убыванию, не написав ни строчки кода.
- Засеките, через сколько времени кандидат перевернет листок
Пират или ниндзя?
- Бонус за комбинацию. Аргументированную. +2 за зомби-пират-ниндзя-обезьяну
Чем бы Вы занимались, если бы не Web-разработкой?
Какая Ваша любимая «фишка» Internet Explorer?
Закончите предложение: Brendan Eich и Doug Crockford являются ____ языка JavaScript.
jQuery: хорошая библиотека или великая библиотека? Тема для дискуссии…