Всем привет. Меня зовут Максим Дзюбак. Учусь в Хекслете в профессии «Верстальщик». В процессе прохождения уроков, особенно испытаний, возникли сложности с проверкой решения. Задания в верстке проверяются методом сравнения скриншотов:
expected.jpg — то, так должно быть
actual.jpg — то, что сделали мы
diff.jpg — разница actual.jpg с expected.jpg
В diff.jpg скриншоте мне не до конца было понятно, как расположить элементы, а самое главное, я не мог их подвигать в режиме реального времени. На помощь пришёл Perfect Pixel. Перед демонстрацией его работы хочу предупредить, что использовать этот инструмент лучше с точки зрения удобства просмотра расположения своего макета в сравнении с оригиналом, и не заниматься бездумной подгонкой пиксель в пиксель, иначе это приведёт к неконтролируему хаосу в коде, в голове и в жизни. Про такой антипаттерн писал Никита Михайлов. Прочтите обязательно перед использованием.
Теперь к тому, как использовать Perfect Pixel на примере уроков в Хекслете:
- Выбираем
expected.jpgскришот. Именно такой результат должен быть у нас плюс/минус.
- Сохраняем скриншот к себе на устройство.
Устанавливаем плагин Perfect Pixel в свой браузер по ссылке. На момент написания статьи плагин доступен для Chrome, Opera и Edge.
В веб-доступе в инструментах разработчика браузера вводим ширину экрана такую же, как на скриншоте
expected.jpg. В этом примере у меня 1900.
- Нажимаем на плагин Perfect Pixel и выбираем наш сохранённый
expected.jpgскриншот. Задаем ему по осям X и Y — 0 и размер 1.0, прозрачность ставим 50%.
Вот так перед нами будут наглядно видны различия в верстке. При этом мы можем в этом же окне, в инструментах разработчика, изменять свою верстку. Как по мне — это очень удобно. Главное удержаться от соблазна бездумной попиксельной подгонки макета.
Пишите в комментариях если было полезно и ставьте лайк.
Всем добра!
