✨ Animation In and Out
Команда Angular планирует отказаться от пакета
На смену придут новые функции
Также команда подготовила руководство по миграции, где пошагово показано, как перейти с
👉 https://github.com/angular/angular/discussions/62212
Команда Angular планирует отказаться от пакета
@angular/animations
. Причина — современные возможности CSS делают его устаревшим, а сам пакет тормозит развитие: он тяжелый, не использует аппаратное ускорение и ограничивает разработчиков.На смену придут новые функции
animate.in
и animate.out
, которые упрощают работу с CSS-анимациями и сторонними библиотеками вроде GSAP и Anime.js.Также команда подготовила руководство по миграции, где пошагово показано, как перейти с
@angular/animations
на нативные CSS-анимации.👉 https://github.com/angular/angular/discussions/62212
🔥25❤3👍2👏1🤣1🏆1
✨ Введение в WebRTC
WebRTC — это технология, которая позволяет браузерам и мобильным приложениям обмениваться аудио и видео в реальном времени. Это идеальное решение для видеозвонков, стриминга и аудиосвязи.
Хочешь разобраться в деталях, посмотреть примеры кода и понять, как правильно его настроить для стабильного соединения? Читай статью и делись с друзьями.
👉 https://habr.com/ru/articles/925644/
WebRTC — это технология, которая позволяет браузерам и мобильным приложениям обмениваться аудио и видео в реальном времени. Это идеальное решение для видеозвонков, стриминга и аудиосвязи.
Хочешь разобраться в деталях, посмотреть примеры кода и понять, как правильно его настроить для стабильного соединения? Читай статью и делись с друзьями.
👉 https://habr.com/ru/articles/925644/
👍4🔥2🤝2👏1🍾1👨💻1
✨ Angular без
Мы уже писали, что команда Angular рекомендует отказаться от использования
Это логично: пакет весит 60 кБ, а современным браузерам он уже не нужен. Но есть одно но: как анимировать удаление элементов из DOM, если Angular пока не поддерживает состояние :leave без этого пакета?
Хорошая новость в том, что в Taiga UI эту проблему уже решили. Давайте посмотрим, как это реализовано.
👉 https://www.angularspace.com/how-to-get-rid-of-angular-animations-right-now/
@angular/animations
Мы уже писали, что команда Angular рекомендует отказаться от использования
@angular/animations
и вместо него перейти на CSS-анимации.Это логично: пакет весит 60 кБ, а современным браузерам он уже не нужен. Но есть одно но: как анимировать удаление элементов из DOM, если Angular пока не поддерживает состояние :leave без этого пакета?
Хорошая новость в том, что в Taiga UI эту проблему уже решили. Давайте посмотрим, как это реализовано.
👉 https://www.angularspace.com/how-to-get-rid-of-angular-animations-right-now/
🔥19👀7👍6❤1🤔1
✨ Экстремально большие списки
Обычные списки в рендерят все элементы в DOM, даже те, что не видны пользователю. Представьте список из миллиона записей — браузер просто встанет. Но есть элегантное решение: виртуализированные списки.
Концепция проста: рендерим только элементы во вьюпорте + буферная зона. В DOM всегда остается фиксированное количество элементов, а производительность не страдает даже на 100k записей.
👉 https://habr.com/ru/articles/923120/
Обычные списки в рендерят все элементы в DOM, даже те, что не видны пользователю. Представьте список из миллиона записей — браузер просто встанет. Но есть элегантное решение: виртуализированные списки.
Концепция проста: рендерим только элементы во вьюпорте + буферная зона. В DOM всегда остается фиксированное количество элементов, а производительность не страдает даже на 100k записей.
👉 https://habr.com/ru/articles/923120/
👍6🔥4
✨ От Аристотеля до Тьюринга: что такое функциональное программирование
Пока одни разработчики спорят “ФП vs ООП”, другие уже понимают: функциональное программирование — это не модная парадигма, а мощный инструмент, корни которого уходят к Аристотелю и теории категорий.
В статье тимлид Avito Марат Зимнуров раскрывает суть ФП: от математических основ (теория категорий, функторы, монады) до практических примеров.
👉 https://habr.com/ru/companies/avito/articles/926544/
Пока одни разработчики спорят “ФП vs ООП”, другие уже понимают: функциональное программирование — это не модная парадигма, а мощный инструмент, корни которого уходят к Аристотелю и теории категорий.
В статье тимлид Avito Марат Зимнуров раскрывает суть ФП: от математических основ (теория категорий, функторы, монады) до практических примеров.
👉 https://habr.com/ru/companies/avito/articles/926544/
🔥6👍3❤2
✨ TypeScript WTF
Думаешь, что знаешь TypeScript? А вот и нет! Оказывается, даже опытные разработчики регулярно натыкаются на поведение, которое заставляет воскликнуть "WTF?!" или по-русски "Какого...?!"
Читай полную статью с разбором 5 самых неожиданных особенностей TypeScript и сохрани себе, чтобы не попасться на эти грабли в продакшене!
👉 https://habr.com/ru/articles/927182/
Думаешь, что знаешь TypeScript? А вот и нет! Оказывается, даже опытные разработчики регулярно натыкаются на поведение, которое заставляет воскликнуть "WTF?!" или по-русски "Какого...?!"
Читай полную статью с разбором 5 самых неожиданных особенностей TypeScript и сохрани себе, чтобы не попасться на эти грабли в продакшене!
👉 https://habr.com/ru/articles/927182/
🥱8👍1🔥1😭1
Расскажите в комментариях «почему» и поделитесь опытом.
Anonymous Poll
24%
54%
16%
7%
😨8😁5😱2
Помните лет 20 назад был комикс, на котором оратор спрашивал у людей “Кто может починить интернет без google и stackoverflow”? Помогите найти.
😁13
✨ Async pipe нечистый
Async Pipe упрощает работу с RxJS, автоматически отписываясь от потоков и обновляя UI.
Однако за этой простотой скрываются неочевидные нюансы и подводные камни. Именно их и раскрывает в своей статье Максим Иванов, объясняя, почему этот пайп на самом деле “нечистый”.
👉 https://habr.com/ru/articles/889990/
Async Pipe упрощает работу с RxJS, автоматически отписываясь от потоков и обновляя UI.
Однако за этой простотой скрываются неочевидные нюансы и подводные камни. Именно их и раскрывает в своей статье Максим Иванов, объясняя, почему этот пайп на самом деле “нечистый”.
👉 https://habr.com/ru/articles/889990/
😁10👍7🔥3😨1
✨ Прощай, Zone.js: ускоряем Angular с Signal API и Zoneless-подходом
Всем уже известно, что Angular делает шаг вперед, отказываясь от Zone.js в пользу Signal API.
Оно дает точный контроль — обновляются только те части интерфейса, которые зависят от измененных данных. Например, в приложении с таблицей на 5000 строк время отрисовки сократилось на 10%, а с глубокой вложенностью компонентов до 85%.
Хотите ускорить свои проекты? Читай статью и узнай, как Signal API меняет правила игры.
👉 https://habr.com/ru/companies/tbank/articles/928206/
Всем уже известно, что Angular делает шаг вперед, отказываясь от Zone.js в пользу Signal API.
Оно дает точный контроль — обновляются только те части интерфейса, которые зависят от измененных данных. Например, в приложении с таблицей на 5000 строк время отрисовки сократилось на 10%, а с глубокой вложенностью компонентов до 85%.
Хотите ускорить свои проекты? Читай статью и узнай, как Signal API меняет правила игры.
👉 https://habr.com/ru/companies/tbank/articles/928206/
❤18🔥12👍6🫡1
✨ Асинхронные редиректы в Angular 20
В Angular 20 появилась возможность делать редиректы асинхронно. Теперь RedirectFn может возвращать Observable или Promise.
Это позволяет определять, куда перенаправить пользователя, на лету: по ответам API, проверкам прав, feature‑флагам, геолокации и другим условиям во время выполнения.
👉 https://netbasal.medium.com/angulars-new-asynchronous-redirects-334f144c3ed0
В Angular 20 появилась возможность делать редиректы асинхронно. Теперь RedirectFn может возвращать Observable или Promise.
Это позволяет определять, куда перенаправить пользователя, на лету: по ответам API, проверкам прав, feature‑флагам, геолокации и другим условиям во время выполнения.
👉 https://netbasal.medium.com/angulars-new-asynchronous-redirects-334f144c3ed0
🔥25👍8❤3🎉1
✨ Angular-компилятор
Angular-компилятор преобразует ваши компоненты в легковесный, минифицированный JavaScript.
В статье автор отключил оптимизацию, чтобы заглянуть в результаты компиляции и продемонстрировать, как исходный код превращается в набор инструкций для создания и обновления интерфейса.
👉 https://blog.angulartraining.com/the-angular-compiler-from-your-code-to-browser-code-9b20ac2cbac6
Angular-компилятор преобразует ваши компоненты в легковесный, минифицированный JavaScript.
В статье автор отключил оптимизацию, чтобы заглянуть в результаты компиляции и продемонстрировать, как исходный код превращается в набор инструкций для создания и обновления интерфейса.
👉 https://blog.angulartraining.com/the-angular-compiler-from-your-code-to-browser-code-9b20ac2cbac6
🔥8❤3👍1🎉1
✨ Простое введение в SVG
SVG — это не очередной формат изображений, а мощная технология на основе XML. Главная фишка в том, что инлайновый SVG-код становится частью DOM, которым можно управлять с помощью CSS и JavaScript.
Это позволяет стилизовать графику привычными CSS-свойствами и создавать сложные анимации.
Читай статью, чтобы разобраться в основах и добавить мощный инструмент в свой арсенал.
👉 https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/
SVG — это не очередной формат изображений, а мощная технология на основе XML. Главная фишка в том, что инлайновый SVG-код становится частью DOM, которым можно управлять с помощью CSS и JavaScript.
Это позволяет стилизовать графику привычными CSS-свойствами и создавать сложные анимации.
Читай статью, чтобы разобраться в основах и добавить мощный инструмент в свой арсенал.
👉 https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/
👍8🔥5🎉1
✨ Angular 20.1: что нового?
Angular 20.1 вышел с обновлениями, которые упрощают жизнь разработчикам и ускоряют работу приложений. В центре внимания — удобство кода, оптимизация запросов и улучшения в тестировании.
Теперь в шаблонах поддерживаются новые операторы, NgOptimizedImage обзавелась параметром decoding, а в HttpResource добавили cache и priority для гибкости HTTP-запросов. Тестирование стало проще благодаря bindings.
👉 https://angular.love/angular-20-1-whats-new
Angular 20.1 вышел с обновлениями, которые упрощают жизнь разработчикам и ускоряют работу приложений. В центре внимания — удобство кода, оптимизация запросов и улучшения в тестировании.
Теперь в шаблонах поддерживаются новые операторы, NgOptimizedImage обзавелась параметром decoding, а в HttpResource добавили cache и priority для гибкости HTTP-запросов. Тестирование стало проще благодаря bindings.
👉 https://angular.love/angular-20-1-whats-new
🔥12👍2👏1🎉1
✨ Angular переходит с Rollup на Rolldown
В Angular решили заменить rollup на rolldown для экспериментальной функции оптимизации чанков.
Ожидается, что это изменение улучшит производительность.
Спасибо Hey 👋, I'm Samvel 🦊 за новость.
👉 https://github.com/angular/angular-cli/pull/30765
В Angular решили заменить rollup на rolldown для экспериментальной функции оптимизации чанков.
Ожидается, что это изменение улучшит производительность.
Спасибо Hey 👋, I'm Samvel 🦊 за новость.
👉 https://github.com/angular/angular-cli/pull/30765
🔥12👍4😁1🎉1
✨ Разработка браузерного расширения
Хотите узнать, как превратить идею в расширение для Chrome Web Store и Firefox Add-ons? Автор статьи делится опытом разработки инструмента для поиска по закладкам и вкладкам — от прототипа до публикации за две недели.
С помощью Quasar, Telegram Payments API и Litestar он сделал интерфейс, монетизацию и бэкенд, решив задачи с HTTPS, авторизацией через Telegram и требованиями Chrome.
👉 https://habr.com/ru/companies/ntechlab/articles/930732/
Хотите узнать, как превратить идею в расширение для Chrome Web Store и Firefox Add-ons? Автор статьи делится опытом разработки инструмента для поиска по закладкам и вкладкам — от прототипа до публикации за две недели.
С помощью Quasar, Telegram Payments API и Litestar он сделал интерфейс, монетизацию и бэкенд, решив задачи с HTTPS, авторизацией через Telegram и требованиями Chrome.
👉 https://habr.com/ru/companies/ntechlab/articles/930732/
👍5🔥3🎉1
✨ 6 CSS-сниппетов, которые должен знать каждый фронтенд-разработчик в 2025 году
В этом году веб становится еще более интерактивным. Теперь можно легко добавлять переходы между страницами, анимировать модальные окна, создавать сложные анимации и типизированные CSS-переменные. Все это с минимальным количеством кода.
Читай статью, чтобы узнать, как внедрить эти техники в свои проекты и сделать интерфейсы живее.
👉 https://www.angularspace.com/6-css-snippets-every-front-end-developer-should-know-in-2025/
В этом году веб становится еще более интерактивным. Теперь можно легко добавлять переходы между страницами, анимировать модальные окна, создавать сложные анимации и типизированные CSS-переменные. Все это с минимальным количеством кода.
Читай статью, чтобы узнать, как внедрить эти техники в свои проекты и сделать интерфейсы живее.
👉 https://www.angularspace.com/6-css-snippets-every-front-end-developer-should-know-in-2025/
👍5🔥3🎉1
✨ Как
С появлением нового control flow в Angular, блок
Раньше приходилось писать отдельную проверку
👉 https://habr.com/ru/articles/931634/
@empty
в Angular упрощает работу с пустыми коллекциямиС появлением нового control flow в Angular, блок
@empty
стал нативным решением для обработки пустых коллекций в цикле @for
.Раньше приходилось писать отдельную проверку
*ngIf="items.length === 0"
. Теперь же @empty
становится частью цикла @for
, делая шаблон понятнее. Внутрь него можно разместить любой контент: от простого текста «Ничего не найдено» до компонента с иконками и подсказками, что напрямую улучшает UX.👉 https://habr.com/ru/articles/931634/
🔥25👍4👏2🎉1
✨ Вопросы на собеседование для Angular-сеньора
Многие разработчики живут в «пузыре», годами решая однотипные задачи. Это создает иллюзию мастерства, которая рушится на первом же собеседовании с вопросами поглубже.
Статья раскрывает, что быть Angular-сеньором — это не только про вызов API и отображение данных. Это про глубокое понимание фреймворка, умение решать сложные задачи и вести команду к результатам.
👉 https://www.angularspace.com/senior-angular-interview-questions/
Многие разработчики живут в «пузыре», годами решая однотипные задачи. Это создает иллюзию мастерства, которая рушится на первом же собеседовании с вопросами поглубже.
Статья раскрывает, что быть Angular-сеньором — это не только про вызов API и отображение данных. Это про глубокое понимание фреймворка, умение решать сложные задачи и вести команду к результатам.
👉 https://www.angularspace.com/senior-angular-interview-questions/
👍19👎6🔥3🎉1
✨ Сердце Фреймворка: Философия и Практика Dependency Injection в Angular
Dependency Injection в Angular — это не просто механизм для получения сервисов. Это философия архитектуры, которая превращает хаотичные связи между компонентами в элегантную, предсказуемую систему.
Статья раскрывает DI от основ инверсии контроля (IoC) до тонкостей иерархического инжектора.
👉 https://habr.com/ru/articles/931400/
Dependency Injection в Angular — это не просто механизм для получения сервисов. Это философия архитектуры, которая превращает хаотичные связи между компонентами в элегантную, предсказуемую систему.
Статья раскрывает DI от основ инверсии контроля (IoC) до тонкостей иерархического инжектора.
👉 https://habr.com/ru/articles/931400/
👍14🔥3😁1🎉1
✨ Сам ты вайб-кодер
Вайб-кодеры мыслят фичами и юзер-стори, их цель рабочий продукт. Разработчики же требуют от ИИ качественный код: без дублирования, по стандартам проекта.
Проблемы? У вайб-кодеров — тех.долг, у разработчиков — ожидание идеального кода с первого промпта.
Читай статью, чтобы разобраться в терминах.
👉 https://habr.com/ru/articles/920794/
Вайб-кодеры мыслят фичами и юзер-стори, их цель рабочий продукт. Разработчики же требуют от ИИ качественный код: без дублирования, по стандартам проекта.
Проблемы? У вайб-кодеров — тех.долг, у разработчиков — ожидание идеального кода с первого промпта.
Читай статью, чтобы разобраться в терминах.
👉 https://habr.com/ru/articles/920794/
😁10🤡6👍2❤1🔥1