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

Новости

Проекты

  • jsonvisualizer — визуализация JSON в виде диаграммы, например, чтобы окинуть взглядом сразу весь ваш развесистый package.json или JSON-ину с большой вложенностью
  • codingfont — шрифтовый батл, чтобы остался тольк один: удобный, моноширинный, твой (у меня победил Source Code Pro)
  • prerender — Node-сервер, который в безголовом Chrome отрендерит SPA и отдаст готовый HTML (например, для поисковиков)

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

JS

  • если отбросить хэллоуинскую тематику, то в одном месте сравниваются подходы к организации UI-китов:
    • headless (безголовый) — кит предоставляет компоненты и минимальные стили, разработчик сам организует CSS для них (Radix Primitives)
    • boneless (безкостный) — кит предоставляет атомарные классы, из которых разработчик уже составляет компоненты (Bootstrap, Tailwind)
    • skinless (безкожный) — как кит предоставляет компоненты, но совсем без стилей (React Aria)
    • lifeless (безжизненный) — набор «голых» хуков и абстрактной функциональности, в которые нужно самостоятельно передать «физическое воплощение», чтобы система «ожила» (TanStack, React Aria Hooks)
  • идея: не использовать try/catch напрямую, а оборачивать код в функцию, возвращающую промис, а уже внутри этой функции прописать catch у промиса
  • пока в Vercel проводят конференции и выпускают новые версии с поддержкой «серверного» React, в мире работает один (на самом деле нет) Tanner Linsley, пытающийся вернуть React на клиент, сделав сервер ещё одним способом работы с асинхронными данными, но при этом оставив прежнюю клиентскую природу React в TanStack Start, очень интересно, что же получится
  • оператор ??= позволяет избавиться от бойлерплейтного кода, когда нужно проверить значение на null/undefined и присвоить дефолтное значение: вместо user.name = user.name ?? 'Anonymous' пишем user.name ??= 'Anonymous'

CSS

  • свойство text-wrap: balance ожидаемо из названия подравнивает длинные многострочные заголовки и короткие тексты, но уже неожиданно может быть использовано для подравнивания любых inline-элементов, переносящихся на несколько строк, например, <li> с display: inline-block и иконками внутри
  • в @layer можно включать не только reset-стили, но и в целом любые глобальные стили на весь проект, если хочется избежать проблем со нарастающей специфичностью и порядком подключения стилей (@layer — это как будто !unimportant)
  • этот год был богат на урожай CSS-фич, которые ещё несколько лет будут входить в обиход, а пока остаётся просматривать списки фич и запоминать, чтобы при случае удачно применить; в этом списке, например, среди прочего есть упоминание о псевдоклассах :user-valid и :user-invalid, которыми с связке с :has() можно связать стилизацию <label> с последующим пользовательским неверным заполнением <input>: input { label:has(+ &:user-invalid) { text-decoration: underline wavy red }}
  • значение width: stretch, оно же -moz-available и -webkit-fill-available несмотря на до сих пор требуемые префиксы, доступная во всех браузерах альтернатива высчитыванию width: calc(100% - 48px), если нужно «компенсировать» отступы у 100% ширины
  • есть такие моменты во фронтендерских буднях, на которые можно забить, а можно мимикрокодилом улучшить интерфейс по-мелочи: много времени не займёт, конечному пользователю будет приятнее; вот, например, outline — его обычно выключают, чтобы убрать «проблему», но ведь можно его оставить, но при этом сделать симпатичным: показывать по :focus-visible, выставить цвет currentcolor, сделать элемент «блочным», немного скруглить углы, задать outline-offset и возможно немного его анимировать

HTML

  • ещё одна статья к подтверждению предыдущей мысли: расставить HTML-атрибуты или обернуть чекбоксы в лейблы, а кнопки в формы несложно, но пользовательский опыт улучшится и на мобильных, и на десктопных платформах
  • недавно ставший с выходом FF повсеместно доступный атрибут fetchpriority помогает браузеру понять, какие ресурсы грузить первым приоритетом (LCP-картинку), а какие можно отложить (второстепенные скрипты и стили); интересный приём — прелоадим стили с низким приоритетом без блокирования рендера <link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

Платформа