✨ Отлаживаем Angular приложения
При знакомстве с новым фреймворком или библиотекой важно знать, как отладить его, если что-то пошло не так. В Angular есть множество полезных инструментов, которые помогут вам эффективно отлаживать ваше приложение.
Walter Kuppens рассказал о нескольких способах отладки. Надеемся, они окажутся полезными в ваших поисках ошибок.
👉 https://www.thisdot.co/blog/debugging-strategies-for-angular-applications
При знакомстве с новым фреймворком или библиотекой важно знать, как отладить его, если что-то пошло не так. В Angular есть множество полезных инструментов, которые помогут вам эффективно отлаживать ваше приложение.
Walter Kuppens рассказал о нескольких способах отладки. Надеемся, они окажутся полезными в ваших поисках ошибок.
👉 https://www.thisdot.co/blog/debugging-strategies-for-angular-applications
👍11
✨ Dependency Injection в Angular
Внедрение зависимостей — это паттерн проектирования, в котором мы запрашиваем зависимости у внешних ресурсов, а не создаем их. Это уникальная особенность Angular, которая помогает разработчикам избежать ненужных хлопот в их коде.
В этой небольшой статье Chameera Dulanga рассказал о особенностях DI в Angular.
👉 https://medium.com/p/181009608a91
Внедрение зависимостей — это паттерн проектирования, в котором мы запрашиваем зависимости у внешних ресурсов, а не создаем их. Это уникальная особенность Angular, которая помогает разработчикам избежать ненужных хлопот в их коде.
В этой небольшой статье Chameera Dulanga рассказал о особенностях DI в Angular.
👉 https://medium.com/p/181009608a91
👍14
✨ Шпаргалка по уязвимостям
Обеспечение безопасности приложений — непростое занятие. Приложения состоят из логики на стороне сервера и клиента, хранения данных, API и т.д. Учитывая все компоненты, которые необходимо защитить, создание безопасного приложения может показаться сложной задачей.
К счастью, большинство уязвимостей имеют одни и те же корни. Изучив причины их возникновения и способы их обнаружения, можно научиться защищать свои приложения.
👉 https://medium.com/p/a3b36f22a0fd
Обеспечение безопасности приложений — непростое занятие. Приложения состоят из логики на стороне сервера и клиента, хранения данных, API и т.д. Учитывая все компоненты, которые необходимо защитить, создание безопасного приложения может показаться сложной задачей.
К счастью, большинство уязвимостей имеют одни и те же корни. Изучив причины их возникновения и способы их обнаружения, можно научиться защищать свои приложения.
👉 https://medium.com/p/a3b36f22a0fd
🔥10👍3
✨ Реализуем скелетоны
Скелетоны — это элементы-заполнители, которые отображаются перед загрузкой содержимого веб-страницы. Скелетоны передают визуальное впечатление о функции, что дает им преимущество перед спиннерами.
Netanel Basal поделился минимальной реализацией скелетонов с помощью структурных директив.
👉 https://medium.com/p/7490ffdecc1b
Скелетоны — это элементы-заполнители, которые отображаются перед загрузкой содержимого веб-страницы. Скелетоны передают визуальное впечатление о функции, что дает им преимущество перед спиннерами.
Netanel Basal поделился минимальной реализацией скелетонов с помощью структурных директив.
👉 https://medium.com/p/7490ffdecc1b
👍8🔥2
✨ Делаем интернационализацию
Обычно все переводы загружаются сразу, но неизвестно будет ли пользователь пользоваться всеми доступными функциями. Так зачем же загружать переводы с самого начала для модулей, которые еще не загружены?
В этой статье вы узнаете, как адаптировать ваше приложение к нескольким языкам модульным способом, на основе библиотеки ngx/translate.
👉 https://medium.com/p/d8c13a67117b
Обычно все переводы загружаются сразу, но неизвестно будет ли пользователь пользоваться всеми доступными функциями. Так зачем же загружать переводы с самого начала для модулей, которые еще не загружены?
В этой статье вы узнаете, как адаптировать ваше приложение к нескольким языкам модульным способом, на основе библиотеки ngx/translate.
👉 https://medium.com/p/d8c13a67117b
👍8🔥1
🔥 Proposal типов в JavaScript
Команда TypeScript предложила добавить в JavaScript синтаксис типов, который движки будут полностью игнорировать, но который могут использовать такие инструменты, как TypeScript, Flow и другие. Это позволит сохранить проверку типов и при этом устранить необходимость в шаге сборки.
Команда считает, что в этом proposal есть большой потенциал, и в этом месяце они выносят его на рассмотрение TC39.
👉 https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/
Команда TypeScript предложила добавить в JavaScript синтаксис типов, который движки будут полностью игнорировать, но который могут использовать такие инструменты, как TypeScript, Flow и другие. Это позволит сохранить проверку типов и при этом устранить необходимость в шаге сборки.
Команда считает, что в этом proposal есть большой потенциал, и в этом месяце они выносят его на рассмотрение TC39.
👉 https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/
🔥15👍9
🔥 Будущие диагностики в Angular
Команда Angular представила список идей для диагностик. Вы можете проголосовать за понравившиеся и если у вас есть идея для расширенной диагностики, которой нет списке, можно подать запрос на ее разработку.
Возможно, в долгосрочной перспективе будет реализована поддержка сторонних диагностик, авторами которых является сообщество.
👉 https://medium.com/p/53e2fa19ece9
Команда Angular представила список идей для диагностик. Вы можете проголосовать за понравившиеся и если у вас есть идея для расширенной диагностики, которой нет списке, можно подать запрос на ее разработку.
Возможно, в долгосрочной перспективе будет реализована поддержка сторонних диагностик, авторами которых является сообщество.
👉 https://medium.com/p/53e2fa19ece9
🔥7👍4
✨ Оптимизируем приложения Angular
Пришло время проверки производительности ваших приложений, прежде чем они замедлятся.
В статье приведены способы, помогающие определить узкие места компонентов, а затем оптимизировать их и сделать ваши приложения быстрыми.
👉 https://medium.com/p/1e0f70008098
Пришло время проверки производительности ваших приложений, прежде чем они замедлятся.
В статье приведены способы, помогающие определить узкие места компонентов, а затем оптимизировать их и сделать ваши приложения быстрыми.
👉 https://medium.com/p/1e0f70008098
👍15👎3
✨ Решаем головоломки на TypeScript
Вы любите головоломки? В большинстве случаев достаточно базовых возможностей TypeScript, но иногда приходится описывать нестандартные типы и тогда приходится решать головоломки. К счастью, в TS есть все необходимые инструменты для этого.
В статье показаны несколько интересных приемов, для тех кто не любит использовать any.
👉 https://habr.com/ru/post/655705/
Вы любите головоломки? В большинстве случаев достаточно базовых возможностей TypeScript, но иногда приходится описывать нестандартные типы и тогда приходится решать головоломки. К счастью, в TS есть все необходимые инструменты для этого.
В статье показаны несколько интересных приемов, для тех кто не любит использовать any.
👉 https://habr.com/ru/post/655705/
👍7
✨ Создаем плавную прокрутку в Angular
Представим, что у нас есть панель навигации для разделов страницы и нам надо реализовать прокрутку к нужному разделу. Стандартным решением было бы использование якорей, но можно применить директивы.
Давайте посмотрим, как мы можем реализовать эту функциональность с их помощью.
👉 https://medium.com/p/a657e0ea9699
Представим, что у нас есть панель навигации для разделов страницы и нам надо реализовать прокрутку к нужному разделу. Стандартным решением было бы использование якорей, но можно применить директивы.
Давайте посмотрим, как мы можем реализовать эту функциональность с их помощью.
👉 https://medium.com/p/a657e0ea9699
👍10🔥2
✨ SSR на Angular с помощью Nx
Nx — это умная, быстрая и расширяемая система сборки, которая разработана в Nrwl на основе опыта работы в Google.
В этой статье мы добавим SSR в приложение Angular в рабочем пространстве Nx, используя Angular Universal, который обеспечит рендеринг приложения на сервере.
👉 https://medium.com/p/14e2414ca532
Nx — это умная, быстрая и расширяемая система сборки, которая разработана в Nrwl на основе опыта работы в Google.
В этой статье мы добавим SSR в приложение Angular в рабочем пространстве Nx, используя Angular Universal, который обеспечит рендеринг приложения на сервере.
👉 https://medium.com/p/14e2414ca532
🔥9👍1🤯1💩1
✨ Делаем компоненты общего назначения
Вы наверное замечали, что со временем требования к компонентам растут, и в результате их сложность увеличивается, а сопровождаемость снижается. Мы мечтаем о многократном использовании, но на деле разрабатываем компоненты для конкретного случая, и в результате они не могут быть использованы повторно.
Ryan Hoffnan рассказал, как мы можем создавать универсальные компоненты, которые легко читать и поддерживать.
👉 https://medium.com/p/33cecd7a7139
Вы наверное замечали, что со временем требования к компонентам растут, и в результате их сложность увеличивается, а сопровождаемость снижается. Мы мечтаем о многократном использовании, но на деле разрабатываем компоненты для конкретного случая, и в результате они не могут быть использованы повторно.
Ryan Hoffnan рассказал, как мы можем создавать универсальные компоненты, которые легко читать и поддерживать.
👉 https://medium.com/p/33cecd7a7139
👍3👎3🔥1
✨ Тестируем с помощью Spectator
Spectator — это мощный инструмент для упрощения тестов Angular. Он поможет вам избавиться от всей грязной работы, оставив вам читабельные, изящные и оптимизированные модульные тесты.
В этом посте показано, как использовать Spectator для тестирования приложений Angular. Надеемся, это поможет вам начать использовать тесты в ваших проектах.
👉 https://medium.com/p/a125c95cf24b
Spectator — это мощный инструмент для упрощения тестов Angular. Он поможет вам избавиться от всей грязной работы, оставив вам читабельные, изящные и оптимизированные модульные тесты.
В этом посте показано, как использовать Spectator для тестирования приложений Angular. Надеемся, это поможет вам начать использовать тесты в ваших проектах.
👉 https://medium.com/p/a125c95cf24b
🔥9👍2💩1
✨ Собираем Angular самостоятельно
Обычно для создания проектов Angular применяется angular-cli, который используется для инициализации, разработки и построения приложений из командной строки.
Однако, что если мы не хотим использовать angular-cli, а хотим сами создать структуру папок, подключить нужные библиотеки и собрать проект?
👉 https://habr.com/ru/post/656529/
Обычно для создания проектов Angular применяется angular-cli, который используется для инициализации, разработки и построения приложений из командной строки.
Однако, что если мы не хотим использовать angular-cli, а хотим сами создать структуру папок, подключить нужные библиотеки и собрать проект?
👉 https://habr.com/ru/post/656529/
👍11🔥3😱1
✨ Вызываем глобальные функции в Angular
В большинстве приложений мы сталкиваемся с функциональностью, которую хотим запустить глобально. В этот момент мы часто задумываемся о том, откуда ее вызывать.
Netanel Basal рассказал, как не позволить глобальным функциям загромоздить ваши приложения.
👉 https://medium.com/p/d013faa71a
В большинстве приложений мы сталкиваемся с функциональностью, которую хотим запустить глобально. В этот момент мы часто задумываемся о том, откуда ее вызывать.
Netanel Basal рассказал, как не позволить глобальным функциям загромоздить ваши приложения.
👉 https://medium.com/p/d013faa71a
👍6🤔4🔥3❤1
✨ Разбираем стилизацию компонентов в Angular
В Angular стили компонентов могут быть инкапсулированы. Существует три различных стратегии инкапсуляции: None, Emulated и ShadowDom. Две последние позволяют нам писать масштабируемые стили, которые не просачиваются и не влияют на остальную часть нашего приложения.
Но в чем разница между ними? Давайте узнаем!
👉 https://medium.com/p/9b2c81546b85
В Angular стили компонентов могут быть инкапсулированы. Существует три различных стратегии инкапсуляции: None, Emulated и ShadowDom. Две последние позволяют нам писать масштабируемые стили, которые не просачиваются и не влияют на остальную часть нашего приложения.
Но в чем разница между ними? Давайте узнаем!
👉 https://medium.com/p/9b2c81546b85
👍8🔥5🤔1
✨ Опыт миграции на Nx
Команда Santosh Yadav закончила переход на Nx с Angular CLI в прошлом году, и это была одна из самых больших реструктуризаций, которую они провели.
В этом посте рассказано о том, почему они решили это сделать и что в итоге получилось.
👉 https://dev.to/this-is-angular/why-and-how-we-migrated-to-nx-from-angular-cli-5a61
Команда Santosh Yadav закончила переход на Nx с Angular CLI в прошлом году, и это была одна из самых больших реструктуризаций, которую они провели.
В этом посте рассказано о том, почему они решили это сделать и что в итоге получилось.
👉 https://dev.to/this-is-angular/why-and-how-we-migrated-to-nx-from-angular-cli-5a61
👍6
✨ Делаем интернет магазин
Редко можно найти описание процесса создания Angular приложения, начиная с определения предметной области и заканчивая тестированием.
К счастью, Александр Серенко недавно опубликовал цикл статей о создании интернет магазина. В котором реализованы: список товаров, корзина, чат, локализация, SEO, SSR и даже UI Kit.
👉 https://medium.com/p/9bc18c25fe37
Редко можно найти описание процесса создания Angular приложения, начиная с определения предметной области и заканчивая тестированием.
К счастью, Александр Серенко недавно опубликовал цикл статей о создании интернет магазина. В котором реализованы: список товаров, корзина, чат, локализация, SEO, SSR и даже UI Kit.
👉 https://medium.com/p/9bc18c25fe37
👍21🔥6
✨ Создаем свою библиотеку
Если вы хотите повторно использовать код в нескольких проектах, помимо создания многократно используемых компонентов, которые придется копировать и вставлять каждый раз, можно создавать свои собственные библиотеки.
Эта статья дает представление о том, как реализовать библиотеку Angular, чтобы множество приложений могли воспользоваться ее функционалом.
👉 https://medium.com/p/3965beee6dc6
Если вы хотите повторно использовать код в нескольких проектах, помимо создания многократно используемых компонентов, которые придется копировать и вставлять каждый раз, можно создавать свои собственные библиотеки.
Эта статья дает представление о том, как реализовать библиотеку Angular, чтобы множество приложений могли воспользоваться ее функционалом.
👉 https://medium.com/p/3965beee6dc6
👍15❤2🔥2
✨ Делаем слайд-шоу
В наши дни есть множество программ для создания презентаций, но если в вас живет тяга к экспериментам, у вас есть все необходимые инструменты, чтобы реализовать собственный аналог.
В этой статье мы напишем приложение для создания слайд-шоу используя Angular, Swiper и немного CSS.
👉 https://www.thisdot.co/blog/how-to-build-a-slideshow-app-using-swiper-and-angular
В наши дни есть множество программ для создания презентаций, но если в вас живет тяга к экспериментам, у вас есть все необходимые инструменты, чтобы реализовать собственный аналог.
В этой статье мы напишем приложение для создания слайд-шоу используя Angular, Swiper и немного CSS.
👉 https://www.thisdot.co/blog/how-to-build-a-slideshow-app-using-swiper-and-angular
👍7