Полезный 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

Как связать HTML-атрибуты и CSS без классов

Оказывается, можно строить адаптивные компоненты вообще без modifier-классов и прокидывания props. Помогают две вещи: container style queries и продвинутый attr()

Суть проста:

• HTML-атрибуты напрямую задают CSS-параметры — значение из атрибута попадает прямо в стиль

• дочерние элементы меняют вид, реагируя на состояние родителя-контейнера

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

Штука свежая, поэтому перед боевым использованием стоит проверить поддержку в браузерах

#CSS #HTML #frontend

initial-scale в viewport уже лишний

Многие по привычке пишут в шапке страницы:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Но для современных браузеров хватает и короткого варианта:
<meta name="viewport" content="width=device-width">

Параметр initial-scale=1.0 остался с тех времён, когда мобильные движки масштабировали страницы по-своему. Сейчас он не решает реальных задач — адаптивность от этого не страдает.

Итог простой: чуть чище шаблон, меньше лишнего в head и одинаковое поведение на экранах.

#viewport #frontend #HTML

🤔 Полезная база для фронтендеров — большая подборка статей, гайдов и справочников по веб-разработке

Упор сделан на HTML, CSS и JavaScript, плюс современную вёрстку: от базовых принципов до рабочих приёмов, которые реально применяют в проектах.

Что внутри:

• Flexbox и Grid
• адаптивная вёрстка и типографика
• доступность (accessibility)
• оптимизация и работа с изображениями
• CSS-анимации

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

#frontend #CSS #JavaScript

overflow: hidden ≠ обрезка контента

Многие ставят overflow: hidden, когда нужно просто обрезать то, что вылезает за границы блока. Но есть нюанс: это свойство делает элемент контейнером прокрутки — даже если полос прокрутки нет.

Побочки такие:
— ломается поведение position: sticky
— путается программная прокрутка
— сбивается поиск ближайшего скролл-контейнера

Если прокрутка вообще не нужна, бери более точное значение:

.wrapper { overflow: clip; }

Контент так же обрезается, но контейнер прокрутки не создаётся. Поэтому sticky внутри будет ориентироваться на внешний скролл, а не застревать на обёртке.

Бонус — можно отодвинуть линию обрезки:

.wrapper { overflow-clip-margin: 8px; }

Удобно, когда нужно оставить пару пикселей под тень или другой визуальный эффект.

Важно: clip не заменяет hidden полностью — если блок реально должен прокручиваться, clip не подойдёт.

#CSS #frontend #overflow

Почему баги кроссбраузерности до сих пор с нами

Казалось бы, стандарты устоялись, движки повзрослели — но один и тот же код всё ещё ведёт себя по-разному в Chromium, Safari и Firefox. И это не магия, а вполне объяснимые вещи.

На итоговую картинку влияет куда больше, чем сам HTML и CSS:

• операционная система и то, как она рендерит шрифты
• WebView, в который завёрнут сайт внутри приложения
• масштабирование и плотность пикселей экрана
• особенности каждого браузерного движка

Отсюда и расхождения: где-то поехала вёрстка, где-то залипает фокус, где-то элемент просто не отрисовался.

Хорошая новость в том, что большинство таких сюрпризов ловится ещё до релиза — если тестировать на реальных движках, а не только в любимом Chrome.

#браузеры #CSS #frontend

CSS избавился от ещё одного костыля для центрирования

Свойство align-content: center теперь работает и с обычными блочными элементами — без flex и grid.

Раньше, чтобы вертикально отцентровать один элемент, контейнер приходилось превращать во flex-колонку. Классика, которую все знали наизусть.

Теперь достаточно одной строки прямо в обычном блоке — браузер сам распределит пространство по вертикали.

Поддержка подъехала ещё в апреле 2024 (Chrome 123, Firefox 125, Safari 17.4), а к октябрю фича стала доступна практически везде. Так что можно смело убирать лишнюю обёртку и писать меньше кода.

#CSS #frontend #вёрстка