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.

Drupaleada Agosto

Hoy se realizó la Drupaleada de Agosto, lo dividimos en tres bloques:

  1. Anthony Phillips compartió como fue su experiencia para la Acquia Certified Site Builder. Uno de los recursos que Anthony mencionó fue el post Crack your Acquia Drupal site building certification.
  2. Jesus Manuel Olivas presentó la charla Beyond Static: Building a dynamic application with GatsbyJS, misma que habia presentado en el DrupalCon.
  3. Alberto Rojas, Katherine Fernandez y Raúl Solano compartieron sobre su experiencia de asistir al DrupalCon 2020, el cual por primera vez se realiza de manera virtual. Estas son las tres charlas que mencionó Katherine, Webforms for Everyone, Your Component Library is not a Design System y Accessible Patterns from the Ground Up

El video del meetup esta en el canal de Youtube. Nos vemos en el próximo meetup.

Terminando la drupaleada del mes. El video queda en el canal de Youtube de la comunidad; recuerden que la agenda para el próximo mes esta abierta.

Primera vez que hago pancakes con buttermilk, ¡y son un éxito! Use la receta de Matty Matheson.

whatthefuck.is

Muy bueno, Dan Abramov y su glosario de JavaScript, whatthefuck.is.

3 Things I wish I knew when starting with GraphQL

Un video corto de la gente de Prismic, 3 Things I wish I knew when starting with GraphQL

  1. Aprender sobre la especificación de GraphQL.
  2. Tener un conocimiento general de que esta pasando en el backend ó en el frontend, aunque soólo nos encarguemos de uno, para minimizar errores y entenderse entre las partes.
  3. ¿Que librería usar? Lo más obvio es usar la más popular (Apollo), porque tiene más soporte, más documentación/tutoriales y una mayor comunidad de usuarios, lo que a un principiante le simplifica la vida.

Hoy asistí, por primera vez, a un Homebrew Website Club; le puse cara y voz a un par de indieweb users, y aprendí más sobre Micropub y webmentions. Como side effect del evento, esta es mi primera nota :)

Drupaleada Julio, Drupal 9 y headless

El pasado 9 de Julio se realizó el meetup del mes, el video esta disponible en el canal de Youtube DrupalCampCostaRica.

Este mes la idea era darle seguimiento a Drupal 9, Theme UI y usar Drupal como un headless CMS, algunas notas:

Actualizando tu sitio a Drupal 9

Kevin Porras nos dió una introducción sobre como prepararnos para migrar a Drupal 9; incluyó una breve historia de las versiones, que incluye Drupal 9, y respondio las preguntas ¿debo actualizar? ¿por qué? ¿cuándo?. En su sitio personal tiene un post sobre como prepararse para la migración y los slides de la charla estan disponibles.

Embracing the modern web using a Headless CMS with GatsbyJS

La segunda parte del meetup estuvo a cargo de Jorge Valdez y Jesus Manuel Olivas de Octahedroid. Jorge hizo un show & tell sobre como estan usando Theme UI en sus proyectos, cuales son los beneficios de trabajar con Storybook y uso como ejemplo un proyecto de Prismic

Olivas hizo una breve introducción a JAMstack y cuales son sus beneficios, porque usar WordPress ó Drupal como headlessCMS y explicó en que consiste GatsbyJS y cual es su papel cuando tenemos un sitio desacoplado. El cierre de la charla fue un demo, en el que mostró como se puede tener el mismo front end, usando GatsbyJS, y diferentes data source, en este caso uso WordPress, Drupal y Airtable, good stuff.

Los próximos eventos se publican en el Meetup de Drupal Costa Rica, las fechas del DrupalCamp 2020 ya estan publicadas.

How to transfer all of your Facebook photos and videos to Google Photos

#TIL Como transferir todas las foto y videos de Facebook a Google Photos; en el artículo esta detallado, pero a alto nivel es algo como esto:

  1. Ir a Settings
  2. Click en Your Facebook Information
  3. Click en Transfer a Copy of Your Photos or Videos
  4. Click en Choose Destination, la única opción en este momento es Google Photos.

Con esto estoy un paso más cerca para borrar mi cuenta de Facebook.

Revisar paquetes globales de npm

#TIL como listar todos los paquetes de npm instalados de manera global.

Listar cada paquete global, incluidas sus dependencias:

npm list -g

Listar solo paquetes top-level:

npm list -g --depth 0

Y por supuesto, como eliminar paquetes globales:

sudo npm uninstall -g <nombre del paquete>

El artículo completo en How to Check Your Globally Installed npm Packages

Retro Feeds

Soy fan de los feeds, son una excelente manera de organizar el contenido que consumo, y me gusta como están obteniendo más atención; esta semana @adactio escribió un poco sobre esto https://adactio.com/journal/17095. Necesitamos más feeds.

“Link In Bio” is a slow knife

El "link in bio" de Instagram no solo es molesto, también es una manera de mantenernos, a nosotros los usuarios, encerrados dentro de la plataforma.

Anil Dash:

But killing off links is a strategy. It may be presented as a cost-saving measure, or as a way of reducing the sharing of untrusted links. But it is a strategy, designed to keep people from the open web, the place where they can control how, and whether, someone makes money off of an audience. The web is where we can make sites that don’t abuse data in the ways that Facebook properties do.

Glen Maddern - Styling React Apps with Styled Components

Repasando styled-components volví a ver el video de Glen Maddern, Styling React Apps with Styled Components, donde hace un show & tell de las motivaciones que llevaron a la creación de styled-components y además, repasa los diferentes features.

Es interesante volver a ver hacia atrás y ver la evolución de las herramientas que usamos y ver como algunos temas, CSS-in-JS por ejemplo, se van volviendo parte del flujo normal de trabajo; igual espero que de manera nativa podamos tener las mismas ventajas que ofrece el no tan querido CSS-in-JS.

Robustness and least power

Jeremy Keith:

As a general rule, it’s always worth asking if you can accomplish something with a less powerful technology:

  • Instead of using JavaScript to do animation, see if you can do it in CSS instead.
  • Instead of using JavaScript to do simple client-side form validation, try to use HTML input types and attributes like required.
  • Instead of using ARIA to give a certain role value to a div or span, try to use a more suitable HTML element instead.

Debug images without alt attribute with CSS

TIL: Pequeño tip, debuguear imagenes que no tienen el atributo alt usando CSS.

img:not([alt]) {
  outline: 2px dashed pink;
}

Drupaleada Junio, mucho CSS

Hoy tuvimos la Drupaleada de Junio, los charlistas fueron:

En el canal de Youtube esta disponible el video del meetup, y los próximos eventos los pueden encontrar en Meetup como Drupal Costa Rica.

Nos vemos en la Drupaleada de Julio.

Responsive Typography - Jamstack Conf

Estoy tratando de ponerme al día con CSS, y hoy me encontre con este video sobre Responsive Typography de Mandy Michael en el que explica que son Variable Fonts, algunos casos de uso y sus beneficios, y fue como WOW.

Algunos recursos:

Mostrar las notas y highlights del Kindle

¿Cómo mostrar las notas y highlights del Kindle? He estado dandole vueltas a esta pregunta, y suena como un buen problema a resolver.

On keeping a logbook

En el 2018 leí Steal like an artist de Austin Kleon, y una de las cosas que más me gustó fue la idea de tener un logbook. En el 2019 llevé uno, y para este año tengo otro; hoy me encontre con un post de 2010, previo al libro, en donde Kleon habla un poco del concepto y la idea detrás de tener un logbook, fue bastante refrescante; conectar los puntos de por donde pasamos y recordar ...the distance the ship traveled.

Retomando los meetups de DrupalCR

Algo bueno que ha dejado la pandemia es la cantidad de meetups, conferencias y eventos que se han movido a modalidad virtual, y para la comunidad de DrupalCR no ha sido diferente. El pasado 6 de Mayo retomamos los meetups mensuales, a la fecha hemos realizado tres, y el próximo es el 18 de Junio.

Todas las charlas van a estar disponibles en el canal de Youtube de DrupalCR.

Modern CSS Solutions

Mantener el footer fijo al final de la pantalla y columnas de igual altura, son dos viejos problemas que son complejos de solucionar con solo CSS; en la serie de posts publicados en Modern CSS Solutions for Old CSS Problems cubren estos viejos problemas, con soluciones modernas.