Тестирование навыков работы с HTML/CSS/Javascript при найме

Когда вы нанимаете стороннего разработчика, какие конкретные навыки и методы вы должны тестировать? Что такое хороший показатель для оценки их навыков в HTML, CSS и Javascript?

Очевидно, что нечеткие семантические HTML и чистые CSS-макеты, вероятно, являются ключевыми навыками. Но как насчет конкретных методов? Должен ли он/она быть в состоянии легко макетировать многоколоночный макет? CSS спрайты? Столбец равный по высоте (или искусственный)? Имеет ли смысл HTML-тег (т.е. Слишком сильно полагается на <div>)? Должны ли они быть в состоянии объяснить (на словах), как работают поплавки?

А как насчет навыков javascript? Насколько важен рамочный опыт (jQuery, Prototype и т.д.). сегодня?

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

Ответ 1

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

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>

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

Тогда это сводится к подходу, который принимает кандидат.

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

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

Ответ 6

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

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

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

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

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

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

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

Ответ 7

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

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

Ответ 8

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

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

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

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

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

Ответ 9

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

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

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

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

Ответ 10

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

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

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

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

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

Ответ 11

Очевидно, что ключевыми навыками являются, возможно, нечеткие семантические HTML и чистые CSS-макеты.

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

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

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

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

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

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

Ответ 12

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

Ответ 13

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

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