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

Новости

• Cloudflare продолжает свою экспансию: теперь на один Worker можно залить фронт, бэк и бд, кроме того поддерживаются все фронт-фреймворки и Vite, чтобы задеплоить одной кнопкой (для тех, кто смел и не боится блокировочек + стать завендорлоченным), а ещё выкатили платформу для создания AI-агентов (козырное имя пакета npm i agents)
• анонсирована Zod 4 beta: закрыты самые востребованные ишуи, стал быстрее отрабатывать tsc, представлена тришейкабельная версия либы @zod/mini, добавлено новое z.interface() для вывода типа из схемы
• в ближайшее время в браузерах изменится подход к стилизации вложенных заголовков h1: раньше в зависимости от глубины вложенных секций h1 по умолчанию становился всё меньше, теперь будут одного размера
• в Remix и React Router найдена уязвимость, дающая возможность атаки cache poisoning — подмены закешированного ответа JSON-ом злоумышленника (если используете, нужно обновиться)
• обновился Astro до 5.7:
  • выкатили экспериментальный Fonts API, чтобы из коробки управлять загрузкой шрифтов с CDN
  • Sessions API и SVG Components теперь стабильные
• в Firefox 139 будет включен по умолчанию Temporal, и FF станет первым поддержавшим браузером (FF получается становится такой экспериментальной площадкой до выкатки в Chrome)
• Wordpress выкатывает AI-генератор сайтов: no-code-конструкторы верстальщиков не одолели, посмотрит как справится AI
• новый тип уязвимости: нередко AI генерируют в коде зависимостей выдуманные названия пакетов, это в целом не проблема до тех пор, пока злоумышленники не начинают создавать под этими именами уже реальные пакеты с вредоносным кодом, которые попадают к вам в node_modules

Проекты

• firebase.studio — в полку AI-редакторов прибыло со стороны Гугла: внутри работает Gemini, заявлена кросс-платформенность (веб, мобайл), деплой в гугловый хостинг
• json5 — JSON для людей (для ручного написания, например, конфигов): с trailing-запятыми, одиночными кавычками, переводом на новую строку, числами, комментами

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

JS

• юзкейс lit-веб-компонентов для создания кросс-фреймворчной библиотеки компонентов или дизайн-системы: не лочится на конкретный фреймворк, один источник правды
• юнион нескольких наборов свойств лучше опциональных свойств в интерфейсе, так как добавляя возможность отсутствия свойства, вы создаёте больше возможных комбинаций свойств, часть их которых может быть невалидна:

type NotificationProps =
  | { type: "error"; message: string }
  | {
      type: "warning";
      message: string;
      buttonText: string;
    };

type NotificationProps = { message: string } & (
  | { type: "error" }
  | { type: "warning"; buttonText: string }
);

• интересное предположение, что развитие TS в сторону «вырезания» типов, в том числе и потенциальная поддержка «чистого» TS в браузерах, возможно приведёт к падению популярности JSX (в пользу htm и lit-html)
• неприятные фишки JS, с которыми вы наверняка сталкивались: typeof, сравнение двух NaN, неочевидный порядок в .sort()
• наколеночный инжиниринг для livereload: через PerformanceObserver следим за всеми загруженными ресурсами, поллим урл с запросом мета-данных, проверяем заголовки Last-Modified и ETag, в случае, если файл обновился — перезагружаемся

CSS

• неправославное использование tailwind, которое мне симпатизирует: применяем @apply как миксин в обычном CSS вместо портянки атомарных классов в HTML, опционально используем название @utility как отдельный CSS-класс
• напоминание, что Media Queries Range Syntax @media (100px <= width <= 1900px) теперь доступен во всех браузерах
• flex-wrap: wrap не только переносит flex-элементы на новую строку, но и в целом включает режим многострочного flex-контейнера, то есть align-content становится можно применять даже случае одного элемента в контейнере
• :only-child хорошо сочетается с :has — применяем стили для элемента с единственным потомком:

.card:has(> :only-child) {
  padding: 2rem;
}

HTML

• элемент <noscript> можно использовать для задания фолбек-стилей, например, для сокрытия интерактивных элементов при отсутствии скриптов:

<noscript>
  <style>
    .d-js-required {
      display: none;
    }
  </style>
</noscript>

Платформа

• в Interop 2025 наш ждёт: Anchor positioning, улучшение <details>, @scope (топ!), View transitions для SPA, багфиксы backdrop-filter, событие scrollend, мультисвойство text-decoration (а где же мои Style Container Queries в FF?!)
• рубрика дедовские мемуары: Билл Гейтс вспоминает, как они сотоварищи писали интерпретатор языка BASIC для процессора, которого у них самих не было, но они соврали, что есть
• продолжение рубрики от другого деда: Линус Торвальдс вспоминает, как 20 лет назад написал git лично для себя, и ему было начхать на окружающих
• чувак убрал из своих редакторов AI-помощников, так как понял, что начал тупеть (я тоже так сделал, ни о чём не жалею), и пользуется LLM в отдельной модальности для подходящих задач