Был в Питере:




Жил у Мики:




Смотрел бары:






Гугляли:




Посмотрели на холодное море, попили глинтвейн:




Такие дела.

Хороший.

Кажется, что сублим обскакал текстмейт. Грустно.



Они даже line-height дали правильный настроить и бандлы с темами мейта драг-н-дропом перетащить.

Кроме того, все киллер-фичи мейта были четко соблюдены, типа открыть директорию как проект, а новые фичи добавлены: все файлы можно открывать только в одном окне, например. Очень бесило, что работая с тем же кибердаком, я не мог собрать все окна мейта в табы. Теперь могу.

Если бы пришла замена фотошопу, мне было бы просто радостно. Но к мейту была какая-то иррациональная привязанность. Остается ждать второй его версии, которую вроде как обещали.

Яндекс на днях зарелизил навигатор для айфона и андроида, теперь можно проложить маршрут от Москвы до нарисованного мною дома, где я вырос :)

http://whoyougle.ru/blogs/

Ресурс-призрак Хуюгл скрипит и трещит по швам, но все равно выдает самый прикольный рейтинг с картинками (хотя половина опций куда-то отвалилась уже). Остальные рейтинги скучнее, потому что там картинок нет.

Иногда безумно хочется вернуться к работе над проектом — столько новых идей и возможностей появилось за последнее время, а там никаких рамок для их воплощения никогда не было, любая ерунда прокатывала и было весело.

Как я и обещал, все нарисованные нами дороги и домики будут попадать в большие Яндекс-карты. Вот и мой родной город при достаточном зуме теперь тоже там.



Можно даже искать места в городе: Микунь, магазин Радужный.

Одно из самых мест в городе, по-моему.

Слушали сегодня такого картинного негра за роялем, играющего блюз — остаюсь под впечатлением. А еще там гитарист был, «да бест гита плейа ин раша», по словам все того же Джефа Янга — да, я бы и с этим спорить не стал.

Напомню, что БЭМ (блок, элемент, модификатор) — это способ организации фронтенда, придуманный в Яндексе. Детали смотрите в блоге.

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

Так вот принято считать, что раз зародилась методология в Яндексе, то и подходит она лишь для огромных ресурсов. На самом же деле ничего общего с размерами сайта она не имеет в принципе — ровно как Perl подходит для скриптов в одну строчку и для разработки сложных систем. Сейчас я это проиллюстрирую на примере. Вообще, чтобы не быть голословным, один из своих заказов — сайт ресторана Юлии Высоцкой — я сверстал согласно принципам БЭМ.




Реализация БЭМ в общем виде

Перед непосредственной версткой сайта мне потребовалось подготовить что-то, чтобы реализовывать вывод HTML-дерева в стиле БЭМ. А это значит следующее: на входе есть строгий XML для блоков, на выходе соответстветствующий ему HTML.

Рассмотрим элемент сайта — галерею:



Примерно так я описываю ее БЭМ-деревом:

<b-gallery m:size="small" m:type="interiors">
<thumb>
<b-image m:size="small" src="..."/>
</thumb>
<thumb>
<b-image m:size="small" src="..."/>
</thumb>
...
</b-gallery>


Это дерево является семантическим описанием (входными данными) блока. Здесь узлы, начинающиеся с префикса b- обозначают блоки, беспрефиксные узлы — их элементы, а атрибуты с немспейсом m: — модификаторы. Это дерево должно преобразовываться в HTML по следующей схеме: все XML-узлы заменяются на HTML-элементы (по умолчанию div) с классами:
— b-<блок>
— b-<блок>_<модификатор>_<значение>
— b-<блок>__<элемент>
— b-<блок>__<элемент>_<модификатор>_<значение>

Атрибуты без немспейса слепо копируются в HTML-элемент.

Таким образом, написание шаблонов будет заключатся в следующем:
— преобразование грязных данных в чистые входные для соотвествующих блоков;
— дополнение вывода некоторых блоков.

С чистым HTML напрямую руками работать почти не придется.


XSL шаблон, преобразующий БЭМ-XML в HTML

С одной стороны, это основная часть реализации, с другой — ничего в ней сложного нет. Я опущу все очевидные декларации и сразу начну с преобразующих шаблонов.

Первый шаблон описывает что делать с любым узлом БЭМ-дерева — вывести div, сформировать ему нужные классы, вывести, если есть, текст или рекурсивно обработать дочерние узлы:

<xsl:template match="*" mode="bem">
<div>
<xsl:apply-templates select="." mode="m"/>
<xsl:apply-templates select="*" mode="bem"/>
<xsl:value-of select="text()"/>
</div>
</xsl:template>


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

<xsl:template match="*" mode="m">
<xsl:copy-of select="@*[namespace-uri() = '' and name() != 'class']"/>
<xsl:choose>
<xsl:when test="starts-with(local-name(), 'b-')">
<xsl:apply-templates select="." mode="b"/>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates select="." mode="e"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

<xsl:template match="*" mode="b">
<xsl:attribute name="class">
<xsl:value-of select="local-name()"/>
<xsl:apply-templates select="@m:*">
<xsl:with-param name="name" select="local-name()"/>
</xsl:apply-templates>
</xsl:attribute>
</xsl:template>

<xsl:template match="*" mode="e">
<xsl:param name="name">
<xsl:variable name="ancestors" select="ancestor::*[starts-with(local-name(), 'b-')]"/>
<xsl:value-of select="local-name($ancestors[position() = last()])"/>
<xsl:text>__</xsl:text>
<xsl:value-of select="local-name()"/>
</xsl:param>

<xsl:attribute name="class">
<xsl:value-of select="$name"/>
<xsl:apply-templates select="@m:*">
<xsl:with-param name="name" select="$name"/>
</xsl:apply-templates>
</xsl:attribute>
</xsl:template>


Обработка модификаторов заключается в склеивании имени блока с именем и значением соотвествующего атрибута. Кроме того следует добавить холостую обработку всех остальных атрибутов без неймспейса — по какой-то причине шаблон требует обработать и их, а без холостой строчки они просто копируются в класс узла.

<xsl:template match="@m:*">
<xsl:param name="name"/>

<xsl:text> </xsl:text>
<xsl:value-of select="$name"/>
<xsl:text>_</xsl:text>
<xsl:value-of select="local-name()"/>_<xsl:value-of select="."/>
</xsl:template>

<xsl:template match="@*"/>


В конце добавим красивую функцию, запускающую преобразование БЭМ-дерева в HTML.

<func:function name="bem:block">
<xsl:param name="block"/>
<func:result>
<xsl:apply-templates select="exsl:node-set($block)" mode="bem"/>
</func:result>
</func:function>

Функция bem:block использует exsl:node-set, чтобы сформированное в XSL БЭМ-дерево из грязных данных стало новым контекстом для обработки — двойное xsl-преобразование за один проход. Об этом интересно и доходчиво пишут в техногрете.


Преобразование грязных XML-данных в чистое БЭМ-дерево

От сервера приходит XML следующего вида:

<interior>
<item position="1">
<image src="..." width="1252" height="726"/>
<image src="..." width="170" height="170" version="thumb"/>
</item>
<item position="2">
<image src="..." width="1516" height="1011"/>
<image src="..." width="170" height="170" version="thumb"/>
</item>
...
</interior>


Из него нужно получить дерево для b-gallery. Делается это просто:

<xsl:template match="/*" mode="content">
<xsl:apply-templates select="content/pages/item/interior"/>
</xsl:template>

<xsl:template match="pages/item/interior">
<b-gallery m:size="small" m:type="interiors">
<xsl:for-each select="item">
<thumb m:type="active" src="{image[not(@version)]/@src}">
<b-image m:size="small" src="{image[@version='thumb']/@src}"/>
<over/>
</thumb>
</xsl:for-each>
</b-gallery>
</xsl:template>


Кстати, это все содержимое шаблона для раздела «Интерьеры»

Начало обработки данных для любой страницы начинается с одного и того же шаблона:

<xsl:template match="/">
<html>
<head>
<xsl:apply-templates select="." mode="head"/>
</head>
<body>
<xsl:variable name="b-page">
<b-page>
<xsl:apply-templates select="page/content/menu"/>
<b-content>
<xsl:apply-templates select="." mode="content"/>
</b-content>
<xsl:apply-templates select="page/content/params"/>
</b-page>
</xsl:variable>

<xsl:copy-of select="bem:block($b-page)"/>
</body>
</html>
</xsl:template>


Внутри блока b-page формируется меню из узла page/content/menu, подвал из узла page/content/params и основная часть при обработке корня входного грязного XML-дерева в режиме content.


Дополнение вывода блоков

Некоторые блоки приходится дополнять вспомогательными HTML-элементами. Обычно, это декорации или нечто обязательное для блока, что нельзя отнести к в входным данным. Например, чтобы вывести картинку (блок b-image) с такой нетипичной фигурной рамкой, пришлость раскрывать блок из одного узла b-image с атрибутом src до элементов блоков, перекрывающих друг друга, образуя жирный крест. Так я просто перегружаю шаблон match="*" mode="bem" частным случаем для match="b-image":

<xsl:template match="b-image" mode="bem">
<div>
<xsl:apply-templates select="." mode="m"/>

<div class="{name()}__vertical"></div>
<div class="{name()}__horizontal"></div>

<div class="{name()}__vertical-background"
style="background-image:url({@src})"></div>
<div class="{name()}__horizontal-background"
style="background-image:url({@src})"></div>
</div>
</xsl:template>


Все эти частные случаи складываю в отдельный шаблон blocks.xsl. Проделав такую работу один раз, теперь в любом месте сайта я могу оперировать лишь одним узлом b-image.


Выводы

По времени вся описанная разработка заняла у меня без преувеличения два вечера: и реализация БЭМ в общем случае, и частный случай с версткой сайта ресторана. В качестве бонусов я имею:
— набор сверстанных блоков для многократного использования, не зависящих от структуры данных, приходящих с сервера;
— очень мало xsl-кода в шаблонах из-за постоянного реиспользования блоков, описанных лишь единожды стилями и скриптами поверх сформированного из БЭМ-дерева HTML;
— наглядную и абстрактную структуру представления блоков сайта;
— возможности расширения, быстрой модификации блоков;
— сложность верстки растет линейно, а в какой-то момент вообще падает с увеличением объема сайта (новые блоки собираются из ранее созданных).

http://1000movies.ru/ — встречайте, киноманы. Я сто лет ничего не делал для людей, но вот подвернулся повод, день рождения хорошего человека, который тоже очень любит кино — это подарок и ему, и вам.

В честь релиза был выпущен такой вот плакат:



На фотке присутствую я, чтобы вы оценили масштабы происходящего.

Интерфейс нуждается в постоянном переосмыслении — это такой путь проб и ошибок, который требует времени и множества версий. У меня нет ни одного проекта, который я бы не хотел сейчас где-то в чем-то изменить, и не у одного меня, думаю. Если кажется, что все идеально — подождите до завтра, если не проходит — зовите на помощь коллег, если и те довольны — зовите тяжелую артиллерию, старого друга, который не даст соврать.

При всем при этом, не следует забывать, что лучшая проверка — проверка в боевых условиях. Находятся ошибки, которые обходят все уровни защиты и пугают конечного пользователя. Если вы их видите — молодец, если отрицаете — плохо.

Если интерфейс не меняется год и более — это катастрофа: в интернете за это время прошло несколько культурных революций, а у вас все те же кнопки на том же месте — видимо, вы не боитесь остаться у разбитого корыта с гиками-консерваторами. Естественно, под изменением я подразумеваю развитие, а не пресловутый редизайн. Развитие — это результат работы над ошибками, как сказал кто-то из ребят: «Опыт — это ошибки». Редизайн — переворот, захват родом Романовых власти Рюриковичей: приехал немецкий дизайнер и переписал историю. Если все на самом деле так плохо, можно и редизайн, но учтите, что вы начинаете весь опыт с нуля. А опыт стоит времени, сил, ну и денег.

В этом и заключается смысл существования штатных дизайнеров и ежедневной их работы. Я как-то устраивался на работу, меня спросили: «Что бы вы сейчас изменили на нашем проекте?» И я тогда ответил, что с первого взгляда ничего, надо вникать в тему, чтобы предлагать улучшения. Сейчас я ответил бы то же самое — радует, что у меня сохранились хоть какие-то принципы (ну а работу меня тогда не взяли).

Нарисовал карту своего родного города:



карта

Андрей и прочие, вы там рядом, пронумеруйте дома что ли. Спасибо :)

Давно хотел поделиться этим куском, а тут еще выборы эти как раз в тему; Пелевин в Ананасной воде очень классно и доходчиво объясняет, почему «все всё видят, но никто ничего не делает»:

«Представьте, что вы затюканный и измученный российский обыватель. Вы задаетесь вопросом, кто приводит в движение зубчатые колеса, на которые день за днем наматываются ваши кишки, и начинаете искать правду — до самого верха, до кабинета, где сидит самый главный кровосос. И вот вы входите в этот кабинет, но вместо кровососа видите нереально четкого пацана, который берет гитару и поет вам песню про „прогнило и остоебло“ — такую, что у вас захватывает дыхание: сами вы даже сформулировать подобным образом не можете. А он поет вам еще одну, до того смелую, что вам становится страшно оставаться с ним в одной комнате.

И когда вы выходите из кабинета, идти вам ну совершенно некуда — и, главное, незачем. Ведь не будете же вы бить дубиной народного гнева по этой умной братской голове, которая в сто раз лучше вас знает, насколько все прогнило и остоебло. Да и горечь в этом сердце куда острее вашей».

Цитировать Пелевина опасно: можно не заметить, как берешь в кавычки весь текст книги.

Случилось чудо, и вот этот прекрасный альбом:

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

Код не стоит ничего, но между его строк живет и развивается идея. Оливер из iA (Oliver Reichenstein) говорит, что идея без формы (какого-либо воплощения) — это просто фантазия. И работает тоже не код, работает идея. У идеи может быть сколько угодно форм, и каждая новая форма делает ее стройнее, обнаруживая и устраняя недостатки. Так или иначе, идее необходимо где-то существовать, заодно одушевляя свою оболочку.

Каждую новую задачу я начинаю с чистого листа. Я стараюсь браться за интересные мне вещи, которые могу улучшить, следовательно, имею видение начальной структуры и ее дальнейшего развития. Свое видение я фиксирую согласно принципам, которые открывал для себя годами и продолжаю открывать. Кому-то они кажутся непонятными, кому-то примитивными, но именно они приводят мои мысли в порядок и позволяют искать решение задачи, не отвлекаясь на укращение инструментов.

Так я снова и снова создаю, например, корневой шаблон, из которого разворачивается главная страница, а затем и все остальные. Соответственно, я часто сталкиваюсь с одними и теми же моментами, но голова работает уже чуточку иначе, и находятся более короткие и более изящные способы их организации.

Пару лет назад для одного несложного раздела на проекте мне приходилось создавать несколько автономных по своей структуре шаблонов и еще собственные стили и скрипты для них, а недавний проект удалось развернуть из одного шаблона с одним уровнем наследования для нескольких локальных модификаций и одного скрипта, реагирующего на разные контексты проявления однотипных блоков.

Так я сделал вывод, что не код надо беречь, а идею его организации. Как только идея переехала в новое тело, старое можно забыть, не создавая никаких наследственных связей с турпом.

Интересное замечание делает Дюрер:

«Однако каждый может дать хороший совет: если ты сделал произведение, которое тебе самому нравится, выставь его перед грубыми и невежественными людьми и предоставь им судить о нем. Ибо обычно они замечают самое неудачное, хотя и не понимают хорошего. Если ты найдешь, что они говорят правду, ты можешь исправить свою работу.»