Новости
- анонсирован Safari 18 beta: добавлена поддержка View Transitions API (ждём FF), а также Style Queries
@container style(); currentcolor теперь заработает в relative color syntax oklch(from currentcolor calc(L * 4) C H); заработала анимация для display; у backdrop-filter отпал вендорный префикс; заработал режим justify-content: safe center для флексбоксов (предотвращение обрезания при узком контейнере); поддержано свойство content-visibility; доработаны инпуты (свитч-чекбокс, дата, время); появился URL.parse(); задепрекейчен resize: auto, а также другие API, которые работали только в Safari- вышел Firefox 127: появилась поддержка
rel="dns-prefetch"; для img, video, audio браузер попытается заменить ссылки http на https; доработан внутренний тул скриншотов; включен navigator.clipboard.read()/write()- вышел Chrome 126: view transitions заработал для cross-document (работает так же: незаметно загружается следующая страница, делается и показывается скриншот и затем подменяется на загруженную страницу) (ребята из Astro тут же выкатили обнову); включён CloseWatcher API, управляющий закрытием
dialog и popover; в девтулзах в Network в запрос теперь можно копипастить заголовок запроса целиком, а также обновлён Lighthouse 12.0.0- в Mozilla пошли на рынок инструментов для «безкодового» создания сайтов и выпустили soloist.ai: готовый сайт захостится на 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 положит браузер)- coolify — опенсорсный селф-хостед аналог netlify/versel
- 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 позволяет проверить соответствие типа объекта без лишнего «расширения» этого типа
- чтобы проект использовал конкретную версию пакетного менеджера, нужно включить
corepack enable && corepack enable npm и прописать в package.json конкретную версию "packageManager": "yarn@3.1.1"CSS
- решение интерфейсной проблемы ссылки, вложенной в ссылку: выносим «родительскую» ссылку в отдельный слой с
position: absolute и растягиваем на всю ширину с inset: 0, а «дочерней ссылке» задаём position: relative- CSS Tricks продолжает оживать с новым гайдом про Container Queries
- чтобы «прилепить» к краям контейнера картинки-маски, чтобы сам он тянулся по высоте, есть
mask-image@web_platform | Поддержать канал 🤝