diff --git a/docs/src/content/docs/ru/challenges/angular/1-projection.md b/docs/src/content/docs/ru/challenges/angular/1-projection.md new file mode 100644 index 000000000..a08f04671 --- /dev/null +++ b/docs/src/content/docs/ru/challenges/angular/1-projection.md @@ -0,0 +1,43 @@ +--- +title: 🟒 ΠŸΡ€ΠΎΠ΅ΠΊΡ†ΠΈΡ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° +description: Challenge 1 Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ†ΠΈΠΈ элСмСнтов DOM Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ +author: thomas-laforge +challengeNumber: 1 +command: angular-projection +blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5 +videoLink: + link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq + alt: Projection video by Arthur Lannelucq + flag: FR +sidebar: + order: 1 +--- + +## Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ + +ΠŸΡ€ΠΎΠ΅ΠΊΡ†ΠΈΡ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Angular - это мощная Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° для создания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² с Π³ΠΈΠ±ΠΊΠΎ настраиваСмым внСшним Π²ΠΈΠ΄ΠΎΠΌ. ПониманиС ΠΈ использованиС ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ ng-content ΠΈ ngTemplateOutlet ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ для ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования. + +[Π—Π΄Π΅ΡΡŒ](https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments) Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ всС ΠΎ ng-content, начиная с простых ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ слоТных. + +Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ngTemplateOutlett, вмСстС с Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ [Ρ‚ΡƒΡ‚](https://angular.io/api/common/NgTemplateOutlet). + +ИмСя эти Π΄Π²Π° инструмСнта Π² своСм распоряТСнии, Π²Ρ‹ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ испытаниС. + +## ПояснСниС + +Π’Ρ‹ Π½Π°Ρ‡Π½Π΅Ρ‚Π΅ с ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π΅Π³ΠΎ прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ панСль с ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ учитСля ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ студСнта. ЦСль состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ Π³ΠΎΡ€ΠΎΠ΄Π°. + +Π₯отя ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π΅Π³ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π΅ устройство Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ‚ ΠΈΠ΄Π΅Π°Π»Π°. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ, Π²Π°ΠΌ придСтся ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ `card.component.ts`. Π’ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… прилоТСниях. ЦСль этого упраТнСния ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ `CardComponent`, внСшний Π²ΠΈΠ΄ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π²Ρ‹ создадитС этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ `CityCardComponent` Π±Π΅Π· ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ `CardComponent`. + +## ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ + +- Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ провСсти Ρ€Π΅Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΈΠ½Π³ `CardComponent` ΠΈ `ListItemComponent`. +- Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° `NgFor` Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π° ΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ `CardComponent`, нСсмотря Π½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ пСрСнСсти Π΅Ρ‘ Π² `ParentCardComponent`,ΠΊΠ°ΠΊ это сдСлано Π² `TeacherCardComponent`. +- `CardComponent` Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ `NgIf` ΠΈΠ»ΠΈ `NgSwitch`. +- CSS: ΠΈΠ·Π±Π΅Π³Π°ΠΉΡ‚Π΅ использования `::ng-deep`. Π˜Ρ‰ΠΈΡ‚Π΅ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ способы стилизации с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. + +## Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ + +- ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ синтаксис для Ρ†ΠΈΠΊΠ»ΠΎΠ² ΠΈ условий (докумСнтация [Ρ‚ΡƒΡ‚](https://angular.dev/guide/templates/control-flow)). +- Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ signal API для управлСния состояниСм ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² (докумСнтация [Ρ‚ΡƒΡ‚](https://angular.dev/guide/signals)). +- Для ссылки Π½Π° шаблон ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹ вмСсто магичСских строк ([What is wrong with magic strings?](https://softwareengineering.stackexchange.com/a/365344)). diff --git a/docs/src/content/docs/ru/challenges/angular/21-achor-scrolling.md b/docs/src/content/docs/ru/challenges/angular/21-achor-scrolling.md new file mode 100644 index 000000000..716f18b8b --- /dev/null +++ b/docs/src/content/docs/ru/challenges/angular/21-achor-scrolling.md @@ -0,0 +1,18 @@ +--- +title: πŸŸ’ΠΠ°Π²ΠΈΠ³Π°Ρ†ΠΈΡ ΠΏΠΎ ΡΠΊΠΎΡ€ΡŽ +description: Π˜ΡΠΏΡ‹Ρ‚Π°Π½ΠΈΠ΅ 21 ΠΏΡ€ΠΎ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π½Π° страницС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ якоря +author: thomas-laforge +challengeNumber: 21 +command: angular-anchor-scrolling +sidebar: + order: 4 +--- + +## Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ + +Π’Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ с прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π±Π°Π·ΠΎΠ²ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ с использованиСм якорСй Π² `HomeComponent`. Однако, использованиС `href` ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· создаСт Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΈ обновляСт страницу. + +## ПояснСниС + +- Π’Π°ΡˆΠ° Π·Π°Π΄Π°Ρ‡Π° - Ρ€Π΅Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΈΠ½Π³ этого прилоТСния для использования встроСнного инструмСнта Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, для Π±ΠΎΠ»Π΅Π΅ эффСктивной Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π² Ρ€Π°ΠΌΠΊΠ°Ρ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Angular. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ router, Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡΡ‚Π°Ρ‚ΡŒΡΡ Π² шаблонС ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ `RouterLink` Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρƒ. +- Для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΠ»Π°Π²Π½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ. diff --git a/docs/src/content/docs/ru/challenges/angular/4-context-outlet-typed.md b/docs/src/content/docs/ru/challenges/angular/4-context-outlet-typed.md new file mode 100644 index 000000000..053897d78 --- /dev/null +++ b/docs/src/content/docs/ru/challenges/angular/4-context-outlet-typed.md @@ -0,0 +1,40 @@ +--- +title: πŸ”΄ Випизация ContextOutlet +description: Π˜ΡΠΏΡ‹Ρ‚Π°Π½ΠΈΠ΅ 4 ΠΏΡ€ΠΎ ΡΡ‚Ρ€ΠΎΠ³ΡƒΡŽ Ρ‚ΠΈΠΏΠΈΠ·Π°Ρ†ΠΈΡŽ ngContextOutlet Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹ +author: thomas-laforge +challengeNumber: 4 +command: angular-context-outlet-type +blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6 +sidebar: + order: 201 +--- + +## Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ + +Π’ Angular Π΅ΡΡ‚ΡŒ статичСская функция [`ngTemplateContextGuard`](https://angular.io/guide/structural-directives#typing-the-directives-context) для строгой Ρ‚ΠΈΠΏΠΈΠ·Π°Ρ†ΠΈΠΈ структурных Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ². + +Однако, контСкстом **NgTemplateOutlet** являСтся **Object**. Но с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Ρ‹ΡˆΠ΅ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΠΎΠΉ Π³Π°Ρ€Π΄Π°, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ это ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅. + +## ПояснСниС + +Π’ этом испытании, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ строго Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ng-template Π² AppComponent. + +Π­Ρ‚ΠΎ ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π° уровня слоТности: + +### Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 1: Π˜Π·Π²Π΅ΡΡ‚Π½Ρ‹ΠΉ интСрфСйс + +БСйчас ΠΊΠΎΠ΄ выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. + +![Unkown Person](../../../../../assets/4/unknown-person.png 'Unkown Person') + +Как ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, Ρƒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ name Ρ‚ΠΈΠΏ "any". ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ вывСсти ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ‚ΠΈΠΏ. + +### Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 2: ΠžΠ±ΠΎΠ±Ρ‰Ρ‘Π½Π½Ρ‹ΠΉ интСрфСйс + +БСйчас ΠΊΠΎΠ΄ выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. + +![Unkown Student](../../../../../assets/4/unknown-student.png 'Unkown Student') + +Как ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, Ρƒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ student Ρ‚ΠΈΠΏ "any". ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ вывСсти ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ‚ΠΈΠΏ. + +Но Π½Π° этот Ρ€Π°Π·, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Π² `ListComponent` список ΠΈΠ· Π»ΡŽΠ±Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ². И ΠΌΡ‹ всС Ρ€Π°Π²Π½ΠΎ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π» Π²Ρ‹Π²Π΅Π΄Π΅Π½ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ‚ΠΈΠΏ. diff --git a/docs/src/content/docs/ru/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/ru/challenges/angular/8-pipe-pure.md new file mode 100644 index 000000000..7d8067abb --- /dev/null +++ b/docs/src/content/docs/ru/challenges/angular/8-pipe-pure.md @@ -0,0 +1,36 @@ +--- +title: πŸŸ’Π§ΠΈΡΡ‚Ρ‹ΠΉ ΠΏΠ°ΠΉΠΏ +description: Π˜ΡΠΏΡ‹Ρ‚Π°Π½ΠΈΠ΅ 8 ΠΏΡ€ΠΎ созданиС чистого ΠΏΠ°ΠΉΠΏΠ° +author: thomas-laforge +challengeNumber: 8 +command: angular-pipe-easy +blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d +sidebar: + order: 3 +--- + +## Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ + +This is the first of three `@Pipe()` challenges, the goal of this series is to master **pipes** in Angular. +Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ испытаниС ΠΏΡ€ΠΎ `@Pipe()` ΠΈΠ· Ρ‚Ρ€Π΅Ρ…, Ρ†Π΅Π»ΡŒ этой сСрии испытаний - ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с **pipes** Π² Angular. + +ΠŸΠ°ΠΉΠΏΡ‹ - ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ способ трансформации Π΄Π°Π½Π½Ρ‹Ρ… Π² вашСм шаблонС. Π Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Π²Ρ‹Π·ΠΎΠ²ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΏΠ°ΠΉΠΏΠΎΠΌ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹ΠΉ чистыми ΠΏΠ°ΠΉΠΏΠ°ΠΌΠΈ, ΠΊΡΡˆΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΎΠ½ΠΈ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Ρ†ΠΈΠΊΠ»Π΅ обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Ссли ΠΈΡ… Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ значСния Π½Π΅ измСнились. + +Pipes Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Ρ‹ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ эффСктивными ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ для ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Они ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΡ‹ обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² случаС измСнСния Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, минимизируя Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Π΅ вычислСния ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°. + +По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠ°ΠΉΠΏΡ‹ чистыС, Π½ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ установка `pure` Π² false ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ нСэффСктивности, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ количСство пСрСрисовок. + +:::note[ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅] +**ЧистыС** ΠΏΠ°ΠΉΠΏ вызываСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ³Π΄Π° измСняСтся Π²Ρ…ΠΎΠ΄Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.\ +**НСчистый** ΠΏΠ°ΠΉΠΏ вызываСтся Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ†ΠΈΠΊΠ» обнаруТСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. +::: + +Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ нСсколько ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΏΠ°ΠΉΠΏΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ DatePipe, UpperCasePipe ΠΈ CurrencyPipe. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ ΠΏΠ°ΠΉΠΏΠ°Ρ… Π² Angular, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ API [здСсь](https://angular.io/guide/pipes). + +## ПояснСниС + +Π’ этом ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Ρ‹Π·ΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² шаблонС Π² использованиС ΠΏΠ°ΠΉΠΏΠ°. + +## ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ + +- Пайп Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΈΠΏΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½. diff --git a/docs/src/content/docs/ru/challenges/forms/41-control-value-accessor.md b/docs/src/content/docs/ru/challenges/forms/41-control-value-accessor.md new file mode 100644 index 000000000..98659a936 --- /dev/null +++ b/docs/src/content/docs/ru/challenges/forms/41-control-value-accessor.md @@ -0,0 +1,41 @@ +--- +title: 🟠 Control Value Accessor +description: Π˜ΡΠΏΡ‹Ρ‚Π°Π½ΠΈΠ΅ 41 ΠΏΡ€ΠΎ созданиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ ΠΏΠΎΠ»Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ интСрфСйс ControlValueAccessor. +author: stanislav-gavrilov +challengeNumber: 41 +command: forms-control-value-accessor +sidebar: + order: 1 +--- + +## Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ + +ЦСль этого испытания ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ ΠΏΠΎΠ»Π΅ Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ API Ρ„ΠΎΡ€ΠΌΡ‹ Angular Ρ‡Π΅Ρ€Π΅Π· `ControlValueAccessor`. Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ [здСсь](https://angular.io/api/forms/ControlValueAccessor). Π­Ρ‚ΠΎΡ‚ интСрфСйс критичСски Π²Π°ΠΆΠ΅Π½ для создания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… элСмСнтов управлСния Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ бСспрСпятствСнно Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с API Ρ„ΠΎΡ€ΠΌ Angular. + +## ПояснСниС + +Π—Π°Π΄Π°Ρ‡Π° - ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ» Π² `feedbackForm` Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π² использовании `@Output` для получСния значСния ΠΈΠ· `app-rating-control` ΠΈ установки Π΅Π³ΠΎ Π² `FormGroup`. +ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΡŽ для Π½ΠΎΠ²ΠΎΠ³ΠΎ элСмСнта управлСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ… ΠΎ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π΅. (Кнопка ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π°, Ссли Ρ„ΠΎΡ€ΠΌΠ° Π½Π΅Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½Π°). + +БСйчас ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ: + +```html + +``` + +```ts +rating: string | null = null; + +onFormSubmit(): void { + this.feedBackSubmit.emit({ + ...this.feedbackForm.value, + rating: this.rating, // not inside the FormGroup and no validation + }); +} +``` + +НСобходимо, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ: + +```html + +``` diff --git a/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md b/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md new file mode 100644 index 000000000..674ceed2b --- /dev/null +++ b/docs/src/content/docs/ru/challenges/performance/40-christmas-web-worker.md @@ -0,0 +1,33 @@ +--- +title: 🟠 Π’Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€Ρ‹ +description: Π˜ΡΠΏΡ‹Ρ‚Π°Π½ΠΈΠ΅ 40 ΠΎ Ρ‚ΠΎΠΌ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€ +author: thomas-laforge +challengeNumber: 40 +command: performance-christmas-web-worker +sidebar: + order: 119 +--- + +## Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ + +Π­Ρ‚ΠΎ испытаниС Π±Ρ‹Π»ΠΎ создано для [Angular Advent Calendar](https://angularchristmascalendar.com) 2023. + +Π­Ρ‚ΠΎ простоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π³Π΄Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ **Discover**, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡΡŽΡ€ΠΏΡ€ΠΈΠ·, ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ Π·Π° Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ экраном. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, взаимодСйствиС с ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ оставляСт ΠΆΠ΅Π»Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ происходит зависаниС страницы, Π° Π·Π°Ρ‚Π΅ΠΌ, послС ΠΊΡ€Π°Ρ‚ΠΊΠΎΠΉ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ, сСкрСт раскрываСтся ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΈ Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ плавности Π² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. + +> ПояснСниС: Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ зависаниС прилоТСния, Π·Π°Π³Ρ€ΡƒΠ·Ρ‡ΠΈΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‰ΡƒΡŽ ΠΎΡ‡Π΅Π½ΡŒ слоТныС вычислСния. Π₯отя Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Ρ‚Π°ΠΉΠΌΠ΅Ρ€, Π½ΠΎ это Π½Π΅ ΡΡƒΡ‚ΡŒ Π΄Π°Π½Π½ΠΎΠ³ΠΎ испытания. + +Π’Π°ΠΊ ΠΊΠ°ΠΊ JavaScript Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² ΠΎΠ΄Π½ΠΎΠΏΠΎΡ‚ΠΎΡ‡Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ рСсурсоСмких Π·Π°Π΄Π°Ρ‡ прСпятствуСт обновлСнию ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Π½Π° ΠΊΠ»ΠΈΠΊΠΈ ΠΌΡ‹ΡˆΠΈ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ дСйствия. Π—Π°Π΄Π°Ρ‡Π° этого испытания - Ρ€Π°Π·Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ основной ΠΏΠΎΡ‚ΠΎΠΊ, пСрСнСся слоТныС вычислСния Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΊ. Для этой Ρ†Π΅Π»ΠΈ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€Ρ‹. Π’Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€Ρ‹ способны Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ скрипты Π² Ρ„ΠΎΠ½Π΅, Π½Π΅ влияя Π½Π° основной ΠΏΠΎΡ‚ΠΎΠΊ, Ρ‡Ρ‚ΠΎ позволяСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ высокоС качСство ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ взаимодСйствия. + +Π’ Angular использованиС этой Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π½Π΅ Ρ‚Π°ΠΊ распространСно, Π½ΠΎ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚ΡŒ Π΅Ρ‘ довольно Π»Π΅Π³ΠΊΠΎ. Π•ΡΡ‚ΡŒ схСматик, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ [здСсь](https://angular.io/guide/web-worker) Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ. + +## ПояснСниС + +Π­Ρ‚ΠΎ испытаниС Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΎ Π½Π° созданиС ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π·Π° счСт пСрСмСщСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‰Π΅ΠΉ слоТныС вычислСния, Π² Π²Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€. + +Для Π½Π°Ρ‡Π°Π»Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ схСматик, создайтС Π²Π΅Π±-Π²ΠΎΡ€ΠΊΠ΅Ρ€ ΠΈ пСрСнСситС Π² Π½Π΅Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. ПослС этих шагов анимация Π΄ΠΎΠ»ΠΆΠ½Π° ΡΡ‚Π°Ρ‚ΡŒ ΠΏΠ»Π°Π²Π½ΠΎΠΉ, Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π° выполнСния β€” ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒΡΡ, Ρ‚Π΅ΠΌ самым Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚. + +:::note[ПояснСниС] +ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ находимся Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ пространствС Nx, просто Π·Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ `ng` Π½Π° `nx` ΠΏΡ€ΠΈ запускС схСматика. + +Если `nx` Π½Π΅ установлСн глобально Π½Π° вашСм ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ прСфикс `npx` ΠΊ вашСй ΠΊΠΎΠΌΠ°Π½Π΄Π΅. +::: diff --git a/docs/src/content/i18n/ru.json b/docs/src/content/i18n/ru.json index 9595ba21d..4e58543ad 100644 --- a/docs/src/content/i18n/ru.json +++ b/docs/src/content/i18n/ru.json @@ -1,10 +1,10 @@ { "page.title.challenge": "Π˜ΡΠΏΡ‹Ρ‚Π°Π½ΠΈΠ΅", "author.createdBy": "Π‘ΠΎΠ·Π΄Π°Π½ΠΎ", - "buttons.email": "Email subscription", - "buttons.star": "Π”Π°Ρ‚ΡŒ Π·Π²Π΅Π·Π΄Ρƒ", - "buttons.sponsor": "Бпонсор", - "buttons.clipboardCopy": "Copied!", + "buttons.email": "ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° email рассылку", + "buttons.star": "Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π²Π΅Π·Π΄Ρƒ", + "buttons.sponsor": "Π‘ΠΏΠΎΠ½ΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ", + "buttons.clipboardCopy": "Π‘ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΎ!", "404.text": "Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½Π°. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ URL-адрСс ΠΈΠ»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ строкой поиска.", "challenge.footer.note": "ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅", "challenge.footer.running": "ЗапуститС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ:", @@ -13,12 +13,12 @@ "challenge.footer.communityAnswers": "РСшСния сообщСства", "challenge.footer.authorAnswer": "РСшСниС Π°Π²Ρ‚ΠΎΡ€Π°", "challenge.footer.blogPost": "Π‘Ρ‚Π°Ρ‚ΡŒΡ", - "challenge.footer.video": "Video", + "challenge.footer.video": "Π’ΠΈΠ΄Π΅ΠΎ", "challenge.footer.gettingStarted.title": "Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ это испытаниС, ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅:", "challenge.footer.gettingStarted.link": "ΠŸΠ΅Ρ€Π²Ρ‹Π΅ шаги", - "challenge.footer.upvoteAnswer": "You can upvote an answer with a πŸ‘ if you like it", - "subscription.button": "Subscribe", + "challenge.footer.upvoteAnswer": "Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ³ΠΎΠ»ΠΎΡΠΎΠ²Π°Ρ‚ΡŒ Π·Π° ΠΎΡ‚Π²Π΅Ρ‚ πŸ‘ Ссли ΠΎΠ½ Π²Π°ΠΌ понравился", + "subscription.button": "ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ", "subscription.email": "username@gmail.com", - "subscription.note.title": "Notes", - "subscription.note.description": "This email will only be used for sending new challenges updates" + "subscription.note.title": "ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅", + "subscription.note.description": "Π­Ρ‚ΠΎΡ‚ email Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для сообщСний ΠΎ Π½ΠΎΠ²Ρ‹Ρ… испытаниях" }