Запустил блог на prodfeat.ai. Скинул ссылку в одном Telegram чатике. Через 10 минут - первое сообщение: “Интересно, затянуло читать, но цвет текста и фон давят на глаза”.
Сел фиксить. Не через день. Прямо в ещё открытой сессии Claude Code, в которой делал деплой.
Четыре бага за первый час. Ни один из них я не нашёл сам (имея опыт QA :)).
Что было не так
Сайт выглядел нормально на моём MacBook, в моём Chrome, на моём экране.
Читатель вскрыл проблему: анимированные градиентные orbs с opacity 0.5 просвечивали сквозь текст блога. На тёмном фоне буквы сливались с цветными пятнами. Я не замечал.
По данным Nielsen Norman Group, один оценщик находит только 42% серьёзных проблем юзабилити. Я был этим одним оценщиком. Для разработчика, который тестирует свой же продукт - реальный процент ещё ниже, подозреваю.
Что нашёл и починил
Баг 1: градиентные orbs поверх текста. Декоративные шары с opacity: 0.5 рендерились в том же stacking context, что и контент блога. Красиво на главной - нечитабельно в статьях. Вынес orbs в отдельный контейнер с z-index: -1 и убрал их на страницах блога.
Баг 2: iOS Safari header overlap. На iPhone шапка перекрывала первый абзац. Причина - backdrop-filter в Safari создаёт неожиданные stacking contexts. Баг WebKit #160886, открыт с 2016 года. В Safari 18 свойство официально работает без префикса, но -webkit-backdrop-filter по-прежнему рекомендуют для продакшена - старые версии iOS никуда не делись. Добавил position: relative и z-index к хедеру, увеличил padding-top контента. 15 минут на отладку - дольше всех остальных багов вместе взятых.
Баг 3: кривое выравнивание карточек в grid. На iPad карточки постов прыгали по высоте. Длинный заголовок растягивал ряд, соседние висели в воздухе. Починил через align-items: stretch и min-height.
Баг 4: AuthorBio компонент. Аватар и текст разъезжались на мобилке. В моём проекте flexbox ломался на экранах уже 375px - не хватало flex-wrap: wrap и min-width: 0 на текстовом блоке. Фикс на 5 минут, а выглядело ужасно.
Все четыре - одна сессия Claude Code. Читал сообщение из Telegram, описывал проблему, Claude диагностировал CSS, я проверял. Safari header - 5 минут. Остальные три - по 2.
Результат
4 CSS-бага от реальных пользователей пофикшены за 10 минут в одной сессии.
Что понял
Фидбэк от одного живого читателя из Telegram оказался полезнее моих двух недель самотестирования. Знал это в теории. Прочувствовал, когда человек написал “давит на глаза” про мой градиент, которым я гордился.
Скорость реакции тоже сработала. Пользователь написал - починил - он увидел результат через 20 минут. Написал “о, круто, уже нормально”. Вот ради этого и стоит фиксить сразу, а не складывать в бэклог.