🦄 Новогодняя история телеграм-бота
Ребята из Tinkoff написали небольшую игру по мотивам фильма «Один дома» на NestJS и поделились опытом её создания.
Игроки будут две недели помогать Кевину программировать устройства в умном доме, чтобы разрушить планы грабителей.
Если вам нравится решать головоломки, то вы точно сможете помочь Кевину!
👉 https://habr.com/ru/company/tinkoff/blog/596287/
Ребята из Tinkoff написали небольшую игру по мотивам фильма «Один дома» на NestJS и поделились опытом её создания.
Игроки будут две недели помогать Кевину программировать устройства в умном доме, чтобы разрушить планы грабителей.
Если вам нравится решать головоломки, то вы точно сможете помочь Кевину!
👉 https://habr.com/ru/company/tinkoff/blog/596287/
👍1
✨ Краткое руководство по Angular и GraphQL
За последние 5 лет GraphQL зарекомендовал себя как наиболее популярная альтернатива REST API. Он обеспечивает гибкий способ реализации API, который можно расширять, не ломая существующих клиентов.
В этом руководстве Holger Schmitz, на примере приложения по «Звездным войнам», показал как использовать GraphQL в Angular.
👉 https://developer.okta.com/blog/2021/10/22/angular-graphql
За последние 5 лет GraphQL зарекомендовал себя как наиболее популярная альтернатива REST API. Он обеспечивает гибкий способ реализации API, который можно расширять, не ломая существующих клиентов.
В этом руководстве Holger Schmitz, на примере приложения по «Звездным войнам», показал как использовать GraphQL в Angular.
👉 https://developer.okta.com/blog/2021/10/22/angular-graphql
✨ Angular Material Theming System: Полное руководство
В последних выпусках Angular Material был переработан API SASS для создания тем.
В этом руководстве мы создадим проект с Angular Material, добавим в него пользовательскую тему, разберем некоторые важные миксины, разберемся с типографикой, реализуем ленивую загрузку темы, чтобы она загружалась только тогда, когда это необходимо.
👉 https://indepth.dev/tutorials/angular/angular-material-theming-system-complete-guide
В последних выпусках Angular Material был переработан API SASS для создания тем.
В этом руководстве мы создадим проект с Angular Material, добавим в него пользовательскую тему, разберем некоторые важные миксины, разберемся с типографикой, реализуем ленивую загрузку темы, чтобы она загружалась только тогда, когда это необходимо.
👉 https://indepth.dev/tutorials/angular/angular-material-theming-system-complete-guide
✨ Скрытие информации в Angular
Главная особенность SPA — это то, что весь код приложения грузится на клиент, это делает приложение отзывчивее, но при этом полностью открытым. SPA может раскрыть: конфигурацию системы, API запросы, явно прописанные данные (ключи, логины, пароли) и т.д.
В статье, на примере Angular приложения, показывается как получить полезные данные и описаны способы защиты.
👉 https://habr.com/ru/company/nspk/blog/597097/
Главная особенность SPA — это то, что весь код приложения грузится на клиент, это делает приложение отзывчивее, но при этом полностью открытым. SPA может раскрыть: конфигурацию системы, API запросы, явно прописанные данные (ключи, логины, пароли) и т.д.
В статье, на примере Angular приложения, показывается как получить полезные данные и описаны способы защиты.
👉 https://habr.com/ru/company/nspk/blog/597097/
Кто-то от моего имени и имени Кира клянчит битки — не ведитесь 👇
👍2
Forwarded from kirjs_ru
⚠️ Осторожно мошенники⚠️
Тут кто-то взял имя @kirjc поставил мою аватарку и имя и просит деньги в долг.
Это не я, не давайте и шлите в спам
upd: Говорят что от имени Лиса тоже присылают
Пока предположительно человек брал контакты из @kirjs_ru_chat, если вам написали а вы не оттуда, пожалуйста отпишитесь тут.
(Добавил еще скрин в комменте)
Тут кто-то взял имя @kirjc поставил мою аватарку и имя и просит деньги в долг.
Это не я, не давайте и шлите в спам
upd: Говорят что от имени Лиса тоже присылают
Пока предположительно человек брал контакты из @kirjs_ru_chat, если вам написали а вы не оттуда, пожалуйста отпишитесь тут.
(Добавил еще скрин в комменте)
✨ Как использовать ngx-formly в Angular
Как часто вы создаете формы? Приходила ли вам идея улучшить этот процесс? Ngx-formly — это библиотека динамических форм для Angular, которая поможет вам легко реализовать формы и добавлять к ним специфическую валидацию.
В этой статье вы узнаете, как использовать, настраивать и кастомизировать ngx-formly.
👉 https://indepth.dev/tutorials/angular/how-to-use-ngx-formly-with-angular
Как часто вы создаете формы? Приходила ли вам идея улучшить этот процесс? Ngx-formly — это библиотека динамических форм для Angular, которая поможет вам легко реализовать формы и добавлять к ним специфическую валидацию.
В этой статье вы узнаете, как использовать, настраивать и кастомизировать ngx-formly.
👉 https://indepth.dev/tutorials/angular/how-to-use-ngx-formly-with-angular
👍1
✨ Порядок операторов в RxJS
Операторы — это важные элементы RxJS, которые позволяют легко писать сложный код в декларативном стиле. Они атомарны и очень просты, но могут объединяться в сложные последовательности, в которых легко допустить ошибку.
Вербило Александр разобрал варианты последовательностей в RxJS, показал типичные ошибки в них и как валидировать их порядок.
👉 https://habr.com/ru/post/598151/
Операторы — это важные элементы RxJS, которые позволяют легко писать сложный код в декларативном стиле. Они атомарны и очень просты, но могут объединяться в сложные последовательности, в которых легко допустить ошибку.
Вербило Александр разобрал варианты последовательностей в RxJS, показал типичные ошибки в них и как валидировать их порядок.
👉 https://habr.com/ru/post/598151/
✨ Меню с использованием динамических данных
В этом туториале мы узнаем, как создавать вложенные меню на основе динамических данных.
Сначала изучим основы Angular Material Menu и узнаем, как отобразить вложенное меню с помощью статичного HTML-шаблона.
Затем поймем, какие изменения необходимы для динамического рендеринга вложенных меню на основе данных.
👉 https://indepth.dev/tutorials/angular/angular-material-nested-menu-dynamic-data
В этом туториале мы узнаем, как создавать вложенные меню на основе динамических данных.
Сначала изучим основы Angular Material Menu и узнаем, как отобразить вложенное меню с помощью статичного HTML-шаблона.
Затем поймем, какие изменения необходимы для динамического рендеринга вложенных меню на основе данных.
👉 https://indepth.dev/tutorials/angular/angular-material-nested-menu-dynamic-data
✨ Angular Pipes: Полное руководство
Pipes — это простой способ форматирования данных для рендеринга. Когда вы их используете, вам не нужно менять данные, чтобы они соответствовали представлению.
В этой руководстве рассматриваются важные концепции, необходимые для понимания Angular Pipes.
👉 https://indepth.dev/tutorials/angular/angular-pipes-complete-guide
Pipes — это простой способ форматирования данных для рендеринга. Когда вы их используете, вам не нужно менять данные, чтобы они соответствовали представлению.
В этой руководстве рассматриваются важные концепции, необходимые для понимания Angular Pipes.
👉 https://indepth.dev/tutorials/angular/angular-pipes-complete-guide
🔥7
✨ WebSockets в Angular
WebSocket API — позволяет осуществлять связь между клиентом и сервером, как для отправки сообщений, так и для получения ответов без необходимости делать новый запрос к серверу.
В этом туториале рассказывается, как реализовать сервис для взаимодействия через WebSocket API.
👉 https://indepth.dev/tutorials/angular/how-to-implement-websockets-in-angular-project
WebSocket API — позволяет осуществлять связь между клиентом и сервером, как для отправки сообщений, так и для получения ответов без необходимости делать новый запрос к серверу.
В этом туториале рассказывается, как реализовать сервис для взаимодействия через WebSocket API.
👉 https://indepth.dev/tutorials/angular/how-to-implement-websockets-in-angular-project
👍9
✨ Опыт создания мобильных приложений на Ionic/Angular
Ionic — это набор инструментов пользовательского интерфейса для создания мобильных и настольных приложений с использованием HTML, CSS и JavaScript, а также с интеграцией с популярными фреймворками, как Angular.
Константин Берлинский рассказал как погрузился в мобильную разработку, с какими трудностями столкнулся и как решал возникшие проблемы.
👉 https://habr.com/ru/post/599133/
Ionic — это набор инструментов пользовательского интерфейса для создания мобильных и настольных приложений с использованием HTML, CSS и JavaScript, а также с интеграцией с популярными фреймворками, как Angular.
Константин Берлинский рассказал как погрузился в мобильную разработку, с какими трудностями столкнулся и как решал возникшие проблемы.
👉 https://habr.com/ru/post/599133/
👍6
🚀 Портфолио на Jamstack
Angular приложения могут стать быстрее, если сделать их статичными при помощи Scully. Scully — это генератор статических сайтов, который создает HTML-страницу для каждого маршрута в вашем приложении. Эти страницы быстрее доставляются и эффективны для SEO.
В этом уроке вы создадите портфолио и блог с помощью Angular 11 и Scully.
👉 https://www.digitalocean.com/community/tutorials/how-to-build-a-jamstack-portfolio-with-angular-11-and-scully
Angular приложения могут стать быстрее, если сделать их статичными при помощи Scully. Scully — это генератор статических сайтов, который создает HTML-страницу для каждого маршрута в вашем приложении. Эти страницы быстрее доставляются и эффективны для SEO.
В этом уроке вы создадите портфолио и блог с помощью Angular 11 и Scully.
👉 https://www.digitalocean.com/community/tutorials/how-to-build-a-jamstack-portfolio-with-angular-11-and-scully
✨ Проектирование архитектуры Angular
Проектирование архитектуры может быть непростым делом, особенно в мире agile, где требования часто меняются. Поэтому ваш проект должен обеспечивать расширяемость без необходимости серьезной модификации.
Maciej Wojcik призывает не писать ненужный код — вы не можете предсказать будущие изменения, а спланировать и реализовать архитектуру, которая упростит расширение, независимо от того, как будут меняться требования.
👉 https://indepth.dev/posts/1478/designing-angular-architecture-container-presentation-pattern
Проектирование архитектуры может быть непростым делом, особенно в мире agile, где требования часто меняются. Поэтому ваш проект должен обеспечивать расширяемость без необходимости серьезной модификации.
Maciej Wojcik призывает не писать ненужный код — вы не можете предсказать будущие изменения, а спланировать и реализовать архитектуру, которая упростит расширение, независимо от того, как будут меняться требования.
👉 https://indepth.dev/posts/1478/designing-angular-architecture-container-presentation-pattern
👍20👎2
🔥 Создаем клон TikTok с помощью Angular
Как насчет того, чтобы сделать клон TikTok? Вы можете подумать, что это слишком сложно, но Виталий Шевчук обещает, что мы построим его самым эффективным и ленивым способом, с минимальным количеством кода, и узнаем много нового о современном фронтенде.
Больше никаких скучных учебников, только красивые, реальные примеры, изучайте Micro Frontend, создавая TikTok.
👉 https://javascript.plainenglish.io/building-beautiful-tiktok-clone-with-angular-and-micro-frontend-part-1-bdd189425695
Как насчет того, чтобы сделать клон TikTok? Вы можете подумать, что это слишком сложно, но Виталий Шевчук обещает, что мы построим его самым эффективным и ленивым способом, с минимальным количеством кода, и узнаем много нового о современном фронтенде.
Больше никаких скучных учебников, только красивые, реальные примеры, изучайте Micro Frontend, создавая TikTok.
👉 https://javascript.plainenglish.io/building-beautiful-tiktok-clone-with-angular-and-micro-frontend-part-1-bdd189425695
🔥13👍4👎1
✨ Создаем собственную библиотеку компонентов Angular
Повторное использование компонентов в разных проектах делает ваш код более организованным. Ваши приложения выглядят более последовательными и согласованными, когда вы повторно используете свои компоненты.
В этой статье рассматриваются основы создания библиотеки компонентов Angular и публикации ее на npm.
👉 https://javascript.plainenglish.io/create-your-own-angular-component-library-e5f062b902a8
Повторное использование компонентов в разных проектах делает ваш код более организованным. Ваши приложения выглядят более последовательными и согласованными, когда вы повторно используете свои компоненты.
В этой статье рассматриваются основы создания библиотеки компонентов Angular и публикации ее на npm.
👉 https://javascript.plainenglish.io/create-your-own-angular-component-library-e5f062b902a8
👍16🔥1🎉1
✨ Как использовать скелетоны в Angular?
Скелетоны стали популярными за последние несколько лет. Они отображают шаблон, отражающий структуру приложения, давая представление о том, какой тип содержимого загружается в каждом блоке.
Скелетоны можно реализовать самостоятельно, но такие фреймворки, как Angular, имеют готовые решения, которые легко применять.
👉 https://blog.angulartraining.com/how-to-use-a-skeleton-loader-with-angular-4f03ae8fa5c6
Скелетоны стали популярными за последние несколько лет. Они отображают шаблон, отражающий структуру приложения, давая представление о том, какой тип содержимого загружается в каждом блоке.
Скелетоны можно реализовать самостоятельно, но такие фреймворки, как Angular, имеют готовые решения, которые легко применять.
👉 https://blog.angulartraining.com/how-to-use-a-skeleton-loader-with-angular-4f03ae8fa5c6
👍16
🔥 Как не нужно изучать TypeScript
Изучение TypeScript, даже в 2022 году, может быть затруднительным. Люди, которые пишут на Java или C# обнаруживают, что все работает не так, как они привыкли. Люди, которые работают на JavaScript пугаются, когда на них кричит компилятор.
Stefan Baumgartner рассказал о частых ошибках новичков в TypeScript. Надеемся, они окажутся полезными для вас.
👉 https://fettblog.eu/how-not-to-learn-typescript/
Изучение TypeScript, даже в 2022 году, может быть затруднительным. Люди, которые пишут на Java или C# обнаруживают, что все работает не так, как они привыкли. Люди, которые работают на JavaScript пугаются, когда на них кричит компилятор.
Stefan Baumgartner рассказал о частых ошибках новичков в TypeScript. Надеемся, они окажутся полезными для вас.
👉 https://fettblog.eu/how-not-to-learn-typescript/
🔥10👍2
✨ Прекращение поддержки AngularJS
Для многих AngularJS стал технологией, изменившей жизнь, он заложил прочный фундамент для Angular и помог определить будущее веба. Но время идет, и команда разработчиков объявила о прекращении поддержки AngularJS.
Вы можете обновить свои приложения на Angular и воспользоваться преимуществами производительности и масштабируемости.
👉 https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a
Для многих AngularJS стал технологией, изменившей жизнь, он заложил прочный фундамент для Angular и помог определить будущее веба. Но время идет, и команда разработчиков объявила о прекращении поддержки AngularJS.
Вы можете обновить свои приложения на Angular и воспользоваться преимуществами производительности и масштабируемости.
👉 https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a
👍15🔥3
✨ 5 лучших техник на TypeScript
Со временем и практикой мы пишем более качественным код, но всегда есть место для улучшения. Ни одна методика не сделает запутанную программу лучше, однако сумма небольших улучшений будет существенной.
Надеемся эта статья откроет для вас несколько новых приемов.
👉 https://obaranovskyi.medium.com/top-5-techniques-in-typescript-to-bring-your-code-to-the-next-level-6f20be543b39
Со временем и практикой мы пишем более качественным код, но всегда есть место для улучшения. Ни одна методика не сделает запутанную программу лучше, однако сумма небольших улучшений будет существенной.
Надеемся эта статья откроет для вас несколько новых приемов.
👉 https://obaranovskyi.medium.com/top-5-techniques-in-typescript-to-bring-your-code-to-the-next-level-6f20be543b39
👍22🔥1
✨ Полное руководство по директиве ngFor в Angular
Если у вас есть итерируемый список с элементами, которые необходимо отобразить, то ngFor идеально подойдет для этой работы.
Директива NgFor — это мощная техника для визуализации нескольких элементов. Она предоставляет множество полезных дополнительных возможностей, о которых рассказано в статье.
👉 https://indepth.dev/tutorials/angular/complete-guide-to-ngfor-directive
Если у вас есть итерируемый список с элементами, которые необходимо отобразить, то ngFor идеально подойдет для этой работы.
Директива NgFor — это мощная техника для визуализации нескольких элементов. Она предоставляет множество полезных дополнительных возможностей, о которых рассказано в статье.
👉 https://indepth.dev/tutorials/angular/complete-guide-to-ngfor-directive
👍9🔥1