Универсальный 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 | #статья

Определяем готовность DOM через DOMContentLoaded!

DOMContentLoaded срабатывает после разбора HTML и построения DOM — можно безопасно запускать клиентский код, не дожидаясь полной загрузки страницы. Не ждёт изображения и другие ресурсы, но может задерживаться блокирующими CSS и синхронными скриптами.

Подписка на событие:

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM готов');
});

Это стандартная точка старта клиентской логики, когда элементы уже существуют в документе и с ними можно безопасно работать.

Событие load на объекте window срабатывает позже — после загрузки всех зависимых ресурсов страницы (изображений, стилей, шрифтов, iframe и т.д.):

window.addEventListener('load', () => {
  console.log('Страница полностью загружена');
});

Используйте load только когда действительно необходимы уже загруженные ресурсы (например, для получения фактических размеров изображений).

Если скрипт подключается динамически или выполняется после загрузки документа, событие DOMContentLoaded может уже произойти. В этом случае следует проверить document.readyState:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();
}

function init() {
  console.log('Инициализация');
}

Такой паттерн гарантирует корректный запуск независимо от момента подключения скрипта.

🔥 DOMContentLoaded срабатывает один раз за жизненный цикл документа и является базовой точкой запуска клиентского кода сразу после готовности структуры страницы.

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

☕️ JS Basic Tasks — практический задачник по JavaScript и DOM!

Репозиторий содержит набор заданий и учебный проект по работе с JavaScript, интерфейсами и браузерным API. Здесь последовательная практика: манипуляции с DOM, события, формы, работа с данными и построение интерактивных элементов. Отличный вариант, если хочешь попрактиковаться.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

👩‍💻 Разрешаем выбор нескольких значений!

С атрибутом multiple можно выбрать несколько имейлов или файлов в <input>, либо несколько вариантов в списке <select>.

В зависимости от элемента поведение отличается:

• для file — можно загрузить несколько файлов одновременно;
• для select — становится доступен множественный выбор пунктов списка;
• для email — можно ввести несколько адресов через запятую.

multiple делает интерфейс гибче и избавляет пользователя от повторяющихся действий при работе с формами.

📣 Code Ready | #атрибут

👩‍💻 Не хочется каждый раз писать базовую структуру вручную?

Simple React Snippets — добавляет быстрые шаблоны для React: функциональные компоненты, импорт React, хуки, export по умолчанию и другие часто используемые конструкции. Вводишь короткое сокращение, получаешь готовый каркас компонента.

📣 Code Ready | #vscode

📂 Шпаргалка по методам поиска в строках!

Например, startsWith(), endsWith() и includes() используются для логических проверок содержимого строки, а indexOf() и lastIndexOf() — для получения позиции первого и последнего вхождения подстроки.

На изображении собраны базовые методы строкового поиска, которые покрывают большинство повседневных задач при работе с текстом и данными.

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

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