Тестовое задание для фронтендера

    На Хабре уже было 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, в нём ничего лишнего.


    Пример тестового задания

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

    Учебный проект «Барбершоп» из курса «HTML и CSS. Профессиональная вёрстка сайтов»
    Учебный проект «Барбершоп» из курса «HTML и CSS. Профессиональная вёрстка сайтов»

    Требования:

    • Шапка всегда закреплена, у неё белый фон;

    • Фильтр должен сортировать карточки;

    • Кнопка «сбросить фильтр» показывается после того, как выбрали что-нибудь;

    • Адаптив на своё усмотрение.

    • Нельзя использовать jQuery;

    • Возможно использование плагинов JavaScript;

    • Использование Gulp или Webpack для сборки будет преимуществом.

    С таким заданием будет гораздо проще искать фронтендера — хоть джуна, хоть мидла.

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

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

    Нужны ли тестовые задания разработчикам?

    • 78,9%Нужны112
    • 21,1%Не нужны30
    HTML Academy
    Обучаем веб-разработке и меняем жизни

    Комментарии 23

      +1
      А кстати, почему jQuery у вас однозначно нельзя? Я нашел этот ответ, но там не так категоричны.
        0
        Думаю, здесь дали пример требований в тестовому заданию, которое позволяет узнать, как человек пишет на нативном JS, без использования всяких JQuery.

          +1
          Тогда явно сказали бы об этом в задании, зачем превращать в ловушку?
        +1

        Немного не в тему, но заглавная картинка с сайта http://www.fntb.ru/stab/rl/rd210117.htm, который с одной стороны имеет дизайн аля "мечта эпилептика". С другой стороны — все на месте, вся необходимая информация тут же — в один клик, не надо никуда ходить, искать как найти необходимый раздел, все есть на заглавной странице. А сам сайт очень быстрый, грузится моментально. А самое главное, что он живет и вся информация оперативно обновляется.

          +1

          Я вот всей душой люблю этот сайт, есть в нём что-то неуловимо прекрасное.

            +1
            Если долистать заглавную страницу до конца, можно увидеть глобус с резолвом локации посетителей. Вся Европа интересуется новостями федерации настолького тенниса Республики Башкортостан! /sarcasm
            скрин

            0
            Хочется что бы Лебедев его увидел
            0
            Как по мне, то fntb.ru уж слишком крипово. Мне лично очень нарвится дизайн и навигация на football.kulichki.net И сколько я его читаю, а это уже лет 10 наверное, дизайн у них один и тот же
              +1
              перешёл по ссылке и офигел от скорости загрузки. Реальный пример того, что веб может быть быстрым. Очень хотелось бы, чтобы все сайты грузились хотя бы максимум раза в три дольше, а не в тридцать как это сейчас везде
              +1

              Тестовые задани разработчикам нудны, но близко не такие.

                0

                А какие, по-вашему?

                0

                Недавно закончил курсы и статья прям для меня, но с одним я чутка не согласен. Вы действительно хотите, чтобы человек на тестовом задание верстал сайт? Это все же занимает время, а у новичка — много времени. Бесспорно — это опыт, но так можно штук 10 недобросовестных работодателей перебрать и верстать им нахаляву. А если я этим уже занимаюсь пол года, чтобы руку набить и надоело бесплатно это делать? Разве нет каких-то других тестов, более быстрых, чтобы подтвердить знания, указанные в резюме, если уже есть портфолио?

                  0

                  Нет, речь конечно не о целом сайте. Чтобы увидеть всё, о чём написано в статье, достаточно сверстать одну страницу с определённым набором элементов — шапкой, футером, форму с чекбоксами и карточку товара. Там есть всё, что нужно для проверки знаний и навыков.

                    0
                    так первая страница и шапкой и футером — это и есть по сути весь сайт…
                    0
                    А если я этим уже занимаюсь пол года, чтобы руку набить и надоело бесплатно это делать? Разве нет каких-то других тестов, более быстрых, чтобы подтвердить знания, указанные в резюме, если уже есть портфолио?

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

                      0
                      а вот это миф, большинство вакансий на ХХ предлагают в отклике сразу тестовое прикладывать и без него угрожают не рассматривать отклик.
                    +2
                    Думаю, что здесь нужно сделать дисклеймер: должен быть какой-то баланс, оценка ситуации в целом, а не слепое следование рекомендациям в вакууме. А то найдется кто-нибудь, кто буквально все прочитает. Например:

                    1. Вставить в страницу critical css может быть не такой уж и плохой идеей.
                    2. Убирать нужно _бесполезные_ комментарии. Если там описание того, почему применено нестандартное решение (например фиксит редкий баг), то такие комментарии убирать – себе в будущем вредить.
                    3. Про использование GitHub – согласен, но не вижу проблемы скачать архив и получить то же самое. Особенно если в самом задании не было указано, что можно все выкладывать в открытый доступ и это не обговорили.
                    4. Импровизация, выход за границы ТЗ – это хорошо, но сильно зависит от процессов в конкретном месте. Не всегда это нужно, и, если это ожидается, то наверное стоит так и сказать в задании.
                    5. Футер не всегда нужно прибивать. Пример с типографом вроде и так нормально выглядит. Его бы скорее разорвало в визуальном плане, если бы там был прибитый футер.
                    6. Новые CSS свойства сильно зависят от списка поддерживаемых браузеров. Светлое будущее наступило еще не везде, как это ни странно.
                    7. Странно, что здесь в целом не сказано про кроссбраузерность. Особенно по части Safari. И Firefox. Там с тем же SVG всякое веселье бывает. И уж навык кроссбраузерной верстки по списку должен подразумеваться на любом уровне компетенций.
                    8. “Не должно быть названий классов, которые отвечают за стили” — это, наверное, от методологии зависит.
                    9. Есть достаточно добротных небольших инструментов, которым не нужно обновляться. Они просто, без хайпа, решают конкретную задачу. То, что они не обновляются годами не говорит, что они вдруг перестали ее решать. Мне кажется странным от всех таких инструментов отказываться просто так, не глядя. Нужно смотреть каждый случай отдельно.
                      0
                      Странно, конечно, что использование css препроцессоров желательно, но нигде не оговаривается. Обычно, если не сказано обратного, используется чистый css же.
                        0
                        То чувство, когда ты знаешь человека, который делал сайт из заголовка статьи.

                        P.S. Работа не моя =)
                          +1
                          Попросите его на хабр написать, как он сайт делал, это будет весомый вклад в библиотеку статей. Вон первое апреля скоро, как раз будет отличный повод!

                          P.S. Лично я давно тот сайт видел, успел уже забыть эту икону веб-дизайна… А сейчас снова на КДПВ узрел, что в глазах до сих пор зайчики бегают. Матерь божья.
                          0
                          Интересно мнение автора статьи — сколько времени должен затратить кандидат на тестовое задание (насколько трудоемким оно должно быть), чтобы можно было увидеть большую часть моментов, отражённых в статье?
                            0

                            Только фронт не ограничивается версткой. Точнее вёрстка — малая часть фронта, которая не редко выделяется в отдельную команду.


                            В заголовке ищут фронта, а в тексте — верстальщика. Кликбейт?

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое