#178 React Trends en 2024

React Trends en 2024

El ecosistema React no para de crecer. Y cada vez hay más frameworks y meta-frameworks que hacen rico el ecosistema. Y siempre es bueno estar al tanto de todo lo que sucede porque, aunque muchas veces el trabajo sea mantener y reparar, a veces también a uno le toca crear de cero.

Como Qwik es mejor que React…

El equipo de Qwik afirma que la forma en la que su framework entrega el código JavaScript a utilizar por el navegador, es mejor que lo que hace React, porque entrega por chunks más pequeños y de forma más inteligente. Habría que poner a prueba esta teoría para ver si es cierto.

HTMX vs React una completa comparación

React, en sus inicios, era una biblioteca para construir interfaces de usuario de forma rápida, pero sobre todo que fuera modular. HTMX es una biblioteca que te permite crear interfaces de usuario de una forma rápida pero que ademas te ofrece AJAX. ¿HTMX puede ser el killer de React? No lo sabemos, pero lo que sí sabemos es que puede ser una alternativa para los que quieran construir interfaces de una forma diferente.

GUÍA 📖 
Como configurar un sever Node con TypeScript en 2024

¿Para que necesitas un server Node.js con TypeScript en 2024? Para muchas cosas que quizás ahorita no vislumbras, pero es un hack de frontendero que te puede servir mucho en el futuro.

VIDEO 📹️ 
Next.js App Router Authentication

Esta es una de las partes difíciles y cruciales al momento de elegir un framework, como maneja la autenticación de usuarios y que tanto me va a tomar hacerlo. En este video vas a aprender todo lo necesario al respecto para hacerlo con Next.js

HERRAMIENTA 🛠️ 
WXT

Si trabajas creando extensiones para navegador, esta herramienta te va a gustar. Se trata de un framework para construir extensiones que es compatible con cualquier de los principales navegadores, y no solo te da el boilerplate, sino un conjunto de herramientas para su desarrollo. Ahora, cuando en algún proyecto te pidan hacer un boilerplate, lo harás de volada.

Canvas Size

Canvas tiene un problema, y es que hay un limite del tamaño que puede tener y es variable en cada navegador de escritorio y móvil, y lo peor es que no puedes saberlo hasta que lo creas 😱. Canvas Size, es una biblioteca que nos ahorra la molestia y nos dice el tamaño máximo que el Canvas puede tomar para evitarnos el disgusto.

LANZAMIENTO 🚀 
Oxide en Tailwind v4.0

El equipo de Tailwind CSS acaba de anunciar que la nueva versión 4.0 va a incluir Oxide, un nuevo engine para su herramienta para mejorar la velocidad de ejecución y también para mejorar el toolchain de Tailwind. Suena interesante, vamos a ver qué tal.

UN DÍA COMO HOY 🗓️ 

El 07 de marzo de 2005, F-Secure informa la existencia del primer gusano informático denominado Commwarrior-A que infecta teléfonos móviles con sistema operativo Symbian de la serie 60.

Aunque Commwarrior no fue considerado como peligroso, los expertos coinciden en que fue el principio de una nueva era donde los ataques informáticos en telefonía móvil sería algo más común.

Él gusano Commwarrior se transmite a través de los mensajes multimedia del teléfono (MMS) tanto por 3G como por Bluetooth, enviándose copias de sí mismo a los propietarios de teléfonos con las mismas características de sistema operativo, usurpando los datos de la libreta de direcciones de la terminal infectada.

Pocos días antes, F-Secure había detectado el primer virus en un dispositivo móvil. El Cabir.

VACANTE 💼 
Full stack web development

Ubicación: Querétaro, México (Remoto)
Empresa: VASS LATAM
Requisitos: Experiencia en Python y SQL. Conocimiento en framework de Python como Flask o Django. Conocimiento de REST APIs. Manejo de Git. Inglés intermedio. Deseable: Javascript, PowerShell, HTML5 , CSS3
Beneficios: 👩🏻‍⚕ Seguro de Gastos Médicos Mayores.
😴 Vonuss Days - 5 días de descanso extraordinarios anuales.
🛫 Proyectos nacionales e internacionales
💼 Smartworking (remoto – oficina)
💰 Adelantos de nómina, acceso en el momento que tu decidas.
🏋🏻‍♀ Descuentos en una red de +2600 gimnasios a un precio especial y en todo México. Aplica para ti y 5 familiares o amigos.
📚 Cursos de capacitación con opción a certificaciones.
👩🏻‍🏫 Clases de inglés
🧠 Convenio con fundación para atención psicológica
📈 Programa de Gestión del Desempeño VASS&YOU
👨🏻‍💻 TUA - Bonos por referidos

¿Te interesó esta vacante? Aquí te dejamos el link para aplicar. 🤞 

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

Para resolver el desafío de encontrar el primer carácter no repetido en una cadena, podemos usar un enfoque de dos pasos: primero, contamos las ocurrencias de cada carácter; luego, buscamos el primer carácter con solo una ocurrencia. Aquí está cómo podrías implementarlo:

function primerCaracterUnico(cadena) {
    // Contar la frecuencia de cada carácter
    const frecuencias = {};
    for (let char of cadena) {
        if (frecuencias[char]) {
            frecuencias[char]++;
        } else {
            frecuencias[char] = 1;
        }
    }

    // Buscar el primer carácter con una frecuencia de 1
    for (let char of cadena) {
        if (frecuencias[char] === 1) {
            return char;
        }
    }

    // Si todos los caracteres se repiten o la cadena está vacía, retorna null
    return 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

Explicación del Código:

• Se declara un objeto frecuencias para almacenar las ocurrencias de cada carácter en la cadena.

• Se utiliza un primer bucle for...of para iterar sobre cada carácter de la cadena y actualizar el contador de ocurrencias en el objeto frecuencias.

• Se utiliza un segundo bucle for...of para iterar nuevamente sobre la cadena y buscar el primer carácter cuya frecuencia es exactamente 1, basándose en el objeto frecuencias. Si se encuentra tal carácter, se retorna inmediatamente.

• Si el bucle termina sin encontrar un carácter con una sola ocurrencia, o la cadena está vacía desde el principio, se retorna null.

Este enfoque es eficiente y claro, utilizando estructuras de datos básicas y operaciones de iteración para resolver el problema planteado.

CHALLENGE DE HOY ⚔️ 
Desarrollar una función en JavaScript que combine dos arrays de números y los ordene de menor a mayor.

1. Implementa una función combinarYOrdenar que acepte dos arrays de números como argumentos.

2. La función debe combinar ambos arrays en uno solo.

3. Luego, debe ordenar el array combinado de menor a mayor.

4. Retorna el array combinado y ordenado.

Ejemplo de uso:

console.log(combinarYOrdenar([1, 3, 5], [2, 4, 6])); // Debería retornar [1, 2, 3, 4, 5, 6]
console.log(combinarYOrdenar([7, 8], [10, 9, 11])); // Debería retornar [7, 8, 9, 10, 11]

• Considera utilizar métodos de array como concat para combinar los arrays.

• Para el ordenamiento, puedes utilizar el método sort de los arrays. Recuerda que sort por defecto ordena los elementos como cadenas, por lo que puede ser necesario proporcionar una función de comparación para números.

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 👀