👩‍💻 Можно ли визуально показать, что на ссылку или кнопку прямо сейчас жмут?

Псевдокласс :active позволяет задать стили для элемента, с которым происходит взаимодействие прямо сейчас.

Покажу примеры:

• color — меняет цвет текста;

• background — подсвечивает фон;

• transform — делает анимацию «прожатия»;

• box-shadow — добавляет эффект клика.

Фишка в том, что :active работает только во время удержания. Отпустил - элемент возвращается к обычному стилю.

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

Metanit — это подробный русскоязычный учебник по JavaScript с объяснениями и примерами. Подходит как для новичков, так и для тех, кто хочет углубиться в тонкости языка.

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

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

Throttle vs Debounce: выбираем инструмент!

Функция срабатывает только после остановки прокрутки на 300ms. Пользователь видит скачкообразные обновления интерфейса:

const debouncedScroll = debounce(() => {
  console.log('Scroll handled');
}, 300);

window.addEventListener('scroll', debouncedScroll);

Решение — throttle:

function throttle(fn, limit = 16) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

Функция выполняется максимум раз в 16ms, обеспечивая плавные 60 FPS без перегрузки браузера.

const throttledScroll = throttle(() => {
  console.log('Scroll handled');
}, 16); // 16ms = 60 FPS

window.addEventListener('scroll', throttledScroll, { passive: true });

🔥 Поэтому, Throttle — для частых действий (scroll, resize). Debounce — для финального результата (поиск, валидация).

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

👩‍💻 Часто работаете на нескольких устройствах и устали вручную переносить настройки VS Code?

Settings Sync — плагин, который автоматически синхронизирует все настройки между разными устройствами. Можно быстро восстановить привычную среду работы или поделиться своим набором настроек с коллегами.

📣 Code Ready | #vscode

👩‍💻 Вывода результатов вычислений или действий пользователя!

У <output> есть встроенная роль status. Благодаря ей скринридеры и другие вспомогательные технологии автоматически зачитывают содержимое тега, когда оно обновляется.

Как пишется:

• for — значением может быть один или несколько ID, разделённые пробелом;

• form — указывается ID формы в этом же документе, с которой связывается поле вывода;

• name — имя поля вывода.

Чтобы тег работал во всех браузерах и со всеми скринридерами корректно, рекомендуют явно задавать ему role="status"

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

📱 Напоминалка по работе с массивами!

Например методы map(), filter(), find() и другие — это быстрый способ трансформировать, искать и фильтровать данные в массивах.

На картинке — 7 ключевых методов массивов.

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

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

👩‍💻 Напоминалка по HTML-элементам div и span!

Например, <div> используется для группировки блоков и применения стилей к целым секциям, а <span> — для выделения и стилизации отдельных частей текста внутри строки.

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

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

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