#blog
В Angular v22 будет изменена стандартная стратегия обнаружения изменений (Change Detection). Вместо Default по умолчанию будет использоваться OnPush. Это решение направлено на улучшение производительности и соответствие современным практикам разработки без использования Zone.js (zoneless-режим).
Кроме того, ChangeDetectionStrategy.Default будет переименован в ChangeDetectionStrategy.Eager, чтобы точнее отражать своё поведение — агрессивную проверку изменений. Существующие проекты будут автоматически обновлены, и для сохранения прежнего поведения будет использоваться Eager.

Основные причины:
- OnPush давно рекомендовался как лучшая практика.
- Упрощение настройки и поведения фреймворка.
- Поддержка zoneless-режима становится стандартом.

Angular планирует выпустить эти изменения в мае 2026 года в версии v22.

Статья: https://habr.com/ru/news/989852/

#news
Мы много говорим о преимуществах сигнального стора, но стоит ли полностью отказываться от NgRx?
NgRx - мощный инструмент, но для большинства Angular-приложений он давно стал излишним. Actions, reducers, selectors, effects ради простого UI. Angular Signals меняют правила игры. Сигналы позволяют создавать реактивное и масштабируемое управление состоянием. Иммутабельные обновления через update(), производные значения через computed(), сайд-эффекты через effect() - всё типизировано, предсказуемо и легко тестируется.
В этой статье рассказывается:
- как заменить NgRx-сторы на Signals без потери контроля;
- в каких случаях разумно использовать NgRx;
- как использовать гибридный подход (NgRx для глобального стейта, сигналы для UI);
- как за ~100 строк собрать production-ready todo-приложение;
- как получить ускорение рендеринга в 2-3 раза и сократить кодовую базу примерно на 50%.

Ссылка на статью: https://javascript.plainenglish.io/how-to-replace-over-complicated-ngrx-stores-with-angular-signals-without-losing-control-ee680938942b

#blog
Вышел ESLint v10.0.0 — крупное обновление с новыми функциями и критическими изменениями.
Основные моменты:
- Поддержка устаревших версий Node.js прекращена (до v20.19.0, v21.x, v23.x).
- Отказ от eslintrc-конфигураций: удалены все методы и файлы, связанные с eslintrc. Теперь используется только flat-конфигурация.
- Новый алгоритм поиска конфигурационных файлов: поиск начинается от каждого линтуемого файла, что удобно для монорепозиториев.
- Отслеживание JSX-ссылок: теперь JSX-элементы корректно обрабатываются в области видимости.
- Улучшения в RuleTester: добавлены новые опции для более строгого тестирования правил, а также улучшена отладка.
- Новая опция countThis в правиле max-params: позволяет игнорировать this при подсчёте параметров функции.
- Обновлена конфигурация eslint:recommended: добавлены важные правила.
- Удалены устаревшие методы и свойства, включая context.getCwd(), SourceCode.getTokenOrCommentBefore() и другие.
- Обновлён минимальный требуемый jiti до 2.2.0 для корректной работы с TypeScript-конфигами.
- Улучшена поддержка цветового вывода через флаги --color и --no-color.

Статья: https://eslint.org/blog/2026/02/eslint-v10.0.0-released/

#blog
Команда Webpack выпустила Roadmap 2026. Что внутри:

CSS Modules без плагинов — интеграция в ядро webpack, экспериментальная поддержка в 2026, стабильная — в webpack 6.
Universal target — поддержка запуска кода в Node.js, Deno, Bun и браузере с выводом в ESM.
TypeScript без загрузчиков — отказ от ts-loader, улучшение встроенной поддержки.
HTML как точка входа — интеграция html-webpack-plugin в ядро webpack.
Поддержка нескольких рантаймов — улучшение совместимости с Deno, Bun и браузером, уменьшение зависимости от Node.js.
Lazy Barrel Optimization — ускорение сборки за счёт отложенной обработки неиспользуемых модулей.
Единый плагин минификации — объединение terser, css-minimizer и других в один minimizer-webpack-plugin.
Улучшение инструментов разработки — обновление CLI, упрощение dev-сервера и мидлварей.
Автоматическая документация — генерация из типов и схем для точности и актуальности.
Многопоточный API — параллелизация сборки, вдохновлённая thread-loader.

Статья - https://webpack.js.org/blog/2026-04-02-roadmap-2026/

#blog

Сегодня снова поговорим про сигнальные формы - новый экспериментальный API уже здесь, но есть важный нюанс. По умолчанию сигнальные формы не добавляют привычные CSS-классы состояния (ng-valid, ng-invalid, ng-touched). Если ваши стили завязаны, например, на .ng-invalid - при миграции можно неожиданно "сломать" UI.
В статье разбирается следующее:

- как вернуть классическое поведение через provideSignalFormsConfig
- как настроить собственные динамические классы
- почему использование объекта конфигурации - это продуманное решение с точки зрения дизайна API

Ссылка на статью: https://angularexperts.ch/blog/signal-forms-config

#blog
DevTools Chrome 145: фокус на стабильность, производительность и улучшение интерфейса.
- MCP-сервер обновлён до v0.14.0 с авто-подключением, унифицированной эмуляцией и сохранением логов.
- В Performance панели видны "мягкие навигации" для SPA.
- Построчный профилинг в Sources стал точнее, особенно для минифицированного кода.
- Ускорена работа с трассировками в Performance.
- В Network добавлена колонка "Render blocking" для анализа ресурсов.
- Request Conditions теперь с поддержкой ограничения скорости по умолчанию.
- Поддержка @starting-style включена для отладки анимаций.
- AI Assistance поддерживает вставку изображений.
- Улучшена доступность и мелкие элементы интерфейса.

Статья: https://developer.chrome.com/blog/new-in-devtools-145?hl=en

#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/