view transitions заработал для cross-document (работает так же: незаметно загружается следующая страница, делается и показывается скриншот и затем подменяется на загруженную страницу) (ребята из Astro тут же выкатили обнову)
включён CloseWatcher API, управляющий закрытием dialog и popover
в девтулзах в Network в запрос теперь можно копипастить заголовок запроса целиком, а также обновлён Lighthouse 12.0.0
в Mozilla пошли на рынок инструментов для «безкодового» создания сайтов и выпустили soloist.ai: готовый сайт захостится на https://soloist.ai, под капотом будет next.js (хм, где-то это уже было 🤔)
вышел Prettier 3.3: интересен тем, что ещё лучше форматит TS, JS, React, а также Flow-код, и все улучшения для Flow написали инженеры самого Flow
анонсирован TypeScript 5.5 RC: новые методы Set (union, intersection…); проверка синтаксиса регекспов; импорт типов в js-файлах в JSDoc; Inferred Type Predicates (решает проблему с типами .filter(x => x !== null))
Проекты
JsonDiscovery — расширение для браузеров для интерактивного просмотра JSON (в том числе больших >512MB, на которых JSON.parse положит браузер)
telefunc — как-то уже писал про концепт «серверных» методов, которые напрямую «вызываются» на клиенте, вот эта либа реализует подход «функции вместо API»
web-features-explorer — инструмент для проверки доступности веб-фич в браузерах (в том числе показывает разбивку по месяцам)
Статьи и демки
JS
тема узких горлышек в оптимизации всегда актуальна (да, я смотрю на тебя, React) и тут есть, где разгуляться: в React 18 стоит использовать concurrent-режим рендера ReactDOM.createRoot вместо ReactDOM.render; большие таски можно разделять «перебивками» new Promise((resolve) => setTimeout(resolve, 0)) или await window.scheduler.yield(); хуки react-router useLocation, useRouteMatch, useHistory вызывают ререндеры, лучше пользовать history и location из window, если дело происходит на клиенте
идея использование тайп-чекинга не только для «базовой» проверки типов, но и «для чего-то большего», всегда вызывала у меня отторжение из-за «комплексности» затеи, но если вам это не страшно, можно, к примеру, писать типы-«тесты» для проверки других TS-типов
с Document Picture-in-Picture API можно в мини-окошке браузера рендерить произвольный контент, а не только видео, поэтому там можно показать, например, мини-плеер с помощью createPortal() (жаль, что пока только Chrome)
оператор satisfies позволяет проверить соответствие типа объекта без лишнего «расширения» этого типа
решение интерфейсной проблемы ссылки, вложенной в ссылку: выносим «родительскую» ссылку в отдельный слой с position: absolute и растягиваем на всю ширину с inset: 0, а «дочерней ссылке» задаём position: relative
