Jesus Herman-Marina UX/UI from Barcelona

Configura iTerm2 con oh-my-zsh y powerline en OSX

Una de las grandes ventajas de usar OSX sobre Windows para desarrollo web es que, al ser un sistema operativo basado en Unix. Esto facilita mucho las cosas a la hora de configurar el sistema y sobretodo a la hora de usar la terminal.

Desgraciadamente la terminal que viene por defecto con OSX es algo limitada, por lo que hace mucho tiempo tomé la decisión de instalar iTerm2. Me permite dividir paneles, usar hotkeys y otras cosas que no se pueden hacer con la terminal de fábrica.

Estos son los pasos para usar mi configuración:

Instala iTerm

La forma más sencilla de instalarla es desde su web. Pero también la puedes instalar utilizando homebrew. Deberás ejecutar:

## asegurate de que está instalado cask (plugin para brew)
$ brew install cask

## instala iTerm2
$ brew cask install iterm2

Tema Solarized para iTerm2

Instala el tema ejecutando:

$ brew install wget
$ cd ~/Downloads
$ wget https://raw.github.com/altercation/solarized/master/iterm2-colors-solarized/Solarized%20Dark.itermcolors

Una vez instalado, deberás de abrir iTerm2 e importar el tema descargado: iTerm > Preferences > Profiles > Colors > Load presets > Import

Oh my zsh

Oh-my-zsh es una alternativa a bash, que viene instalado por defecto con bash. Lo bueno es que ambos funcionan a la vez, así que instalarlo no debería de repercutir en nada.

El comando es:

$ curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

Una vez instalado, abre ~/.zshrc con un editor y configura el tema para zsh: ZSH_THEME="agnoster"

Tipografía PowerLine

La fuente PowerLine se encarga de añadir iconos a la terminal. Son muy útiles y enriquecen visualmente la terminal. Un ejemplo es cómo se ven las ramas de Git:

Ejemplo powerline

Descárgala desde este enlace. Deberás de instalarla en tu sistema y aplicarla en iTerm accediendo:

iTerm > Preferences > Profiles > Text

Personalmente utilizo 12pt como tamaño de fuente. Deberás escoger PowerLine en Regular Font y Non-ASCII Font haciendo click en los botones que dicen Change font escogiendo PowerLine.

Conclusión

Si has llegado a este punto, quiere decir que has conseguido instalar y configurar zsh correctamente. Felicidades! Si te queda cualquier duda, no dudes en ponerte en contacto conmigo!

Edita imágenes online con Pixlr Editor

Pixlr es un editor de imágenes para Android y iOS. Su creador, Autodesk, nos ofrece también tres aplicaciones online, para utilizarlas en cualquier navegador compatible con Flash. Una de ellas es Pixlr Editor, un editor avanzado de imágenes.

Es una aplicación ideal para la edición de fotografías y creación de gráficos para usuarios con un nivel intermedio. Con esta aplicación podrás crear una imagen o editarla. Nos ofrece una variedad de opciones muy similares a las de programas más avanzados, como Gimp e incluso Photoshop.

Las opciones de edición que nos ofrece, están a un nivel muy similar de estas herramientas.  Disponemos de edición por capas, una gran cantidad de filtros y la posibilidad de exportar nuestras imágenes a varios formatos.

Utilizo Pixlr muy a menudo para hacer pequeños retoques a imágenes o crear composiciones simples. Es una opción ideal para editar imágenes rápidamente cuando estas utilizando otro ordenador no tienes tiempo de instalar un editor. Su interfaz intuitiva y cantidad de opciones para editar tus imágenes le convierten en un rival e incluso una alternativa a programas de edición avanzados.

Aprendiendo Ruby on Rails, esta vez en serio :)

Los desarrolladores Front-End estamos habituados a integrar nuestro HTML, CSS y JS con un sinfín de lenguajes de programación que se encargan de la parte del servidor. Estamos obligados a entender los patrones MVC y en muchas ocasiones, tocamos mucho código “backend”.

De hecho, en muchas empresas la posición de front-end ya transciende de la mera maquetación en la que antaño nos encontrabamos encasillados. Nos encontramos ante nuevos paradigmas, como los presentados por tecnologías como AngularJS, dónde JavaScript es utilizado para el desarrollo íntegro de aplicaciones.

Estos hechos son los que me motivan intentar a aprender un lenguaje de programación. El saber no ocupa lugar, así que siempre que he podido he intentado adentrarme en el mundo de los lenguajes de programación de cara a servidor. En su día empecé con asp.NET, del cual enseguida me cansé. Después hice mis pinitos con PHP, con el cual avancé mucho y sigue siendo uno de mis favoritos. Hace unos años, un amigo me convenció de que lo que tenía que aprender era Python, especialmente su framework, Django. La verdad que no me pareció que su curva de aprendizaje fuera extrema, pero por aquel entonces, trabajaba en una empresa que utilizaba PHP. Al no poder implementar lo que aprendía por mi cuenta al día a día, acabé dejándolo de lado.

Tengo la suerte de trabajar para una empresa en la que se fomenta que la multidisciplinaridad, por lo que la aversión a que los “maquetadores patosos” trabajen sobre código es infinitamente inferior a lo que me he encontrado en otros lugares.  Lo mejor de todo es que el stack de la web es front-end de toda la vida (sobre Bootstrap), Ruby on Rails, Angular y recientemente ReactJS. Vamos, que estamos como niño en una tienda de chucherías! :)

Esto me ha motivado a ponerme las pilas y usar el poco tiempo libre del que dispongo para aprender en serio tanto Ruby on Rails, como AngularJS. De momento me siento que estoy avanzando lenta pero progresivamente. Y lo bueno es que lo que aprendo, lo puedo aplicar en mi día a día.

Tengo intención de hacer lo mismo con Angular, pero ahora mismo estoy focalizado en Rails. Ruby (Rails es el framework) es un lenguaje inspirado en Python y Perl, orientado a objetos (de hecho todos los tipos de datos son un objeto). Hoy en día se ha convertido en un lenguaje muy popular, por lo que se puede tener acceso a muchos recursos para comprenderlo.

Estos son los recursos que estoy utilizando:

  • Documentación oficial de Ruby: La documentación oficial siempre es importante como referencia.
  • Ruby Monstas: Es un grupo de estudio de Berlin, organizado por las Berlin Rails Girls. Las guías y talleres son súper fáciles de seguir. Uso mucho esta página como referencia también.
  • Code School Ruby on Rails Redux: Forma divertida (y gratuita) de aprender Ruby on Rails. Estoy a punto de ganarme la “badge” :)
  • Curso de Udemy: Con Udemy nunca se sabe. Hay cursos muy buenos y hay verdaderos bodrios. Estoy encantado con este. Es un curso que va directo al grano. Tiene distintos módulos y en cada uno de ellos se crea un proyecto nuevo. Cuando acabas el curso has creado una pequeña librería, una plataforma de blogs, una galería de imágenes y una ecommerce. De momento voy por el primer proyecto. Además, se tocan otros tópicos como el front-end y MySQL. Y por los 15€ que cuesta, estoy muy contento!

Estos son mis recursos favoritos, pero en esta página de Ruby Monstas encontrarás muchos más. Todos gratuitos, por cierto.

Bueno, espero que este artículo te anime a ponerte las pilas y aprender también un lenguaje de programación. ¡Suerte!

Mis resoluciones para 2017

Soy consciente de que esto de las resoluciones es algo que se plantea al comienzo de año, pero como soy muy de innovar y tampoco tenía del todo claro cuales iban a ser mis resoluciones, he decido publicarlas ahora en Febrero. Ya se sabe, ¡más vale tarde que nunca!

No puedo hacer una retrospectiva de lo que me propuse hacer el año pasado, puesto que ni pensé en hacer una lista. Eso sí, las de este año van muy en serio y de hecho llevo un mes cumpliendo la gran mayoría de ellas.

Vamos allá, aquí estan mis resoluciones:

  • Leer 12 libros en un año. ¡De momento parece que voy a superar este objetivo!
  • Escribir una en mi diario cada día. Estoy preparando un post en el blog sobre los beneficios de hacerlo. En breve comparto link.
  • Escribir en mi blog como mínimo una vez a la semana. Veremos si somos capaces. ¡De momento vamos bien!
  • Ejercicio diario. Correr 6km o hacer 6km en bici (spinning también). Le hemos dado al spinning, pero mi perfil de Strava lo dice todo. ¡Queda mucho por hacer!
  • Aprender Ruby on Rails en serio (en breve lo explico en el blog). Aquí voy bien, y el primer proyecto que he hecho es prueba de ello.
  • Mejorar mis conocimientos de diseño UI haciendo la Daily UI Design Challenge, en la que te mandan un correo cada día con un ejercicio de UI diferente. De momento voy algo retrasado, pero creo que haré unos cuantos días de golpe :)

Evidentemente en esta lista no se incluyen cosas como por ejemplo ser feliz, disfrutar de mi família, viajar, etc. Esas son cosas que ya forman parte del día a día. Gracias por leer!

Atajos para tu terminal

Probablemente la forma más sencilla de instalar Node.js y npm en OS X, sea a utilizando el método estándar, bajando el instalador específico para tu sistema y asegurarte que lo instalas en tu $PATH .

Pero si prefieres utilizar Homebrew para instalar paquetes en tu sistema, esta es tu guía. Personalmente prefiero este método ya que todos los paquetes que instales en tu sistema se instalan utilizando los mismos comandos y sobretodo facilitamos que podamos hacer uso de Homebrew para actualizarlos.

Node.js es un framework ideal para el desarrollo front end, puesto que nos brinda unas herramientas que nos facilitan (y mucho) la automatización de procesos. En otros posts explicaré más a fondo qué herramientas existen, pero de momento empezaremos por instalar Node.js y npm, su herramienta de gestión de paquetes.

Primero instalamos Homebrew

$ ruby -e '$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)'

Después nos aseguraremos de que está actualizado:

$ brew update

Recomiendo que utilices brew doctor para asegurarte que está todo correctamente instalado y funcionando. Doctor te avisará de cualquier problema que pueda surgir y cómo solucionarlo:

$ brew doctor

Lo siguiente será agregar Homebrew a la ubicación de tu PATH. Además deberás de “sourcear” tu bash:

$ export PATH='/usr/local/bin:$PATH'

Ya puedes instalar Node.js y npm (cuando instalas node, también instalas npm):

$ brew install node

Para comprobar que has instalado Node correctamente, prueba de instalar Gulp (puede que lo tengas que hacer con sudo):

$ npm install --global gulp

Conclusión

Si todo ha funcionado correctamente, ¡enhorabuena! ya puedes empezar a trabajar en tu proyecto. Si no lo has conseguido, deja un comentario y le echamos un vistazo :)