✨ Обрабатываем деревья
Если поискать, то можно найти древовидные структуры повсюду — от природы, городов и их окрестностей до вашего семейного древа. Неудивительно, что деревья так же часто встречаются в структурах данных.
В этой серии уроков, мы с Робом Гравель будем преобразовывать сложное дерево в более простое, а затем обратно.
👉 https://www.htmlgoodies.com/javascript/recursive-tree-node-angular/
Если поискать, то можно найти древовидные структуры повсюду — от природы, городов и их окрестностей до вашего семейного древа. Неудивительно, что деревья так же часто встречаются в структурах данных.
В этой серии уроков, мы с Робом Гравель будем преобразовывать сложное дерево в более простое, а затем обратно.
👉 https://www.htmlgoodies.com/javascript/recursive-tree-node-angular/
👍8
🔥 Новости о Standalone Components
Недавно команда Angular опубликовала RFC, с амбициозной целью: сократить количество шаблонов и сделать Angular проще в использовании и изучении.
На этой неделе выпустили второй RFC, в котором обсуждается, как Standalone Components будут интегрированы в остальную часть Angular.
Alex Rickabaugh рассказал об обновлении проекта, о некоторых извлеченных уроках, и о ближайшем будущем.
👉 https://medium.com/p/ea53b4d55214
Недавно команда Angular опубликовала RFC, с амбициозной целью: сократить количество шаблонов и сделать Angular проще в использовании и изучении.
На этой неделе выпустили второй RFC, в котором обсуждается, как Standalone Components будут интегрированы в остальную часть Angular.
Alex Rickabaugh рассказал об обновлении проекта, о некоторых извлеченных уроках, и о ближайшем будущем.
👉 https://medium.com/p/ea53b4d55214
🔥12👍2
🦄 Осваиваем RxJS
У RxJS отличная документация, в которой немного теории и его легко понять с помощью marble diagrams, а еще лучше изучать его на практике.
Эта статья посвящена советам и подсказкам, которые помогут вам в разработке на Angular.
👉 https://medium.com/p/afd9fbdc4d31
У RxJS отличная документация, в которой немного теории и его легко понять с помощью marble diagrams, а еще лучше изучать его на практике.
Эта статья посвящена советам и подсказкам, которые помогут вам в разработке на Angular.
👉 https://medium.com/p/afd9fbdc4d31
👍14🔥7
✨ Стилизуем компоненты
Существуют различные подходы к стилизации компонентов. Angular вдохновлен основными концепциями веб-компонентов. Поэтому он использует идеи из Shadow DOM.
В работе часто требуется применять различные стили к компонентам в зависимости от условий. Как мы можем сделать это, не переписывая стили?
👉 https://medium.com/p/3eb9794bf86f
Существуют различные подходы к стилизации компонентов. Angular вдохновлен основными концепциями веб-компонентов. Поэтому он использует идеи из Shadow DOM.
В работе часто требуется применять различные стили к компонентам в зависимости от условий. Как мы можем сделать это, не переписывая стили?
👉 https://medium.com/p/3eb9794bf86f
👍9🔥3
✨ CSS-in-JS в Angular
CSS-in-JS пользуется популярностью в React сообществе, большинство решений изначально разрабатывались для него. В Angular и Vue он не популярен, но существуют и framework agnostic библиотеки.
Всеволод Золотов скрестил CSS-in-JS с Angular, на примере приложения для учета времени, и проверил насколько актуален этот подход.
👉 https://habr.com/ru/company/bimeister/blog/659273/
CSS-in-JS пользуется популярностью в React сообществе, большинство решений изначально разрабатывались для него. В Angular и Vue он не популярен, но существуют и framework agnostic библиотеки.
Всеволод Золотов скрестил CSS-in-JS с Angular, на примере приложения для учета времени, и проверил насколько актуален этот подход.
👉 https://habr.com/ru/company/bimeister/blog/659273/
👍13👎3🔥3
✨ Результаты опроса разработчиков
В начале года команда Angular провела ежегодный опрос разработчиков, получив почти 25 тысяч ответов. На их основе разрабатывается документация, расставляются приоритеты и составляется план развития.
Minko Gechev рассказал о результатах опроса и как они соотносятся с дорожной картой Angular.
👉 https://medium.com/p/38e653cbb36b
В начале года команда Angular провела ежегодный опрос разработчиков, получив почти 25 тысяч ответов. На их основе разрабатывается документация, расставляются приоритеты и составляется план развития.
Minko Gechev рассказал о результатах опроса и как они соотносятся с дорожной картой Angular.
👉 https://medium.com/p/38e653cbb36b
👍12
🔥 Пишем компилятор
Хотели ли вы когда-нибудь написать свой собственный компилятор? Теперь у вас появился отличный повод попробовать, на примере программы на TypeScript, которая компилирует переданную строку вымышленного кода в WebAssembly и выполняет ее отрисовку в canvas.
Надеемся вам понравится статья и вы узнаете немного больше о том, как работают wasm и компиляторы.
👉 https://habr.com/ru/company/timeweb/blog/660607/
Хотели ли вы когда-нибудь написать свой собственный компилятор? Теперь у вас появился отличный повод попробовать, на примере программы на TypeScript, которая компилирует переданную строку вымышленного кода в WebAssembly и выполняет ее отрисовку в canvas.
Надеемся вам понравится статья и вы узнаете немного больше о том, как работают wasm и компиляторы.
👉 https://habr.com/ru/company/timeweb/blog/660607/
👍8🔥7
📡 Улучшаем SEO
Если зайти в чат для поиска работы и присмотреться к вакансиям, то почти не найти в них Scully. Возможно из-за ассоциаций с секретными материалами? Давайте приоткроем завесу тайны.
Scully — это генератор статических сайтов для Angular, который использует все его возможности, но при этом дает преимущества в SEO, а это может оказать огромное влияние на компанию, увеличив количество продаж.
В этой статье мы узнаем, как улучшить SEO в Angular приложениях с помощью Scully, а также развернем статический сайт на Firebase.
👉 https://indepth.dev/tutorials/angular/angular-applications-seo-improvement-with-social-media-customization
Если зайти в чат для поиска работы и присмотреться к вакансиям, то почти не найти в них Scully. Возможно из-за ассоциаций с секретными материалами? Давайте приоткроем завесу тайны.
Scully — это генератор статических сайтов для Angular, который использует все его возможности, но при этом дает преимущества в SEO, а это может оказать огромное влияние на компанию, увеличив количество продаж.
В этой статье мы узнаем, как улучшить SEO в Angular приложениях с помощью Scully, а также развернем статический сайт на Firebase.
👉 https://indepth.dev/tutorials/angular/angular-applications-seo-improvement-with-social-media-customization
👍7🔥4
🚀 Запускаем ISR
Вы наверняка слышали о SSR — рендеринге на стороне сервера, SSG — генерации статических сайтов и CSR — рендеринге на стороне клиента. Что тогда ISR и какую проблему он решает?
ISR — это как SSG, но во время выполнения. С помощью ISR при первом запросе создается страница на сервере, сохраняется в кэше и отдается пользователям, а кэш обновляется через время или по требованию.
👉 https://medium.com/p/42b0a8440e53
Вы наверняка слышали о SSR — рендеринге на стороне сервера, SSG — генерации статических сайтов и CSR — рендеринге на стороне клиента. Что тогда ISR и какую проблему он решает?
ISR — это как SSG, но во время выполнения. С помощью ISR при первом запросе создается страница на сервере, сохраняется в кэше и отдается пользователям, а кэш обновляется через время или по требованию.
👉 https://medium.com/p/42b0a8440e53
🔥8👍3🤔1
✨ Ищем применение materialize и dematerialize операторам
Если вы давно знакомы с RxJS, то наверняка встречали операторы materialize и dematerialize. А как насчет класса Notification? Они встречаются довольно редко, но могут быть вам полезны.
В этой статье Анастасия Анисимова рассказала о этих операторах и описала несколько способов применения, которые вам могут пригодиться.
👉 https://habr.com/ru/company/skyeng/blog/661709/
Если вы давно знакомы с RxJS, то наверняка встречали операторы materialize и dematerialize. А как насчет класса Notification? Они встречаются довольно редко, но могут быть вам полезны.
В этой статье Анастасия Анисимова рассказала о этих операторах и описала несколько способов применения, которые вам могут пригодиться.
👉 https://habr.com/ru/company/skyeng/blog/661709/
👍13❤2🔥2
✨ Настраиваем новый проект
Линтеры и git hooks необходимы как для личных, так и для корпоративных проектов. Они способны существенно облегчить разработку, предотвращая типичные ошибки.
Цель этой статьи — упростить создание проекта и начало работы над ним, не тратя время на настройку.
👉 https://medium.com/p/6581ecd66fbb
Линтеры и git hooks необходимы как для личных, так и для корпоративных проектов. Они способны существенно облегчить разработку, предотвращая типичные ошибки.
Цель этой статьи — упростить создание проекта и начало работы над ним, не тратя время на настройку.
👉 https://medium.com/p/6581ecd66fbb
👍19👎2
✨ Сценарии использования RxJS
Существует множество статей и курсов, которые помогут изучить RxJS. Но знания функциональности недостаточно, чтобы по-настоящему использовать возможности реактивного программирования необходимо осознавать сценарии, в которых могут применяться инструменты из набора RxJS.
В этой статье рассмотрены возможности RxJS, которые сделают ваш код более чистым, удобным и читаемым.
👉 https://dev.to/this-is-angular/understanding-rxjs-use-cases-part-i-2mfb
Существует множество статей и курсов, которые помогут изучить RxJS. Но знания функциональности недостаточно, чтобы по-настоящему использовать возможности реактивного программирования необходимо осознавать сценарии, в которых могут применяться инструменты из набора RxJS.
В этой статье рассмотрены возможности RxJS, которые сделают ваш код более чистым, удобным и читаемым.
👉 https://dev.to/this-is-angular/understanding-rxjs-use-cases-part-i-2mfb
👍17🔥5🤔2
✨ Создаем многократно используемые компоненты
Одна из особенностей Angular — это компонентная природа фреймворка. Компоненты — это блоки для построения масштабируемых приложений. Однако иногда одних компонентов недостаточно.
В этой статье показаны два способа создания многократно используемых компонентов. Оба решения являются масштабируемыми и исключают дублирование кода.
👉 https://medium.com/p/b7fcba2f5f38
Одна из особенностей Angular — это компонентная природа фреймворка. Компоненты — это блоки для построения масштабируемых приложений. Однако иногда одних компонентов недостаточно.
В этой статье показаны два способа создания многократно используемых компонентов. Оба решения являются масштабируемыми и исключают дублирование кода.
👉 https://medium.com/p/b7fcba2f5f38
👍8🔥3
✨ Плюсы и минусы TypeScript
Выразительность TypeScript позволяет делать умопомрачительные вещи. Вы можете не просто сказать, что функция вернет какое-то значение, а описать, что конкретно она будет возвращать даже для частных случаев.
С другой стороны, высокая выразительность TypeScript подводит нас к очень важной идее: типовая система — это язык программирования. И к его использованию применяются соответствующие требования, как к обычному коду.
👉 https://habr.com/ru/company/oleg-bunin/blog/660683/
Выразительность TypeScript позволяет делать умопомрачительные вещи. Вы можете не просто сказать, что функция вернет какое-то значение, а описать, что конкретно она будет возвращать даже для частных случаев.
С другой стороны, высокая выразительность TypeScript подводит нас к очень важной идее: типовая система — это язык программирования. И к его использованию применяются соответствующие требования, как к обычному коду.
👉 https://habr.com/ru/company/oleg-bunin/blog/660683/
👍7
✨ Реализуем прогресс бар
Когда мы сталкиваемся с новой задачей, важно рассмотреть все варианты и решить уместно ли добавлять зависимость в проект? Возможно, функционал легко реализуем и следует сделать его самостоятельно.
Создать собственный круглый прогресс бар не так уж и сложно, всего лишь немного CSS и SVG.
👉 https://medium.com/p/ae6299e86bc7
Когда мы сталкиваемся с новой задачей, важно рассмотреть все варианты и решить уместно ли добавлять зависимость в проект? Возможно, функционал легко реализуем и следует сделать его самостоятельно.
Создать собственный круглый прогресс бар не так уж и сложно, всего лишь немного CSS и SVG.
👉 https://medium.com/p/ae6299e86bc7
👍12
✨ HolyJS — конференция для JavaScript-разработчиков от JUG Ru Group
Online-часть: 8–10 июня.
Offline-день: 23 июня.
В online вас ждут выступления, посвященные трендам и новым технологиям, обмен опытом и общение в чатах.
На offline-дне в Санкт-Петербурге можно вживую послушать спикеров, лично познакомиться с коллегами и потусоваться у стендов партнеров.
В программе:
– Каким бывает легаси во фронтенде, как с ним справляться и не допускать его появления.
– Что такое proposal Wasm GC, почему его так долго делают и какой путь прошли движки за 2 года экспериментов.
– Как построить дизайн-систему для продукта с 20-миллионной аудиторией, огромной кодовой базой и массой поверхностей.
– Что такое сложность для человеческого мозга и как эти знания помогают писать более понятный код.
Для подписчиков канала организаторы сделали промокод, который поможет вам купить персональный билет со скидкой:
Online-часть: 8–10 июня.
Offline-день: 23 июня.
В online вас ждут выступления, посвященные трендам и новым технологиям, обмен опытом и общение в чатах.
На offline-дне в Санкт-Петербурге можно вживую послушать спикеров, лично познакомиться с коллегами и потусоваться у стендов партнеров.
В программе:
– Каким бывает легаси во фронтенде, как с ним справляться и не допускать его появления.
– Что такое proposal Wasm GC, почему его так долго делают и какой путь прошли движки за 2 года экспериментов.
– Как построить дизайн-систему для продукта с 20-миллионной аудиторией, огромной кодовой базой и массой поверхностей.
– Что такое сложность для человеческого мозга и как эти знания помогают писать более понятный код.
Для подписчиков канала организаторы сделали промокод, который поможет вам купить персональный билет со скидкой:
angularfox2022JRGpc
👉 Билеты, подробности и первая программа — на сайте.👍8👎6🔥2
✨ Angular Universal в e-commerce проектах
Про Angular Universal написано довольно много, но мало примеров настройки в больших e-commerce проектах, где есть свои нюансы.
Дмитрий Дружков рассказал, чем полезен Angular Universal в e-commerce проектах, как выбрать вид рендеринга и как выглядит первоначальная настройка.
👉 https://habr.com/ru/company/utkonos/blog/663518/
Про Angular Universal написано довольно много, но мало примеров настройки в больших e-commerce проектах, где есть свои нюансы.
Дмитрий Дружков рассказал, чем полезен Angular Universal в e-commerce проектах, как выбрать вид рендеринга и как выглядит первоначальная настройка.
👉 https://habr.com/ru/company/utkonos/blog/663518/
👍11🔥8
✨ Осваиваем NestJS
Nest — это фреймворк для создания эффективных, масштабируемых серверных приложений на Node.js. Он имеет полную поддержку TypeScript и сочетает в себе элементы ООП и функционального программирования.
Игорь Агапов опираясь на структуру и содержание официальной документации рассмотрел основы работы с Nest.
👉 https://habr.com/ru/company/timeweb/blog/663234/
Nest — это фреймворк для создания эффективных, масштабируемых серверных приложений на Node.js. Он имеет полную поддержку TypeScript и сочетает в себе элементы ООП и функционального программирования.
Игорь Агапов опираясь на структуру и содержание официальной документации рассмотрел основы работы с Nest.
👉 https://habr.com/ru/company/timeweb/blog/663234/
👍21🔥2
✨ Изучаем операторы в RxJS
Несмотря на знание о существовании и функциональности операторов в RxJS, иногда бывает трудно понять, как определенная проблема может быть решена с помощью конкретного оператора.
В этой статье рассмотрены примеры использования операторов, которые обычно выполняют рутинные задачи, такие как обработка ошибок и манипулирование данными.
👉 https://dev.to/this-is-learning/understanding-rxjs-use-cases-part-ii-51ll
Несмотря на знание о существовании и функциональности операторов в RxJS, иногда бывает трудно понять, как определенная проблема может быть решена с помощью конкретного оператора.
В этой статье рассмотрены примеры использования операторов, которые обычно выполняют рутинные задачи, такие как обработка ошибок и манипулирование данными.
👉 https://dev.to/this-is-learning/understanding-rxjs-use-cases-part-ii-51ll
👍14🔥5
✨ Разрабатываем пакетный менеджер
Вам когда-нибудь хотелось узнать, как под капотом работают пакетные менеджеры для установки зависимостей наподобие npm или yarn? Если хотелось, тогда эта статья для вас.
Игорь Агапов разработал простой пакетный менеджер на Node.js и TypeScript.
👉 https://habr.com/ru/company/timeweb/blog/662830/
Вам когда-нибудь хотелось узнать, как под капотом работают пакетные менеджеры для установки зависимостей наподобие npm или yarn? Если хотелось, тогда эта статья для вас.
Игорь Агапов разработал простой пакетный менеджер на Node.js и TypeScript.
👉 https://habr.com/ru/company/timeweb/blog/662830/
👍15
✨ Стилизуем проецируемый контент
ng-content — это важная концепция для создания многократно используемых и гибких компонентов. С помощью ng-content содержимое может быть вставлено в заранее определенный слот, и в некоторых случаях вам может потребоваться применить стили к нему.
В статье рассмотрена различные подходы к стилизации контента, а также их преимущества и недостатки.
👉 https://medium.com/p/731c0721902f
ng-content — это важная концепция для создания многократно используемых и гибких компонентов. С помощью ng-content содержимое может быть вставлено в заранее определенный слот, и в некоторых случаях вам может потребоваться применить стили к нему.
В статье рассмотрена различные подходы к стилизации контента, а также их преимущества и недостатки.
👉 https://medium.com/p/731c0721902f
👍22