Дайджест новостей из мира фронтенд-разработки за последнюю неделю 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.
