Angular Meetup

#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

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

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

#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

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
На сегодня статья "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
Сегодня посмотрим обновления в 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

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

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

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

#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 часто вызывают путаницу из-за того, что разработчики пытаются мыслить в терминах RxJS. Мы ожидаем, что сигналы будут вести себя как потоки и автоматически обновлять DOM, но это совсем не так.

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

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

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

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

#blog
Подробная и понятная статья, способная закрыть пробелы знаний в области делегирования событий в JS (либо освежить в памяти). Тезисно:
- Описан механизм всплытия событий, и три их фазы: захвата, цели и всплытия, что лежит в основе делегирования.
- Делегирование улучшает производительность, упрощает поддержку кода и корректно работает с динамически создаваемыми элементами.
- Описаны частые ошибки: путаница между event.target и event.currentTarget, некорректное использование stopPropagation().
- Рассмотрены нюансы работы событий в Shadow DOM, а также события, которые не всплывают (focus, blur, mouseenter, mouseleave), и способы их обработки.
- Приведены примеры реализации делегирования во фреймворках: React (синтетические события), Vue, Svelte и Angular.

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

#blog
🚀 Angular анонс: сигнальные формы — будущее уже здесь!
Недавно в Angular влили экспериментальную ветку Signal Forms — одной из самых ожидаемых новинок.
Это обновление обещает упростить работу с формами, убрав боль, знакомую каждому Angular-разработчику:
* громоздкие FormGroup и FormControl
* ручные подписки на valueChanges
* дублирование валидаторов
* бесконечные блоки if/else для вывода сообщений об ошибках
Формы теперь работают напрямую со сигналами, делая код чище и лаконичнее. И это только начало!
О том, как это работает с реальным примером, читайте в статье: https://medium.com/@schnabelelisa0/angular-signal-forms-the-most-awaited-feature-is-here-161fd722f573

#blog
У меня вышла статья на Хабре (моя первая), под эгидой Т-Банка, разумеется.
Повествую о спецификации CSS Color 4 и новых цветовых пространствах, которые она нам приносит. Поддержка популярными браузерами уже давно есть, поэтому пользоваться всем этим можно без особых опасений.

Читать здесь - https://habr.com/ru/companies/tbank/articles/948450/

#blog
ESLint получил поддержку многопоточного линтинга через флаг --concurrency, который ускоряет работу за счёт распределения задач по ядрам процессора. Флаг --concurrency=auto выбирает оптимальное число потоков автоматически. Обновление, ждавшее своего часа почти 10 лет, позволяет сократить время линтинга в крупных проектах на 30–60%, а в некоторых случаях — более чем в 3 раза. Доступно для использования с ESLint v9.34.0

Статья - https://socket.dev/blog/eslint-adds-support-for-parallel-linting
Официальный блог - https://eslint.org/blog/2025/08/eslint-v9.34.0-released/

#blog Интересная статья, показывающая разницу между Observables и Signal.
Автор на пальцах показывает разницу между pull и push моделями и область применения каждой из них.
Понимание этого будет полезно при разработке архитектуры.

https://dev.to/lcsga/angular-signals-dont-replace-observables-pull-vs-push-49l7

#blog
В V8 добились более чем двукратного повышения производительности JSON.stringify!
Команда улучшила текущий алгоритм преобразования.
Если данные подходят под критерии, то они форматируется по-новому, иначе - по-старому.
Условия, при которых сработает улучшенный алгоритм:
- запуск JSON.stringify() с одним аргументом;
- объект не должен иметь переопределенного метода .toJSON();
- отсутствие индексированных свойств у объектов, например, {0: "hello"};
- строки должны быть простыми (например, в них не должно быть emoji).

Кажется, что под эти правила подходит 99% кода)
Обновление доступно начиная с Chrome 138.
https://v8.dev/blog/json-stringify

#blog
Интересная статья о странностях CSS, которые мало кому известны. Что внутри:
- В calc() ноль должен быть с единицей измерения (например, `0px`), иначе значение не применится.
- В calc() сложение/вычитание работает только между совместимыми типами; умножение/деление требует числового операнда.
- aspect-ratio может нарушаться, если контент требует больше места.
- Во флекс-контейнере все элементы могут принять наибольшее значение aspect-ratio, если не ограничить их через min-height: 0 или overflow: auto.
- :nth-child(n of selector) выбирает n-й элемент из всех, подходящих под любой селектор в списке.
- position: absolute в грид-контейнере позиционируется относительно ячейки, заданной grid-column и grid-row, а не родителя.

Статья - https://habr.com/ru/companies/ruvds/articles/937094/

#blog
На сегодня - большая и глубокая статья о семантическом HTML. Автор рассказывает о разных аспектах и объясняет, почему семантика важна и почему плохо городить страницу из сплошных div. Краткие тезисы:

- Семантический HTML выражает смысл, а не только структуру.
Теги вроде <article>, <nav>, <header> говорят браузерам и агентам, что это за контент.
- Бессмысленная разметка вредит доступности.
Скринридеры и голосовые интерфейсы не могут правильно интерпретировать пирамиду из <div>.
- Семантика улучшает производительность.
Четкая структура DOM ускоряет рендеринг и упрощает работу с анимациями.
- Большие и сложные DOM-деревья замедляют страницу.
Чем больше узлов — тем дольше браузер обрабатывает layout, style и paint.
- Утилитарные классы увеличивают дублирование CSS.
Это замедляет перерасчёт стилей и увеличивает размер файлов.
- Случайные имена классов мешают кэшированию и тестированию.
Например, .jsx-392hf или .tw-abc123 затрудняют анализ и повторное использование.
- Семантика помогает AI-агентам и поисковым системам.
Четкая разметка упрощает извлечение данных и индексацию.
- Семантический HTML — основа надежности.
Даже при сбое JS или стилей, он обеспечивает минимальную функциональность.
- Это не "чистый код" — это инфраструктура.
Семантический HTML — базовый элемент современного веба.

Статья: https://www.jonoalderson.com/conjecture/why-semantic-html-still-matters/

#blog Вышел минорный релиз Angular 20.2.0
Главное что можно выделить:
- Zoneless стал стабильным;
- Animations deprecated;
- Поддержка typescript 5.9.

https://angular.love/angular-20-2-the-recent-changes