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

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

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

Если вы использовали Жуэль, вы знаете, что чтобы вставить на страницу аудиоплеер, достаточно просто поставить ссылку на МП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 рублей на один домен. Обычный бесплатный Жуэль доступен как раньше.

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

• Жуэль
• Жуэль-про
• Документация
  Как использовать декларативное АПИ и элементы управления. Есть пример полностью кастомного плеера, собранного из разных элементов управления
• Продвинутая документация
  Ручная инициализация через Джаваскрипт, АПИ и т. д.
• Женя Лазарев

Все слышали, что есть шаббат. Но не все знают, как устроена израильская рабочая неделя. А она сдвинута на один день относительно всего остального мира.

Шаббат (суббота) — это главный выходной, как воскресенье в остальном мире. А воскресенье — это первый рабочий день очередной недели. Когда тебе говорят «приходите в воскресенье» — это значит, что неделя уже близится к концу, и давай на следующей будем твой вопрос решать.

У обычных людей в нормальных компаниях выходные — это пятница и суббота. Но где-то в пятницу могут и работать полдня. В ночных клубах все тусовки — ночами с четверга на пятницу и с пятницы на субботу. Вечером субботы — тишина: завтра же на работу.

«Шаббат шалом» (буквально: «суббота мир») — это не столько приветствие субботы, сколько пожелание хороших выходных. В четверг, уходя с работы, люди говорят друг другу «Шаббат шалом». Ни разу не слышал, чтобы «шаббат шалом» кто-нибудь кому-нибудь сказал в сам шаббат.

Большинство магазинов и кафе в шаббат не работают. Это бы ещё полбеды, но не работает и общественный транспорт (кроме Хайфы).

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

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

Ближайший супермаркет закрывается в пятницу в 18:30 и открывается обратно в 18:30 в субботу. Одна из хороших кофеен, «Нахат», работает каждый день с утра и до 22, но в пятницу — до 18. То есть их нисколько не смущает работа в субботу, но вечер пятницы — это святое. Подобное же расписание у соседней аптеки. А другая кофейня, «Кафеликс», в субботу закрыта весь день, а в пятницу официально работает до 15:30. Но вчера меня оттуда выгнали около трёх, объяснив, что щас зима и шаббат наступает раньше.

При этом тут полно иммигрантов, которые открывают свои бизнесы и работают как им вздумается. Ещё одна кофейня, «Ориджем», которую держат бразильцы, работает каждый день до 19, но в субботу — до 14. Не работать в воскресенье — это экзотика, но вот хорошая бургерная неподалёку в воскресенье закрыта.

В результате пятница, суббота и воскресенье — это такая зона неопределённости. Перед тем, как куда-то пойти, нужно посмотреть расписание, и оно ещё может оказаться неверным, «потому что зима».

Когда живёшь в России, вся эта хрень с неработающими в субботу местами кажется дикостью. Но если честно, с воскресеньями в большинстве городов Европы дела куда хуже, чем с субботой в Тель-Авиве. Тут полно заведений, которые в гробу видали израильские странности, и работают всегда.

Только с транспортом засада. Так что если вы планируете съездить в Израиль, постарайтесь прилететь и улететь не в шаббат, а то из аэропорта и в аэропорт вы сможете доехать только на такси (где-то по 2,5 тысячи рублей в одну сторону) — поезда не ходят с середины пятницы до вечера субботы.

Заметка обновлена 9 янв 2020

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

Начнём с примера. Комплектная тема оформления «Дуглас» использует цветовую схему Tomorrow Night Eighties, нестандартную для Эгеи. Посмотрите в её файл стилей: .../themes/douglas/styles/main.css. В его конце есть несколько правил с префиксом hljs-. Они и определяют подсветку кода.

Чтобы сделать свою расцветку кода, нужно сделать новую тему оформления. Достаточно скопировать папку той темы, которую вы используете, и дать новой теме уникальное название в файле theme-info.php. Теперь переключите тему в «Настройке» и напишите в main.css любые свои правила по аналогии с «Дугласом».

Для подсветки кода у меня используется библиотека «Хайлайт» Ивана Сагалаева, которая включает целую кучу разных популярных цветовых схем (там слева можно примерить к разным языкам). Если вам лень сочинять свои цвета, вы можете просто прикрутить какую-нибудь из этих схем, взяв её ЦСС-файл с Гитхаба и вставив его в конец своего main.css. Ну или взять и докрутить по вкусу.