19 de diciembre, 2020/
#Directos
#Nextjs
#Tailwindcss

Re-implementando el sitio con Next.js y Tailwindcss

Post hero image

Volvemos a la carga!

Después de mucho tiempo estoy de vuelta escribiendo un post, esta vez es para compartirles como re-implemente este mismo sitio en una serie de directos en mi canal de Twitch.

Espero que esto sea el principio de una etapa mas activa en la generación de contenido y la participación de la comunidad. Ojalá les guste como quedo el nuevo look, que puedan aprender algo viendo como lo hice, a los problemas que me enfrenté y como los resolví.

Por supuesto cualquier consulta o feedback es bienvenido y lo pueden hacer en el grupo de facebook :)

Tecnologías usadas

Como dice el titulo de este post las principales tecnologías elegidas fueron Nextjs y Tailwindcss, la elección de este stack en particular se dió por la gran productividad que brindan pero también porque hace tiempo quería poder implementar algo y ganar mas practica. Por supuesto que el código esta disponible en GitHub para que todos lo puedan ver.

Nextjs

Es un framework de React que se caracteriza por su facilidad de uso y gran experiencia de desarrollo. Dentro de sus principales características esta la de poder expresar las rutas de tu aplicación o sitio simplemente creando una estructura de carpetas y archivos dentro del directorio pages, estas carpetas y archivos serán mapeados a las urls correspondientes, todo esto sin tocar una sola linea de código.

Esto es solo una de toda la cantidad de funcionalidades que incluye, sin duda lo recomiendo si quieren crear aplicaciones o sitios de forma fácil y rápida. Para ver todo lo que se puede crear pueden darse una vuelta por la página de showcase.

Tailwindcss

Es un framework css que adhiere a la filosofía utility-first, es decir se basa en la composición de clases utilitarias para crear tus diseños en vez de traer componentes completos como puede ser el caso de Bootstrap o similares.

De todas maneras yo utilice también unos componentes que son parte de TailwindUI, un producto de pago en el cual se proporcionan excelentes ejemplos de componentes comunes y diversos layouts para poder usar en tus aplicaciones y sitios.

Mas cosas

También utilicé MDX para poder escribir los artículos en Markdown y tener la posibilidad de incluir componentes React dentro del mismo, aunque aun no lo he utilizado en el sitio.

Otra librería interesante que uso en el sitio es date-fns para lo que es todo el manejo de fechas.

Los directos

Sin mas los dejo con la serie de directos que quedaron re-subidos en mi canal de YouTube. Cabe mencionar que el sitio ya ha tenido cambios y mejoras desde que hice estas sesiones de live coding por lo que algunas cosas no son exactamente iguales a lo que se ve en los videos.