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

Если один и тот же компонент в разных блоках требует разные отступы, можно использовать :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 | #практика

👩‍💻 Когда нужно быстро превратить хаотичные данные в аккуратный JSON!

Paste as JSON — расширение, которое берёт содержимое буфера и автоматически превращает его в валидный, правильно отформатированный JSON. Особенно удобно, когда работаешь с API, моками или копируешь данные из логов.

📣 Code Ready | #vscode