¿Qué es "hoy he aprendido..."?

<!--

Lo primero que os llamará la atención es el diseño del blog, los que me conocéis sabéis que soy una fan incondicional de "Sublime Text" como editor para desarrollo, y me ha parecido un bonito homenaje, simular su espacio de trabajo.

Por otro lado, las entradas de este blog, no pretenden ser documentación exacta y correcta. Me limito a compartir con vosotros la forma de solucionar determinados problemas que me voy encontrando en mi trabajo.

Unas estarán bien, y otras serán un "apaño", por lo que os agradecería que me comentéis lo que queráis, y me corrijáis errores de concepto o burradas que veáis.

Simplemente quiero devolver un poco a la comunidad, ya que yo he aprendido muchísimo gracias a la gente que se molesta en compartir sus conocimientos y experiencias.

Espero que os sirva.

-->

Ejecutar gulp desde Sublime Text

Trabajo habitualmente con Gulp y hasta ahora lo ejecutaba en el terminal (como la mayoría, por lo que he visto en distintos vídeos), pero acabo de descubrir un plugin para Sublime Text que me permite ejecutarlo directamente desde el editor, algo que me parece comodísimo si no necesitas el terminal para nada más.

Me ha sorprendido muy gratamente porque puedes lanzar las tareas que quieras de manera independiente y porque es super fácil de usar.

POR SUPUESTO doy por hecho que tenemos Gulp instalado en nuestro proyecto, con su gulpfile, su package.json, su carpeta node_modules, su camisita y su canesú… A ver si vamos a querer ejecutar Gulp en una carpeta donde no hay Gulp. :-/

Bueno, al lío:

Lo primero, evidentemente, instalar el plugin Gulp en Sublime Text, yo lo hice desde el Package Control:

Una vez instalado, podemos abrir las opciones con CMD+SHIFT+P desde el Command Palette:

Si desde aquí seleccionamos la primera opción donde dice solo «Gulp», se nos muestra una lista con las tareas que tiene nuestro gulpfile.js, para que elijamos la que queremos lanzar. Mola poder lanzar tareas independientes, además nos indica las dependencias que tienen las tareas entre ellas.

También podemos acceder a las opciones del plugin desde el menú de Sublime, en Tools:

Como podéis ver, hay un montón de cosas que podemos hacer directamente desde ambos sitios, lanzar la tarea por defecto, la última tarea, terminarlas todas, etc… en la página del plugin podéis ver qué hace cada una de ellas, si queréis una info más extendida.

Yo prefiero contaros cómo me hice unos atajos de teclado para evitar toda esta navegación por menús y Command Palette, que me resultaba un poco peñazo.

Antes de empezar con los atajos, os enseño el panel que aparece cuando ejecuto alguna tarea, yo ejecutaré «default»:

Como veis, se abre una especie de consola en la parte de abajo donde nos salen los mismos mensajes que salían en el terminal. Evidentemente podemos hacerla más pequeña e incluso esconderla, que es lo más lógico porque molesta, pero también porque necesitaremos hacer búsquedas y ese espacio es el mismo que tiene el buscador. Cerramos el panel simplemente con la tecla ESC

(Nota: los de los Macbook nuevos que no tienen tecla ESC, pues ni puñetera idea.)

Yo quería hacer con el teclado directamente una serie de cosas:

  • Que se me ejecutara la tarea «default», que es lo que hago habitualmente.
  • Mostrar el panel de Gulp de forma rápida (porque lo tendré oculto, como os decía arriba).
  • Que me mostrara la lista de tareas.
  • Terminar todas las tareas.
  • Terminar todas las tareas y cerrar Sublime.

Para crear los atajos de teclado nos tenemos que ir a los Keybindings de usuario:

Y ahí, me creo mis propios atajos con cada una de ellas, SIEMPRE EN LA PARTE DE USUARIO, ya sabéis que no hay que tocar ni modificar los valores por defecto de Sublime, cuando queramos modificar algún atajo, se sobreescribe en la parte de «User»:

Y ahí podéis ver los atajos que he creado para los comandos que os decía arriba.

De esta manera, solo necesito hacer CMD+G+D para que se lance la tarea «default», CMD+G+S para mostrar el panel, y así el resto de comandos.

(Para el que no lo sepa, no hace falta pulsar todas a la vez en plan «Twister», sería más incómodo que los menús. Dejas pulsada CMD y las otras dos como una secuencia, primero «G» y después «D», p.e.)

Por cierto, aclarar que los atajos aparecían en el menú de Tools porque yo ya los tengo creados, a vosotros no os saldrán:

Y eso es to, eso es to, eso es todo amigos!

 

Cuadrados responsive con CSS

Hoy os traigo un truquito para hacer cuadrados perfectos responsive, o rectángulos, también responsive, que mantengan sus proporciones.

Cuando queremos hacer un cuadrado responsive con porcentajes, el problema viene con el alto, porque lógicamente, el porcentaje que demos al alto, se refiere al alto del contenedor y lo normal es que si estamos haciendo un sitio responsive, desconozcamos el alto del padre porque será fluido. Por ello no podremos igualarlo al ancho.

La gracia está en saber que los paddings siempre se refieren al ancho, de modo que voy a utilizarlo para hacer un «falso height» y que sea igual que el ancho.

¿Cómo lo hacemos? Añadiendo un pseudo-elemento con un padding 100%, que como hemos dicho será el 100% del ancho, y por lo tanto igual, ¡ya tenemos nuestro cuadrado responsive!

Revisión del 26/07/2016

Como respuesta a una duda que me preguntaron, acerca de cómo meter contenido en los cuadrados (podéis ver debajo los comentarios), Gabriel Mondragón nos daba una solución que yo no conocía y me parece muy buena. Ya la he incluido en el pen.

Lo que yo he hecho siempre para meter contenido en los cuadrados era meterlo en un nuevo contenedor y posicionarlo al centro, porque normalmente el diseño que acompaña a este tipo de cajas suele llevar el contenido centrado. Pero si lo que queremos es usar el cuadrado como un div normal, flotando el pseudo-elemento a la izquierda como propone Gabriel, lo tengo solucionado y puedo meter el contenido que quiera.

Lo único que tenéis que tener en cuenta es que cuando el contenido sea mayor que el alto del cuadrado, dejará de ser un cuadrado, pero está bien porque no habrá desbordamientos como ocurre si lo posicionamos.

Podéis ver el ejemplo aquí:

See the Pen Responsive Squares by Diana (@diana_aceves) on CodePen