FRONT | Фронтенд | JavaScript | CSS | Biome | HTMX | Vite | Signals | View Transitions | Chrome 156
IT и технологии
Фронтенд каждый день: фичи браузеров, новинки JavaScript и CSS, инструменты и приёмы.
Загружаем канал…
Сайт использует cookie для работы и аналитики. Мы используем файлы cookie для работы сайта и аналитики посещаемости. Подробнее в ПодробнееПолитике обработки данных и Правилах.
IT и технологии
Фронтенд каждый день: фичи браузеров, новинки JavaScript и CSS, инструменты и приёмы.
Аудит бандла: выкинул axios, numeral, timeago.js, pluralize, tippy.js, a11y-dialog, cloneDeep — минус 63KB gzip. Ни одного нового пакета. Всё заменилось на браузерные API. fetch, Intl, Popover, dialog, structuredClone, Object.groupBy. Baseline Widely, работает без полифиллов уже сегодня. Браузер перерос половину node_modules. Открой package.json — там есть что почистить.
Браузеры десятилетиями округляли позиции каждой буквы до целого пикселя. На Retina это ошибка в 2–3 физических пикселя на символ: строки выходили неровными, а при зуме текст микроподрагивал. Safari 27 beta включает субпиксельный инлайн-лейаут на уровне движка. Координаты текста и инлайн-элементов теперь считаются с точностью до субпикселя устройства. Ни новых свойств, ни полифиллов. Открыл бету — строки поплыли ровнее.
CSSWG и OpenUI предложили ::interest-button — нативный правый клик на тачскринах. Ни строчки JS: вешаешь interestfor на элемент — и браузер сам показывает кнопку контекстного меню. Псевдоэлемент включается только там, где нет hover. position-area: inline-end позиционирует его в углу карточки. ~0,4% страниц уже тестируют фичу (Chrome Status). Обсуждение идёт с мая, два открытых вопроса: opt-in/opt-out и раскладка. Следим. #CSS #браузеры #тачскрин
new Date(2026, 0, 1) — ноль это январь, setMonth мутирует оригинал, а часовые пояса требуют библиотек. Так было 30 лет. Temporal API (Stage 4, ES2026) прибивает этот зоопарк. Месяцы с единицы. Объекты неизменяемые. ZonedDateTime для работы с таймзонами из коробки. Chrome 144 и Firefox 139 уже поддерживают. Safari подтянется. Полифил есть — осторожно, но уже можно в прод. #Temporal #JavaScript
Синхронизация вкладок через localStorage — боль: storage-событие глючит, хранилище пухнет, гонки. BroadcastChannel делает то же нативно. Открыл канал, кинул postMessage, поймал в onmessage — все вкладки, окна и воркеры одного origin синхронизированы, и для этого хватает трёх строчек. Baseline с марта 2022, поддержка везде: Chrome 54+, Firefox 38+, Safari 15.4+. Костыль больше не нужен. #BroadcastChannel #JavaScript #WebAPI
Браузер научился честно говорить: «всё, я устал». Compute Pressure API показывает загрузку процессора из JavaScript. Без хаков. PressureObserver отслеживает четыре состояния. От «полный газ» до «пауза, иначе ляжем». Раз в секунду — колбэк: можно анимацию или притормозить. Chrome и Edge с версии 125, Opera 111+. Safari и Firefox мимо. Охват ~23%, но для видеозвонков, игр и WebGL добро. Пока experimental. #ComputePressure #WebAPI #Chrome125
Maple переносит ревью на превью. Кликаешь по компоненту, тянешь рамку — комментарий указывает на файл и строку, а не на CSS-селектор. Через MCP уходит агенту: скриншот, вьюпорт и mock, тот чинит и закрывает. CI держит мердж до разбора правок. Бонус — lint отрендеренной страницы: контраст ниже WCAG AA. Пока 0.18.0, Beta.
В nuxt dev теперь живая панель — URL, прогресс старта и статус сервера. Первый рендер в 6,6 раза быстрее (330 против 50 мс), CLI похудел с 13,1 до 3,5 МБ, установленных пакетов стало 31 вместо 70. В .nuxt появился lock-файл. Если dev-сервер уже запущен, второй nuxt dev не спорит за порт, а сообщает, где он живёт.
«Слишком вложенные селекторы тормозят CSS» — миф. Браузеры матчат обычные селекторы быстро, пара лишних классов ничего не меняет. Куда больнее 500 КБ стилей вместо 10 КБ. Дороже на деле: стили, блокирующие рендер; анимация width/height/top/left вместо transform и opacity; раздутый DOM; blur(40px) и тяжёлые тени; шрифты @font-face на сотни КБ. Порядок из статьи: сначала убрать неиспользуемый CSS и проверить повторный layout, а селекторы трогать в последнюю очередь — и то после замеров.
SvelteKit 3 стабилен — вышел 1 октября. svelte.config.js больше не работает. Конфиг уехал в vite.config.ts через плагин sveltekit(). $lib стал #lib, env объявляется в src/env.ts, handleError ловит все ошибки. Внутри Vite 8 на rolldown — минимум Node 22.17 и Svelte 5.57. Мигрировать одной командой: npx sv migrate sveltekit-3 --tasks all --confirm.