👩‍💻 Можно ли стилизовать текст, к которому пользователь перешёл по ссылке?

::target-text — псевдоэлемент, который применяется к тексту, найденному через текстовый фрагмент в URL вида #:~:text=.... Он позволяет задать стили выделения, которые браузер покажет после перехода по такой ссылке.

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

• изменить фон выделенного текста;

• добавить собственный цвет текста;

• настроить контрастное выделение вместо стандартного.

Стандартные якоря #id подсвечивают целевой элемент. Текстовые фрагменты #:~:text=... указывают на конкретную строку текста. ::target-text позволяет настраивать стиль этого автоматического выделения (обычно это жёлтая подсветка от браузера), чтобы он соответствовал дизайну.

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

Intl.ListFormat: форматируем списки с учётом языка пользователя!

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

Самый простой вариант — использовать join():

const users = [
  'Alex',
  'Maria',
  'John'
];

users.join(', ');

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

Если приложение поддерживает несколько языков, обычно появляются ручные проверки:

if (locale === 'en') {
  // добавить and
}

if (locale === 'ru') {
  // добавить и
}

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

Создаём форматтер и передаём нужную локаль:

const formatter =
  new Intl.ListFormat('ru');

formatter.format([
  'JavaScript',
  'TypeScript',
  'Python'
]);

Результат: JavaScript, TypeScript и Python.

При изменении локали правила форматирования изменятся автоматически:

const formatter =
  new Intl.ListFormat('en');

formatter.format([
  'JavaScript',
  'TypeScript',
  'Python'
]);

Результат: JavaScript, TypeScript, and Python.

Intl.ListFormat использует встроенные правила локализации JavaScript, поэтому не нужно самостоятельно реализовывать союзы, разделители и особенности разных языков.

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

const formatter =
  new Intl.ListFormat(
    'ru',
    {
      type: 'disjunction'
    }
  );

formatter.format([
  'Карта',
  'PayPal',
  'Перевод'
]);

Результат: Карта, PayPal или Перевод.

По умолчанию используется conjunction — обычное перечисление через союз "и". Значение disjunction используется для альтернатив через "или".

Также важно понимать, что Intl.ListFormat не изменяет исходные данные. Он только создаёт новую строку:

const tags = [
  'Frontend',
  'Backend',
  'DevOps'
];

const text =
  new Intl.ListFormat('ru')
    .format(tags);

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

🔥 Intl.ListFormat позволяет использовать стандартные правила локализации JavaScript вместо ручной сборки строк через join() и множества условий для разных языков.

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

Наткнулся на необычную и очень интересную статью на Хабре: «PowerHTML»!

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

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

📣 Code Ready | #статья

Element.animate() — управление композицией анимаций в браузере!

CSS-анимации удобны, пока элемент имеет одно состояние. Но когда несколько эффектов должны управляться из JavaScript, Web Animations API даёт больше контроля.

Например, несколько анимаций одного элемента могут существовать одновременно:

const fade = element.animate(
  [
    { opacity: 0 },
    { opacity: 1 }
  ],
  {
    duration: 300
  }
);

const move = element.animate(
  [
    { transform: 'translateY(20px)' },
    { transform: 'translateY(0)' }
  ],
  {
    duration: 300
  }
);

Браузер создаёт отдельные Animation-объекты и объединяет их эффекты при расчёте итогового стиля элемента.

У каждой анимации есть собственное состояние:

console.log(fade.playState);

console.log(move.currentTime);

currentTime позволяет управлять прогрессом вручную:

fade.currentTime = 150;

Анимация сразу перейдёт примерно к середине выполнения. Это полезно для синхронизации анимаций с внешним состоянием, например с прогрессом загрузки:

animation.currentTime =
  progress * animation.effect.getTiming().duration;

Также Web Animations API позволяет изменять параметры уже созданного эффекта:

animation.effect.updateTiming({
  duration: 1000
});

При этом не нужно пересоздавать анимацию. Отдельно стоит учитывать композицию свойств. Если два эффекта изменяют один и тот же параметр:

element.animate(
  [
    { transform: 'translateX(100px)' }
  ],
  {
    duration: 1000
  }
);

element.animate(
  [
    { transform: 'scale(1.2)' }
  ],
  {
    duration: 1000
  }
);

Оба эффекта работают с одним CSS-свойством transform. Итоговое поведение зависит от правил композиции анимаций, поэтому параллельное изменение одного свойства может дать неожиданный результат.

Для сложных случаев можно управлять композицией через composite:

element.animate(
  [
    {
      transform: 'translateX(100px)'
    }
  ],
  {
    duration: 500,
    composite: 'add'
  }
);

В этом режиме новое значение добавляется к существующему, а не заменяет его.

🔥 Element.animate() — это не просто замена CSS keyframes. Web Animations API предоставляет полноценную модель управления анимациями: состояние, время выполнения, изменение параметров и правила композиции эффектов.

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

👩‍💻 Один тег чтобы обернуть секцию с поиском или фильтром!

Тег <search> используется для обозначения секции страницы, которая содержит поиск или элементы фильтрации. Он помогает браузерам, поисковым системам и вспомогательным технологиям лучше понимать структуру страницы.

Использовать <search> можно для:
• формы поиска по сайту;
• фильтров каталога;
• панели поиска по таблицам или спискам;
• блока с настройками фильтрации.

Важно: тег относительно новый, поэтому поддержка в некоторых браузерах и вспомогательных технологиях пока развивается. При необходимости можно дополнительно использовать role="search".

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

Range API — работа с диапазонами DOM и фрагментами документа!

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

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

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

const selection = window.getSelection();

if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);

  console.log(range.toString());
}

После получения Range мы можем работать с выбранным участком документа.

Метод toString() удобен, когда нужен только текст выделения. Но он возвращает обычную строку и не сохраняет HTML-структуру внутри этого фрагмента. Например, есть такой DOM:

<p>
  Hello <strong>JavaScript</strong>
</p>

Если получить текст через:

range.toString();

мы получим: Hello JavaScript. Вся внутренняя структура будет потеряна, потому что результатом является просто строка.

Если нужно сохранить HTML-узлы внутри выделенного участка, используется cloneContents(). Этот метод создаёт копию выбранного фрагмента в виде DocumentFragment, сохраняя вложенные элементы:

const fragment = range.cloneContents();

document.body.appendChild(fragment);

Теперь вместе с текстом сохранится и структура:

<strong>JavaScript</strong>

Range можно не только получать из пользовательского выделения, но и создавать вручную. Например, можно программно выделить всё содержимое определённого элемента:

const element = document.querySelector('#editor');

const range = document.createRange();

range.selectNodeContents(element);

Теперь диапазон знает, какой фрагмент DOM нужно выделить.
Остаётся передать его в объект Selection, чтобы браузер показал это выделение пользователю:

const selection = window.getSelection();

selection.removeAllRanges();
selection.addRange(range);

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

Например, заменить выделенный пользователем текст:

const range = window
  .getSelection()
  .getRangeAt(0);

const span = document.createElement('span');

span.textContent = 'Новый текст';

range.deleteContents();

range.insertNode(span);

Сначала deleteContents() удаляет выбранный фрагмент, а затем insertNode() вставляет новый элемент точно туда, где находился диапазон. Это особенно полезно в редакторах текста, где нужно сохранить структуру документа и позицию изменения.

Есть ещё один похожий метод — extractContents(). В отличие от cloneContents(), который создаёт копию, extractContents() забирает содержимое из DOM и удаляет его с текущего места:

const fragment = range.extractContents();

Полученный DocumentFragment можно затем вставить в другой участок документа. Range API используется внутри rich text редакторов, систем подсветки поиска, комментариев и любых интерфейсов, где требуется работать с отдельными частями документа.

🔥 Range API — инструмент для точной работы с фрагментами DOM: выделять, копировать, извлекать, удалять и заменять части документа без полной пересборки элемента.

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

🐱 8 шпаргалок для веб-разработчика — полезная подборка по HTML, CSS, JavaScript, React и Git!

На странице собрана крутая подборка из 8 полезных шпаргалок для веб-разработчиков. Здесь справочники по HTML, CSS, Grid Layout, Flexbox, JavaScript, React и Git с примерами кода, схемами и наглядными объяснениями. Полезно для frontend-разработчиков: можно быстро освежить знания по вёрстке, JavaScript и др. инструментам.

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

📣 Code Ready | #сайт

Красивые переносы заголовков!

Часто последняя строка заголовка выглядит неаккуратно: одно-два коротких слова оказываются отдельно.

Обычно это исправляют вручную.

<h1>Новый<br>релиз CSS</h1>

Или вставляют  , <wbr> и другие ручные переносы.

Теперь с этим может помочь сам браузер.

h1 {  
text-wrap: balance;
}

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

Для длинных абзацев есть отдельный режим.

p {
  text-wrap: pretty;
}

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

🔥 text-wrap: balance и text-wrap: pretty позволяют заметно улучшить типографику буквально одной строкой CSS.

📣 Code Ready | #совет

👨‍💻 Front-End Web Development Resources — большая подборка ресурсов по frontend-разработке!

Здесь собраны ресурсы по HTML, CSS, JavaScript, React, Angular, Vue.js, TypeScript, Git, UI/UX, адаптивной вёрстке, инструментам разработки и многим другим направлениям. Материалы подойдут как начинающим разработчикам, так и тем, кто уже работает и хочет расширить знания или быстро найти качественные источники по конкретной теме.

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

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

👩‍💻 Валидируем форму прямо в браузере. Без JavaScript, регистрации и смс!

Псевдоклассы :valid и :invalid в CSS позволяют стилизовать поля формы в зависимости от результата встроенной HTML-валидации. Они работают с ограничениями вроде required, pattern, min, max, type="email" и другими.

Как это используется:
• :valid — поле заполнено корректно;
• :invalid — значение не прошло проверку;
• можно менять цвет рамки, фона или отображать состояние поля.

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

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

Passive Event Listeners: оптимизация обработки touch- и wheel-событий!

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

Например, при взаимодействии с экраном пользователь ожидает мгновенной прокрутки страницы. Однако обработчик touchmove может вызвать event.preventDefault() и заблокировать стандартный жест браузера. Если обработчик считается непассивным, браузеру может потребоваться дождаться завершения его выполнения, прежде чем начать или продолжить прокрутку. Обычный обработчик события:

window.addEventListener(
  'touchmove',
  event => {
    const touch = event.touches[0];

    console.log(
      touch.clientX,
      touch.clientY
    );
  },
  {
    passive: false
  }
);

В этом случае браузер должен учитывать, что обработчик потенциально может вызвать preventDefault(). Поэтому прокрутка может быть отложена до завершения выполнения JavaScript-кода.

Чтобы явно указать, что обработчик не будет отменять стандартное поведение, используется параметр passive.

window.addEventListener(
  'touchmove',
  event => {
    const touch = event.touches[0];

    console.log(
      touch.clientX,
      touch.clientY
    );
  },
  {
    passive: true
  }
);

Теперь браузер знает, что обработчик не вызовет preventDefault(), и может обрабатывать прокрутку без ожидания завершения JavaScript-кода.

Следует учитывать, что современные браузеры в некоторых случаях автоматически используют пассивный режим для обработчиков touchstart, touchmove, wheel и mousewheel, зарегистрированных на window, document или body. Конкретное поведение зависит от браузера, события и целевого элемента. Поэтому, если обработчик должен гарантированно вызывать preventDefault(), лучше явно указать:

{
  passive: false
}

Событие scroll отличается тем, что возникает после изменения позиции прокрутки и не может быть отменено через preventDefault(). Поэтому использование passive для scroll не даёт преимуществ производительности. Например:

window.addEventListener(
  'scroll',
  () => {
    const position = window.scrollY;

    document.querySelector(
      '.header'
    ).style.opacity = Math.min(
      position / 500,
      1
    );
  }
);

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

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

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

let scheduled = false;

window.addEventListener('scroll', () => {
  if (scheduled) {
    return;
  }

  scheduled = true;

  requestAnimationFrame(() => {
    header.style.opacity = Math.min(
      window.scrollY / 500,
      1
    );

    scheduled = false;
  });
});

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

Также важно учитывать, что passive: true запрещает отмену стандартного поведения события. Вызов:

event.preventDefault();

Внутри пассивного обработчика не остановит стандартное поведение браузера и обычно приведёт к предупреждению в консоли.

window.addEventListener(
  'touchmove',
  event => {
    event.preventDefault();
  },
  {
    passive: true
  }
);

passive: true целесообразно использовать, если обработчик только анализирует событие или обновляет интерфейс и ему не требуется вызывать preventDefault(). Если обработчик должен отменять стандартное поведение браузера, его нельзя делать пассивным.

🔥 Passive Event Listeners уменьшают задержки при обработке touch- и wheel-событий, поскольку браузеру не требуется ожидать возможного вызова preventDefault(). При этом они не устраняют проблемы, связанные с тяжёлыми JavaScript-обработчиками.

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

👩‍💻 Отключает валидацию формы. Зачем нам валидация формы браузером, когда у нас есть JS?

Атрибут novalidate используется у тега <form> и отключает стандартную валидацию полей браузером при отправке формы.

По умолчанию браузер сам проверяет такие ограничения, как:
• обязательные поля (required);
• корректность email (type="email");
• формат данных (pattern);
• минимальные и максимальные значения (min, max).

После добавления novalidate эта проверка не выполняется, и отправка формы передаётся полностью под контроль JS или серверной логики. Важно: novalidate не отключает атрибуты в HTML, а только запрещает браузеру автоматически проверять их при отправке.

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

Symbol: как добавлять внутренние свойства объектов без конфликтов!

В JavaScript объекты часто используются разными частями приложения, библиотеками и компонентами одновременно. Иногда требуется добавить к существующему объекту дополнительные данные: состояние компонента, метаданные, кэш или внутренние флаги.

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

const element = {
  value: "button"
};

element.state = {
  mounted: true
};

Если свойство state уже существует в объекте, новое значение перезапишет старое. В больших приложениях такие ситуации могут быть сложными для поиска, особенно когда объект расширяется несколькими независимыми модулями.

Для решения этой задачи существует Symbol — это примитивный тип данных, который создаёт уникальные ключи свойств объектов. Каждый созданный символ является уникальным, поэтому он не может случайно совпасть с обычным строковым свойством или другим символом.

const internalState = Symbol("internalState");

const component = {
  value: "button",

  [internalState]: {
    mounted: true
  }
};

console.log(component[internalState]);

// { mounted: true }

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

Даже если другой код добавит свойство с похожим названием, конфликт не возникнет:

component.internalState = false;

console.log(component[internalState]);

// { mounted: true }

Symbol-свойства имеют ещё одну особенность: они не отображаются в большинстве стандартных способов перебора объектов. Например, Object.keys() возвращает только строковые ключи:

Object.keys(component);

// ["value"]

Это позволяет хранить дополнительные данные внутри объекта, не добавляя их в обычное представление объекта и его публичный API. При необходимости получить символьные свойства можно явно:

Object.getOwnPropertySymbols(component);

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

const meta = Symbol("meta");

function initComponent(component) {
  component[meta] = {
    id: crypto.randomUUID(),
    createdAt: Date.now()
  };
}

После этого объект получает внутреннюю информацию, но его внешний интерфейс остаётся неизменным:

component.id;

// undefined

component[meta].id;

// UUID

Кроме пользовательских символов, JavaScript содержит встроенные Symbol, которые позволяют изменять стандартное поведение объектов:

Symbol.iterator
Symbol.asyncIterator
Symbol.toPrimitive

Например, Symbol.iterator позволяет объекту поддерживать цикл for...of:

const collection = {
  items: ["a", "b"],

  [Symbol.iterator]() {
    return this.items[Symbol.iterator]();
  }
};

for (const item of collection) {
  console.log(item);
}

Важно понимать: Symbol не является механизмом настоящей приватности. Символьные свойства можно найти через:

Object.getOwnPropertySymbols();

Reflect.ownKeys();

Основная задача Symbol — создавать уникальные ключи и безопасно расширять объекты без риска конфликтов имён. Для настоящей приватности в классах JavaScript используются #private fields.

🔥 Symbol — практический инструмент для создания библиотек, компонентов и больших frontend-систем, где требуется добавлять внутренние данные, сохраняя чистый публичный API объекта.

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

Добавляем дополнительную информацию с помощью тега <small>!

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

Для чего <small> подойдёт идеально:
• пояснения;
• комментарии;
• дисклеймеры;
• предостережения;
• копирайт;
• информация о лицензии;
• прочая правовая информация.

Важно: <small> имеет семантическое значение, а не просто уменьшает размер текста. Для изменения визуального размера обычного текста лучше использовать CSS.

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

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