Контроль качества верстки или как начать делать Makeup

Тимофей Чаптыков

tim.chaptykov@gmail.com @chaptykov

Makeup

Инструмент для быстрого и комфортного регрессионого тестирования вёрстки, основанной на абсолютно независимых блоках.

Боль

Как измерить качество работы?

Критерии качества вёрстки

Соответствие макету;
кроссбраузерность.

Реализация


<!-- Кладем картинку с макетом -->

<img src="index.png" id="psd">


/* Позиционируем поверх сайта */

#psd {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -640px;
	opacity: .5;
	pointer-events: none;
	}


/* Позиционируем поверх сайта */

#psd {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -640px;
	opacity: .5;
	pointer-events: none; /* вёрстка остается кликабельной */
	}


/* Можем даже инвертировать */

#psd {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -640px;
	opacity: .5;
	pointer-events: none;
	-webkit-filter: invert(100%);
	}


/* И прятать по наведению */

#psd {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -640px;
	opacity: .5;
	pointer-events: none;
	-webkit-filter: invert(100%);
	}
body:hover #psd {
	opacity: 0;
	}

Так работают

JS-плагины;
расширения для браузера.

И всё бы хорошо, но…

АНБ

Страница → Блок

Страница → Блок × Состояние

Держим в голове

132

блока

5

состояний

660

кейсов

«Быстрый» способ

⌘ + Shift + Control + 4, скриншот области в буфер;
⌘ + Tab, идем в Фотошоп;
⌘ + v, вставляем;
5, прозрачность 50%;
v, двигаем;
Shift + Arr или Arr × n раз, пока не совместим с макетом;
Delete, удаляем слой.

Правим CSS, повторяем, пока макет не станет идеальным.

Makeup

Makeup решает проблему на раз-два-три

1

2

3

4

[ ]

– +

Теперь вы умеете пользоваться Мейкапом

Интеграция

Getting started

Демо


var s=document.createElement('script');s.src ="//2gis.github.io/makeup/autoload/script.js";document.body.appendChild(s)

1. Сохраняем изображения


<!-- 2. Новая страница со всеми ресурсами -->

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Makeup</title>
	<link rel="stylesheet" href="style.css"> <!-- Стили проекта -->
</head>
<body>
	<button class="button">My button</button> <!-- Разметка -->
</body>
</html>


<!-- 3. Добавляем Мейкап -->

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Makeup</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="makeup.css"> <!-- Стили Мейкапа -->
</head>
<body>
	<button class="button">My button</button>
	<script src="makeup.js"></script> <!-- Привет, Мейкап -->
</body>
</html>


<!-- 4. Прячем разметку -->

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Makeup</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="makeup.css"> <!-- Стили Мейкапа -->
</head>
<body>
	<div style="display: none;">
		<button class="button">My button</button>
	</div>
	<script src="makeup.js"></script> <!-- Привет, Мейкап -->
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<title>Makeup</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="makeup.css">
</head>
<body>
	<div style="display: none;">
		<button class="button">My button</button>
	</div>
	<script src="makeup.js"></script>
	<script>
		// 5. Инициализируем Мейкап
	</script>
</body>
</html>


// 5. Инициализируем Мейкап

new Makeup({

	// Функция, которая создает блок в Мейкапе
	renderModule: function(module) {
		var container = this._params.selectors.containerMarkup,
            html = $('.' + module.modulename)[0].outerHTML;

        $(container).html(html);
	},

	// Конфиг
	data: {
		name: 'Blocks',
		items: [{
			name: 'button',
			image: 'button.png'
		}]
	}
});

Готово!

Интеграция

Формат данных

Добавляем на любой уровень


{
	// Имя
	"name": "Button", ← Единственный обязательный параметр
	"label": "button",

	// Текст для панели статуса
	"hint": "Кнопка для формы поиска",

	// Любые данные
	"data": { "text": "найти" },

	// Картинка из PSD
	"image": "psd_button.png"
}

Мне придется нарезать картинки «правильно»?


// Поправка стилей, которую можно добавить для блока или группы блоков

"styles": {
	// CSS-стили для обертки
	"wrapper": "font-family: Arial;",

	// CSS-стили для контейнера с изображением
	"image": "position: relative; top: -6px;",

	// CSS-стили для контейнера с версткой
	"markup": "height: 200px;"
}

Нужен JavaScript?

Сниппет для любого уровня


{
	// Функция, которая будет вызвана после рендера
	"snippet": function() {
		block.baron();
	}
}

Право на ошибку

Почти в любом виде


"documentation": [
    {
        "link": "http://mysite.com/docs/article1/",
        "label": "ТЗ на разработку интернет-магазина",
        "modifier": "_important"
    }
],

"documentation": [
    "http://mysite.com/docs/article1/",
    "http://mysite.com/docs/article2/"
],

"documentation": "http://mysite.com/docs/article/"

Мейкап постарается вас понять

Использование

Кейсы

1. Разработка

Изолированная среда для модуля;
исходный макет для сравнения;
документация.

2. Кодревью

Увидеть перечень изменений;
сверить с требованиями и дизайном;
проверить работоспособность всех состояний.

3. Рефакторинг

Быстро увидеть весь блок и все его состояния;
после внесения изменений проверить, что ничего не сломано.

Работает на мобильных устройствах

Использование

Подготовка типов

Какие состояния нас интересуют

Состояния, описанные в дизайне;
состояния, которые вызвали баг в прошлом;
экстримальные состояния.

Одиннадцатиклассница, или тестируем баги вёрстки

Заключение

Всё ведь чертовски просто

Makeup

JSON

UI

♥

Основа рабочего процесса разработки интерфесов

Как измерить качество работы верстальщика?

Инструмент

Человек

Используйте инструменты, принимайте решение сами

Ссылки

goo.gl/jJLM90

2ГИС

Тимофей Чаптыков

tim.chaptykov@gmail.com
@chaptykov

Смайлик


.makeup--smiley-true .makeup__container-in {
    font: 100px/1 'Comic Sans';
    color: red;
    }