Sobre www.shibumi.cl

En Shibumi seguimos el principio de comernos nuestra propia comida de perro, o sea, usar para nosotros las mismas herramientas que ofrecemos a nuestros clientes. Esto es muy importante, sobre todo en el mundo de Desarrollo de Software, ya que nos permite ofrecer productos que sabemos con seguridad darán los resultados esperados.

En el caso de nuestro sitio hemos utilizado tecnologías simples y efectivas para obtener un sitio rápido, atractivo y con la capacidad de tener un blog propio. Es por eso que nos hemos decidido por las siguientes herramientas y servicios:

Jekyll como servidor de sitios estáticos.
Tailwind CSS como biblioteca de estilos.
Netlify como proveedor de plataforma.

Cada uno provee funcionalidades complementarias que juntas logran resultados muy efectivos.

Tailwind CSS

Los credores de Tailwind CSS lo definen como un framework utility-first, de bajo nivel y altamente personalizable, que provee de los bloques básicos para construir sitios hechos a medida. En la práctica, Tailwind CSS es un conjunto de clases de bajo nivel para construir virtualmente lo que queramos. En frameworks de alto nivel, para crear un boton primario escribimos:

<button class="btn btn-primary">Contacto</button>

en Tailwind CSS, para escribir un botón como el de Contacto escribimos.

<button class="px-6 py-3 text-xl text-white border-2 rounded-full border-primary-blue bg-primary-blue hover:bg-white hover:text-primary-blue">Contacto</button>

A simple vista parecen demasiadas clases para hacer un botón, y es cierto, puede ser abrumador en un principio, pero cuando se entiende que cada clase aporta una característica particular en el elemento, cada clase toma sentido y utilidad.

Pros y contras

Los pros y contras de Tailwind CSS, en nuestra opinion son:

Pros:

Completa flexibilidad para alcanzar el resultado deseado. Con otros frameworks (Bootstrap, Bulma, etc) uno en general se queda con lo que se provee.
Buena documentación y herramientas atractivas. Como ejemplo, hace unos días de la creación se este blog se lanzó Tailwind Play, un sitio para probar y desarrollar en Tailwind CSS y ver los resultados en tiempo real, sin tener que instalar el framework localmente.
Gran colección de elementos pre definidos generados por usuarios o oficiales (por medio de Tailwind UI).

Contras:

El uso de muchas clases se puede volver conflictivo en el desarrollo de sitios grandes si no se parte con un orden en mente, sobre todo con equipos de mas de una persona (se puede usar @apply pero ese ya es otro tema).
Requiere de cierta configuración para integrarlo en ambientes de producción.
Requiere soporte especial de Javascript para manejar transiciones.
No existen (oficialmente) elementos de alto nivel como por ejemplo, selectores múltiples con búsqueda. Estos elementos de alto nivel son casi siempre usados en aplicaciones web mas que en sitios informativos. En caso de necesitarse deben ser programados a mano lo cual puede ser una pérdida de tiempo.

Jekyll

Jekyll es un generador de sitios estáticos. Los sitios estáticos generan el HTML del sitio una sola vez, a diferencia de sus contrapartes que usan bases de datos (como WordPress) que generan el sitio de forma dinámica cada vez que se solicita una página. La ventaja de los sitios estáticos es que son extramadamente rápidos y no necesitan de un servidor exclusivo para poder funcionar. La gran mayoría de los sitios de empresas o informativos no requieren del nivel de dinamismo que proveen los sitios dinámicos, por lo que los sitios estáticos son una excelente alternativa sin tener que levantar infraestructura.

Generadores de sitios estáticos existen en grandes cantidades, cada uno con sus ventajas y desventajas. En Shibumi nos decidimos por Jekyll por estar construido en Ruby (lenguaje que nos encanta) y porque provee de las herramientas necesarias para lograr lo que queremos.

Una de las características de Jekyll es que nativamente soporta la creación de blogs.

Pros:

Su puesta en marcha no requiere mayores requerimientos.
El blog es un ciudadano de primera categoría.
Por ser uno de los generadores de sitios mas antiguos, existen muchos plugins y extensiones.
Sistema de templates fácil de usar.

Contras:

Requiere un poco de conocimientos de programación para estructurar un sitio compueto de varias plantillas.
Existen generadores más rápidos en este momento.
Existen generadores basados en React (como Gatsby) que proveen de funcionalidades mas sofisticadas, como GraphQL y Javascript en general.

Netlify

Todo sitio web necesita un servidor en donde alojarse y dependiendo del tipo de sitio existen diferentes plataformas. En el caso de los sitios estáticos lo que se necesita es velocidad, ya sea en la puesta en marcha como en la velocidad de entrega de las páginas. Netlify ofrece eso y más, como por ejemplo, manejo de formularios y envío de emails, cosas básicas en cualquier sitio y que Netlify maneja perfectamente dentro de su plataforma. Basta agregar el tag netlify a nuestro formulario y éste ya es reconocido por la plataforma:

<form name="contacto" action="/contacto-enviado" netlify>

y con eso ya se pueden recibir correos desde el formulario sin mas configuración.

Pros:

Increiblemente rápido y con una excelente plataforma de administración.
Proceso de deploy rápido y cómodo, soporta un sin número de generadores estáticos.
El rango grátis es suficiente para un sitio de bajo tráfico o pruebas de concepto.

Contras:

Requiere de un poco de conocimiento de flujos de deploy y manejo de control de versiones (git).
El CMS es un poco engorroso de configurar y utilizar (comparado con CMSs como WordPress), sobre todo para ser usados por un usuario final.

Conclusión

Con esto queremos dar un inicio a una pequeña serie de artículos basados en nuestras experiencias de desarrollo, y nada mejor que partir con nuestra cara visible, la cual demoró un poco en salir, pero estamos muy contentos de tenerla. Si estás interesado en como se desarrolló este sitio, proximamente estará liberado para que puedas usarlo y aprender desde el código.