Отложенный запуск функции (debounce)!

При вводе, скролле или ресайзе события вызываются слишком часто и создают лишнюю нагрузку. Debounce откладывает выполнение функции, пока поток событий не прекратится.

Создадим универсальный debounce-хелпер:

function debounce(fn, delay = 300) {
  let timerId = null;

  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
}

Используем debounce для поиска по вводу:

const input = document.querySelector("#search");

function handleSearch(value) {
  console.log("Запрос:", value);
}

const debouncedSearch = debounce(handleSearch, 500);

input.addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});

Теперь обработчик вызовется только когда пользователь закончит вводить текст.

Добавим ещё пару практических кейсов.

Сохранение черновика формы:

const saveDraft = debounce((form) => {
  console.log("Сохраняем черновик:", form);
}, 1000);

Оптимизация обработчика resize:

window.addEventListener(
  "resize",
  debounce(() => {
    console.log("Пересчитываем layout...");
  }, 200)
);

🔥 Один универсальный инструмент — и меньше нагрузки на фронтенд, меньше дерганий UI и никаких лишних запросов.

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

👩‍💻 Выделяем клавиши и комбинации с помощью тега!

Тег <kbd> обозначает пользовательский ввод: с клавиатуры, голосом, указателем или другим образом. <kbd> никак не влияет на скринридеры и другие вспомогательные технологии. Они рассказывают о содержимом тега как об обычном тексте без роли.

Где особенно полезен:

• Инструкции по работе с интерфейсом;
• Подсказки горячих клавиш;
• Руководства для разработчиков;
• Отображение команд, вводимых вручную.

По умолчанию браузеры выводят <kbd> моноширинным шрифтом.

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

Получаем предыдущий и следующий элементы в массиве — будто «крутим карусель»

Иногда нужно перемещаться по массиву: переключать слайды, шагать по списку товаров, листать подсказки. Сделаем мини-утилиту, которая даёт соседние элементы по индексу.

Базовая функция:

function neighbors(arr, index) {
  return {
    prev: arr[index - 1] ?? null,
    next: arr[index + 1] ?? null
  };
}

Использование:

const items = ["A", "B", "C", "D"];

console.log(neighbors(items, 1));
// { prev: "A", next: "C" }

Сделаем версию с циклическим режимом — как в каруселях:

function cycleNeighbors(arr, index) {
  const len = arr.length;
  return {
    prev: arr[(index - 1 + len) % len],
    next: arr[(index + 1) % len]
  };
}

Использование:

console.log(cycleNeighbors(items, 0));
// { prev: "D", next: "B" }

🔥 Мини-инструмент, который сильно упрощает навигацию по массивам: слайдеры, шаговые формы, клавиатурная навигация, циклические списки — всё становится на порядок чище.

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

👩‍💻 Делаем компоненты универсальными одной строкой!

До сих пор многие привязывают стили к направлению текста:

.card {
  padding-left: 16px;
  padding-right: 16px;
}

Это работает, пока интерфейс строго LTR и не появляется RTL, локализация или переиспользование компонентов.

Современный CSS решает это нативно, логическими свойствами:

.card {
  padding-inline: 16px;
}

padding-inline автоматически учитывает направление текста и заменяет padding-left + padding-right.

То же самое работает для вертикали:

.card {
  padding-block: 12px;
}

🔥 padding-block — это padding-top + padding-bottom, но без жёсткой привязки к физическим сторонам.

📣 Code Ready | #совет

📂 Напоминалка по HTML <input> типам!

Например, type="email" автоматически включает базовую валидацию e-mail, а type="date", type="time" и type="range" дают нативные контролы без лишнего JS.

На картинке — часто используемые типы <input>, которые стоит держать под рукой.

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

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

👩‍💻 Устанавливаем несколько разрешений и типов фонового изображения!

CSS-функция image-set() позволяет перечислить несколько фоновых изображений с условиями, по которым браузер решит, какое из них наиболее подходящее для загрузки в данный момент.

Примеры использования:

• Загрузка @1x / @2x / @3x изображений для Retina-экранов;

• Выбор более лёгкого изображения для обычных дисплеев;

• Указание альтернативных форматов (webp / avif) с фолбэком.

Конечно, есть тег <picture>, но если изображение декоративное, будет правильнее установить его как фон элемента.

📣 Code Ready | #свойство

👩‍💻 Задаем пропорции элементов одной строкой!

Раньше, чтобы сохранить пропорции блока (карточки, превью, видео), писали так:

.preview {
  position: relative;
  padding-top: 56.25%;
}

Работает, но сложно читать, неудобно поддерживать.

Современный CSS решает это одной строкой:

.preview {
  aspect-ratio: 16 / 9;
}

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

Чтобы контент внутри не ломал пропорции:

.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

🔥 Идеально для карточек, галерей, видео, skeleton-экранов

📣 Code Ready | #совет

👍 React Bits — готовые анимации и UI-эффекты!

Это коллекция интерактивных UI-эффектов, анимаций текста и компонентов для React. Здесь можно найти современные визуальные решения для hero-блоков, заголовков, интро и интерфейсных акцентов. Код аккуратный, легко читается и быстро интегрируется в собственные проекты.

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

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

📂 Напоминалка по CSS positioning!

Например, position: relative позволяет смещать элемент относительно его обычного положения, а position: absolute — позиционировать элемент внутри ближайшего спозиционированного родителя.

На картинке — 5 значений position, которые нужно уверенно понимать при верстке и работе с layout’ами.

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

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