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

Новости
- в опенсорс выложен Rolldown, замена Rollup на Rust для Vite: радует, что обратно совместим с Rollup, но пока ещё в активной разработке, не для продакшена
- вышла Node v21.7.0: встроенная стилизация текста console.log(util.styleText('bold', 'text')), загрузка и парсинг переменных окружения process.loadEnvFile(path) и util.parseEnv(content), поддержка многострочных значений в .env файлах
- вышел Biome v1.6: поддержка расширений файлов vue, astro, svelte; новые настройки форматтера; лёгкая миграция с Prettier
- вышел Storybook 8: встроенные визуальные тесты, поддержка React Server Components, обновления интерфейса и ускорение работы
- INP теперь официальная метрика Core Web Vitals, FID будет задепрекейчена в сентябре 2024
- Astro выпустили Astro DB, адаптированную SQL-бд на основе libsql

Проекты
- utopia — система «резиновой» типографики, отступов, сетки: позволяет задать минимальное и максимальное разрешение интерфейса, а также количество промежуточных шагов между ними и получить готовые CSS-переменные для использования
- device-simulator — симуляция девайсов в браузере для тестирования интерфейсов: не browserstack, скорее переосмысление стандартных браузерных дев-тулзов (device toolbar), помощнее, есть возможность показа нескольких устройств одновременно
- gravity-ui — каждое поколение яндексоидов создаёт собственный UI-кит, и этот выглядит очень даже прилично: есть дизайн-система, Figma и токены, позаботилились о доступности, свои иконки; остаётся только понять, какой из двух Яндексов будет его дальше овнить
- react-geiger — счётчик Гейгера для React-приложения: если что-то рендерится долго и часто, то вы это услышите
- jsoncanvas — спецификация и формат файлов JSON Canvas для имплементации бесконечных досок аля Miro, Obsidian и тд

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

JS
- если долго сидеть у реки, то рано или поздно по ней проплывёт заброшенный JS-проект, так как его купили крупняки, уволили сотрудников и забили (речь о Gatsby, если что)
- работа с относительными datetime-ами с помощью Intl.RelativeTimeFormat (давно поддерживаемая в браузерах)
- создание доступных компонентов форм на React: кнопки, лейблы, филдсет, плейстхолдеры, фокус и навигация с клавиаутры, отображение ошибок
- лучшие практики по использованию React Testing Library: тестирование доступности компонентов, реализация смоук-тестов
- make macros great again: теперь подход с прекомпилированными в билд-тайме кусочками JS-кода доступен не только в parcel, но и в webpack, vite и остальных

CSS
- статьи про новые CSS-фичи читаются как научная фантастика: красиво, интересно, когда-то это будет, но пока полностью не работает; вот и в этом материале рассказывается, как собрать ванильные модалки и «тосты»: <dialog> для модальных всплывашек, popover — для немодальных всплывашек, нативная стилизация элементов и показ/сокрытие, стартовая анимация @starting-style и даже anchor positioning для показа в определённом месте интерфейса
- стилизация текста: глитч-эффект, множественные тени и SVG-фильтры (осторожно, можно случайно стать КМС по text-shadow)
- небольшие рецепты из жизни по использованию :has(): изменение лейаута, если в контейнере есть определённый элемент; подсветка контейнера, если внутри есть :target; затемнение соседей при ховере на элементе
- предложение от Ли Веру сделать из кастомных свойств своего рода «объекты»: --color-green: { base: red; 100: green; 200: blue}; зная, что благодаря Ли в CSS уже появилось много ништяков, глядишь и этот тоже затащат
- использование color-mix() для создания палитр: ещё один кусок платформа откусила от sass

HTML
- для записи кавычек в тексте alt используйте одинарные кавычки ' или &quot;

Платформа
- в Chrome 122 появилась улучшенная поддержка Speculation Rules API: это переосмысленный, более выразительный и автоматизированный последователь link="prerender" с исчерпывающим описанием, какие ресурсы и в какой очерёдности прелоадить и пререндерить
- 35 лет назад Тим Бернес Ли описал «спецификацию интернета» — Information Management: A Proposal

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