HTMLImageElement.decode() — подготовка изображения до появления в DOM!

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

Для таких случаев существует метод decode(), который позволяет дождаться момента, когда изображение будет декодировано браузером и готово к безопасному отображению. Создадим объект изображения:

const image = new Image();

image.src = '/images/photo.jpg';

await image.decode();

После установки src браузер начинает загрузку ресурса. Метод decode() не является механизмом загрузки изображения — он ожидает завершения загрузки и последующего декодирования, чтобы браузер не выполнял эту работу непосредственно в момент первого отображения.

После успешного выполнения Promise изображение можно добавлять в DOM:

const image = new Image();

image.src = '/images/photo.jpg';

await image.decode();

document.body.append(image);

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

Метод особенно полезен при динамической замене изображений:

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

const nextImage = new Image();

nextImage.src = '/images/next.jpg';

await nextImage.decode();

preview.replaceWith(nextImage);

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

Важно учитывать разницу между загрузкой и декодированием. Событие load сообщает о завершении загрузки ресурса, а decode() отвечает за готовность изображения к отображению без дополнительной подготовки в момент рендера. Например:

image.onload = () => {
  console.log('Изображение загружено');
};

await image.decode();

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

При ошибке загрузки или невозможности декодировать изображение Promise будет отклонён:

try {
  await image.decode();
} catch (error) {
  console.error('Не удалось подготовить изображение', error);
}

Важно учитывать, что decode() не решает проблему layout shift (CLS), если размеры изображения заранее неизвестны. Для предотвращения скачков интерфейса рекомендуется задавать размеры через width / height или использовать aspect-ratio. Например:

<img src="/images/photo.jpg" width="800" height="600">

decode() широко применяется в современных веб-интерфейсах: галереях, слайдерах, редакторах изображений и компонентах с динамическим обновлением контента, где важно контролировать момент появления изображения.

🔥 HTMLImageElement.decode() позволяет синхронизировать отображение изображения с процессом его подготовки браузером и избежать визуальных артефактов при динамическом обновлении DOM.

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

👨‍💻 FrontendBase — база знаний по фронтенд-разработке!

На сайте собраны подробные статьи по фронтенду: HTML, CSS, JavaScript, TypeScript, React, Vue и другим технологиям. Можно найти разборы популярных методов, примеры кода, объяснения сложных тем и решения типичных ошибок, с которыми сталкиваются разработчики.

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

📣 Code Ready | #сайт

URLSearchParams — разбираем работу с параметрами URL!

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

https://example.com/products?category=phone&page=2

Здесь category и page — это query-параметры, которые содержат данные для отображения нужного состояния страницы.

Получить всю строку параметров можно через:

const query = window.location.search;

console.log(query);

Результат:

?category=phone&page=2

Но ручной разбор через split() быстро становится неудобным. Нужно самостоятельно обрабатывать специальные символы, проверять наличие значений и учитывать параметры с одинаковыми именами.

Для этого в JavaScript есть стандартный API URLSearchParams. Он позволяет получать, изменять и удалять параметры URL без ручной обработки строк. Создаём объект на основе query-части текущего URL:

const params = new URLSearchParams(
  window.location.search
);

Теперь получить значение параметра можно через get():

const category = params.get('category');

console.log(category);

Результат:

phone

Если параметра нет в URL, метод get() вернёт null. Перед чтением значения можно проверить наличие параметра через has():

if (params.has('page')) {
  console.log(params.get('page'));
}

Это удобно, когда логика интерфейса зависит от определённых параметров.

URLSearchParams позволяет не только читать данные, но и изменять их. Например, добавим параметр сортировки:

params.set(
  'sort',
  'price'
);

console.log(
  params.toString()
);

Результат:

category=phone&page=2&sort=price

Метод set() заменяет существующее значение или создаёт новый параметр, если его ещё нет.

Для удаления параметров используется delete():

params.delete('page');

Если один параметр может иметь несколько значений, например несколько выбранных тегов, используется getAll():

const params = new URLSearchParams(
  'tag=js&tag=css'
);

console.log(
  params.getAll('tag')
);

Результат:

['js', 'css']

Для добавления дополнительного значения без замены существующего используется append():

params.append(
  'tag',
  'html'
);

Также URLSearchParams автоматически кодирует специальные символы. Например:

const params = new URLSearchParams();

params.set(
  'search',
  'frontend developer'
);

console.log(
  params.toString()
);

Результат:

search=frontend+developer

Не нужно вручную вызывать encodeURIComponent() — кодирование выполняется автоматически при преобразовании параметров в строку.
URLSearchParams часто используется вместе с фильтрами, роутингом и состоянием интерфейса. Например, каталог товаров может хранить выбранную категорию, сортировку и текущую страницу прямо в URL. При открытии такой ссылки приложение получает параметры и восстанавливает нужное состояние.

🔥 URLSearchParams — стандартный инструмент JavaScript для работы с query-параметрами, который делает обработку URL проще и избавляет от ручного парсинга строк.

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

🐱 Front-End Checklist — чек-лист для frontend-разработки!

Этот репозиторий помогает понять, из каких деталей состоит frontend-проект и что важно учитывать кроме самой вёрстки и JavaScript-кода. Внутри собраны практические рекомендации по HTML-структуре, CSS, JavaScript, производительности сайта, SEO, доступности, безопасности, оптимизации ресурсов, настройке изображений, метатегов и др.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

👩‍💻 Создаём списки терминов с помощью <dl>, <dt> и <dd>!

Эти три тега используются для создания списков описаний, где каждому термину соответствует его определение или пояснение.

Каждый тег выполняет свою роль:
• <dl> — контейнер для всего списка.
• <dt> — термин или название.
• <dd> — описание или значение термина.

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

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

Element.replaceChildren() — полная замена содержимого элемента через DOM API!

Для полной замены содержимого элемента часто сначала очищают контейнер, а затем добавляют новые узлы либо используют innerHTML.
Для этой задачи DOM API предоставляет специализированный метод replaceChildren().

Очистить элемент можно одним вызовом:

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

list.replaceChildren();

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

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

const item = document.createElement('li');
item.textContent = 'JavaScript';

list.replaceChildren(item);

После вызова прежние дочерние узлы будут удалены, а переданный элемент станет единственным дочерним узлом контейнера. Метод принимает любое количество DOM-узлов:

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

const title = document.createElement('h2');
title.textContent = 'Статьи';

const description = document.createElement('p');
description.textContent = 'Последние публикации';

container.replaceChildren(title, description);

Также можно передавать строки:

container.replaceChildren('Загрузка...');

Они автоматически преобразуются в текстовые узлы. Если передать существующий DOM-узел, он будет не скопирован, а перемещён:

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

sidebar.replaceChildren(card);

Это соответствует общей модели DOM: один узел не может одновременно находиться в нескольких местах дерева. В отличие от innerHTML, метод не разбирает переданные строки как HTML-разметку:

container.replaceChildren('<strong>Text</strong>');

В контейнер будет добавлен обычный текст:

<strong>Text</strong>

Если требуется вставить HTML-разметку, можно использовать innerHTML или insertAdjacentHTML(), но только для доверенной либо предварительно санитизированной разметки. Более безопасный вариант — сформировать необходимое дерево DOM-узлов программно.

🔥 replaceChildren() определён в DOM Standard и позволяет заменить всё содержимое одним вызовом. Это делает намерение кода более явным и избавляет от необходимости отдельно очищать контейнер перед добавлением новых узлов.

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

👩‍💻 Можно ли одной строкой сбросить все CSS-свойства элемента?

Свойство all позволяет одновременно сбросить или переопределить почти все CSS-свойства элемента. Это удобно, когда нужно убрать влияние внешних стилей и начать оформление с чистого листа.

Основные значения:
• initial — сбрасывает свойства к значениям по умолчанию;
• inherit — наследует все свойства от родителя;
• unset — сочетает initial и inherit в зависимости от свойства;
• revert — возвращает стили, заданные браузером или пользовательскими стилями.

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

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

URL.canParse() — нативная проверка URL без try...catch!

При работе с пользовательскими данными часто требуется проверить, может ли строка быть разобрана как URL. Распространённый подход — использовать конструктор URL внутри try...catch, поскольку при некорректной строке он выбрасывает исключение:

try {
  new URL(value);
} catch {
  console.log('Не удалось разобрать URL');
}

Современный Web API предоставляет более удобный способ — статический метод URL.canParse(). Он проверяет, может ли строка быть разобрана по алгоритму URL Standard, и возвращает true или false без использования try...catch:

URL.canParse('https://example.com');
// true

URL.canParse('not-a-url');
// false

Для относительных адресов необходимо передать базовый URL:

URL.canParse('/users/1', 'https://example.com');
// true

Без базового URL такой вызов вернёт false, поскольку относительный адрес невозможно разрешить без контекста.

Если нужен только результат проверки, URL.canParse() — оптимальный выбор. Если после проверки требуется объект URL, удобнее сразу использовать URL.parse(), чтобы не выполнять разбор дважды:

const url = URL.parse(value);

if (url) {
  console.log(url.hostname);
}

URL.parse() возвращает объект URL при успешном разборе и null при ошибке. Например, для проверки пользовательского ввода:

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

if (!URL.canParse(input.value)) {
  input.setCustomValidity('Введите абсолютный URL');
} else {
  input.setCustomValidity('');
}

Если приложение допускает относительные адреса, передайте document.baseURI вторым аргументом. Важно понимать, что URL.canParse() проверяет только возможность разбора строки. Метод не проверяет существование ресурса, доступность сервера, допустимость протокола для приложения или безопасность адреса.

Например, URL с протоколом javascript: или data: может успешно пройти проверку. Если приложение принимает только HTTPS, протокол необходимо проверить отдельно:

const url = URL.parse(value);

if (url?.protocol === 'https:') {
  // дальнейшая обработка
}

Перед выполнением запроса удобно сразу получить объект URL:

const url = URL.parse(apiUrl, document.baseURI);

if (!url || !['http:', 'https:'].includes(url.protocol)) {
  throw new Error('Недопустимый адрес API');
}

await fetch(url);

document.baseURI учитывает базовый адрес документа, включая значение элемента <base>. Проверка протокола также не защищает от SSRF, поэтому на сервере необходима дополнительная валидация адресов.

🔥 URL.canParse() подходит для случаев, когда нужна только проверка возможности разбора URL, а URL.parse() — когда требуется сразу получить объект URL. При использовании этих методов в проектах с поддержкой старых браузеров и устаревших WebView следует учитывать совместимость.

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

Вышла интересная статья на Хабре: «TAMA-90: тамагочи из 90-х своими руками на JavaScript»!

В этой статье:
• Показывается, как создать современную версию тамагочи на чистом JavaScript без фреймворков и сторонних библиотек;
• Разбирается архитектура проекта, работа с Canvas, localStorage, игровой логикой, случайными событиями и мини-играми;
• Объясняется, как программно рисовать пиксельных питомцев, организовать сохранения, коллекцию персонажей и систему развития без готовых спрайтов.

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

📣 Code Ready | #статья

👩‍💻 Правильный способ расшифровать аббревиатуры!

Тег <abbr> используется для обозначения аббревиатур и сокращений. Благодаря атрибуту title можно указать их полную расшифровку, которую браузер обычно показывает при наведении курсора.

Чаще всего <abbr> используют для:
• технических терминов (HTML, CSS, API);
• названий организаций;
• единиц измерения;
• общепринятых сокращений.

Для максимальной пользы рекомендуется всегда указывать атрибут title с полной расшифровкой сокращения.

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

🤔 Путь HTML/CSS — полезный ресурс для изучения верстки!

Здесь разобраны основы создания веб-страниц: структура HTML-документа, теги, семантика, CSS-свойства, блочная модель, позиционирование, формы, адаптивная верстка и работа с реальными макетами. Нужно не просто читать материал, а выполнять задания: сверстать блоки, меню, формы, вкладки и полноценную страницу по макету.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

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

Тег <canvas> добавляет растровый холст на страницу. Этот холст можно использовать для отрисовки 2D- или 3D-графики, анимаций, видео.

Он используется для:
• интерактивных графиков и диаграмм;
• анимаций и визуальных эффектов;
• браузерных игр;
• обработки изображений;
• 2D- и 3D-графики через Canvas API и WebGL.

Для работы с холстом обычно получают один из контекстов:
• 2d — обычная двумерная графика;
• webgl — аппаратно ускоренная 3D-графика.

Элементы, нарисованные внутри <canvas>, не являются отдельными DOM-элементами — браузер воспринимает их как единое изображение

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

Почему CSS-переменные раньше не анимировались?

Многие пытаются сделать так:

.box {
  transition: --angle .3s;
}

Но обычная CSS-переменная — это просто строка. Браузер не знает, как плавно перейти от 0deg к 180deg, поэтому анимация не работает.

Регистрируем переменную через @property.

@property --angle {
  syntax: "<angle>";
}

Теперь браузер знает тип значения и умеет интерполировать его.

Остаётся использовать переменную как обычно.

.box {
  transform: rotate(var(--angle));
}

И менять её значение.

.box:hover {
  --angle: 180deg;
}

Теперь поворот происходит плавно без JS.

🔥 @property превращает CSS-переменные из обычных строк в типизированные значения, которые можно валидировать и анимировать.

📣 Code Ready | #совет

Крутая статья недавно вышла на Хабре: «Заменяем JavaScript с помощью HTML и CSS»

В этой статье:
• использование `:has()` для управления состояниями компонентов;
• создание модальных окон и подсказок через Popover API;
• валидация форм с помощью встроенных возможностей браузера;
• стилизация сложных интерактивных состояний только средствами CSS.

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

📣 Code Ready | #статья

Node.normalize(): восстановление нормализованной формы текстовых узлов в DOM!

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

const container = document.createElement('div');
const text = document.createTextNode('Hello');

container.append(text);

const tail = text.splitText(2);

console.log([...container.childNodes].map(node => node.data));
// ['He', 'llo']

Для рендеринга это обычно не имеет значения:

console.log(container.textContent);
// Hello

Но для кода, который анализирует структуру дерева через childNodes, firstChild, nextSibling или хранит ссылки на конкретные Text-узлы, такая фрагментация уже существенна.

Метод Node.normalize() приводит всё поддерево узла к нормализованной форме:

container.normalize();

console.log(container.childNodes.length);
// 1

console.log(container.firstChild.data);
// Hello

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

При объединении данные последующих Text-узлов добавляются к первому узлу группы, а сами последующие узлы удаляются из дерева.

console.log(tail.parentNode);
// null

Сохранённая ссылка tail при этом не становится невалидной: объект продолжает существовать, но больше не является частью DOM-дерева.

Важно и другое: normalize() не объединяет весь текст элемента в один узел, если между текстовыми узлами находятся другие узлы.

<p>Hello <strong>DOM</strong>!</p>

Здесь текст до и после <strong> останется в разных Text-узлах и после нормализации.

Метод особенно полезен после splitText(), операций с Range и редакторских сценариев, где текстовые узлы регулярно разрезаются и склеиваются:

const paragraph = document.createElement('p');
const text = document.createTextNode('Hello world');

paragraph.replaceChildren(text);

text.splitText(5);

console.log(paragraph.childNodes.length);
// 2

paragraph.normalize();

console.log(paragraph.childNodes.length);
// 1

🔥 Node.normalize() не меняет текстовое содержимое элемента, но приводит его поддерево к нормализованной форме: без пустых и соседних текстовых узлов. Это полезно перед обходом DOM, сериализацией, сравнением структуры или выполнением алгоритмов, которые рассчитывают на предсказуемую организацию Text-узлов.

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

👩‍💻 Блок для видео, аудио и прочего контента!

Блок для вставки на страницу контента в сторонних форматах, которые браузер отображает с помощью плагинов. Чаще всего используется для видео- и аудиоконтента. Отображение вставленного контента будет зависеть от атрибутов тега <embed>, типа загружаемого контента и плагинов, установленных в браузере.

Атрибуты:
• src — ссылка на загружаемый контент;
• type — тип загружаемого контента в формате MIME. Тип указывать не обязательно, но желательно. Так браузер будет точно знать, какой плагин использовать для отображения контента;
• width — ширина в пикселях;
• height — высота в пикселях.

<embed> не заменяет универсальное решение для всех типов контента. Например, для видео лучше использовать <video>, для аудио — <audio>, а для документов чаще применяют <iframe>.

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