Фронтенд Гайд
رفتن به کانال در Telegram
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6
نمایش بیشتر7 687
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-87 روز
-4730 روز
در حال بارگیری داده...
کانال‌های مشابه
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '26
+9
در 0 کانال‌ها
سپتامبر '26
+46
در 0 کانال‌ها
Get PRO
اوت '26
+88
در 0 کانال‌ها
Get PRO
ژوئیه '26
+51
در 1 کانال‌ها
Get PRO
ژوئن '26
+1 646
در 4 کانال‌ها
Get PRO
مه '260
در 0 کانال‌ها
Get PRO
آوریل '26
+4
در 0 کانال‌ها
Get PRO
مارس '26
+6
در 1 کانال‌ها
Get PRO
فوریه '26
+6
در 3 کانال‌ها
Get PRO
ژانویه '26
+10
در 1 کانال‌ها
Get PRO
دسامبر '25
+72
در 9 کانال‌ها
Get PRO
نوامبر '25
+55
در 0 کانال‌ها
Get PRO
اکتبر '25
+56
در 0 کانال‌ها
Get PRO
سپتامبر '25
+51
در 0 کانال‌ها
Get PRO
اوت '25
+65
در 0 کانال‌ها
Get PRO
ژوئیه '25
+44
در 0 کانال‌ها
Get PRO
ژوئن '25
+44
در 0 کانال‌ها
Get PRO
مه '25
+71
در 0 کانال‌ها
Get PRO
آوریل '25
+82
در 0 کانال‌ها
Get PRO
مارس '25
+56
در 0 کانال‌ها
Get PRO
فوریه '25
+114
در 0 کانال‌ها
Get PRO
ژانویه '25
+102
در 0 کانال‌ها
Get PRO
دسامبر '24
+189
در 0 کانال‌ها
Get PRO
نوامبر '24
+166
در 1 کانال‌ها
Get PRO
اکتبر '24
+201
در 0 کانال‌ها
Get PRO
سپتامبر '24
+156
در 0 کانال‌ها
Get PRO
اوت '24
+227
در 0 کانال‌ها
Get PRO
ژوئیه '24
+217
در 0 کانال‌ها
Get PRO
ژوئن '24
+254
در 0 کانال‌ها
Get PRO
مه '24
+301
در 0 کانال‌ها
Get PRO
آوریل '24
+332
در 0 کانال‌ها
Get PRO
مارس '24
+388
در 0 کانال‌ها
Get PRO
فوریه '24
+282
در 0 کانال‌ها
Get PRO
ژانویه '24
+162
در 0 کانال‌ها
Get PRO
دسامبر '23
+263
در 6 کانال‌ها
Get PRO
نوامبر '23
+951
در 31 کانال‌ها
Get PRO
اکتبر '23
+38
در 1 کانال‌ها
Get PRO
سپتامبر '23
+356
در 0 کانال‌ها
Get PRO
اوت '23
+542
در 0 کانال‌ها
Get PRO
ژوئیه '23
+13
در 0 کانال‌ها
Get PRO
ژوئن '23
+15
در 0 کانال‌ها
Get PRO
مه '23
+27
در 0 کانال‌ها
Get PRO
آوریل '23
+81
در 0 کانال‌ها
Get PRO
مارس '23
+309
در 0 کانال‌ها
Get PRO
فوریه '23
+15
در 0 کانال‌ها
Get PRO
ژانویه '23
+33
در 0 کانال‌ها
Get PRO
دسامبر '22
+354
در 0 کانال‌ها
Get PRO
نوامبر '22
+1 251
در 0 کانال‌ها
Get PRO
اکتبر '22
+35
در 0 کانال‌ها
Get PRO
سپتامبر '22
+11
در 0 کانال‌ها
Get PRO
اوت '22
+22
در 0 کانال‌ها
Get PRO
ژوئیه '22
+69
در 0 کانال‌ها
Get PRO
ژوئن '22
+30
در 0 کانال‌ها
Get PRO
مه '22
+75
در 0 کانال‌ها
Get PRO
آوریل '22
+60
در 0 کانال‌ها
Get PRO
مارس '22
+630
در 0 کانال‌ها
Get PRO
فوریه '22
+470
در 0 کانال‌ها
Get PRO
ژانویه '22
+1 403
در 0 کانال‌ها
Get PRO
دسامبر '21
+3 816
در 0 کانال‌ها
| تاریخ | رشد مشترکین | اشارات | کانال‌ها | |
| 06 اکتبر | +1 | |||
| 05 اکتبر | +2 | |||
| 04 اکتبر | +2 | |||
| 03 اکتبر | +2 | |||
| 02 اکتبر | 0 | |||
| 01 اکتبر | +2 |
پست‌های کانال
VPN, который можно включить один раз — и больше о нём не думать.
Надоело постоянно переключать VPN туда-сюда?
Включил ради одного сервиса — перестал нормально работать банк. Выключил — снова не открывается нужный сайт.
В Архангел VPN это решили автоматически добавив белые списки!
И всё это одновременно.
Ничего вручную переключать не нужно.
Плюс внутри уже есть:
— встроенный AdBlock — меньше рекламы и трекеров
— быстрые серверы
— подключение за несколько минут
— удобное управление прямо из Telegram
— оплата картой, СБП, Криптовалютой или Telegram Stars
— пробный доступ перед покупкой
И главное — без дорогих подписок по 300–500 ₽ в месяц.
Тарифы Архангел VPN — от 49 ₽
А по промокоду
FORNT5 · скидка 5%
То есть полноценный VPN можно получить дешевле чашки кофе, без сложных настроек и скрытых условий.
Оплатили → нажали «Подключить» → готово.
Попробуйте Архангел VPN и почувствуйте разницу сами.
👉 @arhangel29bot
Архангел VPN — включил и забыл!| 2 |  Новую капчу Google уже научились обходить
Капчу с проверкой через камеру удалось пройти с помощью обычных фотографий, открытых на экране
— Вместо выбора картинок теперь нужно показать жест в камеру
— Оказалось, что системе достаточно изображения с экрана — живой человек не обязателен
— Из-за этого новую защиту удалось обойти гораздо быстрее, чем ожидалось
Надёжно, как швейцарские часы | 468 |
| 3 |  Совет по CSS: Единица измерения turn
Иногда проще задать вращение с помощью единицы turn вместо deg, особенно когда нужно указать значение больше 360 градусов (1 turn = 360 deg) | 632 |
| 4 |  😍 QuickRef — компактная шпаргалка по JavaScript!
Это удобный справочник, где собраны ключевые конструкции, методы и синтаксис JS на одной странице. Здесь есть всё необходимое: переменные, функции, операторы, строки, массивы и базовые примеры кода для быстрого ориентирования. Формат максимально сжатый и практичный.
📌 Оставляю ссылочку: quickref.me | 720 |
| 5 |  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 не зависит от одного поставщика. | 698 |
| 6 |  Опыт в своей области важнее умения программировать
Anthropic опубликовала исследование по 400 тысячам сессий Claude Code от 235 тысяч пользователей.
Главный вывод. В типичной сессии человек принимает 70% решений о том, что делать, а Claude принимает 80% решений о том, как это делать. Человек ставит задачу, ИИ её реализует.
Эксперты в своей области получают от инструмента значительно больше. У новичка каждый промпт запускает примерно 5 действий Claude и 600 слов вывода. У эксперта те же метрики равны 12 действиям и 3200 словам. Разница в 5 раз, при этом речь не про знание кода, а про понимание своей предметной области.
По успешности сессий картина схожая. Новички добиваются подтверждённого результата в 15% случаев, пользователи среднего уровня и выше в 28-33%. Но самый большой скачок происходит при переходе от новичка к среднему уровню, а не от среднего к эксперту. | 729 |
| 7 |  Anthropic выложили бесплатную библиотеку промптов для Claude
В Prompt Library собраны готовые промпты для Claude Code с объяснениями, почему они работают и как адаптировать их под свои задачи.
— Поиск уязвимостей и анализ безопасности
— Отладка кода и исправление ошибок
— Автоматизация задач и рабочих процессов
— Для каждого промпта есть рекомендации по использованию
Бесплатно 🚀
Забираем тут. | 716 |
| 8 |  Summer AI Conf | ИИ конференция про работу с визуальным контентом
9 июля Phygital+ проводит бесплатную онлайн конференцию про реальные кейсы внедрения нейросетей в дизайн, маркетинг и бизнес-процессы. Как перестать зависеть от фотостоков и уложить производство контента в 1 день вместо недели?
Ключевые спикеры и темы:
X5 Tech, Чижик — ИИ-видео для SMM и мерча.
DEPOT — ИИ в спецпроектах и HR-брендинге.
KANZLER — кампании без съемок под каждую гипотезу.
Альфа банк — живой кейс команды про внедрении ИИ инструментов.
ИВИ — ускорение продакшна для стриминга. | 720 |
| 9 |  Как сделать блок на всю высоту экрана без проблем с 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, когда панели браузера занимают бол | 671 |
| 10 |  12-летняя девочка запустила ИИ-стартап: она разработала бота-ассистента, который помогает малому бизнесу удерживать клиентов.
Мана Джампала написала сервис через Claude. Бот успешно прошел первые тесты. Через два года она планирует выйти на акселераторы Y Combinator или a16z, а следом — на венчурные фонды.
Одна проблема — возраст. Сервис Маны нравится онлайн-бизнесу, но на живых питчах ее не воспринимают всерьез. | 748 |
| 11 |  Как менять родительский элемент с помощью 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() для форм, карточек, меню, фильтров и компонентов, состояние которых зависит от вложенного содержимого. | 751 |
| 12 |  Xiaomi MiMo-V2.6 Pro: новая открытая модель для генерации 3D и сложных ИИ-агентов.
Компания Xiaomi представила новое поколение своих мультимодальных разработок — серию MiMo-V2.6. В линейку вошли две открытые модели: флагманская MiMo-V2.6 Pro и облегченная версия Flash. Этот релиз стал значимым событием для индустрии, так как старшая модель продемонстрировала рекордные показатели производительности, опередив конкурентов в сегменте Open Source и вплотную приблизившись к закрытым проприетарным решениям в специфических тестах на агентность. | 777 |
| 13 |  Как адаптировать компонент по ширине контейнера, а не экрана
Обычные 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;
}
}
Теперь карточка сама переключит компоновку, когда для неё появится достаточно места — независимо от ширины всего экрана.
Контейнерные запросы особенно удобны для карточек, виджетов, сайдбаров и переиспользуемых компонентов в больших интерфейсах. | 830 |
| 14 |  ⏳ Как дождаться завершения всех промисов
Promise.all() прерывает ожидание, если хотя бы одна операция завершается ошибкой.
Когда нужны результаты всех задач, используйте Promise.allSettled().
Создаём массив промисов:
const tasks = [
loadUser(),
loadPosts(),
loadStats()
];
Дожидаемся завершения каждой операции:
const results =
await Promise.allSettled(tasks);
Каждый результат содержит статус:
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log(result.value);
} else {
console.error(result.reason);
}
});
Одна ошибка не остановит остальные задачи — вы получите информацию обо всех успешных и неуспешных операциях.
#javascript #frontend #программирование | 751 |
| 15 |  🖼 Ленивая загрузка изображений без JavaScript
Если на странице много изображений, необязательно загружать их все сразу.
Добавьте атрибут loading="lazy":
<img
src="photo.webp"
loading="lazy"
alt="Описание"
>
Браузер отложит загрузку изображения, пока пользователь не приблизится к нему при прокрутке.
Обязательно указывайте размеры:
<img
src="photo.webp"
width="800"
height="450"
loading="lazy"
alt="Описание"
>
Это заранее резервирует место и предотвращает скачки контента во время загрузки.
Не используйте loading="lazy" для главного изображения в первом экране — оно должно загружаться сразу.
Подходит для каталогов, галерей, статей и длинных страниц.
#html #frontend #оптимизация | 725 |
| 16 |  ↔️ Адаптивные отступы для любого языка
Вместо физических направлений left, right, top и bottom в CSS можно использовать логические свойства.
Горизонтальные отступы:
.card {
margin-inline: auto;
padding-inline: 24px;
}
Вертикальные отступы:
.card {
margin-block: 32px;
padding-block: 16px;
}
Также доступны отдельные стороны:
.card {
margin-inline-start: 20px;
padding-block-end: 24px;
}
Главное преимущество — браузер учитывает направление текста.
В интерфейсе LTR начало строки находится слева, а в RTL — справа. Поэтому макет автоматически адаптируется под нужный язык.
#css #frontend #локализация | 780 |
| 17 |  📑 Глубокая копия объекта в JavaScript
Оператор расширения создаёт только поверхностную копию объекта:
const copy = { ...original };
Вложенные объекты при этом продолжают ссылаться на одни и те же данные.
Для создания независимой глубокой копии используйте structuredClone():
const copy = structuredClone(original);
Теперь вложенные свойства копии можно изменять отдельно:
copy.user.name = 'Анна';
console.log(original.user.name);
Значение внутри original останется прежним.
structuredClone() поддерживает объекты, массивы, Map, Set, даты и циклические ссылки.
При этом функции и DOM-элементы таким способом скопировать нельзя.
#javascript #frontend #разработка | 776 |
| 18 |  📐 Как сохранить пропорции блока
Чтобы видео, изображение или карточка сохраняли правильную форму при изменении ширины, используйте CSS-свойство aspect-ratio.
Например, создадим блок с пропорциями 16:9:
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
Высоту указывать не нужно — браузер рассчитает её автоматически.
Чтобы изображение полностью заполняло блок:
.video img {
width: 100%;
height: 100%;
object-fit: cover;
}
Если ширина контейнера изменится, его высота подстроится с сохранением заданных пропорций.
Подходит для видео, изображений, карточек, баннеров и превью.
Сохраняйте, чтобы не потерять 📎
#css #frontend #вебразработка | 781 |
| 19 |  👁 Как отследить появление элемента на экране
IntersectionObserver сообщает, когда элемент входит в область видимости пользователя или покидает её.
Создаём наблюдатель:
const observer = new IntersectionObserver(([entry]) => {
entry.target.classList.toggle(
'visible',
entry.isIntersecting
);
});
Подключаем нужный элемент:
const card = document.querySelector('.card');
observer.observe(card);
Теперь можно запускать CSS-анимацию при появлении карточки:
.card {
opacity: 0;
transform: translateY(20px);
transition: 0.4s;
}
.card.visible {
opacity: 1;
transform: translateY(0);
}
Метод подходит для анимаций, ленивой загрузки контента и аналитики просмотров.
#javascript #frontend #вебразработка | 775 |
| 20 |  🎠 Карусель с CSS без JavaScript
CSS Scroll Snap позволяет автоматически фиксировать прокрутку на ближайшей карточке.
Настраиваем горизонтальный контейнер:
.slider {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
Затем указываем точку фиксации для каждой карточки:
.slide {
flex: 0 0 80%;
scroll-snap-align: start;
}
Теперь после прокрутки ближайшая карточка сама выровняется по началу контейнера.
Для более плавного поведения можно добавить:
.slider {
scroll-behavior: smooth;
}
Подходит для мобильных подборок, галерей, отзывов и карточек товаров.
#css #frontend #вебразработка | 721 |
