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

Новости

  • команда TS выкатила превью нативного TS на Go, можно попробовать в терминале npm install -D @typescript/native-preview или в VS Code в виде расширения: оно живое (!) и по ощущениям LSP в VS Code шевелится побыстрее
  • Microsoft заопенсорсит расширение Copilot-чата, тем самым видимо планируя прикрыть зоопарк форков VS Code с AI-панельками; также Copilot Chat будет поддержан в вебе и существенно доработан
  • и тему VS Code продолжает новость, что в редакторах HTML и CSS в подсказках будет выдаваться инфа о Baseline-поддержке свойств, тегов и атрибутов (а также не только в VS Code, но и в других редакторах, которые используют опенсорсные наработки Code - OSS)
  • в PHP 8.5 появится pipe-оператор (ноябрь 2025), а вот подзаброшенный пропоузал в JS уже вряд ли вскоре оживёт
  • Stackoverflow стремительно теряет активных пользователей (и не потому что на все вопросы уже ответили, а потому что узнавать ответы стали в других местах), поэтому компания думает о ребрендинге и перефокусировке с только Q&A ещё на сообщество и построение карьеры; что ж, такие времена, или адаптируйся под AI, или умри
  • Mozilla просит суд не перекрывать «денежный» кислород от Google в антимонопольном деле; такой вот парадокс: чтобы поддержать хоть какую-то конкуренцию, нужно продолжать делать «нерыночные» вливания за поиск Google по умолчанию в FF
  • ESLint в добавок к JSON, md и CSS, теперь умеет линтить HTML с помощью плагина html-eslint; как и в прошлых случаях из коробки сразу идут многие базовые правила, которые не надо дополнительно настраивать
  • вышли ES Module Shims 2.5 (это те, которые уже в версии 2.0 давали возможность запускать type-erasable-код на TS прямиком в браузере, без компиляции):
    • позволяют использовать нативные импорты CSS- и JSON-модулей: import style from './style.css' with { type: 'css' };
    • нативный TS теперь просто работает, без доп настроек
    • появилась возможность замутить «нативный» hot reload через import.meta.hot
  • в Deno начали тыкать палочкой, типа их фреймворк Fresh что-то уже не особо-то и fresh (протух-с), поэтому вышел пост, что Fresh 2.0 уже на подходе, под капотом будут Express/Hono-like API, позволяющие без лишнего бойлерплейта писать сервер, организовать мидлвари и другие плюшки
  • в семействе Rs- вышла новая либа для создателей либ — Rslib: внутри уже предустановленные конфиги для беспроблемной сборки (в том числе стилей) и публикации либ в разных форматах (ESM, CJS, UMD, Module Federation)
  • а в семействе TanStack вышла клиентская БД/стор — db, которая держит данные на клиенте, позволяет делать выборки (query) из этой БД и синкается с любым бэком

Проекты

  • code2tutorial — ещё один проект, составляющий документацию-туториал по репозиторию (аналог deepwiki)
  • crosspost — JS-либа для кросспостов в соц сети; тут хочется подсветить не фичи либы, а её API — чистый паттерн Strategy (о котором рассказывал в тренажёре), зацените

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

JS/TS

  • для работы с буфером обмена можно использовать методы navigator.clipboard.writeText() для обычного текста или navigator.clipboard.write() для всех остальных форматов типа картинок, текстового контента и HTML; а проверить браузер на умение вставлять определённый формат (без выброса исключения) можно с помощью ClipboardItem.supports()
  • а собственно Async Clipboard API поддерживает помимо стандартных text/plain, text/html и image/png ещё и кастомные форматы: для этого при создании new ClipboardItem нужно указать в названии типа префикс web :
const clipboardItem = new ClipboardItem({
  [`web ${jpegBlob.type}`]: jpegBlob,
  [`web ${gifBlob.type}`]: gifBlob,
});
  • юзкейсы генераторов в JS обычно довольно специфические, но если свести к сути, то они подходят для любой условно «бесконечной» серии действий: перебора элементов, генерации наборов, обработки асинхронных сообщений; неочевидный пример:
function* getElements(tagName = "div") {
  while (true) yield document.createElement(tagName);
}

CSS

  • alt-текст, который показывается, если изображение не загрузилось, тоже можно стилизовать: для этого к img {} просто применяются текстовые стили, можно дополнительно проставить в JS data-атрибут для картинок на колбеке onerror
  • для нативных <input type="date"> и <input type="time"> в некоторых хромиум-браузерах показываются иконки часов и календаря, для их стилизации подходит псевдокласс ::-webkit-calendar-picker-indicator
  • если решение работает, это не значит, что оно оптимальное; так ответ на StackOverflow может быть устаревшим, хоть и популярным, и чат-бот также может взять популярное устаревшее решение из поискового топа; вот к примеру для анимированного градиента текста достаточно таких стилей:
.gradient-text {
  background: linear-gradient(90deg, #00f, #0ff, #00f) -100%/ 200%;
  color: transparent;
  animation: shimmer 2s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
}


@keyframes shimmer {
  to {
    background-position: 100%;
  }
}
  • новую функцию shape() можно использовать не только в связке с clip-path() для рисования фигур, но и с offset-path для задания формы движения: вместо offset-path: path("") более читаемый offset-path: shape()
  • некоторые CSS-сниппеты разной степени полезности: точно подтвержу, что если делаете какой-то общий компонент со стилизацией, которая может внезапно стать «глобальной» (стилизация по тегам p, body…), то её точно полезно завернуть в @layer {}, чтобы у потребителя не возникло необходимости переопределять ваши «глобальные» стили, так как они будут применяться раньше по каскаду
  • неинтуитивные решения для лейаута, например, по умолчанию минимальная ширина grid- и flex-детей — auto, что не всегда удобно, и её можно сбросить:
.wat {
  min-height: 0;
  min-width: 0;
}

HTML

<datalist>
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
</datalist>

Платформа

  • памятка по проверке доступности сайта/приложения с клавиатуры и из скринридера (NVDA, TalkBack, VoiceOver)