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

Недавно попалось крутое расширение для 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

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

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

😉 Если хочешь попасть в следующее видео, пиши свой вопрос в комментариях!

Chrome представил собственный MCP сервер 🚀

Model Context Protocol (MCP) — это протокол, который задаёт стандарт общения ИИ-моделей с различными инструментами.

Теперь, при генерации кода из Cursor или другого инструмента, ваш ИИ-агент может напрямую обращаться к инструментам разработчика, кликать по кнопкам, ходить по страницам, отправлять формы и разбирать то, что пришло с бэкенда!

Вы можете попросить его протестировать UI на баги и уязвимости, а также поднять метрики Core Web Vitals.

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

Написал большую статью по View Transitions API 🔥

Не нашёл в Интернете исчерпывающей статьи по этой теме, поэтому решил написать её самостоятельно. Материал из официальной документации постарался переработать и объяснить максимально просто. Но в любом случае, если что-то будет непонятно — пишите в комментариях, расскажу-покажу.

Всем рекомендую к прочтению!

🔗 Ссылка на habr

Делаем сложные слайдеры без использования JS 💪🏻

В браузеры уже давно завезли возможность делать слайдеры, основанные на скролле, на чистом CSS:

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.container {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

🌵scroll-snap-type указывает ось и тип снеппинга

1 аргумент:
x или y, логические inline или block, а также both

2 аргумент:
proximity — мягкая привязка, скролл сместится к точке привязки, только если прокрутка остановилась достаточно близко к ней
mandatory — жёсткая привязка, скролл обязательно сместится к ближайшей точке привязки

🌵 scroll-snap-align указывает точку, относительно которой будет выровнен элемент

Возможные значения: none, start, center, end

🌵scroll-snap-stop указывает, должен ли скролл обязательно останавливаться в каждой точке привязки при прокрутке

Возможные значения: normal, always

⚙️ Поддержка браузерами широкая: type, align, stop

Адаптивные изображения на CSS

Большинство, скорее всего, знает о существовании тега <picture>, который позволяет указать несколько изображений под разные экраны и браузеры:

<picture>
  <source
    type="image/avif"
    srcset="cat@1x.avif 1x, cat@2x.avif 2x"
  />

  <source
    type="image/png"
    srcset="cat@1x.png 1x, cat@2x.png 2x"
  />

  <img src="cat@1x.png" alt="Кот" loading="lazy" />
</picture>

Но не все знают, что такой опцией можно пользоваться и в CSS при помощи функции image-set():

div {
  background: image-set(
    url("cat@1x.avif") type("image/avif") 1x,
    url("cat@2x.avif") type("image/avif") 2x,
    url("cat@1x.png")  type("image/png")  1x,
    url("cat@2x.png")  type("image/png")  2x
  );
}

Также как и с <picture> в начале указываем более предпочтительные варианты , чтобы браузер в случае поддержки всех опций, выбрал именно их.

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

Новое свойство — interpolate-size 🔥

Помните, ранее мы рассматривали функцию calc-size()?

Она позволяет вычислить точное значение по переданным ключевым словам. Например, вместо auto подставить фактические 300px, а затем к ним прибавить или, скажем, вычесть 25px. Благодаря этому, стали возможны переходы c использованием auto, min-content, fit-content и других подобных значений.

Но что если нам не нужны дальнейшие вычисления с переданным значением? Предположим, мы бы хотели просто сделать плавный переход от 300px до auto.

Достаточно добавить свойство interpolate-size со значением allow-keywords и всё будет работать:

.container {
  width: 300px;
  height: 100px;
  interpolate-size: allow-keywords;
  transition: width 0.5s;
  background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
}

.container:hover {
  width: auto;
}

Также свойство имеет значение numeric-only. Оно является значением по-умолчанию и запрещает подобные переходы.

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

Встроенная функция генерации UUID v4

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

window.crypto.randomUUID();

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

Управляем внешним видом кнопки Enter

Глобальный атрибут enterkeyhint может быть применён к любому редактируемому элементу (<input>, <textarea>, contententeditable)

Он меняет внешний вид кнопки Enter на мобильных устройствах:

<input enterkeyhint="search">

Возможные значения: enter, done, go, next, previous, search и send

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

При этом, события, генерируемые нажатием на кнопку, не меняются, меняется только её внешний вид

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