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

Новости

  • обновился редактор Cursor 1.0:
    • главное — появилась настройка в 1 клик MCP-серверов
    • также из интересного появилась бета-фича Memories: редактор может запоминать факты из диалогов и ссылаться на них в будущем
  • последние обновления ES от TC39:
    • Array.fromAsync перешёл на Stage 4 (доступен везде)
    • Error.isError перешёл на Stage 4 (доступен везде)
    • using перешёл на Stage 4 (Chrome only)
    •  Seeded Pseudo Random Numbers от Tab Atkins перешёл на Stage 2
  • обновился Astro 5.9:
    • появилась экспериментальная встроенная поддержка Content-Security-Policy посредством встраивания тега <meta> с нужными хэшами используемых файлов (также загружаемых динамически)
  • недавно анонсировали @platformatic/php-node — официальный модуль Node.js с возможностью процессить PHP внутри Node.js-рантайма; главный вопрос был «зочем?», и вот выпустили статью, где рассказали юзкейсы: миграция PHP-прил на Node.js, гибридные приложения (Node.js сервисы с кусочками PHP-процессинга)
  • React Router пообещали сделать стабильнее через перевод процесса разработки на процесс TC39 Process (проход по стейджам + публичные обсуждения)
  • команда Edge завезла в будущий Chrome 139 стилизацию gap-ов в гридах/флексбоксах посредством новых свойств column-rule-* и row-rule-*
  • релизнули первый стабильный Oxlint (линтер на Rust от Evan You сотоварищи):
    • за счёт мультипоточности быстрее ESLint в 50-100x
    • есть автомиграция flat-config-а ESLint в .oxlintrc.json
    • сразу включает > 500 правил из самого ESLint и популярных плагинов + собственные правила
  • DigitalOcean выпустили MCP-сервер, чтобы деплоить на платформу сразу из редактора без лишних конфигов
  • анонсировали бету Safari 26, да, Safari 19 не будет, будет сразу 26, следуя за числом года (что будет после 2099 года видимо уже неважно):
    • наконец-то будут SVG-favicon-ки
    • тег <model> для показа 3d-моделей в браузере (с фолбеком в обычную картинку)
    • в CSS поддержаны Anchor Positioning, Scroll-driven Animations, contrast-color(), progress(), margin-trim
    • из API поддержаны URLPattern, scrollMargin в IntersectionObserver, File System WritableStream,  Pattern Modifiers в RegExp

Проекты

  • canidev.tools — CanIUse для фич девтулзов в движках
  • odyc — забавная либа для создания простых нарративных игр прям из конфига, такие вайбы «языка» Scratch
  • lingo.dev compiler — мультиязычная поддержка в React-прилах через слой перевода с помощью LLM: думаю, такую тенденцию будем наблюдать и дальше — воткни LLM-слой в сборку для какой-то понятной ограниченной задачи и всё просто заработает

Статьи, мнения, туториалы

JS/TS

  • с помощью document.currentScript можно пробросить через тег <script> внутрь скрипта data-атрибуты, чекать обычные атрибуты (типа, что скрипту обязательно проставлен defer) или же порядок следования скрипта в разметке (только в начале body или после определённого элемента)
  • Tanner Linsley убеждает, что URL как хранилище стейта недооценено из-за проблем с парсингом, типизацией и отсутствия связи с роутингом напрямую и рекомендует использовать TanStack Router, чтобы порешать все эти проблемы и наслаждаться рантайм-валидацией роутов с безопасным сохранением стейта в URL
  • в отличие от директив (типа use strict) магические комменты в начале файлов вроде /** @aPragma */ или //# aMagicComment, влияющие на процесс интерпретации и транспиляции JS-файлов, нестандартны и мало задокументированы

CSS

  • напоминание, что у вариативных шрифтов можно анимировать font-weight
  • ещё одно напоминание: вьюпорт-ориентированные динамические единицы измерения sv*, lv*, dv* с нами уже с 2022 года, то есть сейчас уже считаются широко распространёнными
  • анимация до не фиксированного, а динамического значения:
@keyframes oscillate {
  from {
    transform: translateX(calc(var(--amount) * -1));
  }
  to {
    transform: translateX(var(--amount));
  }
}

HTML

Платформа

  • задумывались ли вы куда следует ставить фокус при открытии модалки: в инпут, на кнопку закрытия, на заголовок, на кнопку ключевого действия в модалке? Однозначного ответа на этот вопрос нет, зато есть набор вопросов, которые можно себе задать, чтобы выбрать подходящий вариант для вашего конкретного случая