Новости

• Vercel привлек 250 миллионов $ финансирования, а это значит, что ещё больше «нетехнических» клиентов будет в один клик пользоваться облаком, генерировать компоненты на https://v0.dev и также заливать их в облако, а потом платить деньги фиксикам, чтобы это всё работало
• (вдогонку к прошлой новости) появилась экспериментальная поддержка React Compiler в Next.js, что гладко укладывается в концепт «дев сложный, заплати и мы сделаем проще» (а кто сделал его сложным, КТО?!)
• в Chrome 126 собираются встроить мини-LLM, чтобы пользователь мог выполнять простые задачи на сайтах и в веб-приложениях с помощью ИИ напрямую из браузера (пахнет вендор-локом, но концепт прикольный, вангую ИИ-«помощники» появятся во всех браузерах, чтобы помогать пользоваться сайтами)
• а в 125 версию Chrome в девтулзы уже добавили ИИ-фичу в консоль (объяснение ошибки, чтоб в гуглол не ходить), также завезли отладку anchor positioning, улучшили информацию об ошибках в Sources, а в Network добавили инспект заголовков Early Hints headers, в Performance теперь показывается инфа по скорости CSS-селекторов и ещё обновился Lighthouse
• Bug 33654, Opened 25 years ago, Closed 2 days ago: то чувство, когда сын закрыл баг отца

Проекты

• littlezipper — создание zip файлов в браузере и в node/deno c CompressionStream API (доступно во всех средах)
• xlsxtable — создание .xlsx файлов на клиенте и сервере
• svgviewer — поисковик и просмотрщик SVG-изображений с возможностью экспорта в виде растровой картинки, data URI или react-компонента

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

JS

• новый статический метод const { promise, resolve, reject } = Promise.withResolvers() позволяет управлять промисами извне конструкции new Promise((res, rej) => {})
• про предикаты типов (function isType(arg: any): arg is Type): в целом полезны, из минусов добавляют нагрузку в рантайм и дублируют логику самих типов
• как создать свой минималистичный стор-менеджер в React без использования контекста, а с useSyncExternalStore, который к тому же из коробки подцепит типы
• и если вы всё таки предпочтёте пользоваться контекстом, как избежать множественных вложенных друг в друга контекстов через <Providers providers={[providersList]}>
• официально представлена альфа-версия Pigment CSS — новая CSS-in-JS-либа от MUI, которая мимикрирует по синтаксис Styled Components, но при этом работает в билд-тайме (и поэтому не использует контекст, что важно для серверных компонентов)
• даже если вы используете React, то всё равно вы пишете JS, то есть сталкиваетесь с контекстом выполнения и замыканиями, и как следствие можете в замыкание мемоизированной функции затянуть какой-нибудь большой объект, который не будет подчищаться garbage collector-ом
• реализация идеального Deep Equal сравнения объектов в JS, а также вариант Shallow Equal, который используется в React

CSS

• медиа-выражения для определения размеров вьюпорта больше не нужны? Флексбокс, грид, контейнер-выражения (а также :has()) решают задачи лучше медиа-выражений, так как специально для этого предназначены и могут стилизовать респонсив-компоненты независимо от вьюпорта, но зато учитывая окружающий контекст. А медиа-выражения теперь для определение фич и настроек девайса (тема, контраст, анимации)
• пока функция color-contrast() не доехала до браузеров, задачу подбора контрастного цвета можно решить с помощью relative color syntax
• CSS-фич стало настолько много, что пора расчехлять старый-добрый w3c-маркетинг и сделать отсечки CSS4, CSS5 и CSS6 (а что, в ECMA-движухе же получилось)

HTML

• в результатах опроса State of HTML 2023 каждый найдёт новенькое для себя: у нескольких <details> с одинаковыми name открыт может быть только один (аккордеон), <script async blocking="render"> блокирует рендер, <input type="file" accept="video/*" capture> сделает запись с пользовательской камеры