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

Новости

  • лучше поздно, чем никогда: опубликован CSS Snapshot 2024, внутри появился новый раздел Reliable Candidate Recommendations, куда собраны устоявшиеся спеки со стабильной реализацией в браузерах, но ещё немного косячной, сейчас туда включили: Media Queries Level 4, CSS Scroll Snap Module Level 1, CSS Scrollbars Styling Module Level 1, CSS Grid Layout Module Level 1 и 2
  • обновился Deno до 2.2: главное, что стал поддерживаться node:sqlite
  • в Pinia 3.0 убрана поддержка Vue 2
  • вышел Bun v1.2.3:
    • вернули то, с чего начинался Bun — дев-сервер, bun ./index.html поднимет локальный сервер для статики
    • Bun.serve() на сервере теперь умеет в роуты, то есть можно описать полноценный API с ощущением «на коленке»
  • в AI-поисковике Perplexity объявили, что разрабатывают свой браузер Comet (под капотом видимо всё равно будет chromium 😏), видимо прям разогналась волна «а давайте перепридумаем велосипед с агентами и нейросетями»; считаю, что, чем пихать AI-фичи в уже привычные браузеры, всё лучше выделить это всё в отдельную нишу любителей AI-приблуд
  • обновился React Scan до v0.2.0: интересный мув из разового использования инструмента для нахождения перфоманс-проблем в сторону постоянного использования и накопления «уведомлений» о собранных проблемах
  • в Next.js 15.2 появилась экспериментальная поддержка View Transitions API
  • анонсирован TS 5.8 RC: поддерживает require(esm) (а также флажок обратной совместимости --module node18) и флаг --erasableSyntaxOnly для искоренения enums, namespaces, параметрических свойств класса и import-алиасов (мсье Matt Pocock настроен считать эти фичи TS, требующие компиляции, ошибками в проектировании, и рад нововведениям)

Проекты

  • up-fetch — обёртка над fetch, что интересно с поддержкой недавно вышедшей Standard Schema Specification: в параметрах запроса передаётся валидационная схема в стандартизированном виде, например, с Zod
  • fuite — тула, запускающая Puppeteer и долго ходящая по ссылкам вашей SPA в поисках потерянного времени утечек памяти

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

JS

  • юзкейс, когда нужно в DOM переставить первый элемент в контейнере в конец (в слайдере, например, при показе последнего слайда), решается строчкой container.appendChild(container.firstElementChild)
  • JS часто бывает быстр за счёт JIT-компиляции:
    • JS-код парсится в AST (Abstract Syntax Tree) →
    • AST преобразуется в байт-код (промежуточная версия кода, выполняемая V8) и оптимизируется →
    • если определённая функция/цикл становятся «горячими», то есть выполняются 10000 раз, то байт-код преобразуется в неоптимизированный машинный код (он быстрее, чем код для интерпретатора) →
    • а если код продолжает оставаться «горячим», то он преобразуется оптимизирующим JIT-компилятором в высокооптимизированный машинный код, работающий максимально быстро →
    • если код перестаёт быть «горячим», то он деоптимизируется обратно в байт-код
  • пара мыслей про стейт во фронте:
    • появление API cache в React Query показало, что часто собственный «стейт» фронтового приложения — это не стейт вовсе, а иммутабельные данные с сервера (из API), и наличие API cache часто убирает необходимость использовать менеджер состояния на фронте
    • пропы — изначально, идея для «естественного» разделения зон ответственности модулей, но из-за того, что их начали использовать неправильно (проп-дриллинг), появились, наоборот, связывающие концепты типа глобального Redux-стора, которые во многих случаях не нужны

CSS

  • индивидуальные свойства трансформации translate, rotate и scale не переопределяют значение свойства transform, а дополняют его
  • грядущий в Chrome типизированный attr() несёт парочку приятных (но сейчас уже не кажущихся революционными) моментов:
    • (при необходимости пробросить что-то в стили) отсутствие необходимости объявлять стили в style, возможность оставлять значения в «чистых» data-атрибутах <span data-color="oklch(84.08% 0.3256 143.87 / 86.52%)"
    • возможность прокидывать произвольную строку из атрибутов в CSS, например, из id напрямую, то есть без необходимости дублировать значение в style
  • если вы всё ещё считаете, что #ff0000 или rgb(255, 0, 0) — это самый красный цвет, какой только может быть, то вы ошибаетесь; значение color(display-p3 1 0 0) существенно «краснее», а точнее ярче (но при условии, что ваш девайс поддерживает цветовое пространство Display-P3)
  • как сделать строку или столбец с элементами одинаковой ширины, равной самому широкому из них (например, кнопки одинаковой ширины, равняющиеся по самой широкой кнопке):
.container {
  display: inline grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

Платформа

  • префетч ресурсов типа <link rel="prefetch" as="style" href="page-2.css" /> может, внезапно, откладывать загрузку основных ресурсов, так что лучше эту префетч-оптимизацию докидывать для некритичных ресурсов и уже из JS, после загрузки `window
  • AI-тулы доламывают процесс найма: «хакнуть» интервью становится всё проще, но пройти собес — это только пол-дела, внутри работы при этом придётся нелегко, так как там случаются инциденты, проектирование архитектуры и коммуникация (универы при этом не помогают)