{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог Михаила Озорнина: заметки с тегом работа",
    "_rss_description": "Главная · Блог · Работы ·",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/mikeozornin.ru\/blog\/tags\/rabota\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/rabota\/json\/",
    "icon": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384",
    "author": {
        "name": "Михаил Озорнин",
        "url": "https:\/\/mikeozornin.ru\/blog\/",
        "avatar": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384"
    },
    "items": [
        {
            "id": "220",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/ai-native-software\/",
            "title": "ИИ-нативные продукты",
            "content_html": "<p class=\"lead\">Рассуждаю, что важно учесть при разработке сложного софтверного продукта сейчас, чтобы он остался актуальным через год или два<\/p>\n<p>Мир софта меняется и скоро поменяется совсем. Да, я про ИИ и ЛЛМ в частности. Многие компании не пережили прошлую мобильную революцию (вспомните про нокию). Я размышляю как нам пережить эту. Поэтому, я хочу поразмышлять, что значит  «ии-нативные продукты».<\/p>\n<p>Я говорю не про конкретные ии-фичи, не про пресловутого бота, который отвечает мимо и невпопад, а скорее про общее ощущение от продуктов. Я говорю про по сути набор нефункциональных требований, касающихся ИИ, которые могут быть применимы ко всем нашим продуктам. Как сделать продукт, который:<\/p>\n<ul>\n<li>будет актуальным в среде агентов, а не людей,<\/li>\n<li>сам будет таким, что в нем агент станет полноценным пользователем и субъектом наряду с человеком<\/li>\n<\/ul>\n<p>Особенно это важно тем, кто поставляет продукты в он премис, там делают продукт не на месяц вперед. Пока спроектируют, пока разработают, пока клиенты обновятся. Продукт делается сейчас, а клиенты будут пользоваться ими через год.<\/p>\n<p>Хочется сейчас угадать и сделать что-то, что за год-два не потеряет своей актуальности.<\/p>\n<p>Для контекста: почти год назад, в конце февраля, вышел Сонет 3.7. Сонетом 3.7 уже можно было пользоваться, он мог уверенно написать работающий файл. Ну может несколько файлов. Но он не был настолько автономным как Опус 4.6 или ГПТ 5.4.<\/p>\n<p>Для контекста: стоимость решения одной и той же задачи с помощью ЛЛМ падает в 10 раз каждый год.<\/p>\n<p>Вот что мне приходит в голову ↓<\/p>\n<h2>1. Не оптимизировать human-only-сценарии<\/h2>\n<p>Я бы не вкладывался в долгую разработку удобного интерфейса работы оператора и решения им тех задач, которые он в целом решать не должен. Я бы подумал перед тем как тратить сейчас не одну сотню человеко-часов только на фронте.<\/p>\n<ul>\n<li>Хорошо: сделать графический редактор сценариев в стиле н8, но быстро.<\/li>\n<li>Не стал бы: тратить 500 человеко-часов на конструктор сценариев, хотя за 100 часов можно было бы сделать написание тех же сценариев из войса в телеграме.<\/li>\n<\/ul>\n<h2>2. Удобный, ии-нативный интерфейс<\/h2>\n<p>Я бы в целом ожидал возврата к основам линукосовой концепции «всё — это файл» и концепции компонуемости из юникс-утилит — программы как атомарные небольшим программам, результаты которых можно цеплять друг к другу через пайп и с унифицируемым интерфейсом ввода (текст) и вывода (текст).<\/p>\n<p><aside class=\"aside-margin-right\">См. в тему <a href=\"https:\/\/cursor.com\/blog\/dynamic-context-discovery#1-turning-long-tool-responses-into-files\">cursor.com\/blog\/dynamic-context-discovery<\/a><\/aside><\/p>\n<p>Я не говорю именно про терминал и текст, но идея компонуемости, как мне кажется, станет более актуальной.<\/p>\n<p>Интерфейс программ должен быть стандартный и максимально дружелюбный для агентов: rest api, терминальные команды, стандартный протокол.<\/p>\n<ul>\n<li>Хорошо: консольный cdk для прогона тестов<\/li>\n<li>Не стал бы: gui-программа для прогона тестов, которая еще работает только для Виндоуза.<\/li>\n<\/ul>\n<p>Я говорю про достаточно общие протоколы, не обязательно про МПЦ. Я не удивлюсь, если через год агенты научатся работать с любыми апи по опенапи-спеке и мы забудем врапперы типа МПЦ, как тупиковую ветвь эволюции.<\/p>\n<h2>3. Агент должен уметь разобраться по доке<\/h2>\n<p>Если доки недостаточно, чтобы агент разобрался — дока не очень. Если для интеграции продукта с телеграмом недостаточно дать доку агенту и отправить делать, значит дока не очень понятная или подробная. Если агент не может запустить дев-стенд вашего продукта по доке за один промт — у вас что-то не так.<\/p>\n<p>Сама дока должна быть доступна в агент-френдли формате: сервер-сайд-рендеринг, llm.txt или agents.md, доступность из курла. Никаких реакт-сайтов, которые требуют браузера. Да, агенты уже умеют читать и такое, но зачем усложнять им жизнь.<\/p>\n<h2>4. Стандартные форматы хранения, языки и протоколы<\/h2>\n<p>Я бы до последнего откладывал придумывание своих кастомных DSL, а попытался бы найти распространенный язык для задачи. Даже если бы он подходил всего лишь на 50%. Я понимаю, что ллм выучит и чужой незнакомый DSL. Но я не специалист и кажется, что лучше бы, чтобы не учила. Наша выучит, другая не станет.<\/p>\n<h2>5. Собирать из всего, что можно собрать, датасеты<\/h2>\n<p>В каждой фиче думать, какие данные нужно собрать и сохранить. С клиентов: метрики, сценарии действий, телеметрию. С нас самих: сохранять треки работы внутренних пользователей, записи всех митингов и обсуждений, все код-ревью, тикеты в саппорте, вопросы в чатах и поисковые запросы на портале хелпа.<\/p>\n<p>Контекст менеджмент — 50% самого важного в контексте именно написания продукта (вторые 50% — харнес). И поэтому не удивительно, что Ноушен и Линеар сделали своих агентов, у них внутри столько контекста по компании, что зашатаешься.<\/p>\n<h2>6. Не замыкаться в текущих ограничениях<\/h2>\n<p>Стоит рассчитывать, что через 2-3 года контекстное окно вырастет так, что можно будет отправлять туда 5 миллионов токенов (давайте представим, что я — футурист). Т. е. в окно контекста целиком влезут те данные, для которых сейчас нужно делать сложные система РАГ.<\/p>\n<h2>7. Агенты — first class citizens<\/h2>\n<p>При реализации каждой фичи нужно начать думать: а какие тулы и апишки нужно в рамках фичи заэкспоузить наружу для будущие агентов, и тратить на это время не по остаточному принципу, а так, чтобы агенты были first class citizen.<\/p>\n<p>Если функция доступна человеку, но недоступна агенту — мы сделали что-то не так.<\/p>\n<h2>8. Безопасность всего этого<\/h2>\n<p>Придется подумать, как не сделать с агентским продуктом с невероятно широким контектом хуже, чем без него вообще. В какой-то момент в защите инфраструктуры возник zero trust (когда пропал периметр и всё стало периметром), так же и тут нужно будет делать zero trust 2.0.<\/p>\n<p>Как минимум нужны будут:<\/p>\n<ul>\n<li>границы применимости: разделение на задачи, где норм принять решение агенту и на те, где обязателен человек;<\/li>\n<li>трассировка источников: откуда агент взял вывод и как к нему пришел,<\/li>\n<li>аудит: что он сделал и почему;<\/li>\n<li>replayability: можно ли воспроизвести решение агента потом при разборе инцидента.<\/li>\n<\/ul>\n<h2>9. Как встроить ии в feedback loop работы продукта<\/h2>\n<p>Хочется как-то перенести ответственность за контекст с человека на агента. Не оператор должен думать какие данные передать агенту, а агент должен у себя иметь инструменты self discovery и data retrival, пусть сам подумает, что ему надо.<\/p>\n<p>Сейчас хорошо работает сказать агенту «задай мне вопросы, которые помогут тебе хорошо решить задачу», хочется что-то аналогичное.<\/p>\n<h2>10. Самим заставлять себя решать задачи ллмками и агентами<\/h2>\n<p>Самим пытаться становиться ии-нативными, даже если прямо сейчас так медленнее. Например, договориться, в командах, что все лоу-баги чинятся только ЛЛМкой, никакой код нельзя для этого писать руками.<\/p>\n<p>Случайно вышло 10 пунктов, ну и хорошо.<\/p>\n<p>Если вдруг у кого есть, прости господи, подкаст, можем поговорить про это.<\/p>\n",
            "date_published": "2026-04-06T10:34:36+03:00",
            "date_modified": "2026-04-06T13:45:05+03:00",
            "_date_published_rfc2822": "Mon, 06 Apr 2026 10:34:36 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "220",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "215",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/reflection-is-more-important\/",
            "title": "Важность рефлексии растет",
            "content_html": "<p>На пост меня натолкнула рабочая ситуация: Я написал (будем честны, попросил ллм написать) один скрипт, и некоторые коллеги прореагировали «о, давно о таком мечтаю». И у меня в голове щелкнуло.<\/p>\n<p><aside class=\"aside-margin-right\">Когда я сейчас написал про один промт, я не утрировал, это был реально один промт.<\/span><\/aside><\/p>\n<p>Сейчас простые задачи решаются ллмками достаточно хорошо. Ядро линукса они все еще не напишут, но пропарсить все ресурсные файлы проекта, сгруппировать одинаковые строчки и дать к ним мгновенный поиск — это задача на один промт. И все, что удерживает людей сейчас, от того, что некоторая часть их задач начнет быть проще — рефлексия. Все что нужно — остановиться, и заметить момент «ага, я тут хочу упрощение, которое возможно реально»).<\/p>\n<p>И если раньше рефлексия не всегда помогала, например:<\/p>\n<ul>\n<li>Понял, что занимается рутиной, но невозможно понять, что рутина автоматизируема.<\/li>\n<li>Понял, что занимается рутиной, пошел узнать, автоматизируема ли она, ИТ-служба сказала «не существует технической возможности».<\/li>\n<li>Понял, что занимается рутинной автоматизированной задачей, понял, что автоматизируема, а питониста рядом нет.<\/li>\n<li>Понял, что занимается рутинной автоматизированной задачей, понял, что автоматизируема, а питонист рядом занят.<\/li>\n<li>Понял, что занимается рутинной автоматизированной задачей, понял, что автоматизируема, сходил в ИТ, питониста нашли, они задачу взяли, то на Q3 2027 года, потому что есть более важные.<\/li>\n<\/ul>\n<p>Сейчас ситуация сильно меняется.<\/p>\n<ul>\n<li>Понял, что занимается рутинной автоматизированной задачей, потратил один-два промта и, возможно, получил решение.<br \/>\nВозможно решения не получил, но и потратить 10 минут как будто не так и долго. Время на созвон со знакомым питонистом будете в календаре выбирать дольше.<\/li>\n<\/ul>\n<p>Нас всегда учили, что идея не стоит ничего. В целом идея все так же стоит ничего, но иногда — чуть больше, чем ничего, если есть ллмка.<\/p>\n",
            "date_published": "2026-01-26T10:34:56+03:00",
            "date_modified": "2026-01-26T01:00:13+03:00",
            "_date_published_rfc2822": "Mon, 26 Jan 2026 10:34:56 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "215",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "205",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/cursor-for-everybody\/",
            "title": "Курсор для … — это Курсор",
            "content_html": "<p>Я вижу много хайпа в попытках сделать более специализированное решение для дизайнеров, дата-саентистов, писателей, фронтов, бекендеров. Не ходите туда.<\/p>\n<p>На днях увидел про курсор для дизайнеров, <a href=\"https:\/\/www.onlook.com\">onlook.com<\/a>. Несколько часов оно провисело на промте и потом сломалось. Ну окей.<\/p>\n<p>На первый взгляд специлизированные тулы выглядят перспективно, они  удобнее, лучше учитывают задачи конкретно вас. Возьмем тот же Фигма Мейк, болт, лавабл, реплит. Ощущение, когда ты написал промт и получил не кусок кода, а живой сервис — магическое. Первый раз это поражает. Я на 100% с вами согласен. Но потом инструмент начнет очень-очень жать. Захотите чуть отойти в сторону — все начнет ломаться и жать.<\/p>\n<ul>\n<li>Захотите написать не на реакте, а на своей дизайн-системе (которая только на ангуляре), не выйдет. Фигма мейк умеет только в реакт и вы с ним ничего не сделаете.<\/li>\n<li>Захотите чуть быстрее бекенд и написать его на гоу, не получится, потому что инструмент умеет только в некст.жс.<\/li>\n<li>Будете делать какую-то штуку, для которой нужно иметь одинаковый рантайм в клиенте и сервере, окажется, что нельзя.<\/li>\n<li>Захотите сделать мобильное приложение или плагин фигмы, вам не дадут настроить КОРС и ничего не заработает.<\/li>\n<li>Захотите встроиться в поддомен сайта, не выйдет, потому что деплой так не умеет.<\/li>\n<li>Захотите забрать с собой код, окажется, что там все сильно завендорлочено и работать вне инфраструктуры не способно.<\/li>\n<\/ul>\n<p>Потратьте чуть больше времени, изучите более общий инструмент, он даст выгоду в будущем. То самое волшебное ощущение можно попытаться вернуть шаблонами и рулами. Развернуть сайт на верцеле не принципиально сложнее, чем в фигма-мейке. До сих пор сложнее, но не настолько, чтобы это имело смысл.<\/p>\n<p>Закончу аналогией. На озоне продается много всяких агрегатов для хитрой нарезки чего-нибудь, но если посмотреть на повара, то он в целом обходится ножами. Почему? Потому что они универсальны, надежны и стабильны. А очередная нарезалка для узбекских помидоров не сможет нарезать дагестанский.<\/p>\n<p>Курсор для … — это Курсор<\/p>\n",
            "date_published": "2025-09-07T17:38:28+03:00",
            "date_modified": "2025-09-07T17:38:11+03:00",
            "_date_published_rfc2822": "Sun, 07 Sep 2025 17:38:28 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "205",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "196",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/ui-designer-wanted-3\/",
            "title": "Ищу дизайнера интерфейсов-3",
            "content_html": "<p class=\"lead\">Снова ищем, <a href=\"https:\/\/mikeozornin.ru\/blog\/all\/ui-designer-wanted-2\/\">прошлый поиск<\/a><\/p>\n<p class=\"lead\">Я руковожу одной из групп продуктовых дизайнеров в Positive Technologies и ищу в нашу команду несколько человек, чтобы делать корпоративные <span class=\"e2-caps\">B2B<\/span>-приложения.<\/p>\n<p class=\"lead\">Я слабо верю в поиск дизайнеров на хедхантере, но верю в нетворкинг и рекомендации. Самых хороших дизайнеров мне приводили по знакомству.<\/p>\n<h2>Апдейт с прошлого поиска<\/h2>\n<p>С момента прошлого поиска отдел вырос втрое по численности дизайнеров, у нас появился ресерч, мы подгребли под себя весь дизайн в компании, а продакты в своих годовых роадмапах планируют фичи «Улучшение UX продукта».<\/p>\n<p>Мне нужны дизайнеры создавать общую платформу для самых зарабатывающих продуктов компании.<\/p>\n<h2>Чем мы занимаемся<\/h2>\n<p>Мы делаем корпоративные продукты для специалистов по информационной безопасности («ибэшников»). Вы, возможно, про нас не слышали, но в России нет ни одного ибэшника, который бы нас не знал. Некоторые наши продукты хорошие, некоторые — отличные; наш <span class=\"e2-caps\">WAF<\/span> попадал в магический квадрант Гартнера (это типа круто), многие наши продукты — лидеры российского рынка в своем классе.<\/p>\n<p>А вот график стоимости наших акций (ну чем ещё я могу похвастаться):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/posi@2x.png\" width=\"743\" height=\"268\" alt=\"\" \/>\n<\/div>\n<p><aside class=\"aside-margin-right\"><a href=\"http:\/\/mikeozornin.ru\/blog\/all\/why-enterprise-software-so-bad-design\/\">Почему у корпоративных продуктов плохой дизайн и что делать<\/a><\/aside><\/p>\n<p>Скажу честно и прямо, эти успехи не всегда благодаря прекрасному интерфейсу, и иногда и вопреки всему интерфейсу. Наши продукты вообще покупают не за красивый и удобный интерфейс, а за технологию и экспертизу. Какая-то часть из моего поста про интерфейс корпоративных продуктов сейчас относится и к нам.<\/p>\n<p>В планах на 2023 год:<\/p>\n<ul>\n<li>создать общую платформу для продуктов компании и пересадить продукты на нее,<\/li>\n<li>сделать редизайн самого зарабатывающего, старого и большого из продуктов (из развивающихся),<\/li>\n<li>сделать много сложных штук так, чтобы пользователи смогли и захотели этим пользоваться,<\/li>\n<li>научиться мерить результаты изменений исследованиями (можно загрузить отдел ресерча так, чтобы они начали от нас бегать).<\/li>\n<\/ul>\n<p>Все это не снижая скорости роста и развития продуктов.<\/p>\n<p>Я ищу одного-двух-трех-четырех дизайнеров, которые бы захотели к нам присоединиться и остаться надолго.<\/p>\n<h2>Задачи, которыми придется заниматься<\/h2>\n<p>Разбираться со сложными системами и создавать для них элегантные решения.<\/p>\n<p>Плотно работать с продакт-менеджерами, аналитиками, погружаться в проблемы пользователей и внедренцев.<\/p>\n<p>Создавать интерфейсы <span class=\"e2-caps\">B2B<\/span>-продуктов: длинные формы, панели администрирования, конструкторы алгоритмов; определять внешний вид дашбордов, графиков, отчетов.<\/p>\n<p>При необходимости — создавать прототипы, тестировать их на команде разработки или пользователях.<\/p>\n<h2>Наш дизайнер<\/h2>\n<p>Имеет опыт проектирования интерфейсов <span class=\"e2-caps\">CRM<\/span>-систем, систем документооборота, промышленных или других подобных систем.<\/p>\n<p>Имеет минимальный технический бэкграунд (знает в общих чертах, как работает интернет) и способен разобраться в новой для себя предметной области. Один на один с <span class=\"e2-caps\">иб<\/span> не оставим.<\/p>\n<p><aside class=\"aside-margin-right\">Про интерфейсные компоненты см. <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-completeness-example\/\">Илью Бирмана про замкнутость<\/a><\/aside><\/p>\n<p>Умеет поддерживать логичность и целостность базовых интерфейсных компонентов и следить за консистентностью всего продукта.<\/p>\n<p>Готов проверять свои гипотезы и макеты коридорным тестированием, анкетами, может провести сам или заказать исследование у отдела ресерча.<\/p>\n<p>Обладает вкусом и чувством эстетики. Считает, что удобство, эффективность и красота могут сочетаться в одном продукте.<\/p>\n<h2>О команде<\/h2>\n<p>Группа из шести человек внутри департамента из 38. Каждый из них тесно работает со своей продуктовой командой, периодически все общаются между собой. Часть дизайнеров ведут внутренние задачи дизайн-отдела: гайдлайны, <span class=\"e2-caps\">ui<\/span> kit, дизайн-токены, развитие экспертизы в исследованиях.<\/p>\n<p>Фигма, дизайн-система, база компонентов, гайдлайны — всё как у всех.<\/p>\n<p>Фронтендеры и бэкендеры, которые не говорят «ой, это невозможно», и продакты которые говорят «Хочу удобно и красиво».<\/p>\n<p>Процессы в разных проектах немного разные, но в среднем работа проходит примерно так: раннее обсуждение фичи, проектирование сценариев, скетчи, макеты, авторский надзор за реализацией, пользовательское исследование сделанной фичи.<\/p>\n<p class=\"loud\">Если вам интересно и вы узнали себя хотя бы наполовину, напишите о себе:<br\/><a href=\"mailto:mozornin@ptsecurity.com\">mozornin@ptsecurity.com<\/a> или в телеграм: <a href=\"https:\/\/t.me\/mikeozornin\">@mikeozornin<\/a><\/p>\n",
            "date_published": "2023-08-21T17:27:32+03:00",
            "date_modified": "2025-04-18T11:11:35+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/posi@2x.png",
            "_date_published_rfc2822": "Mon, 21 Aug 2023 17:27:32 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "196",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/posi@2x.png"
                ]
            }
        },
        {
            "id": "193",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-backup-figma-files\/",
            "title": "Как бекапить фигму",
            "content_html": "<p class=\"lead\">Сегодня фигма написала, что она прекращает продажи в России (<a href=\"http:\/\/figma.com\/blog\/our-response-to-ukraine\/\">figma.com\/blog\/our-response-to-ukraine<\/a>). Меня спрашивают и коллеги, и не только, что делать. Пишу, как забекапить файлы из фигмы.<\/p>\n<h2>Скачать в png<\/h2>\n<p>Если вы хотите скачать макеты в png, см. пост <a href=\"https:\/\/mikeozornin.ru\/blog\/all\/how-to-download-screens-from-zeplin-and-figma\">Автоматическое скачивание новых экранов из Цеплина и Фигмы<\/a><\/p>\n<h2>Скачать исходники<\/h2>\n<p>Формат фигмы проприетарный, исходники фигмы можно будет только загрузить в другую фигму (другую команды или личный аккаунт).<\/p>\n<p>Если нужно скачать лишь несколько файлов, скачайте вручную, и не заморачивайтесь со скриптом:<br \/>\nFile > Save local copy…<\/p>\n<p>Если нужно скачать несколько файлов, то вручную можно задолбаться. Вот как сделать автоматически<\/p>\n<ol start=\"1\">\n<li>Выпускаете токен доступа (лучше завести пользователя только с read-only-правами). См. <a href=\"https:\/\/www.figma.com\/developers\/api#access-tokens\">figma.com\/developers\/api#access-tokens<\/a><\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Устанавливаете figma-backup из npm (<a href=\"https:\/\/github.com\/mimshins\/figma-backup\">github.com\/mimshins\/figma-backup<\/a>). Пакет не наш, ответственности не несу.<\/li>\n<\/ol>\n<pre class=\"e2-text-code\"><code class=\"\">npm install -g figma-backup<\/code><\/pre><ol start=\"3\">\n<li>Устанавливаете jq:<\/li>\n<\/ol>\n<pre class=\"e2-text-code\"><code class=\"\">brew install jq<\/code><\/pre><ol start=\"4\">\n<li>Запускаете скрипт, заменив <em>{{переменные}}<\/em> на значения.<\/li>\n<\/ol>\n<pre class=\"e2-text-code\"><code class=\"\">FIGMA_TOKEN={{token}}\r\nTEAM_ID={{team-id}}\r\n\r\nPROJECTS_ID=$(curl -H &quot;X-FIGMA-TOKEN: $FIGMA_TOKEN&quot; &quot;https:\/\/api.figma.com\/v1\/teams\/$TEAM_ID\/projects&quot; | jq -j '.projects[] | .id, &quot; &quot;')\r\necho &quot;$PROJECTS_ID&quot;\r\necho &quot;=====&quot;\r\n\r\nnpx figma-backup -e &quot;{{email}}&quot; -p &quot;{{password}}&quot; -t &quot;$FIGMA_TOKEN&quot; --projects-ids $PROJECTS_ID<\/code><\/pre><ol start=\"5\">\n<li>Вы получите папку, в которой будет лежать все файлы, с которым имеет доступ пользователь {{email}}.<\/li>\n<\/ol>\n<ol start=\"6\">\n<li>Если нужно запускать регулярно, добавьте в крон и\/или в CI-пайплайн.<\/li>\n<\/ol>\n<p>Готовьтесь, это все работает медленно. Наши 2,5 гигабайта файлов экспортируются 3 часа.<\/p>\n<p>Наверное, как-то можно сделать параллельно, не смотрели. Точно можно сделать вариант «не качать файлы, если они не менялись», пока не заморачивались.<\/p>\n",
            "date_published": "2022-03-09T21:18:23+03:00",
            "date_modified": "2024-05-20T23:11:58+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-backup-figma-files.png",
            "_date_published_rfc2822": "Wed, 09 Mar 2022 21:18:23 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "193",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-backup-figma-files.png"
                ]
            }
        },
        {
            "id": "174",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/questions-and-suggestions\/",
            "title": "Разделять вопросы и предложения",
            "content_html": "<p class=\"lead\">Бывают фразы ни туда, ни сюда. Например, «можно увеличить тут отступ и кегль». Я после таких сижу и туплю. Делать что-то надо или нет. Рассказываю, что с этим делать.<\/p>\n<p>Допустим, говорят «можно увеличить тут отступ и кегль» — ну ок, можно увеличить отступ, можно кегль. Увеличиваем отступ, или кегль, или и то, и другое? Есть ли другие решения, что в итоге делаем?<\/p>\n<p>Или вот «файлы можно выкладывать в артифакторий», — еще можно в гит лфс, фтп-сервер, на файловую шару, в S3. Куда нужно? Куда лучше?<\/p>\n<p>Примеры выше — неудачно сформулированные предложения. Такое бывает. Если сформулировать предложения эксплицитно, то станет лучше. Следите за руками:<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Непонятно что<\/b><\/td>\n<td><b>Отлично<\/b><\/td>\n<\/tr>\n<tr>\n<td>Можно увеличить тут отступ и кегль<\/td>\n<td>Чтобы решить проблему, предлагаю увеличить тут отступ до 16 пк, а кегль до title. Заголовок будет держать конструкцию ниже, а лид и заголовок не будут слипаться.<br\/>Что думаешь?<\/td>\n<\/tr>\n<tr>\n<td>Файлы можно выкладывать в артифакторий<\/td>\n<td>Файлы бинарные, файлов пока не очень много (100...1000 ГБ), не требуется доступ непосредственно с клиентов. Так? <br\/>Давайте тогда выкладывать в артифакторий, это оптимальный вариант.<\/td>\n<\/tr>\n<tr>\n<td>Файлы можно выкладывать в артифакторий<\/td>\n<td>Давай выкладывать файлы в артифакторий.<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>Ещё пример.<\/p>\n<p>Мне однажды написали буквально следующее «Будут ли замечания из твоего письма оформлять как баги? У меня по письму вопросы есть».<\/p>\n<p>Я опешил, перечитал несколько раз, но все равно остался опешившим. Вот что это такое было? Что от меня хотят? Как я могу ответить про действия неких неустановленных третьих лиц. Тогда все, что я смог — ответил на вопрос «не знаю, будут ли заводить баги». Не было проблемы — появилась проблема. Мне самому сейчас нужно убедиться, что мне эти какие-то вопросы зададут. Если я сейчас не проконтролирую, то фичу сделают не так, как я ожидаю.<\/p>\n<p>Всегда ли нужно что-то предлагать? Нет, не всегда. Но и отсутствие предложения тоже надо сформулировать ясно. Пример ниже.<\/p>\n<blockquote>\n<p>У нас есть три варианта:<\/p>\n<ol start=\"1\">\n<li>Сделать все своими руками. У нас мало свободных ребят, поэтому по времени — два месяца, по деньгам — K рублей.<\/li>\n<li>Своими силами сделать скелет макета, а для иллюстраций взять подрядчиков. По времени — месяц, по деньгам — N рублей.<\/li>\n<li>Все отдать на аутсорс. По времени — три недели, по деньгам — M рублей.<\/li>\n<\/ol>\n<p>Как поступим?<\/p>\n<\/blockquote>\n<p>И итоге вся схема рабочего общения выглядит примерно так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/questions-and-suggestions-1@2x.png\" width=\"600\" height=\"315\" alt=\"\" \/>\n<\/div>\n<h2>См. также<\/h2>\n<p>Видео Артёма Горбунова <a href=\"https:\/\/youtu.be\/W3gRZsMrzNE\">общаться вопросами и предложениям<\/a><\/p>\n<p>Все подобные посты — с тегом <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/sdelayte-udobno-chitatelyu\/\">сделать удобно читателю<\/a><\/p>\n",
            "date_published": "2021-11-08T11:26:49+03:00",
            "date_modified": "2022-01-20T23:55:30+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/questions-and-suggestions@2x.png",
            "_date_published_rfc2822": "Mon, 08 Nov 2021 11:26:49 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "174",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/questions-and-suggestions@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/questions-and-suggestions-1@2x.png"
                ]
            }
        },
        {
            "id": "181",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/games-for-designers\/",
            "title": "Игры для дизайнеров",
            "content_html": "<p class=\"lead\">Собрал разные дизайнерские игры потренировать насмотренность<\/p>\n<h2>Мастхевные<\/h2>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/bezier.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-5@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/bezier.method.ac\">https:\/\/bezier.method.ac<\/a><br \/>\nЧто делать: повторять форму фигуры кривой безье<br \/>\nЗачем: стать гуру вектора, рисовать крутые иконки и векторные иллюстрации<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/cantunsee.space\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-7@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/cantunsee.space\">https:\/\/cantunsee.space<\/a><br \/>\nЧто делать: находить мелочи и ошибки в картинках<br \/>\nЗачем: проводить авторский надзор 85 лвл, за секунду находить ошибки недочеты в реализации<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/bar-or-pie.dianov.org\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-8@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Что делать: находить ошибки в инфодизайне<br \/>\nЗачем: натренироваться базовым важным вещам в инфодизайне<\/div>\n<\/div>\n<h2>Если прошли игры выше<\/h2>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/betterwebtype.com\/triangle\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-1@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/betterwebtype.com\/triangle\/\">https:\/\/betterwebtype.com\/triangle\/<\/a><br \/>\nЧто делать: играться с параметрами ширины блока текста, интерлиньяжа и кегля, чтобы собрать идеальный параграф<br \/>\nЗачем: потренировать чувство текстового блока<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/type.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-2@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/type.method.ac\">https:\/\/type.method.ac<\/a><br \/>\nЧто делать: расставлять буквы в строке<br \/>\nЗачем: потренировать чувство букв, потренировать в кернинге, если делаете шрифт (ну да)<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/color.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-3@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/color.method.ac\">https:\/\/color.method.ac<\/a><br \/>\nЧто делать: подбирать цвет по полному совпадению, искать противоположный и гармоничный к заданному<br \/>\nЗачем: потренировать глазомер цвета<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/boolean.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-4@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/boolean.method.ac\">https:\/\/boolean.method.ac<\/a><br \/>\nЧто делать: пользуясь булевыми операциями сделать из запчастей иконку<br \/>\nЗачем: потренироваться, чтобы быстрее собирать иконки<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/shape.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-6@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/shape.method.ac\">https:\/\/shape.method.ac<\/a><br \/>\nЧто делать: исправлять сломанную форму буквы усиками кривых безье<br \/>\nЗачем: потренировать чувство вектора и букв<\/div>\n<\/div>\n<p>Знаете ещё какие-нибудь?<\/p>\n",
            "date_published": "2021-11-03T00:25:36+03:00",
            "date_modified": "2025-05-20T10:15:11+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-5@2x.png",
            "_date_published_rfc2822": "Wed, 03 Nov 2021 00:25:36 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "181",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-7@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-8@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-6@2x.png"
                ]
            }
        },
        {
            "id": "179",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-ask-for-access\/",
            "title": "Как запросить доступ",
            "content_html": "<p class=\"lead\">Про один частный случай принципа <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/email-contains-everything\" class=\"nu\">«<u>В письме уже есть всё нужное<\/u>»<\/a><\/p>\n<p class=\"lead\">Напомню принцип:<br\/>Чтобы собеседнику было проще ответить, в вашем письме должно быть все необходимое. Даже если все материалы были в треде раньше, даже. Покажу на примере задачи «попросить доступ».<\/p>\n<h2>Как не надо просить доступы<\/h2>\n<p>Вот антипримеры:<\/p>\n<ul>\n<li>— Привет! Дай мне доступ к макетам.<br \/>\nКому «мне» (надо глянуть адресата), к каким макетам (нужно будет спросить).<\/li>\n<li>— Привет! Дай мне и Насте доступ к макетам.<br \/>\nКому «мне» (надо глянуть адресата), какой Насте (нужно будет спросить), к каким макетам (нужно будет спросить).<\/li>\n<\/ul>\n<h2>Почему так происходит<\/h2>\n<p>У вас просто разная картинка мира<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Как у вас<\/b><\/td>\n<td><b>Как у того, кому вы пишете<\/b><\/td>\n<\/tr>\n<tr>\n<td>У вас есть один проект, поэтому вам совершенно очевидно, к каким макетам вам нужен. Доступ нужен к макетам того единственного проекта, которым вы занимаетесь.<\/td>\n<td>У того же, кому вы пишете, доступ есть к макетам двадцати продуктов. К какому вам нужен доступ — неясно.<\/td>\n<\/tr>\n<tr>\n<td>Вы знаете всю свою команду и вам достаточно сказать «Настя», и будет понятно, про какую Настю речь, даже если эта Настя недавно присоединилась.<\/td>\n<td>Так вышло, что у него 5 коллег-Насть, с которыми он общается.<\/td>\n<\/tr>\n<tr>\n<td>Для вас доступ — это просто «посмотреть макеты», а как же ещё.<\/td>\n<td>Для человека есть больше вариантов доступа: смотреть, комментировать, менять. Доступ можно дать на файл, а можно на проект целиком.<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h2>Как надо<\/h2>\n<p><aside class=\"aside-margin-right\">Пост Максима Ильяхова про <a href=\"https:\/\/maximilyahov.ru\/blog\/all\/anketno\/\">Анкетность<\/a><\/aside><\/p>\n<p>Я делаю как-то так: сначала описываю суть, а потом пишу параметры доступа более анкетно, чтобы их не надо было вычленять из предложения.<\/p>\n<blockquote>\n<p>Маргарита!<\/p>\n<p>Дай мне (Мише Озорнину) и Насте Ивановой доступ к макетам.<\/p>\n<p>Проект: Secret Project Name<br \/>\nДоступ: смотреть и писать комментарии<br \/>\nНаши адреса:<br \/>\nmozornin@example.com<br \/>\naivanova@example.com<\/p>\n<\/blockquote>\n<p>Я настолько с прибабахом, что после «мне» пишу свои имя и фамилию, чтобы не надо было гадать кому «мне». Особенно часто всякие «мне» теряются при пересылке письма. В пересланном письма обычно видишь «мне», но не видишь от кого кому было письмо.<\/p>\n",
            "date_published": "2021-11-01T14:47:25+03:00",
            "date_modified": "2021-11-01T14:47:21+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-ask-for-access@2x.png",
            "_date_published_rfc2822": "Mon, 01 Nov 2021 14:47:25 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "179",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-ask-for-access@2x.png"
                ]
            }
        },
        {
            "id": "166",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/good-bug-report\/",
            "title": "Как писать багрепорты",
            "content_html": "<p><aside class=\"aside-margin-right\">Взгляд с другой стороны: <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/not-reproducing\">У меня не воспроизводится<\/a><\/aside><\/p>\n<p class=\"lead\">Я работаю в разработке ПО и с болью смотрю, как люди обычно сообщают о проблемах с сервисами и программами. Бывает «Я нажал на кнопку и там черный экран», а бывает даже — «Ваша программа не работает». Гайд о том, как нужно сообщать о проблемах.<\/p>\n<p>Посмотрите на эту картинку, представьте себя на месте синего.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/good-bug-report@2x.png\" width=\"600\" height=\"315\" alt=\"\" \/>\n<\/div>\n<p>Закипели немного, да?<\/p>\n<h2>Почему этим вообще стоит заниматься<\/h2>\n<p>Есть же простой вариант: написать как смогу, а если что-то будет непонятно, то пусть уточнят, — отвечу на все вопросы. Зачем вообще заморчиваться?<\/p>\n<p>Если картинка выше не сделала ответ понятней, попробую накинуть еще аргументов.<\/p>\n<p>Ну, уточнять — это лишний хоп взаимодействия. Не знаю как вас, а меня раздражает уточнять какие-то очевидные подробности, даже если речь идет про мой продукт. Уточнять у человека «Ваша программа не работает, все сломалось, ничего не помогает» я не захочу и попытаюсь слить проблему кому-нибудь.<\/p>\n<p>Ещё бывает так, что разбирать багрепорт начали через неделю после репорта (кто-то был в отпуске или просто высокая загрузка). Начали у меня уточнять, а я сам не могу разобраться, что же я имел ввиду. Им воспроизвести не удается, а я не могу понять своё же описание. ¯\\_(ツ)_\/¯  В эти моменты очень стыдно.<\/p>\n<p>Ну и немаловажная деталь — нормально, внимательно сформулированный багрепорт показывает ваше уважение к получателю — вы сделали домашку, отнеслись ответственно. Заниматься именно вашей проблемой приятнее. Плюсик в карму.<\/p>\n<h2>Хороший багрепорт<\/h2>\n<p>Хороший с моей точки зрения багрепорт состоит из следующих блоков.<\/p>\n<h3>1. Понятное краткое описание проблемы<\/h3>\n<p>Описание проблемы нужно, чтобы баг потом можно было найти. В идеале из заголовка должен быть понятен домен (часть программы, экран), область ошибки и важность. Писать все подробности в заголовок лучше не стоит, все равно не влезет.<\/p>\n<p>Хорошие примеры:<\/p>\n<ul>\n<li>Ошибка 404 при переходе на английскую версию статьи<\/li>\n<li>Неправильный отступ в кнопке с иконкой button primary transparent<\/li>\n<li>Приложение крешится при попытке отправить прогрессивный jpeg<\/li>\n<li>Невозможно задать себе имя «Ян», т. к. оно слишком короткое<\/li>\n<\/ul>\n<p>Плохие примеры (мало подробностей):<\/p>\n<ul>\n<li>Ошибка 404<\/li>\n<li>Неправильный отступ в кнопке<\/li>\n<li>Приложение крешится<\/li>\n<li>Не получается изменить имя<\/li>\n<\/ul>\n<p>Плохие примеры (слишком много подробностей для заголовка):<\/p>\n<ul>\n<li>Неправильный отступ в кнопке с иконкой button primary transparent. В жизни 6 пк 12пк 6 пк 8 пк, а надо 6 пк 8пк 6пк 6пк<\/li>\n<li>Приложение под macOS версии 10.5.5 build 56718 крешится при попытке отправить прогрессивный jpeg в общий чат. При отправке пнг такого нет<\/li>\n<\/ul>\n<h3>2. Как воспроизвести<\/h3>\n<p>Самый важный блок. Я стараюсь его писать именно в виде шагов, чтобы не комкать описание и ничего не пропустить. Пишу по шаблону: шаги — ожидаемый результат — полученный результат<\/p>\n<p><b>Шаги<\/b><br \/>\nКонкретные шаги, которые нужно повторить для воспроизведения бага. Прямо как есть: зайти на страницу, нажать на кнопку, заполнить поле.<\/p>\n<blockquote>\n<p>1) Открыть страницу профиля<br \/>\n2) Нажать на кнопку «Редактировать профиль»<br \/>\n3) Вписать в поле «Имя» значение «Ян»<br \/>\n4) Нажать на кнопку «Сохранить»<\/p>\n<\/blockquote>\n<p><b>Ожидаемый результат<\/b><br \/>\nПосле шагов пишу ожидаемый результат, что я жду, после выполнения этих действий.<\/p>\n<blockquote>\n<p>Ожидается: профиль сохранится<\/p>\n<\/blockquote>\n<p><b>Полученный результат<\/b><br \/>\nА здесь описываю результат, который получил на самом деле.<\/p>\n<blockquote>\n<p>Полученный результат: профиль не сохранился, около поля «Имя» текст ошибки «Имя должно быть не менее 3 символов».<\/p>\n<\/blockquote>\n<h3>3. Скриншоты или скринкасты<\/h3>\n<p>Шаги воспроизведения и полученный результат лучше снадбить скриншотами, а если ошибку сложно заскриншотить, то записать скринкаст. При записи скринкаста делайте заметные паузы (пару секунд) перед переходом между шагами и после результата, — так смотрящему будет проще скринкаст посмотреть.<\/p>\n<h3>4. Окружение<\/h3>\n<p>В окружении описываю релевантные версии программ, браузеров, пакетов, операционной системы. Иногда пишу разрешение экрана и версию ноутбука.<\/p>\n<h2>Как внедрить<\/h2>\n<p>Первое время может быть непросто. Хочется срезать углы и описать покороче, ведь «и так понятно».<\/p>\n<p>Могу рассказать, что заметил у себя. Когда срезаю углы, потом обычно жалею: потом все равно приходится подробно описывать. И до сих пор бывают случаи, когда сам не могу разобраться, что же такое понаписал.<\/p>\n<p>Мне помогает иметь шаблон багрепорта в заметках и трекерах. Скопировал, заполнил, молодец.<\/p>\n<div class=\"post-summary\"><div class=\"post-summary__header\"><p>Шаблон багрепорта<\/p>\n<\/div><div class=\"post-summary__text\"><ol start=\"1\">\n<li>Краткое описание проблемы<\/li>\n<li>Пошаговое (важно!) воспроизведение проблемы<\/li>\n<li>Ожидаемый после этих шагов результат<\/li>\n<li>Полученный после этих шагов результат<\/li>\n<li>Скриншоты, скринкасты, версия браузера<\/li>\n<\/ol>\n<\/div><\/div><h2>Сделайте удобно читателю<\/h2>\n<p>Вообще этот прием — один из примеров более общего приёма «сделайте удобно читателю».<\/p>\n",
            "date_published": "2021-08-25T00:15:36+03:00",
            "date_modified": "2021-08-25T10:07:06+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/good-bug-report@2x.png",
            "_date_published_rfc2822": "Wed, 25 Aug 2021 00:15:36 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "166",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/good-bug-report@2x.png"
                ]
            }
        },
        {
            "id": "160",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/not-reproducing\/",
            "title": "У меня не воспроизводится",
            "content_html": "<p><aside class=\"aside-margin-right\">Взгляд с другой стороны: <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/good-bug-report\/\">Как писать багрепорты<\/a><\/aside><\/p>\n<p class=\"lead\">Рассказываю как не выбешивать, даже ошибка если не воспроизводится.<\/p>\n<p>Бывает такое, что ошибку, о которой пишут, воспроизвести сложно. Но ответ в трекере «У меня не воспроизводится» и последующее закрытие бага — совершенно хамские действия. Да и просто ответ «У меня не воспроизводится» не самый вежливый, если даже баг не закрывают. Даже когда автор не хочет хамить и хочет помочь, такой ответ, на мой вкус, настраивает на негативный контекст.<\/p>\n<p>Почему так происходит. Я вижу две проблемы:<\/p>\n<ul>\n<li>Ответ в стиле пинг-понга: «проблема не на нашей стороне, следующий».<\/li>\n<li>Ответ не подразумевает продолжения, «не воспроизводится» и всё тут, я даже пробовать исправить не буду.<\/li>\n<\/ul>\n<p>Этот контекст возникает сам собой. А чтобы убрать его приходится прикладывать дополнительные усилия.<\/p>\n<p><aside class=\"aside-margin-right\">Кстати, подпишитесь <a href=\"https:\/\/t.me\/anatoly_burov_channel\">на канал Анатолия<\/a>, там сила, мудрость, забота и уважение<\/aside><\/p>\n<p>Однажды я сообщал о своей проблеме с <a href=\"https:\/\/conspectus.io\/\">Конспектом<\/a>. Со мной в личке связался Анатолий Буров и написал такое сообщение (цитирую с разрешения автора):<\/p>\n<blockquote>\n<p>Спасибо за сообщение! Разбираемся.<\/p>\n<p>У меня залогинивание работает. Это, конечно, не показатель, но свидетельствует о том, что речь, возможно, о какой-то локальной проблеме.<\/p>\n<p>Вижу на скриншоте в консоли, что на десктопном Сафари установлен блокировщик, который не даёт загрузить Яндекс.Метрику. Возможно, причина в этом. Сейчас проверим.<\/p>\n<p>В связи с этим пара вопросов: а какой это блокировщик? И на айфоне тоже он настроен?<\/p>\n<\/blockquote>\n<p>По смыслу «у меня не воспроизводится», при этом негативный контекст сообщения превращен в невероятную заботу «у меня не воспроизводится, но даже в этом случае ты в надежных руках, сейчас будем разбираться».<\/p>\n<p class=\"loud\">Я просто растаял.<\/p>\n<p>Кроме заботы сделано предположение о возможной причине (кстати, верное. Так и оказалось, что это я своим блокировщиком сделал «баг») и предложения о дальнейшем траблшутинге.<\/p>\n<p>Но в первую очередь я говорю про заботу в сообщении. Мне бы так уметь.<\/p>\n",
            "date_published": "2021-08-25T00:15:32+03:00",
            "date_modified": "2023-09-26T17:24:24+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/not-reproducing@2x.png",
            "_date_published_rfc2822": "Wed, 25 Aug 2021 00:15:32 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "160",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/not-reproducing@2x.png"
                ]
            }
        },
        {
            "id": "164",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/what-is-a-good-handoff\/",
            "title": "Как выглядит хороший макет",
            "content_html": "<p class=\"lead\">В продолжении тредов Романа Шамина про дружбу дизайнеров и фронтендеров решил вытащить в блог одну из статей наших гайдов — про то, что такое «хорошо переданный макет». Все вытащенные из гайдов статьи доступны по тегу <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/guidelines\/\">гайдлайны.<\/a><\/p>\n<p>Треды Романа Шамина:<br \/>\n<a href=\"https:\/\/teletype.in\/@romanshamin\/what-design-want-from-frontend\">teletype.in\/@romanshamin\/what-design-want-from-frontend<\/a><br \/>\n<a href=\"https:\/\/teletype.in\/@romanshamin\/what-frontend-want-from-design\">teletype.in\/@romanshamin\/what-frontend-want-from-design<\/a><\/p>\n<p>Дальше привожу статью из наших командных договоренностей.<\/p>\n<h2>О чем эта статья<\/h2>\n<p>Если макет сделан не очень удобно для разработчиков, это плохо: разработчику будет сложно понять как сделать правильно, он потратит больше времени и где-то ошибется. Дизайнеру придется писать больше замечаний, люди будут менее довольны друг другом.<\/p>\n<p>Эта статья описывает как хорошо передать макет в разработку.<\/p>\n<h2>Хранение и состав макетов<\/h2>\n<h3>Список самих экранов<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nВсем членам команды продукта понятно где и как искать макеты:<\/p>\n<ul>\n<li>где найти макеты по нужной фиче,<\/li>\n<li>где найти старый макет,<\/li>\n<li>как понять актуальная версия или нет.<\/li>\n<\/ul>\n<p>Договоренности команды о процессе выкладывания макетов записаны.<\/p>\n<p>При обновлении макетов уведомляется проектная команда (аналитик, фронтенд, тех. писатель, QA).<\/p>\n<h3>Состав экранов<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nДля фичи понятен набор экранов, на которые вносятся изменения: какие экраны новые, какие экраны дорабатываются.<\/p>\n<p>Если экранов несколько, то понятны переходы между экранами.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nДоступна актуальная схема экранов продукта (карта сайта).<\/p>\n<p>Если в фиче несколько экранов, то для них сделан кликабельный прототип с переходами между экранами.<\/p>\n<h2>Экраны<\/h2>\n<h3>Структура экранов<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятна структура экрана: из каких блоков состоит экран, какие между ними соотношения по размерам и отступам.<\/p>\n<p>Как ведут себя блоки экрана при прокрутке и ресайзе.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nУ продукта есть понятная сетка, описаны типовые лейауты страниц: список, дашборд, форма редактирования, страница просмотра и т. д.<\/p>\n<h3>Элементы на странице<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПо каждому визуальному элементу на макете понятно, что это такое: текст, компонент, иконка, паттерн.<\/p>\n<p>По каждому компоненту понятно, что это за компонент, какой его режим используется, понятно, если в коде нет этого компонента или функции существующего компонента.<\/p>\n<p>Понятны размеры элемента, его взаимоотношения с соседними элементами.<\/p>\n<p>Понятно как элемент тянется, что будет, если в элементе будет меньше или больше контента.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nВсе элементы описаны, разработчик знает где искать документацию на каждый используемый тип элемента: текст, компонент, иконку, паттерн.<\/p>\n<p>Размеры элементов и отступы между элементами логичны, ожидаемы и понятны.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-1@2x.png\" width=\"600\" height=\"88\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Случайные размеры блоков, фронтендерам сложно понять отступы<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-2@2x.png\" width=\"595\" height=\"330\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Случайные размеры блоков, фронтендерам сложно понять отступ<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-3@2x.png\" width=\"600\" height=\"88\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Размеры блоков понятны<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-4@2x.png\" width=\"600\" height=\"96\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Размеры блоков понятны, блоки расположены предсказуемо по сетке<\/div>\n<\/div>\n<h3>Кегли<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nДля каждого текста на странице понятен стиль или mixin, который нужно взять, эти стили и mixin’ы однозначно определяются из самого макета.<\/p>\n<p>Эти mixin’ы не противоречат компонентам, паттернам или аналогичным элементам других экранов продуктов.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nЕсть актуальная таблица миксинов, описаны общие принципы их использования.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-5@2x.png\" width=\"453\" height=\"168\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Кегль не замапплен, неясно какой типографический миксин взять<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-6@2x.png\" width=\"453\" height=\"206\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Кегль и цвет замапплен, понятно что указать<\/div>\n<\/div>\n<h3>Цвета<\/h3>\n<p>Речь идет про цвет любого интерфейсного элемента: текста, иконки, рамки, фона, блока, линии.<\/p>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nНе используются цвета не из палитры проекта.<\/p>\n<p>Переменные цветов подписаны, разработчику легко понять, какую переменную использовать (копировать hex-код не норм).<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nСоставлена таблица цветовых токенов: default text, disabled text, error icon для всех используемых в проекте тем.<\/p>\n<p>В макетах прилинкованы цвета из этой таблицы (не error-500, а validation-text-color).<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-7@2x.png\" width=\"453\" height=\"168\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Цвета не замаплены, неясно какой цвет выбирать<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-8@2x.png\" width=\"453\" height=\"206\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Цвета замаплены, понятно что указать<\/div>\n<\/div>\n<h3>Отступы<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятны сами отступы между всеми блоками на странице и их внутренняя логика.<\/p>\n<p>Отступы на макете не противоречат компонентам (например, в компоненте «кнопка» отступы 6 16, а на макете 6 12).<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nОписана интерфейсная микросетка и описание модулей.<\/p>\n<p>Логика отступов описана, есть типовые отступы и их завязка на сетку.<\/p>\n<h3>Пиктограммы<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nРазработчик знает, как вообще подключаются пиктограммы в проект.<\/p>\n<p>Понятно, что это за конкретная пиктограмма, как ее подключить и вставить.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nЕсть общий список пиктограмм, их коды, параметры вставки в код продукта и документацию.<\/p>\n<p><aside class=\"aside-margin-right\">Чтобы не мучиться со сборкой пакетов иконок, <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/icon-font\/\">почитайте как собирать их автоматически<\/a><\/aside><\/p>\n<p>Иконки версионируются, к продукту или в документацию можно подключить нужную версию пакета иконок.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-9@2x.png\" width=\"453\" height=\"310\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Иконка не замаплена, нужно искать её в наборе самостоятельно<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-10@2x.png\" width=\"453\" height=\"267\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Указано какая иконка и из какого набора. Примечание: mc — префикс одного из наших наборов иконок.<\/div>\n<\/div>\n<h2>Текст<\/h2>\n<p>См. также <i>Правильный процесс вычитки<\/i> (ссылки нет, статья не вытащена наружу).<\/p>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nРыба в макете правильная с точки зрения состояний, смысла и точная с точки зрения чисел и значений.<\/p>\n<p>Нет никаких Значение-1, Значение-2, Значение-3 и Лорем ипсумов.<\/p>\n<p>Из текста понятно, о чем он: это важно, чтобы техписатели могли его понять и улучшить.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nТекст в состоянии production-не стыдно, техписатели только полируют его.<\/p>\n<h2>Состояния<\/h2>\n<h3>Другие состояния<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно, как сделать все остальные состояния: переключенные вкладки, переключатели, чекбоксы и радиокнопки (если они влияют на компоновку интерфейса).<\/p>\n<p>Отрисованы или описаны (если этого достаточно) все варианты дропдаунов, селектов и других выпадаек.<\/p>\n<p>Кроме самих этих состояний описаны переходы между ними.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nЕсли блоки меняются значительно, то лучше не пытаться описать отдельные выпадайки, а нарисовать блоки целиком, чтобы было меньше путаницы<\/p>\n<p>Пример:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-11@2x.png\" width=\"750\" height=\"1220\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Хорошо: Нарисованы альтернативные состояний экрана<\/div>\n<\/div>\n<h3>Загрузка<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно как загружаются элементы экрана, в какой последовательности, как отображается процесс загрузки.<\/p>\n<p>Как должен вести себя продукт, если загрузка медленная, элементов много, или загрузка не удалась.<\/p>\n<h3>Пустое состояние<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно, как выглядит пустое состояние всех блоков и элементов, когда в них нет данных.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nПустые состояния систематизированы, используются типовые решения.<\/p>\n<p>Пример:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-12@2x.png\" width=\"398.5\" height=\"1000\" alt=\"\" \/>\n<\/div>\n<h3>Валидация<\/h3>\n<p>См. <a href=\"https:\/\/mosaic.ptsecurity.com\/components\/validation\/overview\">Валидация данных<\/a><\/p>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно, когда и как срабатывает валидация.<\/p>\n<p>Как и когда показывается.<\/p>\n<p>Все сообщения об ошибках проходят через дизайнера, для каждой из возможных ошибок дизайнер придумывает способ предотвращения ошибки или способ отображения, если её нельзя предотвратить<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nВалидация соответствует общему гайдлайну.<\/p>\n<p>Валидация способствует не попаданию с ситуацию срабатывания валидации.<\/p>\n<h3>Много данных<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно как работает экран, когда во всех потенциальных местах (текст, списки, таблицы) будет много данных.<\/p>\n<p>Все вытащенные из гайдов статьи доступны по тегу <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/guidelines\/\">гайдлайны.<\/a><\/p>\n<h2>См. также<\/h2>\n<p>Гайд Контура: <a href=\"https:\/\/guides.kontur.ru\/principles\/layouts\/\">guides.kontur.ru\/principles\/layouts\/<\/a><br \/>\nЧек-лист <a href=\"https:\/\/twitter.com\/Prit4er1\">Prit4er1<\/a>: <a href=\"https:\/\/www.notion.so\/5c03c7554ff542da9c77a6f420935282\">notion.so\/5c03c7554ff542da9c77a6f420935282<\/a><\/p>\n",
            "date_published": "2021-05-11T10:19:02+03:00",
            "date_modified": "2024-01-07T14:57:25+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-1@2x.png",
            "_date_published_rfc2822": "Tue, 11 May 2021 10:19:02 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "164",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-6@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-7@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-8@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-9@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-10@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-11@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-12@2x.png"
                ]
            }
        },
        {
            "id": "159",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/ui-designer-wanted-2\/",
            "title": "Ищу дизайнера интерфейсов-2",
            "content_html": "<p class=\"lead\">Снова ищем, <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/two-ui-designers-wanted\/\">прошлый поиск<\/a><\/p>\n<p class=\"lead\">Я руковожу группой интерфейсных дизайнеров в Positive Technologies и ищу в нашу команду двух человек, чтобы делать корпоративные <span class=\"e2-caps\">B2B<\/span>-приложения.<\/p>\n<p class=\"lead\">Я слабо верю в поиск дизайнеров на хедхантере, но верю в нетворкинг и рекомендации.<\/p>\n<h2>Чем мы занимаемся<\/h2>\n<p>Мы делаем корпоративные продукты для специалистов по информационной безопасности («ибэшников»). Вы, возможно, про нас не слышали, но в России нет ни одного ибэшника, который бы нас не знал. Некоторые наши продукты хорошие, некоторые — отличные; наш <span class=\"e2-caps\">WAF<\/span> попадал в магический квадрант Гартнера (это типа круто), наша <span class=\"e2-caps\">SIEM<\/span>-система — лидер российского рынка <span class=\"e2-caps\">SIEM<\/span>.<\/p>\n<p><aside class=\"aside-margin-right\"><a href=\"http:\/\/mikeozornin.ru\/blog\/all\/why-enterprise-software-so-bad-design\/\">Почему у корпоративных продуктов плохой дизайн и что делать<\/a><\/aside><\/p>\n<p>Скажу честно и прямо, эти успехи не всегда благодаря прекрасному интерфейсу, и иногда и вопреки всему интерфейсу. Наши продукты вообще покупают не за красивый и удобный интерфейс, а за технологию и экспертизу. Какая-то часть из моего поста про интерфейс корпоративных продуктов сейчас относится и к нам.<\/p>\n<p>В планах на этот (2021) год: изменить мышление продакт-менеджеров к customer development’у, осовременить наш <span class=\"e2-caps\">ui<\/span> kit и базу <span class=\"e2-caps\">ui<\/span>-компонентов, унифицировать интерфейсы продуктов, научиться делать некоторые задачи в режиме дизайн-бюро. В итоге — сделать так, чтобы продукты любили и за интерфейс тоже.<\/p>\n<p>Есть и планы на команду: хотим активизировать обмен знаниями, приглашать других дизайнеров в гости и ходить сами.<\/p>\n<p>Многие продакт-оунеры хотят всего этого, они на нашей стороне. Я ищу двух дизайнеров, которые бы захотели к нам присоединиться и остаться надолго.<\/p>\n<h2>Задачи, которыми придется заниматься<\/h2>\n<p>Разбираться со сложными системами и создавать для них элегантные решения.<\/p>\n<p>Плотно работать с продакт-менеджерами, аналитиками, погружаться в проблемы пользователей и внедренцев.<\/p>\n<p>Создавать интерфейсы <span class=\"e2-caps\">B2B<\/span>-продуктов: длинные формы, панели администрирования, конструкторы алгоритмов; определять внешний вид дашбордов, графиков, отчетов.<\/p>\n<p>При необходимости — создавать прототипы, тестировать их на команде разработки или пользователях.<\/p>\n<p>По возможности и при желании — участвовать в customer development продуктов, чтобы понять потребности пользователей.<\/p>\n<h2>Наш дизайнер<\/h2>\n<p>Имеет опыт проектирования интерфейсов <span class=\"e2-caps\">CRM<\/span>-систем, систем документооборота, промышленных или других подобных систем.<\/p>\n<p>Имеет минимальный технический бэкграунд (знает в общих чертах, как работает интернет) и способен разобраться в новой для себя предметной области. Один на один с <span class=\"e2-caps\">иб<\/span> не оставим.<\/p>\n<p><aside class=\"aside-margin-right\">Про интерфейсные компоненты см. <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-completeness-example\/\">Илью Бирмана про замкнутость<\/a><\/aside><\/p>\n<p>Умеет поддерживать логичность и целостность базовых интерфейсных компонентов и следить за консистентностью всего продукта.<\/p>\n<p>Готов проверять свои гипотезы и макеты коридорным тестированием, анкетами, может провести юзабилити-тестирование.<\/p>\n<p>Обладает вкусом и чувством эстетики. Считает, что удобство, эффективность и красота могут сочетаться в одном продукте.<\/p>\n<h2>О команде<\/h2>\n<p>Дизайнеров девять человек (четверо в Москве, трое в Новосибирске, двое в Питере). Каждый из них тесно работает со своей продуктовой командой, периодически все общаются между собой. Часть дизайнеров ведут внутренние задачи дизайн-отдела: гайдлайны, <span class=\"e2-caps\">ui<\/span> kit, дизайн-токены, развитие экспертизы в исследованиях.<\/p>\n<p>Основной инструмент — Фигма, но есть пара дизайнеров, кто ещё не переехал со Скетча.<\/p>\n<p>Есть свой <span class=\"e2-caps\">ui<\/span> kit, своя база <span class=\"e2-caps\">ui<\/span>-компонентов на Angular и гайдлайны по их использованию (если дойдут руки, опубликуем в этом году).<\/p>\n<p>Фронтендеры и бэкендеры, которые не говорят «ой, это невозможно».<\/p>\n<p>Процессы в разных проектах немного разные, но в среднем работа над очередной фичей проходит примерно так: раннее обсуждение фичи, проектирование сценариев, скетчи, макеты, авторский надзор за реализацией, пользовательское исследование сделанной фичи.<\/p>\n<p class=\"loud\">Если вам интересно и вы узнали себя хотя бы наполовину, напишите о себе:<br\/><a href=\"mailto:mozornin@ptsecurity.com\">mozornin@ptsecurity.com<\/a> или в телеграм: <a href=\"https:\/\/t.me\/mikeozornin\">@mikeozornin<\/a><\/p>\n",
            "date_published": "2021-02-02T01:07:31+03:00",
            "date_modified": "2021-09-17T00:05:45+03:00",
            "_date_published_rfc2822": "Tue, 02 Feb 2021 01:07:31 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "159",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "156",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-download-screens-from-zeplin-and-figma\/",
            "title": "Автоматическое скачивание новых экранов из Цеплина и Фигмы",
            "content_html": "<p class=\"lead\">Делюсь скриптами для решения проблемы ревью макетов в Цеплине или Фигме<\/p>\n<p>На работе я пытаюсь быть в курсе того, что происходит в соседних проектах, для этого стараюсь смотреть все макеты.<\/p>\n<p>Делать это в Цеплине или Фигме — катастрофа и унижение.<\/p>\n<p>В Цеплине: зайти в список проектов, обновить проекты по времени обновления, зайти в проект, обновить экраны по времени обновления, открыть первый, посмотреть, перейти к следующему. В то момент, когда на глаза начинают попадаться знакомые макеты, нужно остановиться и перейти к следующему проекту. При этом Цеплин дико тормозит — посмотрел 10 макетов, потратил 5 минут. Хочется убиться.<\/p>\n<p>В Фигме нет и этого. Нет ни версий, ни даты обновления, ни фильтрации, ни сортировки. Ходи по экранам и ищи новое. На Фигму я просто забивал.<\/p>\n<p>Я написал себе пару скриптов, которые скачивают в виде png-файлов все обновившиеся с прошлого раза макеты. Пока доволен, на ревью всех проектов день уходит 10-15 минут. Вдруг кому-то тоже помогут.<\/p>\n<p>Качать здесь:<\/p>\n<p class=\"loud\"><a href=\"https:\/\/github.com\/mikeozornin\/zeplin-and-figma-screen-download\">github.com\/mikeozornin\/zeplin-and-figma-screen-download<\/a><\/p>\n<h2>Как использовать<\/h2>\n<ol start=\"1\">\n<li>Создайте токен доступа к Фигме или Цеплину  <br \/>\n<b>Фигма<\/b>: <a href=\"https:\/\/www.figma.com\/developers\/api#access-tokens\">figma.com\/developers\/api#access-tokens<\/a>  <br \/>\n<b>Цеплин<\/b>: <a href=\"https:\/\/docs.zeplin.dev\/reference#introduction\">docs.zeplin.dev\/reference#introduction<\/a><\/li>\n<li>Скопируйте <i>config.py.example<\/i> как <i>config.py<\/i> и впишите туда свои токены.<\/li>\n<li>(Только для фигмы): Отредактируйте в файле <i>config.py<\/i> идентификаторы проектов, которые вам нужны. (Идентификатор проекта содержится в урле <a href=\"https:\/\/www.figma.com\/file\/__id-of-the-project__\/YourProject)\">https:\/\/www.figma.com\/file\/__id-of-the-project__\/YourProject)<\/a><\/li>\n<li>Запустите нужный скрипт<\/li>\n<\/ol>\n<p>Вы можете использовать как один скрипт, так и оба. Если нужно, отредактируйте скрипт запуска <i>run.sh<\/i>.<\/p>\n<h2>Как оно работает<\/h2>\n<p>Скрипты скачивают новые версии экранов из Цеплина и Фигмы в папку, названную по текущей дате (2020-11-06).<\/p>\n<p>Скрипт для Цеплина работает умнее: скачивает только те экраны, которые обновлялись с момента прошлого запуска. Момент предыдущего запуска хранится в файле <i>zeplin-checkpoint.txt<\/i>, если его стереть, то скачаются все экраны снова.<\/p>\n<p>В Фигме нет версий отдельных экранов, а версия файла меняется при каждом изменении. Сделать так же, как для Цеплина не получится. Поэтому скрипт для Фигмы качает все экраны из проектов (скачаются все корневые фреймы). После скачивания скрипт проверит, качался ли такой файл раньше, если такой файл уже встречался ранее, то скрипт удалит только что скачанный файл. В итоге он оставит только те, которые не качались раньше.<\/p>\n<p>Для определения встречался такой файл, или нет используется md5-сумма файлов. Md5-суммы хранятся в файле <i>figma-checkpoint.txt<\/i>, если его стереть, то скачаются и останутся все экраны.<\/p>\n<h2>Как запускать регулярно<\/h2>\n<p>Если вам нужно, чтобы скрипт срабатывал сам в определенное время, добавьте его в планировщик крон или планировщик Windows.<\/p>\n<p>Моё задание для запуска в 23:00 каждый день выглядит в кроне так:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">00 23 * * * \/Users\/mike\/work\/git-repos\/stuff\/zeplin-download-recent\/run.sh<\/code><\/pre><p>Не запускайте дважды фигма-скрипт для одной и той же папки, сотрутся уже скаченные макеты. Надо будет как-нибудь доработать скрипт, чтобы этого не происходило.<\/p>\n<h2>Что может быть появится<\/h2>\n<p>Если я соберусь, то может быть придумаю медитативную ленту из обновленных экранов, которую можно скроллить. Но пока листаю файлы, это тоже ок.<\/p>\n<h2>Вопросы и предложения<\/h2>\n<p>Feel free, как говорится, написать на <a href=\"mailto:mike.ozornin@gmail.com\">mike.ozornin@gmail.com<\/a>. Ошибки, предложения, код-ревью, что угодно.<\/p>\n",
            "date_published": "2020-11-06T02:21:12+03:00",
            "date_modified": "2020-11-06T02:21:02+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-download-screens-from-zeplin-and-figma@2x.png",
            "_date_published_rfc2822": "Fri, 06 Nov 2020 02:21:12 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "156",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-download-screens-from-zeplin-and-figma@2x.png"
                ]
            }
        },
        {
            "id": "155",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-build-icon-pack-from-figma\/",
            "title": "Как собрать пакет иконок из фигмы — 3",
            "content_html": "<p class=\"lead\">Я уже писал как собрать пакет иконок в виде шрифты из скетча. На этот раз из фигмы, в виде svg-спрайта и многоцвете. Сначала будет вступление-рассказ о чем все это, если вы хотите нового, прокрутите до заголовка <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/how-to-build-icon-pack-from-figma#new\" class=\"nu\">«<u>Новое в этой версии<\/u>»<\/a>.<\/p>\n<h2>Что вообще происходит<\/h2>\n<p>У дизайнера есть несколько разных способов передать иконки разработчику:<\/p>\n<ul>\n<li>отдельными файлами или спрайтом в png,<\/li>\n<li>отдельными файлами или спрайтом в svg,<\/li>\n<li>иконочным шрифтом.<\/li>\n<\/ul>\n<p>На формат распространения накладываются и другие ограничения:<\/p>\n<ul>\n<li>платформа: веб, десктоп, мобильные<\/li>\n<li>цветность: монохромные, двухцветные, полноцветные<\/li>\n<li>dpi экранов<br \/>\nи прочее<\/li>\n<\/ul>\n<p><aside class=\"aside-margin-right\">Если вам нужен скетч, <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/how-to-build-icon-font-from-sketch-2\/\">смотри прошлую серию<\/a><\/aside><\/p>\n<p>Разработчики фронтенда просят все время какие-то шрифты, svg-файлы или спрайты. Иногда фронтенд говорит совсем непонятные слова: <i>закоммить в гит<\/i>, <i>пойду соберу пакет в нпм<\/i>, <i>давай настроим в сиай<\/i>. Расскажу как все это сделать, никого не замучив. Понадобится фигма.<\/p>\n<p>Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический ASP.NET MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов. Если кто-то расскажет как прикрутить к этому NuGet, напишите, я добавлю.<\/p>\n<h2>Зачем это делать, есть же фонтелло<\/h2>\n<p>Есть много готовых сервисов, которые собирают шрифт по загруженным svg-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности:<\/p>\n<p><b>Дизайнер может случайно сломать шрифт<\/b>. Если забыть и не экспортировать иконку, которую уже давал, то следующая версия шрифта будет без него и в неизвестном месте сломается интерфейс. Ситуацию усугубляет факт, что дизайнеров у каждого продукта несколько, а общий набор иконок пополняют 5-6 человек.<\/p>\n<p>Хорошее решение — простое, в нем минимум ручных действий.<\/p>\n<p><b>Нескольким дизайнерам работать непросто<\/b>. Если несколько дизайнеров поддерживают один шрифт, то возникает много вопросов синхронизации: где хранить исходники, файлы svg и файлы шрифта, кто собирает и кому передает, как не забыть иконку.<\/p>\n<p>Хорошее решение позволяет добавлять иконки скольким угодно дизайнерам так, что они не испортят чужую работу.<\/p>\n<p><b>Cложно интегрировать в общий процесс сборки продукта<\/b>. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.<\/p>\n<p>Хорошее решение встраивается в процесс разработки.<\/p>\n<p><b>Не всех устраивает внешний сервис<\/b>. Многие компании не верят во внешние сервисы: они могут изменить набор функций, упасть во время подготовки релиза, стать платными или закрыться. В конце концов, их могут хакнуть. Мы — ИБ-компания, и каждый раз раздражать профессионально деформированных безопасников и разработчиков наличием внешнего сервиса не хочется.<\/p>\n<p>Хорошее решение работает внутри компании.<\/p>\n<p><b>Формируется не всё, что надо<\/b>. Некоторые сервисы выдают шрифт, а иконки кодируют номерами символов. К сожалению, на эти номера полагаться нельзя. Если убрать иконку или поменять порядок, то в следующий раз сервис может выдать совсем другие коды и все иконки непредсказуемо поменяются.<\/p>\n<p>Если не формировать вместе со шрифтом less-файл, то разработчикам придется в каждом использовании иконки указывать размер кегля, они могут забыть или ошибиться.<\/p>\n<p>Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.<\/p>\n<h2>Новое в этой версии <span id=\"new\">&nbsp<\/span><\/h2>\n<p>Раньше я описывал схему сборки шрифта, которая позволяет автоматически собрать шрифтовой файл с иконками из исходника Скетча, сгенерировать для него демо-страницу и less-файл, а также опубликовать пакет в npm-репозиторий.<\/p>\n<p>Сегодня — вариант для фигмы. Еще в нем появились svg-файлы и svg-спрайт. Иконки svg-спрайта поддерживают двухцветность и перекрашивание средствами css.<\/p>\n<h2>Куда смотреть<\/h2>\n<p>Я сделал:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/mikeozornin\/some-icons\">github.com\/mikeozornin\/some-icons<\/a> — тестовый репозиторий<\/li>\n<li><a href=\"https:\/\/www.figma.com\/file\/UaWytmrubMDjIpJnlMn03x\/Some-icons-pack?node-id=0%3A4\">figma.com\/file\/UaWytmrubMDjIpJnlMn03x\/Some-icons-pack<\/a> — тестовый фигма-файл<\/li>\n<\/ul>\n<p>Чтобы сборка завелась, нужно подготовить токен доступа к фигме, ищите в профиле вот такое:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-1@2x.png\" width=\"623\" height=\"169\" alt=\"\" \/>\n<\/div>\n<p>После этого действуйте по инструкции в Readme.md<\/p>\n<p>Сборщик обращается к фигме, через веб-апи экспортирует svg-файлы, запускает сборку шрифта и svg-спрайта.<\/p>\n<p>Я не очень пойму, что ещё комментировать, мне кажется, там все понятно и очевидно, поэтому вставляю только результат:<\/p>\n<h2>КДПВ<\/h2>\n<p>Было:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-2@2x.png\" width=\"900\" height=\"683\" alt=\"\" \/>\n<\/div>\n<p>Стало:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-3@2x.png\" width=\"993\" height=\"633\" alt=\"\" \/>\n<\/div>\n<h2>Разные особенности<\/h2>\n<h3>Как работает двухцветность спрайтовых иконок<\/h3>\n<p>Для двухцветности иконок в svg-спрайте и возможности перекрашивания их через css используется своеобразных хак.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;svg fill=&quot;#000&quot; width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\r\n&lt;path d=&quot;M8.62155 1.21658C8.45088 1.08099 8.2349 1 8 1C7.44771 1 7 1.44772 7 2C7 2.55228 7.44771 3 8 3C4.1554 3 3.80482 5.42796 3.08886 10.3863C3.05992 10.5868 3.03039 10.7913 3 11C2.51458 11 2.02917 11.3534 1.54375 12.0603C1.4751 12.1603 1.43835 12.2787 1.43835 12.4C1.43835 12.7314 1.707 13 2.0384 13L6.58534 13C6.53007 13.1564 6.5 13.3247 6.5 13.5C6.5 14.3284 7.17157 15 8 15C8.82843 15 9.5 14.3284 9.5 13.5C9.5 13.3247 9.46992 13.1564 9.41465 13L13.9616 13C14.0829 13 14.2013 12.9633 14.3013 12.8946C14.5745 12.707 14.6439 12.3335 14.4562 12.0603C13.9708 11.3534 13.4854 11 13 11C12.9668 10.775 12.9346 10.5547 12.9031 10.3391C12.7783 9.48499 12.6644 8.70518 12.5409 7.99982C12.5273 7.99994 12.5137 8 12.5 8C11.9617 8 11.4454 7.90547 10.9669 7.7321C11.0539 8.18151 11.1391 8.69127 11.2279 9.26906C11.2687 9.53513 11.3106 9.81613 11.3674 10.204C11.3589 10.146 11.4807 10.9794 11.5161 11.219L11.5575 11.5H4.44301L4.48435 11.2161C4.50903 11.0466 4.57528 10.5882 4.6098 10.3494L4.63087 10.2036C4.68629 9.8214 4.72807 9.5381 4.7686 9.27157C5.39203 5.17234 5.83807 4.5 8 4.5C8.03774 4.5 8.07495 4.50021 8.11166 4.50065C8.03858 4.17884 8 3.84392 8 3.5C8 3.33101 8.00932 3.1642 8.02746 3.00004C8.09885 2.35473 8.30674 1.75013 8.62155 1.21658Z&quot;\/&gt;\r\n&lt;circle cx=&quot;12.5&quot; cy=&quot;3.5&quot; r=&quot;2.5&quot; fill=&quot;currentColor&quot;\/&gt;\r\n&lt;\/svg&gt;<\/code><\/pre><p>Это — код двухцветной иконки. Обратите внимание, что <i>fill<\/i> у <i>svg<\/i> стоит <i>#000<\/i>, а у части иконки, которую нужно красить отдельно, стоит <i>fill=«currentColor»<\/i>.<br \/>\nДля перекрашивания применяется правило:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">svg {\r\n    fill: #8F99AA; \/* Цвет основной части*\/\r\n    color: #E80E0E; \/* Цвет дополнительной части*\/ \r\n}<\/code><\/pre><p>В результате этого правила у <i>svg<\/i> появляются два свойства: <i>fill<\/i> и <i>color<\/i>. <i>Fill<\/i> перекрашивает всю иконку, а <i>color<\/i> ни на что не влияет. У вложенной фигуры срабатывает свой <i>fill<\/i>, но он берет цвет из специальной переменной <i>currentColor<\/i>, которая залинкована на атрибут <i>color<\/i> у <i>svg<\/i>. В итоге атрибут <i>color<\/i> у <i>svg<\/i> не влияет на базовую контур, а используется только чтобы прокинуть внутрь дополнительный цвет.<\/p>\n<p>Такая особенность нужна только для спрайта. Если вставить иконку прямо в DOM, то можно будет использовать любые нормальные способы (например, css-классы).<\/p>\n<h3>Зачем нужны CODEPOINTS<\/h3>\n<p>Ручное прописывание codepoints для символов нужно, чтобы при переборке шрифта не поехали коды символов. Если вы не собираетесь использовать TTF-шрифт, забейте и не используйте. Если вам нужен TTF-шрифт со стабильными кодами символами, придется выдавать их вручную.<\/p>\n<h3>Как лучше версионировать<\/h3>\n<p>У нас (вообще это не обязательно) пакеты версионируются по семверу (semver.org). Версии нумеруются в формате Major.Minor.Patch (например, 3.2.1: 3 — major, 2 — minor, 1 — patch).<\/p>\n<ul>\n<li>Major-версия обновляется при ломающих изменениях<br \/>\nЛомающие изменения говорят о том, что нельзя просто обновить иконку, нужно скорее всего будет менять код в продукте. Ломающие изменения описаны в changelog. Самый частый случай: переименования иконок, при обновлении пакета нужно заменить в продукте старое имя на новое.<\/li>\n<li>Minor-версия обновляется при новых фичах: появление новой иконки, нового формата css и прочее.<br \/>\nОбновляться на новую версию можно безопасно, ничего сломаться не должно.<\/li>\n<li>Patch-версия инкрементируется при багфиксах, исправлениях иконок и прочих мелких изменениях.<br \/>\nОбновляться на новую версию можно безопасно, ничего сломаться не должно.<\/li>\n<\/ul>\n<p>Если есть вопросы, пишите в комментарии или на почту <a href=\"mailto:mike.ozornin@gmail.com\">mike.ozornin@gmail.com<\/a><\/p>\n",
            "date_published": "2020-10-21T01:20:24+03:00",
            "date_modified": "2020-10-21T02:27:37+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-cover@2x.png",
            "_date_published_rfc2822": "Wed, 21 Oct 2020 01:20:24 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "155",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-cover@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-3@2x.png"
                ]
            }
        },
        {
            "id": "153",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-update-icons-in-figma\/",
            "title": "Фигма: как обновить иконку, ничего не сломав",
            "content_html": "<p class=\"lead\">У нас была задача, которую мне казалось, невозможно нормально решить в фигме. Оказалось, что решение простое, вдруг кому пригодится, я ещё вчера не знал<\/p>\n<h2>Ситуация<\/h2>\n<p><aside class=\"aside-margin-right\">Иконки организованы в виде компонентов фигма-файл, из этого файла автоматически собирался иконочный шрифт<\/aside><\/p>\n<p>У нас в одном из продуктов был пакет иконок, которые мы хотели обновить. С момента создания иконки в пакете потеряли консистентность, некоторые и сразу были нарисованы не очень удачно.<\/p>\n<p>Задача была обновить иконки, не потеряв оверрайды в макетах.<\/p>\n<p>Допустим, иконки выглядит вот так (слева — старая, справа — новая):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-1@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p><b>Нужно обновить все иконки сразу<\/b><br \/>\nПерерисовывать иконки по одной прямо в компонентах — не вариант: в макеты пролезут недоделанные варианты. Хочется сначала нарисовать их, сравнить со старыми, проверить и отладить, а потом уже обновить все иконки сразу.<\/p>\n<p><b>Не получится сделать новые компоненты<\/b><br \/>\nНе получится скопировать все иконки, перерисовать их, и сделать новые компоненты. Сделать новые не проблема, а вот заменить старые на новые не выйдет. Даже если их заменить (через Select All with Same Instance), то все инстансы компонентов потеряют оверрайды цвета. При замене компонента на другой из всех оверрайдов фигма сохраняет только текст, все остальное сбрасывается. Можно воспользоваться плагинами Reattach Instance или Master, но все равно это достаточно муторно.<\/p>\n<p><b>В фигме нет очевидного способа заменить внутренности иконки<\/b><br \/>\nЕсли удалить старый shape и заменить его на новый, то слетят цвета всех оверрайдов — задолбаться исправлять. Будет вот так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-2@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p>Для замены контура иконки не помогает ни union (добавить новый контур, сделать union со старым, удалить старый), ни flatten (добавить новый контур, сделать ему flatten со старым). Все способы добавления нового контура не работают, нужно использовать именно старый.<\/p>\n<h2>Решение<\/h2>\n<p><aside class=\"aside-margin-right\"><a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/360040450213-Vector-Networks\">Подробнее про Vector Networks<\/a><\/aside><\/p>\n<p>На помощь приходят Vector Networks. У фигмы в одном контуре могут быть сложные конструкции, которые называются Vector Networks. Можно воспользоваться ими, покажу на картинках.<\/p>\n<p><b>Шаг 1<\/b>: Скопировать старый контур. Нужно зайти в режим редактирования контура (<i>Enter<\/i> ):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-1@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p>Выделить все точки (<i>⌘ + A<\/i> ) и скопировать их (<i>⌘ + C<\/i> ):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-2@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p><b>Шаг 2<\/b>: Добавить новый контур к старому. Нужно зайти в режим редактирования контура в компоненте (<i>Enter<\/i>):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-3@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p>Выделить все точки (<i>⌘ + A<\/i> ) и скопировать их (<i>⌘ + C<\/i> ):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-4@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p>Сдвинуть выделенные точки контура куда-нибудь подальше:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-5@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p>Добавить точки из буфера обмена (<i>⌘ + V<\/i> ). Обратите внимание, что новый контур добавился и не сломал оверрайды (два кольца одинакового цвета):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-6@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p><b>Шаг 3<\/b>: Удалить старый контур. Выделить ненужные точки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-7@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p>И удалить их (<i>⌫<\/i> ):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-8@2x.png\" width=\"900\" height=\"600\" alt=\"\" \/>\n<\/div>\n<p>Вуаля.<\/p>\n<p>На всякий случай скринкаст:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/JcSedWu5X5Y?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n",
            "date_published": "2020-10-05T08:44:31+03:00",
            "date_modified": "2022-08-23T11:25:42+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-cover@2x.png",
            "_date_published_rfc2822": "Mon, 05 Oct 2020 08:44:31 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "153",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/jquery\/jquery.js",
                    "system\/library\/media-seek\/media-seek.js"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-cover@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-6@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-7@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-update-icons-in-figma-3-8@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/remote\/youtube-JcSedWu5X5Y-cover.jpg"
                ]
            }
        },
        {
            "id": "151",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/compliment-people\/",
            "title": "Похвала — это комплимент",
            "content_html": "<p class=\"lead\"><a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/criticism-is-a-compliment\/\" class=\"nu\">«<u>Критика — это комплимент<\/u>»<\/a> написал в 2011 году Илья Бирман. С тех пор я замечаю, что люди вокруг меня неправильно пониманию этот принцип. Расскажу, как это бывает, и как воспринимаю его я.<\/p>\n<p>Я не уточнял, что вкладывал в заголовок Илья Бирман, поэтому <i>правильно<\/i> или <i>неправильно<\/i> — это моё восприятие.<\/p>\n<h2>Как относиться к принципу: неправильно<\/h2>\n<p>Как неправильно: критикуя кого-то, я делаю ему комплимент.<\/p>\n<p>Такое понимание приводит к нескольким логичным выводам:<\/p>\n<ul>\n<li>Если критика благо, нужно приносить этого блага как можно больше.<\/li>\n<li>Если все относятся к критике как к комплименту, критиковать можно все вокруг, не заботясь о разрешении и не заморачиваясь о форме.<\/li>\n<li>Если критика дается всегда и всем, то сигналом <i>все в порядке<\/i> служит само отсутствие критики.<\/li>\n<\/ul>\n<p>Стоит ли говорить, что людей, которые себя так ведут, почти никто не любит. Я долгое время вел себя на 50% от этого, и даже 50% люди вокруг с трудом терпели.<\/p>\n<h2>Как относиться к принципу: правильно<\/h2>\n<p>Как правильно: критика меня — комплимент мне. Такое отношение нужно мне самому, чтобы воспринимать критику адекватно и конструктивно.<\/p>\n<p><aside class=\"aside-margin-right\">Как критиковать:<\/p>\n<p><a href=\"http:\/\/maximilyahov.ru\/blog\/all\/tri-zakona-kritiki\/\">Три закона критики · Максим Ильяхов<\/a><\/p>\n<p><a href=\"http:\/\/sinelnikov.name\/all\/feedback-sandwich\/\">Feedback sandwich · Илья Синельников<\/a><\/p>\n<p><a href=\"http:\/\/maximilyahov.ru\/blog\/all\/borba-s-passivno-agressivnym-povedeniem\/\">Борьба с пассивно-агрессивным поведением · Максим Ильяхов<\/a><\/p>\n<p><a href=\"http:\/\/maximilyahov.ru\/blog\/all\/knut-i-pryanik\/\">Кнут и пряник · Максим Ильяхов<\/a><\/p>\n<p><\/aside><\/p>\n<p>Такое понимание приводит к нескольким логичным выводам:<\/p>\n<ul>\n<li>Восприятие критики как комплимента — это собственное решение того, кого критикуют. Конструкция «ты должен относиться к критике как к комплименту» неправильная, никто никому ничего не должен.<\/li>\n<li>Если известно, что человек придерживается принципа «Критика — это комплимент», то критиковать можно смелее. Если не известно, то лучше подстелить себе соломки и критиковать более аккуратно (см. ссылки на полях)<\/li>\n<li>Не нужно критиковать всех вокруг по любому поводу.<\/li>\n<li>Раз критикуется не всегда и не всё, то отсутствие критики ни о чем не говорит. Отсутствие критики не может служить положительным подкреплением ни в каком виде.<\/li>\n<\/ul>\n<p>Здесь мы подходим к тому, ради чего я все это затевал.<\/p>\n<p class=\"loud\">Критика это полезно, но ещё полезней — хвалить людей<\/p>\n<h2>Хвалить людей<\/h2>\n<p>Критиковать людей, чтобы указывать и исправлять отрицательные действия, конечно важно, но более важно, людей хвалить, чтобы фиксировать и продолжать положительные.<\/p>\n<p>Многие мои коллеги уже привыкли, что если мне сказать, что кто-то из моих дизайнеров молодец, я попрошу сказать это самому дизайнеру. Привыкли, что иногда я прошу вспомнить, кого из них и за что можно похвалить, и похвалить.<\/p>\n<p>Я долго учился хвалить людей, и прошел 1-2% нужного пути. Вот какие принципы по которым я хвалю и говорю хорошее:<\/p>\n<p><b>1. Хвалить.<\/b> Важно не забывать хвалить, особенно вначале, когда это еще не вошло в привычку. Чтобы не забыть я завел себе задачу в тудушке «Сказать спасибо». Кроме спасиб после напоминания тудушки, я пытаюсь подумать про каждую большую совместно сделанную задачу и найти моменты, за которые можно сказать спасибо и похвалить.<\/p>\n<p><aside class=\"aside-margin-right\">Наверное, этому есть какое-то объяснение с точки зрения действия стимула и выработки дофамина с серотонином<\/aside><\/p>\n<p><b>2. Хвалить только за дело.<\/b> Мне кажется важно, чтобы похвала была не вообще, а за дело.<\/p>\n<p>Я никогда не хвалю просто так, абстрактно. Я не говорю <i>огромное спасибо<\/i> за то, что и так ожидаю от человека. Позже, когда человек сделает что-то крутое, мне будет сложнее подчеркнуть его заслуги.<\/p>\n<p>Если непонятно за что хвалить, а хочется, всегда можно похвалить не вообще, а за что-то:<\/p>\n<ul>\n<li>Спасибо, что ты откликнулся!<\/li>\n<li>Спасибо, что ты сделал это сегодня!<\/li>\n<li>Спасибо, что сделал, ты меня очень выручил!<\/li>\n<\/ul>\n<p>Мне самому сложно понять, когда я делаю двухминутную задачу, которую и так должен сделать, а люди пишут «огромное спасибо». WAT?! Подтверждения, что я сделал то, что нужно, было бы достаточно.<\/p>\n<p>Впрочем, это относится и к критике. Критиковать человека просто так — табу. <s>«Вася, почему ты не уважаешь коллег?!»<\/s> → «Вася, сегодня ты опоздал на встречу, где тебя ждало 5 человек. Меня огорчает, когда я вынужден ждать кого-то и впустую тратить свое время. Пожалуйста, следи за своими встречами и не опаздывай. Если тебе нужна помощь с календарем, давай я помогу».<\/p>\n<p><b>3. Можно и похвалить, и покритиковать.<\/b> За одну и ту же большую задачу можно и покритиковать, и отметить положительные стороны.<\/p>\n<p>— Ваня, я бы хотел поговорить с тобой о задаче …<br \/>\n— Что было хорошо: …<br \/>\n— Что было плохо: …<\/p>\n<p><b>4. Публичная похвала работает круче, чем личная<\/b>. Если уместно похвалить публично, то лучше делать это публично. Мне кажется, такая похвала сильнее, чем сказанная лично.<\/p>\n<p>Если вы проводите ретроспективу, пишите и плюсы тоже: и командные, и личные, и про процесс, и про результат. Обычно минусов столько, что про плюсы все забывают. Подойдет даже просто и незамысловатое «Это была сложная задача, мы много ломали дров, но и итоге мы её сделали. Мне кажется штука, которую мы всем сделали — крутая. Я этому рад, спасибо вам всем».<\/p>\n<p><b>5. Не надо искать повода<\/b>. Бывает так: команда молодцы, с ней комфортно, делают работу хорошо и они всегда помогают. Но как-то писать об этом кажется <i>странно<\/i>. Предлагаю забить на эту странность и похвалить. Когда я пишу:<br \/>\n<i>У меня есть проблема, что я никогда не забываю покритиковать, но редко кого-то хвалю. Я стараюсь не забывать, вот сегодня вспомнил про вас. Вспомнил я внезапно, но все сказанное правда и говорю я это совершенно искренне.<\/i><br \/>\n<i>… <\/i><br \/>\nЕщё никто не ответил «Миша, ты не охренел ли?». Не было даже тех, кто попытался пошутить «Скажи, что <i>андроид круче айос<\/i>, если тебя держат в заложниках».<\/p>\n<h2>Вместо вывода<\/h2>\n<p>Хвалите людей вокруг<\/p>\n<p>А ещё прочитайте пост Ники Троицкой про то, как хвалить людей и котиков: <a href=\"http:\/\/happy-marketing.ru\/all\/superlike\/\">Вы получаете то, что продолжительно поощряете<\/a><\/p>\n",
            "date_published": "2020-09-01T01:06:52+03:00",
            "date_modified": "2023-12-30T12:28:49+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/compliment-people@2x.png",
            "_date_published_rfc2822": "Tue, 01 Sep 2020 01:06:52 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "151",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/compliment-people@2x.png"
                ]
            }
        },
        {
            "id": "147",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/cleanup-after-robots\/",
            "title": "Убирать из своих сообщений мусор, созданный роботами",
            "content_html": "<p class=\"lead\">Рассказываю ещё об одном рабочем принципе, который мне казался очевидным, но нет.<\/p>\n<p>Все программы и сервисы хотят загадить ваши сообщения и письма, с этим приходится бороться. О чем я говорю:<\/p>\n<p>Скайп для бизнеса:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots@2x.png\" width=\"384\" height=\"246\" alt=\"\" \/>\n<\/div>\n<p>Зум:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-2@2x.png\" width=\"650\" height=\"756\" alt=\"\" \/>\n<\/div>\n<p>Телеграмное превью:<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"394\" data-ratio=\"0.9609756097561\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-3@2x.png\" width=\"394\" height=\"410\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-4@2x.png\" width=\"386\" height=\"301\" alt=\"\" \/>\n<\/div>\n<\/div>\n<p>Автоматические реферальные приглашения:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-5@2x.png\" width=\"280\" height=\"186\" alt=\"\" \/>\n<\/div>\n<p>С ними есть несколько проблем:<\/p>\n<ul>\n<li>Они замусоривают ваши сообщение, из-за этого сообщение растет в размере: вместо двух строчек в телеграме становится занятым пол-экрана.<\/li>\n<li>Весь этот декор по замыслу автором должен помочь подключиться к конференции, а на деле только мешает. Из-за того, что указаны десять вариантов подключения, найти ссылку на зум-встречу становится сложнее.<\/li>\n<li>Автоматические приветствия и текст реферальных ссылок всегда выглядит фальшиво. Ещё оно становится понятно на фишинговое сообщение: когда у кого-то взломали скайп, я каждый раз переспрашиваю, правда ли человек посылал ссылку и что это за ссылка.<\/li>\n<\/ul>\n<p>Я отметил полезную площадь зумовского письма:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-2-2@2x.png\" width=\"650\" height=\"756\" alt=\"\" \/>\n<\/div>\n<p>Как правильно:<\/p>\n<p class=\"loud\">Нужно оставить только самое главное, обычно это ссылка<\/p>\n",
            "date_published": "2020-08-16T11:30:41+03:00",
            "date_modified": "2024-01-07T14:56:18+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-cover.png",
            "_date_published_rfc2822": "Sun, 16 Aug 2020 11:30:41 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "147",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/jquery\/jquery.js",
                    "system\/library\/fotorama\/fotorama.css",
                    "system\/library\/fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-cover.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/cleanup-after-robots-2-2@2x.png"
                ]
            }
        },
        {
            "id": "144",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/numbers-in-text\/",
            "title": "Числительные прописью",
            "content_html": "<p class=\"lead\">Пытаюсь объяснить, почему можно и нужно писать числа прописью.<\/p>\n<p>В русском языке все числа можно записывать прописью (буквами), некоторые числа можно записывать и цифрами. К сожалению, я замечаю вокруг повальное увлечение писать числа только цифрами, даже в тех случаях, когда цифрами писать не надо или нельзя. Из-за того, что люди ошибаются и записывают числа неправильно, мне бывает сложно понимать записанное.<\/p>\n<p>TL;DR; Числа, записанные цифрами, всегда читаются как «один», «одна», «одно», «два», «три». Не используйте такую запись ни для чего другого.<\/p>\n<h2>Количественные числительные<\/h2>\n<p>Количественные числительные — сколько? скольких? скольким?<\/p>\n<p>В именительное падеже их можно писать цифрами:<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Как написано<\/b><\/td>\n<td><b>Как читается<\/b><\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>Один<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>Два<\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td>Десять<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>А вот в других падежах писать цифрами нельзя:<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Как читается<\/b><\/td>\n<td><b>Как писать<\/b><\/td>\n<td><b>Как не писать<\/b><\/td>\n<\/tr>\n<tr>\n<td>Одному<\/td>\n<td>Одному<\/td>\n<td><s>1-му<\/s><\/td>\n<\/tr>\n<tr>\n<td>Двух<\/td>\n<td>Двух<\/td>\n<td><s>2-ух<\/s><\/td>\n<\/tr>\n<tr>\n<td>Двоим<\/td>\n<td>Двоим<\/td>\n<td><s>2-им<\/s><\/td>\n<\/tr>\n<tr>\n<td>Двумя<\/td>\n<td>Двумя<\/td>\n<td><s>2-я<\/s>, <s>2-мя<\/s><\/td>\n<\/tr>\n<tr>\n<td>Троих<\/td>\n<td>Троих<\/td>\n<td><s>3-х<\/s>, <s>3-их<\/s>, <s>3-оих<\/s><\/td>\n<\/tr>\n<tr>\n<td>Тремя<\/td>\n<td>Тремя<\/td>\n<td><s>3-я<\/s>, <s>3-мя<\/s><\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h2>Существительные, похожие на числительные<\/h2>\n<p>В русском языке есть существительные, похожие на числительные. Их писать цифрами тоже нельзя:<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td>Двойка<\/td>\n<td><s>2-ка<\/s><\/td>\n<\/tr>\n<tr>\n<td>Тройка<\/td>\n<td><s>3-ка<\/s><\/td>\n<\/tr>\n<tr>\n<td>Троица<\/td>\n<td><s>3-ца<\/s>, <s>3-ица<\/s><\/td>\n<\/tr>\n<tr>\n<td>Десятка<\/td>\n<td><s>10-ка<\/s><\/td>\n<\/tr>\n<tr>\n<td>Десяточка<\/td>\n<td><s>10-очка<\/s><\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>Что за «два-ка», «три-ка», «три-ица», «десять-ка» и «десять-очка»?<\/p>\n<h2>Порядковые числительные<\/h2>\n<p>Порядковые числительные «первый», «второй» наращиваются так: 1-й, 2-й.<br \/>\nКак правильно, <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/o-naraschenii-okonchaniy-chislitelnyh\/\">почитайте у Ильи Бирмана<\/a>.<\/p>\n<p>Специальное комбо для тех, у кого кровоточат глаза от неправильных наращений:<\/p>\n<p class=\"loud\">С 3-ёх летним опытом<\/p>\n<h2>Почему ещё можно и нужно писать числа прописью<\/h2>\n<p><aside class=\"aside-margin-right\"><a href=\"http:\/\/mikeozornin.ru\/blog\/all\/opentype-features\/\">Что такое, эти опентайп-фичи<\/a> <br\/> Про маюскульные цифры и другие опентайп-фичи<\/aside><\/p>\n<p>Обычно в шрифтах по умолчанию маюскульные цифры, они большие, высотой с прописную букву. Они немного рвут серый набор и сразу выпрыгивают на читателя. Если писать числа прописью или минускульными цифрами, то визуально набор становится равномерней.<\/p>\n<p>В каком абзаце вы быстрее заметили число?<\/p>\n<p class=\"lead\">Интеграл от функции, имеющий конечный разрыв развивает сходящийся ряд, при этом, вместо 1334 можно взять любую другую константу. Скачок функции неоднозначен.<\/p>\n<p class=\"lead\">Интеграл от функции, имеющий конечный разрыв развивает сходящийся ряд, при этом, вместо <span style=\"font-feature-settings: 'onum'\">1334<\/span> можно взять любую другую константу. Скачок функции неоднозначен.<\/p>\n<p class=\"lead\">Интеграл, берущийся тринадцатью участниками, имеющий конечный разрыв развивает сходящийся ряд, при этом, вместо числа можно взять любую другую константу. Скачок функции неоднозначен.<\/p>\n<p>Этот эффект усиливается, если в каждом предложении есть какие-то числа или цифры. Успокойте текст: сделайте так, чтобы цифры не бросались.<\/p>\n<h2>Запомнить<\/h2>\n<p>Не все числа нужно писать цифрами, писать числа буквами — нормально. Некоторые числа или похожие на них слова неправильно писать цифрами.<\/p>\n",
            "date_published": "2020-06-04T03:00:53+03:00",
            "date_modified": "2020-06-04T03:07:09+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/numbers-in-text-cover@2x.png",
            "_date_published_rfc2822": "Thu, 04 Jun 2020 03:00:53 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "144",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/numbers-in-text-cover@2x.png"
                ]
            }
        },
        {
            "id": "136",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/email-contains-everything\/",
            "title": "В письме уже есть всё нужное",
            "content_html": "<p class=\"lead\">Частенько я получаю письма, для ответа на которые нужно что-то вспоминать, искать, смотреть в прошлых письмах, чатах или вики. Отвечать на них не хочется, всегда невольно тяну до последнего.<\/p>\n<p>Рассказываю о принципе, помогающем написать письмо, на которое легко и приятно отвечать.<\/p>\n<p>Принцип звучит так:<\/p>\n<p class=\"loud\">В письме уже есть всё нужное<\/p>\n<p>В любом письме всегда должно быть всё, что может понадобиться адресату: ссылки, документы, напоминания, история вопроса. Представьте, что у него перед глазами есть только письмо, нет архива переписки, истории чата, доступа в вики, ноушену или гугл-доксу. Будет ли ему удобно ответить на вопрос или принять решение? Сможет он вообще ответить на письмо?<\/p>\n<p>Приведу несколько примеров из жизни. Я убрал из них реальные имена (кроме своего), задачи, комментарии и ссылки.<\/p>\n<h2>Напомнить о долге<\/h2>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Реальное письмо<\/b><\/td>\n<td><b>Правильное письмо<\/b><\/td>\n<\/tr>\n<tr>\n<td>Миша, привет! <br\/>говорят у тебя должок по ACL )<\/td>\n<td>Миша, привет!<br\/>Нам для завершения работ по ACL не хватает следующего:<br\/>1. …<br\/>2. …<br\/>3. …<br\/>Когда сможешь?<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>Моя реакция была примерно такая: ну офигеть, «говорят», кто говорит? Какие долги, где вообще что искать? Ок, пойду спрошу Лену, она отправит к Васе, Вася — к Насте, Настя к Леше. Если потрачу целый день, то узнаю.<\/p>\n<h2>Внес исправления, нужно попросить посмотреть снова<\/h2>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Реальное письмо<\/b><\/td>\n<td><b>Правильное письмо<\/b><\/td>\n<\/tr>\n<tr>\n<td>Там в уведомлениях много твоих комментов, которые вроде закрыты. Посмотри, пожалуйста.<\/td>\n<td>Там в уведомлениях много твоих комментов, которые вроде закрыты. Посмотри, пожалуйста. <br\/>http:\/\/…<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>Да, не хватало только ссылки, все остальное в сообщении было ок. Напоминать замечания в письме было не обязательно, они все были комментариями к документу.<\/p>\n<h2>Создать встречу<\/h2>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Реальное описание встречи<\/b><\/td>\n<td><b>Правильное описание встречи<\/b><\/td>\n<\/tr>\n<tr>\n<td>Давайте обсудим …. Письмом кину ссылки.<\/td>\n<td>Вставить все ссылки в тело встречи.<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>Во время встречи адресат откроет заметки ко встрече, увидит там «Письмом кину ссылки» и будет мучительно искать это письмо где-то в архиве.<\/p>\n<h2>Сообщить об том, что изменения в макеты внесены<\/h2>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Реальное письмо<\/b><\/td>\n<td><b>Правильное письмо<\/b><\/td>\n<\/tr>\n<tr>\n<td>Я обновил макеты как мы хотели.<\/td>\n<td>Я обновил макеты редактирования задачи, которые мы обсуждали в пятницу<br\/>Экран … больше не нужен, я его перечеркнул и оставил его, вдруг на него были ссылки.<br\/><br\/>Вместо него экран …. На нем:<br\/>1. …<br\/>2. …<br\/>3. …<br\/><br\/>Текст весь вычитан, можно брать в работу.<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h2>Добавить кого-то в переписку<\/h2>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Реальное письмо<\/b><\/td>\n<td><b>Правильное письмо<\/b><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left\">+Миша<br\/>Считаю, что тут без UXеров нечего обсуждать.<\/td>\n<td>+Миша<br\/>Миша, мы пытаемся решить …, есть такие варианты:<br\/>1. …<br\/>2. …<br\/>3. …<br\/><br\/>Что думаешь про …?<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>Самые эпичные примеры обычно именно с добавлением в переписку. Человека добавляются в тред из 20 писем, он видит эту огромную переписку, непонятно, что читать, а что нет, непонятно, что спрашивают, непонятно когда. В итоге он просто хочет под одеялко.<\/p>\n<h2>Вместо заключения<\/h2>\n<p>Да, писать так муторно.<br \/>\nДа, писать так долго.<br \/>\nДа, если адресату нужно что-то от меня, он все это найдет сам.<\/p>\n<p class=\"lead\">На самом деле, писать так в ваших же интересах: сделайте адресату удобно и он быстро ответит на ваше письмо. Другие письма проигнорирует, потому что они плохие, а на ваше ответит первым, потому что легко.<\/p>\n<h2>Ссылки по теме<\/h2>\n<ul>\n<li>Совет Василия Половнёва <a href=\"https:\/\/bureau.ru\/soviet\/20190307\/\">bureau.ru\/soviet\/20190307<\/a><\/li>\n<li>Книга <a href=\"https:\/\/www.alpinabook.ru\/catalog\/book-469181\/\" class=\"nu\">«<u>Новые правила деловой переписки<\/u>»<\/a>, Максим Ильяхов, Людмила Сарычева<\/li>\n<li>Константин Коломеец про помощь в принятии решений: <a href=\"https:\/\/teambook.ru\/approaches\/live-fast-decide-young\">Интранет и скорость принятия решений<\/a><\/li>\n<li>Женя Арутюнов про принцип <a href=\"https:\/\/intuition.team\/arutyunov\/?go=all\/vsegda-s-mobily\/\">«Всегда с мобилы» <\/a><\/li>\n<\/ul>\n",
            "date_published": "2020-05-17T01:19:37+03:00",
            "date_modified": "2021-08-29T12:49:46+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/email-contains-everything@2x.png",
            "_date_published_rfc2822": "Sun, 17 May 2020 01:19:37 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "136",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/email-contains-everything@2x.png"
                ]
            }
        },
        {
            "id": "117",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/two-ui-designers-wanted\/",
            "title": "Ищу двух дизайнеров интерфейсов",
            "content_html": "<p class=\"lead\">Upd. Пока нашли<\/p>\n<p class=\"lead\">Я руковожу группой интерфейсных дизайнеров в Positive Technologies и ищу в нашу команду двух человек, чтобы делать корпоративные <span class=\"e2-caps\">B2B<\/span>-приложения.<\/p>\n<h2>Чем мы занимаемся<\/h2>\n<p>Мы делаем корпоративные продукты для специалистов по информационной безопасности («ибэшников»). Вы, возможно, про нас не слышали, но в России нет ни одного ибэшника, который бы нас не знал. Некоторые наши продукты хорошие, некоторые — отличные; наш <span class=\"e2-caps\">WAF<\/span> попадал в магический квадрант Гартнера (это круто), наша <span class=\"e2-caps\">SIEM<\/span>-система — лидер российского рынка <span class=\"e2-caps\">SIEM<\/span>.<\/p>\n<p><aside class=\"aside-margin-right\"><a href=\"http:\/\/mikeozornin.ru\/blog\/all\/why-enterprise-software-so-bad-design\/\">Почему у корпоративных продуктов плохой дизайн и что делать<\/a><\/aside><\/p>\n<p>Скажу честно, эти успехи не всегда благодаря прекрасному интерфейсу. Наши продукты вообще покупают не за красивый и удобный интерфейс. Какая-то часть из моего поста про интерфейс корпоративных продуктов сейчас относится и к нам.<\/p>\n<p>Я хочу поменять столько, сколько смогу: изменить мышление продакт-менеджеров, унифицировать и осовременить интерфейсы продуктов, сделать общий пользовательский опыт, начать проводить пользовательские исследования. И в итоге — сделать так, чтобы продукты любили и уважали и за интерфейс тоже.<\/p>\n<p>Многие продакт-оунеры хотят всего этого, они на нашей стороне.<\/p>\n<p>Я ищу двух дизайнеров, которые бы захотели к нам присоединиться и остаться надолго.<\/p>\n<h2>Задачи, которыми придется заниматься<\/h2>\n<p>Разбирать сложные системы и создавать для них элегантные решения.<\/p>\n<p>Плотно работать с продакт-менеджерами, аналитиками, погружаться в проблемы пользователей и внедренцев.<\/p>\n<p>Создавать интерфейсы <span class=\"e2-caps\">B2B<\/span>-продуктов: длинные формы, панели администрирования, конструкторы алгоритмов; определять внешний вид дашбордов, графиков, отчетов.<\/p>\n<p>При необходимости — создавать прототипы, тестировать их на пользователях или на команде разработки.<\/p>\n<p>Если захотите — принимать участие в обновлении look and feel нашего <span class=\"e2-caps\">ui<\/span> kit. Мы делаем ему фейслифтинг и обновляем лейауты страниц.<\/p>\n<h2>Наш дизайнер<\/h2>\n<p>Имеет опыт проектирования интерфейсов <span class=\"e2-caps\">CRM<\/span>-систем, систем документооборота, промышленных или других подобных систем.<\/p>\n<p>Имеет минимальный технический бэкграунд (знает в общих чертах, как работает интернет) и способен разобраться в новой для себя предметной области. Один на один с <span class=\"e2-caps\">иб<\/span> не оставим.<\/p>\n<p><aside class=\"aside-margin-right\">Про интерфейсные компоненты см. <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-completeness-example\/\">Илью Бирмана про замкнутость<\/a><\/aside><\/p>\n<p>Умеет поддерживать логичность и целостность базовых интерфейсных компонентов и следить за консистентностью всего продукта.<\/p>\n<p>Готов проверять свои гипотезы и макеты коридорным тестированием, анкетами, может провести юзабилити-тестирование.<\/p>\n<p>Обладает вкусом и чувством эстетики. Считает, что удобство, эффективность и красота могут сочетаться в одном продукте.<\/p>\n<h2>О команде<\/h2>\n<p>Дизайнеров семь человек (пять в Москве, двое в Новосибирске). Каждый из них тесно работает со своей продуктовой командой, периодически все общаются между собой.<\/p>\n<p>Работаем в Скетче, возможно будем переезжать на Фигму, пробуем ее.<\/p>\n<p>Есть свой <span class=\"e2-caps\">ui<\/span> kit, своя база <span class=\"e2-caps\">ui<\/span>-компонентов на Angular и некоторое количество гайдлайнов и паттернов использования.<\/p>\n<p>Фронтендеры и бэкендеры, которые не говорят «ой, это невозможно».<\/p>\n<p>Процессы в разных проектах немного разные, но в среднем работа над очередной фичей проходит примерно так: раннее обсуждение фичи, проектирование сценариев, скетчи, макеты, авторский надзор за реализацией, пользовательское исследование сделанной фичи.<\/p>\n<p class=\"loud\">Если вам интересно и вы узнали себя хотя бы наполовину, напишите о себе:<br\/><a href=\"mailto:mozornin@ptsecurity.com\">mozornin@ptsecurity.com<\/a> или в телеграм: <a href=\"https:\/\/teleg.run\/mikeozornin\">@mikeozornin<\/a><\/p>\n",
            "date_published": "2019-06-11T11:17:31+03:00",
            "date_modified": "2021-02-03T21:40:11+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/two-designers-wanted@2x.jpg",
            "_date_published_rfc2822": "Tue, 11 Jun 2019 11:17:31 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "117",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/two-designers-wanted@2x.jpg"
                ]
            }
        }
    ],
    "_e2_version": 3798,
    "_e2_ua_string": "E2 (v3798; Aegea)"
}