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

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

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

Основные правила выравнивания в таблицах, чтобы вы могли не читать Мильчина.

Если спросить любого редактора, как сделать хорошую таблицу, он ответит: «Посмотри в Мильчине». Одна глава про таблицы в справочнике занимает 128 страниц. Не каждый помнит её наизусть или готов прочитать, чтобы сделать одну таблицу.

Я собрал основные правила выравнивания в таблицах. Они могут отличаться от мнения Мильчина, это мой опыт и интерпретация

1 Всё выровнять по левому краю колонок

Сначала нужно выровнять всю таблицу по левому краю. Это такой вариант по умолчанию. Получится что-то вот такое:

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

2 Числа выровнять по правому краю

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

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

Из-за сокращенного заголовка колонки «Кол-во» идея может быть не до конца понятна, вот:

Если технически выровнять так сложно, то есть простое и надежное решение — выровнять текст по правому краю целиком:

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

3 Диапазоны выровнять по разделителю

Дальше нужно найти колонки с диапазонами и похожими конструкциями, когда в ячейке пара чисел написана через какой-нибудь разделитель: 1…15, 1—15, 1 / 15, 1 из 15, и т. д.

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

Диапазоны нанизываются на разделитель как на ось:

4 Значки выровнять по центру

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

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

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

На этом с выравниванием всё

5 Включить моноширинные (табличные) цифры

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

Числа 1113 и 3800 не совпадают разрядами. Это произошло из-за того, что в шрифте Интер, которым набрана таблица по умолчанию стоят пропорциональные цифры. Моноширинные цифры в шрифте есть, но их нужно включать отдельно (opentype-фичей).

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

Ниже показана разница моноширинных (сверху) и пропорциональных цифр. Обратите внимание, что в во второй таблице 1113 уместились в три разряда числа 3800. Сравнивать числа, набранные пропорциональными цифрами будет сложнее.

Шпаргалка

Чтобы каждый раз не перечитывать пост, вот шпаргалка:

Что почитать

• Подборка советов Ильи Бирмана про таблицы: bureau.ru/soviet/selected/dima-shishkin/birman-pilit-tablitsy/
• Глава 13. Таблицы и выводы, «Справочник издателя и автора», Мильчин и Чельцова

Каждый Дон Кихот воюет с ветряными мельницами, а каждый дизайнер воюет с неправильными подписями в письмах

О чем речь

Многие из вас видели что-то такое:

или такое:

иногда даже такое:

иногда встречается и такое:

Эти подписи на шкале хорошо-плохо где-то между «плохо» и «полная катастрофа». Мой пост о том, как делать правильно.

Почему это важно

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

Хорошая и плохая подпись

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

Я бы ориентировался вот на такие моменты:

1. Подпись должна быть на языке ваших адресатов
   Если пишете на английском — подпись на английском, пишете на русском — подпись на русском. Никаких Best regards и Senior Java Developer в русскоязычной переписке.
2. Сначала имя, потом фамилия
   Писать наоборот, — сначала фамилию, а потом имя — очень формальный стиль. К нему хочется сразу дописать и отчество. Само имя пишите так, как вас следует называть. Внимательные люди будут называть именно так как написано: Света, Даниил, Ася, Маргарет, Митя, Наталия. (см. Не ошибаться в именах)
3. В подписи не должно быть очевидного
   Не надо подписывать, что mike.ozornin@gmail.com — это эл. почта, знак @ однозначно говорит: «Это — адрес электронной почты». Да и вообще сам адрес эл. почты вообще не нужно писать, он же вот, перед глазами у адресата.
   Если сайт расположен на том же домене, что и электронная почта, то его тоже можно не указывать. Ваши читатели не глупые и поймут, что у компании с почтой mozornin@ptsecurity.com сайт ptsecurity.com. В некоторых компаниях принято перечислять все сайты в подписи сотрудников, не надо так.
   Если без сайта никак нельзя обойтись, тогда из ссылки нужно хотя бы убрать http:// и www.
4. Телефон — только личный
   Если указываете телефон, то только мобильный или городской с добавочным, общий телефон компании лучше не указывать.
   Факс тоже лучше не указывать.
5. Без «С уважением»
   Ваши адресаты чувствуют, что вставка в подпись каждого письма «С уважением» не имеет ничего общего с уважением. Вместо этого штампа лучше проявить настоящее уважение и написать удобное для читателя письмо: сформулировать говорящую тему, написать короткое структурированное письмо, ввести в курс дела, приложить все ссылки и файлы, а также явно указать, что вы от человека хотите.
6. Указывать понятную должность
   Очень часто в подпись вставляют должность адресанта, само по себе это не проблема. Однако иногда должность человека неговорящая: специалист, инженер, оператор. В этом случае лучше дополнить формальную должности реальной ролью: Старший специалист → Старший инженер поддержки, Менеджер продукта → Менеджер Яндекс-карт».
7. Не указывать и должность, и отдел
   Нужно стараться не увеличивать подпись без необходимости и указывать что-то одно: или должность, или отдел. Часто можно совместить отдел и должность: вместо длинной комбинации «Отдел технологий разработки + инженер» написать «devops-инженер».
8. Не нужно писать всю оргструктуру
   Если вам нужно указать отдел, то не нужно указывать всю организационную структуру до своего отдела включительно:
   Группа разработки систем машинного обучения
   Отдел перспективных технологий
   Департамент исследований и разработки
9. Не нужно рекламы почтовых программ и устройств
   Подпись — это часть вашего письма, не оставляйте в ней «Отправлено с моего айфона» или «Отправлено из AquaMail для Андроида
   http://www.aqua-mail.com».
   На самом деле продакт-менеджеры мобильных почтовых клиентов повышают свои метрики и зарабатывают свою премию за счет ваших писем и ваших читателей. Для читателей такая подпись выглядит то ли как хвастовство «Смотри, у меня новый айфон», то ли как неуважение «Мне лень потратить одну минуту на настройку подписи».

10. Никакого форматирования
    Форматирование привлекает слишком много внимания к подписи и отвлекает от письма. Лучше не использоваться в подписи курсив, полужирное начертание, подчеркивание, выделение цветом, в том числе бледно-серым. Кажется, что бледно-серый приглушенный и его не будет видно, на самом же деле любое изменение цвета видно само по себе. См. иллюстрацию на полях.
    Хуже всего выглядит яркий красный текст.
11. Никаких картинок или логотипов
    Не нужно вставлять логотипы компании, продуктов, конференций и митапов, красивые кнопки подписки, логотипы социальных сетей. Как и форматирование картинки привлекают слишком много внимания к письму, а кроме этого могут ещё и сломаться, будет совсем некрасиво (см. Переверстка: письмо из Пикпоинта).
12. Подпись отделяется от письма двумя пустыми строками
    Подпись достаточно отделить пустым место, без всяких линий и черточек. В технологических компаниях существуют люди, которые знают про RFC на эл. почту, где написано, что подпись отделяется двумя дефисами и пробелом. Я бы с ними не спорил.

Но вообще, даже в корпоративной подписи обычно достаточно имени с фамилией и изредка должности.

Примеры хорошей подписи

Вот несколько примеров, которые я считаю допустимыми.

Для совсем небольшой команды:

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

Для большой компании с множеством проектов:

Михаил Озорнин
Дизайнер в проекте Apple Don’t Watch

Подпись для тех, кто часто пишет наружу:

Михаил Озорнин
Руководитель пресс-службы Apple Russia
моб: +7 999 999-99-99

Ссылки в тему

В вопросе подписей писем очень много мифов и плохих традиций. Я собрал ещё немного авторитетных мнений про подписи:

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

Фамилия, образованная от имени

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

Имена-паронимы

Есть похожие имена: Мария-Марина, Данила-Данил-Даниил, Артём-Артемий, Лена-Алёна-Алина, Ильдар-Эльдар, Илья-Ильяс. Если я вижу такое имя, я тоже включаю режим параноидальной внимательности.

Форма написания имени

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

Неожиданные короткие формы

На самом деле нет ни никакой проблемы сказать «Привет, Маргарита», и сразу спросить, можно ли «Рита». Но если по каким-то причинам мне нужно из полного имени нужно обязательно сделать короткое, я никогда не выпендриваюсь и не сокращаю непривычно и неожиданно.

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

Уменьшительно-ласкательные формы

Я стараюсь никогда не использовать уменьшительные сокращения имен: Андрюша, Танюша, Игорюша, Олежа, Ириша. Особенно, когда Игорюша старше тебя вдвое, а Андрюша ростом два ноль пять.

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

Панибратские формы

Я стараюсь никогда не использовать панибратские формы имён для малознакомых людей и коллег: Димон, Никитос, Игорян, Михан, Мишган, Диса (это Денис, кто не знает), Настюха, Катюха.

Да даже Илюхой я позволяю себе называть ровно одного Илюху — брата.

P. S. Зачем я пишу этот пост, ведь Ильяхов написал про это главу в книге Новые правила деловой переписки? Не все мои читатели читали книгу, да и сам Максим разрешил повторяться.

Я собирал все вина Парфенона в одну табличку, для себя. В итоге родился пост:
Все вино из Парфенона. Оказалось, что это полезно не только мне.

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

Вина на карте

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

На телефоне тоже будет работать:

Другие изменения

1. Добавилось вино 3-го сезона

Сами видео 3-го сезона я пока так и не посмотрел, но вино записал в таблицу.

2. Мобильная версия таблицы

Раньше открыть пост с телефона было невозможно, таблица превращалась в кашу.

Сейчас все будет хорошо — открыть пост с телефона не страшно, с ним можно будет справиться:

3. Улучшены обложки вина

Раньше было много обложек на белом фоне, в темной теме (она включается в блоге автоматически) это смотрелось не очень красиво:

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

Enjoy!

Что думаете? Чего не хватает?

Смотреть там же:
mikeozornin.ru/blog/all/vino-iz-parfenona