Skip to main content
yarn

Yarn es el Nuevo npm install

Nuestros amigos de Facebook han liberado su gestor de paquetes que llevan usando algún tiempo. Se llama Yarn y viene a sustituir al npm install al que estamos acostumbrados.

¿Otro gestor de paquetes más?

De momento, Yarn utiliza el registro de paquetes de npm, pero hace un uso más eficiente de la instalación -es mucho más rápida- de dependencias y bloquea las versiones que estamos utilizando.

Mediante un archivo yarn.lock define las versiones de nuestras dependencias y permite que otros miembros de nuestro equipo de trabajo puedan montar un entorno similar al nuestro, por lo que meterlo en nuestro control de versiones es imprescindible.

En realidad sólo es una forma mejor de hacer algo que ya hacíamos, lo cual siempre está bien.

Lo mejor es que ni siquiera hace falta configurar nada, nuestro package.json seguirá exactamente igual y será Yarn quien se ocupe de gestionarse. Maravilla.

Además se ocupa de nuestras dependencias en bower -si es que aún lo usas-. Esto es un punto a favor ya que personalmente me sigue gustando diferenciar entre los paquetes de frontend y los de node/desarrollo.

Cada día hay algo nuevo en el entorno del desarrollo web. Es afortunado que en esta ocasión la curva de aprendizaje sea nula y símplemente podamos utilizarlo tras su instalación con -irónicamente- npm install.

npm install -g yarn

Ya que bower y npm son los principales afectados con la llegada de éste nuevo sistema, ambos se han pronunciado al respecto

  • [NPM da la bienvenida a Yarn](http://blog.npmjs.org/post/151660845210/hello-yarn “NPM da la bienvenida a Yarn”)
  • [Usando Bower con Yarn](https://bower.io/blog/2016/using-bower-with-yarn/ “Usando Bower con Yarn”)

Se buscan expertos en Yarn

Ya me he encontrado alguna pregunta en stackoverflow sobre Yarn y el señor @WesBos ha hecho una pequeña review sobre Yarn en twitter.

Jeffrey Way de Laracasts también ha hecho un pequeño vídeo sobre su instalación y uso.

20160719_gestion_proyectos_sublime_2

Cómo organizar los proyectos en Sublime Text

La gestión de proyectos es una de las tareas diarias con las que tiene que lidiar un desarrollador web. La organización es imprescindible para mantener la cordura como para aprovechar al máximo las capacidades de tu editor.

Hoy voy a contarte cómo he conseguido un flujo de trabajo para la gestión de proyectos en Sublime Text que me permite acceder rápidamente al contenido de los distintos proyectos y al mismo tiempo no tener miles de ficheros de configuración desparramados por todo el sistema.

Un poco de historia

La primera vez que cambié de Dreamweaver -sí, así estaban las cosas amigo- a Sublime Text, la gestión de proyectos era algo que me preocupaba poco. Me las iba arreglando añadiendo y sacando carpetas desde explorer a Sublime, dejando sólo las carpetas de los proyectos en los que estaba trabajando y quitando los que estaban completados. De vez en cuando, al tener que retocar algún bug, volvía a la carpeta de proyectos y arrastraba la carpeta, sincronizaba, y de nuevo la sacaba una vez había terminado la tarea que tenía que hacer.

No tardé en darme cuenta de que éste sistema tenía los días contados.

Sublime Text tiene un Sistema de Gestión de Proyectos integrado. Pulsando Ctrl + Super + p (Ctrl + Alt + p en Windows) sale la paleta de proyectos en una nueva ventana.

Paleta de Gestión de Proyectos en Sublime Text

Ésta ventana sólo recuerda los proyectos que has creado dentro de Sublime. Es decir, que para crear un proyecto tendrías que añadir la carpeta del proyecto dentro de Sublime, ir a Projects > Save Project y escoger una carpeta donde guardar los archivos asociados al proyecto, que son dos: Un .sublime-project y un .sublime-workspace, que guardan las propiedades del proyecto y el estado de la ventana respectivamente.

Éste proceso era algo mejor pero muy tedioso: Tener que ir a por el ratón, seleccionar el menú, y buscar una carpeta donde guardar el proyecto era lento y tedioso.

Durante un breve periodo de tiempo estuve guardando en las carpetas de los proyectos éstos archivos.

Y un día desaparecieron.

Te puedes imaginar mi cara cuando voy a cambiar de proyecto y me encuentro con que han desaparecido todos, y para volver a agregarlos tengo que ir buscando los archivos de los proyectos.

Hay que buscar un sistema para mantener en orden los proyectos de forma centralizada, que no estén desparramados por todo el sistema

Centralizando los proyectos en la carpeta de Sublime Text

Mi primera opción fue crear sólo dos proyectos: Desarrollo y Archivados.

  • Archivados: En lugar de agregar carpeta por carpeta de proyectos, agregaba la carpeta que los contenía todos. De ésta manera podía pasar rápidamente aquí, buscar el proyecto que necesitara, hacer unos cambios, subir, y volver a Desarrollo.
  • Desarrollo: Contenía sólo los proyectos en los que estaba trabajando en ése momento, con lo cual tenía básicamente los mismos problemas que al principio, añadiendo y quitando carpetas continuamente.

Los problemas de no aislar los proyectos

Poco a poco la cantidad de proyectos que tenía en mi inventario iba creciendo y llegó un punto en el que era bastante difícil acceder a un proyecto archivado. Además, cada vez costaba más mover toda esa cantidad de archivos y poco a poco el Sublime se iba ralentizando.

Así que hice lo que la mayoría de programadores hacemos el 70% del tiempo: Buscar en Google.

Gestionar proyectos de forma independiente tiene muchas ventajas aparte de la organización: Te facilita muchas otras tareas del día a día y te ayuda a aprovechar otras ventajas de Sublime Text.

Un gestor de proyectos para manejarlos a todos

Y esto es lo que encontré: Project Manager.

Project Manager te ayuda a la hora de gestionar los proyectos de Sublime Text.

Gestiona de forma transparente la ubicación de los archivos de los proyectos y facilita enormemente crearlos y acceder a ellos.

Además, su panel de cambio de proyecto está más integrado con el estilo general de Sublime y soluciona el -infame- bug de los archivos abiertos de la barra lateral de sublime, permitiéndote un entorno de trabajo más limpio.

Flujo de Trabajo con Project Manager

Te voy a contar el mejor método para gestionar proyectos en sublime text que he encontrado, y si conoces alguno mejor, te invito a que me lo cuentes en los comentarios:

  1. Con una ventana de Sublime Text -sin ningún proyecto-, buscas la carpeta donde está tu código y la arrastras.
  2. Abres la paleta de comandos con Super + Shift + p (o Ctrl + Shift + p en Windows).
  3. Dentro de la paleta de comandos, buscas Project Manager: Add Project, lo puedes abreviar escribiendo proadpro, y al pulsar intro, te pedirá un nombre de proyecto. Si tu carpeta se corresponde con el nombre del proyecto, te vendrá escrito, por lo que si vuelves a pulsar intro voilà, tu proyecto está guardado y accesible a través de Super + Shift + p.

Sin cosas raras, una gestión de proyectos mucho más rápida y sin apenas tocar el ratón.

¿Pero qué pasa con el proyecto?, ¿dónde se guardan éstos archivos?

Todos los archivos de tu proyecto se guardan de forma transparente en tu carpeta de configuración de Sublime Text, donde -en mi opinión- es el mejor lugar para guardar éste tipo de archivos.

Puedes acceder muy rápidamente a ésta carpeta pulsando Super + Shift + p para abrir la paleta de comandos, y escribiendo Prefuser para encontrar Preferences: User.

Cuando se abra tu archivo de preferencias, abre de nuevo la paleta y escribe Reveal, esto abrirá un navegador de archivos en tu carpeta personal de Sublime Text, donde están todas tus configuraciones del editor. Aquí encontrarás los archivos en Projects.

Protips

  • Explora todas las opciones de éste plugin con la paleta de comandos, escribiendo Project Manager para ver las distintas opciones que te ofrece.
  • Puedes cerrar un proyecto desde la paleta escribiendo proclose, esto te dejará la ventana disponible para agregar la carpeta de un nuevo proyecto.
  • Puedes agregar carpetas desde la consola con subl -a ., éste truco no sé cómo funciona en Windows ya que mi configuración en éste sistema es un poco especial, y funciona así mismo. Además, tengo un alias en la terminal s. para que sea más rápido.
  • Si estás en mac, puede que quieras agregar ésta línea a tus preferencias: "close_windows_when_empty": false, para que cuando cierres el proyecto la ventana de sublime se quede abierta.
  • Si no te gusta dónde está la carpeta, puedes cambiar la ubicación también en las preferencias: "projects_path": ["ruta/que/te/guste"].

Conclusión

Una gestión de proyectos de éste tipo te permitirá:
* Concentrarte mejor en los proyectos en los que trabajas.
* Mantener tus proyectos siempre a mano y poder acceder a sus componentes a golpe de teclado, sin tener que tocar el ratón.
* Mantener tu Sublime ágil, añadir muchas carpetas de trabajo al mismo tiempo ralentiza el editor y ralentiza tu forma de trabajar

¿Qué añadirías tú?

Si tienes más consejos para mejorar la gestión de tus proyectos en Sublime Text, déjamelo en los comentarios. Me encanta hacer mi trabajo más fácil y tus consejos ayudan a todo el que pase por aquí.

gist-pre

Gist repositorio de Snippets en Sublime Text

Cuando desarrollas, de vez en cuando tienes que echar un vistazo al valor de una variable. Yo para eso uso una pequeña función llamada pre. pre no es más que un print_r envuelto en una etiqueta pre.

Un snippet sencillo y rápido de escribir que te echa un cable en cualquier desarrollo. Seguro que tú también tuenes snippets de este tipo que te hacen la vida más fácil.

Gist en Sublime Text es magia negra.

Pre es un ejemplo de lo que quiero hablar hoy, tener este tipo de códigos a mano y bien organizados.

Este es un ejemplo, un código que no es lo bastante extenso para ser un proyecto, ni lo bastante repetitivo para ser un atajo de código, símplemente un trocito de código que puede ser un archivo, o parte de otro.

Al principio copiaba y pegaba el código en Evernote en una libreta de snippets. No estaba mal pero implicaba abrir evernote a cada rato, o tenerlo abierto y en el dock todo el tiempo. Además buscar lo que quiero exactamente se estaba volviendo cada vez más complicado y tedioso, ya que el simple hecho de guardar el código era un rollo.

Durante algún tiempo refiné el sistema y empecé a enviar las páginas desde el navegador a Evernote directamente. Esto mejoraba el guardar los datos pero tenía el inconveniente de que guardaba toda la página, no sólo el código que me interesaba.

Necesitaba un sistema mejor y lo necesitaba cuanto antes, un sistema que me permitirera:

  • Capturar código rápidamente sin esperar a abrir un programa pesado.
    Poder guardar codigo y su contexto, pero diferenciar rápidamente uno de otro.
  • Sin toneladas de datos extra.
  • Y fácilmente accesible en mi editor de código.
  • Archivar en Evernote me parece un método estupendo, siempre lo tienes a mano y en cualquier dispositivo. Así que mi primer paso fue el evidente:

Integrar Evernote en Sublime es algo curioso de hacer, pero el proceso de crear notas y editarlas es confuso y nunca tienes claro si has editado tu nota o creado otra y lo más importante, si se ha guardado.

Pero aprendí dos cosas:

  • Capturar el código y poder recuperarlo directamente en Sublime es El método.
  • Con Sublime puedes hacer de todo porque Siempre hay alguien que ha pensado en ello antes que tú.

Desechando Evernote y buscando un método alternativo

La verdad, soy muy fan de Github. Github es el lugar donde todo el código se está moviendo, es un lugar donde encontrar cosas útiles, aprender cómo funcionan, y adaptarlas a tus proyectos, o usarlas tal cual. Además, Github ofrece Gists, un repositorio de archivos que sirven para guardar pequeños trozos de código.

Perfecto, esto es justo lo que necesito. Pero ahora necesito además poder guardarlos y recuperarlo desde Sublime Text.

Package Control está de tu lado

Package Manager es ésa utilidad para instalar paquetes en Sublime Text que te enseñan a instalar en todos los artículos sobre extensiones del editor. Como he comentado, siempre hay alguien que ya ha tenido tu necesidad antes que tú, por lo que hay un paquete perfecto para nuestro problema, y por supuesto, su nombre es Gist.

Para instalarlo, Comando + Shift + P y luego Install. En la nueva ventana, Gist y ya lo tienes. Te saldrán las instrucciones para configurarlo, que básicamente consisten en crear una firma SSH en Gist y darle ése dato a la configuración de Gist.

Gist en Sublime Text es Magia Negra

Un vez tenemos ésto instalado y configurado, podemos crear y actualizar nuestros Gist desde Sublime Text, y tendremos acceso a todas nuestras utilidades desde cualquier sitio.

gist-pre

Bonus tip

Otra cosa buena que tiene Gist desde Sublime Text es que puedes utilizar ése código en tus posts directamente y tenerlo siempre actualizado sin tener que tocar el post, como pudimos ver en el artículo del Shortcode para mostrar “Mis Pedidos” en Woocommerce o al principio de este post.