В заметке о выпуске четвёртой версии схемы метро я рассказал об истории моей работы над схемами московского метро. Если ещё не читали, прочитайте сначала.

Вы, конечно, знаете, что лучше меня схему московского метро не нарисует никто. Прошедшим летом я задался вопросом: можно ли сделать схему метро с окружной железной дорогой, без «дыр», не нарушая концентричности колец, не превращая окружную в спущенное колесо, да ещё и сохранив суперкрупный кегль?

Оказалось, что да. Пятая версия схемы метро:

При одинаковом размере плаката текст получается почти на 35% крупнее, чем на официальной схеме:

Названия станций на окружной меняются каждые пару недель, так что, вероятно, какие-то детали придётся ещё подкрутить после её запуска.

Посмотрите страницу схемы у меня в портфолио.

Продолжаю разгребать заставки «Муз-ТВ».

«Парочки»:

Музыку списали у Джоша Винка (Josh Wink: Higher State of Consciousness).

Анонс в рекламном блоке:

«Соковыжималка»:

Куча других заставок — по тегу «Муз-ТВ».

Есть такой шрифт — Мирьяд-про. Он знаменит тем, что Фотошоп его включает, когда начинаешь писать по-русски шрифтом, в котором нет кириллицы.

В принципе он нормальный:

Но по иронии судьбы как раз кириллица в нём совершенно отвратительна:

Достаточно один раз увидеть его кириллические „ж“ и „к“, чтобы больше никогда его не использовать.

Как можно поставить слово «Март» почти по центру макета, но не совсем?

Как можно почти попасть вертикалью, но не совсем?

Как можно почти попасть правым столбиком фоток по высоте в левый, но не совсем?

Последние два примера у меня почти одинаковой ширины, но не совсем — специально не стал исправлять.

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

Синие кнопки стоят почти напротив друг друга:

Почти, но не совсем. Нужно или выровнять идеально, или, наоборот, развязать ещё сильнее, чтобы было ясно, что так и имелось в виду.

Надписи почти выровнялись левыми краями:

Почти, но не совсем. Нужно или выровнять, или, наоборот, поставить белую надпись по центру иллюстрации.

У стрелок вправо угол почти равен 90°:

Почти, но не совсем. Нужно или сделать ровно 90°, или разогнуть ещё сильнее.

Заголовки «Адрес», «Режим работы», «Телефон» почти такого же кегля, как и текст под ними:

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

Тут расстояние между первым и вторым блоком текста почти равно расстоянию между строками текста:

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

Надпись «Ручная работа» вписана почти в круг:

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

Высота поля ввода почти совпала с высотой кнопок:

Почти, но не совсем. Нужно или сравнять, или увеличить разницу.

На этом макете используются два почти одинаковых цвета:

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

Правило: или совсем, или совсем не, но без почти.

Когда-то я начал выкладывать заставки Муз-ТВ времён начала 2000-х:

• «Наше»;
• «Шейкер», «Зажигай» и обратный отсчёт в конце рекламной паузы;
• «Жизнь прекрасна» и «Русские пряники»;
• «Муз-ТВ:2К»;
• «Муз-ТВ | 2010» (анонс и вся серия).

Но потом что-то перестал. Надо бы подлить ещё. Кто, если не я.

«Сиеста» — дневной эфир с живыми ведущими:

Охренеть же, как клёво глючили листики.

Анонс программы в рекламном блоке:

«Вечерний звон» — вечерний эфир с ведущими и звонками зрителей. Заставки были разные в разное время года. Зима:

Осень:

Лето:

Анонс:

В новогоднюю ночь ещё был «Новогодний звон», такой:

Мне нужно было скопировать структуру папок и файлов с одного диска на другой. Чтобы всё лежало так же по папкам, под теми же именами, но каждый файл весил 0 байт.

Смысл этой операции вот в чём. Изредка мне нужно найти что-нибудь среди файлов десятилетней давности. У меня скопилось несколько жёстких дисков с разными архивами. И есть специальная коробочка, в которую можно вставить жёсткий диск и подключить по УСБ. Меня бесит, что я порой с третьего раза нахожу, на каком из них лежит то, что мне нужно.

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

Пришлось попотеть, чтобы понять, как это сделать. У меня получилось так:

cd папка_которую_клонируем
find . -type d -print0 | xargs -0 -I {} mkdir -p папка_куда_клонируем/{}
find . -type f -print0 | xargs -0 -I {} touch папка_куда_клонируем/{}

Сложность была в том, что find возвращает список найденных файлов с пробелами в именах, и когда такие файлы передаёшь куда-то ещё, всё взрывается. Пришлось просить find в конце имени каждого найденного файла ставить символ 0 (-print0), а потом с помощью адской команды xargs это разбирать и скармливать в качестве аргументов другим командам. Учитывая, что я раньше ничего сложнее apachectl restart не писал, это была жесть.

Добавлено через полчаса: Читатели рассказали мне про -exec

Мой сайт работает на моём самописном движке на ПХП (единственное исключение — раздел «Блог», о нём в конце).

Файлы страниц сайта лежат в папках, соответствующих урлам разделов, например страница про Ангстрем лежит на сервере под именем .../www/projects/angstrom/angstrom.php. Задача этого файла — сгенерить ХТМЛ смысловой части этой страницы.

Метаданные

Рядом с файлом имя-папки.php должен лежать файл метаданных _имя-папки.php. Для Ангстрема он выглядит примерно так (выкинул часть полей для простоты):

<?php return array (

  'logo' => 'angstrom',
  'value' => '20140201',
  'title' => 'Ангстрем', 

  'x-showcase-title' => 'Ангстрем, конвертер всего',
  'x-copyright-years' => '2014...',

  'languages' => array (
    'english' => array (
      'title' => 'Ångström',
      'x-showcase-title' => 'Ångström, the converter',
    ),
  ),

) ?>

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

Там умная и гибкая система, которая позволяет делать отличия между сайтами на разных языках (ilyabirman.ru и ilyabirman.net) только там, где они нужны: домен, текст, правила типографики, твиттер-акаунт для шаринга; но всё остальное хранить в одном месте один раз.

Самое главное в файле метаданных — это поле logo. Это постоянный идентификатор страницы, который не поменяется, если я вдруг решу перенести её в другую папку. На нём завязаны многочисленные макросы. Например, на главной у меня есть этажик, где я показываю разные проекты в горизонтальной прокручиваемой полосе — «витрине».

Вот примерный код, который её рисует (подсветка синтаксиса глючит):

<?php $showcase_elements = array (
  'angstrom',
  'moscow-metro-multiplication',
  'therules-2-for-ios',
  'chelyabinsk-trams-2015',
  'emcee',
  'train-thirteen',
  'wireless-dj',
  'snooker-results-display',
  'moscow-metro-poster-vdnh',
  'forebruary',
  'moscow-metro-nanomap',
); ?>

<?php foreach ($showcase_elements as $showcase_element) { ?>
  <div class="b-showcase-element" style="width: 160px">
    <div class="b-showcase-element-image-wrapper">
      <div>
        <a href="<?= HREF ($showcase_element) ?>" class="nu">
          <img
            src="<?= FOLDER ($showcase_element) ?>i/icon-160@2x.png"
            alt="<?= strip_tags (TITLE ($showcase_element)) ?>"
            width="160" height="160"
          />
        </a>
      </div>
    </div>
    <div class="b-showcase-element-title">
      <a href="<?= HREF ($showcase_element) ?>">
        <?= EX ('showcase-title', $showcase_element)?>
      </a>
    </div>
  </div>
<?php } ?>

Макросы

Важно то, что этот код ничего не знает про урлы, названия и папки отдельных штук, на которые ссылается. Всё делают несколько умных макросов:

• HREF ($logo) возвращает полный урл страницы по её идентификатору;
• FOLDER ($logo) возвращает путь к папке, в которой лежит страница;
• TITLE ($logo) возвращает название страницы;
• EX ($what, $logo) возвращает значение поля x-something из файла метаданных.

Я, как видите, использую EX и поле x-showcase-title для того, чтобы показывать особые заголовки в «витрине». Если я вдруг решу переименовать один из проектов и перенести в другую папку, и ещё сделать про него страницу на французском, чтобы она была доступна по адресу ilyabirman.net/french/обычный-путь-к-проекту — это займёт пару минут, не считая времени написания французского текста. При этому создавать папку /french/ на сервере и копировать туда все файлы не придётся — языковые элементы урла обрабатываются отдельно и на структуру папок на сервере не влияют.

Есть и другие макросы. CHILDREN вернёт массив всех дочерних для данной страниц. Например, в разделе проектов их список автоматически дополнится новым, если я создам подпапку со страницей нового проекта в ней.

А ещё у меня на страницах бывают переключалки между связанными страницами, вот, например, такой переключалкой провязаны несколько рассказов про Лондон. Это работает, потому что эти страницы связаны в одну группу через поле group в файле метаданных. Они при этом могут лежать вообще по любым урлам, их просто вернёт GROUPLINGS. Если одна из страниц группы окажется недоступна на одном из языков — не беда, значит не попадёт в список. Движок не станет генерить мёртвые ссылки.

Или вот есть ещё WITHIN, определяется так:

function WITHIN ($what, $id = false) {
  return AT ($what) or INSIDE ($what, $id);
}

Удобно использовать в меню, например, в котором плашку у текущего раздела надо поставить если мы в нём или любых его подразделах.

Есть макрос LANG, который возвращает текущий язык. Его удобно использовать, если страницы на разных языках отличаются двумя-тремя строками текста. Но чтобы не писать сто раз if (LANG == ’russian’) { ... }, можно просто положить в папке два файла — angstrom-english.php и angstrom-russian.php, тогда движок сразу возьмёт нужный из них.

Ещё есть TAIL, OFFSET, SIBLINGS, NEIGHBOURS и всякие другие, которые позволяют компактно и внятно выражаться в коде.

Я это называю макросами, а не функциями, потому что это точнее передаёт смысл, и ещё их можно вызывать без параметра $logo и без скобок (если других параметров нет), и тогда они сработают для текущей собираемой страницы:

<h1><?= TITLE ?></h1>

Шаблоны

У любой страницы в файле метаданных может быть поле apply-template — оно говорит движку, что надо пропустить страницу через определённый шаблон перед тем, как заворачивать в обёртку из меню и подвала.

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

Шаблон может не просто завернуть страницу во что-то, но и как угодно её обработать перед использованием.

Вот начало файла .../www/world/london-2011-may/london-2011-may-russian.php:

Лондон — лучший город, где мне доводилось бывать.
IMG_0333.jpg Парламент и Биг-бен в Лондоне

Достопримечательностям здесь совершенно необязательно быть в поле зрения, чтобы было понятно, где ты находишься. Каждая деталь напоминает об этом:
IMG_0238.jpg Телефонная будка, почтовая машина и автобус в Лондоне

Похоже на текст из редактора Эгеи, правда? Потому что я тут использую Нисден — форматтер Эгеи. Шаблон world-story автоматически пропускает текст через него. Поэтому тут автоматически работает всякая резиновость картинок, фоторамы и всё остальное, и в результате сам собой получается рассказ про Лондон.

Блог

Теперь про блог. Блог работает на Эгее и живёт своей жизнью, несмотря на внешнее сходство с остальным сайтом. Эгея, в отличие от остального сайта, использует базу данных для хранения заметок, комментариев и прочего. Сайту никак не мешает, что в папке /meanwhile/ у него живёт что-то «неродное». Он не находит там файла _meanwhile.php и поэтому считает, что эта папка для него не представляет ценности.

Мне надо, чтобы в блоге у меня использовался ЦСС с основного сайта, но всё же в нём есть несколько своих особенностей, поэтому напрямую я не могу залинковать тот же самый файл. Чтобы не носить общие для сайта изменения из одного файла в другой, я использую Галп, который автоматически собирает нужную версии ЦСС-файла для блога.

Ещё, как вы знаете, у меня есть русский и английский блоги. На самом деле их выдаёт одна и та же копия Эгеи, которая в зависимости от домена использует разные таблицы в базе данных.

Это недокументированная функция, но по секрету скажу что там, где у вас в Эгее лежит папка /user/, у меня лежит папка /users/ с двумя подпапками. Да, Эгея умеет быть многопользовательской уже много лет! Только никому не говорите. Если серьёзно, это работает на костылях. Заранее говорю, что не буду отвечать на письма с вопросом «как мне сделать так же».

Издревле в браузерах пробел прокручивает страницу на один экран вниз.

Всегда находил это нелепостью и думал, что этим пользуются полтора человека. Но когда я провёл опрос в твиттере, я был удивлён:

Даже среди моей продвинутой аудитории больше трети людей используют пробел!

Некоторые музыкальные и видеосайты используют пробел для управления воспроизведением, и на мой взгляд это намного более рациональное использование кнопки. Когда это не работает, сайт кажется неуправляемым. В Ютюбе пробел почему-то работает через раз — иногда вместо того, чтобы остановить или запустить видео, он проматывает страницу к комментариям, которые мне до звезды. А в видеоразделе для разработчиков Эпла пробел не работает вообще никогда, несмотря на то, что на странице с видосом вообще ничего полезного кроме этого видоса нет.

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

В виде списка оформляют однородные члены предложения и однородные придаточные предложения при общем главном. Это было обычное предложение с однородными членами, соединёнными союзом «и». Списки бывают: а) нумерованные; б) ненумерованные. Это было предложение с нумерованным списком, причём в роли «номеров» выступили буквы. Нумерация помогает, когда нужно подчеркнуть порядок элементов или сослаться на элемент по номеру.

Стоит написать список не в строку, а столбик, когда:

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

Часто встречаются списки с несогласованным набором слов и словосочетаний:

Шиномонтаж «Пончик»

• • Высокое качество!
• • Мы работаем для вас 24 часа!
• • Для постоянных клиентов действует гибкая система скидок

Это безграмотно. Во-первых, элементы несогласованны. Список — не куча огрызков, а однородные члены. Они должны отвечать на один и тот же вопрос. Во-вторых, отсутствует обобщающий текст. В обычном предложении кроме однородных членов есть какие-то ещё. Это и есть обобщающий текст, и он заканчивается двоеточием, если только это не заголовок. От него как раз задаётся вопрос к однородным членам.

Если шиномонтаж — это подлежащее, то однородные члены могут быть глагольными сказуемыми:

Шиномонтаж «Пончик»: что делает?

• гарантирует высокое качество,
• работает 24 часа,
• даёт скидки постоянным клиентам.

Именными сказуемыми:

Шиномонтаж «Пончик» — это: что?

• высокое качество,
• круглосуточная работа,
• скидки постоянным клиентам.

Дополнениями:

Шиномонтаж «Пончик» отличается: чем?

• высоким качеством,
• круглосуточной работой,
• скидками постоянным клиентам.

Обстоятельствами:

Шиномонтаж «Пончик» работает: как?

• высококачественно,
• круглосуточно,
• со скидками постоянным клиентам.

То есть список — это обычное предложение с однородными членами, просто по-особому оформленное. Если убрать графические признаки списка (двоеточие и переносы), ничего не должно сломаться:

Шиномонтаж «Пончик» работает высококачественно, круглосуточно, со скидками постоянным клиентам.

Пунктуация в элементах списка соответствует пунктуации в предложении. Вместо запятой понадобится точка с запятой, если запятые встречаются в самих элементах.

Элементы списка бывают настолько большими, что:

1. Каждый из них оформляют как отдельное предложение с точкой в конце. Или даже как несколько таких предложений.
2. Вводят нумерацию только ради того, чтобы помочь читателю увидеть, что перед ним перечисление.
3. После самих номеров ставят точку. В роли номеров тут также могут быть и буквы.

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

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

См. также:

• Маркированные списки. Почему нельзя ставить буллиты в качестве маркеров списка. Боже, заметке больше десяти лет.
• О римских цифрах. Ими тоже можно нумеровать элементы списка, но это бесчеловечно.

Первое, что должен сделать любой человек с новым компьютером — поставить на максимум скорость повтора клавиатуры и на минимум задержку перед повтором. Это утверждение было истинным ещё во времена МС-ДОСа, когда это настраивалось в Биосе, было истинным во времена Виндоуса 95 и остаётся истинным до сих пор.

Мне бы и в голову не пришло писать про это, если бы я не обнаруживал, что у большинства моих знакомых клавиатура. Работает. Невероятно. Мучительно. Медленно. Жмёшь ты, скажем, бекспейс, и она стирает. По. Одному. Грёбанному. Символу. В неделю. Или жмёшь шифт-вверх и текст. Выделяется. Так. Неохотно. Что. Проще. Повеситься.

Зайдите в настройку системы, потом в клавиатуру и поставьте оба ползунка в крайнее правое положение:

Теперь впервые вашим компьютером можно пользоваться.