🚀 Валидируем данные
Сложность валидации данных на клиенте зачастую заключается в тесном переплетении правил, которые проверяют данные, и особенностей пользовательского интерфейса.
Саша Беспоясов на примере формы «заявки на колонизацию Марса», показал подход, который делает валидацию проще.
👉 https://bespoyasov.ru/blog/declarative-rule-based-validation/
Сложность валидации данных на клиенте зачастую заключается в тесном переплетении правил, которые проверяют данные, и особенностей пользовательского интерфейса.
Саша Беспоясов на примере формы «заявки на колонизацию Марса», показал подход, который делает валидацию проще.
👉 https://bespoyasov.ru/blog/declarative-rule-based-validation/
🔥11👍3🤔3
✨ Знакомимся с Elf
Elf — это реактивный стейт менеджер, построенный на базе RxJS. Он использует кастомные RxJS операторы для запроса состояния и чистые функции для его обновления. Elf поощряет простоту и избавляет от необходимости создавать шаблонный код.
Netanel Basal рассказал о новом стейт менеджере, который стремится быть простым и модульным решением.
👉 https://netbasal.com/introducing-elf-a-reactive-store-with-magical-powers-for-js-apps-678d6cb0596f
Elf — это реактивный стейт менеджер, построенный на базе RxJS. Он использует кастомные RxJS операторы для запроса состояния и чистые функции для его обновления. Elf поощряет простоту и избавляет от необходимости создавать шаблонный код.
Netanel Basal рассказал о новом стейт менеджере, который стремится быть простым и модульным решением.
👉 https://netbasal.com/introducing-elf-a-reactive-store-with-magical-powers-for-js-apps-678d6cb0596f
🔥17👍4💩2
✨ Понимание RxJS в Angular
Одна из самых частых жалоб об Angular, на самом деле относится не к Angular, а скорее к RxJS. Многие говорят, что его слишком сложно изучать.
Sam Redmond написал краткое руководством, которое поможет вам понять, как Observables работают в экосистеме Angular. Как только вы поймете RxJS, вы сможете использовать его где угодно.
👉 https://sam-redmond.com/understanding-rxjs-with-angular-40eefeae5c02
Одна из самых частых жалоб об Angular, на самом деле относится не к Angular, а скорее к RxJS. Многие говорят, что его слишком сложно изучать.
Sam Redmond написал краткое руководством, которое поможет вам понять, как Observables работают в экосистеме Angular. Как только вы поймете RxJS, вы сможете использовать его где угодно.
👉 https://sam-redmond.com/understanding-rxjs-with-angular-40eefeae5c02
👍14🔥5👎2
✨ Перехватываем HTTP запросы
Перехватчики позволяют выполнять операции над запросами на пути к серверу и обратно, это делает их идеальным местом для добавления заголовков, кэширования и обработки ошибок.
В этой статье рассмотрены различные способы обработки неудачных HTTP запросов с помощью RxJS.
👉 https://dev.to/this-is-angular/angular-error-interceptor-12bg
Перехватчики позволяют выполнять операции над запросами на пути к серверу и обратно, это делает их идеальным местом для добавления заголовков, кэширования и обработки ошибок.
В этой статье рассмотрены различные способы обработки неудачных HTTP запросов с помощью RxJS.
👉 https://dev.to/this-is-angular/angular-error-interceptor-12bg
👍6❤1
✨ Разбираем верстку в Angular
Из-за отсутствия примеров в документации Angular Material, некоторые разработчики начинают изобретать собственные решения для создания сеток и лейаутов, хотя все это можно реализовать средствами Angular CDK.
Александр Серенко на примере макета с тремя вариантами отображения, рассмотрел нюансы верстки в Angular.
👉 https://medium.com/p/bd4f15ebbf54
Из-за отсутствия примеров в документации Angular Material, некоторые разработчики начинают изобретать собственные решения для создания сеток и лейаутов, хотя все это можно реализовать средствами Angular CDK.
Александр Серенко на примере макета с тремя вариантами отображения, рассмотрел нюансы верстки в Angular.
👉 https://medium.com/p/bd4f15ebbf54
👍14🔥5👏1
✨ Используем GraphQL с Angular
GraphQL с каждым днем становится все более востребованным. К счастью в экосистеме Angular есть Apollo Angular, который не требует сложной настройки. Вы можете сразу приступить к созданию приложения.
В этом посте Walter Kuppens показал, как легко можно подключиться к PokeAPI используя Apollo Angular.
👉 https://www.thisdot.co/blog/connecting-to-pokeapi-with-angular-and-apollo-client
GraphQL с каждым днем становится все более востребованным. К счастью в экосистеме Angular есть Apollo Angular, который не требует сложной настройки. Вы можете сразу приступить к созданию приложения.
В этом посте Walter Kuppens показал, как легко можно подключиться к PokeAPI используя Apollo Angular.
👉 https://www.thisdot.co/blog/connecting-to-pokeapi-with-angular-and-apollo-client
👍7🔥2
✨ Поднимаем свой уровень в Angular
Начать программировать на Angular легко, можно делать небольшие приложения всего за несколько дней обучения. Но чтобы освоить
его на хорошем уровне, нужно потратить намного больше времени.
Ivano Di Gese попытался обобщить лучшие практики, чтобы ускорить ваш прогресс в освоении Angular.
👉 https://medium.com/p/9c50dccb26a8
Начать программировать на Angular легко, можно делать небольшие приложения всего за несколько дней обучения. Но чтобы освоить
его на хорошем уровне, нужно потратить намного больше времени.
Ivano Di Gese попытался обобщить лучшие практики, чтобы ускорить ваш прогресс в освоении Angular.
👉 https://medium.com/p/9c50dccb26a8
👍9
✨ Создаем динамические компоненты
В Angular 13 упростили API для создания динамических компонентов, теперь не нужно беспокоиться о создании фабрики, инжектировать вспомогательные зависимости, также устарели классы ComponentFactory и ComponentFactoryResolver.
Анастасия Анисимова рассказала как выглядит новый процесс динамического добавления компонентов.
👉 https://habr.com/ru/company/skyeng/blog/652855/
В Angular 13 упростили API для создания динамических компонентов, теперь не нужно беспокоиться о создании фабрики, инжектировать вспомогательные зависимости, также устарели классы ComponentFactory и ComponentFactoryResolver.
Анастасия Анисимова рассказала как выглядит новый процесс динамического добавления компонентов.
👉 https://habr.com/ru/company/skyeng/blog/652855/
👍23❤4
✨ Меняем параметры функции на деструктуризацию
Функции в JavaScript могут быть разными, но в первую очередь это контракт. Когда мы определяем функцию, мы определяем контракт между вызывающей стороной и исполнителем.
JeB Barabanov рассказал, как контракты имеют тенденцию меняться со временем и как это может отразиться на вашем коде.
👉 https://medium.com/p/d320cf0932df
Функции в JavaScript могут быть разными, но в первую очередь это контракт. Когда мы определяем функцию, мы определяем контракт между вызывающей стороной и исполнителем.
JeB Barabanov рассказал, как контракты имеют тенденцию меняться со временем и как это может отразиться на вашем коде.
👉 https://medium.com/p/d320cf0932df
👍5
✨ Осваиваем CI/CD
Деплой вручную — рутинная задача, которая отнимает много времени и чревата ошибками. Сегодня эта практика является антипаттерном. К счастью, современные инструменты позволяют выпускать новые версии вашего приложения легко и просто.
Bobby Galli показал, как создать дружественный CI/CD процесс, опубликовать библиотеку в npm и развернуть приложение на GitHub Pages.
👉 https://medium.com/p/be9a1485d22b
Деплой вручную — рутинная задача, которая отнимает много времени и чревата ошибками. Сегодня эта практика является антипаттерном. К счастью, современные инструменты позволяют выпускать новые версии вашего приложения легко и просто.
Bobby Galli показал, как создать дружественный CI/CD процесс, опубликовать библиотеку в npm и развернуть приложение на GitHub Pages.
👉 https://medium.com/p/be9a1485d22b
👍8🔥4
✨ Создаем веб-компоненты с помощью Lit
Веб-компоненты позволяют создавать многократно используемые элементы, которые могут использоваться с любым фреймворком или вообще без него.
Однако создавать их с нуля проблематично, но мы можем делать быстрые и легкие веб-компоненты с помощью Lit.
Netanel Basal показал, как использовать веб-компонент совместно с популярными фреймворками.
👉 https://medium.com/p/3c640a8ba46
Веб-компоненты позволяют создавать многократно используемые элементы, которые могут использоваться с любым фреймворком или вообще без него.
Однако создавать их с нуля проблематично, но мы можем делать быстрые и легкие веб-компоненты с помощью Lit.
Netanel Basal показал, как использовать веб-компонент совместно с популярными фреймворками.
👉 https://medium.com/p/3c640a8ba46
🔥7👍3
✨ Используем RxJS в Lit
Lit создан на основе стандартов Web Components и добавляет реактивность, декларативные шаблоны и несколько продуманных функций, сокращающих количество шаблонов и облегчающих работу.
В этой статье мы узнаем, как использовать RxJS с Lit и как они хорошо работают вместе.
👉 https://medium.com/p/ace3d13f3c24
Lit создан на основе стандартов Web Components и добавляет реактивность, декларативные шаблоны и несколько продуманных функций, сокращающих количество шаблонов и облегчающих работу.
В этой статье мы узнаем, как использовать RxJS с Lit и как они хорошо работают вместе.
👉 https://medium.com/p/ace3d13f3c24
👍8
✨ Отлаживаем 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