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

🖇️ Полностью в вебе

Новости
🔡 вышел Bun 1.2, наносящий конкурентный удар Deno (а также замахнувшийся на поляну Vite):
🔵 встроенная поддержка облачного хранилища S3, а также БД Postgres и вскоре MySQL
🔵 текстовый лок-файл взамен бинарного при установке npm-пакетов  bun install, также JSONC (JSON с комментами) для package.json
🔵 поддержан .npmrc
🔵 есть мониторинг версий пакетов bun outdated и публикация bun publish, а также патчинг пакетов bun patch (чтоб захаркодить что-то локально в пакете)
🔵 добавлен бандлинг HTML-файлов с собранными скриптами, стилями и ассетами

🔡 а пока Bun ещё не забрался в область форматирования и линтинга Biome опубликовали свои планы на 2025: добавить поддержку HTML, поддержка одних языков внутри других (например, CSS в JS), а также Markdown, взаимодействие с TS и JSDoc
🔡 и отчёт о работе ESLint в 2024: всего проект заработал 189k$ (74% из которых дали крупные компании)
🔡 Yeoman (помните такой?) воскресили, чтобы поддерживать стабильность в системах, всё ещё использующих его, и пока не выпускать новые фичи
🔡 в TypeScript 5.8 Beta появился флаг --erasableSyntaxOnly, который будет помечать ошибочными «расширяющие» конструкции языка, которые нельзя просто вырезать, а нужно компилировать (goodbye, Enum?)
🔡 CreateReactApp официально помечен deprecated, если вы его ещё используете, вот знак, чтобы этого больше не делать

Проекты
🔡 jsonquery — DSL для выборки нужных данных (для больших JSON-ов)
🔡 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
🔡 оказывается в 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}>

background-color: attr(color type(<color>));

🔡 накопление ошибок и противоречий в легаси неизбежно, не избежал этой участи и 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-файлов

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