Автор: dvcarrot

В интерфейсах постоянно повторяется один и тот же паттерн:что-то должно появиться поверх страницы — сбоку, снизу или на весь экран. Обычно это реализуют по-разному: В итоге — куча дублирующегося кода. А можно сделать один универсальный компонент, который покрывает всё это. 💡 Идея Компонент управляется через v-model и умеет: 🧩 Пример использования <Drawer v-model=»opened» side=»right»> <div…

В веб-разработке есть класс багов, которые сложно объяснить, но легко увидеть: Во многих случаях причина одна —👉 код выполняется раньше, чем браузер завершил первый рендер В этой статье разберём простой паттерн, который решает эту проблему — DeferRender. 🚧 Проблема: неправильный момент выполнения Когда Vue монтирует компонент: Но твой код может выполниться между этими этапами. Например:…

В интерфейсах постоянно приходится переключать состояние: Обычно это делают через v-if. И обычно это выглядит… плохо. Резкий скачок, дергается высота, ломается восприятие. В этой статье разберём простой, но мощный паттерн — анимированный переключатель контента, который делает интерфейс заметно приятнее. 🧩 Сам компонент 🎯 Какую задачу он решает Этот компонент делает одну вещь: плавно заменяет один…

В веб-интерфейсах постоянно встречаются зоны со скроллом: И у всех них есть одна и та же проблема: 👉 пользователь не всегда понимает, что блок можно прокрутить Скролл есть, но визуально это никак не обозначено.Особенно если скроллбар скрыт или минималистичный. 🎯 Решение Добавить тени сверху и снизу, которые появляются в зависимости от позиции скролла: Это простой…

В предыдущей статье мы разобрали “умный sticky” через смещение (top: -offset).Этот подход позволяет сохранить один скролл страницы и аккуратно обрабатывать длинный контент. Но это не единственный способ. Иногда хочется: В таких случаях можно пойти другим путём и реализовать sticky-поведение вручную — через position: fixed. 💡 Идея подхода Вместо того чтобы “улучшать” position: sticky, мы: 👉…

В первом варианте мы реализовали “умный sticky” через отслеживание скролла и накопление смещения (delta). Это даёт полный контроль, но у такого подхода есть особенность: положение сайдбара зависит не только от текущего scroll, но и от его истории Иногда это нормально, но можно сделать проще: 👉 не хранить промежуточное состояние вообще👉 а вычислять позицию напрямую из…

position: sticky — одна из тех вещей, которые кажутся идеальными…пока не начинаешь использовать их в реальном интерфейсе. Особенно если у тебя: В какой-то момент всё начинает ломаться. В этой статье разберём решение:👉 sticky-блок с “внутренней прокруткой” без overflow: auto ❌ Проблема обычного sticky Классический вариант: position: sticky;top: 0; Работает отлично, пока: Но если больше —…