❤️ Нашёл свежую статью на Хабре: «Делаем фронтенд-сборку для верстки HTML-писем на MJML»

В этой статье:
• Создадите отдельный репозиторий для верстки email-шаблонов с помощью MJML;
• Настроите frontend-сборку: сможете писать шаблоны, автоматически компилировать MJML в HTML;
• Реализуете тестовую отправку писем через SMTP, чтобы сразу увидеть результат в почтовом клиенте;

🔊 Читайте подробнее на Habr!

📣 Code Ready | #статья

matches(): проверка элемента на соответствие селектору!

Когда работаешь с событиями или обходом DOM, часто нужно понять — подходит ли конкретный элемент под CSS-селектор. Для этого есть Element.matches().

Метод возвращает true или false, проверяя сам элемент (без подъёма по DOM, в отличие от closest()).

Базовый пример:

const el = document.querySelector('.item');

if (el.matches('.item.active')) {
  console.log('active item');
}

Пример 1 — фильтрация в делегировании событий:

document.addEventListener('click', (e) => {
  if (!(e.target instanceof Element)) return;
  if (!e.target.matches('button[data-action]')) return;

  console.log('button clicked');
});

Здесь важно: проверяется именно e.target, без поиска родителей.

Пример 2 — комбинация с closest():

document.addEventListener('click', (e) => {
  if (!(e.target instanceof Element)) return;

  const item = e.target.closest('.list-item');
  if (!item || !item.matches('.active')) return;

  console.log('active item clicked');
});

closest() находит нужный элемент, matches() уточняет состояние.

Пример 3 — условная логика без лишних переменных:

if (element.matches(':not(.disabled):hover')) {
  // логика для активного состояния
}

Пример 4 — работа с псевдоклассами:

if (input.matches(':focus')) {
  console.log('input in focus');
}

Поддерживаются обычные CSS-селекторы (включая псевдоклассы). Псевдоэлементы (::before, ::after и т.п.) не применимы.

Пример 5 — проверка перед модификацией:

if (!el.matches('.processed')) {
  el.classList.add('processed');
}

Избавляет от дублирующих операций. Важно: если селектор невалидный — будет выброшено исключение, а не возвращён false.

Ещё момент: matches() не ищет родителей или потомков — только текущий элемент. Если нужна проверка вверх по DOM — это задача для closest().

🔥 matches() — полезный инструмент для точечной проверки элементов в сложной DOM-логике.

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

📂 Шпаргалка Flexbox позиционирования!

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

Реально полезная тема, поэтому даю вам очень крутую шпаргалку для ее изучения, пользуемся)

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

👩‍💻 Атрибут aria-label — доступность без лишней разметки!

Это атрибут для screen reader’ов, который задает текстовое описание элемента для пользователей с нарушениями зрения.

Есть теги и роли, для которых его точно нельзя использовать:

<caption> и роль caption.
<code> и роль code.
<dd> и роль definition.
<dt>, <dfn> и роль term.
<del> и роль deletion.
<em> и роль emphasis.
<ins> и роль insertion.
<mark> и роль mark.
и др.

Когда у элемента должно быть видимое для всех имя, используйте aria-labelledby.

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

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

Version Lens — показывает актуальные версии пакетов прямо в package.json, рядом с каждой зависимостью отображается доступное обновление. Можно быстро увидеть устаревшие версии и обновить их без лишних проверок, что упрощает поддержку проекта.

📣 Code Ready | #vscode

😍 QuickRef — компактная шпаргалка по JavaScript!

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

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

📣 Code Ready | #сайт

Как защитить верстку от длинных строк?

Интерфейс может сломаться из-за длинного текста: URL, email, UUID. Он не переносится и раздувает контейнер.

Часто пытаются решать через word-break:

.text {
  word-break: break-all;
}

Но это агрессивный вариант, слова ломаются, читаемость страдает.

Есть более аккуратное решение. Браузер будет переносить текст только при необходимости, чтобы избежать переполнения:

.text {
  overflow-wrap: anywhere;
}

В обычных условиях слова не трогаются, но при нехватке места могут переноситься.

Если используешь flex/grid — иногда нужен min-width: 0, иначе элемент может не сжиматься.

🔥 Это полезно для чатов, таблиц, карточек, комментариев и любых данных, которые ты не контролируешь.

📣 Code Ready | #совет

📂 Напоминалка по сериализации!

JSON.stringify — не просто утилита для преобразования объектов в строку, с помощью replacer можно точно контролировать структуру выходного JSON: исключать поля, трансформировать значения и адаптировать неподдерживаемые типы.

На картинке — фильтрация лишних данных и приведение Set к массиву, так как нативно он не сериализуется.

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

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

classList: управление классами без ручных операций со строками!

Работа с классами через className — это строка: конкатенация, парсинг, риск случайно перезаписать существующие значения. Element.classList решает это на уровне API и даёт удобный способ работать с классами как с отдельными токенами.

classList возвращает DOMTokenList — набор уникальных значений, где каждый класс обрабатывается независимо.

Базовый сценарий — добавить или убрать класс:

const el = document.querySelector('.card');

el.classList.add('active');
el.classList.remove('hidden');

В реальной логике часто нужно проверить текущее состояние элемента. Для этого есть contains:

if (el.classList.contains('active')) {
  console.log('already active');
}

Очень частый кейс в UI — переключение состояния. Для этого используется toggle:

el.classList.toggle('open');

Если нужно не просто переключить, а задать конкретное состояние — можно передать второй аргумент:

el.classList.toggle('open', true);  // добавит
el.classList.toggle('open', false); // удалит

API позволяет работать сразу с несколькими классами, без лишних вызовов:

el.classList.add('visible', 'animated');
el.classList.remove('small', 'disabled');

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

document.addEventListener('click', (e) => {
  const button = e.target.closest('[data-toggle]');
  if (!button) return;

  const targetSelector = button.dataset.toggle;
  const target = document.querySelector(targetSelector);

  if (!target) return;

  target.classList.toggle('active');
});

Для замены одного класса на другой есть отдельный метод:

el.classList.replace('btn-primary', 'btn-secondary');

Если исходного класса нет — метод просто ничего не сделает и вернёт false.

Так как classList — это итерируемая коллекция, по ней можно пройтись циклом:

for (const className of el.classList) {
  console.log(className);
}

Важно учитывать, что classList не допускает дубликатов — повторное добавление класса будет проигнорировано.

В отличие от него, className работает как обычная строка:

el.className = 'new-class';

Такое присваивание полностью перезапишет все классы элемента, что легко приводит к побочным эффектам. classList позволяет изменять их точечно и безопаснее.

🔥 Под капотом classList синхронизирован с атрибутом class, поэтому любые изменения сразу отражаются в DOM. classList — базовый инструмент для управления состояниями интерфейса.

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

👩‍💻 Полезные горячие клавиши VSCode

• Ctrl + Shift + K — Удаляет текущую строку целиком.

• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым.

• Ctrl + D — множественное редактирование. Изменит одинаковый код сразу в нескольких местах.

📣 Code Ready | #vscode

👩‍💻 Можно ли нажать на элемент пальцем? Что-то вроде тач-событий в JavaScript.

Свойство touch-action управляет взаимодействием с сенсорным экраном и напоминает более распространённое свойство pointer-events, которое регулирует взаимодействие мышкой.

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

• none — запрещает все типы взаимодействий.
• auto — разрешает все типы взаимодействия.
• manipulation — элемент можно сдвигать и зумить.
• pan-down — элемент можно смещать только если начать движение снизу вверх.
• pan-up — элемент можно смещать только если начать движение сверху вниз.
• pinch-zoom — элемент можно зазумить щипком.

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

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

Emmet Cheat Sheet — сайт-шпаргалка для Emmet. Здесь собраны все аббревиатуры и формулы, при написании которых раскрываются большие куски кода, а это очень ускоряет разработку сайта.

📌 Ссылочка: docs.emmet.io/cheat-sheet

📣 Code Ready | #ресурс

😍 Полезную статью нашёл на Хабре: «Flex vs Grid: объяснение разницы на практике»!

В этой статье:
• На примерах показывается, в каких задачах Flexbox удобнее, а где Grid даёт более чистую и масштабируемую архитектуру;
• Разбираются типичные кейсы верстки, с кодом и объяснением поведения каждого подхода;
• Объясняется ключевая разница: Flex как инструмент для потокового выравнивания и Grid как система для построения структуры интерфейса.


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

📣 Code Ready | #статья

Почему hover ломает UX на мобильных и как это исправить?

На тач-устройствах :hover ведёт себя странно: может залипать, срабатывать после тапа или вообще ломать визуальные состояния. Это особенно заметно в карточках, меню и кнопках.

Обычно стили пишут без условий:

.button:hover {
  background: #000;
}

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

Есть нативный способ разделить поведение устройств:

@media (hover: hover) {
  .button:hover {
    background: #000;
  }
}

Теперь hover-эффекты работают только на устройствах, где реально есть курсор.

Можно отдельно настроить поведение для тач-устройств:

@media (hover: none) {
  .button:active {
    background: #000;
  }
}

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

📣 Code Ready | #совет

🐱 Devhints CSS — компактная шпаргалка по CSS в формате “всё на одной странице”!

Сайт где собраны основные свойства, селекторы и приёмы CSS с примерами кода в максимально сжатом виде. Формат позволяет быстро находить нужные конструкции и сразу применять их. Подходит как быстрый справочник во время разработки.

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

📣 Code Ready | #сайт