#blog

Angular постепенно отказывается от Zone.js — начиная с Angular 21 режим Zoneless становится новым стандартом. Что это значит для существующих приложений и как безопасно перейти на новую модель?
В статье разбирается:
- зачем вообще мигрировать на Zoneless
- почему OnPush и сигналы сильно упрощают переход
- как использовать unit-тесты, чтобы заранее проверить совместимость компонентов
Главная мысль: миграцию можно делать постепенно — без рискованных изменений в кодовой базе.

Ссылка: https://medium.com/javascript-in-plain-english/how-to-migrate-your-angular-app-to-zoneless-9f9350040e19

#blog
Команда NodeJs опубликовала обновление графика релизов. Вкратце:

1. Новый график релизов — начиная с Node.js 27.x: 1 мажорный релиз в год (вместо 2), каждый релиз становится LTS.
2. Alpha-релизы — доступны с октября по март, разрешены семантически мажорные изменения, предназначены для разработчиков библиотек.
3. Три фазы релиза: Alpha (6 мес), Current (6 мес), LTS (30 мес), всего поддержка — 36 месяцев.
4. Упрощение для мейнтейнеров — снижение нагрузки за счёт сокращения активных версий и упрощения backporting.
5. Стабильность для бизнеса — предсказуемый график обновлений: релиз в апреле, LTS в октябре.
6. Без odd/even разделения — все версии — LTS, упрощено восприятие для новичков.
7. Интеграция с CITGM — тестирование с популярными пакетами для выявления проблем до релиза.
8. Версионирование по году — версия 27 в 2027, 28 — в 2028 и т.д.
9. Без изменений в LTS-поддержке — 30 месяцев, миграционные окна сохранены.
10. V8 остаётся актуальным — обновления движка не старше 6 месяцев.
11. Node.js 26 — последний по старой схеме, LTS в октябре 2026, EOL в апреле 2029.
12. Node.js 27 — первый релиз по новой схеме, Alpha с октября 2026, LTS с октября 2027, EOL в апреле 2030.

Статья: https://nodejs.org/en/blog/announcements/evolving-the-nodejs-release-schedule

#blog
Вышел Vite 8.0. Что нового:
1. Vite 8 с Rolldown — новый Rust-бандлер вместо Rollup + esbuild, в 10–30× быстрее, с полной совместимостью плагинов.

2. Расширенные возможности — full bundle mode, гибкое разделение чанков, Module Federation, кэширование на уровне модулей.

3. Vite Plugin Registry — каталог плагинов на registry.vite.dev.

4. Ускорение сборки — до 64% быстрее в реальных проектах.

5. Единая toolchain — Vite, Rolldown и Oxc работают слаженно.

6. Новые фичи — встроенные devtools, tsconfig paths, emitDecoratorMetadata, WASM в SSR, логирование в терминал.

7. @vitejs/plugin-react v6 — на Oxc, без Babel, поддержка React Compiler.

8. Поддержка Node.js — Node.js 20.19+ и 22.12+.

9. Больший размер — +15 МБ из-за lightningcss и Rolldown.

10. Постепенная миграция — через rolldown-vite на Vite 7.

11. Благодарности Rollup и esbuild — ключевые проекты для старта Vite.


Статья - https://vite.dev/blog/announcing-vite8

#blog
Многие уже могли увидеть, что в Angular 21.2 добавили поддержку чистых JS-функций в шаблонах. В данной статье эта функциональность рассматривается на примерах, а если тезисно:

- Можно писать инлайновые функции без объявления в компоненте.
- Поддерживаются map, filter, find, update сигналов и передача функций.
- Есть ограничения: нельзя писать многострочные функции, применять пайпы внутри них (только к результату) и возвращать функции.
- Плюс: меньше кода. Минусы: сложность шаблонов, возможное падение производительности.
- Автор все-таки советует использовать computed или пайпы вместо функций в шаблонах.

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

#blog
Вышел анонс TypeScript 6.0. Что внутри:

Статус релиза: TypeScript 6.0 — переходная версия, последняя на текущей кодовой базе (JS). Следующая версия 7.0 будет полностью переписана на Go для скорости и многопоточности.
Новые возможности:
- Поддержка подпутей импорта, начинающихся с #/ (аналог @/ в бандлерах).
- Добавлены типы для Temporal API (работа с датой/временем) и методов Map.getOrInsert (upsert).
- Встроенная поддержка RegExp.escape.
- Библиотека dom теперь включает итерируемые коллекции по умолчанию (не нужно отдельно подключать dom.iterable).
- Улучшен вывод типов для функций без явного this (меньше контекстной зависимости).
Изменения по умолчанию (Breaking Changes):
- strict, noUncheckedSideEffectImports теперь true.
- module по умолчанию — esnext, target — es2025.
- types по умолчанию — пустой массив [] (нужно явно указывать, например, ["node"]), что ускоряет сборку.
- rootDir теперь равен папке с tsconfig.json.
Устаревшие функции (будут удалены в 7.0):
- Целевая версия es5 и флаг --downlevelIteration.
- Стратегия moduleResolution: node (заменена на nodenext или bundler).
- Форматы модулей: amd, umd, systemjs, none.
- Опция --outFile (рекомендуется использовать внешние бандлеры).
- Синтаксис module для неймспейсов (оставлен только namespace).
- Импорт с asserts (заменен на with).
- Отключение esModuleInterop и allowSyntheticDefaultImports (теперь всегда включены).
Миграция: Для подготовки к TS 7.0 рекомендуется исправить все предупреждения о депрекации в версии 6.0.

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

#blog
Angular 22: debounce и debounced

Если вы работаете с сигналами в Angular - самое время разобраться, как теперь правильно выполнять debounce без RxJS.
В статье:
- почему в Angular теперь два debounce API: debounce() и debounced()
- чем они отличаются и где какой использовать
- как на самом деле работает debounce «под капотом»

Материал подойдёт для тех, кто уже знаком с Signals, Resource API и сигнальными формами.

Ссылка: https://levelup.gitconnected.com/angular-22-the-power-of-debound-and-debounced-apis-c41e33c0a18e

#blog
На сегодня - любопытная статья про способы предзагрузки изображений в JS, с плюсами/минусами, примерами и аргументацией. Ну а если сократить до сухих фактов:
- new Image(): Простой способ с доступом к размерам и событию загрузки, но ненадежен при запрете кэширования на сервере (no-store).
- <link rel="preload">: Лучший выбор. Гарантированно кэширует изображение (игнорируя no-store) и предотвращает дублирование запросов.
- Скрытый <div>: Работает только с visibility: hidden (не `display: none`). Считается «костылем» без особых преимуществ.
- Cache API и fetch(): Дают полный программный контроль и работу с данными в памяти, но требуют ручной очистки кэша или хранения Blob-объектов.

Статья: https://macarthur.me/posts/preloading-images/

#blog
Angular 22: debounce и debounced
В дополнение к статье прошлой недели о том, как работают debounce() и debounced() "под капотом" предлагаем к чтению вторую часть, посвящённую реальным кейсам использования новых API.
В материале разбираются:
- Поиск по мере ввода (search-as-you-type): использование debounced() API для снижения количества HTTP-запросов
- Проверка доступности username
- Автодополнение адреса
- Использование кастомных debouncer-функций

Материал подойдёт для тех, кто уже знаком с Signals, Resource API и сигнальными формами.

Ссылка: https://famzil.medium.com/meet-angulars-debounce-debounced-apis-in-action-%EF%B8%8F-e096251ffc98

#blog
Статья "Делаем сайт видимым для LLM: 6 рабочих техник, 8 - нерабочих". Сразу небольшой дисклеймер: значительная часть описанного является скорее договоренностью, чем стандартом. Но если изложить основную суть:
- /llms.txt — файл-карта сайта в формате Markdown для навигации LLM.
- .md роуты — чистые версии страниц с контентом без HTML-шума.
- Link-теги и заголовки — указание на Markdown-версию через <link> и HTTP-заголовки.
- Скрытые подсказки — невидимый блок в DOM с прямой ссылкой на .md для чат-ботов.
- /llms-full.txt — полный текст сайта в одном файле для быстрого контекста.
- Content Negotiation — серверная отдача Markdown по заголовку Accept: text/markdown.
- Аналитика — отслеживание запросов от AI-ботов к новым эндпоинтам.
- Бесполезные методы — мета-теги ai-content, JSON-LD, кнопки переключения и User-Agent сниффинг не работают.
- Проверка robots.txt — убедитесь, что боты (GPTBot, ClaudeBot) не заблокированы.
- Приоритет внедрения — сначала llms.txt и .md, затем заголовки и negotiation.

Статья - https://evilmartians.com/chronicles/how-to-make-your-website-visible-to-llms

#blog
Инструмент для упрощения процесса конфигурирования nginx: NginxForge. Данная статья, по сути, является саморекламой от автора, но я уверен, что в какой-то момент вам это может пригодиться.
Проблема: Настройка nginx сопряжена с типовыми ошибками (слэши в proxy_pass, устаревший TLS, лишняя информация в заголовках), которые сложно отловить без глубокого погружения.
Решение: Инструмент NginxForge генерирует готовые конфиги под популярные сценарии.
Главные фишки:
- Пояснения к каждой директиве на русском с предупреждениями о рисках.
- Реальная проверка синтаксиса через nginx -t в изолированном Docker-контейнере.
- Возможность объяснить весь конфиг через ИИ и экспортировать результат (ZIP или ссылка).
Безопасность: Данные не сохраняются без явного создания ссылки, приватные ключи использовать нельзя.
Статус: Бесплатный веб-сервис, код закрыт, версии для самостоятельного хостинга пока нет.

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

#blog
Сегодня - небольшая интерактивная статья про range syntax для CSS media query. Подход был введен еще в 2023 году, поэтому проблем с поддержкой можно не опасаться. Возможно именно эта статья побудит вас перейти на современный синтаксис:

Проблема: Традиционные min-width и max-width с одинаковыми значениями создают конфликты на границах брейкпоинтов.
Решение: Range Queries (Media Queries Level 4) позволяют использовать операторы сравнения (<=, >) напрямую, например: @media (width <= 300px).
Плюсы: Код становится понятнее, проще задавать диапазоны (300px <= width <= 500px), синтаксис работает и для контейнерных запросов.
Поддержка: Доступен во всех современных браузерах с марта 2023 года.

Статья - https://ishadeed.com/article/range-syntax/

#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