← Blog

Mi Setup Front-end

January 14, 2021

Mi Setup Front-end

Foto por @iamthejean

Ok, esta idea no se me ocurrió a mi, en cierta forma me estoy colgando de este artículo de Tania Rascia.

Escribo este post porque siempre he sido curioso por saber que herramientas usan otras personas, sobre todo si son diseñadores o programadores. Espero que para ti sea interesante conocer con que herramientas trabajo.

Sistema Operativo

Odiado y amado, macOs es el sistema operativo que utilizo desde 2013 y del cual me enamoré apenas lo comencé a usar. Hablar de macOS y del porqué es tan bueno daría para largo, así que acotando esto a las tareas de front-end que realizo puedo decir que me gusta que la terminal del mac sea muy parecida a la de Linux, sobre todo porque la mayoría de los servidores en la web corren con Linux.

Ademas, se siente amigable y cercano al momento de hacer cosas tan repetitivas y rutinarias como instalar aplicaciones y navegar por tus archivos. Sobre todo si usas un iPhone o un iPad, el ecosistema será tan necesario como respirar, porque tendrás sincronización de archivos, música y fotos entre dispositivos sin necesidad de bajar aplicaciones de terceros.

Sistema operativo: macOS

Navegador

Mucha gente no los llama navegadores. Un navegador es donde probablemente estás viendo este sitio web. Yo uso Google Chrome, pero existen otras opciones como Firefox, Safari, Opera, Edge, dentro de los más usados. Si eres de probar cosas no tan mainstream puedes darle una oportunidad a Vivaldi, Brave o Iridium que están geniales y son modernos.

Navegador: Google Chrome

Extensiones Web

Dentro de las cosas que hacen tan útiles a los navegadores actuales, es la capacidad de extender o personalizar su funcionalidad para mejorar la experiencia. Aquí hay algunas extensiones que actualmente tengo instalado en mi navegador:

  • Wappalyzer: Detecta las tecnologías que utiliza un sitio web.
  • ColorZilla: Util para usar como un cuentagotas dentro de un sitio web y extraer un color específico.
  • GoFullPage: Para hacer capturas de pantalla de una página completa (hace el scroll hasta abajo automáticamente)
  • Picture-in-Picture: Me encanta poner videos o reproducir contenido en una miniatura mientras trabajo o hago otra cosa.
  • React Developer Tools: Herramientas útiles si trabajas con React
  • uBlock Origin: Indispensable para navegar con la menor cantidad de anuncios posible (eso incluye YouTube)

Editor de texto / IDE / Consola

Pasé por Sublime Text y Atom. Hoy utilizo Visual Studio Code.

Cono terminal de comandos uso Hyper, una terminal hermosa a la que se le pueden instalar temas y es super rápida.

IDE: Visual Studio Code

Terminal: Hyper

Stack

El stack viene a ser el conjunto de tecnologías que se necesitan para correr un sitio web. Por ejemplo WordPress necesita ejecutar el lenguaje PHP, en un servidor Apache o NGINX con una base de datos en MySQL.

Yo solía trabajar solo con LEMP (Linux, NGINX, MySQL, PHP). Últimamente trabajo mucho JAMstack. Hoy salto entre uno y otro dependiendo de lo que el sitio web amerita.

Stack preferido: JAMStack

## Hosting / Cloud Computing

Dentro de las razones que me motivaron a hacer este post está la grata sorpresa de haber probado NearlyFreeSpeech (el que utiliza Tania). Antes de eso era fiel a Digital Ocean y mi stack LEMP. Ahora le he estado dando la oportunidad a LAMP junto a MariaDB. Sin embargo, las posibilidades que da hoy un entorno JAMstack me hace preferir trabajar de esta forma hospedando mis aplicaciones en Vercel y en raras ocasiones en Netlify.

Version Control Hosting

Hace como tres años atrás no usaba ninguna herramienta para control de versiones, lo que hacía mi trabajo muy complejo. Conocer Github fue un cambio radical en mi manera de trabajar; mas ordenado, estructurado y enfocado en tareas.

Así como está Github, existen GitLab y BitBucket, aunque GitHub sigue siendo el más popular y cumple perfecto.

Version Control Hosting: Github

CMS

Hay todo un mundo en los CMS. Y aquí no me puedo decantar por uno solo, ya que dependiendo del proyecto utilizo uno u otro. Uso WordPress en la mayoría de los casos con clientes (por ser el que más se domina mundialmente), sin embargo, me sigue produciendo amor y odio.

Hoy existen CMS para regodearse. Estos son algunos que utilizo o he utilizado y te recomiendo: Sanity, Ghost, Contentful, GraphCMS, Storyblok, CraftCMS.

Preprocesador CSS

Muchas cosas que hoy se pueden hacer con CSS antes se podían hacer solo con preprocesadores. Hoy la cosa avanza hacia los Post-procesadores. SASS es mi lenguaje de preprocesador favorito para CSS y no tengo una justificación para preferirlo por sobre otro, simplemente me gusta y me he acostumbrado a escribir sin “{}”.

CSS Preprocessor: SASS

Framework CSS

Debo ser sincero: no me gustan los frameworks de CSS. Sin embargo cuando trabajas en equipo y a contratiempo estás obligado a aprenderlos y utilizarlos. Actualmente el que más uso es Tailwind.

Framework CSS: Tailwind

Cifrado (TLS/SSL)

Hoy es básico encriptar un sitio web. Google Chrome, por ejemplo, presenta problemas con algunos sitios que no lo están. Cuando el entorno no me ofrece este cifrado por defecto yo utilizo Let’s Encrypt. Es gratis, es seguro, es perfecto.

Cifrado: Let's Encrypt

CDN

Un CDN sirve el contenido de tu sitio web a través de servidores ubicados en distintas partes del mundo, de esta forma si alguien entra a el, el CDN lo sirve desde el servidor más cercano. Yo uso Cloudflare, y para mi es suficiente. Sin embargo no lo necesito cuando utilizo Vercel, ya que ellos disponen de un buenisimo CDN incorporado.

CDN: El que ofrece Vercel, Cloudflare (rara vez)

Hay muchas otras cosas que de vez en cuando y dependiendo del proyecto podemos usar, pero esto es, en cierta forma, lo básico. Gracias por leer, espero haberte animado a probar algo nuevo.