Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

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

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Релиз

Селигерский кусок и метроплакат с указателем

Полтора года назад я выпустил схему московского метро с Окружной линией — вам она известна под дебильным названием МЦК. Так вышло, что пока я рисовал схему, считалось, что Октябрьское Поле и Панфиловская никак не связаны, ну я так и нарисовал:

Но когда МЦК запустили, их вдруг решили считать пересадкой (там 750 метров по улице).

С тех пор открывались новые отрезки Марьина Роща — Петровско-Разумовская (Люблинская линия), Парк Победы — Раменки (Солнцевская линия), и я их добавлял на схему. Но это место не трогал, потому что там надо было всё взорвать, чтобы эту пересадку нарисовать.

А потом пришёл Илья Харитонов и буквально за годик всё сделал (пришлось даже Тверскую чуточку подвинуть):

Да ещё и алфавитный указатель заверстал:

В указателе используется система, которую я изобрёл пять лет назад:

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

Cкачайте ПДФ, проверьте плиз, где мы накосячили?

Я ещё обновил картинку на странице схемы. Но плакат, на который там ведёт кнопка «Купить», пока не обновился. Будем держать вас в курсе, в общем.

Илья тем временем написал пост про всю эту петрушку. Там есть листалка вариантов решения отрезка Полежаевская — Октябрькое Поле.

Ссылки по теме:

20 февраля   метро   московское метро   релиз

Новая схема челябинских трамваев

Больше десяти лет назад я сделал схему челябинских трамваев и троллейбусов. На этот дизайн решающим образом повлияли советы и комментарии Артёма Горбунова. Тогда мы нашли несколько хороших универсальных решений — на основе того дизайна десятки дизайнеров делали схемы разных транспортных систем.

Три года назад мы с Сашей Караваевым сделали новую версию схемы. В ней была целая куча схемодизайнерских изобретений: «карандашный» слой с автобусами и троллейбусами, «акварельные» водоёмы, 3Д-конечные, новая форма пеньков. Тогда же родился логотип челябинских трамваев в виде герба Челябинска с пантографом.

А потом к работе подключилась Полина Лесникова. Она перерисовала схему с учётом изменений в маршрутах, и вместе с Сашей они улучшили много деталей по результатам тестирования предыдущей версии. Получилась новая схема:

Слой с автобусами и троллейбусами добавлял интересного фарша, но практической пользы в нём было мало. Без него упростилась геометрия линий и графема стала сильнее. Добавились узнаваемые здания.

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

Что ещё посмотреть:

16 февраля   проекты   релиз   транспорт   Челябинск

Второе издание правил русского языка

Запущена вторая версия сайта «Зерулс» — лучшего веб-издания правил русского языка.

Вместе с Вадимом Юмадиловым мы сделали новый дизайн. Аня Данилова нарисовала прекрасные знаки параграфов. А Виктор Корейша всё сверстал и запрограммировал:

Под капотом по-прежнему умный поисковый движок, который мы с Романом Парпалаком сделали в 2010 году (с ума сойти, как давно это было).

Пользуйтесь на здоровье.

Приём кредитов
Фотография Романа Баранова

Ссылки на всех, у кого есть куда:

На Аню некуда поставить ссылку, поэтому ей просто большое спасибо.

Смотрите также страничку проекта.

Ну и заодно напоминаю, что работает приложение «Зерулса» для Айфона, которое мы сделали с Шуриком Бабаевым.

5 февраля   Зерулс   продукты   проекты   релиз

Жуэль-про

Жуэль-про

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

Вы можете подумать, что для этого пришлось писать гору Джаваскрипта. Но на самом деле нет, просто я использую новый Жуэль-про. Гору Джаваскрипта пришлось писать Жене Лазареву, который запрограммировал Жуэль-про. А мне осталось только воспользоваться новым супермощным декларативным АПИ, которое мы придумали.

Рассказываю.

Если вы использовали Жуэль, вы знаете, что чтобы вставить на страницу аудиоплеер, достаточно просто поставить ссылку на МП3-файл и дать ей класс jouele:

<a href="ilya-birman-use-me-mix.mp3" class="jouele">
  Илья Бирман: Юз ми
</a>

Но что, если рядом с плеером стоит обложка, и я хочу, чтобы микс начинал играть по клику в обложку? С Жуэлем-про это делается так:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
/>

Теперь в обложку можно кликать, и микс заиграет. И запаузится, если кликнуть ещё раз.

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

<tr class="jouele-control"
  data-type="seek" data-to="0:45:38"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

Теперь клик в эту строчку таблицы будет перематывать микс куда надо.

Но это не главная прелесть. Я же ещё хочу, чтобы во время воспроизведения обложка выглядела активной. Для этого я просто пишу в ЦССе:

img.jouele-is-playing {
  outline: rgba(255, 255, 255, .2) 10px solid;
}

Всё! Жуэль-про сам даёт класс jouele-is-playing своим элементам управления во время воспроизведения, поэтому подсветка просто работает независимо от того, как именно я включил музыку — из плеера, обложкой или вообще клавиатурой. Мне снова не нужен Джаваскрипт.

И точно так же работает подсветка активной строчки в плейлисте. На самом деле ХТМЛ-код каждой строчки выглядит не так, как я показал выше, а вот так:

<tr class="jouele-control"
  data-type="seek" data-range="0:45:38...0:48:55"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

То есть строчка не только перематывает в определённую точку, но ещё и соответствует некоему отрезку. Чтобы она подсветилась, снова достаточно только ЦССа:

tr.jouele-is-within {
  background: rgba(255, 255, 255, .2);
  color: #fd0093;
}

Всё! Жуэль-про сам даёт класс jouele-is-within своим элементам управления, соответствующим диапазону, когда позиция воспроизведения находится внутри этого диапазона.

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

.jouele-is-interactive {
  cursor: pointer;
}

Если плееров на странице несколько, то элементы управления управляют тем, который играет или играл последним. А если такого ещё нет, то запустит первый на странице. Чтобы привязать к конкретному плееру, есть data-href:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
  data-href="ilya-birman-use-me-mix.mp3"
/>

На странице каждого микса у меня всегда один плеер, поэтому это там не нужно.

Жуэль-про стоит 1890 рублей на один домен. Обычный бесплатный Жуэль доступен как раньше.

Что посмотреть:

29 января   Жуэль   продукты   проекты   релиз

Работы для «500Тека»

Опубликовал пару работ, которые сделал в прошлом году для «500Тека».

Причесал логотип (был почти такой же, но пришлось полностью переделать):

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

Сделал сайт (был совсем другой):

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

19 января   портфолио   проекты   релиз

Эгея v3254

И ещё один сервис-пак Эгеи 2.7, сборка v3254:

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

Обновиться имеет смысл тем, кого беспокоят перечисленные проблемы. Замените папку system и все подпапки в themes. Свежий дистрибутив — на сайте движка.

Все фиксы быстрее всего выкатываются на наш сервис, подключайтесь.

8 декабря   релиз   Эгея

Эгея v3249

Вышел небольшой сервис-пак Эгеи 2.7, сборка v3249.

В релизной сборке (v3239) я обнаружил уязвимость, которая касается тех, кто ставил 2.7 с нуля. Из-за неё злоумышленник может вам в черновики засунуть любую заметку (прочитать черновик, опубликовать, удалить — не может). Кто обновлялся с 2.6 или более ранней версии — в безопасности. Ну и исправил несколько помарок заодно.

Обновиться имеет смысл всем, но если вы ставили 2.7 с нуля (в том числе, бету, и потом обновлялись с неё), то вам нужно обязательно. Замените папку system и все подпапки в themes.

Свежий дистрибутив — на сайте движка.

2017   релиз   Эгея

Эгея 2.7

Готова Эгея 2.7 (сборка v3239) с трансляцией на центральный сервер, большими улучшениями в темах, клавиатурным управлением в редакторе и другими штуками. Эта заметка в основном повторяет анонс беты, чтобы всё было в одном месте.

Проект «Холборн»: трансляция заметок на центральный сервер

Заметки, которые вы пишете в 2.7, отображаются в разделе «Блоги» на сайте движка:

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

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

Не бойтесь сделать опечатку — изменения тоже мгновенно приходят в «Блоги». Это же не Фейсбук вам. И если вы удалите заметку, она удалится и из «Блогов».

Новые темы и темы на основе переменных

В новой версии встроено несколько тем, например:

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

Все новые темы сделаны на основе «Простой», но не перекрытием её стилей, а через переменные:

Это тема «Дуглас», выглядит так:

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

В системной теме не осталось вообще никакого ЦССа — он весь переехал в «Простую». Если вы делали свою тему, вам придётся посмотреть диффы «Простой» и понять, что теперь нужно доопределить в своей, что не унаследуется из системной. Благодаря этому теперь вам не нужно бороться с системной и переопределять что-то, что было определено в ней.

Ещё в своих темах стало проще сделать собственную расцветку для подсветки синтаксиса. Про то, как это сделать, отдельно расскажу.

В ИЕ работает полифилл для ЦСС-переменных (спасибо, Игорь Адаменко).

Предпросмотр тем

В «Настройке» рядом с выбором тем появилась новая ссылка «Предпросмотр»:

По этой ссылке открывается специальная страница, на которой собраны основные элементы, из которых состоит блог, и дизайн которых полезно бы проверить. Она собственным текстом объясняет, на что стоит обратить внимание:

Откройте, например, предпросмотр темы моего блога.

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

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

Встраиваемость в сайты (для платных пользователей)

Появилась специальная тема «Встраиваемая» (Embeddable). Это тема, в ЦССе которой определяются только специфические для Эгеи внутренности — заметки, комментарии, теги, элементы навигации — но не обёртка и вид стандартных тегов ХТМЛ.

Если подключить к Эгее ЦСС от вашего основного сайта и добавить ХТМЛ вашей шапки и подвала в тему «Встраиваемая», Эгея волшебным образом будет выглядеть как страница вашего сайта (у меня теперь работает именно так, а раньше приходилось использовать сто костылей).

См. подробнее в заметке: Как встроить Эгею 2.7 в свой сайт.

Абзацы с классами

Любая самостоятельная строка, начинающаяся с .something, превращается в абзац с классом something. Пишете:

.loud Какой-то громкий текст

Получаете (увидите только в браузере):

Какой-то громкий текст

Ну, это у меня. У вас может выглядеть иначе.

Вы можете легко определить свои классы для каких-то особенных элементов текста. Важно понимать, что это просто ЦСС-класс, и он не сработает в РССе. Поэтому когда используете такое, убеждайтесь, что текст не теряет смысла без выделения. Именно поэтому, кстати, это абзац, а не див.

В самой Эгее и всех новых темах определены стили для .lead (подзаголовок или въезд), .loud (как выше) и .foot (сноска или примечание).

Вот это как раз примечание.

Клавиатура в редакторе

Игорь Адаменко, который сделал клёвое автосохранение в 2.6, реализовал для редактора 2.7 ещё одну отличную фичу — клавиатурное управление. Так быстрее. Работают такие сочетания (как в Гугль-доке):

⌘B жирный
⌘I курсив
⌘K ссылка
⌘⌥1 заголовок
⌘⌥2 подзаголовок
⌘⌥0 обычный абзац
⌘] увеличить уровень цитирования
⌘[ уменьшить уровень цитирования

Это работает и в заметках, и в комментариях, и в тегах, и в описании блога. В Виндоусе вместо ⌘ работает Ctrl.

Ссылки на твиты

В дополнение к видосами на Ютюбе и Вимео, Эгея теперь умеет вставлять твиты просто по урлу. Вы пишете в редакторе ссылку на твит:

https://twitter.com/omelekhin/status/902835411034271744

Получаете сам твит:

Спасибо Илье Гельману за это.

В РССе ссылки на твиты отображаются как просто ссылки на твиты.

Соцпакет

Если у тега есть собственные картинки (загруженные в редакторе тега), то они все попадают в качестве картинок для соцсетей ко всем заметкам с этим тегом. Удобно во всяких рубриках типа «Что почитать на выходных» обложки делать.

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

Добавилась поддержка шаринга в Вотсапп (спасибо Илье Гельману).

Поиск

Как вы помните, с версии 2.6 в Эгее новый поиск на базе движка «Роза». Теперь используется новая версия, которая ещё лучше рассчитывает релевантность.

Кроме того, поиск теперь корректно индексирует слова с нерусскими и неанглийскими буквами (например, украинскими, белорусскими). За это всё спасибо Роману Парпалаку.

Ссылка на теги переехала внутрь поля поиска. И вообще, поле поиска сильно переделалось и теперь легче встраивается в другие дизайны и лучше работает на мобильных (спасибо, Игорь Адаменко). Поле поиска теперь есть на всех страницах, и админское меню не сдвигает его, а наоборот, идёт левее.

Остальное

Улучшена фильтрация спама в комментариях (спасибо Ивану Щолокову).

Теперь вдобавок к РСС поддерживается джейсон-фид — новый стандарт для подписки. Читайте об РССе и джейсон-фиде. Помимо ленты всего блога и ленты по тегу, доступна «лента» из любой одной заметки, например — этой. Если зачем-то нужно вытащить смысловые куски заметки, не нужно пытаться парсить ХТМЛ. У меня это используется для моих трансляций в раздел «Блоги».

Гуиды заметок в РССе теперь стали их идентификаторами из базы данных. Это по идее должно решить проблему дубликации РССа. Конечно же, я сделал, чтобы заметки, написанные до обновления, остались со старыми гуидами.

Списки теперь можно начинать не с единицы (если список прервался на другой объект). Слайдер тегов заработал на мобилах.

Код метрики и аналитики больше не вставляется, если страницу просматривает залогиненный автор (это касается пользователей платной и хостед-версий).

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

Если на вашем сервере установлено ПХП-расширение zip, то внизу в настройке появится ссылка на скачивание последнего бекапа. Это я сделал для сервиса, но никому не будет лишним.

Ещё Серёга Чикин нарисовал клёвую иконку-лимончик, которая теперь показывается в подвале (посмотрите у меня, например).

Технические детали

Лайкли, Жуэль и ХайлайтЖС обновились.

Скрипты теперь собираются вебпаком. Игорь Адаменко их переписал более прямыми руками, чем мои.

Где скачать

Свежий дистрибутив — на сайте движка.

Если вы пользуетесь платной версией и хотите платную 2.7, напишите мне.

2017   продукты   релиз   Эгея
Ранее Ctrl + ↓