28 Aug 2026, 12:38 UTC451 views5 reactionsread 28 August 2026 Photo
👩💻 Управляем резиновым ресайзом одной строкой!
Пользователь может растянуть <textarea> как угодно, и это часто ломает layout, вылазит за контейнер, разваливает сетку, сдвигает кнопку отправки:
textarea {
resize: both;
}
Если ресайз в интерфейсе не предусмотрен, запретим его явно:
textarea {
resize: none;
}
Нужен только вертикальный ресайз (самый безопасный для формы)? Тогда так:
textarea {
resize: vertical;…
❤3👍1👏1
26 Aug 2026, 10:10 UTC640 views9 reactionsread 28 August 2026 Video
Годная JS-либа для реализации drag-and-drop списков — Sortable
Живёт уже не первый год, проверена временем и продом. Поддерживает перетаскивание элементов как внутри одного списка, так и между несколькими. Работает на нативном Drag and Drop API
Простой и читаемый API, никаких зависимостей. Поддерживает анимацию при перетаскивании, работает на десктопах и тач-устройствах. Совместима с большинством фреймворков.
👏4❤3👍2
25 Aug 2026, 09:09 UTC689 views6 reactionsread 28 August 2026 Photo
📂 Напоминалка для работы с JavaScript!
Например, let и const используются для корректного объявления переменных, map и forEach — для обработки массивов, а includes и split помогают при работе со строками.
На картинке — базовые конструкции языка и самые часто используемые методы, которые стоит держать под рукой.
Сохрани, чтобы не забыть!
❤3👍1👏1🔥1
24 Aug 2026, 07:45 UTC691 views8 reactionsread 28 August 2026 Photo
HTML-совет
Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п.
Почему?
- На десктопе появляется ненужный спиннер.
- Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз.
Вместо этого — используй inputmode="numeric" + pattern
✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX.
✅ Добавляет валидацию на цифры.
👏4❤2👍1🔥1
23 Aug 2026, 11:45 UTC699 views8 reactionsread 28 August 2026 Video
👩💻 Хочешь показать кусок кода так, чтобы он выглядел аккуратно?
Polacode — делает скриншоты кода прямо из VS Code: с подсветкой синтаксиса, темой редактора и оформлением. Просто выделяешь код и получаешь готовое изображение для поста, документации или презентации.
👏3❤2🔥2👍1
22 Aug 2026, 16:15 UTC709 views5 reactionsread 28 August 2026 Photo
Как адаптировать компонент по ширине контейнера, а не экрана
Обычные media-запросы ориентируются на ширину окна браузера. Но один и тот же компонент может находиться в широкой секции, узком сайдбаре или сетке карточек.
Для таких случаев в CSS есть контейнерные запросы.
Сначала нужно объявить родительский элемент контейнером:
.card-wrapper {
container-type: inline-size;
}
После этого стили компонента можно менять…
🔥2❤1👍1👏1
16 Aug 2026, 09:07 UTC794 views6 reactionsread 28 August 2026 Photo
Как сохранить пропорции блока без JS и padding-хаков
Раньше для видео, превью и карточек с фиксированным соотношением сторон часто использовали такой трюк:
.preview {
position: relative;
padding-top: 56.25%;
}
56.25% соответствует формату 16:9.
Работает, но код выглядит неочевидно, а для другого формата приходится снова высчитывать проценты.
В современном CSS есть нормальное решение — aspect-ratio.
.preview {…
❤3👏2🔥1
15 Aug 2026, 09:51 UTC782 views7 reactionsread 28 August 2026 Photo
Как сделать блок на всю высоту экрана без проблем с 100vh
Для полноэкранных секций часто пишут:
.hero {
min-height: 100vh;
}
На компьютере всё выглядит нормально.
Но на мобильных браузерах 100vh может вести себя неожиданно из-за адресной строки и нижней панели браузера.
В результате блок иногда оказывается выше видимой области, а часть контента уезжает вниз.
Для современных браузеров лучше использовать dvh:
.hero…
👏3🔥3❤1
14 Aug 2026, 09:49 UTC718 views11 reactionsread 28 August 2026 Photo
Как сделать адаптивный размер текста без media queries
Для разных экранов часто задают размер текста вручную:
@media (max-width: 1200px) {
.title {
font-size: 48px;
}
}
@media (max-width: 768px) {
.title {
font-size: 36px;
}
}
@media (max-width: 480px) {
.title {
font-size: 28px;
}
}
Работает, но для обычной адаптивной типографики можно обойтись вообще без @media.
Исп…
👍6👏3🔥2
13 Aug 2026, 09:33 UTC683 views7 reactionsread 28 August 2026 Photo
Как сделать адаптивную сетку без media queries
Обычно для адаптивных карточек начинают писать несколько @media:
@media (max-width: 1200px) { ... }
@media (max-width: 768px) { ... }
@media (max-width: 480px) { ... }
Но во многих случаях они вообще не нужны.
CSS Grid умеет самостоятельно определять, сколько карточек помещается в строку.
Достаточно:
.grid {
display: grid;
grid-template-columns:
repeat(au…
🔥4❤1👍1👏1
12 Aug 2026, 07:22 UTC725 views9 reactionsread 28 August 2026 Photo
Как обрезать длинный текст до нескольких строк без JS
Если в карточках, списках или превью текст бывает разной длины, блоки быстро начинают выглядеть неровно.
Один заголовок занимает одну строку, другой — четыре, и вся сетка «прыгает».
Исправить это можно средствами CSS — без JavaScript и ручного обрезания текста.
.title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
over…
🔥4👍2👏2❤1
10 Aug 2026, 07:03 UTC770 views9 reactionsread 28 August 2026 Photo
Как сделать отступ при скролле к якорю без JS
Если на сайте есть фиксированная шапка, переход по якорной ссылке часто выглядит не очень: нужный заголовок прокручивается к самому верху страницы и оказывается прямо под header.
Исправить это можно одной CSS-свойством — без JavaScript и дополнительных вычислений.
.section {
scroll-margin-top: 80px;
}
Теперь при переходе к элементу:
<a href="#contacts">Контакты</a>
<se…
❤4👏2🔥2👍1
Showing the 12 most recent of 31 posts we hold for @frontendGA. View and reaction counts are the latest single reading for each post, not a live figure, and a recent post is still accumulating both. A view count marked ≈ was rounded by Telegram before we ever saw it — t.me prints views in full below 1,000 and to three significant figures above, so ≈1,200,000 means somewhere between 1,150,000 and 1,249,999. Unmarked counts are exact. Text is reproduced from the public post preview and truncated for length.