Эффективность работы верстальщиков — как реализовать удобный live reload при работе с PerfectPixel?

Какие есть способы обеспечить live reload при работе с плагином хром PerfectPixel?
Так чтобы при изменении css нужно было этот плагин включать заново.
browsersync пробовали - после каждой правки плагин PerfectPixel выключается

Какие есть варианты решений?
В идеале - хорошо чтобы это был тоже плагин хром.

UPD: Пиксель перфект важен для клиента. Стараюсь выбить для ребят разумные условия, без фанатизма. Но все равно он съедает много времени и его важно оптимизировать.
  • Вопрос задан
  • 664 просмотра
Решения вопроса 1
SkiperX
@SkiperX Куратор тега CSS
frontend
У расширений в хроме есть параметры, в пп там куча всего, и он умеет запоминать свое состояние. Еще мелкие изменения можно инжектить без перезагрузки. Через тот же browsersync.

И пп только для новичков подходит. В работе это зло.
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
l3ftoverz
@l3ftoverz
Туды сюды
Какие есть варианты решений?

Понять, что PerfectPixel по своей сути не возможен, перестать тратить время на бесполезный труд, о какой эффективности верстальщика может идти речь, если он такой фигнёй занимается?

Пусть это и моё, субъективное мнение, конечно.

browsersync пробовали - после каждой правки плагин PerfectPixel выключается

Скорее всего, проблема решится, если настроить Live Reload так, что бы не обновлял страницу, а обновлял сам DOM, но это не всегда хорошо и удобно. Хотя, ещё конечно важно что нужно, сетку рисовать или аналог диффа? Например Pix to pix (Pixel perfect by Ymatuhin) не слетает при обновлении страницы
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Соблюдай размер отступов, размер букв. Начнешь присасываться ка фиксированным размерам, получишь геморрой.
Ответ написан
xPomaHx
@xPomaHx
1vs9
Пользуюсь своим накладывателем картинки, имхо удобнее чем расширение, и настраивается вообще как угодно.
spoiler
<input type="checkbox" name="" id="" class="pp">
<img src="pp.png" alt="">
<style>
    .pp {
        position: fixed;
        z-index: 9999999;
        top: 20px;
        left: 20px;
    }

    .pp+img {
        display: none;
    }

    .pp:checked+img {
        display: block;
        position: absolute;
        top: 50px;
        left: -37px;
        right: 0;
        margin: auto;
        z-index: 999999;
        opacity: 0.5;
        -webkit-filter: invert(100%);
    }
</style>


кидаю обычно после закрывающегося html чтобы потом не забыть.
Ответ написан
Как вариант использовать hot reload от webpack, он не перезагружает страницу
Ответ написан
@zverygi
Немного знаю html
ну если используется галп или подобное(что априори должно быть) то есть "пиксель глас". И никаких браузерных расширений
статься на анг
https://yoksel.github.io/pixel-glass-js/
статья на рус
css.yoksel.ru/adaptive-pixel-perfect
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы