Поговорим о вёрстке, её качестве и инструментах разработчика

[red4pony]

Подниму ка я старую темку и, возможно, что-то освежу

Спасибо за пост.

IDE для написания HTML кода JetBrains PhpStorm ,IDE для написания CSS Sublime Text 2

А почему не использовать одну/один IDE/текстовый редактор? Sublime text - не IDE.

Я работаю Front-end разработчиком под Mac OS X

Так Хакинтош же (извините, но принципиально).

Основной и самый полезный аддон PerfectPixel by WellDoneCode

Ну это же ужас, подгонять просто так. И появляются магические числа (отступ в 23 пикселя)? Адаптивность все подгонки убъет и сведет на нет Ваши пустые старания.

[klierik]

А почему не использовать одну/один IDE/текстовый редактор? Sublime text - не IDE.

Потому что у меня открыто допустим 10-20 HTML шаблонов и 20 - 30 Less файлов. Мне они в рамках одной среды разработки вообще не нужны ибо это не удобно.

В итоге для каждого дела свой самый удобный редактор.

Каждый из них на отдельном мониторе что позволяет одновременно видеть и HTML и CSS -- а это очень-очень удобно!

По поводу "ST2 - не IDE" согласен. Тут скорее дело привычки так обзывать.

Так Хакинтош же (извините, но принципиально).

У меня поднята Mac OS X 10.6.8 retail версия. А это говорит о том что это самая полноценная OSX без вмешательств. А под моё железо установлены только драйвера. Так что не смотря на то что Хакитош назвать корректнее, но тоже не совсем правильно, ибо сама ОС совершенно без изменений. В общем тут кому как )

Ну это же ужас, подгонять просто так. И появляются магические числа (отступ в 23 пикселя)? Адаптивность все подгонки убъет и сведет на нет Ваши пустые старания.

А что значит просто так? Я кладу дизайн поверх и при определенном разрешении у меня все совпадает 1:1 (в рамках разумного).

А как ты проверяешь соответствие дизайну? На глаз?

Главная задача данного плагина показать разработчику есть ли и в чем она разница между страницей и дизайном.

А для адаптивности существует свой дазийн со своими изменениями, которые так же вносятся в рамках соответствующих правил.

Это очень полезный инструмент, если уметь им пользоватся.

Под FireFox аналог -- PixelPerfect

[red4pony]

Потому что у меня открыто допустим 10-20 HTML шаблонов и 20 - 30 Less файлов. Мне они в рамках одной среды разработки вообще не нужны ибо это не удобно. В итоге для каждого дела свой самый удобный редактор. Каждый из них на отдельном мониторе что позволяет одновременно видеть и HTML и CSS -- а это очень-очень удобно!

Так можно же запустить еще одну версию программы. Но тут дело вкуса и удобства. Это твой вариант.

Все что не на Apple - это хакинтош. ИМХО. (и ИМХО самой компании Apple и over 9000 юристов)

На глаз?

Я замеряю все отступы при нарезке макета. Да и если дизайн сделан по сетке, то глаз не подводит. И предпочитаю ставить все размеры отступов в относительных единицах. (горизонтальные в процентах, а вертикальные в em'ах). А попиксельное соответствие считаю глупым капризом заказчика/дизайнер. Думаю что дизайнер и верстальщик это должно быть одно лицо(но тут может загореться жестокий спор), чтобы не было ситуации аля "у меня на макете не так" или "я не буду это делать".

[klierik]

Даннй пост является продолженнием начатого диалога из темы Интрументы для разработчика

На момент написания этого поста разговор ведется об удобстве пользования средой разработки и соответствии дизайну.

Принимайте участие

Потому что у меня открыто допустим 10-20 HTML шаблонов и 20 - 30 Less файлов. Мне они в рамках одной среды разработки вообще не нужны ибо это не удобно. В итоге для каждого дела свой самый удобный редактор. Каждый из них на отдельном мониторе что позволяет одновременно видеть и HTML и CSS -- а это очень-очень удобно!

Так можно же запустить еще одну версию программы. Но тут дело вкуса и удобства. Это твой вариант.

Все что не на Apple - это хакинтош. ИМХО. (и ИМХО самой компании Apple и over 9000 юристов)

На глаз?

Я замеряю все отступы при нарезке макета. Да и если дизайн сделан по сетке, то глаз не подводит. И предпочитаю ставить все размеры отступов в относительных единицах. (горизонтальные в процентах, а вертикальные в em'ах). А попиксельное соответствие считаю глупым капризом заказчика/дизайнер. Думаю что дизайнер и верстальщик это должно быть одно лицо(но тут может загореться жестокий спор), чтобы не было ситуации аля "у меня на макете не так" или "я не буду это делать".

Сомневаюсь что можно дважды открыть один и тот же проект в PhpStorm. Да и он отлично работает с разметкой, но он такой медленный.

Я всегда отталкивался от того, что конкретное приложение должно идеально выполнять поставленную задачу. По-этому у меня всегда было 2 редактора для HTML/CSS.

Я ниразу не встречал такого редактора, в котором, личном мне, было бы писать html коди стили одновременно. Всегда что-то хромает. Особенно это касается удобств форматирования кода.

Кода разработка велась под Windows, то я использовал Dreamweaver и TopStyle. Под Ubuntu тоже что-то было. Под OSX PHPStorm + ST2.

В данном конкретном случае в PhpStorm есть Magicento и они в сумме для моей сферы разработки работают на отлично. Но писать CSS в Phpstorm это ужас. Ну не удобен он в форматировании стилей. Уж лучще CSSEdit (им я пользовался до ST2).

Кстати, ST2, в свою очередь мне нравится тем, что он очень шустрый. Работать с ним очень приятно. Его расширяемость так же поражает. Однажды настроил его под свои нужды и пользуюсь по сей день.

Что же касается PixelPerfect то я им пользуюсь много лет. Таким образом я использую всю тех. информацию которая представлена в макете, для описания физических характеристик. А вот соответствие макету оставляю на плечи плагину. Я зачастую могу заметить несоответсвие дизайну даже на 1пк, но ведь не всегда же.

Всегда можно что-то упустить, особенно если макет сдержит огромное множество мелких деталий (иконок, градиентов, линий, прочее). Можно ошибится в размере шрифта (я не проверяю размер каждого шрифта в макете ибо считаю это избыточным).

PixelPerfect в данном случае это вспомогательныэ инструмент, который позволяет очень существеннно секономить время, подогнать элемент под дизайн "на лету" средствами разработчика и правильное значение внести в стили. Его можно считать "руководством по допущеным ошибкам" для разработчика.

Тут сразу два бонуса: 1) перепроверить не упустил/забыл ли что-то; 2) проверить и подонать результат под дизайн

Да и задачи у нас стоят в рамках -- Максимальное соответствие макету, ибо исполняемые проекты дорогостоющие.

[deadrash]

Так и не понял чем не устраивает ST2.

[klierik]

Так и не понял чем не устраивает ST2.

Плагин Magicento под PhpStorm

Открыть один и тот же проект дважды

[Great Rash]

Я ощущаю себя каким-то старпёром, никогда не юзал LESS (SASS), БЭМы, IDE (в Eclipse верстал, но лишь потому что серверная часть писалась на Java и это был стандарт в компании). Мне как-то Notepad++ хватало для всего. Вот буквально недавно на Sublime пересел. Пробовал юзать PHPStorm, но что-то я не проникся, не понимаю чем он удобней. Вот если будет бесплатный Sublime 3, то пересяду на него и успокоюсь. Я даже ZenCoding недавно юзать начал

[lexxcode]

И мне ST2 с Emmet хватает за глаза, именно для написания кода. В LESS, SASS смысла не вижу пряяям вообще. Не один раз было как мне говорили: "воот смотри как прикольненько на less сетку делать", потом я брал и показывал свою сетку просто на css которая по объему кода была заметно меньше чем на less. Но это так к слову)

[klierik]

Переехал на LESS после того как внедрили BootStrap. Взял обычный кусок стилей (в примере очень маленькая конструкция):

/* @group Sorter */

.sorter { }

/* view mode */
.sorter > .view-mode { }

/* sort by */
.sorter > .sort-by { }
.sorter > .sort-by > label { }
.sorter > .sort-by > select { }
.sorter > .sort-by > a { }
.sorter > .sort-by > a > img { }

.sorter .link-feed {}

/* @end */

переписал на Less

/* @group Sorter */

.sorter {

/* view mode */
.view-mode {}

/* sort by */
> .sort-by {
> label {}
> select {}
> a {
> img {}
}
}

> .link-feed {}
}

/* @end */

Парсер съел всю красоту форматирования кода и выглядит он как УГ. Но примеры можно посмотреть на Less/Sass/Scss сайтах.

Перестал писать на чистом CSS.

Да и файликов у меня ну мало в проектах. И переменные спасают на ура. И миксины тоже. ПОменял водном месте - изменилось везде. Шикарно то как

БЭМ люболю много лет. ZenCoding использую и в HTML и в CSS.

[red4pony]

Сомневаюсь что можно дважды открыть один и тот же проект в PhpStorm.

Я конкретно про PhpStorm не писал. ST может в разных окнах открыть один и тот же проект.

Форматирование CSS можно осуществить с помощью CSScomb

Sublime Text взял для примера, а не для того чтобы ввергнуть во всеобщую эйфорию от этого редактора.

Я ниразу не встречал такого редактора, в котором, личном мне, было бы писать html коди стили одновременно.

Это субъективно, я не собирался никого перетянуть на сторону зла и менять ничьи привычки.

Я зачастую могу заметить несоответсвие дизайну даже на 1пк.

Это действительно круто Но имеет смысл если дизайн построен не на сетке. А так посчитал количество базовых линий или колонок, перевел в свои единицы измерения (%, em, pt, px) и пишешь код.

особенно если макет сдержит огромное множество мелких деталий

Вот тут да, логика построения может измениться.

Но

И появляются магические числа (отступ в 23 пикселя)?

Не смущают числа не поддающиеся логики? Откуда именно такое значение? Потому что работает?

Я не ставлю под вопрос твою компетенцию и профессионализм.

Прошу прощения если фраза

Ну это же ужас, подгонять просто так.

обидела (но останусь при этом же мнении).

У всех свое удобно.

[klierik]

Я конкретно про PhpStorm не писал. ST может в разных окнах открыть один и тот же проект. Форматирование CSS можно осуществить с помощью CSScomb Sublime Text взял для примера, а не для того чтобы ввергнуть во всеобщую эйфорию от этого редактора.

В ST2 нет Magicento Это для меня важно. Только что попробовал открыть проект дважы - неполучилось.

Никакая программа не сможет отворматировать CSS так, что бы учитывалась иерархия вложеностей. Тут только сапописное.

Я описываю CSS таким образом, что бы смотря на него я мог в голове создать HTML структуру, не открывая темплейт. Это нереально удобно )

Это субъективно, я не собирался никого перетянуть на сторону зла и менять ничьи привычки.

Так мы говорим о предпочтениях в рамках диалога а не спора

Это действительно круто Но имеет смысл если дизайн построен не на сетке. А так посчитал количество базовых линий или колонок, перевел в свои единицы измерения (%, em, pt, px) и пишешь код.

Вертикальные отступы тут предугадать никак. По горизонтале сетка делается один раз, естесвтенно. Но теже Загловки, перечни разнотипных блоков которые имеют разные дизайны, могут иметь и имеют свои ньюансы в размерах шрифтов, полях, отступах. Лично я не могу проследить на глаз такие ньюансы ( Спасает плагин.

Не смущают числа не поддающиеся логики? Откуда именно такое значение? Потому что работает?

Меня это Бесит! Так же как и сетка 26/75/12 с которой сейчас работаю *WALL*

Прошу прощения если фраза обидела (но останусь при этом же мнении).

Никаких обид ) Тут дело разнице требований к верстке со стороны заказчика.

[red4pony]

Вертикальные отступы тут предугадать никак.

Если дизайн построен с помощью сетки то это утверждение не верно. Сетка это не только вертикальные колонки, но и горизонтальные полосы - базовые линии(допустим 12 px). Высотой они со шрифт основного контента. Заголовок будет 3 базовых линий (36 px), отступ под ним 2 базовых линий(24 px). Отчет идет относительно одной известной величины.

P.S. Хорошая книга на эту тему Чои Вин - Как спроектировать современный сайт (Библиотека специалиста)

Edited May 22, 2013 by red4pony

[klierik]

Если дизайн построен с помощью сетки то это утверждение не верно. Сетка это не только вертикальные колонки, но и горизонтальные полосы - базовые линии(допустим 12 px). Высотой они со шрифт основного контента. Заголовок будет 3 базовых линий (36 px), отступ под ним 2 базовых линий(24 px). Отчет идет относительно одной известной величины.

P.S. Хорошая книга на эту тему Чои Вин - Как спроектировать современный сайт (Библиотека специалиста)

В идеале именно так. А в жизни в макетах дизайнеры пишут как им виднее. Не всегда по сетке выглядит хорошо.

Очень часто в макетах, даже если присутствует сетка, контент по ней не расположен. Как горизонтально так и вертикально. Вертикальные отступы могут 5/10/15/20, а могут быть 13/16/18.

Раздражает неимоверно. А пренебрегать этими ньюансами нельзя.

Данные несоответствия не имею привязку к какой-то стране -- так , в основном, везде. Что СНГ что Европа, США, Австралия. Даже на сегодняшний день модульная сетка в макете это редкость.

[red4pony]

В идеале именно так. А в жизни в макетах дизайнеры пишут как им виднее.

Вспомнилась статья.

P.S. Думаю вопрос относится к теме. Есть ли кто активно использует Adobe CC + Edge инструменты? Какие впечатления? На демонстрационных роликах выглядит красиво.

[klierik]

Вспомнилась статья.

правда ) так и есть.

На демонстрационных роликах выглядит красиво.

это - http://www.adobe.com/ru/products/creativecloud.html ?

[red4pony]

это - http://www.adobe.com...ativecloud.html ?

Да, Adobe позиционирует себя так что можно обойтись только их продуктами. Макет создать - фотошоп, илюстратор, индизайн. Код написать - дреамвивер, эдж код. Не любите писать код - мюс и анимейт. Файлы в облаке - пожалуйста. Меня интересует есть ли кто на форуме кто обходится этими продуктами и радуется жизни?

[klierik]

интересно. надо будет взглянуть )

[red4pony]

А зачем три монитора? 1 - разбить на две IDE(если горизонтальное положение), 2 - браузер(тем более писал что проверяешь только в Хроме). Не будет ли внимание рассеиваться на три экрана?

[klierik]

1. IDE + Editor

2. Browser

3. Image Editor

У меня даже Chrome открыт в 2 окна на 2 монитора, ибо нехватает.

PS: в качестве одного из мониторов роль играет ноутбук.

[red4pony]

Два монитора к ноутбуку. HDMI + VGA. А какже OS X, видит оба порта? Не будет ли плясок?

[klierik]

А кто его знает? Когда будет +2 монитора тогда и буду думать.

Самая простая реализация (в случае если из коробки не поедет) это поставить USB внешнюю видеокарту.

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

Ну и я так же не собираюсь пока такую мультимониторную систему создавать. В начале куплю MacBook а там и все остальное.

В идеале, на данный момент мне кажется так пары 23"-24" манитора по бокам 15" ноутбука должно быть самое оно.

Или же ноутбук использовать только в рамках вычислительнх мощностей. В таком случае 3и монитора из серии Dell U2413 ну совсем было бы замечательно )

[red4pony]

А почему на рассматриваете варианты 2х27 дюймов? imac 27 + 27 дюймов монитор. По деньгам выйдет как macbook + 3 Dell U2413

[klierik]

С iMac 27 не потаскаешься Он то харош многим, но это стационарник все жж (

А мне то бы и домой, и на работу, и вообще куда захочу.

[mishka]

alexriz, так как ты модератор, продублируй плиз последние посты во флейме, а тут оставь только пост Клиерика.

Еще я каждый день пользуюсь Терминалом для выполнения множества задачь в разработке, например:

• Получить Base64 картинки
  

На сколько помню это ST2 делает из коробки, какие-то горячие клавиши есть.

Прописал путь к картинке, нажал хоткей и вуаля.

[red4pony]

Тогда это. Они лихо его таскают