Дайджест новостей из мира фронтенд-разработки за последнюю неделю 2–8 мая. Ещё один сайт на HTML. Да, так тоже можно. Узнайте о главных болях веб-разработчика. Если работаете с <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 не самый лучший вариант для адаптации мобильной версии. За 2 минуты разберитесь … оператор или нет? Узнайте о новом API, которое позволяет получить доступ к сведениям у локально установленных шрифтах пользователя. Потренируйтесь в создании легковесного компонента на Lit. Узнайте о JavaScript контейнерах. Опять эти странные вопросы про JavaScript. Давайте с ними разберёмся. Что случится если вы откажетесь от React? Создайте свой блог на Next.js и MDX. Узнайте как работает композиция React-компонентов. Пора обновляться до v13.3.3. Вовсю ждём v14 в новой бете v14.0.0-next.16. 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.  Автор профессиональных курсов