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.

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.

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

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

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:

• Variable fonts guide, guía en MDN
• Introduction to variable fonts on the web, post introductorio en web.dev
• Mandy Michael en Twitter @mandy_kerr
• Variable Fonts Experiments, demos en Codepen
• variablefonts.dev, un proyecto de Mandy Michael para mostrar las posibilidades y oportunidades que variable fonts pueden ofrecer a developers y designers.
• v-fonts.com, para encontrar y probar variable fonts

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