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.

input de tipo search

TIL que los elementos input cuando reciben el valor de search para atributo type, nos proveen funcionalidades como autocomplete y una manera nativa de limpiar el input.

<form>
    <div>
        <input type="search" id="mySearch" name="q">
        <button>Search</button>
    </div>
</form>

Funciona similar al atributo text, pero dependiendo del browser el estilo es diferente, en Chrome muestra una X que cuando se le da click limpia el input.

Referencia: MDN <input type="search">

String.prototype.repeat()

TIL el objeto String tiene un método repeat()

The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

String.prototype.repeat()

“You get in life what you have the courage to ask for.” ― Oprah Winfrey

Empecé el libro The Infinite Machine: How an Army of Crypto-hackers Is Building the Next Internet with Ethereum de Camila Russo.

Refrescando conceptos de DevOps

Encontré el canal de Youtube TechWorld with Nana y me ha ayudado a refrescar conceptos de DevOps, algunos de los que he visto en las ültimas semanas:

Terminé Calypso de Tatiana Lobo. Es un libro entretenido, me gustó la narración y como las diferentes historias se van entrelanzado a lo largo de los años. El final me pareció flojo.

Es el primer libro que inicio y termino en el 2022; me lo regaló Pri en Navidad.

React, state management

Estoy trabajando en un proyecto en el que hacer prop drilling ya se esta saliendo de control, algunas notas y links que me estan ayudando a tomar una decisión sobre como resolver el problema de state management.

State Management In Next.js: alto nivel, sirve como introducción; al final NextJS es un framework y no incluye nada que nos permita manejar el estado de la aplicacion, algunas alternativas que mencionan: prop drilling, usar Context API, Jotai. Me gusto como resume las consideraciones de client-side fetching:

When requesting data from the client-side, it is important to be mindful of a few things:

  • the user’s network connection: avoid re-fetching data that is already available
  • what to do while waiting for the server response
  • how to handle when data is not available (server error, or no data)
  • how to recover if integration breaks (endpoint unavailable, resource changed, etc)

Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) incluye algunos buenos puntos sobre Context y Redux, que son, como se diferencia y cuando usarlos.

Comparing Context and Redux

  • Context

    • Does not store or "manage" anything
    • Only works in React components
    • Passes down a single value, which could be anything (primitive, objects, classes, etc)
    • Allows reading that single value
    • Can be used to avoid prop-drilling
    • Does show the current context value for both Provider and Consumer components in the React DevTools but does not show any history of how that value changed over time
    • Updates consuming components when the context value changes, but with no way to skip updates
    • Does not include any mechanism for side effects - it's purely for rendering components
  • React+Redux

    • Stores and manages a single value (which is typically an object)
    • Works with any UI, including outside of React components
    • Allows reading that single value
    • Can be used to avoid prop-drilling
    • Can update the value via dispatching an action and running reducers
    • Has DevTools that show the history of all dispatched actions and state changes over time
    • Uses middleware to allow app code to trigger side effects
    • Allows components to subscribe to store updates, extract specific pieces of the store state, and only re-render when those values change

    Me gusto mucho esta parte sobre entender las herramientas

In order to use any tool correctly, it's critical to understand:

  • What its purpose is
  • What problems it's trying to solve
  • When and why it was originally created

It's also critical to understand what problems you are trying to solve in your own application right now, and pick the tools that solve your problem the best - not because someone else said you should use them, not because they’re popular, but because this is what works best for you in this particular situation.

Notas del curso React Fundamentals

Por fin me anime, e inicie con Epic React de Kent C. Dodds; siguiendo con los consejos de Kent, voy a empezar a tomar notas sobre los conceptos aprendidos, estas son del primer curso, React Fundamentals.

Imperative vs Declarative

The imperative approach is concerned with HOW you’re actually going to get [a seat]. You need to list out the steps to be able to show HOW you’re going to get [a table]. The declarative approach is more concerned with WHAT you want, [a table for two].

  • Imperativo: cuando declaramos instrucciones especificas, casi paso a paso, que van definiendo como vamos a obtener algo.
  • Declarativo: programación funcional.

Lectura recomendada:

Posiblemente la definición más sencilla de qué es un componente:

Components are basically functions which return something that is “renderable” (more React elements, strings, null, numbers, etc.)

Lectura recomendada:

Responsive Image Breakpoints Generator

Responsive Image Breakpoints Generator, un tool de Cloudinary para generar variaciones de imagenes basado en breakpoints.

Terminé el audiobook The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business Win; me lo había recomendado Coco.

The Phoenix Project es una novela "ficticia", llena de situaciones que son muy familiares cuando una trabaja en desarrollo de software, entre los diálogos van dejando referencias a libros, charlas y practicas que pueden llevar IT a otro nivel, al nivel donde todos queremos estar.

Primera vez que consumo una novela en formato de audio; no recuerdo cuando lo inicie.

Termine el audiobook Leading Without Authority.

  • No necesitamos estar en una posición de liderazgo para ser líderes, ni necesitamos tener personas a nuestro cargo.
  • Cualquiera con el que compartamos objetivo, es parte de nuestro equipo.
  • Hay que conectar a nivel personal para entender las motivaciones de los demás, y nos debe importar, cero pose ó falso interes. Care personally, challenge directly
  • Solos no podemos generar cambio/impacto/valor.

Camila Russo | La historia de Ethereum | DESCUBRIENDO BLOCKCHAIN

Camila Russo hablando sobre La historia de Ethereum; igual, todavía no entiendo nada.

Empecé el audiobook Leading Without Authority de Keith Ferrazzi, patrocinado por BC Engineering leadership como parte del book club.

Termine el audiobook The Culture Code: The Secrets of Highly Successful Groups.

Se repiten muchos de los "casos" ó ejemplos de libros como Miltipliers ó Grit, de lo que más me resono fue el tema de ser vulnerable, dos ejemplos:

Como lead/managers, tener una cultuta de open feedback es importante, pero se debe iniciar por uno:

  • What is one thing that I currently do that you’d like me to continue to do?
  • What is one thing that I don’t currently do frequently enough that you think I should do more often?
  • What can I do to make you more effective?

Para mejorar como equipo/organización, métodos como 5 Questions son una buena manera de hacer restrospectivas:

  • What were our intended results?
  • What were our actual results?
  • What caused our results?
  • What will we do the same next time?
  • What will we do differently?”

Moving users to Microsoft Edge from Internet Explorer

TIL, se puede hacer redirect de IE11 a Microsoft Edge, incluso es una práctica común que estan usando Facebook, Google y demás proyectos que le apuestan a los estandares modernos. BC se va a montar en ese bus.

Terminé Ensayo sobre la ceguera. La narración es increible, los personajes no tienen nombre, y el país puede ser cualquiera, talvez por eso sea tan sencillo de conectar.

Mientras lo leía no dejé de pensar en la pandemia actual, Covid-19, súper fácil de sentirlo cerca. Pero el final, la idea de tener ojos y no querer ver, aplica para todo.

Curricula on Web Accessibility

La W3C publicó una guía que sirve para enseñar sobre accesibilidad web:

This resource provides teaching modules to help you create courses on digital accessibility, or to include accessibility in other courses. The modules cover accessibility foundations that apply broadly, and specific skills for developers, designers, content authors, and others.

Empecé el audiobook The Culture Code: The Secrets of Highly Successful Groups, patrocinado por BC Engineering leadership como parte del book club.

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.