Code Ready | Frontend

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 | #практика

Wuldi Hosting // Deployment Ready 🚀 🔥 Скидка 40% на мощные VPS/VDS для разработчиков! 🔥 Разворачивайте свои базы данных, Telegram-ботов, бэкенд и Docker-контейнеры на сверхбыстрых серверах в проверенных дата-центрах Европы. Идеально подходит под Highload-проекты, продакшн и пет-проекты. 🤖 Запустить бота (купить в 1 клик): autobuy_bot 🌐 Наш сайт: Wuldi.com ⚙️ Инфраструктура и Спеки: • hardware: Топовое железо AMD Epyc 9454 / Ryzen 9950x • net_speed: Аплинки до 10 Гбит/с • uptime_rate: Честный 99.97% • privacy_level: 100% анонимность при регистрации 👤 Dev_contacts: • tech_support: @wuldisupportbot • root_admin: @Flameochka 👇 Забирайте конфигурацию со скидкой 40% прямо в боте!

👨‍💻 FrontendBase — база знаний по фронтенд-разработке! На сайте собраны подробные статьи по фронтенду: HTML, CSS, JavaScript, TypeScript, React, Vue и другим технологиям. Можно найти разборы популярных методов, примеры кода, объяснения сложных тем и решения типичных ошибок, с которыми сталкиваются разработчики. 📌 Оставляю ссылочку: frontendbase.ru 📣 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 | #практика

Дедлайны горят, а твои глаза уже нет. Что делать, если ты за#бался и хочется просто залипать в телефоне? И вроде понимаешь, что НАДО, но от этого еще больше сопротивление. Если близкие думают, что ты зажрался, а тебе и самому от себя уже тошно, но как себя взбодрить – непонятно, советую посмотреть вот что: https://t.me/Manifestans Ты 100% себя узнаешь, а значит 100% получишь пользу от того, что там увидишь! Если ты еще не собрал пожитки и не ушел отшельником в лес – есть шанс тебя оживить и вернуть эмоции и интерес к жизни. Кликай сюда и начинай приходить в себя.

Добавляем дополнительную информацию с помощью тега <small>! Тег <small> используется для отображения второстепенного текста, который имеет меньшее значение по сравнению с основным содержимым. Он подходит для информации, которая полезна пользователю, но не является частью основного сообщения. Для чего <small> подойдёт идеально: • пояснения; • комментарии; • дисклеймеры; • предостережения; • копирайт; • информация о лицензии; • прочая правовая информация. Важно: <small> имеет семантическое значение, а не просто уменьшает размер текста. Для изменения визуального размера обычного текста лучше использовать CSS. 📣 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 | #практика

Издательский дом «Новые отраслевые медиа» собрал для вас лучшие каналы из сферы искусственного интеллекта и интернет-технологий, которые помогают своим подписчикам быть в курсе всех важных профессиональных новостей. Здесь - всё про ключевых игроков отрасли, государственное регулирование, инсайды и кейсы от отраслевых лидеров. ✅Серверная - канал об индустрии дата-центров: технологиях, инфраструктуре, облачных решениях, энергоэффективности и применении ЦОД в ключевых отраслях экономики. ✅Робосфера - канал об индустрии робототехники: технологии и тренды. Промышленные и сервисные роботы, коботы, автоматизация, ИИ, машинное зрение, автономные системы. ✅AI для бизнеса - всё об AI-решениях для бизнеса: внедрение, автоматизация, корпоративный ИИ, агенты. ✅ТехноРитейл - канал о производстве и продаже бытовой техники и электроники в России: бренды, e-com, маркетинг, retail tech. Подписывайтесь, и эти каналы смогут изменить вашу жизнь к лучшему! Реклама. Харламов А.Е. ИНН 712803816807. erid: 2W5zFJNTBaZ

👩‍💻 Отключает валидацию формы. Зачем нам валидация формы браузером, когда у нас есть JS? Атрибут novalidate используется у тега <form> и отключает стандартную валидацию полей браузером при отправке формы. По умолчанию браузер сам проверяет такие ограничения, как: • обязательные поля (required); • корректность email (type="email"); • формат данных (pattern); • минимальные и максимальные значения (min, max). После добавления novalidate эта проверка не выполняется, и отправка формы передаётся полностью под контроль JS или серверной логики. Важно: novalidate не отключает атрибуты в HTML, а только запрещает браузеру автоматически проверять их при отправке. 📣 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 | #практика

На Stepik вышла программа «DevOps с нуля: от Linux до Kubernetes» Это комплексная программа из 5 практических курсов по ключевым технологиям DevOps: Linux, Git, Docker, GitLab CI/CD, Kubernetes Вы последовательно пройдёте путь от работы в Linux и управления кодом через Git до контейнеризации приложений, настройки CI/CD-пайплайнов и развёртывания в Kubernetes. Что вы изучите:

• работу с Linux и командной строкой • Git и контроль версий в реальных проектах • создание Docker-образов и запуск контейнеров • автоматизацию сборки, тестирования и деплоя в GitLab CI/CD • развёртывание и управление приложениями в Kubernetes • сети, хранилища, конфигурации и секреты • диагностику инфраструктуры и автоматизацию рутинных задач ... и многое другое

Все знания закрепляются на практике с помощью заданий с автопроверкой. Материал подаётся последовательно и понятным языком: с примерами, схемами и демонстрациями. Во время обучения можно задавать вопросы по урокам и заданиям, получать обратную связь и помощь при возникновении сложностей. После прохождения программы вы получите сертификат, который можно добавить в резюме. Скидка 20% на 48 часов: по промокоду READY20 стоимость всей программы составит 10 392 ₽. Открыть программу на Stepik

👩‍💻 Валидируем форму прямо в браузере. Без JavaScript, регистрации и смс! Псевдоклассы :valid и :invalid в CSS позволяют стилизовать поля формы в зависимости от результата встроенной HTML-валидации. Они работают с ограничениями вроде required, pattern, min, max, type="email" и другими. Как это используется: • :valid — поле заполнено корректно; • :invalid — значение не прошло проверку; • можно менять цвет рамки, фона или отображать состояние поля. Это простой способ сделать форму более понятной для пользователя, не прибегая к JS. 📣 Code Ready | #свойство

👨‍💻 Front-End Web Development Resources — большая подборка ресурсов по frontend-разработке! Здесь собраны ресурсы по HTML, CSS, JavaScript, React, Angular, Vue.js, TypeScript, Git, UI/UX, адаптивной вёрстке, инструментам разработки и многим другим направлениям. Материалы подойдут как начинающим разработчикам, так и тем, кто уже работает и хочет расширить знания или быстро найти качественные источники по конкретной теме. Оставляю ссылочку: GitHub 📱 📣 Code Ready | #репозиторий

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

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

Или вставляют  , <wbr> и другие ручные переносы. Теперь с этим может помочь сам браузер.

h1 {  
text-wrap: balance;
}

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

p {
  text-wrap: pretty;
}

Он старается избегать неудачных переносов и слишком коротких последних строк. Если браузер его не поддерживает, текст просто будет переноситься как обычно. 🔥 text-wrap: balance и text-wrap: pretty позволяют заметно улучшить типографику буквально одной строкой CSS. 📣 Code Ready | #совет

Ищут 10 человек, чтобы собирали чат-ботов по шаблону, как пазлы. ЗП: от 5-9000₽ за вечер. Занятость: 3-4 часа в день. Опыт: не нужен. Как мы работаем: 1. Ты проходишь обучение пару недель; 2. Берёшь реальный проект из моей базы; 3. Собираешь бота по проверенной формуле; 4. Наставник контролирует процесс; 5. Получаешь деньги и закрепляешь клиента. Весь процесс занимает до 2х недель с нуля до первых денег на твою карту. Даниил из Балашихи был военнослужащим — с июля 2024 года начал создавать чат-ботов для бизнеса и уже заработал 4 млн. рублей. А главное теперь у него больше свободного времени на семью, друзей и развлечения. Да, ты не первый. 277 человек уже ведут постоянных клиентов по моей формуле. Ведь сайт со статистикой Wordstat показывает 10 786 запросов за месяц в поисковике от бизнеса на эту услугу. Заказов валом. Срочно нужны твои руки и голова. Чтобы быстро разобраться во всех нюансах — запускай бота Там пошаговый план как стартануть и гайд по клиентам. 8 мест ещё свободно

🐱 8 шпаргалок для веб-разработчика — полезная подборка по HTML, CSS, JavaScript, React и Git! На странице собрана крутая подборка из 8 полезных шпаргалок для веб-разработчиков. Здесь справочники по HTML, CSS, Grid Layout, Flexbox, JavaScript, React и Git с примерами кода, схемами и наглядными объяснениями. Полезно для frontend-разработчиков: можно быстро освежить знания по вёрстке, JavaScript и др. инструментам. 📌 Оставляю ссылочку: highload.tech 📣 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 | #практика

41% кода уже пишет AI. Пора научиться использовать это в свою пользу Пока одни всё ещё учат синтаксис, другие собирают рабочие продукты с помощью Claude Code и AI. Хекслет проведёт бесплатный воркшоп, где за один вечер вы создадите собственного Telegram-бота для изучения английского. На практике покажут, как: • работать с Claude Code; • подключать Gemini API; • создавать AI, который сам генерирует уроки; • запускать полноценные продукты без месяцев разработки. В результате у вас останется готовый Telegram-бот, которого можно использовать самому или развивать дальше. 28 июля, 19:00 (мск) Бесплатное участие. Зарегистрироваться -> #реклама О рекламодателе

📱 Осваиваем регулярные выражения! Эта шпаргалка по ключевым приёмам работы с RegExp: квантификаторы, группы, классы символов, флаги и проверки начала или конца строки. Подойдёт для валидации данных, парсинга текста и оптимизации поиска. 📣 Code Ready | #шпора

👩‍💻 Один тег чтобы обернуть секцию с поиском или фильтром! Тег <search> используется для обозначения секции страницы, которая содержит поиск или элементы фильтрации. Он помогает браузерам, поисковым системам и вспомогательным технологиям лучше понимать структуру страницы. Использовать <search> можно для: • формы поиска по сайту; • фильтров каталога; • панели поиска по таблицам или спискам; • блока с настройками фильтрации. Важно: тег относительно новый, поэтому поддержка в некоторых браузерах и вспомогательных технологиях пока развивается. При необходимости можно дополнительно использовать role="search". 📣 Code Ready | #атрибут