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

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 | #сайт

Нужно быстро привести CSV-файл к читаемому виду?

CSV to Table — позволяет отобразить содержимое CSV как таблицу прямо в VS Code. Данные выравниваются по столбцам, становятся наглядными и удобными для анализа без открытия сторонних инструментов. Полезно при работе с выгрузками, логами и любыми табличными данными.

📣 Code Ready | #vscode

Почему ломается scroll внутри flex?

Очень частый баг: делаешь колонку с overflow: auto, но скролл не появляется, и блок просто вылезает за пределы контейнера.

.layout {
  display: flex;
  flex-direction: column;
}

.content {
  overflow: auto;
}

Кажется, всё корректно, но flex-элемент по умолчанию не хочет сжиматься по высоте.

Решение — явно разрешить это:

.content {
  min-height: 0;
}

Теперь блок может уменьшаться и скролл начинает работать как ожидается:

.content {
  min-height: 0;
  overflow: auto;
}

Если scroll не работает во flex — почти всегда не хватает именно min-height: 0.

🔥 Это полезно для для чатов, таблиц, sidebar и любых вложенных flex-контейнеров.

📣 Code Ready | #совет

📂 Шпаргалка для CSS Grid!

CSS Grid Layout — представляет собой двумерную систему сеток в CSS. Это пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки.

📣 Code Ready | #ресурс

👩‍💻 Важно держать код предсказуемым и сразу видеть ошибки?

ESLint — это не просто подсветка ошибок, а инструмент анализа кода. Он находит потенциальные баги, антипаттерны и несоответствие правилам проекта, а также умеет автоматически исправлять часть проблем. Работает через конфиги и плагины (React, Next.js и др.), помогает держать код единообразным.

📣 Code Ready | #vscode

✍️ Web Dev Шпаргалка — вся веб-разработка в одном месте!

Удобный справочник, где собраны ключевые аспекты веб-разработки, а также JS: базовый синтаксис, работа с DOM, события, асинхронность, взаимодействие с API. Плюс затронуты важные вещи из Node.js, сборка, инструменты и общая архитектура. Всё подано в сжатом формате, чтобы быстро освежить знания.

📌 Оставляю ссылочку: make-website.ru

📣 Code Ready | #сайт

Как отодвинуть элемент в конец без justify-content?

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

.nav {
  display: flex;
  justify-content: space-between;
}

Но это ломает контроль над расстояниями между остальными элементами.

Есть более точечный и управляемый способ:

.push {
  margin-left: auto;
}

auto-отступ забирает всё свободное пространство и отталкивает элемент вправо:

<nav class="nav">
  <span>Logo</span>
  <span class="push">Menu</span>
</nav>

Это работает не только для одного элемента, но и для групп:

.group {
  margin-left: auto;
}

Теперь можно точно управлять layout без изменения поведения остальных элементов.

🔥 Один margin-left: auto заменяет сложные flex-настройки и даёт контроль над выравниванием.

📣 Code Ready | #совет

Разбираем как не словить утечку памяти на обработчиках событий!

Одна из частых причин утечек — обработчик повесили, а снять забыли. Особенно это неприятно, когда событие висит не на локальном элементе, а на чём-то долгоживущем: window, document, глобальный event bus и т.п.

function mount() {
  window.addEventListener('resize', onResize);
}

function unmount() {
  // забыли снять обработчик
}

Компонента уже нет, а onResize всё ещё вызывается. Плюс callback может держать в замыкании старое состояние, DOM-ноды, данные — и GC не сможет это нормально прибрать.

Правильнее сразу закладывать cleanup:

function mount() {
  window.addEventListener('resize', onResize);
}

function unmount() {
  window.removeEventListener('resize', onResize);
}

Главное — снимать нужно ту же самую функцию.

Вот так не сработает:

el.addEventListener('click', () => doSomething());
el.removeEventListener('click', () => doSomething());

Это две разные функции, даже если выглядят одинаково.

Нормальный вариант:

function handler() {
  doSomething();
}

el.addEventListener('click', handler);
el.removeEventListener('click', handler);

Ещё момент — capture.

el.addEventListener('click', handler, true);
el.removeEventListener('click', handler, false);

Так обработчик не снимется, потому что capture отличается. Для удаления браузер сравнивает type, listener и capture.
passive, once, signal в этом сравнении не участвуют.

Когда обработчиков несколько, удобно использовать AbortController:

const controller = new AbortController();

window.addEventListener('resize', onResize, {
  signal: controller.signal
});

document.addEventListener('visibilitychange', onVisible, {
  signal: controller.signal
});

// cleanup
controller.abort();

abort() снимет все обработчики, которые были добавлены с этим signal.

А если обработчик нужен только один раз:

button.addEventListener('click', handler, { once: true });

После первого вызова он удалится сам. Важный нюанс: удалённый DOM сам по себе ещё не утечка. Если на него нет внешних ссылок — GC его заберёт.

🔥 Проблемы начинаются, когда: обработчик висит на window / document; callback держит старое состояние в замыкании; DOM-нода или данные лежат в массиве, store или кэше.

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