Фронтенд-новости №5. Отказ от React, новые CSS-свойства для адаптивности и JS-контейнеры

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 2–8 мая.

HTML

• Ещё один сайт на HTML. Да, так тоже можно.

• Узнайте о главных болях веб-разработчика.

CSS

• Если работаете с <select multiple> попробуйте улучшить взаимодействие с ним.

• Используйте max-inline-size для гибкого центрирования контента в адаптивных интерфейсах.

• CSS Zen Garden 19 лет.

• Знайте, что прогрессивное улучшение дорого, но необходимо вашему пользователю. Рассмотрите примеры прогрессивного улучшения с aspect-ratio, новыми цветовыми функциями, а также focus-visible.

• Веб быстро развивается и пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax().

• Научитесь переносить текст на новую строку.

• В прошлом выпуске прочитали про inert? Прочитайте.

• Пофантазируйте о новых псевдоклассах :removed и :finish для анимаций.

• Погрузитесь в :where — ещё один логический способ найти элемент на странице.

• Познакомьтесь с тем, как работают алгоритмы компоновки.

• Начинайте изучать сабгриды.

• Узнайте, почему height: 100vh не самый лучший вариант для адаптации мобильной версии.

JavaScript

• За 2 минуты разберитесь … оператор или нет?

• Узнайте о новом API, которое позволяет получить доступ к сведениям у локально установленных шрифтах пользователя.

• Потренируйтесь в создании легковесного компонента на Lit.

• Узнайте о JavaScript контейнерах.

• Опять эти странные вопросы про JavaScript. Давайте с ними разберёмся.

React

• Что случится если вы откажетесь от React?

• Создайте свой блог на Next.js и MDX.

• Узнайте как работает композиция React-компонентов.

Angular 

• Пора обновляться до v13.3.3.

• Вовсю ждём v14 в новой бете v14.0.0-next.16.

Node.js

• v18.1.0 (Current) уже здесь с улучшенным CLI для тестов и имплементацией WebAssembly Web API.

• Если используете v14.x.x, то можно обновиться до v14.19.2 (LTS).

• Кажется Лерна всё. Пытаемся понять, что использовать на замену.

Браузеры

• Mozilla Firefox 100:

  • Для разработчиков:

    • Субтитры WebVTT для режима картинка-в-картинке.

    • Аппаратное декодирование AV1 в Windows для  (Intel Gen 11+, AMD RDNA 2, кроме Navi 24, GeForce 30).

    • Улучшена производительность глубоко вложенных гридов.

    • Новый индикатор фокуса для ссылок, который заменяет пунктирный.

    • Добавлена поддержка WritableStream API.

    • ReadableStream получил поддержку pipeTo.

  • Для пользователей:

    • Картинка-в-картинке теперь с субтитрами.

    • Мобильная версия с новыми обоями.

    • Упорядоченная версия закладок.

    • Автозаполнение банковской карты (но для некоторых стран).

    • Выбор языка при запуске. Сравнивается с языком установленным в операционной системе.

    • Проверка орфографии на нескольких языках.

    • HDR-видео на Mac. Уже можно проверять на YouTube.

    • Снижение энергопотребления для видео с процессорами Intel.

• Safari Technology Preview 144

• Chrome 101

  • Импорт и экспорт записанных сценариев в виде JSON-файла

  • Просмотр каскадных слоёв на панели «Styles».

  • Поддержка цветовой функции hwb().

  • Улучшили отображение приватных свойств класса.

• Edge обогнал на 0,46% Safari по популярности среди десктопов.

Общее

• Google иконки с 4 настройками: заливка, вес, градация и размер.

• «Вариативные» шрифты на коре дерева. Ежегодно фиксируется изменение деформации глифов.

• Идеальный экспорт SVG дизайнерскими инструментами.

Инструменты

• ClickToComponent — позволяет переходить в исходный код компонента в VS Code при Option + Click в браузере. Посмотрите наглядный пример в репозитории.

• Форумы на node.js с несколькими хранилищами данных и RESTFul API NodeBB v2.0.0.

• Альтернативный pnpm v5.1.0

• Mocha v10.0.

Как читать статьи на английском языке

В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.