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

Новости

• вышел Bun 1.2, наносящий конкурентный удар Deno (а также замахнувшийся на поляну Vite):
  • всё больше совместимость с Node.js (90-100%)
  • встроенная поддержка облачного хранилища S3, а также БД помимо SQLite ещё и Postgres и вскоре MySQL
  • текстовый лок-файл взамен бинарного при установке npm-пакетов  bun install, также JSONC (JSON с комментами) для package.json
  • поддержан .npmrc
  • есть мониторинг версий пакетов bun outdated и публикация bun publish, а также патчинг пакетов bun patch (чтоб захаркодить что-то локально в пакете)
  • улучшен bun test
  • добавлен бандлинг HTML-файлов с собранными скриптами, стилями и ассетами
  • появилась возможность запуска кода C++
• а пока Bun ещё не забрался в область форматирования и линтинга Biome опубликовали свои планы на 2025: добавить поддержку HTML, поддержка одних языков внутри других (например, CSS в JS), а также Markdown, взаимодействие с TS и JSDoc
• и отчёт о работе ESLint в 2024: всего проект заработал 189k$ (74% из которых дали крупные компании)
• в FF тоже появится AI, но обещают не воровать пользовательские данные, а запускать локально Transformers.js с базовыми ML-умелками (распознавание объектов, суммаризация…)
• Yeoman (помните такой?) воскресили, чтобы поддерживать стабильность в системах, всё ещё использующих его, и пока не выпускать новые фичи
• в TypeScript 5.8 Beta появился флаг --erasableSyntaxOnly, который будет помечать ошибочными «расширяющие» конструкции языка, которые нельзя просто вырезать, а нужно компилировать (goodbye, Enum?)
• CreateReactApp официально помечен deprecated, если вы его ещё используете, вот знак, чтобы этого больше не делать

Проекты

• jsonquery — DSL для выборки нужных данных (для больших JSON-ов)
• Standard Schema — спека, объединяющая усилия авторов валидационных либ (Zod, Valibot) и тул/фреймворков (tRPC, TanStack Form) в создании общего интерфейса для интеграции разных частей экосистемы между собой
• react-reverse-portal — либа, позволяющая перенести отрендеренную React-ноду из одного места в другое без перерендера (сгодится для отображения в разных местах тяжёлых компонентов)
• is-my-node-vulnerable — npx is-my-node-vulnerable проверит версию Node на наличие уязвимостей (рекомендуется для включения в CI)

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

JS

• способы искоренения any в коде: если флага noImplicitAny вам недостаточно (JSON.stringify и Function всё равно будут производить any), то будут полезны правила для линтинга: @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-function-type, а также либа ts-reset, которая заменяет any во встроенных типах на unknown
• fetch с поддержкой HTTP/2 пока не работает по умолчанию в Node и Bun, но работает в Deno
• оказывается в try {} catch {} можно не указывать скобки и аргумент у catch, и всё будет работать в современных браузерах
• Template literal types — мощнейшая штука, затрагивал пару примеров в прошлом выпуске, но тут прям много юзкейсов и примеров типа такого:

type ToString<T extends string | number | bigint | boolean | null | undefined> =
  `${T}`;

CSS

• юзкейсы для грядущего в ближайшем Chrome обновлении attr(): по сути это долгожданная связка HTML и CSS без использования JS, храним данные в разметке, используем в стилях:

<li color="{props.colorVal}" color-name="{props.colorName}">
  <div class="item" place-col="2">column 2</div>
</li>

background-color: attr(color type(<color>));
grid-column: attr(place-col type(<number>));

• накопление ошибок и противоречий в легаси неизбежно, не избежал этой участи и CSS: в списке приводятся плохие решения, с которыми мы живём, например, box-sizing по умолчанию не border-box, border-radius следовало быть corner-radius, составные селекторы должны разделяться по запятым, а не ломаться полностью при незнакомом синтаксисе
• если вам не нравится хранить цвет и полупрозрачный цвет в двух разных переменных, то на помощь приходит функция color-mix(in srgb, var(--green), transparent 50%)
• дефолтный системный шрифт font-family: system-ui, sans-serif
• @counter-style — тема кастомного буллета в списках раскрыта полностью: префиксы, суффиксы и иконки
• семейство свойств offset-* позволяет располагать элементы относительно какой-либо формы, в том числе произвольной, а если добавить transition, то и двигать относительно неё

HTML

• просто страница, на которой используются всё HTML-теги
• нативный <dialog> внезапно решает проблему, по которой появились portal-ы во фреймворках

Платформа

• при задаче оптимизации сайта/приложения немаловажную роль играют заголовки Cache-Control Headers, которые у некоторых CDN-провайдеров имеют значения max-age=0 и must-revalidate по умолчанию для CSS и JS-файлов