В заметке о ВС Коде я написал:

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

Мне написал Александр Яскевич:

То, что ты видел — рефакторинг. Если на этот файл в проекте были ссылки, ПХПШторм их также менял в то время, пока ты наблюдал прогрессбар. Ну или просто искал. Даже если ничего не нашел, время на поиск тратится. В таких мелочах ИДЕ от редактора и отличается.

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

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

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

16-го июня прочитаю на Питер-ЦСС доклад о декларативных АПИ на английском. Организаторы конференции ещё напоминают, что с завтрашнего дня билет стоит 4500 ₽ (сегодня ещё 4000 ₽).

Предположим, вы сделали какой-нибудь веб-компонент. Например умную выпадайку с автодополнением под названием superComplete. Тогда вы, скорее всего, предложите инициализировать его как-нибудь так:

var superCompleteInstance = new SuperComplete ('#el')

Или, если это плагин для Джейквери, то так:

$ ('#el').superComplete ()

А надо не так. Пусть оно инициализируется само, увидев знакомый класс:

<input id="address" class="supercomplete" />

Я называю это декларативными АПИ: вместо того, чтобы давать команды, ты описываешь свойства компонента параметрами. Научился я такому сто лет назад у Артёма Поликарпова с его Фоторамой, и использую в своих веб-продуктах.

Социокнопки «Лайкли» вставляют на страницу так:

<div class="likely">
  <div class="twitter">Твитнуть</div>
  <div class="facebook">Поделиться</div>
</div>

Чтобы поставить плеер «Жуэль», надо дать класс ссылке на аудиофайл:

<a href="news.mp3" class="jouele">Ilya Birman: News</a>

В «Эмёрдже» чтобы элемент появился только после полной загрузки всего содержимого, а до того отображалась крутилка, нужно завернуть его в такой див:

<div class="emerge" data-spin="true">...</div>

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

Расскажу, почему это клёво и как придумывать синтаксис таких вот декларативных АПИ.

Как сказал Стив Джобс, «Design is how it works». Это доклад про дизайн.

Другие объявленные доклады:

• Paint the Web with CSS. On Creating Art with Code
• Creating Magic With Houdini
• Designing Data-Driven Products. Controlled Chaos and Evolution
• Chinese Typography on the Web

Типографская раскладка 3.5 для Мака вышла.

В новой версии заработало сочетание ⎇⇧⌘V (Paste and Match Style) в русской раскладке.

Заодно поменялась иконка:

Ранее я писал подробнее о бета-версии.

Новый Жуэль 2.3 теперь доступен в НПМ:

npm install ilyabirman-jouele

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

Я уже рассказывал, что в новой Эгее 2.6 — новый поисковый движок «Роза» Романа Парпалака. На примере Эгеи расскажу немного о том, как вы можете использовать его в своих продуктах.

Что делает Роза

Роза — движок поиска по переданным ему данным.

У Розы нет «паука» для индексации. Это специально. В случае с движком блога, например, нет никакого смысла искать ссылки, ходить по страницам, разбирать их код. И ещё убеждаться, что не индексируешь одну и ту же заметку несколько раз, потому что она встретились на страницах разных тегов. Это лишняя работа: приложение-клиент знает, как устроены данные в нём, и может отдавать их поиску сразу «в чистом виде».

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

Таким образом, поиск — это взаимная работа клиента и Розы. Прикрутить её сложнее, чем использовать движок поиска общего назначения. Зато понимание структуры данных позволяет гибко форматировать результаты и учитывать их природу при ранжировании.

Любой приличной заметке в современном интернете нужна картинка. Поэтому пусть здесь будет скриншот, иллюстрирующий покрытие Розы автоматизированными тестами:

Теперь к делу.

Хранилище

Хранилище — это объект, через который Роза взаимодействует с базой данных. Клиенту нужно передавать его Розе и для индексации, и для поиска. Поэтому удобно иметь функцию, которая его отдаёт, когда нужно:

function e2_rose_storage () {
  static $pdostorage = null;

  if ($pdostorage === null) {
    $pdo = new \PDO (
      'mysql:'.
      'host='. $_db_server .';'.
      'dbname='. $_db_name. ';'.
      'charset=utf8',
      $_db_user,
      $_db_password,
    );
    $pdo -> setAttribute (\PDO::ATTR_ERRMODE, \PDO::ERRMODE_EXCEPTION);
    $pdostorage = new PdoStorage ($pdo);
  }

  return $pdostorage;
}

Для простоты я убрал некоторые специфичные для Эгеи вещи. Я тут проверяю, нет ли уже и так созданного хранилища; если нет, то создаю; и в любом случае его возвращаю. На место переменных, начинающихся с подчёркивания, надо поставить настоящие реквизиты базы данных.

Индексация

Задача клиента — «рассказать» Розе о данных, чтобы она построила свой индекс. Для этого нужно добавить каждую сущность (в Эгее — заметку) в индекс:

$stemmer = new PorterStemmerRussian ();
$indexer = new Indexer (e2_rose_storage (), $stemmer);
$indexable = new Indexable (
  $_note_id,
  $_note_title,
  $_note_text
);
$indexer -> index ($indexable);

Когда пользователь публикует или изменяет заметку, я вызываю этот код. По идентификатору Роза понимает, нужно ли добавить в индекс новую запись или переиндексировать старую.

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

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

Можно отдавать и адрес страницы при индексациии, но для Розы это просто текстовое поле, она не пойдёт по этому адресу низачем, просто вернёт его потом вместе с результатами поиска. Я этим не пользуюсь, потому что мне сподручнее получить адрес заметки из неё идентификатора, а не от Розы.

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

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

Когда пользователь удаляет или отзывает заметку, я делаю примерно так:

$stemmer = new PorterStemmerRussian ();
$indexer = new Indexer (e2_rose_storage (), $stemmer);
return $indexer -> removeById ($_note_id);

Поиск

Чтобы искать, нам понадобится файндер (а ему понадобится стеммер):

$stemmer = new PorterStemmerRussian ();
$finder = new Finder (e2_rose_storage (), $stemmer);
$finder -> setHighlightTemplate (
  '<span class="'.CSS_CLASS_HIGHLIGHT.'">%s</span>'
);

Здесь я также настраиваю шаблон для подсветки найденных слов в результатах поиска.

Теперь можно сделать запрос и достать результаты поиска:

$rose_query = new Query ($query);
$rose_query -> setLimit (SEARCH_LIMIT); 
$resultSet = $finder -> find ($rose_query);

Тут я не могу продолжать как ни в чём не бывало и не сделать ремарку. Объекто-ориентированное программирование делает мне больно. Просто так написать нельзя:

$results = rose_find ($db_link, $query, SEARCH_LIMIT);

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

Итак, после того, как мы получили $resultSet, мы уже можем выводить результаты. Но это тот момент, когда можно попросить Розу подкрутить релевантность, что я и делаю:

foreach ($resultSet -> getFoundExternalIds () as $external_id) {
  $note_id = e2_note_id_from_rose_id ($external_id);
  $note_rec = e2_note_by_id ($note_id);
  if ($note_rec['IsFavourite']) {
    $resultSet->setRelevanceRatio ($external_id, 2);
  }
}

Так я поднимаю избранные заметки повыше.

Тут же Розу можно попросить сделать «сниппеты» — так называются фрагменты, выводящиеся в результатах поиска. Роза сама находит предложения с найденными словами, подсвечивает в них эти слова и собирает маленький кусок текста, достаточный для узнавания заметки в выдаче. Это делается так:

$snippetBuilder = new SnippetBuilder ($stemmer);
$snippetBuilder -> setSnippetLineSeparator(' · ');
$snippetBuilder -> attachSnippets ($resultSet, function (array $external_ids) {
  $result = array ();
  foreach ($external_ids as $external_id) {
    $note_id = e2_note_id_from_rose_id ($external_id);
    $note_rec = e2_note_by_id ($note_id);
    $note_pack = e2_package_note ($note_rec);
    $result[$external_id] = $note_pack['text'];
  }
  return $result;
});

Чтобы собрать сниппеты, Розе нужны полные тексты заметок — сама она их не хранит, а о структуре моей базы данных ничего не знает. Поэтому в метод attachSnippets мы тут передаём колбек, который Роза вызывает, чтобы их получить. Он, как видите, вытаскивает заметки из базы.

После этого можно собрать результаты:

foreach ($resultSet -> getItems () as $external_id => $item) {
  $note_id = e2_note_id_from_rose_id ($external_id);
  $note_rec = e2_note_by_id ($note_id);
  $note_pack = e2_package_note ($note_rec);
  $note_pack['title' ] = $item -> getHighlightedTitle ($stemmer);
  $note_pack['text' ] = '<p>'. $item -> getSnippet () .'</p>';
  $note_packs_found[] = $note_packs;
}

Я подсвечиваю найденные слова в заголовке и показываю сниппет вместо текста заметки.

Код выдачи результатов поиска неэлегантен — хотя бы потому, что я трижды прохожусь циклом по этим результатам, многократно вызываю одни и те же функции с одними и теми же параметрами. Никаких измеримых проблем эта неэлегантность не создаёт, а её исправление потребовало бы изменения АПИ Розы. Поэтому пока пусть будет так.

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

Если захотите использовать Розу в своих продуктах, своими мыслями делитесь с Романом, а не со мной.

Заметка устарела. Читайте исправленную и дополненную версию

Если вы ищете прямой адрес РСС-потока моего блога, то вот он:
http://ilyabirman.ru/meanwhile/rss/

У меня появляется новая аудитория, поэтому время от времени я повторяю эту заметку.

Многие не знают, что такое РСС (RSS) и как им пользоваться. К сожалению, РСС — немного гиковская технология, не вполне доступная нормальным людям. Но если её освоить, то становится непонятно, как ты до этого жил. В этом смысле РСС похож на торенты: там тоже есть некоторый порог входа, но польза оправдывает затраты сил на его преодоление.

Что такое РСС? Это механизм подписки на блоги и другие сайты с регулярными обновлениями. Вместо того, чтобы самому ходить по разным сайтам и смотреть, не появилось ли там чего новенького, разумно поручить эту тупую работу машине. Пусть она ходит по всем сайтам и аккуратно собирает всё новое в одном месте. Тогда получается, что новости просто приходят к нам, а не мы охотимся за ними.

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

Вот как сейчас выглядит моя читалка:

Здесь все непрочитанные посты со всех блогов, за которыми я слежу. Мне не приходится ходить на их сайты, открывать сто букмарок в браузере — всё в одном месте. Не нужно ждать, пока откроется страница — всё уже скачано. Я не боюсь пропустить что-то важное — всё сохранено. Что-то я прочту сразу, что-то в выходные, что-то — когда буду в следующий раз в самолёте без интернета. А что-то не стану читать, просто ткну в него, чтобы оно перестало выглядеть как непрочтённое.

Как подписаться на кого-нибудь по РСС? Многие РСС-читалки позволяют подписать напрямую, то есть они сами будут скачивать всё новое. Но это непрактично: если вы подпишетесь независимо на компьютере, айпаде и айфоне, то три читалки не будут знать, что́ вы уже прочитали, и все заметки вы будете получать по три раза. Намного лучше воспользоваться сервисом-агрегатором, который будет ходить и собирать новости, а читалки с ваших устройств будут просто синхронизироваться с этим сервисом.

Заведите себе акаунт, например, в Фидли. В меню слева сверху есть пункт Add content — введите туда адрес блога, например, моего. Всё, теперь вы подписаны, новые посты будут приходить к вам туда. Подпишитесь так же на все любимые блоги, и теперь сможете читать всё в одном месте, например:

• http://ilyabirman.ru/meanwhile/ — Я
• http://tema.livejournal.com/ — Лебедев
• http://daringfireball.net/ — Грубер

Есть читалки, которые не могут подхватить РСС просто с сайта, им нужно указать прямой путь к РСС-потоку. У меня такой:

• http://ilyabirman.ru/meanwhile/rss/

У самого у меня около двух сотен разных источников в читалке. Среди них не только блоги, но и, например, результаты поиска в Яндексе по моей фамилии — так я всегда автоматически вижу, когда кто-то где-то ссылается на меня. Если вы сами читаете этот пост через РСС и недоумеваете, зачем я всё это объясняю — привет!

Конечно же, любой блог на Эгее поддерживает РСС, для этого ничего не нужно настраивать.

Читать РСС прямо в интерфейсе Фидли — это такое же насилие над собой, как использование Гмейла через веб-интерфейс. Кому-то нравится такая фигня, но мне не понять.

Для чтения РСС я предпочитаю Риидер (он платный, есть миллион других, в том числе бесплатных читалок). Риидер бывает для Айфона, Айпада и Мака — везде сказочно красивый (сверху это он на скриншоте). После того, как вы его установите, его надо будет привязать к вашему акаунту в Фидли, и всё, он будет показывать всё, на что вы подписаны. То есть это просто клиент для агрегаторов. Кстати, кроме Фидли есть ещё куча агрегаторов, просто я предпочитаю Фидли: он бесплатный и работает без нареканий. Риидер поддерживает множество разных агрегаторов, комбинировать можно как угодно. Вы можете даже использовать разные клиенты на разных устройствах — всё со всем без проблем синхронизируется.

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

Во-первых, за соцсетями, чтобы ничего не пропустить, надо внимательно следить, а это съедает целую кучу времени. И Твиттер, и Телеграм я читаю по диагонали и по умолчанию считаю, что там ничего особо ценного нет. А Фейсбук вообще ставит посты в одному ему известном порядке. Читалка ничего не пропустит.

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

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

Теперь вместо браузера и твиттера для чтения блогов вы можете использовать клёвый, удобный, придуманный специально для этого инструмент — РСС-читалку. На здоровье!

На прошедшей неделе мы открыли остаток второго раздела электронного учебника «Пользовательский интерфейс» — главы «Обратная связь», «Листание и прокрутка». Теперь первые два раздела доступны целиком.

Из письма издательства: «Бывало ли у вас такое, что вы приходите в гости, звоните в звонок, но ничего не слышите? Вы звоните ещё раз, но снова тишина. Начинаете стучать в дверь, и тут открывает возмущённый хозяин: „Чё трезвонишь?!“ Проблема в отсутствии обратной связи. Интерфейс дверного звонка прост, а в более сложных интерфейсах вроде управления автомобилем, самолётом или графическим редактором её качество ещё важнее. Из главы вы поймёте, почему руль на автомобиле удобнее, чем стрелки на клавиатуре в автосимуляторах.»

Люблю приводить старые примеры:

И, наоборот, новые:

И снова старые:

И снова новые:

Хотя вроде мода на такую фигню быстро прошла.

В конце опубликованных глав — тест по материалу из них.

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