Pasó un tiempo hasta que entendí la diferencia entre las 3 position: relative, absolute y fixed. No fue hasta un curso de Diana Aceves donde vi con claridad quién se posicionaba respecto a quién, y lo más importante: por qué. Ahí me di cuenta que mi relación con el CSS ya era de amor puro, porque hasta ese momento no entendía del todo cómo funcionaba CSS por dentro. Y esto tiene una razón.

Cuando comienzas a tocar CSS parece simple y de fácil entrada, y lo de entrada fácil es verdad, porque con sólo un navegador puedes seleccionar un elemento…


Artículo en constante actualización

Las CSS Custom Properties permiten definir variables dentro del rango que le especifiquemos, si por ejemplo la definimos dentro de un .container , sólo se podrá usar en todos los elementos que estén dentro de esa clase.

Se definen de la siguiente manera:

—nombreDeVariable: propiedad;

Y se las llama así:

color: var( – nombreDeVariable);

Se puede usar un fallback si no es soportado por un navegador, por ejemplo:

color: var(  – nombreDeVariable, #ffffff); // Si no acepta variable el navegador, utiliza el #ffffff.

Como me comenta dinaelurdaneta en Twitter el fallback no sólo nos sirve para…


Imagen de https://undraw.co

Hay 6 elementos que podemos utilizar para estructurar nuestro HTML semánticamente.

  • main
  • header
  • footer
  • article
  • section
  • aside

Estos elementos tienen un significado semántico que no tiene por qué estar relacionado a su estilo visual ni a su posición en la página. Habitualmente vemos el footer debajo de todo y el header arriba, pero eso no tiene por qué ser así.

Uso de cada elemento

main

Este elemento nos indica que lo que está dentro suyo es el contenido principal de la página en la que estamos. Sólo puede ser usado una vez por cada página.

header

Se usa para identificar contenido que nos sirva de introducción…


Imagen de https://undraw.co

En sólo 3 pasos! 🎯

Muchos de nosotros tenemos proyectos y ejercicios montados en GitHub, ese hermoso repositorio donde poner nuestros experimentos y compartirlos con el resto de la comunidad.

Pero muchas veces dejamos el código ahí y ya está. Esperando que la persona que quiera verlo en acción se descargue el repo, lo monte localmente y lo despliegue. Cosa que no siempre sucede.

Una forma muy fácil y sencilla que nos proporciona GitHub para compartir el resultado final del código que tenemos en el repo es a través de GitHub Pages. …


O cómo procurar no llenar tu HTML de clases.

Tailwind es un framework CSS que tiene personas a favor y en contra. Este pequeño artículo no pretender ahondar en las razones de por qué esto sucede, pero sí aclarar algún aspecto que da mucha confusión en general.

Es que TailwindCSS me ensucia el HTML con muchas clases.

Esta es la razón más esgrimida que he leído cuando uno pregunta por qué no usar Tailwind. Podrás coincidir o no con este motivo, al final eso también se reduce a gustos estéticos o funcionales y formas de trabajar que cada persona tiene. No vengo a opinar sobre eso.

Vengo a explicar…


Las stripes son esas franjitas tan bonitas que podemos ver en muchos sitios en la calle, a menudo en carteles pero también en lugares cotidianos.


Un componente en Vue.js atraviesa varias instancias o estados. Vamos a listarlas y comentar un poco por arriba cada una.

  • beforeCreate: se ejecuta antes de que se cree el componente.
  • created: cuando el componente ya se ha creado, pero aún no existe en el DOM.
  • beforeMount: una vez que el componente está creado y compilado y está listo para incluírse en el DOM.
  • mounted: el componente ya se encuentra en el DOM.
  • beforeUpdate: se ejecuta cuando hay un cambio dentro de nuestra data pero aún no lo vemos reflejado en el DOM.
  • updated: el componente ha tenido un cambio dentro…

La pseudoclase nth-of-type nos permite seleccionar elementos de acuerdo al tipo de elemento que queremos elegir.

Por ejemplo, teniendo este HTML:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<p>Aquí hay un párrafo</p>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>

Si quisiéramos pintar nuestro elemento 3, si lo hiciéramos mediante nth-child no nos funcionaría:

li:nth-child(3) {
background-color: green;
}


nth-child es una pseudoclase que puede resultarnos muy útil al momento de seleccionar ciertos elementos de nuestro HTML.

Hay que tener en cuenta que, como su nombre indica, nos permite seleccionar elementos hijos (child) basándonos en la posición que tengan dentro de su padre (parent).

Sintaxis

Podríamos decir que su uso se parece a una función, ya que espera que le pasemos parámetros. Ej.:

li:nth-child(an+b) { };

En este ejemplo estamos usando como target nuestro elemento <li>. El uso de parámetros se compone de lo siguiente:

(an+b)

Con la letra b, luego del signo de suma (+), le indicamos a partir…


Photo by Dan Gribbin on Unsplash

Cuando hace aproximadamente un año vine a vivir a España, me encontré con que todo lo que había hecho profesionalmente en Argentina no tenía influencia en lo que podría hacer acá. Porque nadie me conoce, ni sabe cómo trabajo, cuántas ganas tengo o si soy capaz de hacerlo bien. Un currículum no puede decirte eso, aunque nos empeñemos en demostrarlo con bonitas palabras y logros destacados.

Ese muro con el que me topé al empezar de cero en un país nuevo para mí, me hizo replantearme muchas cosas. Entre ellas, si quería trabajar de lo que estuve trabajando año tras…

Alejandro Narvaja

UI Developer | alejandronarvaja.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store