На конкурс для веб‑разработчиков прислал работу только один человек — Александр Панасин. Ему досталось всё внимание жюри :‑)
Александр предложил свой вариант встраиваемого анимированного флага, который поддерживает не только текст, но и картинки:
Хотя Александр в любом случае стал бы победителем, потому что был единственным участником, мы оценили его работу по всем критериям. Каждый член жюри дал оценку по пятибалльной системе, среднее арифметическое определило итоговую оценку работы Александра — 3,7 балла.
Комментарии жюри
Михаил Нозик
Думаю, для многих это уже не новость, но всё же скажу: хороший разработчик не просто умеет хорошо кодить, а вникает в смысл задуманного, держит в голове полезное действия и рассчитывает наперёд. Хороший разработчик не стесняется и не брезгует предложить улучшения.
В этом смысле очень здорово, что Александр подумал наперёд и реализовал возможность анимировать любое количество строк и не только текст. И приятно, что появилась возможность настраивать скорость анимации.
Из мелких придирок хочется отметить, что ссылка в левом верхнем флаге меняет цвет по клику только в том сегменте, на который я нажал. Стоило бы синхронизировать.
Александр, спасибо за участие!
Василий Половнёв
Для меня были важны три вещи:
надёжность — флаги встраиваются на любой сайт, ничего не ломают и сами не ломаются от стилей сайта;
гигиена кода — под капотом всё понятно, логично и аккуратно;
простота установки — флаги может установить человек с минимальными знаниями вёрстки.
Надёжность так себе. Стили флагов никак не изолированы. Я бы посоветовал использовать что‑нибудь из CSS‑in‑JS (например, style‑mod), чтобы генерировать уникальные и изолированные стили для флагов на лету.
Гигиена кода тоже подкачала. Смущает обилие бесполезных и вредных комментариев, build почему‑то возвращающий true или false и render, который на самом деле init.
Простота установки на уровне, но можно лучше. В первую очередь можно избавиться от подключения стилей: пусть этим занимается сам скрипт. Во вторую очередь можно сократить объём разметки:
<div class="project-flag js-project-flag" data-project-flag-speed="1000">
<div>Свобода</div>
<div>Равенство</div>
<div>Братство</div>
</div><div class="project-flag" data-duration="1000">
<div>Свобода</div>
<div>Равенство</div>
<div>Братство</div>
</div>И всё же работа мне очень понравилась: Александр здорово сократил и упростил стили, участвующие в анимации флагов. Поздравляю!
Игорь Петров
ХТМЛ‑шаблон, который предлагается для описания флагов, сложноват. Тяжело запомнить и не ошибиться в нужных классах и синтаксисе настройки скорости. Хочется сделать проще и надёжнее.
Во всём коде мне не понравилось соотношение сигнал‑шум. Кода много и большая его часть не относится к решению задачи, много избыточных комментариев. Это всё шум, который мешает увидеть и понять смысл и пользу кода. Хочется избавиться от шума и мусора, написать лаконичнее, оставить только то, что относится к задаче.
Ещё было требование, чтобы размером флагов можно было управлять. У Александра размер флага намертво фиксируется при инициализации, это уменьшает гибкость, размерами флага не получится управлять на ходу через ЦСС. Конечно, можно использовать ЦСС‑трансформации, но это не самое удобное и производительное решение.
Поздравляем Александра с победой и награждаем призом — тремя месяцами подписки на все лекции бюро.
Александр, чтобы получить свой приз, напишите мне по почте: petrov@bureau.ru