Фронтенд Гайд
Ir al canal en Telegram
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6
Mostrar más7 650
Suscriptores
-224 horas
-227 días
-4630 días
Cargando datos
Canales Similares
Nube de Etiquetas
Menciones Entrantes y Salientes
---
---
---
---
---
---
Atraer Suscriptores
octubre '26oct '26
octubre '26
+46
en 0 canales
septiembre '26
+46
en 0 canales
Get PRO
agosto '26
+88
en 0 canales
Get PRO
julio '26
+51
en 1 canales
Get PRO
junio '26
+1 646
en 4 canales
Get PRO
mayo '260
en 0 canales
Get PRO
abril '26
+4
en 0 canales
Get PRO
marzo '26
+6
en 1 canales
Get PRO
febrero '26
+6
en 3 canales
Get PRO
enero '26
+10
en 1 canales
Get PRO
diciembre '25
+72
en 9 canales
Get PRO
noviembre '25
+55
en 0 canales
Get PRO
octubre '25
+56
en 0 canales
Get PRO
septiembre '25
+51
en 0 canales
Get PRO
agosto '25
+65
en 0 canales
Get PRO
julio '25
+44
en 0 canales
Get PRO
junio '25
+44
en 0 canales
Get PRO
mayo '25
+71
en 0 canales
Get PRO
abril '25
+82
en 0 canales
Get PRO
marzo '25
+56
en 0 canales
Get PRO
febrero '25
+114
en 0 canales
Get PRO
enero '25
+102
en 0 canales
Get PRO
diciembre '24
+189
en 0 canales
Get PRO
noviembre '24
+166
en 1 canales
Get PRO
octubre '24
+201
en 0 canales
Get PRO
septiembre '24
+156
en 0 canales
Get PRO
agosto '24
+227
en 0 canales
Get PRO
julio '24
+217
en 0 canales
Get PRO
junio '24
+254
en 0 canales
Get PRO
mayo '24
+301
en 0 canales
Get PRO
abril '24
+332
en 0 canales
Get PRO
marzo '24
+388
en 0 canales
Get PRO
febrero '24
+282
en 0 canales
Get PRO
enero '24
+162
en 0 canales
Get PRO
diciembre '23
+263
en 6 canales
Get PRO
noviembre '23
+951
en 31 canales
Get PRO
octubre '23
+38
en 1 canales
Get PRO
septiembre '23
+356
en 0 canales
Get PRO
agosto '23
+542
en 0 canales
Get PRO
julio '23
+13
en 0 canales
Get PRO
junio '23
+15
en 0 canales
Get PRO
mayo '23
+27
en 0 canales
Get PRO
abril '23
+81
en 0 canales
Get PRO
marzo '23
+309
en 0 canales
Get PRO
febrero '23
+15
en 0 canales
Get PRO
enero '23
+33
en 0 canales
Get PRO
diciembre '22
+354
en 0 canales
Get PRO
noviembre '22
+1 251
en 0 canales
Get PRO
octubre '22
+35
en 0 canales
Get PRO
septiembre '22
+11
en 0 canales
Get PRO
agosto '22
+22
en 0 canales
Get PRO
julio '22
+69
en 0 canales
Get PRO
junio '22
+30
en 0 canales
Get PRO
mayo '22
+75
en 0 canales
Get PRO
abril '22
+60
en 0 canales
Get PRO
marzo '22
+630
en 0 canales
Get PRO
febrero '22
+470
en 0 canales
Get PRO
enero '22
+1 403
en 0 canales
Get PRO
diciembre '21
+3 816
en 0 canales
| Fecha | Crecimiento de Suscriptores | Menciones | Canales | |
| 27 octubre | +1 | |||
| 26 octubre | +1 | |||
| 25 octubre | +1 | |||
| 24 octubre | 0 | |||
| 23 octubre | 0 | |||
| 22 octubre | +2 | |||
| 21 octubre | +1 | |||
| 20 octubre | +1 | |||
| 19 octubre | +2 | |||
| 18 octubre | +8 | |||
| 17 octubre | +2 | |||
| 16 octubre | +3 | |||
| 15 octubre | +2 | |||
| 14 octubre | +4 | |||
| 13 octubre | +2 | |||
| 12 octubre | +1 | |||
| 11 octubre | +2 | |||
| 10 octubre | +1 | |||
| 09 octubre | +1 | |||
| 08 octubre | +2 | |||
| 07 octubre | 0 | |||
| 06 octubre | +1 | |||
| 05 octubre | +2 | |||
| 04 octubre | +2 | |||
| 03 octubre | +2 | |||
| 02 octubre | 0 | |||
| 01 octubre | +2 |
Publicaciones del Canal
👩💻 Управляем резиновым ресайзом одной строкой!
Пользователь может растянуть
<textarea> как угодно, и это часто ломает layout, вылазит за контейнер, разваливает сетку, сдвигает кнопку отправки:
textarea {
resize: both;
}
Если ресайз в интерфейсе не предусмотрен, запретим его явно:
textarea {
resize: none;
}
Нужен только вертикальный ресайз (самый безопасный для формы)? Тогда так:
textarea {
resize: vertical;
}
🔥 Такая мелкая деталь, позволяет сохранять целостность интерфейса.| 2 |  12-летняя девочка запустила ИИ-стартап: она разработала бота-ассистента, который помогает малому бизнесу удерживать клиентов.
Мана Джампала написала сервис через Claude. Бот успешно прошел первые тесты. Через два года она планирует выйти на акселераторы Y Combinator или a16z, а следом — на венчурные фонды.
Одна проблема — возраст. Сервис Маны нравится онлайн-бизнесу, но на живых питчах ее не воспринимают всерьез. | 716 |
| 3 |  Агенты научились работать с видео: появился скилл, который позволяет ИИ посмотреть любой ролик — с картинкой и звуком.
Поможет анализировать длинные лекции с YouTube, трендовые ролики из TikTok или фильмы. Агент будет «читать» каждый кадр по таймкодам.
Работает с Claude Code, Cursor, Codex, Gemini и десятками других агентов. Забираем тут. | 782 |
| 4 |  👩💻 Управляем резиновым ресайзом одной строкой!
Пользователь может растянуть <textarea> как угодно, и это часто ломает layout, вылазит за контейнер, разваливает сетку, сдвигает кнопку отправки:
textarea {
resize: both;
}
Если ресайз в интерфейсе не предусмотрен, запретим его явно:
textarea {
resize: none;
}
Нужен только вертикальный ресайз (самый безопасный для формы)? Тогда так:
textarea {
resize: vertical;
}
🔥 Такая мелкая деталь, позволяет сохранять целостность интерфейса. | 764 |
| 5 |  Как сделать блок на всю высоту экрана без проблем с 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, когда панели браузера занимают бол | 739 |
| 6 |  📂 Напоминалка для работы с JavaScript!
Например, let и const используются для корректного объявления переменных, map и forEach — для обработки массивов, а includes и split помогают при работе со строками.
На картинке — базовые конструкции языка и самые часто используемые методы, которые стоит держать под рукой.
Сохрани, чтобы не забыть! | 775 |
| 7 |  👩💻 cool hover card — Эффект наведения на карточку с плавным размытием изображения
Сделано на CSS
🔗 Открыть код | 766 |
| 8 |  👩💻 Profile Card UI — Стильная карточка-портфолио с анимированными кнопками.
Сделан на SVG, SCSS и JS
🔗 Открыть код | 841 |
| 9 |  ❓ Shallow vs Deep Copy: как не сломать данные?
Когда мы копируем объекты в JS, важно понимать, «зацепят» ли изменения оригинала нашу копию.
⤴️ Shallow Copy (Поверхностная)
Копирует только верхний уровень. Если внутри есть вложенные объекты, то копия будет ссылаться на те же участки памяти, что и оригинал.
Как сделать:
[...arr], {...obj} или Object.assign().
Недостаток: Изменишь вложенный объект в копии — он изменится и в оригинале.
⤵️ Deep Copy (Глубокая)
Создает полную независимую копию всех уровней вложенности.
Как сделать:
structuredClone(obj) — современный стандарт (рекомендуется в 2026!).
JSON.parse(JSON.stringify(obj)) — старый костыль (не копирует методы и Date).
Библиотеки типа lodash (cloneDeep).
const user = { name: "Ivan", skills: ["JS"] };
const copy = { ...user }; // Поверхностная копия
copy.skills.push("React");
console.log(user.skills); // ["JS", "React"] — Ой! Оригинал тоже изменился. | 820 |
| 10 |  Вы видели, что творит ИИ 👇
Нейросети уже умеют генерить такие фото и видео, что их не отличить от настоящей съёмки. Максимум реализма — минимум затрат. Достаточно знать нужные инструменты и уметь писать подходящие запросы.
🔍 Промпт, для этого видео, и топ-10 лучших бесплатных нейросетей для генерации контента — по кнопке ниже.
Этот список поможет вам генерировать реалистичные фото и видео за пару минут!
Забирай бесплатно ТУТ | 783 |
| 11 |  Как сделать адаптивный размер текста без десятков media-запросов
В CSS есть функция clamp(), которая позволяет задать минимальный, адаптивный и максимальный размер элемента.
Например:
.title {
font-size: clamp(24px, 4vw, 64px);
}
Первое значение — минимальный размер текста, второе меняется вместе с шириной экрана, а третье ограничивает максимальный размер.
Таким способом можно адаптировать не только шрифты, но и отступы, ширину блоков, расстояние между элементами и размеры кнопок.
.section {
padding: clamp(20px, 5vw, 80px);
}
В результате интерфейс плавно подстраивается под экран, а количество отдельных media-запросов заметно уменьшается. | 772 |
| 12 |  Китай обсуждает закрытие доступа к своим топовым ИИ моделям для пользователей за пределами страны
По данным Reuters, Министерство коммерции за последний месяц провело серию встреч с Alibaba, ByteDance и стартапом Z.ai. Речь идёт о самых мощных моделях, включая те, что ещё не выпущены. Ограничения могут коснуться и закрытых моделей, и открытых весов, тех самых, что можно скачать и запустить у себя на компьютере.
Под удар попадают Qwen от Alibaba, Doubao от ByteDance и GLM-5.2 от Z.ai. Как именно это будет работать пока неясно, но на майском круглом столе китайские юристы предложили трёхуровневую схему. Базовые открытые инструменты, простое уведомление регулятору. Продвинутые технологии, обязательная проверка на безопасность. Самые сильные фронтир-модели, только внутренний рынок или полный запрет на публикацию. | 832 |
| 13 | Как сделать адаптивный размер текста без десятков media-запросов
В CSS есть функция clamp(), которая позволяет задать минимальный, адаптивный и максимальный размер элемента.
Например:
.title {
font-size: clamp(24px, 4vw, 64px);
}
Первое значение — минимальный размер текста, второе меняется вместе с шириной экрана, а третье ограничивает максимальный размер.
Таким способом можно адаптировать не только шрифты, но и отступы, ширину блоков, расстояние между элементами и размеры кнопок.
.section {
padding: clamp(20px, 5vw, 80px);
}
В результате интерфейс плавно подстраивается под экран, а количество отдельных media-запросов заметно уменьшается. | 830 |
| 14 | 🎥 Как внедрить адаптивное видео без YouTube и Vimeo?
Вместо <iframe> от видеоплатформ можно встроить <video> с полной адаптивностью и контролем. Что важно:
✅ Преимущества:
— Полный контроль над стилями и качеством
— Поддержка вертикального и горизонтального видео
— Нет рекламы и региональных блокировок
— Лучше интеграция с CMS
📦 Сжимаем видео:
— Используй Handbrake
— Форматы: WebM (в приоритете) + MP4
— Включи Web Optimized
— RF 30 для MP4, WebM — примерно на 25% от максимального качества
📱 Адаптация под ориентацию:
<video controls playsinline preload="none">
<source src="video-vert.webm" media="(max-aspect-ratio: 1/1)">
<source src="video-horiz.webm">
</video>
📐 Избегай смещений верстки:
Используй aspect-ratio через CSS-переменные:
video {
aspect-ratio: var(--aspect-ratio, 9 / 16);
}
@media (min-aspect-ratio: 1/1) {
video {
--aspect-ratio: 16 / 9;
}
}
🔄 Обновление при fullscreen и resize:
const update = (video) => {
clearTimeout(debounce);
debounce = setTimeout(() => {
const t = video.currentTime;
video.load();
video.currentTime = t;
}, 50);
};
🖼 Постеры (заставки):
— Один poster для всех разрешений
— Лучше: сжато, но в высоком разрешении
— Альтернатива: responsive background image + скрытое видео
🔇 Субтитры:
<track src="subs.vtt" kind="subtitles" srclang="ru" label="Русский">
📉 Оптимизация загрузки:
— preload="none"
— loading="lazy" пока не работает для <video>
💡 Даже 2 файла (горизонтальный + вертикальный) с WebM дадут большой прирост UX и скорости ⚡️ | 833 |
| 15 |  Держите полезную CLI-утилиту — npkill, предназначенную для удаления всех папок node_modules в проектах.
Позволяет освободить значительное количество места на диске
Запускаешь команду:
npx npkill
Дальше, просто нажимаешь [Пробел], чтобы удалить те папки, которые больше не используешь
Удобно ещё и то, что она показывает, сколько дней назад была последняя модификация | 829 |
| 16 |  VPN, который можно включить один раз — и больше о нём не думать.
Надоело постоянно переключать VPN туда-сюда?
Включил ради одного сервиса — перестал нормально работать банк. Выключил — снова не открывается нужный сайт.
В Архангел VPN это решили автоматически добавив белые списки!
И всё это одновременно.
Ничего вручную переключать не нужно.
Плюс внутри уже есть:
— встроенный AdBlock — меньше рекламы и трекеров
— быстрые серверы
— подключение за несколько минут
— удобное управление прямо из Telegram
— оплата картой, СБП, Криптовалютой или Telegram Stars
— пробный доступ перед покупкой
И главное — без дорогих подписок по 300–500 ₽ в месяц.
Тарифы Архангел VPN — от 49 ₽
А по промокоду FORNT5 · скидка 5%
То есть полноценный VPN можно получить дешевле чашки кофе, без сложных настроек и скрытых условий.
Оплатили → нажали «Подключить» → готово.
Попробуйте Архангел VPN и почувствуйте разницу сами.
👉 @arhangel29bot
Архангел VPN — включил и забыл! | 889 |
| 17 |  Новую капчу Google уже научились обходить
Капчу с проверкой через камеру удалось пройти с помощью обычных фотографий, открытых на экране
— Вместо выбора картинок теперь нужно показать жест в камеру
— Оказалось, что системе достаточно изображения с экрана — живой человек не обязателен
— Из-за этого новую защиту удалось обойти гораздо быстрее, чем ожидалось
Надёжно, как швейцарские часы | 893 |
| 18 |  Совет по CSS: Единица измерения turn
Иногда проще задать вращение с помощью единицы turn вместо deg, особенно когда нужно указать значение больше 360 градусов (1 turn = 360 deg) | 925 |
| 19 |  😍 QuickRef — компактная шпаргалка по JavaScript!
Это удобный справочник, где собраны ключевые конструкции, методы и синтаксис JS на одной странице. Здесь есть всё необходимое: переменные, функции, операторы, строки, массивы и базовые примеры кода для быстрого ориентирования. Формат максимально сжатый и практичный.
📌 Оставляю ссылочку: quickref.me | 978 |
| 20 |  Sakana AI выпустила Fugu, модель, которая внутри сама собирает команду из других ИИ под вашу задачу
Снаружи это один API, как у любого чат-бота. Внутри Fugu сама решает, справится в одиночку или позвать сильных специалистов из своего пула, распределяет задачи, проверяет ответы и собирает итог.
Версий две. Обычная Fugu для повседневной работы и Fugu Ultra для сложных многошаговых задач. Обе подключаются через один OpenAI совместимый API.
По бенчмаркам Fugu Ultra идет вровень с Anthropic Fable 5 и Mythos Preview на инженерных, научных и рассуждающих тестах. На практических задачах обходит Gemini 3.1 Pro, Opus 4.8 и GPT 5.5.
На код ревью Fugu Ultra находит десятки проблем там, где другие модели видят три или четыре. Хорошо держит роль агента в долгих сессиях, не сбивается со своей задачи. По одному короткому заданию способна провести полный аудит безопасности с отчетом и не выйти за рамки.
Главная фишка не только в качестве. Fugu не зависит от одного поставщика. | 922 |
