Переделываю график по голосованию

Максим Кац выложил выложил вчера сводный график по голосованиям:
twitter.com/max_katz/status/1280143683434811395
У меня сразу сработала профдеформация и желание его переделать.

Теория

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

Примеры:

Иммиграция в США, pmcruz.com/dendrochronology/, фантастически красивая, посмотрите

Наступление весны в США, washingtonpost.com/graphics/2018/national/early-spring/

Ожирение в разных штатах, flowingdata.com/2016/09/26/the-spread-of-obesity

Доминирующие партии в разных штатах, graphics.wsj.com/elections/2016/field-guide-red-blue-america/

Районы Лондона, informationisbeautifulawards.com/showcase/842-london-squared-map-making-the-city-easier-to-read, оригинальная ссылка сломалась, держите эту

Результаты выборов в США, нашел у Кирилла Беляева

Картинку Максима Каца нужно переделать в карту, так станет понятно, где больше фальсификаций, а где меньше, да и просто будет проще найти свой регион.

Редизайн

Самый сложный момент — составить узнаваемую регулярную карту, для США такого полно, для России я не встречал. Оказалось уже были попытки сделать, я воспользовался готовой картой Ивана Дианова (medium.com/kompany/the-step-by-step-story-of-making-a-tile-grid-map-of-russia-92190d14e41e)

Посмотрите процесс в посте, там был много попыток нарисовать хорошую регулярную карту.

Upd. Женя Софронов принес ссылку на конкурс регулярных карт для России, на котором как раз победила карта Ивана Дианова. Посмотрите, там много интересного: telegra.ph/Uchastniki-i-ih-raboty-12-03.

Итог:

Собрал в фигме, чтобы вы могли себе скопировать: figma.com/file/eflJ42NaaPY8kcyc7ZetKJ/russia-regular-vote-map

Теперь легче и интереснее рассматривать и проще сделать какие выводы. Сделать выводы предлагаю самостоятельно.

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

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

TL;DR; Числа, записанные цифрами, всегда читаются как «один», «одна», «одно», «два», «три». Не используйте такую запись ни для чего другого.

Количественные числительные

Количественные числительные — сколько? скольких? скольким?

В именительное падеже их можно писать цифрами:

А вот в других падежах писать цифрами нельзя:

Существительные, похожие на числительные

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

Что за «два-ка», «три-ка», «три-ица», «десять-ка» и «десять-очка»?

Порядковые числительные

Порядковые числительные «первый», «второй» наращиваются так: 1-й, 2-й.
Как правильно, почитайте у Ильи Бирмана.

Специальное комбо для тех, у кого кровоточат глаза от неправильных наращений:

С 3-ёх летним опытом

Почему ещё можно и нужно писать числа прописью

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

В каком абзаце вы быстрее заметили число?

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

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

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

Этот эффект усиливается, если в каждом предложении есть какие-то числа или цифры. Успокойте текст: сделайте так, чтобы цифры не бросались.

Запомнить

Не все числа нужно писать цифрами, писать числа буквами — нормально. Некоторые числа или похожие на них слова неправильно писать цифрами.

Ночная история про профессиональный заскок, сафари и Тинькофф.

Изначально это был твиттер-тред, но для истории я перенес его в блог.

Вижу, что на странице Тинькофф какой-то конский пробел между Tinkoff и Black, очевидно так не должно быть. (только в сафари, в других браузерах все ок).

Смотрю в код, там неразрывный пробел, меняю на обычный — все становится отлично.

Ну, понятно, дело в символе неразрывного пробела, который как-то не так сделали в шрифте. Добавляю для проверки второй раз Black через неразрывный пробел, но нет — все нормально.

Интересно…

Пытаюсь понять, в чем разница, вижу, что ff — одна из стандартных лигатур, может быть дело именно в лигатуре? Пробую остальные — бинго, это они.

Для окончательной проверки отключаю лигатуры заклинанием:

font-variant-ligatures: none;

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

Почему так не знаю (скорее всего баг в сафари), но любопытство удовлетворил. Дизайнеры Тинькофф, вы, видимо, в хроме сидите?

Частенько я получаю письма, для ответа на которые нужно что-то вспоминать, искать, смотреть в прошлых письмах, чатах или вики. Отвечать на них не хочется, всегда невольно тяну до последнего.

Рассказываю о принципе, помогающем написать письмо, на которое легко и приятно отвечать.

Принцип звучит так:

В письме уже есть всё нужное

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

Приведу несколько примеров из жизни. Я убрал из них реальные имена (кроме своего), задачи, комментарии и ссылки.

Напомнить о долге

Моя реакция была примерно такая: ну офигеть, «говорят», кто говорит? Какие долги, где вообще что искать? Ок, пойду спрошу Лену, она отправит к Васе, Вася — к Насте, Настя к Леше. Если потрачу целый день, то узнаю.

Внес исправления, нужно попросить посмотреть снова

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

Создать встречу

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

Сообщить об том, что изменения в макеты внесены

Добавить кого-то в переписку

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

Вместо заключения

Да, писать так муторно.
Да, писать так долго.
Да, если адресату нужно что-то от меня, он все это найдет сам.

На самом деле, писать так в ваших же интересах: сделайте адресату удобно и он быстро ответит на ваше письмо. Другие письма проигнорирует, потому что они плохие, а на ваше ответит первым, потому что легко.

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

• Совет Василия Половнёва bureau.ru/soviet/20190307
• Книга «Новые правила деловой переписки», Максим Ильяхов, Людмила Сарычева
• Константин Коломеец про помощь в принятии решений: Интранет и скорость принятия решений
• Женя Арутюнов про принцип «Всегда с мобилы»

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

Изначально это был твиттер-тред, для удобства я перенес в пост.

1. Регистронезависимый поиск

Поиск почти всегда лучше сделать регистронезависимым. Нет ничего более неудобного, чем регистрозависимый поиск. Если кому-то нужна регистрозависимость — лучше сделать опцией.

2. Искать с первого символа

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

3. Искать по всем полям сразу

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

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

4. Делать trim

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

5, 6 и 7. Как делить поисковый запрос на токены

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

8, 9 и 10. Диакритические знаки

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

Châteauneuf-du-Pape должен находиться по запросам:
Châteauneuf-du-Pape
Chateauneuf-du-Pape

Это важно потому, что не все помнят как правильно. Кто-то может забыть сам, а кто-то скопирует текст там, где не знали как правильно. Например, Château очень часто пишут без Accent circonflexe (Chateau).

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

Не делайте замену символов руками (â → a, á → a, à → a, å → a и т. д.), вы задолбаетесь и что-то пропустите. В вашем языке программирования, скорее всего, есть функция нормализации. Например, вот в джаваскрипте:
developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

Я использовал вот такой код для нормализации (откуда-то скопипастил)

value.normalize(’NFKD’).replace(/[^\w\s.-_\/]/g, ’’).toLocaleLowerCase();

Посмотреть в жизни

Попробуйте все описанное выше в Винах Парфенона.

Что я забыл?

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

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

Как узнать такую задачу

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

Можно воспользоваться проверочными вопросами:

1. Могу ли я вообще сделать задачу сам? (Сложность задачи только в том, что на нее требуется много времени, а не специальные знания и умения).
2. Потребуется ли мне на задачу больше часа-двух работы?
3. Похожа ли задача на «сделать какое-то несложное действие очень много раз»?
4. Могу ли я четко описать, что нужно сделать над каждым из объектов?
5. Представьте, что у вас есть очень много рабов, которые могут выполнять на компьютере очень простые задачи. Смогли бы вы раздать им задания и справиться с задачей с помощью них?

Если на значительное количество вопросов ответ «да», то перед вами кандидат на автоматизацию.

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

Почему не надо делать вручную

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

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

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

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

Способы автоматизации

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

Множественные курсоры в текстовом редакторе

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

Вот как это выглядит в жизни:

Как пользоваться:

• VS Code: code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor
• Sublime Text: sublimetext.com/docs/selection

Поиск и замена в текстовом редакторе

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

Например, чтобы вырезать отчество в файле из строк имя, отчество, фамилия, можно не писать скрипты, а сделать замену [а-яА-Я] на пробел (добавьте по краям [a-яА-Я] пробелы и включите режим регулярных выражений):

UPD. Илья Бирман написал, что решил бы задачу мультикурсором. Да, мультикурсором тоже можно.

Макросы в текстовом редакторе

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

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

Excel

Excel — кладезь автоматизатора. Если вы можете изучить только один инструмент — начните с excel. В нем можно делать преобразования данных, объединять и делить файлы, работать с числами и строками и т. п. Если научиться писать макросы, то с помощью них можно делать вообще почти все на свете.

Говоря excel я всегда подразумеваю его аналоги: google sheets и apple numbers. Google sheets вообще часто удобнее потому, что работает в браузере.

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

Mail merge в Word’е

Mail merge — это инструментарии MS Office для генерирования и отправки документов, открыток, бейджей. Сформировали шаблон документа, подключили файл с данными, получили 250 бейджей и отправили их на печать.

Скрипты и утилиты

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

Скрипт на питоне или павершелле

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

Что с этим делать

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

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

Округлить картинки

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

for i in *.png ; \
do convert "$i" -alpha set \
    \( +clone -distort DePolar 0 \
       -virtual-pixel HorizontalTile -background None -distort Polar 0 \) \
    -compose Dst_In -composite -trim +repage "$i" ; \
done

Написать такое я не способен, но на поиск в гугле ушла одна минута.

Уменьшить картинки

Задача: Есть большие фотографии размера 4000×3000 пк. Чтобы выложить их на сайт их нужно уменьшить: горизонтальные — до 1200 пк по ширине, вертикальные — до 900 пк по высоте.
Способ решения: Утилиты и скрипты
Решение: Установить imagemagick и произнести заклинание

magick mogrify -resize 1200x900 *.jpg

Добавить логотип

Задача: Есть куча фотографий, в правый нижний угол каждой из них нужно добавить логотип.
Способ решения: Программы или скрипты
Решение: Вообще проще всего составить action для фотошопа. Но т. к. фотошопом пользоваться я так и не научился, то я бы воспользовался Annotating Images в imagemagick (imagemagick.org/Usage/annotating/).

Оттипографить текст

Задача: В имеющемся тексте нужно расставить правильные кавычки и тире, поставить неразрывные пробелы и т. п.
Способ решения: Утилиты и скрипты
Решение: Установить себе в альфред макрос для типографа (github.com/voldmar/alfred-typograf). Выделить текст, нажать ⌃ + ⇧ + T.

Сделать бейджи на конференцию

Задача: Для списка участников в excel-файле нужно подготовить и напечатать именные бейджи: логотип, дата и фио участника.
Способ решения: MS Word
Решение:

• Сделать шаблон документа в MS Word’е.
• Подставить в него поля для переменных из excel-документа.
• Сгенерировать или напечатать нужное количество бейджей по шаблону.

Как пользоваться Mail merge’ем в Word: support.microsoft.com/ru-ru/help/318118/how-to-use-the-mail-merge-feature-in-word-to-create-and-to-print-form

Сделать открытки с текстом или благодарностями

Задача: Есть список благодарностей в excel-файле, нужно напечатать на открытках от кого, кому и текст благодарности.

См. выше, все тот же mail merge.

Перенести данные из одного excel-файла в другой

Задача: Есть два excel-файла: фио человека + дата рождения и фио человека + размер футболки. Нужно получить итоговый файл фио + дата рождения + размер футболки. Все строки, конечно, перемешаны, а в одном из файлов есть лишние строки.
Способ решения: Excel
Решение: Написать формулу с поиском по другому листу — VLookUp (ВПР в русской версии).

Посчитать занятость переговорок

Задача: Нужно посчитать сколько часов в день была занята каждая из 10 переговорок офиса, отчет нужен за последние 3 месяца.
Способ решения: Скрипты
Решение: Дойти до знакомого разработчика и попросить забирать нужные данные по API Outlook-сервера.

О конкретно этой задаче я узнал случайно, к этому моменту человек уже два или три месяца составлял отчет вручную. Он ежедневно открывал календарь переговорок, суммировал занятые часы, записывал число в ячейку файла и переходил к следующей переговорке. Больше 10 переговорок. Каждый день. В течение пары месяцев. Я бы восхищен упорством человека, я бы не выдержал и недели.

Конкретно в этом случае нетехнари сделали все, что смогли — поняли, что задача — кандидат на автоматизацию и сходили к технарям, где им сказали, что формировать такой отчет автоматически невозможно.

Скачать видео из интернета

Задача: Есть какое-то видео на сайте, на ютубе, вимео или другом хитром хостинге, хочется скачать его себе.
Способ решения: Программа, утилиты и скрипты
Решение: В простом случае — воспользоваться программами 4K. В более сложном — скопировать какой-нибудь адрес видео веб-инспектором, в еще более сложном — погуглить какую-нибудь консольную команду для ffmpeg.

Перевести 1000 предложений

Задача: Есть список из 1000 предложений, которые нужно перевести с помощью Гугл-переводчика.
Способ решения: Google sheets
Решение: Вставить предложения в документ, перевести в соседнюю ячейку с помощью формулы (см. пример):

=GOOGLETRANSLATE(A1,"ru", "en")

Заменить 250 символов в скетче

Задача: Сделали новую версию скетч-библиотеки. Чтобы не ломать продуктовые файлы, библиотеку сохранили в новом файле, не изменяя старый. Нужно заменить старые символы на новые.
Способ решения: Утилиты и скрипты
Решение: Установить Symbol Swapper и заменить им.

Преобразовать фамилию, имя и отчество

Задача: Есть список фамилия, имя, отчество, а нужно получить файл имя и фамилия.
Способ решения: Excel
Решение: Я бы сделал это в excel / google sheets. Вставить в колонку значения, в следующие три колонки разделить их на части, и потом сцепить в нужном порядке.

Покрасить положительные числа

Задача: Нужно покрасить в excel-файле все положительные числа в зеленый, отрицательные в красный. Чем больше модуль числа, тем более насыщенным цветом нужно покрасить.
Способ решения: Excel
Решение: Использоваться conditional formatting. Как им пользоваться: support.office.com/en-us/article/use-conditional-formatting-to-highlight-information-fed60dfa-1d3f-4e13-9ecb-f1951ff89d7f

Нанести на карту список адресов

Задача: Есть Excel-файл с таблицей адресов и названий, нужно загрузить из на Яндекс-карту.
Способ решения: Google sheets, API
Решение: Я делал это в такой последовательности:

• Импортировать excel-файл в google sheets.
• Написать простую функцию на геокодирование: отправить по API в Яндекс-карты адрес и получить в ячейку координаты.
• Разбить строку координат на две и поставить их на лист в нужном порядке.
• Экспортировать лист в CSV-файл и загрузить на Яндекс-карты.

Пример таблицы с вызовами

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

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

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

Я мечтаю, что все маломощные приборы будут работать и заряжаться от стандартного usb-провода (например, type-c). В usb type-c пролезет до 100 ватт, этого более чем достаточно для любой мелочевки.

Как хорошо в случае usb:

• Зарядка всегда с собой.
• Можно обойтись одной зарядкой на несколько приборов, а не брать одну для каждого свою.
• Если забыл зарядку, она сломалась или перетерся провод, то продается в любом магазине.
• Если нужна автомобильная зарядка, то для неё тоже ничего специального делать не надо.
• Если нет розетки (например в лесу), то это не проблема, потому что с собой павербанк.
• Выгодно продавцам: можно сэкономить на комплекте и продавать адаптер отдельно.

Не пойму почему до сих пор не так.

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

Расскажу о своих заскоках: почему я стараюсь не использовать слово «странный»

Что случилось

Иногда встречаю, когда говорят %что-нибудь% — странное: в макете какая-то странная верстка, в подвале между кнопками странный отступ, мне клиент написал странное письмо.

В зависимости от ситуации странный может означать:

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

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

Говорить странный без уточнения этой самой странности — неуважительно по отношению к слушателю. Уважительно — разобраться в себе, понять что не так, и сформулировать более предметно: в макете меня смущает вот это и вот это, поэтому и поэтому. Но это сложнее, чем просто написать странный.

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

Что делать

Я сам позволял себе говорить и писать так. Но с некоторых пор стараюсь отлавливать в себе такое поведение (до сих пор не могу избавиться).

В письменной речи мне это дается ощутимо проще, чем в устной. Одно время у меня была автозамена в macOS странный → странный !!!ALARM!!!, чтобы при использовании слова я его замечал. Однако она продержалась совсем недолго, — она больше мешала, чем помогала. Сейчас я просто как-то научился замечать это в письменной речи, стирать и сразу переписывать по-нормальному.

Вот мой алгоритм:

• заметить странный,
• понять, что же такое меня смущает,
• детально описать, что не так, а странный не писать.

В случае, если дедлайн поджимает, а понять и сформулировать странность не успеваю:

• Заметить странный.
• Извиниться, что я пишу без пояснения, пообещать вернуться с ними.
  • Например: Меня почему-то смущает верстка в макете %name%, в блоках %block-name-1% и %block-name-2%, я не могу понять почему. Я не успею понять что же меня смущает: мы договорились, что я дам ответ сегодня.
  • Я понимаю, что тебе сложно сделать с моим фидбеком «странная верстка». Прости меня за то, что так пишу. Давай я пойму, что меня смущает, и вернусь к тебе через два дня.
  • Что скажешь?
• Поставить напоминание, записать в тудушку или календарь, попросить секретаря напомнить.
• Детально описать, что не так, не забыть вернуться и обсудить.

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

В iOS 13 в Books появились цели. Эппл сделал онбординг этой фичи изящным и технологичным. Хочу рассказать о том, почему мне так кажется.

Начиная с версии iOS 13 пользователь может установить себе для чтения цель: «Я буду читать по два часа в день». Приложение Books будет считать время и сообщать, когда цель достигнута. Пользователям неплохо бы рассказать, что такая функция появилась.

Как это могло бы выглядеть

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

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

1. В какой-то момент телефон или планшет показывает уведомление «Смотри, в книгах теперь есть цели, хочешь?». По тапу открывается какой-то экран. Сразу возникают вопросы:
   • В какой момент показать, как не отвлечь и не раздражать непрошенным уведомлением (особенно после релиза iOS, где все лезут с рассказами о новых фичах).
   • Как узнать, кому нужно показывать, а кому нет. Например, можно посмотреть, у кого загружены какие-то книги, или кто читал последний месяц. А если человек не читал, а начнет, то что? Значит, уже недостаточно проверять этот онбординг только после обновления, нужно проверять иногда. Как часто, как долго? Нужно ли проверять в iOS 14, 15 или 16?
   • Не забыть сохранить, кому показывали онбординг, а кому нет. После сохранения нужно не потерять при восстановлении из бекапа и при обновлении на следующую iOS.
   • Как должны работать цели до показа уведомления? Что будет, если цель достигнется раньше, чем сработает онбординг?
2. Нужно задизайнить, разработать, локализовать и протестировать экран этого онбординга.
3. Нужно убедить команду сделать онбординг ещё в одном приложении это ок (в iOS его обычно нет).

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

Как сделал эппл

Не знаю почему именно Эппл сделал по-другому, я нигде не встречал рассказ. Но он сделал такой онбординг:

1. Установить значение цели по умолчанию в 5 минут

Всё. Онбординг сделан, — реально один шаг. Попробую подвести итог тех вопросов:

Итого:

• Нужно разработать кастомной онбординг-логики: ноль
• Нужно разработать дополнительных экранов, механизмов хранения: ноль
• Вообще дополнительные дизайн и разработка: ноль

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

Ну и напоследок:
Дефолт все равно установить пришлось бы :—)

Вот скриншоты как выглядит весь процесс:

Прекрасный, технологичный дизайн фичи.

Что это за фичи, и почему про них нужно знать

Что случилось

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

Что это за фичи

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

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

Пропорциональные и моноширинные цифры

Что это: Фича переключает пропорциональные (сверху) и моноширинные (снизу) цифры. Обратите внимание, что сверху число съехало больше, чем на целый разряд.

Шрифт Inter, rsms.me/inter

Когда использовать: моноширинные — в таблицах и таймерах, пропорциональные — в тексте и фактоидах
Включить в CSS:

font-feature-settings: 'tnum' 1 // табличные
font-feature-settings: 'pnum' 1 // пропорциональные

Старостильные (минускульные) цифры

Что это: Фича переключает маюскульные (сверху) и старостильные (минускульные, снизу) цифры. Минускульные цифры выравниваются по высоте строчных букв (пурпурным) и имеют выносы и сносы.

Шрифт RF Dewi, russianfonts.ru/fonts/dewi/dewi-typeface.html

Когда использовать: по ситуации
Включить в CSS:

font-feature-settings: 'onum'  1

Альтернативные начертания

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

Альтернативные цифры (4, 6, 9):

Шрифт Inter, rsms.me/inter

Устранение неоднозначностей. Символы I (прописная i), l (строчная L), 1 (единица), 0 (ноль), O (прописная буква о) часто путаются, фича делает их различимыми:

Шрифт Inter, rsms.me/inter

Римские цифры:

Шрифт Alegreya, fonts.google.com/specimen/Alegreya

Когда использовать: по ситуации
Включить в CSS: font-feature-settings: ’ss01’ 1, вместо 01 поставить нужно число

Концевые росчерки (своши)

Что это: Фича включает красивые длинные росчерки у букв, обычно у курсивного начертания.

Шрифт Adobe Garamond, fonts.adobe.com/fonts/adobe-garamond

Когда использовать: по ситуации
Включить в CSS:

font-feature-settings: 'swsh' 1

Контекстные замены

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

Шрифт Inter, rsms.me/inter

Когда использовать: Просто включите, обычно станет лучше
Включить в CSS:

font-feature-settings: 'calt' 1

Дроби

Что это: Фича превращает обычный текст в обыкновенные дроби (о, каламбур).

Шрифт Inter, rsms.me/inter

Когда использовать: Когда нужны дроби
Включить в CSS:

font-feature-settings: 'frac' 1

Как использовать

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

Если у вас Скетч, то все будет не так удобно:
View → Show Fonts → ⚙︎ → Typography

Upd. С версии Скетча 59 будет более-менее, — опентайп-фичи доступны через меню Text → Opentype Features.

Где работают (везде)

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

В мобильных интерфейсах на iOS: stackoverflow.com/questions/46450875/ios-opentype-font-features-in-swift

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

Почитать ещё

Возможно, это будет вам тоже интересно:

• OpenType features: typofonderie.com/font-support/opentype-features/
• The Complete CSS Demo for OpenType Features: sparanoid.com/lab/opentype-features/
• An ode to OpenType: Fall in love with the secret world of fonts: figma.com/blog/opentype-font-features/
• Inter Font → Features: rsms.me/inter/#features