На Хабре уже было 244 статьи о карьере, тысячи комментариев о плохих собеседованиях разработчиков и множество недовольных программистов всех сортов и расцветок. Не то что бы это был необходимый минимум для успешного найма, но когда начал давать тестовые задания, становится сложно остановиться.
Верстальщик — такой человек, который хорошо разбирается в HTML и CSS и немного знает JavaScript. Ну то есть понимает, как в целом всё работает, но сильно не погружается. При этом бывает непросто выбрать хорошего верстальщика, потому что всех учат по-разному.
Чтобы решить эту проблему, собираем в одном месте опыт десятков собеседований с верстальщиками. Вместе с Дашей Владыко из фронтенд-аутсорса «Лига А.» рассказываем, на что смотреть в тестовом задании джунов и мидлов, и как отличить хороший результат от плохого. Плюс несколько практических советов — например, как выбирать плагины.
На что смотреть в целом
Соответствует ли результат ТЗ? Всё работает? Всё заверстано? Джуну прощаются мелкие недочёты, но он хотя бы показывает что хотел сделать как можно лучше, просто пока не хватает практики. Если сделано спустя рукава, то это тоже видно.
Пример: сверстать «аккордеон»
Соответствие ТЗ: аккордеон завёрстан по макету, нет ошибок в HTML. JavaScript написан без onclick, код для аккордеона можно переиспользовать на других страницах и блоках.
Если аккордеон завёрстан, но при нажатии на кнопку ничего не происходит, то не работает. Для мидла это минус, джуну можно простить, если к внешнему виду и семантике не подкопаться. Джуну также прощается, если JavaScript есть, но в семантике есть ошибки или результат немного не соответствует макету (другие отступы, например, или забыл про уголки).
Предусмотрено ли переполнение? Сильно ли едет макет при добавлении или удалении элементов? Можно ли ввести 4 строки, если в дизайне нарисовано 2? Предусмотрены ли максимальные и минимальные размеры?
Мидлы обычно предусматривают ситуации, когда сайт нуждается в доработке или клиент попросит что-либо поменять. При продуманном переполнении верстка не едет.
Столько плюсов каждому по нраву
Как оформлена сборка? Есть readme? Запускаются таски из gulp? Такие мелочи показывают, есть ли у человека опыт в разработке. Обычно, когда сверстаешь пару проектов, учишься наводить порядок в файлах и умеешь работать с таск-менеджерами. В идеале нужна чистая сборка: всё разложено по папкам, комментарии убраны, лишних файлов нет.
Выделяются ли компоненты? Проект у мидла — «конструктор», где блоки можно менять местами и ничего не ломается.
Как подключаются скрипты и стили? Есть ли инлайн? Есть ли onclick="" или style=""? Джуну какие-то вещи простить можно, мидлу нет.
Можно ли скачать из гита? Не очень хорошо, когда ссылка на папку, а тестовое лежит в архиве. Я хочу скачать проект, посмотреть, как работает сборка, как выглядит готовая страница, а не только увидеть код.
Как реализованы ховеры и адаптив? Это не обязательно, но будет плюсом, показывает опыт и аккуратность. Сразу видно, как человек импровизирует, так как в макете не рисуются разные состояния кнопок. Хорошая импровизация показывает, что человек может заморочиться и сделать «вау» потому что ему хочется так сделать, а не потому что так сказал босс.
Ховеры на сайте «Лиги А.»
HTML
Что с семантикой? Есть ли header/main/footer? Правильно ли построена разметка по макету?
Правильная ли вложенность? Если лишние обёртки? Здесь сразу видно опыт — у новичков бывает много лишних дивов.
Как вставлены картинки? Предусмотрены ли webp и ретина?
Как оформлены векторные элементы? Вектор это точно SVG, а не PNG? В тестовом задании мы обращаем внимание на сжатие SVG (вручную или через таск-менеджеры) и как элементы вставлены в разметку (лучше всего использовать спрайты для иконок, а не псевдоэлементы или img).
Вот что может случиться, если не подумать о графике заранее:
Внеклассное чтение:
Как свёрстана форма? Есть ли ховеры и фокусы? Какая кликабельность у элементов?
Что сделано для обеспечения доступности? Это не обязательно в тестовом задании, но будет плюсом и хорошим знаком.
CSS
«Прибит» ли футер к низу экрана? Очень практическая штука, которая показывает опыт кандидата.
Как написана сетка? Используются гриды или флексы? Если сетка кривая, то или человеку всё равно, или он ещё джун.
Как подключаются шрифты? Если как-то странно, например, в каждом font-face в качестве шрифтового семейства прописаны montserrat-thin, montserrat-bold вместо montserrat и указания жирности отдельным свойством, то это джун. Используются ли новые свойства вроде font-display или unicode-range? Они не обязательны, но если есть и они действительно там нужны, это плюс.
Используются ли препроцессоры? Это необязательно в тестовом задании, но упрощает разработку.
В JavaScript-коде
Эти требования, в основном, для мидлов. Джуну достаточно знаний HTML, CSS и аккуратной сборки проекта.
Есть ли хардкод? Код можно переиспользовать? Его можно прочитать? Проверьте, нет ли «лапши» и переменных типа a или b123. Простые алгоритмы, а не когда функция вызывает функцию функции. Не должно быть названий классов, которые отвечают за стили.
let a = 1
let b = 2
setTimeout(() => {
[a, b] = [b, a]
console.log(a) // 2
console.log(b) // 1
}, 0)Странный код для обмена значений двух переменных
Какая версия языка используется? Есть ли единообразие? Есть ли такое, что весь проект на ES5, а потом блок на ES6? Обычно это показатель того, что какой-то блока кода писал кто-то другой.
Пример смешивания:
Как разбит код? Это один огромный модуль (плохо) или есть деление на папки и скрипты, где 1 скрипт = 1 задача (хорошо)? Также не должно быть слишком много файлов, а вызов и обработка функции происходит в одном файле, а не в нескольких.
Используются ли плагины? Если да, то какие? Их много? Использование готового решения это неплохо. Сроки могут поджимать, а решение нужно прямо сейчас. Если плагин используется, то ожидается, что это будет легковесный скрипт, который недавно обновлялся, у которого хорошая документация. Если это jQuery или библиотеки на десятки мегабайтов, то это уже ерунда, а не решение.
Spoiler
const mailRegEx = /[a-zA-Z0-9]{1}([a-zA-Z0-9-.]{1,})?@[a-zA-Z]{1}([a-zA-Z0-9.]{1,})?[a-zA-Z0-9]{1}.[a-zA-Z]{2,}/;
const PHONEMINLENGTH = 18;
const showErrorIcon = (sth) => {
const input = sth.target || sth;
const errorIcon = input.closest('.custom-input').querySelector('.custom-inputerror');
if (!errorIcon.classList.contains('custom-inputerror--shown')) {
errorIcon.classList.add('custom-input_error--shown');
}
};
function IsNumeric(sText) {
var ValidChars = "0123456789.";
var IsNumber = true;
var Char;
for (i = 0; i < sText.length && IsNumber == true; i++) {
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1) {
IsNumber = false;
}
}
return IsNumber;
}Как выбрать нормальный плагин. Например, мы ищем слайдер и гугл выдал несколько вариантов:
https://kenwheeler.github.io/slick/
https://glidejs.com/
https://swiperjs.com/
Slick требует jQuery, у нас в проекте он не используется. Вычеркиваем.
Смотрим документацию. У glide она подробная, у swiper тоже. Если бы её не было, мы бы вычеркнули один из пунктов.
Переходим на гитхаб, посмотрим, как давно обновляли репозиторий.
https://github.com/nolimits4web/swiper - 11 минут назад
https://github.com/glidejs/glide - 23 дня назад
Оба варианты хороши. Если бы последние обновления были 2-3 года назад, мы бы вычеркнули один из пунктов.
Далее смотрим на вес. glide ~23kb, swiper ~140kb — значит, одно очко за glide.
Зачем нам плагин? У нас большой сайт с кучей анимаций, где нужно сделать слайдер в слайдере с 3D-эффектом перехода? Берем swiper, он как швейцарский нож, в котором есть почти всё. У нас одна страница с простыми переходами? Берём glide, в нём ничего лишнего.
Пример тестового задания
Сверстать макет (тут у каждой компании будет своя ссылка на фигму).
Требования:
Шапка всегда закреплена, у неё белый фон;
Фильтр должен сортировать карточки;
Кнопка «сбросить фильтр» показывается после того, как выбрали что-нибудь;
Адаптив на своё усмотрение.
Нельзя использовать jQuery;
Возможно использование плагинов JavaScript;
Использование Gulp или Webpack для сборки будет преимуществом.
С таким заданием будет гораздо проще искать фронтендера — хоть джуна, хоть мидла.
Вот и всё. Расскажите в комментариях своё отношение к тестовым заданиям, и что бы вы добавили или, наоборот, убрали из нашего списка.