#177 Interfaces de Usuarios, f(states) a la n

Interfaces de Usuarios, f(states) a la n

Ya estuvo bueno de que otros programadores piensen que el trabajo que hacemos es fácil. Un frontendero de bien, sabe que la aplicación que esta trabajando maneja tantos diferentes aspectos, que lo que hacemos es todo, menos “fácil”. Tienes que tomar en consideración el state de páginas y componentes, de elementos nativos, del dispositivo en general y en su forma de uso, de accesibilidad, de i10n y de l10n, del navegador, de la red, de bibliotecas de terceros y más. Definitivamente no es un trabajo fácil.

Voz y tono en Design Systems

Son tiempos emocionantes para el mundo del frontend. Una de las cosas que nos permiten los Design Systems, son tener un lugar en la mesa de decisiones de un producto. Y tener un lugar en esa mesa, no solo significa hablar, sino también escuchar y aprender, y en esta ocasión toca aprender sobre cómo se esta incluyendo voz y tono como framework para diseño de UI y UX.

Google Tag Manager Consent Mode v2

Si trabajas con sitios web, y dependiendo del tamaño del mismo o la organización o persona para la cual es el sitio, puede que tengas que usar analytics o algún servicio de Google, a menos que uses alternativas. Si usas Google Tag Manager y la nueva versión del Consent Mode, aquí puedes ver como implementarlo para React, Gatsby y Next.

EL RINCÓN DEL DISEÑADOR 🎨 
Color spaces

Si eres un frontendero que no está satisfecho con los web safe colors y con utilizar códigos hexadecimales, nada más por utilizarlos, tienes que leer este artículo sobre teoría del color y la ciencia detrás de.

HERRAMIENTA 🛠️ 
React Print PDF

¿Qué te parecería utilizar React y UI Kits para generar tus documentos PDF? Y eso no es todo, esta biblioteca también tiene templates para que puedas agilizar tu proceso de desarrollo.

SVG flag icons

Tarde o temprano necesitarás insertar banderas para tu aplicación, y que mejor que sea con SVGs, que están bien chulos. 👌 

LANZAMIENTO 🚀 
Redwood v7.0

Redwood v7 ya está disponible y trae 3 nuevas características de GraphQL, nuevos hooks para el router, actualizaciones para Prisma y Redwood Studio, una herramienta para observar logs de SQL, telemetría, métricas generales, un servicio de mailing y un playground de GraphQL. Nada mal, ¿eh?, si quieres probarlo, ya puedes hacerlo.

NOTICIA 📰 
En que ha estado trabajando el equipo de React

No estaban muertos, 💀 solo andaban de parranda. 🥳 El equipo de React está preparando la versión 19, que va a traer dos cosas muy interesantes: React Compiler y Server Actions. Después de mucha iteración y pruebas en producción con sus productos, como Instagram, están preparándose para lanzar una versión pública de desarrollo, y aquí te puedes enterar de todo lo que viene.

UN DÍA COMO HOY 🗓️ 

El 06 de marzo de 2012, Google renombra su tienda online "Android Market" como Google Play.

Google lanzó la tienda Android Market el 22 de octubre de 2008 e introdujo soporte para las aplicaciones de pago desde el 13 de febrero de 2009.

El motivo de este cambio fue debido a la intención de Google de comercializar otros productos distintos a Android  además de mejorar su posición y competencia frente a Apple y Amazon.

En estos momentos Google Play además de apps vende música, libros, películas, hasta tablets y smartphones.

Google afirma que dispone en su tienda más de 700.000 apps y juegos, además de un gran catálogo de música, películas y libros que permite disfrutar de prácticamente lo que se quiera desde cualquier tablet o smartphone.

VACANTE 💼 
Senior Editor, Software Engineering

Ubicación: México (Remoto)
Empresa: Nisum
Requisitos: Se requiere una licenciatura en informática (o campos relacionados, por ejemplo, matemáticas) o experiencia demostrable en la industria equivalente. Experiencia práctica en ingeniería de software y conocimiento de las mejores prácticas recientes, con habilidades de depuración especialmente sólidas y comprensión de los conceptos fundamentales de software. Mentalidad de aprendizaje continuo y capacidad para aprender y aplicar rápidamente nuevos conceptos, lenguajes y habilidades de software a través de la investigación y la experimentación. Experiencia demostrada en redacción y edición, con un enfoque dedicado en temas de desarrollo y tecnología.

Para saber más acerca de los beneficios y las responsabilidades que busca esta vacante, entra al siguiente link. 🤞 

RESULTADO DEL CHALLENGE DE AYER 🧐 
¡Gracias a los que contestaron el challenge de ayer! Aquí te dejamos nuestra respuesta:

Crear un mini-framework para componentes reutilizables implica varias consideraciones, incluyendo el manejo de estado, renderizado basado en plantillas, y la actualización del DOM en respuesta a cambios. A continuación, se proporciona un ejemplo simplificado que ilustra estos conceptos básicos:

function crearComponente({ template, estado, methods }) {
  return {
    // Elemento DOM donde el componente será montado
    el: null,

    // Estado inicial del componente
    estado,

    // Inicializa y monta el componente en un elemento del DOM
    montar(el) {
      this.el = el;
      this.methods = {};

      // Vincular métodos para que 'this' refiera al contexto del componente
      Object.keys(methods).forEach(key => {
        this.methods[key] = methods[key].bind(this);
      });

      // Renderizar inicialmente el componente
      this.renderizar();
    },

    // Actualizar el estado y volver a renderizar el componente
    actualizar() {
      this.renderizar();
    },

    // Función de renderizado
    renderizar() {
      // Procesar el template para reemplazar las variables de estado
      let renderedTemplate = template.replace(/\\{\\{([^}]+)\\}\\}/g, (_, key) => {
        return this.estado[key.trim()];
      });

      // Convertir el template a elementos DOM
      this.el.innerHTML = renderedTemplate;

      // Vincular eventos después de renderizar
      this.vincularEventos();
    },

    // Vincular eventos definidos en el template
    vincularEventos() {
      // Ejemplo de cómo vincular un evento de clic a un método
      // Asume que el método y el elemento ya están definidos en el componente y el template
      const incrementarBtn = this.el.querySelector('#incrementar');
      if (incrementarBtn) {
        incrementarBtn.addEventListener('click', this.methods.incrementar);
      }
    },
  };
}

// Ejemplo de uso
const contadorComponente = crearComponente({
  template: `
    <div>
      <p>Contador: {{ contador }}</p>
      <button id="incrementar">Incrementar</button>
    </div>
  `,
  estado: {
    contador: 0
  },
  methods: {
    incrementar() {
      this.estado.contador++;
      this.actualizar();
    }
  }
});

// Montar el componente en el elemento con id 'app'
document.addEventListener('DOMContentLoaded', () => {
  const app = document.getElementById('app');
  contadorComponente.montar(app);
});

Este código define un marco básico para crear componentes reutilizables con estado y métodos. El método montar inicializa el componente, el método renderizar procesa el template y actualiza el DOM, y el método actualizar se utiliza para actualizar el estado y volver a renderizar. La función vincularEventos asume que se añadirán eventos manualmente en cada renderización, lo cual es un punto de partida para hacer que el componente sea interactivo.

Este ejemplo es bastante simplificado y no maneja casos más complejos, como la profundidad de anidación de componentes, manejo avanzado de eventos, o técnicas más sofisticadas de reactividad y actualización de componentes.

CHALLENGE DE HOY ⚔️ 
En la manipulación de cadenas, es común querer identificar caracteres únicos o que aparecen una sola vez. Tu tarea es escribir una función que tome una cadena como entrada y devuelva el primer carácter que no se repita en ella. Si todos los caracteres se repiten o la cadena está vacía, la función debe retornar null.

Tareas a realizar:

1. Implementa una función primerCaracterUnico que acepte una cadena como argumento.

2. La función debe analizar la cadena y retornar el primer carácter que aparece solo una vez en ella.

3. Si no hay caracteres únicos o la cadena está vacía, retorna null.

Ejemplo de uso:

console.log(primerCaracterUnico("abracadabra")); // Debería retornar "c"
console.log(primerCaracterUnico("aabbcc")); // Debería retornar null
console.log(primerCaracterUnico("")); // Debería retornar null

Código Base para Empezar:

function primerCaracterUnico(cadena) {
    // Tu implementación aquí
}

// Ejemplo de uso

Consejos:

• Considera utilizar estructuras de datos como objetos o mapas para llevar un recuento de la frecuencia de cada carácter.

• Una vez que tienes las frecuencias, puedes iterar nuevamente sobre la cadena para identificar el primer carácter con una frecuencia de 1.

Comparte tu respuesta en redes sociales y etiquétanos (@frontenderos), compartiremos nuestra respuesta en el issue de mañana. 😎 

Tu feedback nos ayuda a mejorar

Por favor elige una opción y dinos lo que te gustó y lo que no. Leemos todas las respuestas 👀