Jesus Herman-Marina UX/UI from Barcelona

¿Te confunden REM y EM?

REM puede ser confuso, especialmente si no tienes un entendimiento sólido de su compañera EM y su némesis, PX.

Unidades Relativas

Tanto rem como em son unidades relativas, a diferencia de px, que no lo es. Antes que consideres utilizar rem, es importante que entiendas la relación entre em, tu markup y herencia.

En el ejemplo de debajo, se demuestra cómo cada hijo anidado asume que el padre es 1em (100%). Por lo tanto, sus hijos heredan su tamaño escalando en relación al tamaño de fuente de su padre.

Los valores EM se heredan de sus parientes

   Check out this Pen! 

Los valores PX no se heredan

   Check out this Pen! 

Mientras el valor se queda en 0.733em, el tamaño de fuente se calcula al 77,3% de su pariente directo, que a su vez escala de su pariente. Esto irá sucediendo a medida que subimos hacia arriba en el DOM. De hecho sucederá allá donde un pariente tenga definida una font-size.

En este ejemplo, tenemos varios elementos “nesteados”. Cada uno de ellos tiene un tamaño de font. Seguro que puedes observar que no es una buena práctica, puesto que el conjunto de la herencia crea resultados no deseados. De todos modos, no deberías de preocuparte sobre esto, siempre y cuando tu CSS y html sean modulares.

EM salva vidas

Bueno, quizá salvar vidas sea algo exagerado, pero ahorrar líneas de código, seguro. Los ejemplos que ves a continuación, hacen eso mismo: actualizar los tamaños de tipografía dentro de una media query. Los valores iniciales se calculan incrementando 1em (16px) en un ratio de 1:1.2.

EM escala cuando se actualiza un valor:

html { font-size: 1em; }

h1 { font-size: 2.074em; }

h2 { font-size: 1.728em; }

h3 { font-size: 1.44em; }

h4 { font-size: 1.2em; }

small { font-size: 0.833em; }

.caja { padding: 1.25em; }

@media screen and (min-width: 1400px) { html { font-size: 1.25em; } }

O tendrías que recalcular cada valor PX

html { font-size: 16px; }

h1 { font-size: 33px; }

h2 { font-size: 28px; }

h3 { font-size: 23px; }

h4 { font-size: 19px; }

small { font-size: 13px; }

.caja { padding: 20px; }

@media screen and (min-width: 1400px) { html { font-size: 20px; }

Solamente hay un valor em para sobre escribir en la media query, porque em hereda y escala relativa al tamaño de fuente de su padre (html en este caso), de forma similar a la que escalaría, por ejemplo, paths vectoriales.

Si tuviéramos que hacer lo mismo con px, necesitaríamos casi el doble de código, puesto que cada uno de estos valores, debe de ser recalculado y definido en la media query.

REM cómo en “Root EM”

Mientras que em es relativa al tamaño de fuente de su pariente directo (o más cercano), rem es relativo exclusivamente al tamaño de fuente del documento (html), también conocido cómo “root” (raíz). Si construyes tus hojas de estilos de forma modular, rem es algo que apenas utilizarás, pero aún así, te puede ser muy útil en más de una ocasión.

Por ejemplo, si estás buscando conseguir un espaciado consistente en tu página, sin tener que utilizar código de más, rempuede ser utilizado para definir tus paddings y márgenes.

EM escalará paddings y margins:

   Check out this Pen! 

Conclusión

Utilizo em para casi todo, rem de forma ocasional para paddings y márgenes, pero muy ocasionalmente y utilizo px para bordes.

Mayoritariamente, quiero que los hijos hereden tamaño. Si una columna va a tener un tamaño de fuente más pequeño, espero que todos sus hijos cambien su tamaño de forma proporcional, sin tener que calcular y redefinir selectores de forma individual.

Me cuesta pensar en una buena razón para utilizar rem para tamaños de fuente, pero estoy seguro de que puede haber excepciones. Si por ejemplo estoy intentando resetear un tamaño de fuente con rem, es probablemente señal de que mi CSS no es demasiado modular y por lo tanto, necesita mejoras.

Recursos

Mi calculadora de em favorita es pxtoem.com. No solo calcula valores em o px, también nos ofrece una rambla muy útil que nos ayuda a ver su relación.


Este post ha sido traducido del inglés. Si quieres acceder a la versión original, fue escrita por Jeremy Church y la puedes acceder aquí: Enlace

Atajos para tu terminal

Si utilizas la terminal a menudo, te habrás encontrado con que en ocasiones tienes que escribir comandos bastante largos. Si esto lo multiplicamos por los cientos de comandos que podemos acabar escribiendo, es el momento de añadir atajos a tu .bash_profile. Estos atajos se conocen como “alias”.

El .bash_profile es un archivo que se encuentra en tu directorio raíz, con el que puedes personalizar tu sesión en la terminal. Vamos a trabajar en un par de ejemplos.

Arranca un servidor

Un alias que encuentro extremadamente útil es para arrancar un servidor Python básico con un solo comando. Para muchos proyectos, acostumbro a utilizar el servidor básico de python. Normalmente, en la carpeta de mi proyecto, arranco el servidor así:

$ python -m SimpleHTTPServer 8000

Vamos a crear un alias:

alias httpserver="python -m SimpleHTTPServer 8000"

Y lo añadimos al .bash_profile:

$ source ~/.bash_profile

Así, la próxima vez que tengas que arrancar un servidor, podrás escribir:

$ httpserver

Accede a tus carpetas rápido

Cuando tienes que acceder carpetas determinadas, a veces se puede hacer muy pesado. Por ejemplo:

$ cd ~/Sites/mi-web/mi-carpeta/otra-carpeta/mas-carpetas

Vamos a crear un alias:

$ alias carpeta="cd ~/Sites/mi-web/mi-carpeta/otra-carpeta/mas-carpetas"

Y lo añadimos al .bash_profile:

$ source ~/.bash_profile

Así, la próxima vez que tengas que arrancar un servidor, podrás escribir:

$ carpeta

Conclusión

Espero que estos dos ejemplos hayan sido útiles. Puedes aplicar los mismos conceptos para todo tipo de acciones. Si te ha gustado el artículo, no dudes en compartirlo!

Impresionante juego educativo sobre el sistema solar

La mayoría de nosotros cuando nos quedamos sin trabajo nos desesperamos. Nos invade un sentimiento de impotencia y nos bloqueamos. Esto no le ha pasado a Christopher Albeluhn, un diseñador de videojuegos, que ha creado un juego educativo para que podamos explorar el sistema solar en 3D.

La verdad es que los gráficos son impresionantes. La versión para Windows está terminada y ahora mismo Christopher está trabajando en una versión para Android y iOS

Si su trabajo te inspira como a mí, puedes ayudarle a acabar su trabajo haciendo una aportación en su página de Indiegogo.