Написал большую статью на habr по Anchor Positioning API 🔥
Всем фронтендерам рекомендую к прочтению.

Атрибут inert

Не все знают, что кроме атрибута disabled в html ещё есть атрибут inert. Он также деактивирует содержимое, но предназначен больше для блокировки отдельных областей, а не конкретных элементов. Например, страницы под модальным окном.

Различия:
1) disabled меняет стиль встроенных элементов вроде <button> или <input>, а inert нет

2) Оба игнорируют события вроде кликов, но на элементы с inert перестают действовать даже псевдоклассы вроде :hover или :active

3) Элемент с inert полностью удаляется из Accessibility Tree как если бы ему добавили aria-hidden="true"

4) inert распространяется на всё поддерево ниже, disabled если не брать в расчёт <fieldset>, то только на отдельные элементы

5) inert блокирует выделение текста на элементе, а disabled нет

6) При поиске при помощи Ctrl + F, disabled элемент будет найден, а inert нет

7) Фокус на элементах и с inert и disabled не работает, но если использовать <fiedset> с disabled, то потомкам будет доступна фокусировка

⚙️ Поддержка браузерами широкая

Функцию attr() проапгрейдили

Ранее она работала только с content, теперь же может быть использована с любым свойством. Также были добавлены новые параметры и синтаксис функции теперь выглядит так:

attr(<attr-name> <attr-type>? , <fallback-value>?)

<attr-name> — имя атрибута, из которого будет браться значение
<attr-type> — тип передаваемого значения
<fallback-value> — запасное значение на случай, если будет передано значение некорректного типа или не будет передано вовсе

Пример:

<div data-width="100px"></div>

width: attr(data-width type(<length>), 200px);

Без type(<length>) работать не будет, т.к. значение будет воспринято как raw-string (значение по-умолчанию):

width: attr(data-width raw-string, 200px);

В качестве <attr-type> можно также передавать единицы измерения, * или raw-string, упомянутый ранее:

<div data-width="100"></div>

width: attr(data-width px, 200px);

Также можно передать сразу несколько типов, разделяя их "|"

🔗 Подробнее можно почитать на MDN
⚙️ Поддержка браузерами пока что небольшая

React Bits

Нашёл крутейшую библиотеку с огромным количеством анимационных эффектов для текста, фона, курсора и различных компонентов! 🤟

Отличное решение для промо-страниц вашего сайта.

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

В CSS добавили новые формы скругления! 🔥

В 139 версии Chrome добавили новое свойство corner-shape, которое вместе с общеизвестным border-raduis позволяют образовывать не только эллиптические скругления, но и квадратные, угловые, ромбовидные и другие.

Возможные значения:
round — классическое эллиптическое скругление
(эквивалентно superellipse(1))

bevel — прямой диагональный срез
(эквивалентно superellipse(0))

scoop — впадина, обратна эллипсу
(эквивалентно superellipse(-1))

notch — прямой (90°) угол внутрь
(эквивалентно superellipse(-infinity))

square — ничего не меняет, визуально
совпадает с border-radius: 0, по сути полезно только для плавных анимаций (эквивалентно superellipse(infinity))

squircle — промежуточная форма между эллипсом и квадратом (эквивалентно superellipse(2))

superellipse(K) — функция для создания суперэллиптической кривой

🔗 Ссылка на спецификацию
🔗 Ссылка на статью с подробным обзором

⚙️ Поддерживается пока что только в Chrome

В CSS появились кастомные функции! 🔥

В 139 версии Chrome добавили новую директиву @function, которая работает аналогично функциям из языков программирования. Она принимает параметры и возвращает какое-либо значение на их основе. Впоследствии мы её можем использовать с любым CSS свойством.

Например:

@function --opacity(--color, --opacity) {
  result: rgb(from var(--color) r g b / var(--opacity));
}

div {
  background-color: --opacity(red, 50%);
}

Эта функция позволяет получить нужный оттенок цвета при помощи процентов прозрачности.

🔗 Ссылка на спецификацию
🔗 Видео обзор других примеров использования

⚙️ Поддержка браузерами

Новый статический метод промисов

В ES2025 промисам был добавлен метод try, позволяющий удобно обернуть выполнение функции в промис

Например:

Promise.try(getUsers)
    .then((result) => {
        // Успешное выполнение функции
    })
    .catch((error) => {
        // Возникла ошибка
    })

Этот метод можно использовать как с синхронными, так и с асинхронными функциями. Фишка заключается в том, что мы можем переиспользовать .catch() для обоих типов функций, полностью отбросив блоки try...catch

Синтаксис:

Promise.try(func, arg1, arg2, ..., argN)

🔹 func (обязательный) — функция, которая выполняется сразу
🔹 arg1, arg2, ..., argN (необязательные) — аргументы, передаваемые этой функции

Ранее добиться того же эффекта можно было, но пришлось бы написать вот такую громоздкую конструкцию:

new Promise(resolve => resolve(func()))

⚙️ Поддержка браузерами широкая

Псевдоэлементы для работы с текстом

Не все знают о современных возможностях стилизации текста при помощи CSS. Исправляем это!

::selection — стилизует выделенный пользователем текст

::target-text — стилизует фрагмент якорного текста, к которому был осуществлён переход по типу mysite.com#:~:text=hello

::spelling-error — стилизует текст с орфографическими ошибками

::grammar-error — стилизует текст с грамматическими ошибками

Прошу обратить внимание на то, что каждый псевдоэлемент в этой статье является ссылкой на MDN, которая позволяет узнать о нём поподробнее. Но наиболее интересным вам, скорее всего, будет раздел Allowable properties, который имеется почти у каждого псевдоэлемента. В нём указаны все доступные для него CSS свойства.

Также я сознательно не написал о ::highlight() из нового Custom Highlight API, т.к. это более сложный псевдоэлемент, который заслуживает отдельной статьи.

⚙️ Поддержка браузерами хорошая: ::selection, ::target-text, ::spelling-error, ::grammar-error

Продолжаем экономить своё время ⏳

Недавно попалось крутое расширение для VS Code, которое позволяет по клику на модульный класс переходить в нужный файл стилей и сразу находить в нём нужный блок кода!

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

Также расширение умеет в autocomplete классов.

🔗 Ссылка на скачивание

scrollIntoView() проапгрейдили новым параметром 🚀

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

<div id="target">Целевой элемент</div>

const target = document.getElementById('target');
target.scrollIntoView();

В 140 версии Chrome данному методу был добавлен параметр container со значениями:
🔹 all (значение по-умолчанию) — прокручивает все скроллы на странице так, чтобы по итогу элемент стал виден пользователю
🔹nearest — прокручивает только ближайший родительский элемент, у которого есть скролл

Пример:

target.scrollIntoView({ container: 'nearest' });

🔗Ссылка на MDN

⚙️ Поддерживается пока что только в Chrome и Edge

Проапгрейлили функцию calc() 🚀

Почти наверняка вы сталкивались с проблемой того, что арифметические операции c calc() сильно ограничены.

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

.button {
  font-size: calc(10em / 3px);
}

Спецификация требовала от вас использовать в качестве второго операнда обычное число:

.button {
  font-size: calc(10em / 3);
}

В 140 версию Chrome завезли возможность использовать любые единицы измерения CSS в таких операциях.

🔗 Ссылка на спецификацию

⚙️ Поддерживается пока что только в Chrome, таблицу на caniuse ещё не добавили

Топ 6 отговорок, чтобы не стать Frontend разработчиком

Пробую себя в новом направлении. Записал ролик о скрытых сторонах Frontend разработки.

Видео получилось таким каким получилось. Буду рад любой критике, чтобы впоследствии улучшить качество контента!

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

🔗 Ссылка на YouTube
🔗 Ссылка на RuTube
🔗 Ссылка на VK Видео

Прощаемся со styled-components

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

Пожертвования на open collective уже закрыты, а автор больше не рекомендует её к использованию в новых проектах, ровно как и другие существующие CSS-in-JS решения.

🔗 Ссылка на мартовский пост

Конвертор компонентов

Попался интересный инструмент, позволяющий писать код в JSX-подобном формате (вдохновлённом Solid.js), а затем компилировать его во Vue, React, Angular или другой синтаксис.

Будет полезен тем, кто разрабатывает библиотеки компонентов под универсальный стек.

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

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

🔗 Ссылка на сам инструмент
🔗 Ссылка на Playground

Новые значения выравнивания

Мало кто знает о существовании значений safe и unsafe. Они могут быть применены к таким свойствам позиционирования как:
▫️align-items
▫️align-content
▫️justify-items
▫️justify-content
▫️align-self
▫️justify-self
▫️ и их сокращённым версиям вроде place-content

Используются только в связке с другим значением выравнивания, например:

align-items: safe center;

unsafe по сути ничего не меняет, так как это значение по-умолчанию, а вот safe позволяет сбросить свойство к значению start в том случае, если дочерний элемент начинает выходить за рамки родительского.

На видео разобрана одна из возможных проблем выравнивания, которую раньше приходилось решать различными костылями со stackoverflow, а теперь можно поправить на раз-два!

⚙️ Поддержка браузерами широкая

Отвечаю на ваши вопросы 💬

Как и обещал ранее, снял ролик с ответом на вопрос

🔗 Ссылка на YouTube
🔗 Ссылка на VK Видео
🔗 Ссылку на запрещённограм, к сожалению, не могу разместить 🤷‍♂️

Новый хук React

В 19.2 версии библиотеки был добавлен useEffectEvent, который наконец-то позволит вам избавиться от ненужных зависимостей в useEffect.

В качестве примера рассмотрим код из официальной документации:

const ChatRoom = ({ roomId, theme }) => {
   useEffect(() => {
    const connection = createConnection(serverUrl, roomId);

    connection.on('connected', () => {
      showNotification('Connected!', theme);
    });

    connection.connect();

    return () => {
      connection.disconnect();
    };
  }, [roomId, theme]);
}

Как вы могли заметить, помимо важного roomId, в качестве зависимости также присутствует и theme. В случае изменения первого, нам действительно нужно произвести переподключение (connection.disconnect();), а в случае второго, просто получить обновлённое значение. Но, как вы знаете, функция очистки в useEffect будет вызвана при изменении любого из переданных параметров.

А представьте что будет, если параметров будет 6 или даже больше и все будут вызывать переподключение? Что тогда делать?

Можно, конечно же, просто убрать theme из зависимостей и отключить ругающийся ESLint, но тогда theme перестанет получать актуальные значения до момента повторного обновления roomId, а также ваш код станет более подверженным неожиданным багам.

Теперь это можно решить таким кодом:

const ChatRoom = ({ roomId, theme }) => {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);

    connection.on('connected', () => {
      onConnected();
    });

    connection.connect();

    return () => connection.disconnect();
  }, [roomId]);
}

Весь код, который не требует очистки, но требует актуальных значений извне, выносим в хук и вызываем внутри useEffect, готово!

🔗 Ссылка на API

Новый компонент React

В 19.2 версии библиотеки был добавлен <Activity>.

По сути он являет собой улучшенный условный рендеринг JSX:

// До
{isShowingSidebar && (
  <Sidebar />
)}

// После
<Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
  <Sidebar />
</Activity>

Использованные внутри него компоненты сохраняют своё React состояние. Также сохраняется и состояние DOM. Например, данные, введённые в <textarea>, который не был подключён предварительно к useState(), будут восстановлены.

Также <Activity> можно использовать для фоновой подгрузки компонентов, которые могут быть использованы впоследствии. Компоненты рендерятся как обычно, но с более низким приоритетом в сравнении с обычным JSX.

При переключении в режим "hidden", компоненты внутри также вызывают очистку в useEffect, как и при обычном рендеринге. Под капотом для скрытия используется display: none;

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

🔗 Ссылка на API

В Node.js завезли HTTP/3 🔥

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

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

🔗 Ссылка на wikipedia по HTTP/3
🔗 Ссылка на документацию нового модуля Node.js

⚙️ Поддержка браузерами HTTP/3 и WebTransport