Optimiza el CSS con cssnano
Si bien al escribir nuestras hojas de estilos podemos ayudarnos de herramientas como Stylelint y a la hora de llevar a producción nuestro proyecto de Angular activamos la opción de optimización, siempre podemos mejorar un poco más el resultado de la optimización gracias a la…
Directiva de atributos
Crearemos en este artículo algunos ejemplos de uso de directiva de atributos tal como se explica en la web de Angular. Usando la propiedad host del decorador @Directive Añadir, modificar o eliminar un atributo y eventos Para añadir, modificar o eliminar un atributo, bastará con…
Directive composition API
En este artículo veremos qué es esto de «Directive composition API» (feature incluída a partir de Angular 15) para resolver de otra manera cómo manipular nuestro host del componente explicado en el artículo Convierte el elemento host del componente invisible. Si bien las soluciones del…
Convierte el elemento host del componente invisible
¿Sabes qué es el elemento host del componente? Sí, supongo que sí, pero… ¿qué es eso de hacerlo invisible? Bueno pues nos referimos a que ese elemento host (o caja contenedora) no exista o se ignore si usas alguna técnica de layout como CSS grid,…
Arquitectura de layouts
Cuando se inicia un proyecto de Angular siempre surge la pregunta sobre qué estructura de carpetas debe tener. No es fácil la respuesta dado que depende de muchos factores como por ejemplo si es solamente una PoC, si se crearán librerías, si participan varios desarrolladores/equipos,…
Tipos de componentes de Angular
A lo largo y ancho del mundo de Angular2+, el componente es la principal entidad o bloque de construcción de aplicaciones Angular. Cada componente consiste en: Hasta aquí, es lo que nos enseña la propia web de Angular sobre componentes junto a más información como…
Utilidades npm: skott, visualiza las dependencias
Si hace poco elaboramos un artículo sobre madge, ahora le toca el turno a skott. Skott es una herramienta que genera un gráfico con las dependencias entre los módulos de los proyectos, descubriendo si tienes dependencias circulares (al igual que madge), tamaño de los archivos,…
Utilidades npm: npm-check-updates, actualiza las librerías
Como sabemos el software es algo vivo (habitualmente) y es por eso que siempre aparecen nuevas actualizaciones, nuevas versiones sea para arreglar algún bug, añadir nuevas funcionalidades o hacer algún cambio más drástico (breaking changes). Así que es posible que de un día a otro…
Utilidades npm: madge, buscando dependencias circulares
Tener dependencias circulares en un proyecto nunca es bueno dado que pueden aparecer efectos negativos que nadie desea. Veamos un ejemplo muy sencillo de dependencia circular: Tenemos dos archivos que se referencian mutuamente importanto alguno de sus métodos: Archivo «position.ts» (referencia a positionPlusOne): Archivo «positionPlusOne.ts»…
Utilidades npm: rimraf, alternativa al comando Unix rm -rf
Una de las acciones que solemos hacer más de lo habitual es el borrado de archivos o carpetas para dejar siempre nuestro entorno de trabajo lo más limpio y/o estable que podamos. Mientras desarrollamos muchas veces instalamos un paquete u otro, creamos archivos para probar,…
