micro notas

Micro notas #8

Esta micro nota recorre varios temas enfocados a dar pasos sólidos en nuestro desarrollo como programador y al final tocamos un poco de historia, o más bien curiosidades.

Gitly – Gitly.co es un boletín semanal de los proyectos de código abierto más hablados en Github. La peculiaridad de este servicio es que el boletín es filtrado según los lenguajes de programación de tu preferencia. La subscripción es sencilla ya que solo tienes que mencionar cuales son esos lenguajes de programación y proveer tu correo electrónico. Me parece un buen servicio para descubrir nuevos proyectos en los cuales se pueda aportar algo. O simplemente mantenerse al día de lo que está pasando según el o los lenguajes que más domines o llamen tu atención.

A Good User Interface – Todo buen desarrollador debe tener un conocimiento básico sobre user interfaces. Esta referencia es una colección de ideas que han sido probadas y garantizan cierto grado de resultado. La documentación es sumamente clara y sin duda un buen lugar para tomar ideas y retar nuestras propios conceptos relacionados al UX/UI (así es los dos deben andar juntitos).

Getting Git Right – Si además de la excelente documentación disponible en el website de Git necesitaras alguna otra referencia sobre el tema, te comento que Getting Git Right es lo mejor que vas a encontrar. No creo que haya otra guía más completa que esta.

The Scientific 7-Minute Workout – Veo la palabra ciencia junto a rutina de ejercicio físico y no puedo dejar de compartir. El sedentarismo físico que experimentamos aquellos que viven casi detrás de un monitor es de dañino. Siempre ando buscando métodos que puedan ayudar a mejorar la calidad de vida y los tips mencionados en estos artículos son exactamente lo que a veces necesitamos para salir de la rutina. En fin nada mejor que estirarnos y comenzar el día en buena aptitud.

CodeNewbie – Comunidad de programadores y personas que están aprendiendo código. Muy buen recurso para comenzar a empaparse sobre el tema de la programación y el estilo de vida alrededor de esta profesión.

The hamburger icon (☰) – Esto es mas bien una curiosidad que quise compartir. Nunca imagine que el origen de las famosas barras que vemos en cada opción de menú hoy en día tuviera un origen tan remoto y épico. Aunque tengo mis sospechas que originalmente el autor de dicho icon, Norm Cox, pudo haberse inspirado en algo más mistico.

programación

Como usar Git para hacer deploy de nuestro website

No hay duda de las ventajas de un sistema de version control en nuestro flujo de trabajo. Servicios como Github y Bitbucket son eco de cómo ha evolucionado la manera en que escribimos y compartimos código entre colegas. Inclusive si eres un desarrollador solitario estos servicios son de gran ayuda a la hora de crear nuestros proyectos.

De eso se trata precisamente esta nota, vamos a configurar un ambiente de desarrollo en donde podamos utilizar Git para realizar el deployment de nuestro proyecto. Antes de comenzar a presionar teclas a diestra y siniestra vamos a detenernos a pensar en lo que vamos a configurar.

Vamos a crear un repositorio vacío en nuestro web hosting. Luego crearemos un repositorio en nuestro ambiente local y lo sincronizaremos al repositorio remoto. Por último crearemos la lógica para que cada vez que publiquemos un cambio, el mismo se actualice automáticamente en nuestro repositorio principal y a su vez en el folder público de nuestro website. La siguiente gráfica nos presenta un panorama de lo que acabamos de describir.

website-workflow-using-git

Para poder simplificar el proceso hay algunas cosas que vamos a asumir.

  1. Voy asumir que ya tenemos instalado Git y Git Bash en nuestro ambiente local. Git Bash lo vamos a utilizar para realizar los comandos de SSH.
  2. Voy asumir que tenemos acceso a nuestro provedor de hosting a través de SSH. Para este tutorial voy a utilizar Dreamhost como hosting. Antes de proseguir te recomiendo que verifiques y te empapes sobre como accesar tu hosting server usando SSH.
  3. Voy asumir que ya tenemos instalado Git en nuestro hosting server. Aunque para estar 100% seguros vamos a verificarlo.

Vamos a realizar una conexión SSH a nuestro servidor. Para eso vamos a usar el Git Bash.
Normalmente podemos hacer una conexión SSH usando el siguiente comando:

ssh <tu-username>@<tu-domain-name>

Una vez autentiquemos con el hosting server procedamos a verificar si Git está instalado.

$ git --version
git version 1.7.9.5

Si puedes ver el número de versión estamos más que seguro que tenemos instalado Git. De no tenerlo te recomiendo que visites el siguiente tutorial antes de proseguir con los pasos aquí mencionaos.

Vamos a comenzar creando el repositorio en nuestro hosting server. Este repositorio fungirá como repositorio principal. Para tener cierto control sobre los cambios que ocurrirán en este repositorio vamos a utilizar el flag –bare junto al comando git init. Admás, por conveniencia vamos a terminar el nombre del repositorio usando .git.

$ git init --bare website.git

Está instrucción va a devolver el siguiente mensaje:

Initialized empty Git repository in /home/<tu-username>/website.git/

Hemos utilizado website como nombre para el repositorio. O sea que el repositorio se llamará webiste.git. Cabe destacar que este repositorio debe ser creado en el directorio home y no en el public folder. La intención de esto es mantener segura y privada la configuración de nuestro repositorio. Hasta el momento hemos creado un repositorio en el home folder de nuestro hosting.
Para verificar que todo está en orden vamos a entrar a nuestro repositorio y verificar el status.

$ cd website.git/
$ git status

Si vemos la siguiente línea, no te asuste, es lo que debemos ver ya que el repositorio esta vacio y es tipo bare.

fatal: This operation must be run in a work tree

Antes de continuar con nuestro repositorio local vamos a configurar un server-side hook como parte de nuestro repositorio remoto para configurar la actualización de nuestro public-folder. Aquí es donde técnicamente ocurre toda la magia. Los hooks son rutinas que se ejecutan automáticamente cada vez que ocurre un evento particular en el repositorio. A través de estas rutinas podemos extender las funcionalidades de Git y adaptarlas a nuestro ambiente de desarrollo. En este caso vamos a configurar un hook para que cada vez que ocurra un git push a nuestro repositorio remoto se publiquen los cambios al public-folder. Para lograr eso vamos utilizar el siguiente comando:

$ nano > hooks/post-receive

Y escribimos el siguiente script la ventana de nano:

#!/bin/sh
GIT_WORK_TREE=/home/<tu-username>/<tu-dominio.com>/public-folder git checkout -f

Para terminar presionamos Ctrl+X y guardamos el archivo. Ahora aplicamos el siguiente permiso al archivo del script que acabamos de crear:

$ chmod +x hooks/post-receive

Ahora pasamos a trabajar en nuestro repositorio local. Te recomiendo que abras otra ventana de Git Bash para trabajar localmente. Lo primero que vamos hacer es ir a nuestro working folder. En mi caso mi working folder se llama code y se encuentra dentro de Documents.

$ cd /c/users/<tu-username>/Documents/code

Ahora aprovechando que tenemos Git vamos a utiliza la función de git init para crear un proyecto a nuestro folder local. Para este tutorial voy a crear un folder llamado website-project.

$ git init website-project

Atención, si ya tienes un proyecto que deseas utilizar como para este tutorial, lo único que tienes que hacer es utilizar el comando de git init en tu folder de tu proyecto. Por el momento vamos a seguir trabajando dentro del folder website-project.

$ cd website-project

Como estamos usando Git vamos a clonar un repositorio localizado en Github. Vamos a usar el template de HTML 5 Boilerplate como base para nuestro website.

$ git clone https://github.com/h5bp/html5-boilerplate.git

Vamos a mover el código que nos interesa al working folder o sea al folder website-project. Como estamos en el Git Bash hagámoslo usando el siguiente comando:

$ mv html5-boilerplate/dist/* ./

El resto del código que no vamos a utilizar lo vamos a borrar.

$ rm -r -f html5-boilerplate/

Ahora nuestro repositorio local está casi listo para hacer commits. Actualmente nuestros archivos están listos para ser añadidos al version control. Si ejecutamos el comando git status vamos a ver que el siguiente mensaje:

Untracked files:
  (use "git add ..." to include in what will be committed)… etc
        404.html
        apple-touch-icon.png
        browserconfig.xml
        crossdomain.xml
        css/
        doc/
        favicon.ico
        humans.txt
        img/
        index.html
        js/
        robots.txt
        tile-wide.png
        tile.png

nothing added to commit but untracked files present (use "git add" to track)

Vamos bien. Procedamos a añadir los files al version control del repositorio. Para esto vamos a realizar la siguiente instrucción:

$ git add *

Ahora cuando hagamos git status vamos a ver que nuestros files están en la fase staged, o sea listos para commit. Para realizar nuestro commit vamos a utilizar el siguiente comando:

$ git commit -m “Configuración inicial.”

Si revisamos el repositorio usando git status veremos lo siguiente:

On branch master
nothing to commit, working directory clean

Ahora vamos a añadir la conexión de nuestro repositorio remoto al repositorio local. Pasemos a crear la conexión usando el siguiente comando:

$ git remote add <nombre-creativo> ssh://<tu-username>@<tu-domain-name>/home/<tu-username>/website.git

El nombre creativo puede ser algo tan sencillo como deploy. Ya con esta configuración podemos hacer nuestro primer push. Este push será el responsable de sincronizar el repositorio local con el remoto.

$ git push <nombre-creativo> +master:refs/heads/master

Listo!
Ahora cada vez que hagamos un cambio a nuestro projecto lo único que tenemos que hacer es utilizar la instrucción de push usando el nombre que hayamos asignado:

$ git push <nombre-creativo>

Recuerda que antes de hacer el push debe hacer commit del cambio. Una atajo para añadir el cambio y hacer el commit es a través del siguiente comando:

$ git commit -a -m “<descripción-del-commit>”

Esto es todo por el momento. Cabe destacar que el 80% de los problemas que puedas encontrar siguiente el tutorial probablemente sea relacionado a SSH y a la configuración de tu hosting server. Recuerda que para este tutorial se utilizó como hosting provider Dreamhost y es muy probable que tu proveedor tenga otra configuración similiar a la que aquí se mencionó.

Gran parte de este tutorial está inspirado en el trabajo de Abhijit Menon-Sen, Using Git to manage a web site. Si deseas profundizar en el tema de Git te recomiendo la guía Getting Git Right muy elegantemente mantenida por Atlassian que es la compañía detrás de Bitbucket.

diseño

Cuando se mezcla el User Experience con la física

Después de haber estudiado un poco los trabajos de Bret Victor (y digo un poco porque la visión de este señor es muy ambiciosa) sobre el potencial del user experience, encuentro igual de interesante la siguiente presentación de Ralph Thomas, Creating Animations and Interactions with Physical Models. Me parece impresionante la presentación y como utiliza términos como velocidad y momentum (cantidad de movimiento) y las entrelaza con la animación e interacción de elementos que comúnmente vemos en las interfaces de hoy en día. A través del artículo puedes interactuar con varias simulaciones cada una debidamente explicada. Lo mejor de todo es que cada simulación se encuentra disponible para experimentación en su cuenta de Github. Y si eres desarrollador en Java puedes verificar la librería Gravitas que también es de su autoría y utilizó para el juego Letterplex disponible para Android.

micro notas

Micro notas #7

En la siguiente micro nota hablamos rápidamente de CSS y SASS.

Introducing SASS Guidelines – El francés Hugo Giraudel ha creado una tremenda guía para organizar propiamente nuestro SASS. Tomando como inspiración la guía para CSS de Harry Roberts, Hugo hizo lo propio pero para el metalenguaje SASS.

The 2014 CSS Report – Este reporte es el producto de un arduo estudio en donde se analiza el uso de CSS en los websites más populares de Internet. Para que tengamos una idea, se examinaron 28,000 archivos CSS repartidos entre un total de 10,400 dominios. Ejemplo de información derivada de este análisis: Los selectores Top 5 fueron body, textarea, h1, pre, h2. El 99.6% de los colores se trabaja utilizando la unidad de Hex y la adopción del formato .png es de un 77.7%. Y la conclusión diría que muy positiva:

  1. La gente es descuidada con su CSS
  2. Una hoja de diseño bien mantenida puede manejar muchos de los problemas que se ven comúnmente
  3. La características de un CSS modernos son ampliamente utilizadas

Me parece que el trabajo realizado por Alex McPherson ha sido muy brillante.

micro notas

Micro notas #6

La primera micro nota de 2015. Estos son algunos de los artículos o referencias sobre el tema de la programación que han capturado mi atención durante esta semana.

Building Your Resume Like a Boss With CI – Recientemente anda flotando por mi cabeza la idea de crear un resume bastante geek Creo que con esta iniciativa de Steven Edouard estoy listo para realizar uno que otro experimento. Así de una vez sigo puliendo el tema del Continuous Integration.

Los Top 10 Projects de Michael Fogleman durantel el año 2014 – En este artículo podrás leer un poco sobre el tema de OpenGL. Pero lo genial del asunto es ver como Michael Fogleman se las ha ingeniado para mezclar arte, programación, trigonometría, hubicación de satelites GPS entro otros temas, en pequeños proyectos que ha desarrollado durante el 2014. Sin duda alguna da gusto pasar por su GitHub para revisar el código.

Why Instagram Worked – Este otro artículo es de esas lecturas inspiracionales sobre start-ups. Obviamente que ya todos sabemos el desenlace de esta start-up. De todas formar es interesante repasar los momentos históricos por los cuales atravesaron el equipo de Instagram hasta llegar a ser la red social que es hoy en día.

¡Libros gratis! PHP The Right Way: The Book y Speaking JavaScript – El primero es la última revisión de la versión ebook del website PHP The Right Way y el segundo trata sobre Javascript. Son gratis así que no hay nada que perder. Por el contrario ambos son excelentes referencias.

Papers We Love – Papers We Love es una colección de tesis que trata virtualmente sobre cada tema relacionado al Computer Science. Estos son esos documentos que cuando lees no entiendes o si entiendes algo te hacen cuestionar toda tu ética y andamiaje como programador o científico. Por ejemplo podrás encontrar el paper de Roy Fielding, Architectural Styles and the Design of Network-based Software Architectures en donde se desarrollan las bases para la arquitectura tipo REST. Ya saben, eso que la mayoría de los API de hoy en día utilizan.

programación

Refactoring Loops and Conditionals por Adam Wathan

En muchas ocasiones para aprender un concepto es mejor observar a otro haciendo el trabajo. Refactoring Loops and Conditionals es una excelente demostración sobre el tema de refactoring de la mano de Adam Wathan. Es interesante ver el proceso mental y la lógica envuelta a la hora de escoger las técnicas para hacer refactoring. Muestra además un buen ejemplo de lo que es programación funcional en PHP. Sin duda es un video que no solo aplica a los desarrolladores que usan PHP sino a todo programador interesando en el tema del refectoring. Observar el proceso “en vivo y a todo color” no tiene precio.