Javascript js frontend

URLPattern — нативное сопоставление URL без ручных регулярных выражений!

Во многих проектах приходится разбирать URL: определять маршруты, извлекать параметры, проверять соответствие шаблону. Чаще всего для этого используют регулярные выражения или вручную разбирают строку, хотя современные браузеры предоставляют для этого встроенный API — URLPattern.

Создадим шаблон маршрута для страницы пользователя:
const pattern = new URLPattern({
pathname: "/users/:id"
});

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

Проверим, соответствует ли URL заданному шаблону:
const result = pattern.exec(
"https://site.com/users/42"
);

console.log(!!result); // true

Если совпадение найдено, exec() возвращает объект с подробной информацией о результате. Если маршрут не подходит — вернётся null.

Получим параметр маршрута:
if (result) {
console.log(
result.pathname.groups.id
);

// "42"
}

Все именованные параметры автоматически попадают в объект groups. Больше не нужно самостоятельно искать совпадения, работать с индексами или писать регулярные выражения.

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

Например, можно сразу описать шаблон для версии API:
const api = new URLPattern({
hostname: "api.example.com",
pathname: "/v:version/users/:id"
});

Теперь один шаблон одновременно проверяет хост и извлекает несколько параметров из пути.

Получим результат сопоставления:
const match = api.exec(
"https://api.example.com/v2/users/15"
);

console.log(match.pathname.groups);

На выходе получим уже готовый объект:
// {
// version: "2",
// id: "15"
// }

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

🔥 URLPattern — позволяет отказаться от значительной части ручного разбора URL и сделать код сопоставления маршрутов заметно чище.

Недавно на Хабре вышла годная статья: «Что происходит внутри Angular и React при решении одних и тех же задач»!

В этой статье:
• Сравнивается, как React и Angular работают с DOM, состоянием, жизненным циклом компонентов и асинхронностью;
• Показывается, что происходит «под капотом» при рендеринге, обновлении интерфейса и обработке изменений;
• Разбираются различия в архитектуре, производительности и подходах к оптимизации, чтобы лучше понимать сильные стороны каждого инструмента.

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

Как создать радиальный градиент в CSS?

Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

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

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

#css