From edf82db7c6098e48916ca5b283962ad1adcefa11 Mon Sep 17 00:00:00 2001 From: Erick Rodriguez Date: Sun, 17 Dec 2023 21:26:57 -0500 Subject: [PATCH] docs: exercises 8,9,10,13 in ES-LA refactor: resetting settings.json --- .../es/challenges/angular/10-pipe-utility.md | 21 +++++++++++++++++ .../docs/es/challenges/angular/13-styling.md | 19 +++++++++++++++ .../docs/es/challenges/angular/8-pipe-pure.md | 22 ++++++++++++++++++ .../es/challenges/angular/9-pipe-wrapFn.md | 23 +++++++++++++++++++ 4 files changed, 85 insertions(+) create mode 100644 docs/src/content/docs/es/challenges/angular/10-pipe-utility.md create mode 100644 docs/src/content/docs/es/challenges/angular/13-styling.md create mode 100644 docs/src/content/docs/es/challenges/angular/8-pipe-pure.md create mode 100644 docs/src/content/docs/es/challenges/angular/9-pipe-wrapFn.md diff --git a/docs/src/content/docs/es/challenges/angular/10-pipe-utility.md b/docs/src/content/docs/es/challenges/angular/10-pipe-utility.md new file mode 100644 index 0000000..8257a7f --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/10-pipe-utility.md @@ -0,0 +1,21 @@ +--- +title: 馃敶 Pipe Wrapper para utilidades +description: El desaf铆o 10 trata sobre la creaci贸n de un pipe para envolver utilidades +author: thomas-laforge +challengeNumber: 10 +command: angular-pipe-hard +sidebar: + order: 202 +--- + +El objetivo de esta serie de 3 desaf铆os de pipes es dominar **pipe** en Angular. + +Los pipes puros son una forma muy 煤til de transformar datos desde tu plantilla. La diferencia entre llamar a una funci贸n y un pipe es que los pipes puros son memorizados. As铆 que no ser谩n recalculados en cada ciclo de detecci贸n de cambios si sus entradas no han cambiado. + +## Informaci贸n: + +En este tercer ejercicio, quieres acceder a funciones de utilidades. Actualmente no puedes acceder a ellas directamente desde tu plantilla. El objetivo es crear un pipe espec铆fico para este archivo de utilidades donde necesitar谩s pasar el nombre de la funci贸n que quieres llamar y los argumentos necesarios. + +## Restricciones: + +- El tipo debe ser fuertemente definido. diff --git a/docs/src/content/docs/es/challenges/angular/13-styling.md b/docs/src/content/docs/es/challenges/angular/13-styling.md new file mode 100644 index 0000000..fce9762 --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/13-styling.md @@ -0,0 +1,19 @@ +--- +title: 馃煚 Estilos CSS Altamente Personalizables +description: El desaf铆o 13 trata sobre la creaci贸n de estilos CSS altamente personalizables +author: thomas-laforge +challengeNumber: 13 +command: angular-styling +sidebar: + order: 104 +--- + +## Informaci贸n + +El estilo es un aspecto importante del trabajo diario de un desarrollador de frontend, pero a menudo se subestima. En las aplicaciones de Angular, frecuentemente veo a personas usando `@Input()` para personalizar el estilo de sus componentes. Sin embargo, `@Input()` solo debe usarse para l贸gica. Otras t茅cnicas, como las **variables CSS** y **host-context** deben usarse para el estilo. + +En este desaf铆o, necesitar谩s usar tanto variables CSS como `:host-context` para eliminar todos los `@Input()` de tu c贸digo. + +## Restricciones: + +- En tu presentaci贸n final, tu componente no debe contener ninguna l铆nea de c贸digo. Todo el estilo debe manejarse dentro del decorador _(o archivos CSS externos si lo prefieres)_ diff --git a/docs/src/content/docs/es/challenges/angular/8-pipe-pure.md b/docs/src/content/docs/es/challenges/angular/8-pipe-pure.md new file mode 100644 index 0000000..fbe6bf4 --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/8-pipe-pure.md @@ -0,0 +1,22 @@ +--- +title: 馃煝 Pipe Puro +description: El desaf铆o 8 trata sobre la creaci贸n de un pipe puro +author: thomas-laforge +challengeNumber: 8 +command: angular-pipe-easy +blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d +sidebar: + order: 3 +--- + +El objetivo de esta serie de 3 desaf铆os de pipes es dominar **pipe** en Angular. + +Los pipes puros son una forma muy 煤til de transformar datos desde tu plantilla. La diferencia entre llamar a una funci贸n y un pipe es que los pipes puros son memorizados. As铆 que no ser谩n recalculados en cada ciclo de detecci贸n de cambios si sus entradas no han cambiado. + +## Informaci贸n: + +En este primer ejercicio, llamas a una funci贸n simple dentro de tu plantilla. El objetivo es convertirla en un pipe. + +## Restricciones: + +- El tipo debe ser fuertemente definido. diff --git a/docs/src/content/docs/es/challenges/angular/9-pipe-wrapFn.md b/docs/src/content/docs/es/challenges/angular/9-pipe-wrapFn.md new file mode 100644 index 0000000..588dbfd --- /dev/null +++ b/docs/src/content/docs/es/challenges/angular/9-pipe-wrapFn.md @@ -0,0 +1,23 @@ +--- +title: 馃煚 Pipe Wrapper para funciones +description: El desaf铆o 9 trata sobre la creaci贸n de un tubo para envolver funciones de componentes +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 +--- + +El objetivo de esta serie de 3 desaf铆os de pipes es dominar **pipe** en Angular. + +Los pipes puros son una forma muy 煤til de transformar datos desde tu plantilla. La diferencia entre llamar a una funci贸n y un pipe es que los pipes puros son memorizados. As铆 que no ser谩n recalculados en cada ciclo de detecci贸n de cambios si sus entradas no han cambiado. + +## Informaci贸n: + +En este segundo ejercicio, est谩s llamando a m煤ltiples funciones dentro de tu plantilla. Puedes crear un pipe espec铆fico para cada una de las funciones, pero esto ser铆a demasiado engorroso. +El objetivo es crear un pipe `wrapFn` para envolver tu funci贸n de retorno a trav茅s de un pipe. Tu funci贸n DEBE permanecer dentro de tu componente. **`WrapFn` debe ser altamente reutilizable.** + +## Restricciones: + +- El tipo debe ser fuertemente definido.