Блог Михаила Озорнина

Показывать изменения адресатов в переписке

Зачем писать в начале письма +mozornin и прочие заклинания

Этот пост актуален для тех, кто работает в больших компаниях (100+ человек) и у кого много длинной переписки в почте. Если коллег у вас двое-трое, то пост вряд ли будет полезным.

В чем проблема

Революция слака до меня ещё не дошла, у меня всё ещё много рабочей почты, — на работе это основной способ коммуникации.

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

Понять кто когда кого добавил — невозможно

Возникают вечные вопросы:

  • А Вася тут есть? О, есть, — отлично, а давно? Кто и когда его добавил?
  • Алярм! В переписке представитель клиента, сколько он уже с нами? Какой баклан его добавил?
  • Так, а почему Алена не отвечает? Как её нет? Куда она пропала, была же?

Решение

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

Решение: писать +mozornin, если добавляем его к переписке, и −mozornin, если убираем

Это добавление полезно всем:

  • участникам — строка +mozornin явно говорит: изменился список участников, будьте внимательны
  • добавляемому — в этот момент ему расскажут, что от него хотят

Правило простое и очевидное, вот как его применять:

Что написано Как читать
+mozornin Добавил Мишу Озорнина
−mozornin Убрал Мишу Озорнина
+ui.all@ Добавил в анонс всех фронтендеров
−ui.all@
+ui.react@
Пожалуйста, не пишите всем фронтендерам, пишите только реакт-разработчикам
−все Я убрал всех остальных, вопрос лично тебе
Пожалуйста, −mozornin Уберите меня из переписки, пожалуйста. Чтобы вам не искать, я — mozornin

Еще момент добавления человека через плюс лучше всего подходит, чтобы объяснить ему, что происходит. Уверен, не я один ненавижу, когда добавляют в тред из 20 писем без комментария.

Потянет Отлично
+mozornin +mozornin
Добавил Мишу Озорнина, он занимается всеми вопросами правильности цветовых градиентов
−mozornin −mozornin, +kkonstantinopolsky
Вопросами правильности цветовых градиентов сейчас занимается не Миша, а Костя
+ui.all@ +ui.all@
Есть вопрос про багу в поведении формы, может кто сталкивался?

Продублировать суть письма
−ui.all@
+ui.react@
−ui.all@
+ui.react@
Убираю всех лишних, вопрос только про реакт
−все −все
А подскажи, насколько сложно будет сделать описанное поведение?

Предлагаю всем, кому показалось полезно, начать применять прием

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

Upd: Игорь в комментариях справедливо напомнил, что Джимейл это умеет. Вот как выглядит:

Зал славы

Предлагаю записать те компании, кто молодец и пишет так:

  1. Яндекс

Если вы в компании, студии или бюро используете, напишите любым удобным способом, я вас добавлю.

Подписаться на блог…

В вашем письме сломается всё форматирование

TL;DR: Используйте в почте минимум форматирования, оно всё сломается

О чем речь

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

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

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

— Бдыщь!

В этот момент всё форматирование теряется. Никто не понимает почему в соседних абзацах противоположные мысли (сломался «ответ по месту»). Никто не может найти пункт 7.2, — в письме нет ни одной цифры (пропал нумерованный список).

Почему так происходит

Все это происходит из-за разных почтовых программ. Даже если упростить всё до ситуации, что письма отправляются только внутри одной компании, у которой почтовый сервер Microsoft Exchange и на всех компьютерах с Microsoft Windows установлен Microsoft Outlook, то будет как-то так:

  Ожидания того, кто писал письмо Реальность
Дизайнеры Outlook для виндоуза Mail.app, Spark, Airmail, Outlook для macOS, Postbox
Разработчики на линуксе Outlook для виндоуза Thunderbird, Evolution, KMail
Разработчики на виндоузе Outlook для виндоуза Outlook, Thunderbird
Люди с телефоном и планшетом Outlook для виндоуза Mail.app, Gmail, Outlook для айфона, Outlook для андроида, Nine, Inbox, Airmail, Spark, десять разных стандартных приложений андроида
Все подряд Outlook для виндоуза Веб-версия Outlook

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

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

Что делать

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

Вот шпаргалка:

Хочу Лучше
Вставить нумерованный список из 5 пунктов Вставить цифры текстом, без списка
Вставить маркированный список из 5 пунктов Вставить тире текстом, без списка
Вставить нумерованный список из 25 элементов на пяти уровнях, в одном из пунктов — таблица Скорей всего вы пишете не письмо, а спецификацию. Ей не место в письме, — перенести документ в вики, гугл.докс или куда-то ещё.
Вставить 25 скриншотов с замечаниями Выложить картинки куда-нибудь, а в письмо вставить ссылки
Вставить 25 скриншотов с замечаниями Выложить картинки и комментарии в вики или гугл.докс
Выделить текст красным, синим, жирным или курсивом Написать письмо так, чтобы от пропавшего выделения не изменился смысл письма
Ответить по месту на комментарии Васи Ответить цитированием, а не цветным текстом
Ответить по месту на комментарии Васи Перенести дискуссию из писем в более подходящее место
Ответить по месту на комментарии Васи, которые он написал в ответ на комментарии Алёны, которые Алёна написала к письму Вани Созвониться и обсудить

Вот ещё Илью Бирмана почитайте: Вёрстка неформатированного текста

TL;DR

  1. Форматирование обязательно у кого-то сломается
  2. Чем меньше форматирования в письме, тем надежнее
  3. Если письмо получается слишком сложным, а комментариев слишком много — перенесите его в вики, гугл.докс или трекер
Подписаться на блог…

Как шарить ссылки

Коротко: не посылайте ссылок без комментариев

Не знаю как у вас, но у меня дофига чатов по работе (да и не только по работе). И вот такое вот очень раздражает:

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

Проблема 1: непонятно, что по ссылке

По урлу не всегда понятно, что там. Хорошо, если урлы говорящие и можно хотя бы примерно понять, что там:

mikeozornin.ru/blog/all/share-and-shame Какой-то пост в этом блоге
bureau.ru/soviet/20190330 Какой-то бюрошный совет
pass.rzd.ru/static/public/ru?STRUCTURE_ID=5167 Что-то на сайте РЖД
ow.ly/al2h50osrwP Что-то в интернете

Проблема 2: ссылка без комментария часто опасна

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

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

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

Проблема 3: непонятно, зачем это смотреть

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

mikeozornin.ru/blog/all/share-and-shame

  • Ребята, прочитайте, пожалуйста. С понедельника за неправильные ссылки начисляется −5 баллов в карму.
  • Игорян, смотри. Вот ведь бывают зануды, лучше бы делом занялись.
  • Помнишь, я тебе говорил про говношаринг? Вот что я имел ввиду.
  • FYI: Я пост даже не читал, но там что-то про этикет, вдруг тебе в подборку подойдет.

artlebedev.ru/laws-of-the-future

  • Зацени какая красота.
  • И это называют дизайном. Да я так тоже за сто тысяч смогу.
  • Смотри, брутализм может выглядеть не уродски. Давай попробуем вернуться в проекте ХХХ к варианту с брутализмом?
  • Посмотри на проект внимательно, с виду полное отсутствие дизайна, а на самом деле со всеми дизайн-правилами все хорошо.
  • Изучи, пожалуйста, проект, разбери на запчасти и примеры, примеры микроверстки сохрани на общую доску пинтереста.

Проблема 4: шарят, не читая

Часто к ссылке без комментария добавляется то, что посылающий ссылку статью не читал. В итоге получается такой диалог:
— ux.pub/podborka-sketch-plaginov-dlya-navedeniya-poryadka-v-vashem-dizajne/
— О, какие посоветуешь оттуда?
— Не знаю, я не смотрел
— ¯\_(ツ)_/¯

Чтобы такого не было, всегда нужно явно писать, если ссылку не читал.

На что ещё обратить внимание

Если не знаете, что написать в комментарии, то так и напишите: «Я детально не вчитывался, но мне показалось, что тебе может быть интересно».

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

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

TL;DR

  1. Не шарить ссылки без комментария
  2. Явно указывать, если статью не читал
  3. Комментарий писать в отдельном сообщении
Подписаться на блог…

Блоги врачей

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

Намочи Манту
Самый известный медицинский канал, мед. журналисты
t.me/namochimanturu
Только спросить
Издание клиники Док+, мед. журналисты
t.me/tolkosprosit
Алексей Утин, кардиолог t.me/doctorutin и utin.online (это ютуб)
Клиника Рассвет Статьи на сайте, в фейсбуке, Ютуб
Умар Хасанов, иммунолог t.me/TrueImmunology
Сергей Бутрий, педиатр t.me/DrButriy + книга
Федор Катасонов, педиатр t.me/fediatrix + книга
Марина Кузнецова, стоматолог-терапевт и ортопед t.me/dentaljedi
Филипп Кузьменко, врач и медицинский журналист t.me/doctorphilipp и Ютуб
Ольга Кашубина, мед. журналист t.me/shbmnk
Алексей Головенко, гастроэнтеролог t.me/GastroPub
Татьяна Румянцева, акушер-гинеколог
Вот зачем это мне? Зачем?
t.me/rumyantsevamd и rumyantsevamd.ru

Иногда бывают и проблемы. Например, вот так выглядит телеграм-канал Сергея Бутрия. Я уже боюсь его открывать.

И не стоит забывать главное правило вот таких умных, как я:

Каналы в телеграме — это хорошо, но при плохом самочувствии лучше обратиться ко врачу

4 марта   врачи
Подписаться на блог…

Не скрывать, а показать сразу

Расскажу об одном простом принципе в информационном дизайне и дизайне вообще

ТАСС сделало интерактивный рассказ про дирижабль «Италия»:

Не собираясь оценивать их рассказ, я расскажу об одном моменте рассказа.

На странице есть схема устройства дирижабля:

Все детали скрыты за красными точечками, нужно навести мышку, чтобы узнать что это за деталь. Чтобы посетители справились, пришлось даже сделать мини-онбординг (↑ справка). Я бы предположил, что он не очень помогает.

Но даже те, кто по каким-то причинам знают, что делать, будут мучиться: навел — прочитал — навел — забыл что только что было — навел — прочитал. Это неудобно, желание изучать схему почти сразу пропадает.

Лучше сразу всё подписать:

Особенно глупо точки смотрятся на этой фотографии:

Чтобы не заставлять читателя страдать, есть простое правило:

Если можно не прятать, лучше не прятать.

Когда будете подписывать схемы и скриншоты почитайте на что обращать внимание: Как подписывать скриншоты

Подписаться на блог…

Форма входа и автозаполнение хрома

Расскажу об одной особенности автозаполнения браузеров, которая мешает сделать форму входа

О чем речь

Допустим, у нас есть некоторая форма входа, что-нибудь такое:

 

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

Получится что-то такое:

Большинство сервисов в интернете делает именно так. Я пособирал немного форм входа из разных сервисов. Вот:

Копилка: эти и другие формы входа (21 картинка) 

 

При отправке пустой формы показывается один или два текста об ошибке. Многим может показаться, что это не очень-то вежливо.

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

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

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

Кажется, что теперь все хорошо:

В чем проблема

Но здесь суровая реальность вмешивается в дизайн. Если в Хроме сработает автозаполнение, то поля будут заполнены (хром подсветит автозаполненные поля желтым), но кнопка будет заблокирована:

WTF? Что происходит?

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

Вот задача в баг-трекере Хрома: bugs.chromium.org/p/chromium/issues/detail?id=163072.

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

Как можно выкрутиться

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

1. Отлавливать автозаполнение поля

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

Большинство способов определения ходят вокруг обработки CSS-свойств поля. Подборка решений есть, например, здесь: stackoverflow.com/questions/11708092/detecting-browser-autofill

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

2. Дать нажать, но не показывать две красных надписи

Второй способ — не блокировать кнопку, но при этом не показывать два красных сообщения «Дорогой пользователь, нам жаль, что вы не способны справиться с заполнением двух полей». Можно обойтись с отправкой пустой формы более изящно. Например, можно потрясти формой входа, как это делает Цеплин (http://app.zeplin.io).

3. Поменять дизайн так, чтобы защита Хрома отключалась

Третий вариант — переделать дизайн так, чтобы пользователь был вынужден повзаимодействовать со страницей. В этом случае Хром отключит защиту и блокировка-разблокировка формы будет сработать корректно.

Например, на сайте Студии Лебедева вход находится во всплывающем окне, поэтому к тому моменту, как появится форма входа Хром отключит все защиты и автозаполнение не помешает.

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

Вот такие пироги.

18 февраля  
Подписаться на блог…

Редакторская находка в посте «отвечать туда же»

Хочу написать про одну редакторскую штуку в посте отвечать туда же — правило переписки

В чем проблема

Написать пост о банальном непросто. Тем более такой небольшой: вся суть поста укладывается в заголовок: Куда написали, туда и отвечай. Добавить больше нечего. Но писать пост из одного заголовка — какая-то шляпа. Даже с объяснениями о том, почему же так важно отвечать туда же, мои потуги на пост не тянули. Чего-то не хватало.

Как-то я дошел до такой вот таблицы, и она оказалась решением. Таблица стала скелетом поста, с ней пост остался таким очевидным, но при этом перестал быть идиотским.

В чем магия

Таблица работает на том же принципе, что и шутка эмоции Чака Норриса:

С первой секунды ясно, что все картинки одинаковые, можно даже и не пытаться ничего сравнивать. Но читатель все равно сравнивает картинки. Сила формата.

Аналогично действует и таблица. Напомню её:

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

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

Плюс таблица немного мемобразующая, может поэтому именно таблицу запостил Максим Ильяхов в телеграм-канале про деловую переписку (t.me/ya_vas_uslyshal/321).

Есть и вторая часть работоспособности таблицы, но в ней я не уверен. Некоторые варианты настолько идиотские, что возникает вопрос «Неужели так кто-то делает?». И оказывается, что чтобы быть нормальным очень просто: достаточно не писать ответ в телеграм, если написали в фейсбук.

Иногда удачная редакторская находка может вытянуть самый слабый пост.
Осталось только научиться придумывать редакторские находки осмысленно, а не ждать, пока они придут в голову. Какие есть способы?


Есть другой способ написать круто о банальном, но он сложнее:
Максим Ильяхов: Как (и зачем) писать о банальном

11 февраля   редактура
Подписаться на блог…

Кофе за 20 рублей

Некоторое время назад я написал серию постов про кофе. Это подробное руководство про кофе, наверное одно из самых полных на русском языке.

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

В этом посте я расскажу как пить приличный кофе за 20—30 рублей за чашку.

Что понадобится

Вам понадобится ровно два предмета:

1. Кофе-пресс
Купите любой небольшой кофе-пресс. Не гонитесь за брендом, возьмите любой, который не разваливается в руках.
2. Молотый кофе
Купите любой базовый кофе в любом нормальном кофейном магазине и попросите смолоть «под френч-пресс».

Кофе-пресс можно купить в Ашане (~300 ₽) и в Икее (499 ₽). А вот кофе ни в Ашане, ни в Икее лучше не брать.

Какой кофе выбрать

Начните с чего-нибудь простого. Вот недорогой кофе, с которого можно начать:

Цены за чашку получатся такими при покупке большой пачки кофе, если брать маленькую добавьте 15—20 %.

Как готовить

Засыпьте 13 г в кофе-пресс — одну столовую ложку с достаточно большой горкой.

Залейте в кофе-пресс 200 мл воды при 95° — немного остывший кипяток.

Перемешайте ложкой один раз и оставьте завариваться. Больше мешать не надо.

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

Истинные кофеманы будут против

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

Нельзя покупать молотый кофе. Нужно всегда молоть перед приготовлением Да, если есть возможность, лучше молоть перед приготовлением. Заранее молотый кофе сильно теряет в запахе, но не так сильно теряет во вкусе. Захотите, потом начнете молоть.
Нельзя без весов Взвесьте один раз, а потом сыпьте на глазок. Масса кофе особенно важна в эспрессо, поэтому уважающие себя кофейни взвешивают кофе перед каждым приготовлением. Но это в эспрессо, френч-пресс же простит ошибку в количестве кофе.
Кто вообще может пить эту Бразилию. В кофе должно быть не меньше 85 баллов. Примеры кофе выше не поразят вас сложностью вкуса, он весь достаточно простой. Отчасти в этом его прелесть — поймете, что вам нравится и через некоторое время найдете свой кофе. Но если они будут предлагать попробовать их кофе — берите.
Какой френч-пресс?! Только эспрессо! Приготовить эспрессо самостоятельно гораздо сложнее: для эспрессо нужна отличные кофемолка и кофемашина. Начните с простого варианта.
Какой френч-пресс?! Только харио! Начните с простого варианта, потом купите воронку, чайник и весы.

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

2018   кофе
Подписаться на блог…

Отвечать туда же — правило переписки

Главное правило деловой (и не только) переписки:
Отвечать туда, где спросили.

 

Причем речь не просто про канал (спросили в почте, ответил в почту), но и про способ (ответить на письмо, а не написать новое письмо).

Написать новое письмо вместо ответа — сделать неудобно собеседнику:

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

Про чаты у меня есть ещё пунктик: зареплаили — отвечу реплаем, заменшенили меня — меншеню в ответ, если написали просто так, то и я отвечу просто сообщением.

Шпаргалка:

Куда мне написали Куда мне надо ответить Куда мне не надо отвечать
Эл. письмо Ответ на эл. письмо Новое эл. письмо
Телеграм
Позвонить
Прийти лично
Общий чат в телеграме Ответить в чате просто так,
или через reply
Лично в телеграме
Письмо
Позвонить
Прийти лично
Лично в телеграме Ответить лично Письмо
Найти общий чат в телеграме и написать туда
Позвонить
Прийти лично
Комментарий в фейсбуке Ответить там же Написать в фейсбук-мессенджер
Найти адрес эл. почты и написать письмо

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

Иконки на обложке из набора 365 Сергея Чикина. Очень удобно: взял иконку, написал текст и обложка готова.

Подписаться на блог…

Как включить темную тему на сайте

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

Некоторые сайты включают темную тему исходя из времени суток. Например, Авиасейлз:

Скоро наступит будущее (UPD. Наступило в macOS 10.14.4)

В самой новой версии Сафари (Safari Technologies Preview) уже появился детект темной темы внутри браузера. В macOS 10.14.4 эта поддержка появился в обычном сафари.

Из браузера можно узнать установлена ли темная тема у посетителя и сделать немного магии. Светлая:

Темная:

Тем, у кого есть новый Сафари 68+ можно попробовать здесь:

mikeozornin.ru или mikeozornin.ru/blog

Как включить детект

Чтобы включить темную тему используется медиа-запрос prefers-color-scheme:

@media (prefers-color-scheme: dark) {
    //какие-то отличия темной темы, от светлой
}

Чтобы отлаживать, не включая-выключая системную тему, в Сафари (в той самой Technologies Preview) есть кнопка включения темной темы локально в браузере:

Если кому-то интересно как сделана темная тема, то кроме css-файла на сайте есть less-файл на гитхабе. Но осторожно, там очень много быдлокода и костылей.

Подписаться на блог…
Ранее Ctrl + ↓