Комментарии 10
1. do: получить выдачу по запросу «лучшие сериалы 2017»
2. assert: не должно быть сериала True Detective, последний сезон которого вышел в 2015
Я, конечно, верю, что умный поиск — это большая и сложная задача. Но интерфейс поиска у вас крайне прост. Даже с учётом всех колдунщиков и аж целых 20 чекбоксов в настройках. Так что ваши "35 000 стилей, 160 000 строк шаблонов", говорят не о том, что у вас много функциональности, которую надо тестировать, а о том, что у вас очень много копипасты и почти отсутствует переиспользование кода. И за примером далеко ходить не надо. Открываем настройки поиска и видим стандартные отполированные выпадающие списки:
То, что текст не выровнен, а обводка вокруг выпадающего блока почти не видна, оставим на совести дизайнера. Открываем колдунщик по сериалам и видим следующую порнографию:
Ну ок, давайте посмотрим код:
<button class="button2 button2_width_max button2_size_m button2_theme_dark button2_view_classic select2__button i-bem button2_js_inited _popup2-destructor _popup2-destructor_js_inited" data-bem="{"button2":{}}" type="button" autocomplete="off" tabindex="0" role="listbox" aria-labelledby="uniq1515975375759707652" aria-expanded="false">
<span class="icon icon_size_m icon_type_arrow-up-down button2__icon button2__icon_side_right select2__arrow i-bem icon_js_inited">
<div class="icon__arrows"></div>
</span>
<span class="button2__text" id="uniq1515975375759707652">любой жанр</span></button>
Див внутри спана и выключенный автокомплит у кнопки… теперь я видел всё. Если вы руками прописываете все эти классы и атрибуты для каждой кнопочки, то не удивительно, что у вас 160000 строк шаблонов.
Но особенно мне нравятся вот эта портянка для рисования треугольника:
.icon_type_arrow-up-down .icon__arrows:before {
bottom: 50%;
margin: 0 0 -7px -3px;
border-width: 6px 3px 0;
border-top-color: currentColor;
}
.icon_type_arrow-up-down .icon__arrows:after, .icon_type_arrow-up-down .icon__arrows:before {
position: absolute;
left: 50%;
width: 0;
height: 0;
content: '';
border: solid transparent;
}
И это вместо простейшей иконки:
<svg viewBox="0 0 24 24">
<path d="M7 14l5-5 5 5z"/>
</svg>
Не удивительно, что вам нужно 40 фронтендеров всё это разгребать :-)
Как это могло бы выглядеть при правильном проектировании:
<ya_button ya_search_serial_genre ya_select_trigger ya_button ya_view role="button" tabindex="0">
Любой жанр
<svg ya_search_serial_genre_trigger_icon ya_select_trigger_icon ya_icon ya_view viewBox="0 0 24 24">
<path ya_search_serial_genre_trigger_icon_path ya_select_trigger_icon_path ya_icon_path ya_view d="M7 14l5-5 5 5z"/>
</svg>
</ya_button>
И это даже не руками написанный код, а сгенерированный из такого вот исходника:
<= Trigger $ya_button sub /
<= value_view \
<= Icon $ya_icon path \M7 14l5-5 5 5z
2) Статья одного маркетолога для других. Так никакой конкретики и не нашёл. Полстатьи шуток-прибауток, затем поток названий всевозможных инструментов. А применять это как? Показали бы пару примеров НЕ «Hello world». Раз у вас такая крутая команда, могли бы что-нибудь интересное наскрести.
Тестируем пользовательские сценарии вместе с «Гермионой». Лекция Яндекса