Почему скролл «пробивает» модалку и уводит страницу вниз?

Это типичный UX-баг: вы листаете контент внутри modal или sidebar, доходите до края — и дальше начинает двигаться уже вся страница.

Часто это пытаются чинить через body { overflow: hidden; }, но такой подход нередко ломает поведение на iOS, мешает sticky-элементам и даёт неприятные скачки интерфейса.

У CSS для этого есть нативное решение:
.modal {
overflow: auto;
overscroll-behavior: contain;
}

Так скролл остаётся внутри контейнера и не передаётся родителю. А если нужно полностью отключить цепочку прокрутки и overscroll-эффекты, используйте overscroll-behavior: none;.

Особенно полезно для modal, drawer, sidebar, чатов и мобильных меню.

#css #frontend #ux

Как сделать fluid sizing аккуратнее с помощью round()

В свежем разборе показали, как CSS-функция round() помогает «причесать» значения, которые вычисляются через clamp(). Это особенно полезно для адаптивных размеров: шрифтов, отступов, блоков и других элементов интерфейса.

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

Хороший приём для тех, кто хочет сделать адаптивную типографику и spacing более контролируемыми.

#CSS #frontend #typography

Полезный open-source инструмент для UI: веб-компонент, который сам собирает skeleton-заглушки с shimmer-эффектом прямо на основе реального интерфейса.

Что удобно:
— не приходится вручную делать отдельные skeleton-компоненты
— лоадер строится по фактической структуре DOM
— можно гибко настраивать shimmer и внешний вид
— подходит для React, Vue, Svelte и других фреймворков

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

#frontend #ui #opensource

Как сделать sticky footer без layout-багов?

Частая ошибка — ставить футер через position: fixed; bottom: 0;. На практике он нередко перекрывает контент и особенно неприятно ведёт себя на мобильных.

Проще и надёжнее решить это на flex:
body {
display: flex;
flex-direction: column;
min-height: 100dvh;
}

Дальше достаточно для footer задать margin-top: auto; — и он сам уйдёт к нижней границе страницы, забрав всё свободное место сверху. Такой подход не требует JS и лишних расчётов. Как и в уходе, где важна база, а не маскировка симптомов — кстати, похожий подход часто разбирают в канале про кожу, уход и косметологию.

#css #flexbox #frontend

Как быстро подружить frontend и backend

Частая проблема в учебных и pet-проектах: фронт и бэк запускаются по отдельности, а на этапе связки начинаются ошибки, пустые ответы и сломанное отображение.

Здесь идея простая: на небольшом примере буквально в 30–40 строк кода показано, как наладить обмен данными между двумя частями приложения. Без перегруза теорией — только базовая интеграция, вывод текста и картинок, плюс понимание, как это работает в реальном проекте.

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

#frontend #backend #fullstack

Как вынести веб-компонент в отдельное плавающее окно

Мало кто знает, но Picture-in-Picture умеет не только видео. Document Picture-in-Picture API позволяет открыть в отдельном плавающем окошке вообще любой HTML — кнопки, формы, готовые компоненты. И оно остаётся поверх других окон, пока вы работаете на основной странице.

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

Штука нишевая, но для дашбордов, плееров и мини-панелей управления заходит отлично.

#API #JavaScript #frontend

Автозаполнение инпута через <datalist>

Мало кто пользуется этим тегом, а зря. <datalist> хранит набор опций (<option>), которые всплывают подсказками для поля ввода. Пользователь выбирает вариант — и значение подставляется в связанный <input>.

Главное отличие от <select> в свободе выбора:

▪️ select — жёсткий список, ввести своё значение нельзя
▪️ datalist — это подсказки: можно выбрать из списка или напечатать что угодно вручную

По сути получаешь автодополнение на чистом HTML, без единой строчки JS. Удобно для поиска, форм и полей с частыми вариантами.

#HTML #frontend #datalist