Отслеживаем производительность через PerformanceObserver!

Когда нужно понять, что именно тормозит страницу (долгие задачи, layout shifts, загрузка ресурсов) — PerformanceObserver даёт нативный доступ к метрикам браузера прямо в рантайме, без devtools и сторонних SDK.

API позволяет подписываться на события производительности в реальном времени.

Создаём наблюдатель:

const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    console.log(entry);
  });
});

Пример 1 — отслеживание long tasks (блокировки main thread):

observer.observe({
  entryTypes: ['longtask']
});

longtask — любая задача, блокирующая основной поток дольше 50 мс.
Прямой индикатор лагов и фризов UI (Long Tasks API, поддержка зависит от браузера).

Пример 2 — отслеживание layout shifts (CLS):

let clsValue = 0;

const clsObserver = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log('CLS:', clsValue);
    }
  });
});

clsObserver.observe({
  type: 'layout-shift',
  buffered: true
});

Используется для поиска скачков интерфейса при загрузке контента.
CLS считается как накопленное значение layout shift’ов без пользовательского ввода.

Пример 3 — анализ загрузки ресурсов:

const resourceObserver = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    console.log(
      entry.name,
      entry.initiatorType,
      Math.round(entry.duration) + ' мс'
    );
  });
});

resourceObserver.observe({
  entryTypes: ['resource']
});

Позволяет видеть реальные тайминги загрузки скриптов, стилей и изображений (для кросс-доменных ресурсов подробные данные доступны при Timing-Allow-Origin).

PerformanceObserver работает асинхронно — данные предоставляет сам браузер, без ручных замеров.

Когда наблюдение больше не нужно:

observer.disconnect();
clsObserver.disconnect();
resourceObserver.disconnect();

🔥 PerformanceObserver — базовый инструмент диагностики производительности и поиска узких мест прямо в коде приложения.

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

👩‍💻 Точность и согласованность кода благодаря функции автозаполнения!

IntelliCode — улучшает автодополнение в VS Code: предлагает варианты на основе контекста, типа данных и того, что ты уже написал. Удобно в больших проектах, где важно быстрее находить нужные методы и не отвлекаться.

📣 Code Ready | #vscode

👩‍💻 Нужно визуально показать, что введённое значение допустимо?

Псевдоклассы :in-range и :out-of-range в CSS позволяют стилизовать поля формы в зависимости от того, попадает ли введённое значение в заданный диапазон. Они работают с элементами, у которых указаны min и max.

Как используется:

• :in-range — значение корректное и находится в пределах диапазона;

• :out-of-range — значение выходит за допустимые границы;

• можно подсвечивать поля, менять рамку или фон без JavaScript.

Если атрибуты min и max не заданы, то при пустом поле сработает :in-range, а при введённом значении ни один из псевдоклассов не сработает.

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

📂 Напоминалка по циклам в JavaScript!

Например, for удобно использовать, когда заранее известно количество итераций, а for...of — когда нужно пройтись по массиву или строке.

На картинке — 5 циклов, которые постоянно встречаются в коде.

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

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

Анимация размеров с ключевыми словами!

В CSS появился официальный механизм, который разрешает интерполяцию intrinsic-значений размеров. Для этого нужно разрешить использование ключевых слов:

:root {
  interpolate-size: allow-keywords;
}

После этого браузер умеет плавно анимировать переходы между числовым значением и кейвордами (0 - auto, min-content, max-content, fit-content).

Важно: keyword <=> keyword по-прежнему не анимируется.

Простейший пример с <details> начинает работать так:

<details>
  <summary>Показать</summary>
  <div class="content">Скрытое содержимое</div>
</details>

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

.content {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease;
}

details[open] .content {
  height: auto;
}

🔥 Важно понимать, что это именно разрешение интерполяции, а не хак, поэтому логика остаётся декларативной и предсказуемой.

📣 Code Ready | #совет

✍️ JS for Cats — самоучитель для тех, кто устал от скучной теории!

Это необычное руководство по JS, построенное так, чтобы его было легко читать и понимать. Материал объясняет базовые концепции языка простым языком, с примерами и объяснениями. Ресурс подойдёт для знакомства с синтаксисом или для повторения основ без излишне сложной теории.

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

📣 Code Ready | #ресурс

FormData — нативная работа с данными форм и файлами!

FormData — базовый Web API для сбора и отправки данных HTML-форм. Позволяет работать с текстовыми полями и файлами без ручной сериализации и напрямую передаётся в fetch или XMLHttpRequest.

Создание FormData из формы:

const form = document.querySelector('form');
const formData = new FormData(form);

В FormData попадают только successful controls: элементы с name и без disabled, checked checkbox/radio, выбранные файлы и submit-кнопка при реальном submit; без name — не попадают.

Пример 1 — чтение значений:

formData.get('email');
formData.get('password');

get() возвращает первое значение по ключу. Для полей с несколькими значениями используется getAll().

Пример 2 — несколько значений одного поля:

formData.getAll('tags');

Актуально для: checkbox-групп; <select multiple>; динамических списков (повторяющиеся ключи).

Пример 3 — добавление и изменение данных:

formData.set('role', 'admin');
formData.append('token', 'abc123');

set() удаляет все предыдущие значения по ключу и устанавливает новое; append() добавляет ещё одно значение (важно для повторяющихся ключей и файлов)

Пример 4 — работа с файлами:

const fileInput = document.querySelector('input[type="file"]');

if (fileInput.files.length > 0) {
  formData.append('avatar', fileInput.files[0]);
}

Файл передаётся как File (подтип Blob) с именем, MIME-типом и размером. При выборе нескольких файлов (multiple) FormData содержит несколько записей с одинаковым ключом.

Пример 5 — отправка через fetch

fetch('/api/profile', {
  method: 'POST',
  body: formData
});

Не нужно вручную задавать Content-Type, браузер автоматически установит multipart/form-data с корректным boundary.

Пример 6 — перебор всех данных:

for (const [key, value] of formData.entries()) {
  console.log(key, value);
}

🔥 FormData — стандартный и часто незаменимый инструмент для веб-приложений с формами, файлами и реальными пользовательскими данными.

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

👩‍💻 Живой предпросмотр Markdown-файлов во время редактирования!

Markdown Preview Enhanced — расширяет стандартный предпросмотр Markdown в VS Code. Поддерживает диаграммы, формулы, графики, Mermaid, подсветку кода, экспорт в PDF и HTML. Сразу видишь, как будет выглядеть README, документация или статья, без внешних инструментов и лишних шагов.

📣 Code Ready | #vscode

Универсальный hover-оверлей без скриптов и лишних обёрток!

Нужен стабильный hover-оверлей для родителя, который работает над всей карточкой и не конфликтует со сложной вложенностью, absolute-элементами и z-index.

.card:hover::before { background: rgba(0,0,0,.05); }

Иногда визуальный hover выглядит рвано из-за наложений или пересечений. Оверлей может помочь справиться с этой проблемой:

.card { isolation: isolate; }

Создаём новый stacking context, чтобы изолировать слои внутри карточки и избежать конфликтов с внешними z-index и blending.

.card::before { z-index: 1; border-radius: inherit; }
.card > * { position: relative; z-index: 2; }

🔥 Теперь оверлей гарантированно выше фона, но ниже контента, не ломает клики благодаря pointer-events: none и корректно наследует скругления.

📣 Code Ready | #совет

😎 Tutorial Republic — подробный и практичный справочник по JavaScript!

Это полноценный справочник с чёткими объяснениями, примерами кода и интерактивными демо. Каждая тема сопровождается примерами, которые можно сразу попробовать и понять, как именно работает та или иная конструкция. Очень полезно и новичкам, и тем, кто хочет освежить знания или быстро найти пример по конкретной задаче.

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

📣 Code Ready | #сайт

Event Delegation — один обработчик вместо десятков!

Частая ошибка — навешивать обработчик на каждый элемент списка. Это усложняет код, требует повторных подписок при обновлении DOM и не работает для динамически добавленных элементов. Гораздо надёжнее использовать делегирование событий — один обработчик на общем родителе.

Обработчик на каждый элемент:

document.querySelectorAll('.list .item button').forEach(btn => {
  btn.addEventListener('click', () => {
    console.log('Clicked:', btn.dataset.id);
  });
});

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

Делегирование через родителя:

const list = document.querySelector('.list');

list.addEventListener('click', (e) => {
  const button = e.target.closest('button');
  if (!button || !list.contains(button)) return;

  console.log('Clicked:', button.dataset.id);
});

События в DOM всплывают вверх по дереву (bubbling), поэтому родитель может перехватить клик. Через closest() мы определяем фактический источник действия, даже если клик был по вложенному элементу внутри кнопки.

Работает с динамическими элементами:

list.insertAdjacentHTML('beforeend', `
  <li class="item">
    <button data-id="10">New item</button>
  </li>
`);

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

🔥 Подход не применим к событиям без всплытия (например, focus, blur), может конфликтовать с точечным использованием stopPropagation() и требует осознанного выбора контейнера, чтобы не перехватывать лишние события.

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