Фронтенд Гайд

@frontendGA

Kanal geosi va tili: Rossiya, Ruscha

Toifa: Texnologiyalar

Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!
Все представлено в виде готового кода, бери и юзай в своем проекте.
6ad1a2aabe82d4fbb0d6

Bog‘liq kanallar | O‘xshash kanallar

Kanal geosi va tili

Rossiya, Ruscha

Toifa

Texnologiyalar

Statistika

Saralanganlar

Postlar filtri

O‘chirilganlarni yashirish

Repostlarni yashirish

Фронтенд Гайд

4 Oct, 12:09

00:06

Совет по CSS: Единица измерения turn

Иногда проще задать вращение с помощью единицы turn вместо deg, особенно когда нужно указать значение больше 360 градусов (1 turn = 360 deg)

351 0 2 1 6

😍 QuickRef — компактная шпаргалка по JavaScript!

Это удобный справочник, где собраны ключевые конструкции, методы и синтаксис JS на одной странице. Здесь есть всё необходимое: переменные, функции, операторы, строки, массивы и базовые примеры кода для быстрого ориентирования. Формат максимально сжатый и практичный.

📌 Оставляю ссылочку: quickref.me

573 0 10 12

Фронтенд Гайд

2 Oct, 12:15

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 не зависит от одного поставщика.

587 0 2 2 5

Фронтенд Гайд

1 Oct, 14:33

Опыт в своей области важнее умения программировать

Anthropic опубликовала исследование по 400 тысячам сессий Claude Code от 235 тысяч пользователей.

Главный вывод. В типичной сессии человек принимает 70% решений о том, что делать, а Claude принимает 80% решений о том, как это делать. Человек ставит задачу, ИИ её реализует.

Эксперты в своей области получают от инструмента значительно больше. У новичка каждый промпт запускает примерно 5 действий Claude и 600 слов вывода. У эксперта те же метрики равны 12 действиям и 3200 словам. Разница в 5 раз, при этом речь не про знание кода, а про понимание своей предметной области.

По успешности сессий картина схожая. Новички добиваются подтверждённого результата в 15% случаев, пользователи среднего уровня и выше в 28-33%. Но самый большой скачок происходит при переходе от новичка к среднему уровню, а не от среднего к эксперту.

673 0 5 6

Фронтенд Гайд

30 Sep, 13:39

Anthropic выложили бесплатную библиотеку промптов для Claude

В Prompt Library собраны готовые промпты для Claude Code с объяснениями, почему они работают и как адаптировать их под свои задачи.

— Поиск уязвимостей и анализ безопасности
— Отладка кода и исправление ошибок
— Автоматизация задач и рабочих процессов
— Для каждого промпта есть рекомендации по использованию

Бесплатно 🚀

Забираем тут.

670 0 23 1 7

Фронтенд Гайд

29 Sep, 12:15

Summer AI Conf | ИИ конференция про работу с визуальным контентом

9 июля Phygital+ проводит бесплатную онлайн конференцию про реальные кейсы внедрения нейросетей в дизайн, маркетинг и бизнес-процессы. Как перестать зависеть от фотостоков и уложить производство контента в 1 день вместо недели?

Ключевые спикеры и темы:

X5 Tech, Чижик — ИИ-видео для SMM и мерча.
DEPOT — ИИ в спецпроектах и HR-брендинге.
KANZLER — кампании без съемок под каждую гипотезу.
Альфа банк — живой кейс команды про внедрении ИИ инструментов.
ИВИ — ускорение продакшна для стриминга.

699 0 0 1 7

Фронтенд Гайд

28 Sep, 12:02

Как сделать блок на всю высоту экрана без проблем с 100vh
Для полноэкранных секций часто пишут:
.hero {
min-height: 100vh;
}
На компьютере всё выглядит нормально.
Но на мобильных браузерах 100vh может вести себя неожиданно из-за адресной строки и нижней панели браузера.
В результате блок иногда оказывается выше видимой области, а часть контента уезжает вниз.
Для современных браузеров лучше использовать dvh:
.hero {
min-height: 100dvh;
}
dvh означает dynamic viewport height.
То есть браузер пересчитывает высоту блока вместе с изменением реально доступной области экрана.
Например:

Главный экран
Контент всегда помещается в видимую область.

.hero {
min-height: 100dvh;

display: grid;
place-items: center;
}
Теперь при появлении или скрытии панелей мобильного браузера высота секции будет корректироваться автоматически.
Есть ещё два похожих значения:
100svh
100lvh
100dvh
svh — минимальная высота viewport, когда панели браузера занимают бол

648 0 10 11

Фронтенд Гайд

27 Sep, 12:01

12-летняя девочка запустила ИИ-стартап: она разработала бота-ассистента, который помогает малому бизнесу удерживать клиентов.

Мана Джампала написала сервис через Claude. Бот успешно прошел первые тесты. Через два года она планирует выйти на акселераторы Y Combinator или a16z, а следом — на венчурные фонды.

Одна проблема — возраст. Сервис Маны нравится онлайн-бизнесу, но на живых питчах ее не воспринимают всерьез.

729 0 4 11

Фронтенд Гайд

25 Sep, 18:19

Как менять родительский элемент с помощью 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() для форм, карточек, меню, фильтров и компонентов, состояние которых зависит от вложенного содержимого.

733 0 6 8

Фронтенд Гайд

24 Sep, 13:07

Xiaomi MiMo-V2.6 Pro: новая открытая модель для генерации 3D и сложных ИИ-агентов.

Компания Xiaomi представила новое поколение своих мультимодальных разработок — серию MiMo-V2.6. В линейку вошли две открытые модели: флагманская MiMo-V2.6 Pro и облегченная версия Flash. Этот релиз стал значимым событием для индустрии, так как старшая модель продемонстрировала рекордные показатели производительности, опередив конкурентов в сегменте Open Source и вплотную приблизившись к закрытым проприетарным решениям в специфических тестах на агентность.

765 0 3 3 10

Фронтенд Гайд

23 Sep, 11:49

Как адаптировать компонент по ширине контейнера, а не экрана

Обычные 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;
}
}

Теперь карточка сама переключит компоновку, когда для неё появится достаточно места — независимо от ширины всего экрана.

Контейнерные запросы особенно удобны для карточек, виджетов, сайдбаров и переиспользуемых компонентов в больших интерфейсах.

805 0 3 6

Фронтенд Гайд

22 Sep, 12:49

⏳ Как дождаться завершения всех промисов
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 #программирование

721 0 4 1 9

Фронтенд Гайд

21 Sep, 12:48

🖼 Ленивая загрузка изображений без JavaScript
Если на странице много изображений, необязательно загружать их все сразу.
Добавьте атрибут loading="lazy":

Браузер отложит загрузку изображения, пока пользователь не приблизится к нему при прокрутке.
Обязательно указывайте размеры:

Это заранее резервирует место и предотвращает скачки контента во время загрузки.
Не используйте loading="lazy" для главного изображения в первом экране — оно должно загружаться сразу.
Подходит для каталогов, галерей, статей и длинных страниц.

#html #frontend #оптимизация

705 0 4 2 11

Фронтенд Гайд

20 Sep, 12:48

↔️ Адаптивные отступы для любого языка
Вместо физических направлений 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 #локализация

772 0 10 1 9

Фронтенд Гайд

19 Sep, 12:47

📑 Глубокая копия объекта в JavaScript
Оператор расширения создаёт только поверхностную копию объекта:
const copy = { ...original };
Вложенные объекты при этом продолжают ссылаться на одни и те же данные.
Для создания независимой глубокой копии используйте structuredClone():
const copy = structuredClone(original);
Теперь вложенные свойства копии можно изменять отдельно:
copy.user.name = 'Анна';

console.log(original.user.name);
Значение внутри original останется прежним.
structuredClone() поддерживает объекты, массивы, Map, Set, даты и циклические ссылки.
При этом функции и DOM-элементы таким способом скопировать нельзя.

#javascript #frontend #разработка

763 0 4 2

Фронтенд Гайд

18 Sep, 12:16

📐 Как сохранить пропорции блока
Чтобы видео, изображение или карточка сохраняли правильную форму при изменении ширины, используйте CSS-свойство aspect-ratio.
Например, создадим блок с пропорциями 16:9:
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
Высоту указывать не нужно — браузер рассчитает её автоматически.
Чтобы изображение полностью заполняло блок:
.video img {
width: 100%;
height: 100%;
object-fit: cover;
}
Если ширина контейнера изменится, его высота подстроится с сохранением заданных пропорций.
Подходит для видео, изображений, карточек, баннеров и превью.
Сохраняйте, чтобы не потерять 📎

#css #frontend #вебразработка

768 0 9 1 9

Фронтенд Гайд

17 Sep, 12:40

👁 Как отследить появление элемента на экране
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 #вебразработка

772 0 4 2 7

Фронтенд Гайд

16 Sep, 12:40

🎠 Карусель с 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 #вебразработка

718 0 13 6

Фронтенд Гайд

15 Sep, 12:39

💬 Всплывающее окно без JavaScript
Нативный Popover API позволяет создавать меню, подсказки и небольшие всплывающие панели средствами HTML.
Добавляем кнопку:

Открыть

Создаём всплывающий элемент:

Содержимое

После нажатия браузер самостоятельно откроет элемент. Повторное нажатие, клик снаружи или клавиша Escape закроют его.
При необходимости окно можно оформить через CSS:
[popover] {
padding: 20px;
border: 0;
border-radius: 12px;
box-shadow: 0 12px 40px #0004;
}
Меньше JavaScript — проще управление состоянием и базовой доступностью интерфейса.

#html #frontend #webdev

798 0 10 10

Фронтенд Гайд

14 Sep, 12:39

⛔️ Как отменить fetch-запрос
Если пользователь изменил поисковый запрос, покинул страницу или закрыл компонент, предыдущий запрос может стать ненужным.
Отменить его можно через AbortController.
Создаём контроллер:
const controller = new AbortController();
Передаём его сигнал в fetch:
fetch(url, {
signal: controller.signal
});
Когда запрос больше не нужен — отменяем:
controller.abort();
При отмене fetch завершится с ошибкой AbortError, которую можно обработать отдельно:
try {
await fetch(url, {
signal: controller.signal
});
} catch (error) {
if (error.name !== 'AbortError') {
throw error;
}
}
Особенно полезно для поиска, фильтров, переходов между страницами и размонтирования компонентов.

#javascript #frontend #fetch