Фронтенд Гайд
Open in Telegram
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6
Show more7 756
Subscribers
-124 hours
-37 days
+1130 days
Data loading in progress...
Similar Channels
Tags Cloud
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
August '26
August '26
+81
in 0 channels
July '26
+51
in 1 channels
Get PRO
June '26
+1 646
in 4 channels
Get PRO
May '260
in 0 channels
Get PRO
April '26
+4
in 0 channels
Get PRO
March '26
+6
in 1 channels
Get PRO
February '26
+6
in 3 channels
Get PRO
January '26
+10
in 1 channels
Get PRO
December '25
+72
in 9 channels
Get PRO
November '25
+55
in 0 channels
Get PRO
October '25
+56
in 0 channels
Get PRO
September '25
+51
in 0 channels
Get PRO
August '25
+65
in 0 channels
Get PRO
July '25
+44
in 0 channels
Get PRO
June '25
+44
in 0 channels
Get PRO
May '25
+71
in 0 channels
Get PRO
April '25
+82
in 0 channels
Get PRO
March '25
+56
in 0 channels
Get PRO
February '25
+114
in 0 channels
Get PRO
January '25
+102
in 0 channels
Get PRO
December '24
+189
in 0 channels
Get PRO
November '24
+166
in 1 channels
Get PRO
October '24
+201
in 0 channels
Get PRO
September '24
+156
in 0 channels
Get PRO
August '24
+227
in 0 channels
Get PRO
July '24
+217
in 0 channels
Get PRO
June '24
+254
in 0 channels
Get PRO
May '24
+301
in 0 channels
Get PRO
April '24
+332
in 0 channels
Get PRO
March '24
+388
in 0 channels
Get PRO
February '24
+282
in 0 channels
Get PRO
January '24
+162
in 0 channels
Get PRO
December '23
+263
in 6 channels
Get PRO
November '23
+951
in 31 channels
Get PRO
October '23
+38
in 1 channels
Get PRO
September '23
+356
in 0 channels
Get PRO
August '23
+542
in 0 channels
Get PRO
July '23
+13
in 0 channels
Get PRO
June '23
+15
in 0 channels
Get PRO
May '23
+27
in 0 channels
Get PRO
April '23
+81
in 0 channels
Get PRO
March '23
+309
in 0 channels
Get PRO
February '23
+15
in 0 channels
Get PRO
January '23
+33
in 0 channels
Get PRO
December '22
+354
in 0 channels
Get PRO
November '22
+1 251
in 0 channels
Get PRO
October '22
+35
in 0 channels
Get PRO
September '22
+11
in 0 channels
Get PRO
August '22
+22
in 0 channels
Get PRO
July '22
+69
in 0 channels
Get PRO
June '22
+30
in 0 channels
Get PRO
May '22
+75
in 0 channels
Get PRO
April '22
+60
in 0 channels
Get PRO
March '22
+630
in 0 channels
Get PRO
February '22
+470
in 0 channels
Get PRO
January '22
+1 403
in 0 channels
Get PRO
December '21
+3 816
in 0 channels
| Date | Subscriber Growth | Mentions | Channels | |
| 26 August | +5 | |||
| 25 August | 0 | |||
| 24 August | +1 | |||
| 23 August | +1 | |||
| 22 August | +5 | |||
| 21 August | 0 | |||
| 20 August | +4 | |||
| 19 August | +5 | |||
| 18 August | +2 | |||
| 17 August | +4 | |||
| 16 August | +3 | |||
| 15 August | +1 | |||
| 14 August | +5 | |||
| 13 August | 0 | |||
| 12 August | +9 | |||
| 11 August | +6 | |||
| 10 August | +3 | |||
| 09 August | +2 | |||
| 08 August | +10 | |||
| 07 August | +3 | |||
| 06 August | +1 | |||
| 05 August | +5 | |||
| 04 August | 0 | |||
| 03 August | +1 | |||
| 02 August | +4 | |||
| 01 August | +1 |
Channel Posts
Годная JS-либа для реализации drag-and-drop списков — Sortable
Живёт уже не первый год, проверена временем и продом. Поддерживает перетаскивание элементов как внутри одного списка, так и между несколькими. Работает на нативном
Drag and Drop API
Простой и читаемый API, никаких зависимостей. Поддерживает анимацию при перетаскивании, работает на десктопах и тач-устройствах. Совместима с большинством фреймворков.| 2 |  📂 Напоминалка для работы с JavaScript!
Например, let и const используются для корректного объявления переменных, map и forEach — для обработки массивов, а includes и split помогают при работе со строками.
На картинке — базовые конструкции языка и самые часто используемые методы, которые стоит держать под рукой.
Сохрани, чтобы не забыть! | 611 |
| 3 |  HTML-совет
Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п.
Почему?
- На десктопе появляется ненужный спиннер.
- Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз.
Вместо этого — используй inputmode="numeric" + pattern
✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX.
✅ Добавляет валидацию на цифры. | 614 |
| 4 |  👩💻 Хочешь показать кусок кода так, чтобы он выглядел аккуратно?
Polacode — делает скриншоты кода прямо из VS Code: с подсветкой синтаксиса, темой редактора и оформлением. Просто выделяешь код и получаешь готовое изображение для поста, документации или презентации. | 656 |
| 5 |  Как адаптировать компонент по ширине контейнера, а не экрана
Обычные media-запросы ориентируются на ширину окна браузера. Но один и тот же компонент может находиться в широкой секции, узком сайдбаре или сетке карточек.
Для таких случаев в CSS есть контейнерные запросы.
Сначала нужно объявить родительский элемент контейнером:
.card-wrapper {
container-type: inline-size;
}
После этого стили компонента можно менять в зависимости от ширины именно этого контейнера:
.card {
display: grid;
grid-template-columns: 1fr;
}
@container (min-width: 560px) {
.card {
grid-template-columns: 160px 1fr;
}
}
Теперь карточка сама переключит компоновку, когда для неё появится достаточно места — независимо от ширины всего экрана.
Контейнерные запросы особенно удобны для карточек, виджетов, сайдбаров и переиспользуемых компонентов в больших интерфейсах. | 678 |
| 6 |  Как сохранить пропорции блока без JS и padding-хаков
Раньше для видео, превью и карточек с фиксированным соотношением сторон часто использовали такой трюк:
.preview {
position: relative;
padding-top: 56.25%;
}
56.25% соответствует формату 16:9.
Работает, но код выглядит неочевидно, а для другого формата приходится снова высчитывать проценты.
В современном CSS есть нормальное решение — aspect-ratio.
.preview {
aspect-ratio: 16 / 9;
}
Теперь браузер сам рассчитывает высоту блока относительно его ширины.
Например:
<div class="preview">
<img src="image.jpg" alt="">
</div>
.preview {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
Если внутри находится изображение, добавляем:
.preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
В итоге картинка всегда занимает весь блок и сохраняет нужные пропорции.
Для квадратной карточки:
.avatar {
aspect-ratio: 1 / 1;
}
Для вертикального изображения:
.poster {
aspect-ratio: 3 / 4;
}
Для классического видео:
.video | 769 |
| 7 |  Как сделать блок на всю высоту экрана без проблем с 100vh
Для полноэкранных секций часто пишут:
.hero {
min-height: 100vh;
}
На компьютере всё выглядит нормально.
Но на мобильных браузерах 100vh может вести себя неожиданно из-за адресной строки и нижней панели браузера.
В результате блок иногда оказывается выше видимой области, а часть контента уезжает вниз.
Для современных браузеров лучше использовать dvh:
.hero {
min-height: 100dvh;
}
dvh означает dynamic viewport height.
То есть браузер пересчитывает высоту блока вместе с изменением реально доступной области экрана.
Например:
<section class="hero">
<h1>Главный экран</h1>
<p>Контент всегда помещается в видимую область.</p>
</section>
.hero {
min-height: 100dvh;
display: grid;
place-items: center;
}
Теперь при появлении или скрытии панелей мобильного браузера высота секции будет корректироваться автоматически.
Есть ещё два похожих значения:
100svh
100lvh
100dvh
svh — минимальная высота viewport, когда панели браузера занимают бол | 758 |
| 8 |  Как сделать адаптивный размер текста без 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.
Используйте clamp():
.title {
font-size: clamp(28px, 5vw, 64px);
}
У clamp() три значения:
clamp(минимум, желаемое значение, максимум)
В нашем примере:
clamp(28px, 5vw, 64px)
означает:
меньше 28px текст не станет;
между этими значениями размер плавно зависит от ширины экрана;
больше 64px текст не вырастет.
Например:
<h1 class="title">
Большой адаптивный заголовок
</h1>
На телефоне браузер оставит текст примерно возле минимального размера.
На среднем экране заголовок начнёт плавно увеличиваться.
А на широком мониторе остановится на заданном максимуме.
Тот же приём работает не только с текстом. | 696 |
| 9 |  Как сделать адаптивную сетку без media queries
Обычно для адаптивных карточек начинают писать несколько @media:
@media (max-width: 1200px) { ... }
@media (max-width: 768px) { ... }
@media (max-width: 480px) { ... }
Но во многих случаях они вообще не нужны.
CSS Grid умеет самостоятельно определять, сколько карточек помещается в строку.
Достаточно:
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
Ключевая часть здесь:
repeat(auto-fit, minmax(250px, 1fr))
minmax(250px, 1fr) говорит браузеру:
карточка не должна становиться уже 250px, но может растягиваться на свободное место.
А auto-fit автоматически определяет количество колонок.
Например, на широком экране получится:
[ Карточка ] [ Карточка ] [ Карточка ] [ Карточка ]
На экране поменьше:
[ Карточка ] [ Карточка ]
[ Карточка ] [ Карточка ]
А на телефоне:
[ Карточка ]
[ Карточка ]
[ Карточка ]
При этом никаких breakpoint'ов задавать не нужно.
HTML остаётся максимальн | 672 |
| 10 |  Как обрезать длинный текст до нескольких строк без JS
Если в карточках, списках или превью текст бывает разной длины, блоки быстро начинают выглядеть неровно.
Один заголовок занимает одну строку, другой — четыре, и вся сетка «прыгает».
Исправить это можно средствами CSS — без JavaScript и ручного обрезания текста.
.title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
Теперь текст будет отображаться максимум в две строки, а всё лишнее автоматически скроется.
Например:
<h3 class="title">
Очень длинный заголовок карточки, который обычно занимает несколько строк
</h3>
Если нужно оставить три строки, достаточно изменить значение:
.title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
А если высота блока должна всегда оставаться одинаковой, можно дополнительно задать line-height и min-height:
.title {
line-height: 24px;
min-height: 48px;
display: -webkit-box;
-webki | 716 |
| 11 |  Как сделать отступ при скролле к якорю без JS
Если на сайте есть фиксированная шапка, переход по якорной ссылке часто выглядит не очень: нужный заголовок прокручивается к самому верху страницы и оказывается прямо под header.
Исправить это можно одной CSS-свойством — без JavaScript и дополнительных вычислений.
.section {
scroll-margin-top: 80px;
}
Теперь при переходе к элементу:
<a href="#contacts">Контакты</a>
<section id="contacts" class="section">
...
</section>
браузер оставит сверху указанный отступ и заголовок не спрячется за фиксированной шапкой.
Если хочется ещё и плавную прокрутку, добавьте:
html {
scroll-behavior: smooth;
}
Такой подход особенно удобен для лендингов, документации, FAQ и страниц с навигацией по разделам.
Никаких обработчиков click, вычисления координат через getBoundingClientRect() и ручного window.scrollTo() | 761 |
| 12 |  Как ограничить текст несколькими строками без JS
Длинные описания в карточках часто ломают сетку: одна карточка получается заметно выше остальных.
Обрезать такой текст можно средствами CSS — без JavaScript и ручного сокращения текста.
.card-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
В этом примере браузер покажет максимум 3 строки, а всё остальное содержимое будет скрыто.
Если нужна всего одна строка, можно использовать более простой вариант:
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
В результате слишком длинный заголовок аккуратно обрежется и получит многоточие.
Удобно для карточек товаров, списков, превью статей и любых интерфейсов, где важно сохранить одинаковую высоту элементов. | 729 |
| 13 |  Как сделать перенос заголовков аккуратнее без <br>
Длинные заголовки часто переносятся неудачно: первая строка получается слишком длинной, а во второй остаётся одно-два слова.
Вместо ручной расстановки <br> можно использовать CSS-свойство text-wrap: balance
.hero-title {
max-width: 18ch;
text-wrap: balance;
}
Браузер перераспределит слова между строками так, чтобы их длина выглядела более сбалансированной.
Для обычного текста можно использовать другое значение:
.article-text {
text-wrap: pretty;
}
pretty старается улучшить переносы в абзаце и уменьшить вероятность появления короткого одинокого слова в последней строке.
Пример:
.card-title {
font-size: 32px;
line-height: 1.15;
text-wrap: balance;
}
text-wrap: balance особенно полезен для крупных заголовков, карточек, баннеров, модальных окон и блоков с ограниченной шириной.
Так текст выглядит аккуратнее на разных экранах, а добавлять ручные переносы и отдельные версии заголовка больше не нужно. | 718 |
| 14 |  Как менять родительский элемент с помощью CSS :has()
Раньше CSS не позволял выбрать родительский элемент в зависимости от того, что находится внутри него. Для этого приходилось добавлять JavaScript или отдельные классы.
Теперь можно использовать псевдокласс :has().
Например, подсветим поле формы, если внутри него есть элемент с ошибкой:
.form-field:has(.error) {
border-color: #ff4d67;
background: #fff3f5;
}
Или изменим карточку, если внутри находится выбранный чекбокс:
.card:has(input:checked) {
border-color: #3185ff;
transform: translateY(-2px);
}
Также :has() удобно использовать для проверки соседних элементов:
.item:has(+ .item.active) {
opacity: 0.6;
}
Главное преимущество — можно строить интерактивные состояния интерфейса без лишних классов и небольших JavaScript-обработчиков.
Используйте :has() для форм, карточек, меню, фильтров и компонентов, состояние которых зависит от вложенного содержимого. | 744 |
| 15 |  Как адаптировать компонент по ширине контейнера, а не экрана
Обычные media-запросы ориентируются на ширину окна браузера. Но один и тот же компонент может находиться в широкой секции, узком сайдбаре или сетке карточек.
Для таких случаев в CSS есть контейнерные запросы.
Сначала нужно объявить родительский элемент контейнером:
.card-wrapper {
container-type: inline-size;
}
После этого стили компонента можно менять в зависимости от ширины именно этого контейнера:
.card {
display: grid;
grid-template-columns: 1fr;
}
@container (min-width: 560px) {
.card {
grid-template-columns: 160px 1fr;
}
}
Теперь карточка сама переключит компоновку, когда для неё появится достаточно места — независимо от ширины всего экрана.
Контейнерные запросы особенно удобны для карточек, виджетов, сайдбаров и переиспользуемых компонентов в больших интерфейсах. | 747 |
| 16 |  Как сделать адаптивный размер текста без десятков media-запросов
В CSS есть функция clamp(), которая позволяет задать минимальный, адаптивный и максимальный размер элемента.
Например:
.title {
font-size: clamp(24px, 4vw, 64px);
}
Первое значение — минимальный размер текста, второе меняется вместе с шириной экрана, а третье ограничивает максимальный размер.
Таким способом можно адаптировать не только шрифты, но и отступы, ширину блоков, расстояние между элементами и размеры кнопок.
.section {
padding: clamp(20px, 5vw, 80px);
}
В результате интерфейс плавно подстраивается под экран, а количество отдельных media-запросов заметно уменьшается. | 775 |
| 17 |  Простой способ найти первых клиентов для проекта с помощью Codex
Появился полезный скил для Codex, который помогает найти первых клиентов для вашего проекта.
Достаточно дать ссылку на продукт или просто описать идею. Агент сам определит целевую аудиторию, найдет людей и компании с похожими проблемами, оценит, насколько им подойдет ваш продукт, и подготовит готовый список со ссылками на источники.
В конце вы получите HTML-отчет с потенциальными клиентами и черновиками первых сообщений.
dailyprompts.ru | 625 |
| 18 |  12-летняя девочка запустила ИИ-стартап: она разработала бота-ассистента, который помогает малому бизнесу удерживать клиентов.
Мана Джампала написала сервис через Claude. Бот успешно прошел первые тесты. Через два года она планирует выйти на акселераторы Y Combinator или a16z, а следом — на венчурные фонды.
Одна проблема — возраст. Сервис Маны нравится онлайн-бизнесу, но на живых питчах ее не воспринимают всерьез. | 738 |
| 19 |  Grok 4.5 вышел в открытый доступ и обошел Claude Opus 4.8
xAI выпустила самую сильную свою модель и впервые заточила её не только под код, но и под длинные задачи с инструментами в дата-сайенс, финансах и юридической работе.
Внутри mixture-of-experts на новом фундаменте V9 с 1.5 триллиона параметров. Обучали совместно с командой Cursor на триллионах токенов реальных сессий разработчиков.
Маск называет её моделью класса Opus, только быстрее и дешевле. На графике при анонсе Grok 4.5 обходит Claude Opus 4.8 на нескольких ключевых бенчмарках.
Базовая версия стоит 2 доллара за миллион входных токенов и 6 за миллион выходных, у Opus 4.8 те же цифры 5 и 25.
Модель уже работает в Cursor на всех тарифах, в Grok Build и через консоль SpaceXAI.
dailyprompts.ru | 660 |
| 20 |  Как оплачивать ChatGPT, Midjourney и Claude без посредников
Еще недавно зарубежные подписки были настоящей проблемой. Нужно было искать посредников, просить кого-то оплатить сервис или использовать сложные схемы.
Сейчас всё проще. С помощью @ можно выпустить виртуальную карту и оплачивать популярные сервисы напрямую.
Через ZARUB можно оплачивать ChatGPT, Claude, Perplexity, Midjourney, Suno, Wavespeed и множество других нейросетей и сервисов.
Почему пользователи выбирают ZARUB?
— Карта выпускается за несколько секунд прямо в боте. Не нужно заполнять анкеты и ждать подтверждений.
— Нет скрытых комиссий и непонятных переплат. Оплата проходит по официальному курсу.
— Поддерживается 3D-Secure. Это позволяет оплачивать сервисы, где требуется дополнительное подтверждение платежа.
—Можно создавать несколько карт под разные задачи. Например, одну для рекламы, другую для подписок, третью для покупок.
— ZARUB поддерживает регулярные платежи. Подключили подписку один раз и дальше сервис списывает оплату автоматически.
— Карты работают с мультивалютными платежами. Оплата в долларах, евро или другой валюте проходит с автоматической конвертацией.
Также через ZARUB можно покупать цифровые товары, игровые валюты, подписки и другие онлайн-сервисы.
Больше не нужно каждый месяц искать человека, который поможет оплатить подписку.
Достаточно открыть @, пополнить баланс через СБП или криптовалюту и выпустить виртуальную карту.
Один бот для оплаты всего, что нужно в современном интернете. | 533 |
