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

Улучшение визуализации про выборы

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

Максим Кац выложил выложил вчера сводный график по голосованиям:

У меня сразу сработала профдеформация и желание его переделать.

Теория

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

Примеры:

Иммиграция в США, 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 Два
10 Десять

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

Как читается Как писать Как не писать
Одному Одному 1-му
Двух Двух 2-ух
Двоим Двоим 2-им
Двумя Двумя 2-я, 2-мя
Троих Троих 3-х, 3-их, 3-оих
Тремя Тремя 3-я, 3-мя

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

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

Двойка 2-ка
Тройка 3-ка
Троица 3-ца, 3-ица
Десятка 10-ка
Десяточка 10-очка

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

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

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

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

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

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

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

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

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

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

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

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

Запомнить

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

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

История одного неразрывного пробела

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

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

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

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

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

Интересно…

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

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

font-variant-ligatures: none;

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

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

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

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

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

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

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

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

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

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

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

Реальное письмо Правильное письмо
Миша, привет!
говорят у тебя должок по ACL )
Миша, привет!
Нам для завершения работ по ACL не хватает следующего:
1. …
2. …
3. …
Когда сможешь?

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

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

Реальное письмо Правильное письмо
Там в уведомлениях много твоих комментов, которые вроде закрыты. Посмотри, пожалуйста. Там в уведомлениях много твоих комментов, которые вроде закрыты. Посмотри, пожалуйста.
http://…

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

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

Реальное описание встречи Правильное описание встречи
Давайте обсудим …. Письмом кину ссылки. Вставить все ссылки в тело встречи.

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

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

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

Вместо него экран …. На нем:
1. …
2. …
3. …

Текст весь вычитан, можно брать в работу.

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

Реальное письмо Правильное письмо
+Миша
Считаю, что тут без UXеров нечего обсуждать.
+Миша
Миша, мы пытаемся решить …, есть такие варианты:
1. …
2. …
3. …

Что думаешь про …?

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

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

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

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

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

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

На что обратить внимание, когда делаешь поиск

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

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

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

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

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

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

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

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

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

4. Делать trim

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

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

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

Запрос Что должно найтись
Pinot toscana Хотя бы одно поле содержит «Pinot»
И
Хотя бы одно поле содержит «toscana»
’’Pinot toscan’’ Хотя бы одно поле содержит «Pinot toscana»
красное ’’Pinot toscana’’ Хотя бы одно поле содержит «красное»
И
Хотя бы одно поле содержит «Pinot toscana»

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. Представьте, что у вас есть очень много рабов, которые могут выполнять на компьютере очень простые задачи. Смогли бы вы раздать им задания и справиться с задачей с помощью них?

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

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

Задача Что сделать
Округлить картинки Есть квадратные фотографии, нужно сделать из них аватарки: круглые и того же размера.
Уменьшить картинки Есть большие фотографии размера 4000×3000 пк. Чтобы выложить их на сайт, их нужно уменьшить: горизонтальные — до 1200 пк по большей стороне, вертикальные — до 900 пк по большей стороне.
Добавить логотип Есть куча фотографий, в правый нижний угол каждой из них нужно добавить логотип.
Оттипографить текст В имеющемся тексте нужно расставить правильные кавычки и тире, поставить неразрывные пробелы и т. п.
Сделать бейджи на конференцию Для списка участников в excel-файле нужно подготовить и напечатать именные бейджи: логотип, дата и фио участника.
Сделать открытки с благодарностями Есть список благодарностей в excel-файле. Нужно напечатать несколько сотен открыток, по одной на каждую благодарность: от кого, кому, текст благодарности.
Перенести данные из одного excel-файла в другой Есть два excel-файла: фио человека + дата рождения и фио человека + размер футболки. Нужно получить итоговый файл фио + дата рождения + размер футболки. Все строки, конечно, перемешаны, а в одном из файлов есть лишние строки.
Посчитать занятость переговорок Нужно посчитать сколько часов в день была занята каждая из 10 переговорок офиса, отчет нужен за последние 3 месяца.
Скачать видео из интернета Есть какое-то видео на сайте, в вимео или другом хитром хостинге, хочется скачать его себе.
Скачать сторис пачкой Скачать все сторис из аккаунта в Инстаграме.
Перевести 1000 предложений Есть список из 1000 предложений, которые нужно перевести с помощью Гугл-переводчика.
Заменить 250 символов в скетче Сделали новую версию скетч-библиотеки. Чтобы не ломать продуктовые файлы, библиотеку сохранили в новом файле, не изменяя старый. Нужно заменить старые символы на новые.
Преобразовать фамилию, имя и отчество Есть список фамилия, имя, отчество, а нужно получить файл имя и фамилия.
Покрасить положительные числа Нужно покрасить в excel-файле все положительные числа в зеленый, отрицательные в красный. Чем больше модуль числа, тем более насыщенным цветом нужно покрасить.
Нанести на карту список адресов Есть excel-файл с таблицей адресов и названий, нужно нанести адреса на Яндекс-карту.

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, чтобы вырезать отчество в файле из строк имя, отчество, фамилия, можно не писать скрипты, а сделать замену [а-яА-Я] на пробел (добавьте по краям [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-файл и загрузить на Яндекс-карты.

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

Запомнить

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

Везде должно быть USB

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

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

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

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

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

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

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

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

 3 комментария    1099   7 мес   usb   будущее
Подписаться на блог…

Странное про слово «странное»

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

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

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

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

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

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

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

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

Что делать

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

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

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

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

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

  • Заметить странный.
  • Извиниться, что я пишу без пояснения, пообещать вернуться с ними.

— Например: Меня почему-то смущает верстка в макете %name%, в блоках %block-name-1% и %block-name-2%, я не могу понять почему. Я не успею понять что же меня смущает: мы договорились, что я дам ответ сегодня.

  • Я понимаю, что тебе сложно сделать с моим фидбеком «странная верстка». Прости меня за то, что так пишу. Давай я пойму, что меня смущает, и вернусь к тебе через два дня.
  • Что скажешь?
  • Поставить напоминание, записать в тудушку или календарь, попросить секретаря напомнить.
  • Детально описать, что не так, не забыть вернуться и обсудить.

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

Было Стало
Макет экрана создания странный В макете нарушены наши рекомендации по использованию элементов управления:
В подвале странные отступы На стенде %адрес% в подвале страницы %урл% неправильные отступы. Правильно вот так:
Последнее время ты странно себя ведешь, у тебя все хорошо? Ты всегда был примером ответственности: ничего не забывал и не нарушал обещанные сроки. Последние две задачи ты сделал с опозданием, не предупредив, что не успеваешь, а про третью забыл. У тебя все хорошо?
Вася как-то странно одевается
(Да пусть одевается)
Подписаться на блог…

Изящный онбординг в Apple Books

В 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 // пропорциональные

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

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

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

font-feature-settings: 'onum'  1

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

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

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

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

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

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

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

Когда использовать: по ситуации
Включить в 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

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

Почитать ещё

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

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