#Пульс_веб_платформы 07.06.2024

Новости
- в FF будет добавлена генерация alt-ов с помощью нейросети прямо на устройстве: фича хорошо ложится в тренд, что AI будет появляться в браузерах и помогать пользователям с взаимодействием с сайтами и приложениями
- вышла react-testing-library v16.0.0: @testing-library/dom и @types/react-dom вынесены в отдельные зависимости, чтобы устранить возможные конфликты
- история с эпичным обновлением eslint продолжается: анонсирован ESLint Configuration Migrator — тула для автоматического перевода помощи в переводе .eslintrc.*-файлов в flat-формат eslint.config.js, чтобы не делать это руками (пока умеет немного и работает с простыми конфигами)
- анонсирован intent to ship директивы @property в FF (чтобы объявлять кастомное свойство с нужным типом): пригодится, например, для кроссбраузерного создания CSS-таймеров
- вышел Rspack v0.7: добавили lazy compilation (собирается не сразу весь проект, а только входные точки; остальное собирается на лету в момент доступа) и ускорили сборку CSS
- вышел Turborepo 2.0: новый консольный UI и watch mode для автозапуска скриптов, у которых нет своего режима --watch, например, eslint

Проекты
- client-side-rendering — у нас был Webpack, ленивая подгрузка чанков и ассетов, MutationObserver, современный React, несколько хуков, парочка сервис-воркеров и большое желание не юзать SSR. Не то, чтобы всё это было категорически необходимо в разработке, но если уж начал оптимизировать CSR, то к делу надо подходить серьёзно
- fxts — либа для функционального программирования на JS/TS c each, filter, fx, map, pipe, range и другой функциональщиной на борту

Статьи и демки

JS
- разбор темы дата-фетчинга в SPA c асинхронной реализацией, параллельными запросами, и, что показалось мне интересным, с разбором паттерна prefetch с помощью либы swr: предзагружаем бандл следующего компонента по onMouseEnter и заодно результат запроса кешируется и больше повторно не запрашивается
- Intl.DateTimeFormat как альтернатива moment.js и date-fns для форматирования даты в нужном виде, умеет: длинный/короткий формат в зависимости от локали, дни недели, минуты, часы, секунды, таймзоны, 12/24 часа
- статьи Josh Comeau всегда приятно читать, независимо от темы, вот и статья про промисы подоспела, вроде база, а изложена хорошо
- бестпрактисы создания хуков на примере SOLID-принципов: к примеру, HOC, подмешивающий данные через проп в компонент — это такой себе DI «на коленке»
- сборник новинок Node за последнее время: встроенный test runner, watch mode, corepack, .env loader, import.meta.file для __dirname и __file, timers promises

CSS
- свежий гайд по единицам измерениям CSS, примечателен двумя моментами: 1) выглядит, что Geoff Graham вернулся на CSS Tricks, возможно ресурс оживёт, 2) когда объявляется кастомное свойство @property --hue { syntax: "<number>" }, по сути это пользовательская «единица измерения»
- свойство gap для флексбоксов работает с Chrome 84, FF 63, Safari 14.1, то есть давно достойно применения, если нужен условный отступ между элементами, выключающийся при переносе на новую строку, в двунаправленных лейаутах, комбинируется с марджинами
- есть такой частый кейс — анимация с 0 до auto, которую из-за особенностей CSS не возможно сделать через calc(), поэтому есть предложение ввести новую функцию calc-size(), которая сможет анимировать между значениями, если одно из них intrinsic (auto, fit-content, stretch…)

HTML
- как можно улучшить якорные ссылки: scroll-behavior: smooth для плавного скролла, scroll-margin-top и scroll-padding-top для отступа после скролла, :has(h1:target) для стилизации таргет-элемента
- если вы до сих пишете rel="noopener" для безопасности, это можно уже не делать, так как браузеры сами неявно применяют эту фичу

Платформа
- то, что размер DOM (количество DOM-элементов) напрямую влияет на перфоманс как-то интуитивно понятно, но интересна деталь, что существенно сказывается именно глубина вложенности DOM-элементов друг в друга (глубина в 5000 элементов скажется уже на этапе построения дерева, даже до стилей)

@web_platform | Поддержать канал 🤝