{
    "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\/rabochee\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/rabochee\/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": "208",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/side-by-side-0-2-0\/",
            "title": "Сайд-бай-сайб 0.2.0",
            "content_html": "<p>В <a href=\"https:\/\/mikeozornin.ru\/blog\/all\/hello-side-by-side\/\">сайд-бай-сайде<\/a> вышла следующая версия<\/p>\n<p>Изменения:<\/p>\n<ol start=\"1\">\n<li>Человекочитаемые URL для голосований<br \/>\nБыло: \/v\/06b95c10-7688-4106-8e75-762035290c67\/<br \/>\nСтало: \/v\/HairyParrotsPursueRudely\/<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Улучшение интеграции с Mattermost:<br \/>\nСайд-бай-сайд сгенерирует превьюшки к уведомлениям в чате.<br \/>\nПо окончании голосованию в чате будет итог голосования.<\/li>\n<\/ol>\n<p>Было:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-0.2.0-1@2x.png\" width=\"390\" height=\"112\" alt=\"\" \/>\n<\/div>\n<p>Стало:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-0.2.0-2@2x.png\" width=\"688\" height=\"472\" alt=\"\" \/>\n<\/div>\n<p>Мелочи:<\/p>\n<ul>\n<li>Кликабельные ссылки в описаниях. Ссылки в комментарии станут кликабельными.<\/li>\n<li>На странице голосования теперь тоже показывается количество проголосовавших.<\/li>\n<li>На странице голосований можно прокручивать картинки перетаскиванием мыши<\/li>\n<li>Белый список доменов эл. почты. Можно указать домены, вход с которых будет разрешен.<\/li>\n<li>Драг-н-дропать файлы можно на всю страницу, даже на главную.<\/li>\n<\/ul>\n<p class=\"loud\"><a href=\"https:\/\/github.com\/mikeozornin\/side-by-side\">https:\/\/github.com\/mikeozornin\/side-by-side<\/a><\/p>\n",
            "date_published": "2025-11-30T19:50:02+03:00",
            "date_modified": "2025-12-01T12:56:43+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-0.2.0-1@2x.png",
            "_date_published_rfc2822": "Sun, 30 Nov 2025 19:50:02 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "208",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-0.2.0-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-0.2.0-2@2x.png"
                ]
            }
        },
        {
            "id": "204",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/hello-side-by-side\/",
            "title": "Анонс: Сайд-бай-сайд",
            "content_html": "<p class=\"lead\">Анонс еще одного продукта, на этот раз для работы<\/p>\n<p>Это приложение для голосовалок по картинкам (или видосам). Бывает, что нужно показать несколько вариантов и провести, так сказать, юикс ресерч. Знаю, как это решаю сам: почта, телеграм, эмодзи под сообщениями в чате. Собирать гуглдок не будешь, а без него агрегировать результаты — пытка. Я сделал сервис.<\/p>\n<p>Что можно:<\/p>\n<ul>\n<li>Закинуть несколько картинок или видео в голосовалку.<\/li>\n<li>Дать людям проголосовать и через некоторое время посмотреть результаты.<\/li>\n<li>Есть <a href=\"https:\/\/www.figma.com\/community\/plugin\/1545946464465075859\/side-by-side-voting\">плагин для фигмы<\/a>, чтобы загружать картинки прямиком из фигмы.<\/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\/side-by-side-1@2x.png\" width=\"1310\" height=\"1007\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Главная<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-2@2x.png\" width=\"1310\" height=\"1007\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Голосовалка<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-4@2x.png\" width=\"1310\" height=\"1007\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Создание<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-5@2x.png\" width=\"1357\" height=\"1111\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Результаты<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-6@2x.png\" width=\"1310\" height=\"1007\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Профиль и подключение плагина<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-7@2x.png\" width=\"1113\" height=\"695\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Плагин для Фигмы<\/div>\n<\/div>\n<p>В плане входа есть два варианта:<\/p>\n<ul>\n<li>Все пользователи — с анонимным доступом, защиты голосовалки почти никакой нет и можно её просто инкогнито-режимом. Удалить голосование тоже не получится, сервис не знает, кто вы.<\/li>\n<li>Есть вариант с логином по магической ссылке, тогда для голосования тоже нужно будет войти. Вмест с ним появится удаление, досрочное завершение и даже браузерные пуши.<\/li>\n<\/ul>\n<p>Понятно, что есть дарк-мод, автоматическое определение ретиновости картинок, вставка в область прямо из буфера и какая-никакая работа на телефоне.<\/p>\n<p>Я рассчитываю, что вы поднимите сервис где-то у себя. Во-первых, многие не будут готовы своим НДА-макеты куда-то выложить. Во-вторых, я не хочу разбираться с недопустимыми картинками у себя в хостинге. Поэтому опенсорс, там в целом не очень сложно, написали конфиг и запустили ансибл.<\/p>\n<p class=\"loud\"><a href=\"https:\/\/github.com\/mikeozornin\/side-by-side\">github.com\/mikeozornin\/side-by-side<\/a><\/p>\n<p class=\"loud\"><a href=\"https:\/\/www.figma.com\/community\/plugin\/1545946464465075859\/side-by-side-voting\">figma.com\/community\/plugin\/1545946464465075859\/side-by-side-voting<\/a><\/p>\n<p>Будут мысли, пишите: <a href=\"mailto:mike.ozornin@gmail.com\">mike.ozornin@gmail.com<\/a><\/p>\n",
            "date_published": "2025-09-10T22:06:37+03:00",
            "date_modified": "2025-11-27T00:01:26+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-1@2x.png",
            "_date_published_rfc2822": "Wed, 10 Sep 2025 22:06:37 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "204",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-6@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/side-by-side-7@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"
                ]
            }
        }
    ],
    "_e2_version": 3798,
    "_e2_ua_string": "E2 (v3798; Aegea)"
}