Блог Михаила Озорнина: заметки с тегом рабочее

Сайд-бай-сайб 0.2.0

Михаил Озорнин — Sun, 30 Nov 2025 19:50:02 +0300

В сайд-бай-сайде вышла следующая версия

Изменения:

Человекочитаемые URL для голосований
Было: /v/06b95c10-7688-4106-8e75-762035290c67/
Стало: /v/HairyParrotsPursueRudely/

Улучшение интеграции с Mattermost:
Сайд-бай-сайд сгенерирует превьюшки к уведомлениям в чате.
По окончании голосованию в чате будет итог голосования.

Было:

Стало:

Мелочи:

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

https://github.com/mikeozornin/side-by-side

Анонс: Сайд-бай-сайд

Михаил Озорнин — Wed, 10 Sep 2025 22:06:37 +0300

Анонс еще одного продукта, на этот раз для работы

Это приложение для голосовалок по картинкам (или видосам). Бывает, что нужно показать несколько вариантов и провести, так сказать, юикс ресерч. Знаю, как это решаю сам: почта, телеграм, эмодзи под сообщениями в чате. Собирать гуглдок не будешь, а без него агрегировать результаты — пытка. Я сделал сервис.

Что можно:

Закинуть несколько картинок или видео в голосовалку.
Дать людям проголосовать и через некоторое время посмотреть результаты.
Есть плагин для фигмы, чтобы загружать картинки прямиком из фигмы.
Если хотите, можно не публиковать голосовалку ленту, доступ будет только по прямой ссылке.
Можно включить уведомления в чат (пока поддерживается только маттермост, может сделаю телеграм) или пуши в браузере.

Как выглядит:

Главная

Голосовалка

Создание

Результаты

Профиль и подключение плагина

Плагин для Фигмы

В плане входа есть два варианта:

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

Понятно, что есть дарк-мод, автоматическое определение ретиновости картинок, вставка в область прямо из буфера и какая-никакая работа на телефоне.

Я рассчитываю, что вы поднимите сервис где-то у себя. Во-первых, многие не будут готовы своим НДА-макеты куда-то выложить. Во-вторых, я не хочу разбираться с недопустимыми картинками у себя в хостинге. Поэтому опенсорс, там в целом не очень сложно, написали конфиг и запустили ансибл.

github.com/mikeozornin/side-by-side

figma.com/community/plugin/1545946464465075859/side-by-side-voting

Будут мысли, пишите: mike.ozornin@gmail.com

Как писать багрепорты

Михаил Озорнин — Wed, 25 Aug 2021 00:15:36 +0300

Я работаю в разработке ПО и с болью смотрю, как люди обычно сообщают о проблемах с сервисами и программами. Бывает «Я нажал на кнопку и там черный экран», а бывает даже — «Ваша программа не работает». Гайд о том, как нужно сообщать о проблемах.

Посмотрите на эту картинку, представьте себя на месте синего.

Закипели немного, да?

Почему этим вообще стоит заниматься

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

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

Ну, уточнять — это лишний хоп взаимодействия. Не знаю как вас, а меня раздражает уточнять какие-то очевидные подробности, даже если речь идет про мой продукт. Уточнять у человека «Ваша программа не работает, все сломалось, ничего не помогает» я не захочу и попытаюсь слить проблему кому-нибудь.

Ещё бывает так, что разбирать багрепорт начали через неделю после репорта (кто-то был в отпуске или просто высокая загрузка). Начали у меня уточнять, а я сам не могу разобраться, что же я имел ввиду. Им воспроизвести не удается, а я не могу понять своё же описание. ¯\_(ツ)_/¯ В эти моменты очень стыдно.

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

Хороший багрепорт

Хороший с моей точки зрения багрепорт состоит из следующих блоков.

1. Понятное краткое описание проблемы

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

Хорошие примеры:

Ошибка 404 при переходе на английскую версию статьи
Неправильный отступ в кнопке с иконкой button primary transparent
Приложение крешится при попытке отправить прогрессивный jpeg
Невозможно задать себе имя «Ян», т. к. оно слишком короткое

Плохие примеры (мало подробностей):

Ошибка 404
Неправильный отступ в кнопке
Приложение крешится
Не получается изменить имя

Плохие примеры (слишком много подробностей для заголовка):

Неправильный отступ в кнопке с иконкой button primary transparent. В жизни 6 пк 12пк 6 пк 8 пк, а надо 6 пк 8пк 6пк 6пк
Приложение под macOS версии 10.5.5 build 56718 крешится при попытке отправить прогрессивный jpeg в общий чат. При отправке пнг такого нет

2. Как воспроизвести

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

Шаги
Конкретные шаги, которые нужно повторить для воспроизведения бага. Прямо как есть: зайти на страницу, нажать на кнопку, заполнить поле.

1) Открыть страницу профиля
2) Нажать на кнопку «Редактировать профиль»
3) Вписать в поле «Имя» значение «Ян»
4) Нажать на кнопку «Сохранить»

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

Ожидается: профиль сохранится

Полученный результат
А здесь описываю результат, который получил на самом деле.

Полученный результат: профиль не сохранился, около поля «Имя» текст ошибки «Имя должно быть не менее 3 символов».

3. Скриншоты или скринкасты

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

4. Окружение

В окружении описываю релевантные версии программ, браузеров, пакетов, операционной системы. Иногда пишу разрешение экрана и версию ноутбука.

Как внедрить

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

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

Мне помогает иметь шаблон багрепорта в заметках и трекерах. Скопировал, заполнил, молодец.

Шаблон багрепорта

Краткое описание проблемы
Пошаговое (важно!) воспроизведение проблемы
Ожидаемый после этих шагов результат
Полученный после этих шагов результат
Скриншоты, скринкасты, версия браузера

Сделайте удобно читателю

Вообще этот прием — один из примеров более общего приёма «сделайте удобно читателю».