0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Всем привет. Меня зовут Максим Дзюбак. Учусь в Хекслете в профессии "<a>Верстальщик</a>". В процессе прохождения уроков, особенно испытаний, возникли сложности с проверкой решения. Задания в верстке проверяются методом сравнения скриншотов:</p>
1
<p>Всем привет. Меня зовут Максим Дзюбак. Учусь в Хекслете в профессии "<a>Верстальщик</a>". В процессе прохождения уроков, особенно испытаний, возникли сложности с проверкой решения. Задания в верстке проверяются методом сравнения скриншотов:</p>
2
<p>expected.jpg - то, так должно быть</p>
2
<p>expected.jpg - то, так должно быть</p>
3
<p>actual.jpg - то, что сделали мы</p>
3
<p>actual.jpg - то, что сделали мы</p>
4
<p>diff.jpg - разница actual.jpg с expected.jpg</p>
4
<p>diff.jpg - разница actual.jpg с expected.jpg</p>
5
<p>В diff.jpg скриншоте мне не до конца было понятно, как расположить элементы, а самое главное, я не мог их подвигать в режиме реального времени. На помощь пришёл Perfect Pixel. Перед демонстрацией его работы хочу предупредить, что использовать этот инструмент лучше с точки зрения удобства просмотра расположения своего макета в сравнении с оригиналом, и не заниматься бездумной подгонкой пиксель в пиксель, иначе это приведёт к неконтролируему хаосу в коде, в голове и в жизни. Про такой антипаттерн<a>писал</a>Никита Михайлов. Прочтите обязательно перед использованием.</p>
5
<p>В diff.jpg скриншоте мне не до конца было понятно, как расположить элементы, а самое главное, я не мог их подвигать в режиме реального времени. На помощь пришёл Perfect Pixel. Перед демонстрацией его работы хочу предупредить, что использовать этот инструмент лучше с точки зрения удобства просмотра расположения своего макета в сравнении с оригиналом, и не заниматься бездумной подгонкой пиксель в пиксель, иначе это приведёт к неконтролируему хаосу в коде, в голове и в жизни. Про такой антипаттерн<a>писал</a>Никита Михайлов. Прочтите обязательно перед использованием.</p>
6
<p>Теперь к тому, как использовать Perfect Pixel на примере уроков в Хекслете:</p>
6
<p>Теперь к тому, как использовать Perfect Pixel на примере уроков в Хекслете:</p>
7
<ul><li>Выбираем expected.jpg скришот. Именно такой результат должен быть у нас плюс/минус.</li>
7
<ul><li>Выбираем expected.jpg скришот. Именно такой результат должен быть у нас плюс/минус.</li>
8
</ul><ul><li>Сохраняем скриншот к себе на устройство.</li>
8
</ul><ul><li>Сохраняем скриншот к себе на устройство.</li>
9
</ul><ul><li><p>Устанавливаем плагин Perfect Pixel в свой браузер по<a>ссылке</a>. На момент написания статьи плагин доступен для Chrome, Opera и Edge.</p>
9
</ul><ul><li><p>Устанавливаем плагин Perfect Pixel в свой браузер по<a>ссылке</a>. На момент написания статьи плагин доступен для Chrome, Opera и Edge.</p>
10
</li>
10
</li>
11
<li><p>В веб-доступе в инструментах разработчика браузера вводим ширину экрана такую же, как на скриншоте expected.jpg. В этом примере у меня 1900.</p>
11
<li><p>В веб-доступе в инструментах разработчика браузера вводим ширину экрана такую же, как на скриншоте expected.jpg. В этом примере у меня 1900.</p>
12
</li>
12
</li>
13
</ul><ul><li>Нажимаем на плагин Perfect Pixel и выбираем наш сохранённый expected.jpg скриншот. Задаем ему по осям X и Y - 0 и размер 1.0, прозрачность ставим 50%.</li>
13
</ul><ul><li>Нажимаем на плагин Perfect Pixel и выбираем наш сохранённый expected.jpg скриншот. Задаем ему по осям X и Y - 0 и размер 1.0, прозрачность ставим 50%.</li>
14
</ul><p>Вот так перед нами будут наглядно видны различия в верстке. При этом мы можем в этом же окне, в инструментах разработчика, изменять свою верстку. Как по мне - это очень удобно. Главное удержаться от соблазна бездумной попиксельной подгонки макета.</p>
14
</ul><p>Вот так перед нами будут наглядно видны различия в верстке. При этом мы можем в этом же окне, в инструментах разработчика, изменять свою верстку. Как по мне - это очень удобно. Главное удержаться от соблазна бездумной попиксельной подгонки макета.</p>
15
<p>Пишите в комментариях если было полезно и ставьте лайк.</p>
15
<p>Пишите в комментариях если было полезно и ставьте лайк.</p>
16
<p>Всем добра!</p>
16
<p>Всем добра!</p>
17
<p>Maxim Dzyubak</p>
17
<p>Maxim Dzyubak</p>
18
<p>3 года назад</p>
18
<p>3 года назад</p>