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

Новости

  • вышла версия Tailwind 4.0: как уже писал раньше, TW впитывает фичи платформы (что хорошо), но по-прежнему запихивает всё в className, при этом есть и вариант с добавлением «миксинов» с помощью директив @apply, @variant (что в целом ни хорошо, ни плохо, а уже было в SASS)
  • поисковая страница Google теперь может требовать у пользователя включить JS, что само по себе ок мув, как и то, что сейчас SPA-страницы индексируются тоже уже ок на равне со статическими
  • вышла первая бета Rolldown — замены Rollup + esbuild для Vite: переписанный на Rust новый бандлер Rolldown помимо обратно-совместимого API будет иметь в будущем ещё и фичи, которые Rollup не поддерживает: аналог webpack-овского optimization.splitChunks, HMR, а так же Module Federation
  • выпущен Vitest 3.0:
    • доработан вывод репортов в консоль (стало выглядеть приятнее)
    • при наличии нескольких проектов, теперь удобно конфигурировать это в поле workspace в vitest.config
    • добавлена поддержка конфигурации нескольких браузеров, чтобы использовать один сервер для прогона тестов сразу в нескольких браузерах
    • запуск теста по номеру строки в файле, где он написан
  • в Chrome 133+ появится поддержка обновлённой функции attr(), которая раньше работала только внутри свойства content, а теперь сможет работать с любым свойством:
<div data-foo="blue">test</div>
div {
  color: attr(data-foo type(<color>), red);
}

Проекты

  • ohshitgit — набор кейсов, когда у вас случилось что-то нехорошее в git, и как это вернуть взад
  • fortune-sheet — либа React / Vue + immer на TS для создания Excel-like-таблиц
  • arktype — рантайм валидатор, инферит TS-типы, быстрый

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

JS

  • React Query — это не data-fetching-либа, а менеджер состояния, которое живёт на сервере; именно поэтому, если источник правды вашего приложения сохраняется на бэке, то React Query заменяет собой необходимость использования отдельного стейт-менеджера на клиенте
  • все либы для работы с хоткеями опираются на задепрекейченные поля, поэтому использовать их нужно осторожно; если ли работать с хоткеями без либ, то нужно использовать поле key, латинские буквы (A-Z) и арабские цифры (0-9), нормализовывать символ с помощью .toLowerCase() и .toUpperCase(), использовать Shift для модификации и не использовать для неё Alt
  • фишки динамических строковых литералов в TS:
// ключи
interface User {
  customerKey: `cus_${string}`;
}


// версия
type Version = `v${number}.${number}.${number}`;


// расширение
type ImageExtension = `png` | `jp${`e` | ``}g` | `webp`;

CSS

  • ежегодная подборка свежих CSS-фич, которые можно уже использовать: всё, что касается <dialog> и popover, конечно, только для внутренних проектов сгодится, а вот применение @property и linear() для анимаций, которые не страшно, если отвалятся, уже прям маст-хэв
  • напоминание, что ссылки не только на #якорь, но и на определённый текстовый фрагмент на странице (а заодно и стилизация выделенного текста по ::target-text) уже работают по всех современных браузерах, для некритичных вещей точно можно тащить в прод
  • современные CSS-фичи типа @container(), @container style(), @supports дают возможность старгетироваться на конкретное устройство и это приводит к возможности злонамеренного отслеживания типа устройства, ОС, почтового клиента: решение — предзагружать все «условные» ассеты (картинки, шрифты) заранее, а не только те, которые «подходят» устройству

HTML

Платформа