Инструмент для приятного контроля за качеством вёрстки на веб-проектах
Сравните вёрстку с дизайном
-
1 — дизайн
-
2 — вёрстка
-
3 — сумма
-
4 — разница
Как сравнить вёрстку с исходным макетом? Просто — наложить полупрозрачную картинку на настоящую вёрстку. Makeup делает это правильно! Все несоответствия видны сразу, если включить режим с инвертированным изображением [4].
Переключайте режимы отображения при помощи клавиатуры.
если ваша вёрстка основана на независимых блоках,
а вам небезразлична стабильность и надежность проекта
Добавьте состояния блока
Скорее всего, почти каждый блок в проекте будет использоваться в разных состояниях.
Состояния будут отличаться набором модификаторов, контентом.
Чтобы не держать всё в голове, сохраните все состояния для Makeup.
-
Дизайн
Добавьте в Makeup состояния, описанные в дизайне.
-
Экстрим
Проверьте блок на «экстремальных данных» — большие тексты, длинные слова.
-
Баги
Когда возникает баг, добавьте состояния блока, на которых он воспроизводился.
Когда наступит время регрессии, просто посмотрите, что на всех состояниях блок выглядит корректно.
Если состояния блока подробно описаны, риск сломать вёрстку новыми изменениями будет минимальным.
Интегрируйте!
-
Любое окружение
Работайте с любыми шаблонизаторами и фреймворками.
-
Автоматизация
Автоматизируйте сбор конфигурационного файла.
-
Документация
Храните ссылки на документацию под рукой.
Makeup — библиотека на JavaScript, предоставляющая графический интерфейс для просмотра независимых блоков в различных состояниях, заранее описанных в конфигурационном файле.
Мы придумали и используем Makeup для разработки новых блоков, контроля качества и комфортного ручного регрессионного тестирования вёрстки пользовательского интерфейса.
Для инициализации библиотеке понадобятся:
-
HTMLРесурсы приложения (разметка, стили)
-
PNGИзображения
из исходного
дизайна -
JSКонфигурационный файл