#157 Migrando a Next.js App Router, lo bueno, lo malo y lo feo

Migrando a Next.js App Router, lo bueno, lo malo y lo feo

Lo malo de trabajar con ciertos frameworks Open Source, es que luego toman ciertos rumbos que puede que no se alineen con los de tu proyecto. Y pues eso esta bien, porque en proyectos Open Source los creadores tratan de solucionar sus propios problemas. Next.js se volvió el framework favorito de React.js por hacer las cosas fáciles, pero últimamente ha habido mucha fricción, como las que se describen los compas de Flightcontrol al migrar de Pages Router a App Router.

El API de navegación

Una de las cosas chidas que tienen las bibliotecas y frameworks JavaScript, son sus APIs de navegación, y eso es porque a las APIs nativas del navegador les falta esa flexibilidad y opciones que estas traen… pero obviamente iba a haber una reacción por parte de los navegadores, o mejor dicho, de Chrome, con esta API que esperemos pronto está en todos los navegadores.

Take a Qwik break from React with Astro

El titulo de este articulo era muy ingenioso y decidimos dejarlo en ingles por que no encontramos una manera divertida en español. La comunidad esta molesta con Next.js y con React y cada vez hay más artículos al respecto. Y así como se creó Preact como alternativa hace muchos años asi como Solid.js e Inferno.js, también Qwik es una alternativa que ha estado ganando popularidad. Lo bueno del ecosistema JavaScript es que siempre tendrás opciones para elegir.

HERRAMIENTA 🛠️ 
Jint

¿Eres un frontendero que también hace .Net o trabaja en ambientes .Net? Jint es un interprete JavaScript para poder ser ejecutado en dichos ambientes de forma segura y que te permite acceder a objetos y funciones .Net en tu código JavaScript. Apenas alcanzó su versión 3.0 entonces tiene estabilidad y además tiene soporte para la mayoría de nuevos features de JavaScript.

Evershop

¿Necesitas construir un proyecto ecommerce y lo quieres hacer con Node.js y React? Echale un ojo a Evershop que, ademas de los proyectos mencionados, utiliza PostgreSQL y GraphQL y su arquitectura y filosofía recuerda un poco a Shopify, entonces vale la pena echarle un ojo.

VIDEO 📹️ 
Como Vercel construye Vercel con Vercel

Las compañías cuyos productos son pensados para developers, como Vercel, deberían hacer más videos como estos 😄 que enseñan tras bambalinas como sucede la magia.

EL RINCÓN DE CSS 👨‍💻 
Utilizando :focus-visible

Esta característica relativamente nueva de CSS, va a hacer mucho por la accesibilidad de tus sitios web y también por esos usuarios que prefieren usar el teclado para todo.

UN DÍA COMO HOY 🗓️ 

El 15 de febrero de 2005, los antiguos empleados de PayPal Chad Hurley, Jawed Karim y Steve Chen ponen en marcha el sitio web para compartir videos YouTube, Inc. en Menlo Park, California.
Habían creado el sitio web para poder subir y ver los videos de sus fiestas.
El primer video clip, titulado “Me at the Zoo” se subirá el 23 de abril de 2005.
Sin embargo, al poco tiempo de estar en linea los creadores se percataron rápidamente que los usuarios cargaban toda clase de vídeos, dejando atrás la idea original.
El 13 de noviembre 2006 Google completará la adquisición de la compañía por un monto de US$ 1.650 millones.
Hoy YouTube tiene 800 millones de usuarios únicos al mes y recibe más de 72 horas de video por minuto.
El video más visto de Youtube es el de Luis Fonsi y Daddy Yankee con su tema “Despasito”.

VACANTE 💼 
Sr Front-End React JS Software Developer / Engineer | 100% Remote | SaaS | Construction Tech

Ubicación: Monterrey, Nuevo León
Empresa: Clue Insights
Requisitos: Tener más de 3 años de experiencia en React y desarrollo Front-end. podría estar en Herramientas de comunicación y colaboración (por ejemplo, redes sociales, comunicaciones, VOIP, etc.) SaaS, software empresarial, análisis de negocio o datos relacionados con hardware o maquinaria. Estar íntimamente familiarizado con React, Javascript, Linux, Rest API, AWS y SQL. Lo ideal es que tengas algo de experiencia con la codificación frontend. Tener un historial de construcción de infraestructura estable y de alto rendimiento. Haber trabajado en una startup y en un entorno de rápido movimiento, a veces agitado pero siempre divertido. Entre otros.
Beneficios: El salario para este puesto depende de la ubicación y la antigüedad. Nuestro objetivo es pagar en el 10% superior del rango salarial. También ofrecemos un subsidio para oficina en casa, computación e Internet.

¿Quieres conocer más de esta vacante? Entra aquí. 🤞 

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

function sumarUnicos(array1, array2) {
    // Combinar ambos arrays
    const combinados = array1.concat(array2);

    // Filtrar los elementos únicos
    const unicos = combinados.filter((valor, indice, self) => {
        return self.indexOf(valor) === indice && self.lastIndexOf(valor) === indice;
    });

    // Sumar los valores únicos
    const suma = unicos.reduce((acumulado, valorActual) => acumulado + valorActual, 0);

    return suma;
}

// Ejemplo de uso
console.log(sumarUnicos([1, 2, 3], [2, 3, 4, 5])); // Debería retornar 9
console.log(sumarUnicos([10, 20, 30], [10, 30, 40, 50])); // Debería retornar 110

• La función sumarUnicos toma dos arrays de números como argumentos.

• Primero, combina ambos arrays utilizando concat.

• Luego, utiliza filter para seleccionar los elementos únicos. Un elemento es único si la primera y última aparición en el array combinado tienen el mismo índice, lo que significa que no se repite.

• Finalmente, utiliza reduce para sumar los valores de los elementos únicos y retorna el total.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que tome una cadena de caracteres y la convierta en un valor hash.

1. Implementa una función generarHash que acepte una cadena de caracteres como argumento.

2. La función debe retornar un valor hash numérico simple basado en los caracteres de la cadena.

3. No es necesario implementar un algoritmo de hash complejo; un enfoque simple basado en la suma de los códigos de caracteres es suficiente para este desafío.

console.log(generarHash("Hola")); // Puede retornar un valor hash como 428
console.log(generarHash("Mundo")); // Puede retornar un valor hash como 552

• Puedes iterar sobre cada carácter de la cadena, obtener su código de carácter usando charCodeAt(), y sumar estos códigos para generar un valor hash.

• Considera aplicar operaciones adicionales a los códigos de caracteres para obtener un hash más distribuido si lo deseas.

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 👀