Отслеживаем комбинации клавиш на странице!

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

Шаг 1 — слушаем нажатия клавиш:

document.addEventListener('keydown', (e) => {
  console.log(e.key, e.ctrlKey, e.altKey, e.shiftKey);
});

Шаг 2 — проверяем конкретную комбинацию:

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'k') {
    e.preventDefault(); // блокируем стандартное поведение
    alert('Ctrl+K нажата!');
  }
});

Шаг 3 — добавляем несколько комбинаций:

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault(); 
    console.log('Ctrl+S: Сохранение!');
  }
  if (e.altKey && e.key === 'm') {
    e.preventDefault();
    console.log('Alt+M: Меню!');
  }
});

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

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

👩‍💻 Пишем блоки и текст не слева направо, а справа налево!

Свойство writing-mode определяет не просто направление текста, а всю «осевую систему» страницы или контейнера.

Варианты значений:

• horizontal-tb — строки идут горизонтально, слева направо, а блоки сверху вниз.

• vertical-rl — строки идут вертикально сверху вниз, а блоки справа налево.

• vertical-lr — строки идут вертикально сверху вниз, а блоки слева направо.

• sideways-rl — текст идёт вертикально, но символы повёрнуты вправо на 90°, строки идут сверху вниз, а блоки — справа налево.

• sideways-lr — как и sideways-rl, но символы повёрнуты влево на 90°, строки идут снизу вверх, а блоки — слева направо.

Это меняет не только направление текста, но и порядок блоков.

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

❤️ 30-Seconds-of-Code — короткие фрагменты JavaScript для любых нужд в разработке!

Если хочется быстро найти полезный приём, трюк или готовый код-сниппет на JS - этот репозиторий именно то, что надо. Здесь собраны короткие, лаконичные и практически применимые примеры кода, которые можно сразу вставить или адаптировать в свой проект.

Держите ссылочку: GitHub 📱

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

👩‍💻 Как ускорить рендеринг длинных списков?

В CSS есть свойство content-visibility, которое может ускорить рендеринг на лентах.

Браузер просто не рендерит невидимый контент, пока он не появится в зоне видимости:

.post-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

• content-visibility: auto — рендерятся только видимые элементы.

• contain-intrinsic-size — задаёт примерную высоту, чтобы скролл не прыгал.

Для важных блоков можно форсировать рендеринг:

.hero-section {
  content-visibility: visible;
}

🔥 Лучше всего работает, если элемент не меняет размеры динамически, браузер кэширует layout и выдаёт мгновенный скролл.

📣 Code Ready | #совет

👩‍💻 Обозначаем только что добавленный контент!

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

Помимо глобальных атрибутов есть специфические:

• cite позволяет сослаться на информацию о правке;

• datetime позволяет указать время правки.

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

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

Определяем язык браузера!

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

Браузер хранит языковые настройки в объекте navigator:

const userLang = navigator.language;
console.log(`Язык браузера: ${userLang}`); // например: "en-US"

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

const langCode = userLang.split('-')[0].toLowerCase();
console.log(`Код языка: ${langCode}`); // "en"

Для более точной адаптации лучше учитывать весь список предпочтений пользователя:

const preferred = navigator.languages?.length
  ? navigator.languages
  : [navigator.language || 'en'];
console.log('Приоритет языков:', preferred); // ["en-US", "ru", "de"]

Чтобы гарантировать корректные коды локалей, можно нормализовать их по стандарту BCP-47:

const locales = Intl.getCanonicalLocales(preferred);
console.log('Нормализованные локали:', locales)

🔥 Такой подход лежит в основе автоматического выбора локали, подбора перевода интерфейса и настройки форматов дат и чисел.

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