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

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

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

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

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

Утилита для работы с URL-параметрами!

Вынесение фильтров и состояния в URL улучшает навигацию и восстановление страницы. Ниже — компактный инструмент для работы с query-строкой.

Разбираем строку запроса в объект:

function parseQuery(query = location.search) {
  return Object.fromEntries(new URLSearchParams(query));
}


URLSearchParams обеспечивает корректную обработку спецсимволов и предсказуемый парсинг — особенно важно при динамических параметрах.

Формируем query-строку из объекта:

function toQuery(obj) {
  return "?" + new URLSearchParams(obj).toString();
}

Это упрощает управление состоянием интерфейса и повышает устойчивость навигации.

Читаем параметры: пример, как быстро получить состояние фильтров или любой другой конфигурации из строки URL — удобно при инициализации страницы или восстановлении состояния.

const params = parseQuery("?page=2&sort=asc");
console.log(params);
// → { page: "2", sort: "asc" }

Создаём новый URL:

const next = toQuery({ page: 3, sort: "desc" });
console.log(next);
// → "?page=3&sort=desc"

🔥 Функции подходят для фильтров, пагинации, состояния таблиц, сохранения пользовательских настроек и формирования shareable-ссылок.

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

👩‍💻 Можно ли анимировать элемент при его первом появлении на странице?

Директива @starting-style позволяет задать начальные стили для элемента в момент его появления на странице.

Как это работает:

• Браузер применяет стили из @starting-style только в момент появления элемента;

• Затем элемент плавно переходит к основным стилям;

• Отлично работает с transition, без JavaScript.

Полезно для анимаций модальных окон, всплывающих блоков и динамически добавляемых элементов, когда важен плавный вход в интерфейс.

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

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

DOM — это то, через что JavaScript управляет HTML: ищет элементы, создаёт новые узлы, вешает события и реагирует на действия пользователя.

На картинке — базовые методы document и node, а также самые часто используемые события мыши, клавиатуры и форм.

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

📣 Code Ready | #ресурс

👩‍💻 Размечает картинку невидимыми областями!

С помощью тега <area> можно сделать красивую навигацию, разметив обычную картинку областями и указав для них ссылки.

Основные формы областей:

• shape="rect" — прямоугольная область;
• shape="circle" — круг;
• shape="poly" — произвольный многоугольник.

Самые ёмкие в записи формы <area> — прямоугольник и круг, поскольку они требуют меньше всего координат. Если вам плохо от огромного кода, лучше отказаться от произвольных областей.

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

👩‍💻 Знали, что редактор может помогать вам писать код?

GitHub Copilot — анализирует контекст файла и предлагает целые строки, функции и даже блоки логики прямо во время набора. Он понимает JavaScript, комментарии, имена переменных и стиль проекта, подстраивается под то, что уже пишешь.

📣 Code Ready | #vscode

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

Современные ОС позволяют пользователю снизить количество анимаций. Браузер транслирует это предпочтение через 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 | #атрибут