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

Anthropic выложили бесплатную библиотеку промптов для Claude В Prompt Library собраны готовые промпты для Claude Code с объяснениями, почему они работают и как адаптировать их под свои задачи. — Поиск уязвимостей и анализ безопасности — Отладка кода и исправление ошибок — Автоматизация задач и рабочих процессов — Для каждого промпта есть рекомендации по использованию Бесплатно 🚀 Забираем тут.

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

Как сделать блок на всю высоту экрана без проблем с 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, когда панели браузера занимают бол

12-летняя девочка запустила ИИ-стартап: она разработала бота-ассистента, который помогает малому бизнесу удерживать клиентов. Мана Джампала написала сервис через Claude. Бот успешно прошел первые тесты. Через два года она планирует выйти на акселераторы Y Combinator или a16z, а следом — на венчурные фонды. Одна проблема — возраст. Сервис Маны нравится онлайн-бизнесу, но на живых питчах ее не воспринимают всерьез.

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

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

Как адаптировать компонент по ширине контейнера, а не экрана Обычные 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;
  }
}

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

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

🖼 Ленивая загрузка изображений без 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 #оптимизация

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

📑 Глубокая копия объекта в JavaScript Оператор расширения создаёт только поверхностную копию объекта:

const copy = { ...original };

Вложенные объекты при этом продолжают ссылаться на одни и те же данные. Для создания независимой глубокой копии используйте structuredClone():

const copy = structuredClone(original);

Теперь вложенные свойства копии можно изменять отдельно:

copy.user.name = 'Анна';

console.log(original.user.name);

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

📐 Как сохранить пропорции блока Чтобы видео, изображение или карточка сохраняли правильную форму при изменении ширины, используйте CSS-свойство aspect-ratio. Например, создадим блок с пропорциями 16:9:

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Высоту указывать не нужно — браузер рассчитает её автоматически. Чтобы изображение полностью заполняло блок:

.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Если ширина контейнера изменится, его высота подстроится с сохранением заданных пропорций. Подходит для видео, изображений, карточек, баннеров и превью. Сохраняйте, чтобы не потерять 📎 #css #frontend #вебразработка

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

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

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

<button popovertarget="menu">
  Открыть
</button>

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

<div id="menu" popover>
  Содержимое
</div>

После нажатия браузер самостоятельно откроет элемент. Повторное нажатие, клик снаружи или клавиша Escape закроют его. При необходимости окно можно оформить через CSS:

[popover] {
  padding: 20px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 40px #0004;
}

Меньше JavaScript — проще управление состоянием и базовой доступностью интерфейса. #html #frontend #webdev

⛔️ Как отменить 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

📐 Адаптивный размер текста с CSS clamp() Чтобы текст плавно менялся вместе с шириной экрана, необязательно создавать несколько media-запросов. Функция clamp() принимает три значения:

.title {
  font-size: clamp(24px, 5vw, 64px);
}

Здесь: • 24px — минимальный размер; • 5vw — гибкое значение; • 64px — максимальный размер. На маленьком экране заголовок не станет меньше 24px, а на большом — не превысит 64px. clamp() подходит не только для текста:

.card {
  padding: clamp(16px, 4vw, 40px);
  gap: clamp(8px, 2vw, 24px);
}

Удобный способ создавать адаптивные интерфейсы с меньшим количеством media-запросов. Сохраняйте, чтобы не потерять 📎 #css #frontend #вебразработка

Как менять стиль родителя с помощью CSS :has() Раньше CSS умел выбирать только сам элемент или его потомков. Чтобы изменить родителя в зависимости от содержимого, часто приходилось использовать JavaScript. Теперь это можно сделать через псевдокласс :has(). Например, подсветим поле, внутри которого есть невалидный input:

.field:has(input:invalid) {
  border-color: #ff4d4f;
  background: #fff2f2;
}

Можно изменить карточку при наведении на кнопку:

.card:has(.card__button:hover) {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px #0002;
}

Или убрать нижний отступ у блока, если внутри нет описания:

.card:not(:has(.card__description)) {
  padding-bottom: 16px;
}

Также :has() удобно использовать для форм, меню, карточек и переключателей:

.form:has(input:focus) {
  outline: 2px solid #2684ff;
}

Главное преимущество — интерфейс реагирует на состояние вложенных элементов без дополнительных классов и JavaScript. Сохраняйте, чтобы не потерять 📎 #css #frontend #вебразработка

Как адаптировать компонент по ширине контейнера, а не экрана Обычные 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;
  }
}

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

❓ Зачем используется метод append() в JavaScript и когда его применять? Метод append() добавляет один или несколько элементов или текст в конец указанного DOM-элемента. Это современный и удобный способ динамически изменять содержимое страницы. ✅Пример:

<ul id="list"></ul>

<script>
  const list = document.getElementById("list");
  const newItem = document.createElement("li");
  newItem.textContent = "Новый элемент";

  list.append(newItem);
</script>

📌В этом примере append() добавляет новый элемент <li> в конец списка

append() удобно использовать при генерации списков, карточек, уведомлений и других динамических компонентов. В отличие от appendChild(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким