Определяем, предпочитает ли пользователь уменьшенную анимацию!

Современные ОС позволяют пользователю снизить количество анимаций. Браузер транслирует это предпочтение через media query prefers-reduced-motion, и интерфейс может адаптироваться автоматически.

Проверяем текущее состояние:

const motionMQ = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
);

const isReducedMotion = motionMQ.matches;

matches читается синхронно и отражает текущее системное состояние на момент инициализации скрипта.

Реагируем на изменение настройки в системе:

motionMQ.addEventListener("change", ({ matches }) => {
  document.documentElement.dataset.motion =
    matches ? "reduced" : "full";
});

Событие change срабатывает при изменении системной настройки, без polling и лишней логики.

Применяем режим при загрузке приложения:

document.documentElement.dataset.motion =
  isReducedMotion ? "reduced" : "full";

Это позволяет синхронизировать состояние интерфейса с системными настройками пользователя.

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

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

📂 Напоминалка по CSS :nth-child()!

Например, :nth-child(3) выберет третий элемент, :nth-child(even) — все чётные, а :nth-child(5n-1) — элементы по заданному шаблону.

На картинке — наглядная шпаргалка по синтаксису :nth-child(): числа, ключевые слова и формулы, которые чаще всего используются в верстке.

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

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

👩‍💻 UX фокус с :focus-visible!

Очень часто фокус делают так:

button:focus {
  outline: none;
}

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

Современный CSS даёт решение:

button:focus-visible {
  outline: 2px solid #4da3ff;
}

:focus-visible показывает фокус только тогда, когда он реально нужен: при навигации с клавиатуры, при accessibility-сценариях и не показывает его при клике мышью.

Если элемент получил фокус мышью — стиля не будет.
Если клавиатурой — будет.

Для полного контроля можно добавить:

button:focus {
  outline: none;
}

🔥 В итоге никакого лишнего фокуса, интерфейс выглядит профессионально и продуманно.

📣 Code Ready | #совет

☕️ Нашёл свежую статью на Хабре о том, как реализовать изменение размера блоков на сайте!

В этой статье:
• Пошагово показывают, как добавить на страницу интерактивное изменение размера элементов;
• Разбирают базовую логику JavaScript-обработчиков и их аналоги для сенсорных экранов;
• Показывают, как аккуратно управлять DOM-событиями и вычислять новые размеры;
• Предоставляют готовое решение, которое можно сразу подключить к вашему проекту и кастомизировать.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

👩‍💻 Указываем направление текста внутри всего документа или отдельного элемента!

Атрибут dir устанавливает направление вывода текста внутри элемента. Действие атрибута наследуется от родительского элемента, но может быть переопределено.

Принимает одно из следующих значений:

• ltr — текст будет написан слева направо. Такое направление текста используется, например, для русского или английского языков;
• rtl — текст будет написан справа налево. Актуально, например, для арабских языков;
• auto — направление текста определяется браузером.

Может быть применён к любому HTML-элементу, но не для всех элементов имеет смысл.

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

Форматируем дату по приоритетной локали пользователя!

Частая задача: выводить дату в понятном формате без ручного указания региона. Браузер предоставляет список предпочтительных локалей, а Intl.DateTimeFormat форматирует дату на основе данных CLDR.

Базовый вывод даты (используем первую предпочтительную локаль или системную):

const now = new Date();
const locale = navigator.languages?.[0] || navigator.language;
const formatter = new Intl.DateTimeFormat(locale);
console.log(formatter.format(now));
// Примеры: 12/24/2025 или 24.12.2025

Более читаемый формат в современных браузерах:

const pretty = new Intl.DateTimeFormat(locale, {
  dateStyle: "medium",
  timeStyle: "short"
});
console.log(pretty.format(now));
// Примеры: Dec 24, 2025, 14:30 или 24 дек. 2025 г., 14:30

Собираем собственный формат даты (жёсткий порядок и разделители задаём сами):

const parts = new Intl.DateTimeFormat(locale, { day:"2-digit", month:"2-digit", year:"numeric" })
  .formatToParts(now)
  .filter(p => p.type !== "literal");

const obj = {};
for (const p of parts) obj[p.type] = p.value;

console.log(`${obj.day}.${obj.month}.${obj.year}`);
// Пример: 24.12.2025

🔥 Важно: locale влияет только на формат отображения. Часовой пояс определяется окружением браузера, при необходимости его можно зафиксировать через опцию timeZone (IANA, например UTC).

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

😎 DevDocs — обучения через документацию!

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

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

📣 Code Ready | #ресурс

Быстро приводим значение к boolean — без лишних проверок!

В JS логические значения — это не только true и false.
Любое значение в условии считается либо truthy, либо falsy.

По умолчанию falsy всего несколько значений:

false
0
''
null
undefined
NaN

Всё остальное — truthy, даже пустые объекты и массивы.

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

Одно ! инвертирует значение:

!0    // true
!1    // false

Два ! подряд делают именно то, что нужно — приводят значение к true или false:

!!0        // false
!!1        // true
!!'text'   // true
!!null     // false

Это часто удобнее и короче, чем Boolean(value):

Boolean(value); // то же самое, но длиннее

🔥 Поэтому, !!value — быстрый и наглядный способ получить boolean в коде.

📣 Code Ready | #совет

📂 Напоминалка для работы с Map!

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

На картинке — часто используемые методы Map: от добавления и получения значений до перебора данных.

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

📣 Code Ready | #ресурс