Image for post
Image for post

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 la falta de soporte. Como declaramos un valor inicial y en caso de no existir ese valor para la Custom Property toma el valor del fallback, nos puede venir bien si hacemos componentes que se reutilizan en una o varias aplicaciones. …


Image for post
Image for post
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 a un bloque de código de nuestro HTML, puede ser usado por cada sección que lo necesite. …


Image for post
Image for post
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. …


Image for post
Image for post

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 que podemos usar Tailwind sin utilizar muchas clases en nuestros elementos HTML. Vamos a verlo con un ejemplo. Para crear un botón podríamos hacer uso del siguiente HTML con estas clases de utilidad. …


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.

Image for post
Image for post

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 de data y ya lo vemos reflejado en el DOM. …

Image for post
Image for post

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;
}
Image for post
Image for post

¿Por qué sucede esto? Porque estamos diciendo que queremos seleccionar nuestro elemento hijo 3, pero como esa posición ahora la ocupa un <p> entonces no tiene qué elegir.

Acá es donde nth-of-type nos es útil, ya que sí podemos indicarle qué tipo de elemento seleccionar:

li:nth-of-type(3) {
background-color: green;
}
Image for post
Image for post

Compatibilidad con navegadores

Haciendo una pequeña visita a caniuse.com podemos ver su compatibilidad con navegadores:

Image for post
Image for post

Seguimos viendo el poder de los selectores en CSS. Más info acá 👇🏼

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type


Image for post
Image for post

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 de qué elemento queremos hacer la selección. …


Image for post
Image for post
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 año. Y la respuesta fue que no. Me di cuenta que lo primero que hice al llegar a Alicante fue empezar a buscar trabajo de lo que siempre hice, en lo que me sentía más confiado, en lo que creía que sería simple entrar. …


Image for post
Image for post

Cuando tenemos un sitio montado online en WordPress y queremos hacer cambios para agregar una nueva funcionalidad y hacer testing, o probar distintos temas y evitar que algo falle, nos encontramos en la situación de tener que replicar ese sitio en un servidor seguro.

Esto podríamos plantearlo en términos de migración también. Cuando queremos migrar un sitio, lo que hacemos es duplicarlo, replicarlo o transferirlo a otro server, ya sea local u online.

Entendiendo el contenido y su estructura

WordPress tiene dos partes esenciales en su conjunto. Uno es el contenido: los textos que escribimos, las imágenes que subimos, etc. …

About

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