Comments 53
Я не сомневаюсь в полезности скрипта, тем более, что к фронт-енду отношение имею слабое.
Но мануал по хоткеям меня немного испугал.
Слово Druging (имелось ввиду, видимо, «Drag'n'Drop») обозначает «Давать наркотики».
Но мануал по хоткеям меня немного испугал.
Слово Druging (имелось ввиду, видимо, «Drag'n'Drop») обозначает «Давать наркотики».
Ожидал как минимум список советов, если не полноценную статью на эту тему.
Долго же вы пост правили Pixel-perfect верстка. Зато опыт работы больше стал и выросли из маленького веб-разработчика ;-)
Того поста скоро не будет, попросили перенести из песочницы =)
А за это время не находили addons.mozilla.org/en-us/firefox/addon/pixel-perfect/?
Вот это крайне неудачное решение вставлять макет посторонний код, его можно запросто «забыть» оттуда убрать, во-вторых если коммитить проект в репозиторий, то другие участники разработки тоже будут брать макеты с этими вставками? Давно уже есть плагины или библиотеки, которые вызываются через пользовательские кнопки браузера.
А вообще я не специалист по XUL, но мне кажется в браузере должен быть механизм наложения элементов не затрагивая DOM страницы, в том же Firebug линейки накладываются на страницу без отображения в DOM.
А вообще я не специалист по XUL, но мне кажется в браузере должен быть механизм наложения элементов не затрагивая DOM страницы, в том же Firebug линейки накладываются на страницу без отображения в DOM.
Немного критики:
Не могли бы вы залить раскукоженный файл github.com/jek-fdrv/PixP/blob/master/pixp.js?
А минимизированный обычно помечают постфиксом .min в названии. А у вас он какой-то недоминимизированный.
И такое впечатление, что вы не readme писали, а письмо подружке.
Вы знаете английский и это круто, не сомневаюсь, но надо писать правильно)
Не могли бы вы залить раскукоженный файл github.com/jek-fdrv/PixP/blob/master/pixp.js?
А минимизированный обычно помечают постфиксом .min в названии. А у вас он какой-то недоминимизированный.
И такое впечатление, что вы не readme писали, а письмо подружке.
If u have pp-bg.jpg u must use pp-bg1.jpg
Вы знаете английский и это круто, не сомневаюсь, но надо писать правильно)
Готово.
Ничего не изменилось. Минифицированный файл мало чем отличается от недоминифицированного.
И ещё не понятно зачем вы jq и jqui всунули в свой проект. Обычно такие вещи не пихают со своими скриптами, а указывают в требованиях, что работает только с jq и jqui.
Берите пример с github.com/twbs/bootstrap
Вообще возникло желание самому написать подобный скрипт, мне кажется он должен быть очень не большим по объёму и jqui не нужен (во всяком случае не весь, а только ядро).
Берите пример с github.com/twbs/bootstrap
Вообще возникло желание самому написать подобный скрипт, мне кажется он должен быть очень не большим по объёму и jqui не нужен (во всяком случае не весь, а только ядро).
Это хорошо что благодаря моему не непрофессиональному проекту у вас, опытного разработчика, появилось желание самому написать. С удовольствием попробую вашу версию.
Возможно вы правы что нужно было указывать библиотеки, но, когда я начинаю проект с чистого листа и подключаю мой скрипт, мне не нужно больше ничего, даже jq(если конечно его уже нету, то скрипт его подключает). Мой скрипт работает сам, и при сдаче проекта мне нужно будет удалять половину header-a, а одну строку подключения скрипта. Ведь не факт что в вашем проекте понадобятся данные библиотеки. Моей главной идеей было это удобство в использовании. Чем меньше действий нужно сделать тем лучше.Тем более, что скорее всего был бы конфликт библиотек, если бы я не оградил библиотеки включив их в сам скрипт.
Возможно вы правы что нужно было указывать библиотеки, но, когда я начинаю проект с чистого листа и подключаю мой скрипт, мне не нужно больше ничего, даже jq(если конечно его уже нету, то скрипт его подключает). Мой скрипт работает сам, и при сдаче проекта мне нужно будет удалять половину header-a, а одну строку подключения скрипта. Ведь не факт что в вашем проекте понадобятся данные библиотеки. Моей главной идеей было это удобство в использовании. Чем меньше действий нужно сделать тем лучше.Тем более, что скорее всего был бы конфликт библиотек, если бы я не оградил библиотеки включив их в сам скрипт.
Комментарии к коммитам доставляют
CSS достаточно в данном случае. Вешаем картинку на псевдоэлемент у HTML, отключаем pointer-events у него и центируем с абсолютным позиционированием. В конце крутим opacity под оптимальный уровень.
А вообще pixel perfect — зло. Это magic numbers, отрицательные марджины, выкидывание из потока.
А вообще pixel perfect — зло. Это magic numbers, отрицательные марджины, выкидывание из потока.
Да не только поэтому. 2013 год на дворе, вокруг у всех планшеты, мобильные браузеры, зоопарк шрифтов и фактическое отсутствие понятия «пиксель» в оригинальном понимании — поэтому как-то совсем странно видеть, что кто-то еще стремится к pixel-perfect и где-то есть клиенты, требующие таковое.
Ну, субъективно, это что-то близкое к «требуется поддержка IE6+». То есть встречается, но уже исчезающе мало — в 99% случаев проще отказаться от такого счастья, если клиента не удается переубедить.
Ну, субъективно, это что-то близкое к «требуется поддержка IE6+». То есть встречается, но уже исчезающе мало — в 99% случаев проще отказаться от такого счастья, если клиента не удается переубедить.
Просто оставлю это здесь:
PerfectPixel by WellDoneCode
chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi
PerfectPixel by WellDoneCode
chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi
Я один верстаю по размерам, а не тупой подгонкой под картинку?
И как же вы это делаете? Тупо по размерам? А тупо не выходит?
Выходит отлично. Когда знаешь, что надо делать, всегда выходит отлично.
А когда не знаешь, приходится извращаться и подгонять под картинку.
А когда не знаешь, приходится извращаться и подгонять под картинку.
Не вы один, но иногда требует «пискель в пиксель» и представляют подобные скриншоты сравнения. Я аж слюной тогда исхожу — «а вы макет удосижились открыть? вы видели чего там наворотил ваш дизайнер? и вы хотите чтобы весь этот бред я подгонял до пикселя? ок! но тут два момента — 1) целесообразность этого действа, ну правда — объясните мне! даже эстетика тут никаким боком. 2) цена»
Заметил вообще тенденцию — чем паршивее макет (т.е. чем сильнее зажлобились на дизайнера), тем жестчё и неадекватней требования к вёрстке. Хотите идеальную вёрстку — будьте добры представить идеальный макет!
Заметил вообще тенденцию — чем паршивее макет (т.е. чем сильнее зажлобились на дизайнера), тем жестчё и неадекватней требования к вёрстке. Хотите идеальную вёрстку — будьте добры представить идеальный макет!
Плагин для FF работает отлично. Была проблема с добавлением картинки но исправлялась после посещения Issues плагина на гитхабе, где автор описал лечение. Всё ещё самый быстрый и прямой способ решения вопроса.
Вы простите меня (я не дизайнер и совсем далек от этого), но выскажу свое мнение: ваши хоткеи удобно читать, только если выделить весь текст мышкой. От этих теней в тексте глаза у меня устали уже через три секунды.
Прошу вас тогда использовать git.
Я сам не художник, но стараюсь, спасибо за мнение.
Я сам не художник, но стараюсь, спасибо за мнение.
А как сверстать резину/адаптив по ПихельПерфект?
UFO just landed and posted this here
А кто сказал что все должно быть идеально? Причем даже у «хорошо» есть своя шкала. Даже если вы не создаете точную копию макета, все равно удобно видеть позиционирование элементов за заднике, если шрифты не совпадают, просто не обращайте внимание, приблизительно спозиционировали и забыли, тоже самое для кросс браузерности. Если там элемент на 1 пиксель выше, просто пропустите это мимо. Я к тому, что мне этой техникой удобно пользоваться всегда, даже когда клиент не просит пиксель в пиксель.
Именно такая вёрстка пиксель-в-пиксель убивает в верстальщике мотивацию. Вместо того чтобы прикручивать к вёрстке какие-нибудь крутые фишки, оптимизировать её, он должен заниматься выравниванием каждого элемента, прописыванием нигде не повторяющихся значений. Особенно это раудет при работе с цветами, ещё лучше всего если при этом дизайнер использовал режимы наложения для кнопок (естественно не понимая зачем). В итоге всё надо верстать изображениями, каждый раз при этом что-то подгонять под ПОСТОЯННО меняющийся макет и времени уже не хватает на то чтобы даже закончить проект, не то чтобы довести его до приличного состояния.
Больше за такое не берусь, спасибо.
Больше за такое не берусь, спасибо.
Считаю стоит уточнить что считается «Pixel perfect» версткой, а что- нет.
И так постоянно вижу расхождения с макетом по 10-20px у верстальщиков, и там не скажешь что они выровняли по сетке или поправили дрогнувшую руку дизайнера — нет, там перепутали тип шрифта, размер его, цвет, не те отступы у абзацев, интерлиньяж и т.д.
А говорить «pixel perfect — зло» -развязывать руки на расхождения с макетом по 30-40px (да видел, сплошь и рядом).
И так постоянно вижу расхождения с макетом по 10-20px у верстальщиков, и там не скажешь что они выровняли по сетке или поправили дрогнувшую руку дизайнера — нет, там перепутали тип шрифта, размер его, цвет, не те отступы у абзацев, интерлиньяж и т.д.
А говорить «pixel perfect — зло» -развязывать руки на расхождения с макетом по 30-40px (да видел, сплошь и рядом).
Давайте вам брошу несколько идей на обдумывание:
1. Избавиться от включений jquery и jquery-ui, от последнего лучше избавиться совсем, благо всё это заменяется, в итоге у вас останется только зависимость от jquery, который итак есть в большинстве сайтов.
2. Попробовать сделать «виджет» — скрипт в виде пользовательской кнопки браузера, который будет подзагружать ваш скрипт без необходимости вставлять его в макет страницы
3. Вот тут фишка, которая частично решит проблему тянущихся макетов — позволить накладывать не одно изображение целой страницы, а несколько изображений отдельных блоков, позволяя управлять ими в отдельности
4. Выравнивание же блоков сделать опциональным: фиксированно или от центра, тогда при ресайзе страницы блоки будут соответственно менять расположение. Это решит отчасти проблему позиционирование.
5. Я не разбирался в вашем коде, не знаю есть ли у вас автосохранение позиции изображений, желательно чтобы оно было, например через localStorage, чтобы при обновлении страницы не приходилось позиционировать блоки заново.
6. Для Firefox отключить свойство pointer-events, чтобы слой с изображением не блокировал html страницы.
7. Пересмотреть хоткеи, потому что, например Alt+W (Alt+D) у меня конфликтует с плагином Pocket.
8. Подумать насчет per site пресетов, которые автоматически запоминаются при переключении страниц.
9. Что-то нужно придумать что-бы не хранить картинки в домашней директории сайта
Общее правило — чем меньше вы вставляете своего кода в DOM, тем лучше, обязательно «изолировать» его уникальными именами классов, чтобы минимизировать возможность конфликта со стилями пользовательского сайта.
Ну вроде пока всё, ну и поработать с дизайном панели управления и сайта. Сайт лучше всего сделать его на github pages.
1. Избавиться от включений jquery и jquery-ui, от последнего лучше избавиться совсем, благо всё это заменяется, в итоге у вас останется только зависимость от jquery, который итак есть в большинстве сайтов.
2. Попробовать сделать «виджет» — скрипт в виде пользовательской кнопки браузера, который будет подзагружать ваш скрипт без необходимости вставлять его в макет страницы
3. Вот тут фишка, которая частично решит проблему тянущихся макетов — позволить накладывать не одно изображение целой страницы, а несколько изображений отдельных блоков, позволяя управлять ими в отдельности
4. Выравнивание же блоков сделать опциональным: фиксированно или от центра, тогда при ресайзе страницы блоки будут соответственно менять расположение. Это решит отчасти проблему позиционирование.
5. Я не разбирался в вашем коде, не знаю есть ли у вас автосохранение позиции изображений, желательно чтобы оно было, например через localStorage, чтобы при обновлении страницы не приходилось позиционировать блоки заново.
6. Для Firefox отключить свойство pointer-events, чтобы слой с изображением не блокировал html страницы.
7. Пересмотреть хоткеи, потому что, например Alt+W (Alt+D) у меня конфликтует с плагином Pocket.
8. Подумать насчет per site пресетов, которые автоматически запоминаются при переключении страниц.
9. Что-то нужно придумать что-бы не хранить картинки в домашней директории сайта
Общее правило — чем меньше вы вставляете своего кода в DOM, тем лучше, обязательно «изолировать» его уникальными именами классов, чтобы минимизировать возможность конфликта со стилями пользовательского сайта.
Ну вроде пока всё, ну и поработать с дизайном панели управления и сайта. Сайт лучше всего сделать его на github pages.
Вы хоть попробовали пользоваться скриптом?
1 JQ подключается только если его нету уже. На счет JQ-UI подумаю.
2 Хорошая идея, но тогда весь проект уже лучше переписать под виджет, и сделать не один виджет а под Chrome и FF.
3 На самом деле если я не ошибаюсь, сейчас в скрипте есть функция, если изображения макета больше ширины экрана оно масштабируется под экран, а вернее окно, таким образом можно проследить позиционирование элементов, но так как респонсив меняет дизайн, в основном это не нужно. А добавлять элементы сайта без возможности ресайза каждого тоже не актуально.
5,8 Судя по всему вы не только не попробовали скрипт в действии, а даже пост не удосужились полностью прочесть.
7 Хот кеи можно легко написать свои, они в конце скрипта все.
9 Например?
1 JQ подключается только если его нету уже. На счет JQ-UI подумаю.
2 Хорошая идея, но тогда весь проект уже лучше переписать под виджет, и сделать не один виджет а под Chrome и FF.
3 На самом деле если я не ошибаюсь, сейчас в скрипте есть функция, если изображения макета больше ширины экрана оно масштабируется под экран, а вернее окно, таким образом можно проследить позиционирование элементов, но так как респонсив меняет дизайн, в основном это не нужно. А добавлять элементы сайта без возможности ресайза каждого тоже не актуально.
5,8 Судя по всему вы не только не попробовали скрипт в действии, а даже пост не удосужились полностью прочесть.
7 Хот кеи можно легко написать свои, они в конце скрипта все.
9 Например?
Прочитал, попользовался. Я привёл общие мысли для скрипта такого типа, Насчет пункта 2 я имел ввиду не плагин под браузер, а JavaScript код, который вставляется как пользовательская кнопка (скрипт, который исполняется при вставке в адресную строку), а это не зависит от браузера. Я не писал, что всё это у вас не реализовано, но может быть кто-то прочтя вашу статью захочет сделать свою версию pixel-perfect, вот для них советы были бы полезны. Спасибо.
P.S. Я сам хотел одно время написать подобный скрипт, но как писал выше это нужно делать внутренними средствами браузера, например как firebug накладывает линейки, хотя это и будет заточено только под firefox, но скрипт ни коем образом не будет трогать DOM пользовательского сайта и с локальными файлами будет работать напрямую. Например за основу можно взять оригинальный PixelPerfect:
github.com/openhouseconcept/PixelPerfect
addons.mozilla.org/en-US/firefox/addon/pixel-perfect/
и доработать его соответствующим образом.
P.S. Я сам хотел одно время написать подобный скрипт, но как писал выше это нужно делать внутренними средствами браузера, например как firebug накладывает линейки, хотя это и будет заточено только под firefox, но скрипт ни коем образом не будет трогать DOM пользовательского сайта и с локальными файлами будет работать напрямую. Например за основу можно взять оригинальный PixelPerfect:
github.com/openhouseconcept/PixelPerfect
addons.mozilla.org/en-US/firefox/addon/pixel-perfect/
и доработать его соответствующим образом.
Когда я был верстальщиком, я тоже написал подобный скрипт и потом тоже написал пост на хабре =)
В некоторых моментах он удобнее вашего.
Правда я давно его не обновлял, все руки не доходят, уже давно так не верстаю — нет надобности.
В некоторых моментах он удобнее вашего.
Правда я давно его не обновлял, все руки не доходят, уже давно так не верстаю — нет надобности.
Картинка открывается-скрывается по ctrl+shift+e. Цифры задают размер шага, а стрелки двигают картинку.
Как сложно придумать что-то новое =)
Недавно я хотел создать скрипт по просмотру видео вместе с друзьями. Надоело считать на 1-2-3 =) А оказывалось уже такое есть хотя в псд уже был готовый макет. Расстроился =) Чет нас много =) И все, черт!, такие талантливые =) Мало областей стать гениальным изобретателем =)
Недавно я хотел создать скрипт по просмотру видео вместе с друзьями. Надоело считать на 1-2-3 =) А оказывалось уже такое есть хотя в псд уже был готовый макет. Расстроился =) Чет нас много =) И все, черт!, такие талантливые =) Мало областей стать гениальным изобретателем =)
Sign up to leave a comment.
Pixel perfect верстка