Fast tips about CSS & JS
Spread operator:
const cat = {
color: 'brown',
age: 10
}
const superhero = {
power: 'fly'
}
const supercat = {
...cat,
...superhero,
name: 'Nani'
}
console.log(supercat);
// {color: 'brown', age: 10, power: 'fly', name: 'Nani'}
Compilar App de Angular evitando la caché:
Cuando construímos una aplicación de Angular y la subimos a un servidor, debemos tener cuidado con la caché. Esta orden, según la Documentación de Angular, define el nombre del fichero, así que si el parámetro que le pasamos es all, los archivos que generan serán del tipo: main.62beb1fb93041eb44194.js evitando de esta forma que se cachee:
ng build --configuration production --output-hashing=all
Clases condicionales en Angular:
- [ngClass]:
Podemos anidar condiciones y clases que se aplicarán dependiendo de si se cumple o no determinada condición:[ngClass]="{
'active': animal === activeAnimal,
'focus': animal !== activeAnimal,
'disabled': animal === disabledAnimal
}" - [class]:
Espera siempre una expresion JS (función, condición o variable):[class] = "getClass(region)"
[class] = "(animal === activeAnimal ? 'active' : '')"
[class] = "isActive" - [class.active]:
Añade la clase active solo si la condición se cumple:[class.active] = "animal === activeAnimal"
Carga dinámica de imágenes en HTML: la etiqueta img tiene un atributo decoding que nos permite escoger cuándo queremos que se cargue la imagen. Tiene tres valores:
- sync: los elementos se renderizan de arriba hacia abajo, y la imagen se renderiza dependiendo de su posición en la página.
- async: renderiza la imagen de manera asíncrona, el renderizado de la página y de la imagen se realizan en paralelo, por lo que esta opción hace que la página se renderice más rápidamente.
- auto: valor por defecto, deja al navegador la decisión de renderizar la imagen de forma síncrona o asíncrona.
En Angular, cada componente tiene un ciclo de vida, lo primero que se ejecuta es el contructor, y después Angular ejecuta sus métodos de ciclo de vida en un orden específico:
- 1º. constructor()
- 2º. ngOnChanges(): este evento se ejecuta al iniciarse el componente, y cada vez que hay un cambio en alguna propiedad decorada con un @Input control.
- 3º. ngOnInit(): se ejecuta cuando el componente se ha inicializado, después de ngOnChanges. Principalmente se utiliza para iniciar los datos en un componente.
- 4º. ngDoCheck(): se ejecuta cuando Angular detecta que ha habido alguna actividad en el template de un componente.
- 5º. ngAfterContentInit(): se ejecuta cuando el contenido dentro de <ng-content> se inicia.
- 6º. ngAfterContentChecked(): se ejecuta cuando el contenido dentro de <ng-content> tiene alguna actividad.
- 7º. ngAfterViewInit(): se ejecuta después de que se haya inicializado el template del componente.
- 8º. ngAfterViewChecked(): se ejecuta cada vez que Angular detecta una actividad.
- 9º. ngOnDestroy(): este método se ejecuta justo antes de que Angular destruya el componente. Lo utilizaremos para darse de baja de los observables y desconectar los event handlers.
Estas son algunas páginas en las que yo aprendo y practico Javascript o Typescript (gratis, por supuesto)
- frontendmentor.io: Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
- devchallenges.io: CSS, HTML and JS challenges.
- javascript30.com: 30 Day Vanilla JS Coding Challenge.
- codewars.com: Improve your skills by training with others on real code challenges.
Decemeber
- Sun
- Mon
- Tue
- Wed
- Thu
- Fri
- Sat
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.first-day {
grid-column-start: 3;
}
Fuente: Calendar Tricks
Dos pequeños ejemplos de GRID y FLEX para soluciones frecuentes y rápidas de CSS
- Flex example: Mostrar elementos en línea centrados vertical y horizontalmente fácil y rápido.
- Grid example: Solución para algunos layouts con pocas líneas de CSS.
Hoy os traigo unas serie de páginas con recursos muy útiles para agilizar nuestro trabajo:
- Font Converter: Transforma tus fuentes a todos los formatios que la web necesita y te facilita el código CSS
- SVG Backgrounds: si no alucinas con este sitio tienes un problema 😋. Fondos ligeros, modernos y bonitos para cualquier página web!
- Grid generator: Siempre está bien tener esta herramienta a mano.
- Gradient animator: Un toque discreto y moderno para tus páginas web, fácil y rápido.
Os dejo una lista de las mejores páginas que he encontrado sobre diseño, y que te pueden ayudar mucho en la creación de tu web! (o por lo menos evitarte algún que otro dolor de cabeza)
- Freepik: mi sitio por excelencia para encontrar material gráfico de calidad, como imágenes, vectores e iconos
- Color Space: buscar la combinación de colores perfecta para tu sitio web nunca más será un problema!
- Editor de SVG online: Una herramienta que conviene tener localizada 😉.
- Color Hunt: Otra opción para escoger colores geniales.
Imágenes en modo oscuro: lo ideal es bajarles un poco el brillo y el contraste para que nuestro ojo se sienta más cómodo. La propiedad filter() de CSS es perfecta:
body.dark-theme img {
filter: brightness(.8) contrast(1.2);
}
Sombras: las sombras no quedan bien! Podemos utilizarlas si nos empeñamos, pero el fondo deberá estar en un color más claro para que se puedan apreciar bien.
Tipografía: debemos aligerar el peso de la fuente para una mejor legibilidad, esto lo podemos conseguir asignándole un valor menor de font-weight que el que asignaríamos en light mode.
Colores: debemos evitar utilizar el negro puro, podemos conseguir un efecto más agradable si utilizamos un gris oscuro o un azul, por ejemplo: #121212 o #202945. Para los elementos que tengamos en nuestra web, los colores poco saturados funcionarán mucho mejor en nustro diseño.
Líneas generales: es importante tener en cuenta que los elementos más cercanos al usuario deben ser los más claros, y los más alejados (como los fondos) deben ser los más oscuros.