From f3e4de80d4ffce3bf89d46650156a1d62270a5f9 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Mon, 19 Feb 2024 08:43:48 -0300 Subject: [PATCH 1/3] docs(pt): translate challenge 10 --- .../pt/challenges/angular/10-pipe-utility.md | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md diff --git a/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md new file mode 100644 index 0000000..b26e288 --- /dev/null +++ b/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md @@ -0,0 +1,34 @@ +--- +title: 🔴 Pipe Empacotador de Utilidade +description: Desafio 10 é sobre a criação de um pipe para empacotar utilidades +author: thomas-laforge +challengeNumber: 10 +command: angular-pipe-hard +sidebar: + order: 202 +--- + +## Informação + +Este é o primeiro de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular. + +Pipes são uma maneira bem poderosa de transformar dados em seu template. A diferença entre chamar uma função e um pipe é que pipes puros são memoizados. Por isso, eles não são recalculados em cada ciclo de detecção de mudanças se suas entradas não mudarem. + +Pipes são eficientes e otimizados para performance. Eles usam mecanismos de detecção de mudanças para apenas recalcular o valor se sua entrada mudar, afim de minimizar cálculos desnecessários e melhorar a performance de renderização. + +Por padrão um pipe é puro, por isso você deve ter cuidado que ao configurar `pipe` como falso deixar mais propenso a ser ineficiente, uma vez que aumenta o número de renderizações. + +:::note[Nota] +Um pipe **puro** é chamado apenas quando o valor muda.\ +Um pipe **impuro** é chamado em cada ciclo da mudança de deteccção. +::: + +Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.io/guide/pipes). + +## Declaração + +Neste exercício, você quer acessar algumas funções úteis. Atualmente você não consegue acessá-las diretamente do seu template. O objetivo é criar um pipe específico para o arquivo de úteis, e você precisará passar o nome da função que deseja chamar e os argumentos necessários. + +## Restrições + +- Deve ser fortemente tipado From 48972af742fbb2aa2317faf490d9638e7ce064e1 Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Mon, 19 Feb 2024 08:52:36 -0300 Subject: [PATCH 2/3] docs(pt): translate challenge 9 --- .../pt/challenges/angular/9-pipe-wrapFn.md | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md diff --git a/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md new file mode 100644 index 0000000..eab2ce7 --- /dev/null +++ b/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md @@ -0,0 +1,35 @@ +--- +title: 🟠 Pipe Empacotador de Função +description: Challenge 9 is about creating a pipe to wrap component fonctions +author: thomas-laforge +challengeNumber: 9 +command: angular-pipe-intermediate +blogLink: https://medium.com/ngconf/boost-your-apps-performance-by-wrapping-your-functions-inside-a-pipe-7e889a901d1d +sidebar: + order: 103 +--- + +## Informação + +Este é o primeiro de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular. + +Pipes são uma maneira bem poderosa de transformar dados em seu template. A diferença entre chamar uma função e um pipe é que pipes puros são memoizados. Por isso, eles não são recalculados em cada ciclo de detecção de mudanças se suas entradas não mudarem. + +Pipes são eficientes e otimizados para performance. Eles usam mecanismos de detecção de mudanças para apenas recalcular o valor se sua entrada mudar, afim de minimizar cálculos desnecessários e melhorar a performance de renderização. + +Por padrão um pipe é puro, por isso você deve ter cuidado que ao configurar `pipe` como falso deixar mais propenso a ser ineficiente, uma vez que aumenta o número de renderizações. + +:::note[Nota] +Um pipe **puro** é chamado apenas quando o valor muda.\ +Um pipe **impuro** é chamado em cada ciclo da mudança de deteccção. +::: + +Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.io/guide/pipes). + +## Declaração + +Neste exercício, você está chamando várias funções dentro de seu template. Você pode criar um pipe específico para cada uma das funções, mas isso dará muito trabalho. O objetivo é criar um pipe `wrapFn` que empacote sua função callback através do pipe. Sua função DEVE permanecer dentro do seu componentes. **`WrapFn` deve ser reutilizável**. + +## Restrições + +- Deve ser fortemente tipado From 6d496e766c92844c352c381d3a33099ad040c9df Mon Sep 17 00:00:00 2001 From: kabrunko-dev Date: Mon, 19 Feb 2024 11:54:03 -0300 Subject: [PATCH 3/3] docs(pt): fix challenges set order reference --- docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md | 2 +- docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md index b26e288..deaf61d 100644 --- a/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md +++ b/docs/src/content/docs/pt/challenges/angular/10-pipe-utility.md @@ -10,7 +10,7 @@ sidebar: ## Informação -Este é o primeiro de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular. +Este é o terceiro de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular. Pipes são uma maneira bem poderosa de transformar dados em seu template. A diferença entre chamar uma função e um pipe é que pipes puros são memoizados. Por isso, eles não são recalculados em cada ciclo de detecção de mudanças se suas entradas não mudarem. diff --git a/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md index eab2ce7..cd06a29 100644 --- a/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md +++ b/docs/src/content/docs/pt/challenges/angular/9-pipe-wrapFn.md @@ -11,7 +11,7 @@ sidebar: ## Informação -Este é o primeiro de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular. +Este é o segundo de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular. Pipes são uma maneira bem poderosa de transformar dados em seu template. A diferença entre chamar uma função e um pipe é que pipes puros são memoizados. Por isso, eles não são recalculados em cada ciclo de detecção de mudanças se suas entradas não mudarem.