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

Новости
- выпущена Node v22.1.0: появилась поддержка NODE_COMPILE_CACHE для включения режима кеширования V8 (если граф модулей не меняется, то повторная пересборка становится быстрее за счёт кэша)
- только недавно в Next.js решили не патчить fetch, как в React решили патчить Date: «мы по-тихому, никому мешать не будем, со стандартами будет совместимо, вы же полифиллы используете, вот и дату норм пропатчить»; вроде так, но есть нюанс: в случае полифиллов добавляются костыли для воссоздания недостающих стандартных возможностей платформы, а фича-патчи добавляют проприетарные костыли, что уже не то же самое

Проекты
- react-tracked — представьте, что у вас есть useState/useReducer, которые триггерят ререндеры не всегда, когда стейт перезадался, а когда он именно изменился, стал другим (под капотом Proxy, работает для вложенных уровней стейта тоже)
- pragmatic-drag-and-drop — многообещающая либа для драг-н-дропа (для травмированных React DnD)

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

JS
- почему таки плохо патчить globals: автоматом создаёт техдолг, нестандартные фичи работают непредсказуемо в разных средах, скрывают магию внутри, лочат на вендора и в целом тормозят прогресс в долгую
- Bun может ускорить не только локальную разработку, но и сборку и деплой на CI, так как, например, заменяет yarn и Vitest
- (не совсем JS, но это не так важно) как разложить одно нечитаемое условное выражение на несколько мелких или же вынести в отдельную функцию
- чтоб не оборачивать new URL(urlstring) в try catch для обработки невалидных урлов, можно использовать URL.canParse(urlstring), а также скоро можно будет URL.parse (начиная с Chrome 126 и Firefox 126)
- React хорош для организации UI-компонентов, но когда речь заходит про дата-фетчинг, то всё что предлагает React из коробки — это выйти в окно; и в этом случае на помощь приходит React Query, который позаботится о кэшировании, оффлайне, восстановлении скролла и тд, чтобы вы спокойно могли с чистой совестью выключить компьютер в конце рабочего дня
- лучший способ гарантировано отправить неблокирующий запрос при закрытии страницы — на событии visibilitychange выполнить navigator.sendBeacon()
- возможно для управления версиями Node стоит попробовать альтернативы nvm: самой перспективной выглядит Volta, которая не требует доп файлов (конфиг в package.json), кроссплатформенна, автопереключает версию при смене проекта, а заодно может переключать версию yarn

CSS
- как-то незаметно в повседневной разработке мы перестали думать про минификацию стилей, тк эту функцию взяли на себя фреймворки, хотя [олдфаг mode on] раньше было почему-то важно считать сколько десятков килобайт умеет сэкономить твой минификатор [олдфаг mode off]
- мифы про специфичность: 1) специфичность — это не целое число, а набор из трёх чисел a, b, c 2) добавление атрибута style не добавляет специфичности 3) !important не добавляет специфичности, а уносит объявление в другой origin
- в мире победившего color-mix()-а серые палитры создаются с помощью полутона между чёрным и белым color-mix(in oklch, black 20%, white)
- border-color: transparent — это ок, если, например, на hover задавать видимый цвет, чтобы при задании рамки не изменялись размеры элемента
- :has() — это не только «родительский» селектор, но и полноценный условный оператор для элементов интерфейса, например, для select (красим select в зависимости от выбранного значения) или же для всего интерфейса (красим весь сайт в зависимости от выбранного значения (сомнительно))
- субгриды в помощь для контроля за переполнением дочерних ячеек грида на примере нумерации в упорядоченных списках
- Popover API для создания тултипов, якорящихся на элемент-триггер (сложно, но возможно)

Платформа
- разработчики React Aria поделились, как сделать человеческое выпадающее субменю, чтобы оно случайно не закрывалось во время движения курсора: строится визуальный треугольник, в рамках которого считается, что подменю не должно быть скрыто + по скорости движения предполагается, куда пользователь собрался двигать курсор

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