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.

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.

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.

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.

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?

Vuelta rápida a Santa Ana y regreso, 19.94km en 1:06:50; hice la ruta con Bren. No recuerdo la última vez que salí en bicicleta, que no fuera ir al supermercado ó a la feria.

100DaysOfCloud Ideas List

The purpose of this repo is to provide a list of micro-projects to help people with their #100DaysOfCloud Challenge.

Lo encontré gracias al video 3 Projects to get hands on with Cloud.

Leyendo Talking with Tech Leads de Patrick Kua; me lo recomendó Agnes.

The Complete Guide to Next.js Authentication

The Complete Guide to Next.js Authentication por Nader Dabit.

In this guide you will learn how to implement authentication in a Next.js app. I will cover client authentication, authenticated server-rendered pages, authenticated API routes, protected routes, and redirects.

Terminé Resilient Management de Lara Callender Hogan. Me gusta mucho que incluye consejos prácticos, y como los otros libros de Abookapart, va al punto pero con muy buen contenido.

Hace poco más de un mes fue la primera corrida después de meses de no poder hacerlo, por dolor en la rodilla izquierda. Hoy en Liberia logré correr 4km en 22:35min sin parar.

Treinta y nueve

Hoy cumplo 39 años, ha sido un año diferente, pero la celebración no pudo estar mejor, tengo salud, trabajo y el amor de mi familia.

Queria hacer la lista de 39 cosas que he aprendido en 39 años, como lo hice cuando cumplí los 34 años, pero me siento muy cansado, lo bueno es que siempre puedo revisitar este post.

La #34 sigue estando vigente.

  1. Sigo pensando que todo va a salir bien.

Form design

Best practice, research insights and examples

Algunas buenas practicas para el diseño de formularios, incluye enlaces y consideraciones para que seam accesibles.

npkill

TIL: como buscar y remover folders viejos de node_modules usando npkill.

Se puede correr sin instalarlo:

npx npkill

Desinformación y fake news en Costa Rica, buena discusión https://youtu.be/Xch5-LV3j_Q

Leyendo Resilient Management de Lara Callender Hogan. El libro lo tenía en la lista de pendientes, pero, escucharla en los episodios 67 de Presentable y 370 de Shop Talk Show, me influencio para empezar a leerlo.

Accesibilidad web de la teoría a la práctica

DrupalCR Meetup A11y

Hoy tuvimos el DrupalCR Meetup A11y y participe con la charla Accesibilidad web de la teoría a la práctica, el video ya esta disponible y estas son algunas notas.

¿Sobre qué no vamos a hablar?

  • La norma, WCAG 2.1.
  • Principios de accesibilidad.
  • Niveles de conformidad (A, AA, AAA).
  • WAI-ARIA.

Recomendada la charla Implementando Accesibilidad de Carlos Murillo, cubre varios de los puntos anteriores.

¿Qué es a11y?

A11Y significa "accessibility". A11Y es lo que se conoce como numerónimo, que es algo similar a un acrónimo; se conservan las primeras y últimas letras de accessibility, reemplazando las letras restantes con su suma total de 11.

Cuando decimos que un sitio es accesible, queremos decir que el contenido está disponible y que su funcionalidad puede ser operada, literalmente, por cualquier persona.

Principales tipos de discapacidad

  • Visual: ceguera, baja visión, daltonismo
  • Audición: sordera y problemas de audición
  • Motora: incapacidad para usar un mouse
  • Cognitivo: problemas de aprendizaje, distracción incapacidad para recordar

Tambien podemos tener discapacidades transitorias:

  • Temporal: accidentes, enfermedades
  • Contexto: contenido en otro idioma
  • Envejecer: nos toca, si tenemos suerte

Las "mejoras" que hacemos para que nuestra aplicación o proyecto sea accesible tiene repercusiones en todos nuestros usuarios, por ejemplo: las aplicaciones que no reproducen videos automáticamente son más fáciles de usar para personas con discapacidades cognitivas, pero también serán más amigables para los usuarios con conexiones lentas o dispositivos móviles antiguos.

¿Porqué molestarnos?

  • Ampliar alcance del mercado / audiencia
  • Responsabilidad Social Corporativa (RSC)
  • Superposición entre accesibilidad y usabilidad
  • Minimizar el riesgo legal (ADA)

The WebAIM One Million

El reporte de WebAIM One Million fue la base de la charla, recomendado leerlo y seguir los links.

Recursos:

Checklist

Checklist que presenta recomendaciones para implementar los principios y técnicas de accesibilidad. El lenguaje utilizado aquí simplifica y condensa significativamente la especificación oficial WCAG 2.1 y los materiales de apoyo para facilitar su implementación y verificación.

Sitios oficiales