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

🎠 Карусель с 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(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким

Различие между Object.freeze() и const const и Object.freeze – две разные фичи JavaScript. const применяется только для неизменяемой ссылки на ячейку памяти со значением, что означает невозможность задать новое значение для переменной. Object.freeze работает со значениями объектов. Делает объект неизменяемым, то есть изменить его свойства невозможно.

OpenAI потеряли $38,5 млрд в 2025 году — это почти втрое больше их выручки. Отчет о финансовом положении компании оказался в сети. Надежность данных подтвердили в Financial Times. Всего за год чистый убыток создателей ChatGPT вырос почти в 8 раз. При этом они активно готовятся к выходу на биржу. Действительно некоммерческая компания.

Claude Cowork теперь в браузере и на телефоне, работа не останавливается когда вы закрываете ноутбук Cowork это режим, где вы даете Claude задачу целиком, а он сам ковыряется в файлах, календаре, почте и вебе, пока не доведет до конца. Раньше он жил только на компьютере, поэтому все замирало как только вы закрывали ноутбук. Теперь задача идет за вами по устройствам, продолжается в фоне даже с выключенным ноутбуком, а когда нужен ваш выбор, вопрос прилетает уведомлением на телефон. Например, ставите подготовку к встрече на 6 утра понедельника, Claude читает переписку, транскрипты созвонов и свежие новости по клиенту, собирает бриф и накидывает черновик письма. Утром просто открываете готовое. По данным самой Anthropic больше 90% задач в Cowork это не код, а офисная рутина, сведение расходов, трекеры договоров, сборка презентаций из транскриптов встреч. Бета раскатывается волнами, первыми получают пользователи тарифа Max. Лимиты Cowork удвоены до 5 августа.

Настраиваем иерархию стилей в проекте! Когда проект растёт, стили начинают перебиваться и путаться. CSS дал решение - каскадные слои. Создайте слои с приоритетом: @lаyer reset, base, components, utilities; Теперь порядок каскада становится управляемым: слои идут строго в указанной последовательности, а внутри слоя продолжают работать обычные правила (специфичность и порядок объявления). Например, базовые стили: @lаyer base { button { font-size: 1rem; }} Компоненты идут выше по приоритету: @lаyer components { .btn-primary { font-size: 1.1rem; }} И утилиты завершают каскад: @lаyer utilities { .fs-lg { font-size: 1.25rem; }} 🔥 Так исчезают конфликты слоёв, приоритеты всегда предсказуемы, проще мигрировать и рефакторить большие проекты.

HTML-совет Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п. Почему? - На десктопе появляется ненужный спиннер. - Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз. Вместо этого — используй inputmode="numeric" + pattern ✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX. ✅ Добавляет валидацию на цифры.

📂 Напоминалка для работы с React.js! Например, useState помогает хранить состояние компонента, а useEffect — работать с побочными эффектами и запросами к API. На картинке — основные темы и приёмы, которые чаще всего используются в React-разработке: хуки, рендеринг, формы, роутинг, стилизация и оптимизация. Сохрани, чтобы не забыть!

CEO Y Combinator выкатил свой сетап для Claude Code Это целая виртуальная команда из 10+ ролей, которая живёт внутри CLI. Теперь мы живем в реальности, где один человек гоняет 5–10 агентов параллельно: они пишут код, тесты, сами находят баги и фиксят их. У самого Гарри получается до 10–20к строк кода в день при работе «параллельно с CEO». По факту это превращает Claude в управляемый софтверный завод с ролями, процессами и гейтами.

Напоминалка для работы с Git. Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками. На картинке — 12 самых нужных команд, которые стоит держать под рукой. Сохрани, чтобы не забыть!

Растягивай абсолютные элементы в одну строку — через inset! Многие задают абсолютным элементам растяжение вручную: .block::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } Но то же самое можно записать короче — одной строкой: .block { position: relative; } .block::before { position: absolute; inset: 0; content: ""; } inset: 0 означает сразу: top: 0; right: 0; bottom: 0; left: 0; — элемент растянется по родителю. 🔥 Полезно для оверлеев, эффектов, декоративных слоёв и background-паттернов.

😂👍

Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsNumber. Ручное преобразование не требуется Свойство value у HTMLInputElement всегда возвращает строку. Поэтому для числовых полей нам приходится вручную преобразовывать значение в число с помощью parseInt(), parseFloat(), Number() или оператора +. Мы можем упростить это, используя valueAsNumber. Оно напрямую возвращает значение как число.

Напоминалка для работы с DOM! DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает события и реагирует на действия пользователя. На картинке — базовые методы document и node, а также самые часто используемые события мыши, клавиатуры и форм. Сохрани, чтобы не забыть!