Abe Estrada

Al principio mis primeras líneas de código eran escritas en Notepad de Windows y cada cambio que hacía lo subía con una aplicación FTP a un servidor y cargaba la página de nuevo (“refresh”) para ver el cambio.

Conforme han pasado los años mi flujo de trabajo ha cambiado, primero tenía un servidor web local con la misma configuración que el servidor de producción para poder ejecutar el código en las “mismas” circunstancias, luego cambié a utilizar MAMP por que no quería estar haciendo los cambios a mano y por que es fácil descargar simplemente la app y empezar a trabajar, ya que no quería pasar mucho tiempo configurando el ambiente de desarrollo.

Ahora los tiempos han cambiado y con Docker se han facilitado mucho las cosas, solo es cuestión de escribir un archivo de configuración y Docker se encarga de crear el ambiente exacto donde se ejecutan las aplicaciones y código que utilizo.

Me gusta utilizar .dev como TLD local para accesar al contenedor ejecutando el servidor en Docker en mi computadora y siempre utilizo el mismo dominio que el servidor de producción, por ejemplo: https://abeestrada.com (producción) y https://abeestrada.dev (local), y por lo regular tengo dos pestañas en mi navegador abiertas una con la dirección del servidor de producción y otro con la aplicación local (.dev), y tenía problema a la hora de disntinguirlas rápidamente, ya que llevan el mismo título.

Es por eso que he creado una pequeña extensión para Goog Chrome para tener una referencia visual y permitirme abrir la pestaña de forma natural y rápida.

Dev Indicator, esta extensión añada un emoji de una taza de café ☕️ para distinguir cual es la pestaña del navegador con una página ejecutandose localmente. La extensión se ejecuta solamente en cualquier dominio .dev, localhost o 127.0.0.1. Con esto puedo saber cual es la pestaña en la que estoy trabajando localmente.

Por ahora es una extensión para resolver un problema personal, debido a que las otras soluciones que permiten cambiar el título a las pestañas de Google Chrome son muy complejas y requieren demasiada configuración para algo tan simple. En un futuro espero poder agregar una o dos opciones para personalizar el ícono o texto, pero por ahora resuelve mi problema.

Chrome Web Store: Dev Indicator