Всем привет!
Мы открываем регистрацию на
Angular Meetup #23 🎉

На митапе обсудим текущее состояние Angular и что нас ждет: сигналы, zoneless, гидратация, 19-я версия и другие вопросы, волнующие разработчиков. Также узнаем, сколько версий фреймворка нужно пропустить, чтобы считать свой проект устаревшим.

В конце вас ждет афтепати в лучших традициях: настолки, задачи на написание кода и неформальный нетворкинг с единомышленниками.

📆 Ждем 28 ноября в 19:00 в нашей штаб-квартире T-Space!
Если не сможете присутствовать офлайн, присоединяйтесь к онлайн-трансляции.

Регистрация здесь:
https://o.tbank.ru/angular-meetup-23

Тред для Бинго

Тред для вопросов к докладу Анны Ширяевой «Angular: обновить нельзя остаться»

Тред для вопросов к Круглому столу «State of Angular”

Привет! 👋

Мы хотели бы выразить огромную благодарность каждому из вас за участие в прошедшем Angular Meetup #23!
Благодаря вашему энтузиазму, заряженным вопросам, событие было по-настоящему живым.

Сильные выступления спикеров, интересные обсуждения, творческий нетворкинг и наполненная знаниями атмосфера - всё это делает событие отличным опытом для всех нас! 👏

Мы тщательно продумали каждую деталь и очень надеемся, что это было полезным и вдохновляющим для всех вас. Если у вас есть любые отзывы или предложения, пожалуйста, поделитесь с нами. Мы ценим ваше мнение и хотим сделать следующие мероприятия ещё лучше.

И наконец, если вы пропустили часть мероприятия или просто хотите освежить в памяти то, что было на слайдах или в дискуссиях, мы рады поделиться записью митапа:

Запись VK | YouTube

Помните, будучи частью этого сообщества, вы вносите вклад в его рост и развитие. Ещё раз спасибо за вашу активность и наблюдательность!

Оставить заявку для выступления на митапе можно на сайте
ng-meetup.ru

С нетерпением ждём нашей следующей встречи! 🚀

#blog
Крайне полезная статья-шпаргалка + таблица по Signals (составлена до релиза 19, но актуальна)

Reactivity System in Angular
1. Создание Readonly Signals: С помощью asReadonly() или используя computed().
2. Создание Writable Signals: Используется стандартная функция signal().
3. Чтение сигналов: Вызываем сигнал как функцию.
4. Computed Signals: Они отслеживают изменения других сигналов и выполняют вычисления при изменениях.
5. Effects (@developerPreview):
Механизм для отслеживания изменений в сигналах и выполнения побочных эффектов.
Бывают двух видов: Component effects и Root effects
6. Untracked:
Позволяет не отслеживать изменения некоторых сигналов внутри эффекта или вычисления.
7. AfterRenderEffect — @experimental:
Экспериментальный механизм для выполнения эффектов после того, как Angular завершит рендеринг компонента.
8. LinkedSignal — @developerPreview:
Представляет собой сигнал, который зависит от другого сигнала и сбрасывает своё значение, если изменяется исходный сигнал.
9. Resource API - @experimental:
API для работы с асинхронными данными, помогает интегрировать ресурсы с системой сигналов.

Authoring
- Signal Based Inputs: С Angular 17.1 можно использовать сигналы вместо стандартных @Input() для данных.
- Two-way Data Binding with Model Input (17.2): Новый подход для двухсторонней привязки данных через model().
- Signal Queries (17.2): Новый способ работы с запросами данных в Angular, используя сигналы вместо @ViewChild() и @ContentChild().
- Output API (17.3): Новый API для работы с событиями и выходными данными, автоматически очищает подписки.

Интеграция Angular Signals и RxJS (@angular/core/rxjs-interop)
Основные методы и утилиты
1. toSignal() — Преобразует Observable в Signal.
2. toObservable() — Преобразует Signal в Observable.
3. outputFromObservable() — Генерирует output() из Observable.
4. outputToObservable() — Преобразует output() в Observable.
5. takeUntilDestroyed() — Завершает подписку на Observable при уничтожении компонента или сервиса.
6. pendingUntilEvent() (@experimental) — Блокирует выполнение приложения до завершения Observable.
7. rxResource() (@experimental) — Использует Observable в качестве загрузчика данных вместо Promise.

Утилиты из ngxtensions
Одной из наиболее полезных утилит является derivedAsync(), которая позволяет реагировать на изменения Signal и выполнять асинхронные операции, такие как запросы к API


Статья - https://www.codigotipado.com/p/angular-signals-cheatsheet

#blog
Тем временем, вышли интересные релизы Chrome - 131 и 132.
Знаковое то, что в 131 появилась новая экспериментальная панель Ai assistance.
В ней используется чат-бот Google Gemini.

В 131 внедрили поддержку чата по CSS.
Можно выделить элемент и задать вопросы по его верстке, что в нем нужно изменить чтобы он показывался так как вам нужно.
AI сама изучит контекст его применения, верстку и предложит решение уже на этих данных.

В 132 появилась поддержка общения по сетевым запросам, исходным файлах и трассировок производительности. Gemini также примет во внимание контекст выбранного запроса, файла или действия и даст соответствующий ответ.

К сожалению, в аккаунтах Google с регионом Россия, данный функционал не поддерживаются.

https://developer.chrome.com/blog/new-in-devtools-131?hl=ru#ai-assistance
https://developer.chrome.com/blog/new-in-devtools-132?hl=ru

#blog
Пора уже заниматься подведением итогов года, и сегодня предлагаю посмотреть очень стильно оформленную статью от ChromeDev о ключевых улучшениях в CSS за 2024 год. Если тезисно пройтись по списку, получим следующее:

1. Анимации и переходы:
- Cross-Document View Transitions: анимации между страницами без необходимости превращать сайт в SPA.
- Анимация до height: auto: плавные анимации для элементов с авто-высотой с помощью interpolate-size и calc-size().

2. Интерактивные компоненты:
- Акордеоны на базе `<details>`: эксклюзивные аккордеоны с атрибутом name, чтобы при открытии одного элемента закрывались другие.
- Стилизованные <details> элементы: возможность кастомизировать <details> и <summary> с помощью display и псевдо-элемента ::details-content.
- Anchor Positioning: новый способ позиционирования элементов относительно других без сторонних библиотек через position-anchor и position-area.

3. UI-паттерны:
- Стилизация полос прокрутки: настройка ширины и цвета полос прокрутки через scrollbar-width и scrollbar-color.
- Scroll-driven Animations: анимации, синхронизированные с прокруткой страницы.
- Scroll Snap Events: новые события scrollsnapchange и scrollsnapchanging для более точного контроля за элементами при скролле.

4. Улучшения для разработчиков:
- Унаследование для ::backdrop: ::backdrop теперь наследует стили от родительских элементов, улучшая работу с модальными окнами.
- Функция light-dark(): позволяет легко адаптировать стили для светлой и темной темы.
- Регистрация свойств с @property: создание кастомных свойств с указанием типа и начального значения для использования в анимациях.
- Popover API: создание всплывающих окон с встроенной функциональностью закрытия и фокусировки.
- Эффекты при старте c @starting-style: задавайте начальные стили элементов для анимаций при их появлении.

5. Другие улучшения:
- Поддержка линейного разрыва текста в <ruby>: улучшенное выравнивание текста с аннотациями Ruby.
- Контроль порядка рисования текста с paint-order: настройка порядка рисования текста и обводки для улучшения визуальных эффектов.

Статья - https://chrome.dev/css-wrapped-2024/#paint-order

#blog Наш коллега из TaigaUI (Александр Инкин) поделился опытом применения редко используемого свойства Angular - hostDirectives.

hostDirectives появилось в Angular 15.
Оно позволяет навесить несколько директив на компонент или директиву, причем это делается внутри TypeScript класса.

Как и у любого решения, у него есть свои минусы.

В данной статье Александр приводит примеры того, как использовать силу данного инструмента и как устранить его недостатки.

Читаем статью и ставим +1 )

https://habr.com/ru/companies/tbank/articles/867276/
https://angular.dev/guide/directives/directive-composition-api

Мы в Т-Банк следим за развитием веб технологий.
На днях вышел итог State of JS 2024.
Мы даже проводим его аналог внутри нашего JS сообщества)

Результаты State of JS 2024 вы можете посмотреть по ссылке, а в комментариях - то, что нас заинтересовало в его итогах.
https://2024.stateofjs.com/en-US/

#blog
Сегодня предлагаю прочитать статью, в которой рассматриваются основные способы улучшения Core Web Vitals — показателей, влияющих на пользовательский опыт. Приведены рекомендации, которые легко применить большинству разработчиков:

1. Взаимодействие со следующей отрисовкой (INP)
Чтобы улучшить INP, важно разбивать длительные задачи на более мелкие, например с помощью Scheduler API.

2. Минимизация JavaScript
Избегайте ненужного кода, используйте разделение кода, чтобы сначала загружать только те скрипты, которые необходимы для рендеринга страницы.

3. Оптимизация рендеринга
Минимизируйте операции с DOM, используйте CSS для ленивого рендеринга скрытых элементов, а также уменьшайте размер DOM.

4. Ускорение загрузки контента (LCP)
Чтобы ускорить LCP, используйте атрибут fetchpriority для изображений, избегайте использования lazy-loading для критичных ресурсов и предзагружайте ресурсы через preload.

5. Мгновенная навигация
Используйте предварительную загрузку страниц или кэш назад/вперед.

6. Использование CDN для оптимизации TTFB
Чтобы сократить время до первого байта (TTFB), разверните контент как можно ближе к пользователям с помощью CDN.

7. Сдвиг макета
Задавайте размеры для всех изображений и элементов. Для динамичного контента используйте min-height или aspect-ratio.

Хотя оптимизация производительности может быть сложной задачей, применение базовых и наиболее эффективных рекомендаций — это первый шаг к значительному улучшению работы сайта. Сосредоточьтесь на том, что даст наибольший эффект для вашего пользователя, и результаты не заставят себя ждать!

Полный текст - https://habr.com/ru/companies/timeweb/articles/860574/

#blog
Если после новогодних праздников Вы обнаружили, что написанный в конце декабря код не работает - не беда! Почитаем статью, которая раскрывает несколько полезных инструментов для отладки фронтенда. Кратко о том, что в ней есть:
- debugger в JavaScript — один из мощных инструментов для отладки. Вместо того, чтобы просто выводить ошибки в консоль, можно использовать ключевое слово debugger, чтобы сразу остановить выполнение на нужной строке кода.
- Отладка через консоль — современные браузеры позволяют запускать отладчик прямо из консоли. Например, с помощью команды debug(functionName).
- Брейкпоинты на DOM-элементах — в Chrome и Firefox можно ставить брейкпоинты на изменениях DOM. Это полезно, когда проблемы возникают из-за манипуляций с элементами на странице.
- XHR-брейкпоинты — иногда сложно понять, какой именно запрос вызвал ошибку, особенно в крупных приложениях. Используя XHR-брейкпоинты, можно установить фильтры по подстроке в URI и отслеживать, когда происходят определенные сетевые запросы.
- Эмуляция различных условий — Chrome и Firefox предлагают инструменты для имитации разных условий, например, изменяя user agent, геолокацию или ориентацию устройства.
- Отладка CSS и HTML — инспектор элементов позволяет в реальном времени изменять DOM и стили, что помогает быстро находить и исправлять баги. Особое внимание стоит уделить проблемам с специфичностью CSS-селекторов.

Статья - https://debugagent.com/front-end-debugging-part-1-not-just-console-log

#blog
Функция Type Stripping в Node.js теперь доступна по умолчанию

Функция Type Stripping, с помощью которой можно запускать код на TypeScript без дополнительной конфигурации, теперь доступна по умолчанию. Type Stripping можно найти в версии Node.js 23.6.0, в ближайшее время команда проекта выпустит стабильный релиз.

Впервые функция Type Stripping появилась в августе 2024 года. Она удаляет из кода типовые аннотации и заменяет их на пробелы. Благодаря этому структура кода проекта не меняется, а разработчики могут не использовать source maps. Кроме того, можно полностью отказаться от сторонних решений, которые часто конфликтуют с Node.js и другими инструментами.

Уже сейчас Type Stripping можно попробовать с помощью флага --experimental-strip-types в Node.js 23.6.0.

Статья - https://satanacchio.hashnode.dev/everything-you-need-to-know-about-nodejs-type-stripping

#blog Новая статья от наших ребят о работе Playwright.
На этот раз описывается опыт применения fixtures.
Это специальные функции или объекты, которые помогают подготовить необходимое окружение для тестов.

В них есть куча настроек, например:
- fixtures сами по себе заменяют beforeEach и afterEach;
- можно использовать цепочки fixtures.

В какой-то степени это аналог Cypress.Commands, если он вам ближе.
Фича, конечно, полезная.
https://habr.com/ru/companies/tbank/articles/877292/

#blog
Короткая, но интересная новость: последний релиз Angular, 19.2.0-next.0, представляет поддержку неотмеченных строковых литералов в выражениях, что значительно улучшает гибкость темплейтов.
Ключевые варианты использования:
- Динамическое содержимое:

<p>Сообщение: {{ `Привет, ${name} - ${value} }}</p>

- Динамические классы:

<p class="{{ `foo-${postfix} }}">Пользовательский класс</p>
<p [class]=foo-${postfix}>Пользовательский класс</p>

- Интерполяции с несколькими выражениями:

<p>С интерполяциями: {{ `Привет ${name}, сейчас ${timeOfDay}! }}</p>

- Пайпы и строковые литералы:

<p>С пайпом: {{ `hello ${name} | uppercase }}</p>

- Динамические URL:

<img [src]="${base}/600x400`" />

- Циклы со строковыми литералами:

@for(n of [1,2,3]; track $index) {<br>  <button [attr.data-id]=${n}-button>{{ `Нажми ${n} }}</button>
}

Эта новая функциональность упрощает работу с шаблонами, делая код более читаемым и поддерживаемым. На мой взгляд, этого нам не хватало очень давно.

Статья - https://medium.com/netanelbasal/enhancing-angular-templates-with-untagged-template-literals-0baa5b4f8371