Анимация размеров с ключевыми словами!

В CSS появился официальный механизм, который разрешает интерполяцию intrinsic-значений размеров. Для этого нужно разрешить использование ключевых слов:

:root {
  interpolate-size: allow-keywords;
}

После этого браузер умеет плавно анимировать переходы между числовым значением и кейвордами (0 - auto, min-content, max-content, fit-content).

Важно: keyword <=> keyword по-прежнему не анимируется.

Простейший пример с <details> начинает работать так:

<details>
  <summary>Показать</summary>
  <div class="content">Скрытое содержимое</div>
</details>

Раньше здесь не было нативной анимации, браузер мгновенно переключал состояние:

.content {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}

details[open] .content {
  height: auto;
}

🔥 Важно понимать, что это именно разрешение интерполяции, а не хак, поэтому логика остаётся декларативной и предсказуемой.

📣 Code Ready | #совет

✍️ JS for Cats — самоучитель для тех, кто устал от скучной теории!

Это необычное руководство по JS, построенное так, чтобы его было легко читать и понимать. Материал объясняет базовые концепции языка простым языком, с примерами и объяснениями. Ресурс подойдёт для знакомства с синтаксисом или для повторения основ без излишне сложной теории.

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

📣 Code Ready | #ресурс

FormData — нативная работа с данными форм и файлами!

FormData — базовый Web API для сбора и отправки данных HTML-форм. Позволяет работать с текстовыми полями и файлами без ручной сериализации и напрямую передаётся в fetch или XMLHttpRequest.

Создание FormData из формы:

const form = document.querySelector('form');
const formData = new FormData(form);

В FormData попадают только successful controls: элементы с name и без disabled, checked checkbox/radio, выбранные файлы и submit-кнопка при реальном submit; без name — не попадают.

Пример 1 — чтение значений:

formData.get('email');
formData.get('password');

get() возвращает первое значение по ключу. Для полей с несколькими значениями используется getAll().

Пример 2 — несколько значений одного поля:

formData.getAll('tags');

Актуально для: checkbox-групп; <select multiple>; динамических списков (повторяющиеся ключи).

Пример 3 — добавление и изменение данных:

formData.set('role', 'admin');
formData.append('token', 'abc123');

set() удаляет все предыдущие значения по ключу и устанавливает новое; append() добавляет ещё одно значение (важно для повторяющихся ключей и файлов)

Пример 4 — работа с файлами:

const fileInput = document.querySelector('input[type="file"]');

if (fileInput.files.length > 0) {
  formData.append('avatar', fileInput.files[0]);
}

Файл передаётся как File (подтип Blob) с именем, MIME-типом и размером. При выборе нескольких файлов (multiple) FormData содержит несколько записей с одинаковым ключом.

Пример 5 — отправка через fetch

fetch('/api/profile', {
  method: 'POST',
  body: formData
});

Не нужно вручную задавать Content-Type, браузер автоматически установит multipart/form-data с корректным boundary.

Пример 6 — перебор всех данных:

for (const [key, value] of formData.entries()) {
  console.log(key, value);
}

🔥 FormData — стандартный и часто незаменимый инструмент для веб-приложений с формами, файлами и реальными пользовательскими данными.

📣 Code Ready | #практика

👩‍💻 Живой предпросмотр Markdown-файлов во время редактирования!

Markdown Preview Enhanced — расширяет стандартный предпросмотр Markdown в VS Code. Поддерживает диаграммы, формулы, графики, Mermaid, подсветку кода, экспорт в PDF и HTML. Сразу видишь, как будет выглядеть README, документация или статья, без внешних инструментов и лишних шагов.

📣 Code Ready | #vscode

Универсальный hover-оверлей без скриптов и лишних обёрток!

Нужен стабильный hover-оверлей для родителя, который работает над всей карточкой и не конфликтует со сложной вложенностью, absolute-элементами и z-index.

.card:hover::before { background: rgba(0,0,0,.05); }

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

.card { isolation: isolate; }

Создаём новый stacking context, чтобы изолировать слои внутри карточки и избежать конфликтов с внешними z-index и blending.

.card::before { z-index: 1; border-radius: inherit; }
.card > * { position: relative; z-index: 2; }

🔥 Теперь оверлей гарантированно выше фона, но ниже контента, не ломает клики благодаря pointer-events: none и корректно наследует скругления.

📣 Code Ready | #совет

😎 Tutorial Republic — подробный и практичный справочник по JavaScript!

Это полноценный справочник с чёткими объяснениями, примерами кода и интерактивными демо. Каждая тема сопровождается примерами, которые можно сразу попробовать и понять, как именно работает та или иная конструкция. Очень полезно и новичкам, и тем, кто хочет освежить знания или быстро найти пример по конкретной задаче.

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

📣 Code Ready | #сайт

Event Delegation — один обработчик вместо десятков!

Частая ошибка — навешивать обработчик на каждый элемент списка. Это усложняет код, требует повторных подписок при обновлении DOM и не работает для динамически добавленных элементов. Гораздо надёжнее использовать делегирование событий — один обработчик на общем родителе.

Обработчик на каждый элемент:

document.querySelectorAll('.list .item button').forEach(btn => {
  btn.addEventListener('click', () => {
    console.log('Clicked:', btn.dataset.id);
  });
});

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

Делегирование через родителя:

const list = document.querySelector('.list');

list.addEventListener('click', (e) => {
  const button = e.target.closest('button');
  if (!button || !list.contains(button)) return;

  console.log('Clicked:', button.dataset.id);
});

События в DOM всплывают вверх по дереву (bubbling), поэтому родитель может перехватить клик. Через closest() мы определяем фактический источник действия, даже если клик был по вложенному элементу внутри кнопки.

Работает с динамическими элементами:

list.insertAdjacentHTML('beforeend', `
  <li class="item">
    <button data-id="10">New item</button>
  </li>
`);

Новый элемент автоматически обрабатывается существующим обработчиком — дополнительных подписок не требуется.

🔥 Подход не применим к событиям без всплытия (например, focus, blur), может конфликтовать с точечным использованием stopPropagation() и требует осознанного выбора контейнера, чтобы не перехватывать лишние события.

📣 Code Ready | #практика

👩‍💻 Нужно запустить тесты в редакторе?

Jest — расширение для VS Code, которое показывает статус тестов рядом с кодом и позволяет запускать их по одному клику: весь файл, отдельный тест или даже конкретный кейс. Подсветка тестов и быстрый переход к проблемному месту.

📣 Code Ready | #vscode

📂 Напоминалка по методам строк!

Например, charAt() возвращает символ по индексу, includes() проверяет наличие подстроки, а slice() извлекает часть строки без изменения оригинала.

На картинке — часто используемые методы для работы со строками: поиск, сравнение, замена, разбиение, изменение регистра и форматирование.

Сохрани, чтобы не забыть!

📣 Code Ready | #ресурсы

👩‍💻 Поля формы, которые сами подстраиваются под текст!

CSS теперь умеет автоматически менять размер input, textarea и select в зависимости от содержимого, раньше для этого писали скрипты.

Просто добавьте:

input, textarea, select {
  field-sizing: content;
}

Теперь ширина input и select, а высота textarea растут вместе с содержимым. У select размер подстраивается под выбранный пункт.

Чтобы поля не ломали адаптив и не вылезали за контейнер, ограничиваем максимальный размер и задаём минимальный:

input, textarea, select {
  field-sizing: content;
  min-width: 8ch;
  max-width: 100%;
}

Работает и для textarea, она расширяется по мере ввода, без resize-хэндлов и скриптов:

textarea {
  field-sizing: content;
}

Поддержка пока не во всех браузерах.

🔥 В итоге форма выглядит аккуратно и реагирует на пользователя без JS.

📣 Code Ready | #совет

👍 HTMLBOOK — удобный справочник по HTML и CSS на русском!

Ресурс для изучения вёрстки, где собрана база по HTML, CSS и созданию сайтов. Здесь можно быстро разобраться в тегах, атрибутах, стилях, структуре страниц и типовых приёмах оформления. Материалы написаны простым языком, есть самоучители, примеры и пояснения, поэтому сайт удобно использовать как шпаргалку во время работы.

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

📣 Code Ready | #сайт

❤️ Полезная статью на Хабре: «Интересные HTML и CSS фичи, которые почему-то обходят стороной»

В этой статье:
• Показано, как упростить разметку и логику форм без лишнего JS;
• Разобраны малоиспользуемые возможности для аккуратной типографики, позиционирования и валидации;
• На примерах видно, как писать чище, короче и гибче, используя то, что уже давно есть в стандартах.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья