👩‍💻 Смещение якорей через scroll-margin-top!

Когда на странице есть position: sticky фиксированная шапка, переход по якорю почти всегда ломается.

Контент прокручивается, но заголовок уезжает под хедер:

<a href="#section">Перейти</a><h2 id="section">Раздел</h2>

По умолчанию браузер скроллит элемент ровно к верху вьюпорта, не зная про фиксированную шапку.

Решение есть нативное и очень простое, добавить отступ для скролла самому элементу:

h2 {
  scroll-margin-top: 72px;
}

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

Если высота шапки задана переменной, можно так:

:root {
  --header-h: 72px;
}

h2 {
  scroll-margin-top: var(--header-h);
}

🔥 Это работает для якорных ссылок, scrollIntoView(), навигации по оглавлению, документации и лонгридов.

📣 Code Ready | #совет

Отслеживаем производительность через 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