Новости
- Nicholas C. Zakas прорабатывает поддержку в ESLint плагинов для других (неES) языков: началась работа над плагином для линтинга CSS (направление Stylelint → ESLint)
- часть OSS-разработчиков Flutter создали форк Flock из-за недовольства, что баги в оригинальной команде долго фиксятся, планируют активно работать с сообществом и не отходить от оригинального Flutter (пока что)
- в Mozilla Foundation (НКО) сократили 30% персонала (отделы advocacy и global)
Проекты
- 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 и иконками внутри- этот год был богат на урожай 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'">Платформа
- вы наверняка знаете webstatus.dev, где есть инфа в скольких процентах браузеров поддерживаются те или иные фичи; так вот к этим данным есть API api.webstatus.dev (описание схемы openapi) на поиграться
@web_platform | Поддержать канал 🤝