Иван Дианов

Как я конспектирую оффлайн лекции

Алексей Белицкий спрашивает:

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

Текст набираю в формате Markdown в редакторе Vim, но подойдёт любой другой с подсветкой синтаксиса. Можно сразу писать в Simplenote.

Фотографирую на телефон, в конспекте тут же отмечаю текущее время, вот так:

(15:52)

Эти отметки помогают потом найти нужную фотографию. Дату снимка не пишу, если она понятна из контекста. Вечером прохожусь по отметкам и заменяю их на фотографии.

Фотографии для этого загружаю на Amazon S3 или в комментарии в Github Issues. Гитхаб даёт маркдаун-код для вставки в конспект, удобно:

Думаю, есть способы и попроще. А как вы ведёте конспекты?

1 апреля   markdown   vim   конспект

Идеальное согласования макета

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

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

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

До сих пор вспоминать приятно.

Скриншоты в текст

Когда нужно распознать текст скриншота, открываю сервис http://www.free-ocr.com/. От сотни подобных он отличается возможностью вставить картинку из буфера обмена.

Распознаёт с ошибками, но иногда их исправить быстрее, чем вбивать текст с нуля.

Как запомнить нумерацию месяцев

Придумал себе запоминалку: номера первых месяцев сезона делятся на 3:

  • 3 — март,
  • 6 — июнь,
  • 9 — сентябрь,
  • 12 — декабрь.

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

Плиточная карта России

Коллега прислал ссылку на конкурс со странным названием. Нужно придумать, как разделить Россию на квадратики, чтобы делать клёвые плиточные визуализации. У Америки такая есть:

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

Для России такую карту сделать сложнее, потому что её субъекты сильно отличаются размерами:

Чтобы прочувствовать проблему, сравните Ингушетию с Сахой

Кажется, квадратами нарисовать Россию невозможно. Решаю «приблизиться к оленю» и пробую шестиугольную сетку. Рисую графики похоже настоящие. Придумываю, как сократить названия регионов. Выходит так:

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

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

Показываю Роме Бунину, ведущему курса о визуализации данных. Кстати, курс стартует 8 декабря в Москве, приходите. Можно удалённо.

Рома недоволен:

Чтобы сделать карту ближе к России, пробую равномерно надуть восток:

Чтобы хоть как-то уплотнить карту, убираю горизонтальные отступы:

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

Пробую гигантские субъекты нарисовать гигантскими:

Мало надул, не похоже на Россию. Дуем дальше:

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

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

С Сибирью беда. Ямало-Ненецкий и Ханты-Мансийский округа отвалились от Ненецкого. Свердловская область почему-то на севере. Надо ближе половинки сдвинуть, а то непонятно, что это одна страна.

Нравится, что строки востока и запада не совпадают, это усиливает ощущение разреза. Показываю Роме, он одобряет:

На радостях рисую римейк карты с флагами.

У Сахалина флаг крутой

В её форме не угадывается Россия, однако, рассматривать интересно. С названиями было бы круче, но уже лень.

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

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

Выравниваю, выравниваю, выравниваю. Не выравнивается. Стоит исправить один косяк, вылезают два других.







А-а-а-а-а-а! Россия кривая!
(╯°□°)╯︵ ┻━┻





Запоздало придумываю принципы:

  • Приграничные субъекты лучше рисовать по краям, остальные — в серединке.
  • Чем больше сохранится правильных границ между регионами, тем лучше.
  • Особенно важна аккуратность в Центральном федеральном округе.
  • Федеральные округа не должны рассыпаться.
  • Форма карты должна хотя бы отдалённо напоминать Россию.

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

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

Снова всё двигаю. Выходит лучше:

Рисую горизонтальные полоски:

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

Северо-Западный федеральный округ порвался, ну и пускай.

Придумал более наглядный способ оценки качества карты. У каждого квадратика от 0 до 4 соседей. Обозначу эти соседские отношения линиями на исходной карте и получу сетку четырёхугольников. Чем ровнее сетка, тем лучше карта.

Сразу видно, что западный Урал задрался наверх.

Другая проблема: восточная часть по форме не похожа на Россию. Исправляю:

Запад стал лучше. Квадратик Оренбурга ушёл вниз, Ненецкий округ — наверх, проверочная сетка выровнялась.

На востоке сетка ухудшилась. Алтай и Алтайский край уехали от Кемерово, а Бурятия присоседилась к Еврейскому АО. Но я на это согласен, потому что форма страны стала узнаваемой. Алтай вывалился вниз, как на настоящей карте, и стал дополнительным ориентиром.

Хуже всего то, что Омск между Свердловской областью, Тюменью и Курганом. Хотя на самом деле он восточнее этой тройки. Пробую поменять его местами с Курганом.

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

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

Если нет заливки, то лучше оставить линию на месте Урала:

Готово :—)

Следующий этап — что-нибудь визуализировать. Например, число аварий на дорогах.

Список списков ресурсов для айтишников

Я недавно писал про пользу изучения списков.

На Гитхабе лежит очень крутой список списков. В основном всё про разработку и айти. Мне понравились такие:

100 клеток за день

Меня зацепила статья 100 Blocks a Day. Главная идея — человек бодрствует ≈1000 минут в день. Если каждые 10 минут обозначить клеточкой, весь день можно нарисовать так:

Прожил 10 минут — закрасил клеточку. Вечером ни одной клетки не остаётся, пора спать. Мне так понравилась идея, что я распечатал стопку клетчатых листиков и стал их красить цветными карандашами:

  • Фиолетовым — планирование или наведение порядка.
  • Синим — чтение.
  • Зелёным — физическую активность или что-то полезное.
  • Жёлтым — отдых или еду.
  • Красным — работу.
  • Чёрным — сон.
  • Серыми каракулями — всякую ерунду.

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

Там, где вечером много зелёных клеточек, я гулял с Дата сториз в наушниках.

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

Слева мой режим до Нового года, справа — после

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

Дочка тоже попробовала себя в таймтрекинге. У неё все дни получаются примерно такие:

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

Список списков ресурсов о визуализации данных

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

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

Остальные:

Скетч: обзор плагинов, которые переключают состояния макета

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

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

Для переключения состояний артборда есть плагины, я их посмотрел и написал мини-обзор. Спойлер: ни один не подошёл.

Идеальный плагин:

  • хранит информацию в названиях групп и слоёв. Если плагин перестанет работать в новой версии скетча, информация о состояниях не потеряется.
  • Работает в пределах текущего артборда, чтобы не испортить что-нибудь в другом конце документа.
  • Может проверить наличие скрытых слоёв в макете, чтобы случайно не удалить что-то нужное.
  • Умеет выделить слои, связанные с состоянием, чтобы их перенести в другой артборд или удалить.
  • Может показать и выделить все скрытые слои, не связанные с состояниями. Возможно, я решу их удалить.
  • При экспорте артборда сохраняет состояния в разные файлы.

States

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

Плюсы:

  • Запоминает не только видимости слоёв, но и их положения. Можно двигать слой в зависимости от состояния.

Минусы:

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

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

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

State Switch Master

Управляет видимостью слоёв при помощи других слоёв. Выбрал нужное состояние в дереве слоёв, нажал шоткат — десятки слоёв по всему документу поменяли видимость.

Минусы:

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

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

State machine

Умеет только переключать стили слоёв внутри группы. Это полезно для менюшек. Переключать состояния всего интерфейса плагин не умеет.

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

Layer Comps

Плагин не заработал, я написал багрепорт.

ScreenFork

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

Sketch states switch

Управляет прозрачностью слоёв. Есть 5 слотов, в них сохраняются состояния, потом из них восстанавливаются. Не заработал.

TODO https://github.com/patrickkeenan/sketch-framer-states

Итог

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

2017   скетч

Ускорение работы в скетче: без групп

Когда много групп, неудобно выделять объекты рамкой. Например, в макете таблица. Если аккуратно завернуть столбцы таблицы в группы, то не получится быстро поменять строки местами. Можно, конечно, выделять рамкой с зажатым ⌘, тогда скетч будет игнорировать группы и выделит непосредственно слои. Но некоторые объекты могут развалиться:

У ссылки при перетаскивании отвалилось подчёркивание

Решение: не группировать строки и столбцы. Тогда их можно выделять мышкой, без ⌘. Группы делать только внутри ячеек, чтобы они не разваливались, как на картинке выше.

2017   скетч
Ctrl + ↓ Ранее