Mi breve historia con los blogs

Desde hace muchísimos años, estoy hablando del 2003/2004 encontré plataformas como LiveJournal o Blogger y empecé a ver que mucha gente escribía diarios en línea. Algo así como lo que eran las páginas de GeoCities en los 90's que tenían páginas de visitas y eran lugares divertidos para escribir cualquier cosa.

Desde ese entonces me ha interesado muchísimo este fenómeno de tener un sitio web propio y llenarlo de contenido y con el pasar de los años he intentado crear y mantener un blog.

Es más, en el 2007 aprendí a usar WordPress y de ahí me volví soporte técnico de blogging para varias chicas que tenían blogs de moda. Me pagaban para ayudarles a modificar sus comentarios, los menús, hasta conseguí trabajos con influencers grandes de esa época. Me especialicé tanto en WordPress que trabajé desarrollando sitios en WordPress hasta inicios de 2016.

Durante todo eso, siempre tuve un sitio como proyecto para probar las cosas nuevas que salían pero nunca logré tener una audiencia o desarrollar un presencia en línea. Nunca hice mucho sobre monetización ni nada por el estilo.

Ahora estoy escribiendo este blog para generar un recurso para la yo del pasado y todas esas personas que pasan por estos pequeños problemas y no encuentran las soluciones fácilmente.

¿Por qué Gatsby?

GatsbyJS me llamó la atención porque no conocía los generadores de sitios estáticos. Todo mundo decía que era muy sencillo de usar, incluso yo cuando creé este sitio, pero luego me di cuenta que para hacer cosas más complejas realmente hay que conocer todas sus partes. Hay que saber usar React, hay que saber usar GraphQL y hay que saber configurar Gatsby para lograr lo que quieres. Hacer la instalación inicial es muy rápido con su herramienta de línea de comando (CLI), pero después se puede volver confuso para cambiar cosas.

Quiero seguir intentando con Gatsby porque me ha gustado la experiencia de usar GraphQL pero aún tengo mucho que aprender en términos de cómo Gatsby funciona internamente y otras cosas que puedo hacer con él.

¿Por qué Ghost?

Ghost es un administrador de contenido hecho en Node. Recuerdo la primera vez que escuché de él fue por ahí del 2013. No lo usé al principio porque recuerdo que mi compañía de hosting no lo soportaba. Después lo usé brevemente en 2017 cuando recién me mudé a Alemania pero la verdad es que el diseño y las plantillas no me gustaban y no quise aprender a hacer temas en Handlebars.

Después de que leí un artículo en Smashing Magazine sobre usar CMS en modo headless, o sea como fuentes de contenido en lugar de tener el contenido y el front-end en el mismo lugar decidí buscar si eso se podía hacer con Ghost. Pues resulta que sí se puede y tienen tanto un plugin de Gatsby para hacerlo, como un proyecto listo para empezar a usar Ghost. Además se puede usar junto con Netlify y todos los aspectos de administrar y publicar tu sitio están cubiertos.

Ahora sí, vamos a empezar

Para crear un blog con Gatsby y Ghost se necesitan dos cosas:

1. Una instalación de Ghost
2. Un proyecto de Gatsby

Nota: todo este tutorial se puede hacer en localhost, pero para ponerlo en línea usé un droplet de Digital Ocean para poner mi instalación de Ghost y alimentar el front-end en Gatsby.

Paso 1: Instalar Gatsby

Para instalar Gatsby hay que instalar su herramienta de línea de comando. Como lo mencioné en mi post anterior sobre crear blogs con Gatsby, hay que correr el siguiente comando:

npm i -g gatsby-cli

Paso 2: Instalar Ghost

Para instalar la herramienta de Ghost en un ambiente local, hay que correr el comando:

sudo npm install -g ghost-cli

Esto nos permitirá crear el blog en Ghost que servirá para alimentar de contenido nuestro front-end en Gatsby.

Paso 3: Crear un blog en Ghost

Primero vamos a crear el blog en Ghost. Esto es importante ya que necesitaremos algunos datos de la instalación de Ghost para conectarla con Gatsby.

Crea un nuevo directorio para tu blog en Ghost:

mkdir ghost-blog && cd ghost-blog
ghost install local

Sigue las instrucciones de instalación y crea tu usuario de Ghost.

Cabe mencionar que la instancia de Ghost se quedará funcionando en segundo plano, así que no necesitas correrla activamente para usarlo.

Una vez dentro, en el menú elige Integrations y vas a ver una opción que se llama + Add custom integration. Se va a ver algo así:

Oprime + Add custom integration y dale un nombre a tu instalación. Yo la llamé Gatsby para mantener las cosas sencillas.

Ya que creaste la integración, vas a ver una pantalla con algunos datos, entre ellos uno llamado Content API Key. Esta llave es la que necesitamos para poder alimentar el contenido a Gatsby. Así que mantenla a la mano para lo que sigue.

Paso 4: Crear un sitio de Gatsby

Para crear un sitio en Gatsby usando la herramienta de línea de comando, vamos a correr el siguiente comando en la consola:

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Este comando va a llamar el repositorio de la plantilla de inicio para hacer un sitio en Gatsby. Este sitio va a tener las cosas básicas que necesitamos para empezar a trabajar, es el equivalente a escribir "Hola Mundo" usando Gatsby.

La razón por la que no elegí usar la plantilla que ya trae Gatsby conectado a Ghost o usar la plantilla de blog de Gatsby es que estas plantillas traen muchas configuraciones. Todas esas configuraciones añaden una capa de complejidad a la hora de querer cambiar estilos o hacer cosas distintas a las predeterminadas. Me gusta mucho más tomar lo básico y aprender desde lo más abajo posible para después poder entender cómo funcionan las configuraciones más complejas. Por eso hoy empezaremos a trabajar con la plantilla inicial y no con algo más elaborado.

Ya que terminó el instalador, vamos a cambiar de carpeta y a correr nuestro servidor de Gatsby en modo de desarrollo:

cd gatsby-site
gastby develop

Si todo salió bien, debes de ver poder visitar http://localhost:8000 y ver las palabras Hello World.

Si te fijas en la consola, vas a ver que existe otra dirección, http://localhost:8000/___graphql, si vamos a esta URL podemos ver una instancia de GraphiQL. En esta parte podemos probar las diferentes consultas y operaciones que se pueden hacer con GraphQL y Gatsby antes de ponerlas en el código.

Vamos a jugar bastante con esta consola más adelante para crear las consultas que usaremos en el blog.

Paso 5: Conectar Gatsby y Ghost

Algo bien padre que hizo la comunidad de Ghost fue crear un plugin para Gastby que crea la conexión entre la API de Ghost y el GraphQL de Gatsby. Usar un sistema de blog de esta forma se llama headless CMS o administrador de contenido sin cabeza.

Headless CMS se refiere a que en lugar de usar el CMS para guardar el contenido y presentarlo, usamos sólo los datos y los presentamos en otro lado. En este caso, usaremos Gatsby para hacer un sitio estático usando los datos de Ghost.

El plugin se llama gatsby-source-ghost y lo vamos a agregar a Gatsby de la siguiente manera:

yarn add gatsby-source-ghost

Ya que está instalado, hay que abrir el archivo gatsby-config.js. Este archivo va a tener todas las configuraciones que necesitamos para hacer funcionar el sitio. Para configurar nuestro Ghost hay que añadir el siguiente bloque de código dentro de plugins: []:

{
   resolve: `gatsby-source-ghost`,
   options: {
       apiUrl: `https://<your-subdomain>.ghost.io`,
       contentApiKey: `<your content api key>`,
       version: `v3` // Ghost API version, optional, defaults to "v3".
                     // Pass in "v2" if your Ghost install is not on 3.0 yet!!!
   }
}

• apiUrl - aquí va la URL de la instalación de Ghost, si es local entonces hay que poner la URL del localhost.
• contentApiKey - la llave que sacamos cuando hicimos la integración en Ghost
• version: la versión de Ghost

Ahora hay que reiniciar el servidor de Gatsby para ver los cambios.

En la parte visual no se va a notar nada ya que no hemos cambiado la interfaz. Entonces hay que visitar GraphiQL para ver las nuevas interfaces que tenemos disponibles.

Ahora nuestro Ghost está conectado con Gatsby. Es importante notar que cada que hagamos un cambio en Ghost, será necesario volver a compilar el sitio en Gatsby.

Ahora podemos hacer consultas a nuestro sistema en Ghost. Una de ejemplo puede ser para conseguir datos del sitio, como el título y la descripción.

query MyQuery {
  ghostSettings {
    title
    description
  }
}

En el caso de mi sitio el resultado va a ser:

{
  "data": {
    "ghostSettings": {
      "title": "Juliescript",
      "description": "Otro blog de tecnología en español."
    }
  },
  "extensions": {}
}

¡Al fin tenemos Gatsby y Ghost conectados!

Con esto se termina el tutorial de hoy pero en la siguiente parte veremos como crear páginas usando las consultas de Ghost.

La historia

En agosto del año pasado nos comprometimos durante nuestras vacaciones en Japón.

Decidimos planear nuestra boda en México porque aunque vivimos en Alemania, nuestras familias están en México y es donde queremos celebrar con todos nuestros seres queridos.

Una de las partes más importantes de planear una boda son las invitaciones. Usualmente se hacen de forma física, son cosas muy hermosas y elaboradas que se envían a los invitados. En ellas se encuentran todos los datos sobre la boda como:

• Fecha
• Lugar
• Hora
• Programa
• Etiqueta
• Mesa de regalos
• Boletos para la recepción

Hacer invitaciones no es una opción para nosotros. Tenemos que coordinar invitados que vienen de distintas ciudades y de distintos países. Además de que mandarlas a hacer puede ser muy caro y enviarlas es mucho trabajo.

Por eso fue que decidimos usar nuestras habilidades como desarrolladores y unir fuerzas para crear un sitio web para nuestra boda.

El sitio

Nuestro sitio va a tener dos funciones principales:

• Dar la información sobre la boda
• Administrar la asistencia de los invitados

Así que pensamos en crear un sistema que sirviera para que los invitados confirmen su asistencia y que después podamos enviar la invitación más formal en PDF antes del mero día de la boda.

Para lograr esto nos dividimos el trabajo. Mi prometido se encargó de hacer todo el backend y yo me encargué de hacer el frontend. Entre los dos decidimos en un diseño y agregamos el contenido a la página. Mi prometido se encargó de traducir los textos porque necesitamos tener el sitio en español e inglés.

Va sin recalcar que tenemos excepciones para invitados que no saben o que no tienen acceso a la web.

El tech stack

Para el backend, todo fue manejaod por mi prometido así que no entraré en muchos detalles.

El lenguaje de programación fue Rust porque es el lenguaje que está usando ahora.

El stack del backend terminó así:

• Rust
  • Gotham - para manejar el API
  • Diesel - para conectar y administrar la base de datos
• PostgreSQL
• GitHub Actions
• Hosting en Digital Ocean

El stack del frontend fue el siguiente:

• Angular 9
• SASS
• Deploy en Netlify

Para el manejo de usuarios decidimos usar Facebook y Google login. La verdad no queríamos quedarnos con información personal del usuario y no quisimos lidiar con GDPR.

El proceso

En el momento en que empezamos a planear el sitio, mi prometido estaba tomando una clase de administración de proyectos web para su maestría. Por mi lado, he tomado varios talleres de generación de ideas y de crear proyectos de forma ágil.

De nuevo juntamos recursos e hicimos una sesión para definir que es lo que necesitaba la página y que es lo que queríamos lograr. Al final terminamos poniendo todas las tareas en un tablero tipo Kanban en JIRA. Esto nos ayudó mucho a mantener nuestro objetivo en la mira.

El diseño

El diseño fue decisión principalmente mía. La verdad soy pésima diseñando así que me puse a buscar inspiración en Pinterest y otros sitios como Wix y Squarespace.

Al final decidí reproducir una plantilla de sitio para boda de Squarespace. El diseño nos gustó mucho porque era sencillo y elegante. El esquema de colores es neutral y no se ve super feminino o masculino.

Es un diseño bastante sobrio y la tipografía me encantó.

Además de que ya viene con diseño móvil que siempre es un viacrucis incluir.

Plantilla Morena de Squarespace

A partir del diseño creamos las demás páginas que no estaban definidas.

No tiene nada de malo reproducir un diseño ya creado si no eres bueno en diseño o si no puedes pagarle a un diseñador.

El frontend

Jugué con la idea de hacer el frontend con React y Gatsby pero la verdad es que me siento mucho más cómoda con Angular. Puedo resolver problemas mejor y no tengo que sufrir tanto conectándome al backend.

Además de que estilizar Angular es algo que es un sueño cuando lo haces con SASS. Es mi tech stack favorito y me ha servido bien varios años ya.

El mapa del sitio quedó de la siguiente manera:

• Página principal
• Información de la boda
• Información de viaje
• RSVP
  • Login
  • Redirección de login de facebook
  • Página de perfil
• 404

Diseño responsivo

Hacer sitios responsivos creo que es algo que nos llega a dar mucha flojera a varios programadores. Hay muchas variables y hay que escribir mucho código. Afortunadamente pude usar casi puro CSS para manejar el diseño responsivo.

La única ocasión donde tuve que incorporar Javascript fue con el menú para dispositivos móviles. Necesitaba manejar cuando activo y desactivo el menú y no me quise complicar la vida. Así que fue con Javascript.

Facebook y Google Login

Para el manejo de usuario usamos Google y Facebook login. Toda la implementación la hizo mi prometido en Rust, así que del lado del frontend me tocó manejar las redirecciones.

El flujo que tenemos es el siguiente:

1. Usuario recibe un link de invitación con un código único
2. En la página, el usuario puede elegir entre iniciar sesión con Facebook o con Google
3. Ya que se inicia la sesión, se redirecciona al usuario de regreso al sitio
4. El usuario puede elegir si asistirá o no a la boda y si necesita llevar pareja

Traducciones

Como lo mencioné al principio, necesitamos traducciones para el sitio. Tenía muchas ganas de usar las traducciones nativas de Angular pero me hubiera tomado mucho tiempo configurarlas.

Decidí ir por un paquete que usé mucho tiempo en mi trabajo anterior llamado @ngx-translate/core. Este paquete me permite generar variables y mantener los idiomas con base en archivos json. La configuración es muy corta y maneja el cambio de idioma de inmediato y a nivel de aplicación.

El producto terminado

Al final el sitio terminó así:

Conclusiones

¿Lo volvería a hacer?

La verdad es que si no fuera por la funcionalidad especial que queríamos para administrar a los usuarios, hubiera utilizado alguna herramienta ya existente para hacerlo. Incluso contratar Squarespace para usar la plantilla que reproduje.

No queríamos lidiar con procesar formularios a mano o conservar datos de invitados, por eso el login con Facebook o Google fue muy importante y eso es algo que no vimos en otras plataformas para hacer sitios de boda.

Altervativas para tu propio sitio de boda

Puedes usar una herramienta como Squarespace o Wix para hacer un sitio. Incluso hay portales exclusivos de bodas como The Knot que te permiten crear un pequeño sitio con links a todo lo que necesitas.

¿Es necesario?

Probablemente no. Si tu boda puede llevarse con invitaciones normales y es la ruta que quieres tomar, es lo único que se necesita. Si quieres manejar todo con un evento de Facebook se puede. Todo depende de lo que quieras para mantener a tus invitados enterados de todos los detalles de tu evento.

Me gustó mucho la experiencia de hacer el sitio de la boda. Mi prometido y yo nunca habíamos trabajado en un proyecto juntos, así que fue una bonita experiencia. Además esto nos ayudó a pensar en más detalles del evento y organizar a nuestros invitados de mejor manera.

Lamentablemente tuvimos que posponer la boda debido al COVID-19 pero cuando tengamos una nueva fecha pondremos el sitio en línea.

Angular viene ya con un muy buen número de validaciones para formularios. Te maneja que el campo requerido, que el mínimo, que el máximo, que si el campo debe de cumplir un patrón, de todo.

Sin embargo, hay veces que necesitamos algo más, algo que no cabe dentro de los casos genéricos que vienen incluidos con Angular. He ahí donde entra la validación personalizada o los validadores.

¿Qué es un validador?

Un validador, o validator en inglés, es una función que escribes para checar que tu formulario cheque alguna función en específico. Usualmente se crea en un archivo aparte y se importa al componente. También se puede probar para revisar que los casos sean correctos.

Al crear un validador también creas nuevas categorías de errores, mismos que puedes usar en tus plantillas para mostrar mensajes de error y marcar el formulario como válido o inválido.

Ok, ok, ahora vamos a hacer uno porque sigo sin entender

El caso clásico para un validador personalizado es el de checar que un formulario para registrar una contraseña y luego confirmarla.

Para crear este formulario vamos a usar una forma reactiva:

this.form = this.fb.group(
  {
    password: ["", Validators.required],
    confirmarPassword: ["", Validators.required],
  },
  {
    validators: validarQueSeanIguales,
  }
)

En este caso estoy declarando dos campos en el formulario, ambos deben de ser requeridos y después el grupo de campos va a tener una validación para ver que sean iguales.

Ahora toca hacer una plantilla sencilla para mostrar nuestros campos:

<form [formGroup]="form">
  <mat-form-field>
    <input
      matInput
      type="password"
      formControlName="password"
      placeholder="Contraseña"
    />
  </mat-form-field>

  <br />

  <mat-form-field>
    <input
      matInput
      type="password"
      formControlName="confirmarPassword"
      placeholder="Confirmar Contraseña"
    />
  </mat-form-field>
</form>

Nota: En este ejemplo estoy usando Angular Material para darle estilo a la interfaz, pero no es necesario usar Material para hacer validadores personalizados.

El siguiente paso es escribir nuestra función de validación. Esto lo voy a hacer en un archivo separado llamado app.validator.ts, me gusta mucho usar la convención <nombre_del_componente>.validator.ts para denotar mis validadores, pero depende del caso y la necesidad del proyecto. A veces los validadores se pueden llegar a compartir entre componentes, por lo cual es mejor idea llamarlos de acuerdo a lo que vayan a validar. También cabe notar que pueden haber varias funciones de validación dentro de un mismo archivo de validadores.

import { FormGroup, ValidationErrors, ValidatorFn } from "@angular/forms"

export const validarQueSeanIguales: ValidatorFn = (
  control: FormGroup
): ValidationErrors | null => {
  const password = control.get("password")
  const confirmarPassword = control.get("confirmarPassword")

  return password.value === confirmarPassword.value
    ? null
    : { noSonIguales: true }
}

¿Qué está pasando aquí?

Lo que estoy haciendo es definir una función de validación o ValidatorFn, que recibe como parámetro un grupo de campos , FormGroup, y va a regresa o un objeto de errores de validación, ValidationErrors, o un null.

Ya dentro de la función, podemos encontrar cada campo que necesitamos comparar. En este caso son los dos campos de nuestro formulario password y confirmarPassword. Posteriormente comparamos los valores de los campos y si son los mismos retornamos un null. Si no es así, entonces se retorna el objeto con el error { noSonIguales: true }.

Con esto nuestro formulario va a saber si es válido o si tiene algún error.

¿Cómo despliego estos errores?

Para desplegar estos errores, necesitamos indicarle a nuestra plantilla cuando hay un error de validación. En el caso de este validador, va a mostrar un error desde que empecemos a escribir en el primer campo. Esto no es ideal ya que el usuario se va a preguntar que cómo hizo algo malo si apenas empezó a llenar el formulario.

Podemos combinar el resultado de nuestro validador con el estado de los campos del formulario.

En Angular, los campos de un formulario tienen 4 estados: pristine, touched, untouched y dirty.

En resumen quedan algo así:

• pristine - No se ha tenido interacción alguna con el campo
• untouched - Si pusiste el cursor o fuiste al campo con la tecla de tabulador, sólo se activa cuando se llega al campo
• touched - Si ya te fuiste del campo, ya cambiaste el cursor de lugar o seguiste a los demás campos
• dirty - Si ya se tuvo interacción con el campo

Nuestro usuario necesita saber si las contraseñas son iguales después de que empieza a escribir la confirmación. Así que voy a checar que ambos campos tengan estatus dirty y checar si el formulario tiene el error de noSonInguales.

checarSiSonIguales():  boolean  {
	return  this.form.hasError('noSonIguales')  &&
		this.form.get('password').dirty &&
		this.form.get('confirmarPassword').dirty;
}

A mí me gusta hacer funciones que revisen estas cosas en lugar de tener toda la lógica en plantilla, pero si ponen la condición en la plantilla también funciona igual.

En la plantilla queda así:

<mat-error *ngIf="checarSiSonIguales()">Las contraseñas no coinciden</mat-error>

Así que cuando las contraseñas no coinciden, se va a mostrar un bonito mensaje de error en color rojo que dice Las contraseñas no son iguales.

Incluso si queremos ir un paso más allá, podemos usar el estatus del formulario para bloquear un botón de Enviar y una vez que nuestra forma esté libre de errores, habilitarlo y dejar al usuario enviar su formulario.

<button mat-raised-button [disabled]="!form.valid">Enviar</button>

Hay muchas otras formas para jugar con mensajes de error, clases, habilitar y deshabilitar campos y botones. Todo depende del formulario con el que se esté trabajando y las condiciones que necesita.

Como siempre, acá les dejo un ejemplo en StackBlitz de este pequeño tutorial:

Espero que este pequeño ejemplo les sirva para entender mejor los formularios reactivos y dinámicos. Son herramientas muy útiles para hacer aplicaciones con funcionalidades más complejas. En la siguiente parte escribiré sobre validación y como crear validaciones dinámicas y como aplicarlas a diferentes partes del formulario.

DISCLAIMER: This post was written a couple of years ago and lived in Medium. I have now decided to leave Medium completely for this blog, so I moved this post. I did Ballet Beautiful non-stop for 2 years and I dropped 14kg in about 8 months just by cutting snacks and doing 1 hour of this 6 days a week. I did keep the weight off until I moved countries and I'm still struggling to get back to it.

Also, there have been other 2 DVDs released that are not listed here, but I haven't tried them so I can't offer a review.

If there is one thing that gets asked a lot in our Ballet Beautiful (BB) Facebook Group it is “How much BB do you do a week to see results?”.

There are many problems with this question and here is why.

1. All bodies are different

There are people who lose weight really easily, there are others who struggle. There are people who have their bodies working against them because of disease, injury, genetics. It all varies. No exercise routine is one-size-fits-all and the routine that someone follows might not give you results in the same time frame as the other person.

2. Everyone has a different fitness level

In our group, we have ladies who do 3 hours of exercise a day without batting an eye and ladies who struggle just to get 15 mins in. It all depends on how much time you have and how much you do. You need to start small and build up in order to not lose motivation and quit before you see any results.

3. Everyday life gets in the way

You cannot expect to do as much exercise as someone who works from home and is single when you have a family and are juggling school and work on top of it. At first, you will struggle with finding time but you just have to get organized in your own time. Don’t feel pressured about other people’s workouts, they’re not you and they’re in different circumstances.

Now that we have this out of the way, I will get into my personal routine.

I discovered Ballet Beautiful in 2013 after trying a ballet class. I love the chilled out atmosphere of it and the fact that I feel elegant even when I’m sweating like a pig. I did it on and off but never really stuck to it since I got mocked about it by my family. No one understood my excitement and that really put me off from doing it.

In 2015, I got into my BB Facebook Group and found a community that understood EVERYTHING! They are encouraging, understanding and super inspiring. They were the reason why I could stick with BB this time around and actually see results.

I started doing 1 BB workout a day for 15 minutes and as I got stronger I increased the time to 30 minutes, then 45 and then 1 hour which is what I do today.

The Custom Workout

BB has an online streaming subscription that is $40 USD a month, I can’t afford that so I only get it during sales. The Custom Workout, as it is called, gives you access to all the BB workouts and it creates workout plans depending on how much time you have and which areas you want to target that week. I usually do an Ideal (4–5 hours a week) rotation 6 days a week.

The Ballet Beautiful DVDs

When I don’t have the Custom Workout subscription active, I rotate the BB DVDs. There are six of them and all are about 1 hour’s worth of workouts:

• Classic 60-min / Total Body Workout  —  This is an amazing mat workout that tones every single part of your body. No matter how long you have done Ballet Beautiful, this one still burns whenever you do it.
• Body Blast —  This DVD is made by 4 workouts that are 15 minutes long. They target different parts of the body and the objective is to do these whenever you’re short of time.
• Cardio Fat Burn —  A 1-hour long high impact cardio workout. This is an interval workout that combines high impact standing work with mat segments for toning. There is a lot of jumping in this one, so be wary if you have knee issues.
• Sculpt and Burn —  Two 30-minute long workouts. The first one is a standing workout that works your core, legs and arms. The second one is a mat section that targets everything, it is like a condensed version of the 60-minute classic DVD.
• Swan Arms Cardio —  This one is my favourite. It has a 30 minute low impact standing cardio section and the rest is mat work and stretching. It gets you sweating and it really tones your legs. It is another 1 hour long workout.
• Backstage — This one is a 1 hour long mat workout. I find it quite challenging but it does have a 20 minute stretch that feels just like heaven once you’re done.

Some of my go-to rotations for the DVDs are:

• If I want just to keep on with my results, then I will alternate the Classic DVD with the Swan Arms Cardio DVD, 6 days a week.
• If I want to lose fat, I will alternate the Swan Arms Cardio DVD with the Cardio Fat Burn DVD, 6 days a week.
• If I want extra toning, I will alternate the Classic DVD with the Sculpt and Burn DVD, 6 days a week.
• If I want to torture myself, I will do the Backstage DVD combined with either Cardio Fat Burn or Swan Arms Cardio, 6 days a week.

Other ways to workout with Ballet Beautiful

Other ways to use Ballet Beautiful is to buy online workouts. Not all the library is available for purchase, but I do recommend getting the two Bridal bundles available. They are a full body workout in on themselves and they deliver results.

If I have the subscription and don’t feel like following that day’s plan, then I will create my own based on a DVD. For example: to replicate the Classic DVD I will chose a bridge workout, abs workout, inner thigh workout, outer thigh workout, arms workout, and a small cardio workout. This really helps me when I’m lost and not feeling the rotations.

Ballet Beautiful has been really great for me because I enjoy it. Not all exercises are great for everyone, the key with sticking to them is to find something you really like to do. For me, that thing is Ballet Beautiful and I couldn’t be happier about it.

Mega disclaimer: nada, nunca, en esta vida es fácil la primera vez que lo haces. Aunque configurar este blog al principio fueron pocos pasos, personalizarlo después fue muy difícil para mí. Por eso les digo que la palabra fácil es algo que no se debe de usar a la hora de escribir tutoriales.

O ¿cómo fue que hice este blog?

Disclaimer: este blog es un trabajo en progreso y siempre lo será. No considero que sea un sitio web terminado ni personalizado pero igual y hay alguien como yo que nunca ha probado esto y se le hace interesante.

Pre-requisitos

• Tener la versión más reciente de Node instalada. Al momento de escribir este post, yo tengo la 11.9.0 en mi compu.
• Tener instalado npm que si ya tienes Node, seguro tienes npm instalado.
• Tener una cuenta de GitHub
• Tener una cuenta de Netlify
• Tener tu editor de código favorito. Actualmente uso VS Code en mi máquina personal pero para el trabajo uso IntelliJ.

GatsbyJS

Instalar GatsbyJS

Vamos a comenzar a construir esto de manera local. Me gusta mucho hacerlo todo local primero para tener más control. Instalar los ambientes después será muy fácil con GitHub y Netlify. Tan fácil que te sorprenderás de no haberlo intentado antes.

Para usar GatsbyJS hay que instalar su interfaz de línea de comando o CLI, por sus siglas en inglés. Esto es bien sencillo de hacer en npm:

npm install -g gatsby-cli

La -gen este caso significa global y se usa para instalar herramientas que se pueden usar en muchos proyectos como la interfaz de línea de comando de Angular, la herramienta de create-react-app, o en este caso la herramienta de Gatsby.

Iniciar un proyecto nuevo

Empezar un proyecto nuevo es también cuestión de una línea de comando. En el fólder donde quieres guardar tu proyecto escribes:

gatsby new <nombre-de-tu-proyecto>

Por supuesto que tienes que sustituir el <nombre-de-tu-proyecto> por el nombre que tú quieras.

Después de esto puedes cambiarte al directorio del proyecto y empezar a desarrollar con el siguiente comando:

cd <nombre-de-tu-proyecto>
gatsby develop

La verdad yo intenté hacer este blog sin plantilla pero no pude. Hay muchos conceptos nuevos que vienen con Gatsby como GraphQL y, en mi caso, muchas cosas de React que nunca había usado. Tampoco supe como hacerle para cambiar el CSS y hacer mis propios diseños.

Disclaimer: Ya sé que hay mil formas de hacer CSS-in-JS pero no me gustan. Será por mi edad avanzada pero prefiero el CSS solito o a lo mucho con SASS. Que tengo entendido que también se puede usar con Gatsby pero aún no aprendo como. Igual y es tema de otra entrada de blog.

Usar una plantilla

Algo muy padre de Gatsby es que la comunidad ya se encargó de hacer plantillas, o starters para que puedas tener la funcionalidad básica de una aplicación y te encargues de estilizar y poner contenido.

Para este sitio usé la plantilla de blog que se encuentra en este repositorio.

Instalarla necesita sólo un comando. En lugar de escribir gatsby new, el comando es el siguiente:

# create a new Gatsby site using the blog starter
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

Este comando lo que hace es indicarle a Gatsby que necesita la plantilla para crear el sitio. La ventaja de la plantilla es que ya trae varias cosas que se necesitan en un blog como el manejo de la estructura de los posts, el listado de la página principal, plugin para Google Analytics y la instalación de los scripts necesarios para compartir tu página en redes sociales de forma correcta.

No es difícil hacerlo por tu cuenta y hay muchos tutoriales para hacerlo. Aquí te dejo la muestra de uno en inglés.

Personalmente, me latió más hacerlo con la plantilla para sacar el sitio más rápido sin perderme en la infinidad del diseño. Aunque no lo crean, el diseño no se me da y pues no quería dejar de publicar este proyecto sólo por cuestiones estéticas.

Claro que la ventaja de hacer el tuyo propio es poderle poner lo que quieras, pero las plantillas también se pueden extender para incluir funcionalidades que te falten.

La estructura del proyecto

El proyecto viene dividido en varias partes, las que voy a mencionar en esta entrada son:

- content - assets - blog
- src - components - pages - templates - utils - gatsby-config.js

La parte donde vamos a escribir y guardar las imágenes está en content.

Dentro de la carpeta de blog va a existir un folder por cada entrada que queramos escribir. Dentro de la carpeta existirá un archivo llamado index.md y las imágenes que queramos incluir en esa entrada.

Importante: Las entradas de este blog están escritas en formato .md llamado MarkDown. MarkDown es un lenguaje de formato de texto para crear documentos. Es muy sencillo de usar y existen editores en línea para poder escribir documentos en MarkDown. Uno de ellos es StackEdit, que es el que estoy usando para escribir esta entrada.

Hay que mencionar que todo lo que tiene que ver con contenido del blog se va a encontrar en la carpeta de content y todo lo que tiene que ver con la estructura de la página se encuentra en src.

En el archivo gatsby-config.js se encuentra toda la configuración de nuestro sitio. Desde cómo se llama hasta qué plugins de Gatsby están instalados y cómo se obtiene la información.

En las demás carpetas se encuentran los archivos de los componentes del sitio. En ellos están los componentes para la biografía del autor, la información de SEO, y la estructura principal de la página. Como este es un sitio muy chico, sólo tenemos un tipo de estructura pero si hubiera una función de búsqueda o tipos diferentes de entradas con diferentes necesidades, entonces habrían más tipos de estructuras.

Por ahora no vamos a modificar estos archivos, con excepción de bio.js. Ahí te recomiendo agregar tu propia información, porque por muy bien que nos caiga el fundador de Gatsby, dudo mucho que quieras que su biografía aparezca en tu sitio.

Estilizar

Si hay algo que ha sido mi dolor de cabeza con Gatsby, eso ha sido estilizar.

El proyecto básico no viene con algún tipo de sistema para estilizar con CSS integrado. Entonces ahí es decisión tuya decidir que usar. Agregar estilos se puede hacer en cada componente, con hojas de CSS o con sistemas más complejos como emotion o styled-components.

En el caso del blog starter, todo viene con base en una dependencia llamada Typography Theme Wordpress 2016. Esta dependencia es un tema de un sistema llamado Typography.JS.

La buena noticia es que es posible sobrescribir los estilos. En el archivo de typography.js.

Ahí se encuentra un objeto que se ve algo así:

Wordpress2016.overrideThemeStyles = () => {
  return {
    "a.gatsby-resp-image-link": {
      boxShadow: `none`,
    },
  }
}

Ahí es donde puedes escribir tus estilos propios y agregar diferentes colores.

La plantilla por default trae estilos en línea en la mayoría de los componentes así que lo que recomiendo es editarlos en cada componente. Cuando tenga una solución que me guste para este problema, escribiré otra entrada.

GitHub

Por default, Gatsby viene con git integrado. Así que puedes crear un repositorio nuevo en GitHub y conectar el repositorio local con el repositorio en GitHub.

Esto se hace con los siguientes comandos:

git remote add origin <dirección del repo>
git push -u origin master

Una vez que el repositorio esté listo, hay que desplegar o implementarlo en un servidor.

Netlify

Netlify es una plataforma para administrar proyectos modernos de web. Te ayuda a manejar todo el despliegue o implementación de una aplicación. La instalación es bien sencilla y cada que se hace un cambio o push en master, el código se despliega a producción.

La mejor parte es que tienen un plan que es gratis para pequeños proyectos, como este blog. También te permiten conectar con tu propio dominio y tienen muchas funcionalidades más.

Bueno, ya que tienes tu cuenta, puedes apretar el botón que dice New site from Git y conectas con tu cuenta de GitHub.

AGUAS: La conexión con GitHub te permite agregar cualquier repositorio a la aplicación. En mi caso, tengo los repos de mi trabajo en la misma cuenta de GitHub, así que me dio opción de agregarlos. No hagas esto con repositorios que deben de ser privados.

Ya que hayas seleccionado tu repo o repos, el siguiente paso te pedirá datos sobre cómo construir tu proyecto para producción. En el caso de este blog, con lo que vino default funcionó perfecto, pero si tienes una configuración personalizada habría que cambiar estos parámetros.

El último paso es desplegar la aplicación y ¡LISTO! Ya tienes tu sitio en Netlify.

Netlify te da una URL de ellos para tu proyecto, pero puedes aplicar tu propio dominio de forma muy sencilla.

¿Ahora qué?

El último paso sería quitar la información que viene de muestra en el proyecto y empezar a escribir tus propias entradas.

En mi caso estoy manejando todo con Pull Requests en GitHub para poder participar en Hacktoberfest. Pero también puedes hacer push directo a master si quieres vivir al límite.

Y así fue como hice este pequeño blog. Poco a poco iré añadiendo más cosas y creando más entradas en este blog.

Here's the thing: I'm in love with the idea of blogging. I have loved blogs ever since I found out about LiveJournal in 1999. I have always kept some form of online journal. Whether it is on a platform like LiveJournal, Blogger, Wordpress.com, or Medium. I have also had my own self-hosted blogging attempts, but they never stick.
I always get overwhelmed with all the "get more followers", "monetize", "try the newest designs" things that get pushed to bloggers, as well as the pressure of having "interesting" things to tell. I don't lead the most interesting life, so I guess no one would want to read about how I cycled to work or what I cooked for lunch during the weekend.

Anyways, this blog is more of an experiment to learn something new. It is not 100% about writing and putting myself out there as it is about learning how to use GatsbyJS and Netlify. I also wanted to create something for this year's Hacktoberfest and a blog seemed like a good idea. So, um, yeah, the code for this website is open source and you can find it on my GitHub. It's not the fanciest code ever, but I can only improve, right?

Ever since I started working as a JavaScript Front End developer, I have worked with Angular. React has also been part of my work, so it's not a total stranger to me, but I have never used either of them to build a static website. This is why I got attracted to GatsbyJS.

Setting up this website with Netlify has been the smoothest deployment of my life! I'm a total stranger to deployment systems and I found the Netlify experience super easy. Get an account, connect a git repo, add a domain, and deploy! Seriously, it is mind-blowing how easy it was. Kudos to the Netlify team for making such a smooth experience for a newbie like me. (I say newbie because I have never done Continuous Deployment on my own, but I have actually been a professional developer for like 10 years now 😜)

It seemed quite easy to take the Blog Starter template and get writing in a simple code editor without all the bells and whistles of the new Wordpress Gutenberg Editor. It also gives me a chance to do something that is only for me and not for work.

I had lost a lot of joy in coding, and ever since I switched companies (a story I won't be sharing here) I have regained some of that joy. Now, I want to dedicate some time to working on a website that will become what I want it to become without any pressure from anyone or anything.

One more thing: I will write entries in both English and Spanish. Not always and not both languages at the same time. Sometimes, it is easier to express some things in my native language, others in English. Other times, I would like to write technical stuff in Spanish since resources are lacking for locals and not everyone speaks English.

We'll take it as it goes, right?