Document your stuff

Este espacio es un reflejo del principio Document your stuff de IndieWeb; un espacio que me sirve para documentar y darle seguimiento a lo que voy aprendiendo. Aquí vas a encontrar notas sobre front-end, enfocado en HTML, CSS y accesibilidad, entre otras cosas; te podés suscribir al RSS feed.

Empecé el audiobook Building a StoryBrand: Clarify Your Message So Customers Will Listen. La recomendación viene del curso Instagram Strategy for Business Growth de Domestika; Beelight me tiene leyendo y aprendiendo cosas que siempre he llamado vende humo, el marketing :D

Hace menos de un mes lanzamos Beelight.cr, la versión 1 del sitio web es puro HTML/CSS con mínimo JavaScript, lo necesario para soportar el SDK de Shopify; hoy se hizo la primera venta directa desde el sitio web, pagaron con PayPal, good stuff.

Shopify Store Launch Checklist

Buenos tips para lanzar una tienda en línea usando Shopify; me ha servido para verificar el lanzamiento de Beelight.

Acercandome a IndieWeb

Esto lo empece a escribir en Julio, y se me ha ido quedando en draft.

Entre Abril y Mayo de 2020 migré el sitio de un Drupal 7 que estaba hospedado en un shared hosting a Gatsby hospedado en Vercel. La parte más dolorosa fue crear los archivos Markdown usando el contenido del blog y no perder las URLs.

Parte de la motivación de migrar fue aprender más de Gatsby, pero también alejarme más de Twitter e Instagram, Facebook prácticamente no lo utilizo así que, no me importa. Cuando digo "alejarme" no me refiero necesariamente a dejar de usarlas (deberia!?), sino a publicar menos ahí y más aquí, y no pensar nunca en que pasará cuando las cierren, como podré exportar el contenido que me importa y como evitar que se pierda, y claro, como dejar de usar los productos de Zuck.

Mi contenido me importa a mí.

Desde el 2009 adquirí, si se puede decir eso, el dominio leivajd.com; la primera version del sitio fue en WordPress, la segunda en Drupal y ahora Gatsby. Por una mala migración perdí todo el contenido entre 2009 y 2012, a nadie le importa, pero a mi sí. Nadie lo lee, ni yo, pero esta es mi manera de llevar un registro y documentar las cosas que voy aprendiendo, leyendo, al fin, compartiendo.

Esta necesidad de seguir publicando, no perder y controlar más mi contenido me recordó un concepto que habia leído hace un par de años en un post de Jeremy Keith, IndieWeb.

Qué es?

Definión en el sitio oficial:

The IndieWeb is a community of individual personal websites, connected by simple standards, based on the principles of owning your domain, using it as your primary identity, to publish on your own site (optionally syndicate elsewhere), and own your data.

Muchos conceptos, pero en sencillo es: tener un dominio y un sitio web. Podemos ir un poco, ó mucho, más allá usando los building blocks y convertir nuestro sitio web en una red social de la que tenemos control completo.

Estado actual

Asi estoy a Enero 2021:

Próximos proyectos

Algunos features que quiero agregar a este sitio; me falta priorizar y ver cuales se sobreponen.

  • Mostrar la fecha de la ultima actualización hecha a un post.
  • Publicar en el sitio fotos, links y notes sin necesidad de crear el markdown "manualmente", ojala tener un form o similar para publicaciones cortas.
  • Enviar Webmentions.
  • Sindicar on demand contenido a Twitter.
  • Publicar on demand fotos ó notas a Twitter/Instagram.
  • Publicar tweets desde el sitio.
  • Publicar respuestas a tweets desde el sitio.
  • Mostar en cada post el link de donde se sindico.
  • Crear una sección Now
  • Crear una con los feeds, https://adactio.com/journal/17095
  • Agregar un blog roll.
  • Recibir Webmentios (no estoy tan seguro de esto).
  • Migrar a Eleventy :D

Empecé a leer Ensayo sobre la ceguera de José Saramago, creo que es lo primero que leo de él.

Review del 2020

A pesar de que 2020 fue un año complicado, no me puedo quejar, esperando con ganas el 2021.

  • Por Covid, en WFH desde Marzo.
  • Pri está en la casa desde Junio, ha sido una gran aportunidad para perder el miedo a emprender nuevos proyectos.
  • Acompañe a Pri a idear y lanzar Beelight, quiero verlo crecer en el 2021.
  • Termine el año sin tomar cerveza, en Octubre cumplí 1 año de no tomar; durante el año me tomé 3 tragos y el vino con mucha, mucha moderación. 2020 sóbrio.
  • Migré este sitio de Drupal 7 a Gatsby. Deshabilite el share hosting y me moví a Vercel.
  • Volví a actualizar mi blog.
  • Le perdí el miedo a IndieWeb, de hecho, el ser dueño de mi contenido me motivó a revivir mi sitio web y meterle tiempo a webmentions, soportar Microformats y categorizar el contenido.
  • Durante el año publique 71 veces: 38 links, 20 notas y 13 posts.
  • Cancele una deuda que venía pagando desde el 2006 ó 2007, malas decisiones que lo persiguen a uno por años.
  • Ahorre más que ningún otro año.
  • Termine el 52-week money challenge.
  • Me moví al rol de Tech Lead.
  • Empecé a registrar los libros que voy leyendo/escuchando.
  • Logré llevar el logbook por segundo año.
  • Conocí Eleventy; mi plan para 2021 es migrar de Gastby a Eleventy.
  • Participe en la organizacion del Drupal Camp Costa Rica 2020, primera vez que lo hacemos virtual; las charlas estan en Youtube.
  • Supere dos meses de desmotivación (laboral), en los que estuve a punto de renunciar.
  • Inicie como mentor en el programa LaunchPadCR.
  • Nueva generación del CETAV, desde Marzo en clases virtuales, ha sido todo un reto.
  • Jeff me tiro la idea de hacer un centro tipo CETAV, pensando en las zonas fuera de la GAM.
  • Trate de volver a correr. Cyber 5 y code freeze me pasaron la factura y perdí consistencia, esta es parte de las metas del 2021.
  • Entrene, tanto como pude, BJJ.
  • Practique yoga, a finales de noviembre perdí consistencia, pero a pesar de eso fue un win.
  • Isaac se fue a Portland, nació un nuevo sobrino.
  • Se murió Harold y don Joaquin, asesinaron a Guayo; no se podía ir a ningún entierro.
  • Después de Julio empecé a ver a mis papás una vez al mes, a pesar de Covid :S
  • Me compre de regalo de navidad mi primera parrilla nueva, la Original Kettle Premium Charcoal Grill 22".
  • Gracias a la receta de Matty hice muchos pancakes.
  • Después de ir a Plantet Hollywood reconfirme que no me gustan, y no disfruto, los hoteles grandes/todo incluido.

Terminé de leer El año de la Ira.

ARIA states

Breve guia con los diferentes "estados" que se pueden tener usando ARIA.

Hoy termine el último depósito del 52-week money challenge, primera vez que lo hago, ahorré $1,378 :P

Leyendo El año de la Ira de Carlos Cortés. Increible cómo nos enseñan pedazos de la historia, y otras cosas se tratan de olvidar; talvez si tuvieramos conocimientos de las barbaridas que como país han, y hemos hecho(¿?), valoraríamos y protegeríamos la democracia que tenemos.

nerd-snipe

TIL un nuevo termino del internet, nerd-snipe, la definición:

To provide a problem so interesting and difficult that the target is compelled to cease whatever they are doing (eating, reading, walking) in order to think about it.

Del Twitter

If you think about it, a software engineering job is really just an indefinite series of nerd snipes from your management team.

It's Funny Because It's True :P

Better, Simpler Grid Systems

Buenos tips, y buen ejemplo, de como crear un sistema de grid usando Flexbox; especialmente útil cuando no queremos usar float ó display, y no podemos usar CSS Grid.

Terminé Talking with Tech Leads; la mayoria del libro son "entrevistas" a Tech Leads, con diferentes backgrounds/experiencia, pero, creo que puede ser más corto, llega un momento en el que se vuelve repetitivo, pero incluye buenos consejos.

100DaysOfReact

Alfredo inició un 100DaysOfReact; me apunto para repasar/actualizarme.

Strangler fig application

TIL, Strangler fig application, una estrategia en la que se va "creando" una nueva aplicación en los bordes de la vieja, va creciendo lentamente hasta que estrangula la aplicación de la que se quiere salir/migrar.

...when designing a new application you should design it in such a way as to make it easier for it to be strangled in the future. Let's face it, all we are doing is writing tomorrow's legacy software today. By making it easy to add a strangler fig in the future, you are enabling the graceful fading away of today's work.

Automatically sending Webmentions from a static website

Por medio de James Mead y su post Automatically sending Webmentions from a static website descubrí webmention.app, un servicio de Remy Sharp que permite enviar webmentions, good stuff.

Priscilla me recomendo que leyera sobre Philip Crosby y su principio "doing it right the first time" (DIRFT).

... "quality is free". It is less expensive to do it right the first time than to pay for rework and repairs.

Building a client side proxy

Un caso de uso de service worker diferente, client side proxy que permite acceder, sin necesidad de un VPN, a servidores que han sido bloqueados.

... ‘offline first’-solution that proxies any request to the best available mirror, preventing authorities from censoring our content.

  • JAMstack build, usan un WordPress headless con RESTful API, Eleventy para generar el sitio estático, con eso se aseguran no usar client side frameworks.
  • Usan la estragetia de cache stale-while-revalidate.
  • Los assets como imagenes estan hospedados en un servidor independiente, el cual es usado por los servidores "espejo", así se aseguran que, si un server es bloqueado, los otros también tengan acceso a los assets.

Hoy me di cuenta que el mes pasado, especificamente el 7 de Octubre, fue mi setimo aniversario trabajando en Backcountry, y que el 5 del mismo mes inicie en mi nuevo rol de Team Lead. Jugaré el 10 en la lotería.

Accessible interactions

Jeremy Keith describe un poco su proceso mental para tomar decisiones cuado esta trabajando con elementos que sigan un patrón de progressive disclosure, como tabs, menus, modal, dialog, etc.

  • 80% del trabajo es "sencillo", el 20% es cuando se vuelve tricky, porque entramos en áreas donde no hay reglas claras para tomar decisiones.
  • ARIA nos puede ayudar, pero no debemos abusar, causaria más daño que beneficio.
  • Se enfoca primero en cubrir que keyboard y mouse users puedan interacturar con el componente
  • Agregar algunos atributos extras, como aria-expanded, aria-hidden y aria-controls, para asegurarse que screen reader users no se estan quedando excluidos.

Par de preguntas que se hace cuando esta tomando decisiones:

  1. ¿Debe usar un boton ó un link en el elemento trigger?
  2. ¿Debe el elemento target recibir focus de manera automatica?

Ademas, después de haber leído un par de libros de Heydon Pickering, puedo hacer un +1 a su tercera pregunta.

And when it comes to interactive patterns like the trigger/target examples I’ve been talking about, there’s one more question I ask myself: what would Heydon do?