Пульс веб-платформы 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

Платформа