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

Новости

  • в Chrome 138 (сейчас уже в бете) будут доступны CSS-функции sibling-index() и sibling-count(), которые отдают интежер с позицией элемента среди собратьев и общее число детей, будет работать внутри calc():
li {
  animation-delay: calc(0.1s * sibling-index());
}
  • выпущен tech preview «растифицированного» Vite — Rolldown-Vite: под капотом заменили связку Rollup + esbuild на собственные Rolldown + Oxc, чем существенно ускорили сборку по времени и памяти; заодно решили, что раз оно теперь работает быстро, то можно и для дев-сервера сделать не лёгкую ESM-сборку, а полноценную, и в будущем в Vite будет доступен режим full-bundle mode
  • обновился Vitest до версии 3.2:
    • задепрекейтили настройку workspace в пользу projects
    • добавили аннотации в выполнение тестов, которые будут выводиться в консоль, и кастомные цвета для projects
    • добавили возможность раcширения встроенных locators собственными методами

Проекты

  • starwind — тейлвиндовые компоненты для Astro (не shadcn/ui единым)
  • livestore — решение для стораджа данных на клиенте в SQLite c реал-тайм-синхронизацией всех клиентов и бэка
  • udm14 — если добавить параметр &udm=14 к поисковой строке гугла, то он внезапно откроется без AI-обвеса, суммаризаторов и тд
  • small — минимально возможные синтаксически валидные файлы на всех языках (например, в JSON-файлах — минимальное содержимое 0)

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

JS/TS

  • природа языка JS такова, что при «кидании» в throw можно бросить не только объект ошибки Error, но и строку, число, объект, и это создаёт проблемы с тем, что и в каком формате ожидать в catch; TypeScript тут особо не помогает, исключения в TS не тайпчекаются, поэтому рекомендуется при обработке исключения проверять его тип
export const parseError = (error: unknown) => {
  if (typeof error === 'string') {
    return error;
  }


  if (error instanceof Error) {
    return error.message;
  }


  return 'An error occurred';
};
  • если вы приводите строку к дате new Date('2025-05-28') и new Date('2025/05/28'), то результаты могут быть разные: в первом случае браузер воспринимает строку как неполный формат записи даты-времени ISO 8601 и дополняет её на своё усмотрение (так, что может даже открутить часами дату до предыдущего дня, если устройство находится в удачной таймзоне)
  • flushSync — метод в React, который позволяет минуя батчинг императивно и синхронно запустить обновление UI в нужный момент, например, чтоб корректно установить фокус в инпут, который только что показался с помощью сеттера из useState
  • есть такой тип данных Uint8Array, который как обычный массив, но каждый элемент в нём гарантировано размером 1 байт; так вот, в V8 на больших размерах массивов (> 150) Uint8Array занимает меньше места в памяти, чем обычный массив
  • дежурное напоминание: в свойстве firstChild может оказаться не нужный DOM-элемент (тег), а текстовая нода с переносом строки “\n ” (зависит от форматирования HTML-кода), поэтому лучше использовать .children[0] (при этом :first-child в CSS и через querySelector вернёт корректного потомка, не текстовую ноду)

CSS

  • у нативного элемента dialog есть браузерный элемент подложки, который стилизуется через ::backdrop, обычно его делают полупрозрачным (и сам он по умолчанию тоже полупрозрачный); так вот, к нему можно при желании применить фоновое изображение, чтобы сделать подложку непрозрачной и модалку перекрывающей нижний слой
  • полностью CSS-ный редактор в стиле Майнкрафт:
    • все блоки уже заранее построены, но скрыты и показываются благодаря старому трюку с чекбоксами/радиокнопками и соответствующими лейблами
    • анимации тоже заранее запущены, но поставлены на паузу, а нажатие контролов (:active) их снимает с паузы

Платформа

  • мрачноватый рисунок образа будущего: Chrome превращается в новый IE6, так как Google с одной стороны заставляют его продать, с другой — с приходом LLM поиск, а следом и веб-браузинг как таковой, а следом и процесс развития стандартов существенно меняется
  • разработка ПО породила собственную субкультуру с чисто разработческим жаргоном: Yoda Conditions, Stringly Typed, Rubber Ducking, Jenga Code и другие знакомые по разработческим будням явления