FooStack — это мое пространство для экспериментов, кода и практики.

В интерфейсах постоянно повторяется один и тот же паттерн:что-то должно появиться поверх страницы — сбоку, снизу или на весь экран. Обычно это реализуют по-разному: В итоге — куча дублирующегося кода. А можно сделать один универсальный компонент, который покрывает всё это.…

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

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

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

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

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

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