#blog

Сегодня о том, как развивается функциональность в Angular - от experimental до полного удаления из фреймворка.

Автор разбирает 5 стадий жизненного цикла фич:
• Experimental
• Developer Preview
• Stable
• Deprecated
• Removed

И главное - объясняет, как меняется стратегия команды на каждом этапе:
• когда можно безопасно тащить фичу в прод,
• почему stable - это не «навсегда»,
• как команда Angular обеспечивает постепенные миграции,
• и почему будущая смерть *ngIf, *ngFor и других структурных директив уже практически предрешена.

Полезный материал для тех, кто работает с Angular на длинной дистанции и думает не только о developer experience, но и о поддерживаемости архитектуры через несколько лет.

Ссылка на материал - https://medium.com/ngconf/the-5-lifecycle-stages-of-an-angular-feature-c3ecc5529d53

#blog
В Chrome 148 представлен новый HTML-элемент <install>, позволяющий добавлять кнопку установки веб-приложения без использования JavaScript (но пока скрыт за флагом).
Преимущества: Браузер сам рендерит доверенную кнопку (как для геолокации), что упрощает код и повышает доверие пользователя.
Установка текущего приложения: Достаточно добавить <install></install>, если у манифеста есть поле id.
Установка сторонних приложений: Используйте атрибут installurl для указания URL другого приложения (можно добавить manifestid, если id отсутствует).
Совместимость: Внутри элемента можно разместить fallback-контент (например, ссылку) для браузеров без поддержки.
События: Элемент поддерживает обработчики событий: promptaction (успех), promptdismiss (отмена), validationstatuschanged (ошибки).
Доступность: Доступно в Chrome и Edge (с версии 148) за флагом или через Origin Trial.
Сравнение с JS API: В отличие от императивного navigator.install(), элемент <install> — декларативный, требует меньше кода, но дает меньше возможностей кастомизации интерфейса.

Статья: https://developer.chrome.com/blog/install-element-ot

#blog
Navigation API (теперь в Baseline) — современная замена History API для SPA. Доступен через window.navigation. Вкратце:
- Единый центр: Событие navigate перехватывает всё: клики, кнопки «Назад/Вперед», отправку форм. Старые методы (pushState, ссылки) тоже триггерят это событие.
- Управление переходом: Метод intercept({ handler }) позволяет асинхронно загрузить контент до смены URL.
- Автоматическая отмена запросов (fetch) при новой навигации через signal.
- Ручной контроль прокрутки и фокуса.
- История и состояние: Методы navigate, back, traverseTo возвращают промисы статуса. Состояние (state) можно менять без перехода через updateCurrentEntry(). У каждой записи есть уникальный key.
- Фишки: Идеально работает в паре с View Transitions API для анимаций.
- Минусы: Не срабатывает при первой загрузке страницы, работает только в рамках одного фрейма, нельзя удалять записи из истории.

Статья: https://habr.com/ru/companies/timeweb/articles/1008840/

#blog
Сегодня - статья о сравнении анимаций в CSS и JavaScript. Внутри есть наглядные интерактивные визуализации описанного, советую заглянуть. А если тезисно про суть:
- Поток выполнения: CSS-анимации работают в отдельном потоке композитора и не блокируются кодом, а JS-анимации — в основном потоке и «замирают» при нагрузке.
- Свойства: Не все анимируемые свойства ведут себя одинаково. Те, что не вызывают перерисовок макета (transform, opacity) отработают плавно даже в JS.
- Исключение для JS: Библиотеки на базе WAAPI (например, Motion) работают так же плавно, как CSS, в отличие от классических (GSAP), которые теряют синхронизацию времени при тормозах.
- Правило выбора: Всегда приоритет нативному CSS. JS-библиотеки подключайте только для уникальных эффектов (морфинг, сложная физика), недоступных в CSS.

Статья: https://www.joshwcomeau.com/animation/css-vs-javascript/

#blog
Headless UI для Angular: Radix NG Primitives

Появилась Radix NG — headless, signals-first библиотека UI-примитивов для Angular. Она не поставляет готовые стилизованные компоненты, а дает слой поведения, доступности и композиции, поверх которого можно строить собственный интерфейс.
Проект начинался как Angular-порт Radix UI, а сейчас в основном адаптирует архитектуру и поведение Base UI под Angular: через директивы, signals и dependency injection.

Что внутри:

- Headless-подход: без встроенных стилей, с полным контролем над разметкой и CSS.
- Состояния через data-* атрибуты и CSS custom properties — удобно для любой системы стилизации.
- Accessibility по WAI-ARIA practices: роли, aria-* атрибуты, управление фокусом и клавиатурная навигация.
- Signals-first API: input(), model(), computed(), signal(), effect().
- Композиция через Angular Directive Composition API, hostDirectives и общие building blocks вроде Popper, Dismissable Layer и Focus Scope.
- Uncontrolled by default: внутреннее поведение работает из коробки, controlled value можно передать только там, где это действительно нужно.
- Tree-shakeable entry points: можно импортировать только нужные примитивы.
- AI-ready: installable Skills помогают coding assistants учитывать API примитивов, примеры и контракт стилизации через data-* атрибуты.

Пример:

<button rdxSwitchRoot class="switch" [(checked)]="enabled"> <span rdxSwitchThumb class="thumb"></span> </button>

.switch[data-checked] {
background: var(--primary);
}

Radix NG можно использовать как основу для дизайн-системы или подключать постепенно в существующем Angular-приложении, когда нужно сохранить контроль над UI, но не реализовывать с нуля поведение и accessibility.

https://radix-ng.com

#blog
Наконец выпущен TypeScript 7.0 RC! Основные моменты:
- Переписан на Go: Компилятор полностью портирован на Go, что ускорило работу в 10 раз за счёт нативной скорости и многопоточности.
- Полная совместимость: Логика проверки типов идентична версии 6.0, гарантируя те же результаты компиляции.
- Параллелизм: Добавлены флаги --checkers и --builders для настройки потоков проверки типов и сборки проектов.
- Улучшенный --watch: Режим наблюдения переписан на основе вотчера от Parcel (на Go), что решило проблемы производительности и стабильности.
- Строгие настройки: По умолчанию включены strict и stableTypeOrdering, устаревшие флаги (например, target: es5) теперь вызывают ошибки.
- Уточнения типов и JS: Шаблонные литералы корректно обрабатывают Unicode (эмодзи), а поддержка JavaScript приведена к более строгому соответствию с TS.
- Инструменты: Доступен через typescript@rc, для VS Code выпущено расширение TypeScript Native Preview.

Статья: https://devblogs.microsoft.com/typescript/announcing-typescript-7-0-rc/

#blog
В июне был опубликован RFC с методом QUERY в HTTP (и почти одновременно он был добавлен в реестр IANA). Кратко о чем и для чего:
▪Стандарт QUERY (RFC 10008): Новый метод HTTP для безопасного чтения данных со сложными параметрами в теле запроса, заменяющий громоздкие GET-строки и семантически неточный POST.
▪Главное преимущество: Явно сообщает инфраструктуре (кэш, прокси, балансировщики), что операция безопасна и идемпотентна, позволяя корректно кэшировать ответы и повторять запросы при сбоях.
▪Технические детали: Тело запроса передаётся в формате JSON (или другом), требует явного Content-Type, не кэшируется браузерами по умолчанию без настройки CORS и поддержки со стороны серверного окружения.
▪Применение: Идеален для сложных фильтров, аналитических отчётов и поисковых запросов, где параметры не помещаются в URL или содержат чувствительные данные.

Статья: https://habr.com/ru/articles/1055310/

#blog
Сегодня посмотрим на новый HTML элемент <usermedia>:
- Новый элемент: Доступен в Chrome 151, заменяет JS-вызов getUserMedia() декларативным HTML-тегом для доступа к камере и микрофону.
- Главная польза: Запрос разрешения возникает только по клику пользователя, что повышает доверие и позволяет легко восстановить доступ прямо на странице, если он был ранее запрещён.
- Результаты: Тесты показали рост успешных повторных запросов с 10% до 65% и значительное снижение ошибок.
- Особенности: Браузер сам управляет потоком и строго контролирует стили элемента для безопасности; предусмотрена простая реализация фолбэка для старых браузеров через обычную кнопку.

Статья: https://habr.com/ru/articles/1065336/

#blog
Сегодня - статья о том, как стандарт Baseline помогает уменьшить размер JavaScript-бандла:
Суть подхода: Стандарт Baseline классифицирует веб-функции по уровню поддержки в браузерах (Limited availability, Baseline Newly available, Baseline Widely available), позволяя выявлять зависимости, которые больше не нужны, так как их функционал уже встроен в платформу.
Основные кандидаты на удаление:
- Интернационализация (~14 КБ): Библиотеки вроде timeago.js, numeral и pluralize заменяются нативным API Intl (RelativeTimeFormat, NumberFormat и др.).
- HTTP-клиенты (~17 КБ): axios и superagent часто избыточны; их заменяет нативный fetch с AbortController (за исключением случаев, когда нужны интерцепторы или автоматические повторные попытки).
- UI-примитивы (~24 КБ): Модальные окна, тултипы и ловушки фокуса (библиотеки вроде tippy.js, focus-trap) заменяются элементами <dialog>, Popover API и CSS Anchor Positioning.
- Утилиты Lodash (~8+ КБ): Функции группировки (Object.groupBy), глубокого клонирования (structuredClone) и операций с множествами (Set) теперь доступны нативно.

Важное исключение: Не стоит спешить с заменой библиотек даты (например, dayjs) на новый API Temporal, пока он не стал широко доступен в Safari, так как размер полифила (44 КБ) значительно превысит экономию.
Алгоритм аудита: Рекомендуется ежеквартально проверять зависимости через три вопроса: безопасна ли замена для вашей аудитории (Baseline status), какова реальная экономия места (с учетом полифилов) и покрывает ли нативный API все ваши сценарии использования.

Статья - https://www.smashingmagazine.com/2026/08/how-baseline-can-help-ship-less-javascript/

#blog
Вышел релиз Chrome 153 beta. Что в нем можно найти:

-Особенность релиза: Chrome 153 — первый релиз нового двухнедельного цикла обновлений браузера.
- CSS и интерфейс: Появились возможности прокрутки по одной оси (overflow совместно с clip) и новое свойство scroll-axis-lock, управляющее блокировкой направления жеста прокрутки.
- JavaScript: Добавлены методы Iterator.prototype.join() для объединения содержимого итератора в строку и синхронная итерация нескольких итераторов (zip).
- Веб-API: Выпущены элементы <camera> и <microphone> (Capability Elements для запроса одной возможности — только видео или только аудио), поддержка декодирования пространственного звука IAMF, новый размер кванта рендеринга WebAudio, функция buffer_view в WebGPU и переход парсинга XML на безопасный Rust-движок.
- Origin Trials: Доступна новая экспериментальная возможность JavaScript Self-Profiling Markers для анализа производительности по типам браузерной активности.
- Удаления: Убраны нестандартная навигация _current, API requestStorageAccessFor и технология Related Website Sets (RWS) в связи с сохранением текущего подхода Chrome к сторонним cookie.

Статья - https://developer.chrome.com/blog/chrome-153-beta?hl=en

#blog
Знаю, что сама тема не нова, но это не делает её неактуальной. Сегодня посмотрим статью "Как атрибуты width и height у картинок ускорят сайт на 12%". Вкратце о содержании:
▪ Суть проблемы: Изображения без заданных размеров при загрузке «раздвигают» блоки страницы, вызывая пересчёт макета — это приводит к скачкам и дёрганию страницы, а на мобильных устройствах может занять секунды.
▪ Основное решение: Указать у тега <img> атрибуты width и height, а в CSS задать width: 100% и height: auto. Браузер заранее зарезервирует место под картинку, и страница перестанет дёргаться, экономя до 12% процессорного времени.
▪ Альтернативные способы (не рекомендуются): Трюк с padding-bottom и свойство aspect-ratio решают ту же задачу, но разбрасывают логику по нескольким местам кода и усложняют поддержку, поэтому предпочтительнее обычные атрибуты.
▪Дополнительные нюансы: Эффект применим и к тегам <video>, <iframe>, <canvas>, <object>; при использовании grid потери меньше, а самые большие всплески CPU вызывают шрифты, которые стоит подгружать заранее через <preload>.
▪Проверка результата: Производительность легко измерить в профайлере браузера (F12 → Performance), а для автоматической проверки подходят сервисы вроде Site Alarm и Goolgle PSI.

Статья: https://habr.com/ru/articles/1080050/

#blog
Сегодня посмотрим статью об адаптивных iframe в Chrome 154:

▪Новая возможность: Chrome 154 позволяет iframe самому подстраивать свой размер под контент встроенного документа — заменяет ручное измерение через postMessage().
▪Как работает:
➖Встраивающая страница задаёт frame-sizing: content-height для iframe.
➖Встроенный документ должен явно разрешить это через <meta name="responsive-embedded-sizing" content="allow-origins=..."> (тег нельзя добавить уже после загрузки).
▪Свойство frame-sizing: управляет, какое измерение берётся из контента (content-width, content-height и др.), сочетается с другими ограничениями CSS (например, max-height).
▪Динамическое изменение: браузер не следит за контентом постоянно — при изменениях встроенный документ сам вызывает window.requestResize() (лучше до перерисовки), что защищает от бесконечных циклов изменения размера.
▪Кросс-доменные iframe: можно ограничить список разрешённых origins через allow-origins, дополняя политику безопасности.
▪Нюансы и фолбэк:
➖Может вызывать смещение контента при загрузке, что вредит Core Web Vitals на первом экране.
➖Для старых браузеров используйте @supports (frame-sizing: content-height) и проверку "requestResize" in window, сохраняя старый код как fallback.

Статья - https://developer.chrome.com/blog/responsive-iframes?hl=en