Front End Developer Interview Questions

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

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

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

<a name='toc'>Содержание</a>

  1. Первоначальные авторы
  2. Общие вопросы
  3. Вопросы по HTML
  4. Вопросы по JavaScript
  5. Примеры кода на JavaScript
  6. Вопросы по jQuery
  7. Вопросы по CSS
  8. "Светская беседа"

####[⬆] <a name='contributors'>Первоначальные авторы</a>

  • @bentruyman (http://bentruyman.com)
  • @cowboy (http://benalman.com)
  • @roger_raymond (http://twitter.com/iansym)
  • @ajpiano (http://ajpiano.com)
  • @paul_irish (http://paulirish.com)
  • @SlexAxton (http://alexsexton.com)
  • @boazsender (http://boazsender.com)
  • @miketaylr (http://miketaylr.com)
  • @vladikoff (http://vladfilippov.com)
  • @gf3 (http://gf3.ca)
  • @jon_neal (http://twitter.com/jon_neal)
  • @wookiehangover (http://wookiehangover.com)
  • @darcy_clarke (http://darcyclarke.me)

####[⬆] <a name='general'>Общие вопросы:</a>

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

####[⬆] <a name='html'>Вопросы по HTML:</a>

  • Для чего нужен doctype и сколько разновидностей Вы можете назвать?
  • В чем разница между standards mode и quirks mode?
  • Какие ограничения накладывают стандарты XHTML?
    • Могут ли возникнуть проблемы при подаче страниц с типом application/xhtml+xml?
  • Как следует оформлять страницу, в которой контент может быть на разных языках?
    • Что нужно иметь в виду при разработке многоязычных сайтов?
  • Можно ли использовать синтаксис XHTML в HTML5?
  • Как использовать XML в HTML5?
  • Чем полезны data- атрибуты?
  • Какие box-модели есть в HTML4 и есть ли отличия в HTML5?
  • Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит?
  • Объясните разницу между cookies, sessionStorage и localStorage.
  • Знакомы ли с подводными камнями вёрстки почтовых шаблонов?
  • Какая разница между GET и POST?

####[⬆] <a name='js'>Вопросы по JavaScript:</a>

  • Какими js-библиотеками Вы пользовались?
  • Вы когда-нибудь заглядывали в исходный код библиотек/фреймворков, которыми пользовались?
  • Чем JavaScript отличается от Java?
  • Что-такое хэш-таблица?
  • Что такое неопределенные (undefined) и необъявленные (undeclared) переменные?
  • Что такое замыкание и как/для чего его используют?
    • Как вы предпочитаете их использовать?
  • Где обычно используются анонимные функции?
  • Объясните "JavaScript module pattern" и где он (паттерн) применяется
    • Бонус, если упомянута чистота глобального пространства имен
    • Что, если Ваш модуль не заключен в пространство имен?
  • Как Вы организуете свой код? (module pattern, наследование)
  • В чем разница между host-объектами и нативными объектами?
  • В чем разница между последними двумя строчками:
javascriptCopy to clipboard
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?
  • Сделайте так, чтобы этот код работал:
javascriptCopy to clipboard
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Опишите принцип мемоизации (избежание повторных вычислений) в JavaScript
  • Почему тернарный оператор так называется?
  • Что такое арность функции?
  • Что делает строчка "use strict";? Какие достоинства и недостатки от ее использования?

####[⬆] <a name='jscode'>Примеры кода на JavaScript</a>

javascriptCopy to clipboard
~~3.14

Вопрос: Какое значение возвращает данное предложение? Ответ: 3

javascriptCopy to clipboard
"i'm a lasagna hog".split("").reverse().join("");

Вопрос: Какое значение возвращает данное предложение? Ответ: "goh angasal a m'i"

javascriptCopy to clipboard
( window.foo || ( window.foo = "bar" ) );

Вопрос: Чему равно window.foo? Ответ: "bar", только если выражение window.foo было ложным, иначе переменная сохранит своё изначальное значение

javascriptCopy to clipboard
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Вопрос: Что покажут эти два alert? Ответ: "Hello World" и ReferenceError: bar is not defined

javascriptCopy to clipboard
var foo = [];
foo.push(1);
foo.push(2);

Вопрос: Чему равно foo.length? Ответ: 2

javascriptCopy to clipboard
var foo = {};
foo.bar = 'hello';

Вопрос: Чему равно foo.length? Ответ: undefined

####[⬆] <a name='jquery'>Вопросы по jQuery:</a>

  • Объясните "chaining".
  • Объясните "deferreds".
  • Какие Вы знаете приемы оптимизации кода, использующего jQuery?
  • Что делает .end()?
  • Как добавить пространство имён к обработчику событий? Для чего это нужно?
  • Назовите 4 разных вида аргументов, которые принимает функция jQuery()?
    • Селектор (строка), HTML (строка), Callback (функция), HTMLElement, объект, массив, массив элементов, объект jQuery etc.
  • Что такое очередь эффектов (fx queue)?
  • В чем разница между .get(), [], и .eq()?
  • В чем разница между .bind(), .live(), и .delegate()?
  • В чем разница между $ и $.fn? Что вообще такое $.fn?
  • Оптимизируйте данный селектор:
javascriptCopy to clipboard
$(".foo div#bar:eq(0)")

####[⬆] <a name='css'>Вопросы по CSS:</a>

  • Что такое "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-дисплеями?
  • Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)?
    • Если да, то в чем её суть? Расскажите о системе нотификации селекторов.

####[⬆] <a name='fun'>"Светская беседа":</a>

  • Самое крутое, что Вы когда либо делали и чем гордитесь?
  • Вы знаете секретный жест 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: хорошая библиотека или великая библиотека? Тема для дискуссии...