👩‍💻 Группируем колонки в таблице в один клик!

Тег <colgroup> используется в таблицах, чтобы объединить несколько колонок и задать им общие стили: ширину, цвет фона, скрытие и другое.

Можно использовать свойства:

• width;
• background;
• background-color;
• visibility;
• border / border-* (только при border-collapse: collapse).

Работает в паре с тегом <col>, через который и задаются конкретные стили колонкам.

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

Воспроизводим звук по клику — без библиотек!

Хотите добавить отзывчивости интерфейсу? Сегодня разбираем как реализовать звук клика.

Шаг 1 — создаём звук:

const clickSound = new Audio('/sounds/click.mp3');

Шаг 2 — проигрываем при клике:

document.addEventListener('click', () => {
  clickSound.currentTime = 0; // перезапуск
  clickSound.play().catch(() => {}); // защита от блокировки
});

Шаг 3 — можно на конкретную кнопку:

const popSound = new Audio('/sounds/pop.mp3');
document.querySelector('#btn').addEventListener('click', async () => {
  try {
    popSound.currentTime = 0;
    await popSound.play();
  } catch (_) {}
});

🔥 Работает с основными форматами (.mp3, .wav). Браузер обычно кэширует звук, но первое воспроизведение может занять долю секунды.

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

👩‍💻 Управляй отступами компонентов легко!

Если один и тот же компонент в разных блоках требует разные отступы, можно использовать :where():

:where(.card, .section, .block) h2 {
  margin-block: 0.5em 1em;
}

:where() не повышает специфичность, поэтому можно переопределять стиль дальше, без !important.

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

.hero h2 {
  margin-block: 2em 1em;
}

А чтобы ограничить стили только внутри компонента, объединим :where() с контейнером:

.card :where(h2, h3, p) {
  margin-block: 0.7em;
}

🔥 Теперь любой текст внутри .card получает аккуратные отступы.

📣 Code Ready | #совет

Определяем, что делает пользователь в input — без таймеров и дебаунсов!

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

Шаг 1 — получаем поле:

const field = document.querySelector('#search');

Шаг 2 — определяем ввод символов (именно набор текста руками):

field.addEventListener('input', (e) => {
  if (e.inputType === 'insertText') {
    console.log('Пользователь печатает текст');
  }
});

Шаг 3 — распознаём удаление:

field.addEventListener('input', (e) => {
  if (e.inputType.includes('delete')) {
    console.log('Пользователь удаляет текст');
  }
});

Шаг 4 — ловим вставку из буфера обмена:

field.addEventListener('input', (e) => {
  if (e.inputType === 'insertFromPaste') {
    console.log('Вставка текста из буфера обмена');
  }
});

Шаг 5 — определяем другие вставочные действия (автозамена, drop и т.д.):

field.addEventListener('input', (e) => {
  if (e.inputType.startsWith('insert') &&
      e.inputType !== 'insertText' &&
      e.inputType !== 'insertFromPaste') {
    console.log('Автозамена или другое вставочное действие');
  }
});

🔥 Позволяет строить умные поля поиска, автосохранение, динамические подсказки и разные UX-ветки без debounce, таймеров и лишней логики.

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