Пульс веб-платформы 21.06.2024

Новости

background-color: if(style(--variant: success), var(--color-success-60));
border-radius: if(style(--shape: pill) ? 999em: 0.2em);
  • вышла Node 22.3.0: в тест-раннер добавлено снепшотное тестирование
  • в React-сообществе бомбануло, что в 19 rc версии асинхронные сиблинги в <Suspence> стали рендериться последовательно, а раньше было параллельно (что использовалось, к примеру, в tanstack-query); команде React пришлось признать, что они недооценивали, сколько людей продолжают делать SPA, а не рендерить на сервере и отложить релиз 19 версии (что забавно, pr спокойно себе был в работе с марта 2023)
  • опубликованы результаты опроса State of JS 2023 (преимущественно американцы и европейцы мужчины среднего возраста поделились, что думают):
    • в JS из коробки не хватает статической типизации, боль вызывает ситуация с ESM/CJS-модулями, поддержка TS, работа с датами, браузерная поддержка (особенно Safari)
    • Vite многие пользуют и почти все довольны (то же актуально для Vitest), что не скажешь о webpack — пользуют меньше и больше недовольных
    • у Next и Vue сравнимое количество использующих и недовольных
    • недовольных React становится больше
    • растёт популярность pnpm в том числе как инструмента организации монореп

Проекты

  • React Internals Explorer — визуализация происходящего в дереве рендера React, в том числе проиллюстрирован пример с <Suspence>: в SPA в 18 версии React они будут рендериться параллельно, а в rc 19 — последовательно

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

JS

  • как использовать встроенный тест-раннер Node, в том числе свежедобавленное снепшотное тестирование: describe, mock, it живут в node:test, как и snapshot; названия утилит классические, API вполне предсказуемый; snapshot сам по себе не рендерит компоненты, а работает в паре с каким-либо рендерером, например, @testing-library/react
  • вроде и маркетинговая статья, но как-то честно составленная: Node — самая популярная технология, скачивания растут, баги правятся, плюшки появляются: ems, fetch, watch, AsyncLocalStorage, WebCrypto
  • Page Visibility API — сто лет в обед, но как-то не на слуху, используется, например, чтобы на событии visibilitychange, когда страница не просматривается, отправить аналитику или понизить битрейт проигрываемого видео
  • проблема, которую решает React Compiler с автомемоизацией состояния в компонентах, уже давно решена из коробки в MobX (видимо поэтому MobX помечен как несовместимый с RC)

CSS

  • единица измерения 1cap — это высота заглавной буквы в шрифте, если нужно сделать что-то такой высоты (например, отступ между словами или размеры иконки), то можно пользовать (доступно во всех браузерах с декабря 2023)
  • в браузерах в последнее время имплементировано много CSS-фишек, но не все доступны повсеместно: пока нельзя использовать View transitions, Style Queries, @starting-style, зато можно URL.parse(), Safe flexbox alignment, currentcolor в relative color syntax
  • редкий юзкейс для em — для задания размера отступа text-underline-offset

HTML

  • в Chrome предложили элемент <permission>, который встраивается в страницу и показывает, какие есть доступы к камере и микрофону, а также позволяет включить или выключить их; интересно, 1) как с появлением веб-компонентов и React расширилось понимание элементов страницы, 2) что элемент будет не веб-компонентом, а именно стандартным браузерным элементом, чтобы гарантировано сделать его визуально доступным с ограничениями по стилизации

Платформа

  • помню, когда GitHub выкатили GraphQL-песочницу, было интересно её тыкать, казалось, вот она — настоящая гибкость, но в итоге оказалось всё не так радужно: не легко спрятать за авторизацию частичные поля и наоборот легко с клиента отправить схему, которая выгребет мегабайты JSON-а, а также есть другие проблемы; а подходит GQL в случае, если есть контроль над всеми клиентами, их <= 3 и сервер и клиенты написаны на разных языках