#138 El stack AHA

El stack AHA

A los programadores nos encantan las siglas graciosas o fáciles de recordar para nuestras tecnologías y stacks de tecnologías que usamos. El stack AHA es Astro, HTMX y Alpine.js. Un stack que permite ser liviano, minimalista y suficiente para tus proyectos. ¿Tú lo probarías?

El librito de la manipulación del DOM con JavaScript

La manipulación del DOM con JavaScript, es una de las cosas básicas que todo frontendero que se respete debe saber, pero a veces, uno aprende herramientas que hacen que no se tenga la necesidad de manipular el DOM directamente. Pero si quieres aprender, checa este link.

Creando formularios dinámicos con React Hook Form

Crear formularios dinámicos viene bien cuando tu proyecto utiliza ligeras variaciones del mismo, como es muy común que ocurra en los proyectos modernos, y lo puedes hacer tan modularizable como quieras.

EL RINCÓN DEL AI 🤖 
El panel de administrador que no tienes que construir

Si ya existían APIs que se generaban al cargar una base de datos, por supuesto que a alguien se le iba a ocurrir hacer un proyecto que te permitiese crear un dashboard directamente de una base de datos. Lo bueno de este proyecto, es que puedes construir un panel con hasta 10 páginas de forma gratuita, nada mas para probar.

EL RINCÓN DEL DISEÑADOR 🎨 
Construir una estrategia para Design Systems

Un Design System, es un producto. Un producto que es interno de la compañía pero un producto a final de cuentas. Y como tal, se debe construir una estrategia para construir un Design System. Y aunque estas estrategias pueden parecer mucho para proyectos pequeños, tómalas como referencia, tal vez te puedan servir para definir procesos para todo tipo de proyectos.

GUÍA 📖 
El libro de la experiencia de desarrollador

¿Qué es Developer Experience? ¿Cómo puedo usar este conocimiento para mejorar mi carrera profesional? Estas y otras respuestas encontrarás en esta buena referencia que sin duda te ayudará.

HERRAMIENTA 🛠️ 
Wedges

Wedges es una biblioteca de componentes para React super profesional respalda por la experiencia y trayectoria de LemonSqueezy. Y viene en sabores para Next.js, Vite, Remix, Gatsby, Astro y hasta Laravel.

mjml-react

MJML es un framework para escribir templates de emails responsivos y mjml-react es una biblioteca que te permite hacerlo desde la comodidad de React.js. Si aun sigues haciendo emails con HTML y CSS planos, no sufras mas, usa estas bibliotecas y olvídate de los problemas.

UN DÍA COMO HOY 🗓️ 

El 27 de enero de 2010, Oracle completa la adquisición de Sun Microsystem anunciada el 20 de abril del año 2009.
El acuerdo para la compra alcanzaría un monto estimado en 5.600 millones de dólares efectivo, que alcanza los 7.400 millones de dólares al sumar la deuda de Sun.
Históricamente, el negocio de bases de datos de Oracle se realizó en conjunto con el de los servidores de Sun.
La compra proporcionó a Oracle además de los servidores Sun y procesadores SPARC, la siguiente tecnología:
Java de Sun (muy criticada últimamente por sus deficiencias en seguridad).
El sistema operativo Solaris y la base de datos de código abierto MySQL (ampliamente utilizada en el ámbito académico y empresarial).

VACANTE 💼 
Web Frontend Engineer - JS, CSS, React, Flutter

Ubicación: Juárez, Chihuahua, México (Remoto)
Empresa: Canonical
Requisitos: Una trayectoria académica excepcional tanto en la escuela secundaria como en la universidad. Licenciatura en Ciencias de la Computación o STEM, o una narrativa convincente sobre su camino alternativo Impulso y trayectoria de ir más allá de las expectativas Bien organizado, emprendedor y capaz de entregar según lo previsto. Manera profesional de interactuar con colegas, socios y la comunidad. Conocimientos de tecnología web (HTML, CSS y JS). Fluidez en mecanografiado, React o Flutter. Entre otros.
Beneficios: Ambiente de trabajo distribuido con sprints en equipo dos veces al año en persona. Presupuesto de aprendizaje y desarrollo personal de USD 2.000 al año. Revisión anual de compensación Recompensas de reconocimiento. Entre otros.

¿Te interesa y quieres saber más? Entra aquí. 🤞 

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

function comprimirCadena(texto) {
    let resultado = '';
    let cuenta = 1;

    for (let i = 0; i < texto.length; i++) {
        const actual = texto[i];
        const siguiente = texto[i + 1];

        if (actual === siguiente) {
            cuenta++;
        } else {
            resultado += actual + (cuenta > 1 ? cuenta : '');
            cuenta = 1;
        }
    }

    return resultado;
}

// Ejemplo de uso
console.log(comprimirCadena("aabcccccaaa")); // Debería retornar "a2bc5a3"
console.log(comprimirCadena("abcd"));       // Debería retornar "abcd"

• La función comprimirCadena toma una cadena de texto texto como argumento.

• Inicializa una variable resultado para almacenar la cadena comprimida y una variable cuenta para contar las repeticiones consecutivas de un carácter.

• Itera a través de la cadena texto:

  • Compara cada carácter actual con el siguiente carácter siguiente.

  • Si son iguales, incrementa cuenta.

  • Si no son iguales o se llega al final de la cadena, añade el carácter actual y su cuenta (si cuenta es mayor que 1) a resultado y reinicia cuenta a 1.

• Devuelve la cadena resultado comprimida.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que elimine las propiedades nulas o indefinidas de un objeto.

1. Implementa una función limpiarObjeto que acepte un objeto como argumento.

2. La función debe retornar un nuevo objeto que contenga solo las propiedades del objeto original que no sean nulas ni indefinidas.

3. Asegúrate de no modificar el objeto original.

Ejemplo de uso:

const objeto = { a: 1, b: null, c: 3, d: undefined };
console.log(limpiarObjeto(objeto));
// Debería devolver { a: 1, c: 3 }

Puedes usar métodos como Object.keys o Object.entries para iterar sobre las propiedades del objeto.

• Considera el uso del operador de propagación o Object.assign para crear un nuevo objeto.

Este desafío te ayudará a practicar la manipulación de objetos y el uso de condicionales para filtrar datos en JavaScript.

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 👀