Проверка навыков HTML / CSS / Javascript при приеме на работу

Я бы не стал придавать этому большое значение, поскольку правильный HTML / CSS настолько прост, что любой может изучить его за неделю.

Тем не менее, вы можете просмотреть их портфолио, чтобы принять решение об их текущем уровне квалификации.

Попросите портфолио, а затем просмотрите его со своей командой. Это позаботится о позерах и людях, которые «плохо справляются с интервью».

Помимо этого, я бы подарил им что-нибудь относительно простое, чтобы их можно было смоделировать, и ноутбук, и сказал бы: «Попробуйте».

Может быть, спросите их, что им больше всего нравится в веб-дизайне сегодня и что они больше всего ненавидят. Спросите их мнение о том, что грядет (HTML 5, IE 8, Chrome и т. д.), Чтобы узнать, будут ли они в курсе того, что выходит.

Спросите их, есть ли у них любимый фреймворк JavaScript и почему. Может быть, пусть они закодируют что-нибудь на JS, как известная проблема с шипением.

Когда я беру интервью у людей на позицию клиентского разработчика, я пытаюсь выяснить:

1) Understanding DOM (what is that, how is it related to HTML etc)
2) Understanding XML/namespaces
3) Understanding JavaScript (object-oriented? what otherwise)
4) Knowing approaches to componentization (XBL, HTC) - plus
5) Understanding OO principles
6) JavaScript closures
7) Memory leaks in browsers

Единственный простой тестовый пример, который я даю сразу:

<script type = "text/javascript">
var a = 1;
</script>

Я предлагаю интервьюируемому объяснить эту строчку техническими терминами.

И я также проверяю общую осведомленность о текущем состоянии веб-технологий, среди других вопросов я предлагаю разработать веб-браузер, в котором интервьюируемому предлагается выбрать технологии, которые он поместит в свое новое создание, предложить те, которые могут отсутствовать в текущая клиентская платформа.

Сергей и Свиллиамс дали отличные ответы, в частности, упоминание Свиллиамса о просьбе предоставить портфолио является ключевым. С помощью портфолио вы также можете протестировать такие элементы, как,

• проверяет ли HTML и CSS?
• одинакова ли презентация в разных браузерах?
• у кандидата есть ошибки JavaScript? если они это сделают, то позволит ли человек им подняться на уровень представления или они, по крайней мере, поймают их с помощью блока try / catch?
• с точки зрения JS, насколько продвинутый человек? Могут ли они выполнить проверку формы? Могут ли они выполнять регулярное выражение? Они полагаются на MM_Preloader? (Фу!)

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

• как они приступили к разработке пользовательского интерфейса?
• какая планировка пошла на сайт?
• как были раскрыты / оправданы ожидания пользователей?
• какие трудности возникли при строительстве?

Помимо этих пунктов, вы, возможно, захотите рассмотреть еще один подход - это тест разработчика, который вы могли бы отправить потенциальному сотруднику. Ничего слишком сложного, что заняло бы больше дня, но достаточно головоломки, чтобы увидеть, смогут ли они справиться с проблемой CSS или JS.

Я знаю, что это не лучший ответ, но одно из первых, что я делаю, - это раскрываю форматирование их резюме в Word. Если они использовали отступы и стили, которые предлагает Word, и это не вкладка, вкладка, вкладка, пробел, пробел, пробел, пробел, тогда они идут на вершину кучи.

"

Очевидно, что ключевыми навыками, вероятно, являются семантический HTML без таблиц и чистый CSS.

"

Я не понимаю этого предложения ...

Вы действительно имеете в виду, что лучше выполнять простую задачу, используя таблицы сложным образом, чтобы избежать использования таблиц? -)

Табличная фобия - такая же тяжелая болезнь, как создание крупномасштабных веб-сайтов без серверной помощи ...

Конечно, адские таблицы последнего десятилетия неинтересны, но многие задачи действительно глупо выполнять без использования таблиц ...

Используйте html-элемент, который easyist завершает задачу, независимо от того, какие тэги он использует! -)

- и я не понимаю, что такое «чистый css-layout»; Я так и не понял, как создать html-страницу без html-элементов для размещения макета в таблице стилей ...

Понимание того, чем отличаются браузеры, также является ключевым моментом. Особенно IE. Если они когда-либо кодировали только для IE, будьте осторожны! Vica Versa тоже: если они никогда не тестировали свои вещи в IE6 / 7, они понятия не имеют, насколько ужасно это терпит неудачу.

Если они могут назвать 3 вещи, которые терпят неудачу, или нуждаются в обходных решениях в IE, то они, вероятно, на высоте. Если они не могут, значит, у них еще недостаточно опыта работы в разных браузерах.

Спасибо за все ответы. Это определенно хороший совет. Однако я не готов отметить его как принятый. На самом деле я искал конкретные задачи, которые фронтенд-разработчики должны иметь возможность выполнять в тестовой среде. Другими словами, что такое FizzBuzz для CSS?

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

@JonathanHolland - Я не согласен. HTML / CSS, безусловно, легко изучить, но знания, полученные из нескольких быстрых руководств, ничто по сравнению с теми, кто годами занимается версткой. Хороший разработчик CSS может использовать множество техник и практик.

@roenving - Возможно, я был лишним. Под "чистым CSS" я имел в виду безтабличный. Я также имел в виду отсутствие таблиц в том смысле, что не использую таблицы в качестве методологии компоновки. Однако это не вопрос обсуждения компоновки div-vs-table. Попробуйте здесь. Хотя я считаю, что большинство работодателей в наши дни будут спрашивать, может ли разработчик делать макет без использования таблиц (в качестве методологии).

Я спрашиваю людей, какие инструменты они используют, как кодируют, то есть используют ли они DreamWeaver, BBEdit, emacs или что-то еще. Предполагая, что они не просто дают односложный ответ, вы обычно получаете некоторое представление о том, каковы их приоритеты, как они кодируют и т.

Затем я спрашиваю, как они проверяют свой код, что всегда интересно.

Помимо фактического тестирования, когда они садились и раскололи страницу, я бы попросил их привести конкретные примеры проделанной ими работы и способы решения проблемы.

Например, вы говорите "расскажите нам о работе, где вы были в строгий срок" или "расскажите нам о действительно неприятной проблеме и о том, как вы ее преодолели" или "В работе, которую вы проделали недавно, чем вы больше всего гордитесь?".

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

Раньше мы либо составляли для них небольшой бриф, чтобы они работали в течение определенного периода времени, либо в некоторых случаях заключали с ними контракт и смотрели, как они продвигаются.

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

Точный характер задания будет во многом зависеть от набора навыков, который вы ищете. В некоторых магазинах разработчики внешнего интерфейса должны будут взять на себя определенную долю заполнения пробелов в дизайне и / или выполнять обязанности «полиции бренда», поскольку они реализуют «атмосферу» дизайна .
В таких случаях, если оставить некоторые пробелы в брифе, касающиеся некоторых тонкостей типографики и других мелких деталей, это может дать вам некоторые подсказки относительно их способностей в этих отношениях. Позвольте им выбрать фреймворк javascript, выбрали ли они тот, который лучше всего подходит для работы, или тот, который они знали. (субъективный вопрос, да. Но затягивание додзё ради датпикера и некоторых анимаций меню может быть излишним)

Я бы поискал кого-нибудь, кто может реализовать макеты на основе CSS, но на самом деле может работать с макетами на основе таблиц, если это необходимо при работе с устаревшими проектами. Какими бы оклеветанными они ни были, некоторые из тонких деталей хакерского макета стола не всегда были легкими.

Главное в такого рода задачах - это внимание к деталям, добавили ли они набор правил стиля для печати, использовали ли соответствующие размеры и форматы изображений, создали чистый и достоверный код, пошли ли они за золотом, потому что им действительно нужна работа, и готовы немного потянуться, чтобы его получить.

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

Добавьте изогнутый шар из того, чего они раньше не делали ... посмотрите, насколько хорошо они это сделают в спешке. Опыт - это хорошо, но способность быстро учиться, вероятно, важнее в области, которая так быстро меняется.

В моей компании мы не работаем с тестами, и портфолио важнее, особенно потому, что мы склонны смотреть на личную мотивацию кандидата и его страсть к фронтенд-разработке.

Но если бы я проверил кандидата перед приемом на работу, я бы поступил так:

Раздайте распечатку отфотошопированной веб-страницы, представляющую четкое семантическое дерево компонентов внизу. Спросите человека, как он или она пришел бы к результату в html. Просто попросите его или ее подумать вслух. Что приходит в голову, когда видишь страницу, зная, что ее нужно развить.

Затем все сводится к подходу кандидата.

Выбор наилучшей доступной разметки для каждого конкретного раздела html является одним (важным) аспектом, но с ним можно справиться с помощью опытных людей, которые будут направлять нового сотрудника. Возможность правильно разбить дизайн на его семантические компоненты, идентифицировать разделы и отделить первичный и вторичный контент от навигации - это не математика или естествознание, поэтому их сложно проверить. Но разговор о подходе к разбивке страницы может отделить опытных людей от новичков.

Но, как я сказал в своей первой строке, мы обычно спрашиваем, какую работу, связанную с Интернетом, человек выполнял в свое свободное время, например, блог, игру или демонстрацию. Если что-то и делал, человек обычно действительно хорошо разбирался в интерфейсной разработке или стремился учиться и адаптироваться.

У меня нет опыта приема на работу, но я посетил несколько собеседований с веб-разработчиками и могу поделиться своим опытом.

Из всех моих собеседований один метод действительно выделился как лучший способ раскрыть настоящий талант. Я признаю, что я не эксперт, и, вероятно, поэтому я не получил эту работу, но это был фантастический способ отсеять тех, кто был способным, и тех, кто был велик.

Нам задали пару вопросов о DOM, объектной ориентации, замыканиях, пространствах имен XML и общем веб-дизайне, затем нас отвели в тихий офис с прекрасным видом на близлежащую реку и попросили написать несколько примеров, чтобы продемонстрировать наши способности. . Нас оставили в покое, но нам сказали, что исходный код и история нашего браузера будут просмотрены позже, если нам понадобится использовать браузер. Нас попросили создать интранет компании, используя следующее:

• Простая трехколоночная компоновка
• Красивая таблица с использованием CSS
• Удобная, но красивая панель навигации.
• Динамическая загрузка с использованием XML и JavaScript

Если у вас будет немного времени на это, вы увидите людей, которые действительно могут это сделать. Хотя, возможно, их пример всегда мог быть лучше или более подходящим для различных приложений, он просто показывает, что лучший способ показать навыки разработчика - это заставить их что-нибудь сделать!. Если вы знаете свои вещи, и они знают свои вещи, их код будет хорош.

Я могу предложить вам онлайн-тест, который включает вместе HTML, CSS и JavaScript.

http://tests4geeks.com/test/html-css-javascript

В нем 60 вопросов (по 20 по каждой теме). И вы получите отчет по электронной почте, когда кандидат завершит тест.