#blog
Для тех, кто подумывает об обновлении TypeScript до 5.9, но не видит в этом больших плюсов - данная статья, заголовок которой гласит "Обновляться стоит". Если совсем кратко:
- Новый tsc --init генерирует минималистичный конфиг с strict: true по умолчанию — теперь строгая типизация это стандарт.
- Производительность улучшена на 11% за счёт кэширования сложных типов — быстрее проверка, отзывчивее IDE, компактнее сборки.
- import defer откладывает загрузку тяжёлых модулей, но пока требует поддержки сборщика — работает только с namespace-импортами.
- Раскрываемые подсказки (expandable hovers) позволяют исследовать сложные типы прямо в редакторе, не теряя контекст.
- Философия обновления — улучшать повседневный опыт, а не добавлять громкие фичи. Главное — удобство, скорость и меньшая нагрузка на разработчика.

Статья: https://blog.logrocket.com/upgrade-to-typenoscript-5-9/

#blog

Сигналы в Angular часто вызывают путаницу из-за того, что разработчики пытаются мыслить в терминах RxJS. Мы ожидаем, что сигналы будут вести себя как потоки и автоматически обновлять DOM, но это совсем не так.

Вернёмся к основам и подробно разберём:
- почему сигналы — не Observables, и как правильно мыслить в «сигнальной» парадигме;
- как на самом деле работают computed и effect, и почему путать их — частая ошибка;
- что важно знать о мутабельности и методах .set() / .update();
- когда сигналы упрощают жизнь, а когда лучше остаться с RxJS.

Автор помогает переосмыслить сигналы не как «упрощённые стримы», а как другой способ управления состоянием в Angular — понятный, предсказуемый и, при правильном использовании, действительно удобный.
Ссылка на статью: https://medium.com/@julias3/the-most-misunderstood-concept-in-angular-signals-1929f5c27c13

#blog
Вышла Node.js 25.0 — промежуточная версия (не LTS), поддержка до июня 2026.
- Node.js 24.x (LTS) поддерживается до апреля 2028, 22.x — до апреля 2027, 20.x — до апреля 2026.
- V8 обновлён до 14.1 (Chromium 141): ускорен JSON.stringify, оптимизированы WebAssembly и JIT, добавлены методы для base64/hex-преобразований Uint8Array.
- Добавлена опция --allow-net в Permission Model — без неё сетевые операции блокируются с ошибкой ERR_ACCESS_DENIED.
- API Web Storage (localStorage, sessionStorage) включён по умолчанию, статус «экспериментальный» снят.
- ErrorEvent стал глобальным — доступен без импорта, совместим с браузерами.
- WebAssembly поддерживает JSPI — позволяет вызывать асинхронные Web API из синхронного кода.
- Добавлена опция NODE_COMPILE_CACHE_RELATIVE_PATH — кэш компиляции работает при переносе проекта благодаря относительным путям.
- Реализовано встроенное профилирование нагрузки на CPU.
- Обновлён npm до версии 11.6.2.
- Удалён SlowBuffer из-за уязвимостей — вместо него использовать Buffer.allocUnsafeSlow().

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

#blog

Реактивность в Angular без чёрной магии

Многие Angular-приложения работают словно по волшебству — но за этим стоит “грязная проверка” и Zone.js. Автор данного материала разбирает, почему это плохо для производительности и как избежать проблем с асинхронными изменениями данных.

На практике Signals + OnPush + Zoneless позволяют уведомлять Angular о том, где и когда произошли изменения, без лишних циклов Change Detection и без monkey patching. А иммутабельность помогает защитить данные и упростить тестирование.
Простые примеры, объяснения и рекомендации — всё это вы найдёте в статье «Reactivity in Angular» (https://medium.com/@eugeniyoz/reactivity-in-angular-844444741c7e)

#blog
Сегодня посмотрим обновления в Chrome 143 beta. Список немалый, поэтому постараюсь изложить сжато:
- Добавлены CSS @container anchored(fallback) для стилизации привязанных элементов по позиции.
- Исправлены underlineStyle и underlineThickness в EditContext (`solid`, dotted, wavy и др.).
- DOM API теперь разрешает больше символов в именах элементов и атрибутов.
- На мобильных `eager`-предзагрузка срабатывает при кратковременном появлении ссылки во вьюпорте.
- Поддержка font-language-override — контроль OpenType-глифов по языковому тегу.
- WebGPU: swizzle текстур — перестановка цветовых каналов в шейдерах.
- ICU 77: Unicode 16, новые правила форматирования (итальянские числа без точки, запятая после дня в en-локалей).
- dataTransfer теперь доступен вмотрим обновления в Chromeдля contenteditable (как в Safari/Firefox).
- FedCM: IdP может возвращать JSON вместо строк — проще интеграция с OAuth2/OIDC.
- WebTransport: согласование протокола при установке соединения.
- Web Smart Card API (только Isolated Web Apps): доступ к смарт-картам через ОС.
- Manifest: предсказуемое обновление, иконки с immutable.
- Heavy Ads: отчёты теперь приходят и во встраиваемый фрейм — проще отслеживать плохую рекламу.
- Origin Trials: выпуск цифровых сертификатов в кошелёк, рандомизация лимитов TCP-сокетов против отслеживания.
- Депрекации: устаревшие геттеры Intl.Locale, удаление XSLT из-за уязвимостей и низкого использования.

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

#blog
На сегодня статья "URL как контейнер состояния", которая напоминает нам, что URL тоже может быть инструментом для разработчика.
- URL — это не только адреса, но и состояние: они сохраняют контекст, работают без перезагрузки, поддерживают кнопку «Назад», закладки и шаринг.

- URL — ключ кэша, аналитики и версионности.

- Состояние кодируется через:
⚫️ Путь — иерархия (/users/123/posts).
⚫️ Параметры — фильтры, пагинация, настройки (?sort=date&page=2).
⚫️ Якорь — позиция на странице (#section, #L20-L30).

- Храните в URL:
⚫️ Фильтры, поиск, сортировку.
⚫️ Режимы (список/сетка), вкладки.
⚫️ A/B-тесты, версии, флаги.

- Не храните:
⚫️ Пароли, токены, временные состояния (модалки, скролл), большие объекты (например, base64-JSON).

- Практика:
⚫️ Используйте URLSearchParams и pushState/replaceState.
⚫️ Дебаунс для частых обновлений (например, поиск).

- Антипаттерны:
⚫️ Потеря состояния при обновлении.
⚫️ Непонятные параметры (?a=1&b=2).
⚫️ Перегрузка URL.
⚫️ Поломка истории браузера.

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

#blog

Angular Deep Signal: работа с вложенным состоянием

Сегодня хотим поделиться статьёй, в которой рассматриваются новые возможности Angular для управления состоянием с помощью экспериментальных Deep Signals. Вы узнаете:
▫️Что такое Deep Signal и как он позволит напрямую читать и изменять вложенные свойства Signal.
▫️Примеры использования с ngModel для двунаправленной синхронизации состояния формы.
▫️Как сочетание Deep Signals и Structural Signals поможет избежать лишних перерасчётов и улучшит производительность.
▫️Какие ограничения существуют в текущей реализации: поддержка вложенных свойств только на одном уровне.

Если вы хотите понять, как делать работу с вложенным состоянием в Angular проще и безопаснее, эта статья даст практическое понимание и примеры кода.
Статья: https://medium.com/@davidepassafaro/angular-deep-signal-modeling-state-in-depth-1dc2ea44e056

#blog
Сегодня к ознакомлению - руководство по HTTP-кэшированию. Вкратце, что внутри:

Ошибки при настройке кэширования:
- путаница между no-cache (нужна проверка) и no-store (запрет кэша)
- непонимание разницы между Expires и Cache-Control: max-age
- некорректное использование Vary, ведущее к фрагментации кэша
- игнорирование расширенных директив: s-maxage, stale-while-revalidate, immutable

Кэширование влияет на бизнес:
- скорость — улучшает Core Web Vitals
- надёжность — помогает выдерживать вирусный трафик
- стоимость — снижает расходы на трафик и серверы
- SEO — ускоряет индексацию и улучшает ранжирование

Уровни кэширования:
- браузер (памятный и дисковый кэши)
- прокси и CDN
- серверные кэши (например, Redis)

Заголовки кэширования:
- Cache-Control — основной заголовок (`max-age`, s-maxage — срок жизни кэша, no-cache, no-store, public, private, stale-while-revalidate, stale-if-error, `immutable`)
- ETag и Last-Modified — для проверки актуальности
- Expires — устаревший, но иногда используется

Актуальность кэша:
- свежесть = max-age или Expires
- возраст = текущее время - Date + Age
- при истечении срока кэш делает условный запрос

Полезные директивы:
- stale-while-revalidate — отдаёт устаревший ответ, пока обновляет его
- stale-if-error — отдаёт кэш, если сервер недоступен

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

#blog
Наглядная и интерактивная статья про CSS-свойство field-sizing. Кратко о содержимом:
- Свойство CSS field-sizing: content подстраивает ширину полей ввода под содержимое.
- Поддерживается только в Chrome и Edge. В Firefox и Safari пока недоступно.
- Полезно для динамических форм, пагинации, полей ввода URL и логина, а также интерфейсов с несколькими селектами.
- Рекомендуется задавать min-width и max-width, чтобы избежать слишком маленьких или длинных полей.
- Работает как прогрессивное улучшение: если не поддерживается, интерфейс остаётся функциональным.

Статья: https://ishadeed.com/article/field-sizing/

#blog

Анонс Angular v21

Данная статья посвящена релизу, который привнесёт новые мощные инструменты для создания современных веб-приложений:
- Signal Forms - реактивные формы на основе сигналов с полной типизацией и встроенной валидацией.
- Angular Aria - headless-компоненты с приоритетом на доступность, которые можно стилизовать под ваши нужды.
- MCP Server - теперь AI-агенты могут работать с новыми возможностями Angular с самого момента их появления.
- Vitest - новый стабильный тест-раннер по умолчанию.
- Zoneless change detection - улучшенная производительность, меньше зависимостей, лучший контроль над приложением.
- Обновлённая документация с гайдами по использованию AI, Signal API и Tailwind.

Бонус - обновление маскота!

Ссылка на статью: https://blog.angular.dev/announcing-angular-v21-57946c34f14b

#blog
Статья "A Practical Guide to Blobs, File APIs, and Memory Optimization" раскрывает детали и сценарии работы с Blob с практическими примерами. Тезисно о содержании:

1. Создание Blob-объектов
- Проблема: использование больших строк и data URL приводит к дублированию данных и высокому потреблению памяти.
- Решение: использование Blob.
- Пример: скачивание конфига в виде файла.

2. Работа с большими файлами по частям (Chunking)
- Проблема: чтение больших файлов целиком вызывает зависание и перерасход памяти.
- Решение: обработка файлов по частям через slice().
- Пример: класс для поочередной загрузки больших файлов на сервер.

3. Сжатие и конвертация изображений на клиенте
- Проблема: отправка тяжёлых изображений тратит трафик и замедляет загрузку.
- Решение: сжатие через <canvas> и Blob.
- Пример: загрузка аватара с предварительным сжатием.

4. Единый компонент для предпросмотра файлов
- Проблема: дублирование кода под разные типы файлов.
- Решение: класс1. Создание Blob-для унифицированного отображения изображений, текста, аудио, видео и т.д.

5. Экспорт данных с использованием Blob
- Проблема: data URL не подходят для больших объемов данных.
- Решение: централизованная служба экспорта в форматах JSON, CSV, TXT.
- Пример: класс DownloadService.

6. Управление памятью и предотвращение утечек через Blob URL
- Проблема: неосвобождённые URL из URL.createObjectURL ведут к утечкам памяти.
- Решение: централизованный BlobUrlManager с автоочисткой.
- Пример: безопасный компонент предпросмотра изображений.

7. Общие рекомендации по использованию Blob
- Когда использовать: при работе с файлами, построении потоков, сжатии, предпросмотре, экспорте, управлении памятью.
- Blob + File API + URL.createObjectURL = основа стабильной работы с файлами на клиенте.

Статья - https://jsdev.space/howto/blob-file-handling-guide/

#blog
Error.cause в JavaScript - основные моменты:

Проблема классической обработки ошибок
В многоуровневом коде при оборачивании ошибок теряется стек вызовов и тип исходной ошибки. Обычно это выглядит так:

throw new Error('Something went wrong: ' + err.message);

При этом теряется контекст, усложняется отладка.

Error.cause: решение проблемы
Свойство cause позволяет сохранить исходную ошибку при создании новой.
Теперь доступны оба стека вызовов: верхнего уровня и исходной ошибки.
Пример вывода:

Error: Something went wrong
    at ...
Caused by: SyntaxError: Unexpected token b in JSON at position 2
    at JSON.parse
    at ...

Более точные проверки в тестах
С cause можно проверять не только верхнеуровневую ошибку, но и её причину:

expect(err.cause).toBeInstanceOf(ValidationError);

Тесты становятся точнее и надёжнее.

Подводные камни и рекомендации
- cause не выводится автоматически через console.error(err) — нужно логировать отдельно.
- Не стоит оборачивать каждую мелкую ошибку — это может усложнить отладку.
- console.error(err.stack) выводит только стек текущей ошибки — для полного стека нужно обращаться к err.cause.stack.
Вывод полной цепочки ошибок можно реализовать через вспомогательные функции.

Поддержка в средах:
- Chrome 93+, Firefox 91+, Safari 15+, Edge 93+
- Node.js 16.9+
- Bun и Deno (актуальные версии)
Для TypeScript: требует "target": "es2022" и "lib": ["es2022"].

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

#blog
Сегодня посмотрим на обновления Chrome 144 beta. Список немалый, кратко:
1. CSS:
- Позиционирование с трансформациями через anchor().
- Стилизация поиска через ::search-text.
- @scroll-state для стилизации по направлению прокрутки.
- overscroll-behavior при прокрутке с клавиатуры.
- Поддержка @container без учёта дерева.
- Обновление каскадирования в SVG2.
2. Web API:
- XRVisibilityMaskChange для WebXR.
- onanimationcancel в GlobalEventHandlers.
- ViewTransitions.waitUntil() для контроля анимационного дерева.
- Новый элемент <geolocation>.
- WebGPU: subgroup_id, улучшения uniform-буферов.
- Новый API Temporal для дат.
- Поддержка атрибутов в SVG-ссылках.
- clipboardchange для синхронизации буфера обмена.
- Поддержка ch-ua-high-entropy-values в Permissions Policy.
- Отражение MathML-символов в RTL.
- Multicast в Direct Sockets для Isolated Apps.
- InteractionCount для анализа взаимодействий.
- Pointer Lock на Android.
- WebAuthn Signal API на iOS и Android.
3. Origin Trials:
- Расширенная работа с текстом в Canvas.
4. Депрекации:
- Все Privacy Sandbox API (Topics, Protected Audience и др.) устаревают.
- Related Website Sets и requestStorageAccessFor устаревают.
- savedTabGroups удалён из SyncTypesListDisabled.
- Запрет загрузки внешних сущностей в XML.

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

#blog
Angular pipes: время для переосмысления

Статья, в которой подробно разбирается внутренняя механика пайпов в контексте Ivy: фазы создания и обновления, устройство мемоизации pure пайпов, чем отличаются пайпы с фиксированным и изменяющимся числом аргументов и какую роль в этом играют структуры TView и LView.

Отдельно рассматривается взаимодействие пайпов с DI и особенности impure пайпов. Автор также показывает, как пайпы соотносятся с новой системой реактивности, рассуждает о том, зачем они всё ещё нужны в эпоху сигналов и в каких сценариях оказываются особенно полезны.
Отличный повод взглянуть на этот инструмент под новым углом!

Ссылка на статью: https://medium.com/coreteq/angular-pipes-time-to-rethink-f616ec84fb8d

#blog
Я никак не мог пройти мимо и не поделиться красивой и качественной статьей "CSS Wrapped 2025". Как понятно из названия - это подбивка из значимых улучшений в уходящем году. Крайне рекомендую посетить оригинал, а если совсем вкратце списком:
- Invoker Commands
- Dialog Light Dismiss
- popover=hint
- Customizable select
- ::scroll-marker/button()
- scroll-target-group
- Anchored container queries
- Interest invokers
- Scroll-state queries
- Tree counting functions
- scrollIntoView() container
- Nested View Transition Groups
- DOM State-Preserving Move
- Advanced attr() function
- ToggleEvent.source
- text-box features
- shape() function
- if() statements
- Custom Functions
- Expanded range syntax
- Stretch sizing keyword
- corner-shape

Статья - https://chrome.dev/css-wrapped-2025

#blog
Статья про возможность оптимизации загрузки JS с помощью Explicit Compile Hints. Кратко:
- Проблема: компиляция JS при запуске замедляет загрузку.
- Решение в Chrome 136: коммент //# allFunctionsCalledOnLoad для eager-компиляции всего файла.
- Выгода: средний показатель ускорения на популярных сайтах - 630 мс.
- Как работает:
Без подсказки — функции компилируются при первом вызове
С подсказкой — компиляция идёт заранее, в фоне.
- Пример:

//# allFunctionsCalledOnLoad
function testfunc2() { /* скомпилируется сразу */ }

- Важно: используйте фичу умеренно — избыточная компиляция тратит память.
- Далее: поддержка eager compilation на отдельные функции.

Статья: https://v8.dev/blog/explicit-compile-hints

#blog
Сегодня сразу две статьи

Первая - о том, как Model Context Protocol (MCP) меняет взаимодействие ИИ с Angular-проектами. В ней разбирается, зачем вообще нужен MCP, как Angular MCP-сервер защищает от устаревших API и ошибок LLM, почему локальный доступ к проекту и окружению - ключ к настоящим агентным возможностям, и что всё это значит для будущего IDE и AI-ассистентов (на примере Google Antigravity).
Ссылка: https://blog.angulartraining.com/using-ai-with-angular-2025-update-5ab4b629e331

Вторая - практический эксперимент с Angular MCP-сервером и vibe-кодингом. Пошаговый разбор создания Todo-приложения с помощью ИИ: от настройки MCP и агентских инструкций до работы с сигналами, потоком управления и Angular CLI. Честный опыт с плюсами и минусами работы и выводами о том, где ИИ реально помогает, а где его всё ещё нужно жёстко контролировать.
Если вам интересно, как выглядит современная связка Angular + ИИ на практике - и почему без правильных инструкций агенту никуда - эти две статьи отлично дополняют друг друга.
Ссылка: https://dev.to/angular/a-quick-vibe-code-experiment-with-angulars-mcp-server-3g2h

#blog
В завершение года - две небольших статьи про обновления в Chrome. На повестке - individual requests throttle и scroll-triggered animations. О чем повествуется:
В Chrome 144 появилось индивидуальное ограничение скорости сетевых запросов в DevTools.
- Можно блокировать или замедлять отдельные URL или домены, не всю страницу.
- Настройки — через вкладку Request conditions с масками, приоритетами и профилями.
- Заблокированные запросы — красные, замедленные — желтые с иконкой часов.
- Удобно тестировать влияние медленных ресурсов (например, сторонних API или картинок).

В Chrome 145 добавлены CSS-анимации, запускаемые при прокрутке (scroll-triggered animations).
- Теперь анимации активируются при достижении определённого положения скролла.
- Используются новые свойства: animation-trigger и timeline-trigger.
- Активация и деактивация задаются через диапазоны entry/exit.
- Работают на CSS, без IntersectionObserver.
Пример:

.card {
timeline-trigger: --t view() contain 15% contain 85%;
animation: unclip 0.35s ease-in-out both;
animation-trigger: --t play-forwards play-backwards;
}

При прокрутке до нужного положения карточка плавно появляется (play-forwards), а при уходе из зоны видимости — исчезает (play-backwards).

Читать здесь:
https://developer.chrome.com/blog/throttle-individual-network-requests?hl=en
https://developer.chrome.com/blog/scroll-triggered-animations?hl=en

Всем хороших праздников и до встречи в новом году!

#blog
Подробный гайд по Angular Signal Forms Validation, с примерами и кейсами. И хоть базовые правила знакомы всем (required, email, min/max, minLength/maxLength, pattern), но остальные возможности точно будут полезны для ознакомления:
- Кастомная валидация: validate(), доступ к полям и состояниям через FieldContext.
- Асинхронная валидация: validateAsync(), validateHttp(), поддержка lazy loading.
- Интеграция: validateStandartSchema() для Zod, Valibot и подобных.
- Структурные функции: applyEach(), apply(), applyWhen(), applyWhenValue() для переиспользования схем.
- Управление состоянием: debounce, disabled, hidden, readonly.

Статья: https://netbasal.medium.com/master-angular-signal-forms-validation-all-functions-explained-d9b0cd1c7be6

#blog
Сегодняшняя статья посвящена deepSignal - маленькой, но мощной утилите.

🔹 Что делает deepSignal:
- Создаёт сигнал для вложенного свойства объекта. Потребители уведомляются только при изменении этого конкретного свойства.
- Позволяет писать значения прямо во вложенный сигнал.
- Обеспечивает высокую производительность даже для больших форм.

В статье подробно разбирается то, как deepSignal работает «под капотом» и как его используют в сигнальных формах Angular.

Статья: https://medium.com/netanelbasal/the-magic-of-deepsignal-how-angular-signal-forms-enable-true-nested-reactivity-6b9e0d73eb9d

#blog
Статья посвящена тому, что автор называет "великим сдвигом во фронтенде", а именно сдвигу от React к Angular в 2026 ✨
Angular постепенно возвращается в игру - и не как "сложный фреймворк из прошлого", а как ответ на усталость от хаоса во фронтенде. Standalone-компоненты, сигналы, TypeScript-first архитектура и решения "из коробки" сделали Angular быстрым, предсказуемым и удобным для больших команд. Там, где раньше выбирали гибкость React, теперь всё чаще выбирают структуру, масштабируемость и долгосрочную поддержку.
Автор пишет о том, как структура Angular ускоряет разработку, облегчает масштабные рефакторинги, упрощает онбординг новых сотрудников и повышает стабильность приложений. Производительность и интеграция с TypeScript делают фреймворк особенно привлекательным для enterprise-проектов и сложных приложений.
Это всё не про то, что React стал плох, а про то, как Angular решает проблемы команд.
Подробное сравнение здесь: https://medium.com/@satnammca/the-great-frontend-shift-react-to-angular-by-2026-1697c05e860e