#207 Comparando autenticación en React y Next

Comparando autenticación en React y Next

Obviamente no es lo mismo una biblioteca para construir Interfaces de Usuario, que un meta-framework para construir aplicaciones full-stack, cuyo conjunto de bibliotecas permiten hacer la autenticación más rápido. Pero a veces la persona que te contrata no sabe la diferencia y te va a pedir lo mismo sin importar la tecnología, y para eso tienes que estar listo. Explora las diferencias entre ambas tecnologías y practica haciendo demos para tus proyectos.

Como el tamaño de la web impacta a usuarios con dispositivos lentos

Se sabe, el tamaño importa. Mientras más pesado tu sitio web, peor va a ser la experiencia de uso para usuarios con conexiones lentas o dispositivos lentos, que a veces no es lo mismo y hay que aclarar. Lo mejor de este artículo, aparte de toda la información fehaciente que muestra, es que esta hecho en HTML, simple y plano, y que carga super rápido. Nos encanta la gente que cree que el medio es el mensaje.

Type system del compilador de React

Aun no probamos el compilador de React y cada vez tenemos más noticias sobre él. Los compas de React nos siguen preparando para lo que viene y enseñando una o dos cosas sobre teoría de compiladores y types.

GUÍA 📖 
3 React Hooks útiles que no sabias

Bueno, quizás si conozcas uno de estos, ya que el useLayoutEffect es muy popular y una opción a la que llegas cuando quieres optimizar. Pero los otros dos hooks de React, ni nosotros conocíamos.

INISPIRACIÓN 💡 
Instagram - Motion Identity System

Si hay una empresa o producto que puede presumir de un Motion Identity System, esa es Instagram. En la web y en las apps cada vez hay más Motion, y eso esta chido, porque le da un nuevo sentido y uso a las interfaces de usuarios. Si quieres inspirarte un poco, pasa a leer este artículo que habla sobre el tema.

HERRAMIENTA 🛠️ 
React Data Grid

Ojalá hubiéramos conocido este React Data Grid antes de pagar esa licencia de Ag-grid, dijo alguien en algún lugar. Y es que, esta herramienta tiene todo lo que necesitas para apantallar a tus compañeros, a tus jefes y a tus stakeholders. Tanto si lo usas para Demos o para Productos, tienes que probarla.

Pigment CSS

Pigment CSS, es una biblioteca CSS-in-JS que extrae los estilos declarados a archivos CSS independientes al momento de construir, y forma parte de MUI (Material UI) y que ya tiene soporte para Next.js y Vite, y en el futuro puede que se tenga soporte en más frameworks.

LANZAMIENTO 🚀 
Rsbuild v0.5

¿Esta es la primer herramienta para el ecosistema JavaScript construida en Rust con un logo de cangrejo? No lo sabemos, pero esta mono. Rsbuild es un conjunto de herramientas para darle mayor poder de building a tus proyectos construidos en Webpack que tienes que probar y si te gusta, usar.

UN DÍA COMO HOY 🗓️ 

El 05 de abril de 2006, Apple Computer anuncia el lanzamiento de Boot Camp.

Boot Camp es un software que asiste al usuario en la instalación de las versiones de Windows XP, Windows Vista, Windows 7 o GNU/Linux en ordenadores Macintosh con procesador Intel.

Boot Camp guía al usuario a través de un reparticionamiento no destructivo (incluyendo poder cambiar el tamaño de las particiones existentes) de sus discos duros y también le da la posibilidad de crear un CD con los controladores de hardware correspondientes para Windows XP y Vista.

Boot Camp no es un herramienta de virtualización que permite al usuario correr Windows y Mac OS X al mismo tiempo, sino que el ordenador debe ser reiniciada para usar uno u otro sistema operativo.

VACANTE 💼 
Senior Frontend Developer with Design Experience

Ubicación: América Latina (Remoto)
Empresa: BetterEngineer
Requisitos: Creación de aplicaciones organizadas, accesibles y de alto rendimiento utilizando HTML, CSS, Javascript, desarrollador web de Google, Adobe Creative Suite, React, Angular y API. Marcos de JavaScript como React/Redux, Angular, Express, jQuery, etc. Buen diseño y sensibilidad UX. Más de 5 años de experiencia como ingeniero de software. Fuertes habilidades organizativas (capacidad para priorizar, gestionar el tiempo, administrar el tiempo y cumplir con los plazos de manera efectiva en múltiples proyectos). Se requiere dominio del inglés hablado y escrito.
Responsabilidades: Liderar el desarrollo de software con usuarios reales. Adherirse a las mejores prácticas de desarrollo ágil. Demostrar pasión por aprender y crear aplicaciones de vanguardia. Implementar pruebas unitarias utilizando desarrollo impulsado por pruebas (TDD) Implementar y refactorizar utilizando patrones de diseño relevantes. Ser mentor de otros ingenieros. Aprenda e implemente proactivamente nuevas mejores prácticas. Gestionae las expectativas comunicándose periódicamente.

Aquí te dejamos el link para que puedas conocer más de esta vacante. 🤞 

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

Para convertir un string de snake_case a CamelCase en JavaScript, puedes seguir este enfoque que utiliza los métodos split, map, y join para transformar y combinar el string según sea necesario:

function snakeACamel(str) {
    // Dividir el string en palabras utilizando el guión bajo como delimitador
    return str.split('_')
        // Iterar sobre cada palabra en el array resultante
        .map((palabra, indice) => {
            // Dejar la primera palabra en minúsculas y capitalizar la primera letra de las demás palabras
            if (indice === 0) {
                return palabra.toLowerCase();
            } else {
                // Capitalizar la primera letra de cada palabra excepto la primera
                return palabra.charAt(0).toUpperCase() + palabra.slice(1).toLowerCase();
            }
        })
        // Unir todas las palabras transformadas en un único string
        .join('');
}

// Ejemplo de uso
console.log(snakeACamel("esta_es_una_variable")); // Debería retornar "estaEsUnaVariable"
console.log(snakeACamel("hola_mundo")); // Debería retornar "holaMundo"

El método split('_') se usa para dividir el string original en un array de palabras, utilizando el guión bajo como separador.

• El método map se aplica al array resultante para transformar cada palabra. Para cada palabra, excepto la primera, se capitaliza la primera letra y el resto se deja en minúsculas. La primera palabra se asegura de que permanezca en minúsculas para cumplir con el formato CamelCase.

• El método join('') se utiliza para unir todas las palabras transformadas en un único string sin separadores, resultando en un string en formato CamelCase.

• Este enfoque transforma eficientemente el string de snake_case a CamelCase, manejando correctamente la capitalización según las convenciones de CamelCase.

CHALLENGE DE HOY ⚔️ 
Determinar si un Array es Subconjunto de Otro

Se te dan dos arrays, array1 y array2. Tu tarea es desarrollar una función que verifique si array1 es subconjunto de array2, es decir, si todos los elementos de array1 están contenidos en array2. La función debe considerar la repetición de elementos, es decir, si array1 contiene elementos repetidos, estos deben estar presentes el mismo número de veces o más en array2.

1. Implementa una función esSubconjunto que acepte dos arrays como argumentos.

2. La función debe retornar true si array1 es subconjunto de array2. De lo contrario, retorna false.

3. Asegúrate de que la función cuente la frecuencia de cada elemento para considerar correctamente las repeticiones.

Ejemplo:

console.log(esSubconjunto([1, 2], [1, 2, 3, 4])); // Debería retornar true
console.log(esSubconjunto([1, 2, 2], [1, 2, 3, 4])); // Debería retornar false
console.log(esSubconjunto([1, 4, 3], [1, 2, 3, 4])); // Debería retornar true
console.log(esSubconjunto([1, 5], [1, 2, 3, 4])); // Debería retornar false

• Considera utilizar un objeto o un Map para llevar un registro de la frecuencia de cada elemento en ambos arrays.

• Primero, cuenta la frecuencia de cada elemento en array1 y array2.

• Luego, verifica que cada elemento en array1 esté presente en array2 con una frecuencia igual o mayor.

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 👀