#217 Como Next.js rompe los fundamentos de React, con ejemplos

Como Next.js rompe los fundamentos de React, con ejemplos

Sabemos que Next.js es la opción más popular para construir sobre React hoy en día, pero, ¿qué tanto sigue este meta-framework la filosofía sobre la biblioteca de UIs sobre la que se basa? Quizás para satisfacer sus propias opciones de mercado (Vercel) se han alejado un poco de lo que prometieron, y es normal, dinerito habla, pero siendo pragmáticos, ¿cómo es el camino en el presente y en el futuro de ambas herramientas?

Porque crear una computación más saludable

Vivimos tiempos históricos, rápidos, alocados. Y en estos tiempos tan cambiantes necesitamos pensar y reflexionar. No le tengamos miedo al FOMO (Fear of Missing Out) por no estar al día o al tanto de toda esta voragine, y preguntémonos mejor en donde estamos y hacia dónde vamos.

GUÍA 📖 
Dominando los principios SOLID con React.js

Quizás ya has oido por ahi sobre SOLID, y si no, te animamos a que investigues de que va el termino porque te puede ayudar mucho para mejor tu carrera, ya no solo como frontendero, sino como software developer. Y te contamos de este tema porque te traemos una guía para hacer SOLID con React.js, no te la puedes perder, esta buenísima.

HERRAMIENTA 🛠️ 
redb

Ayer te presentábamos nodb, y hoy te traemos redb, que es una base de datos de Rust embebida. Entre sus características podrás encontrar que es simple, portable, de alto desempeño, compatible con ACID, y de tipo clave-valor.

phase

Hay gente que comparte contraseñas por WhatsApp y va muy tranquila por el mundo sin preocupaciones, y luego hay gente que es tan paranoica, que pide que la tapen con un abrigo cuando va a poner su NIP en el cajero automático. Si tu eres más del segundo tipo, entonces quizás necesitas una opción para compartir contraseñas para tus proyectos de forma segura, y para eso te traemos Phase. Lo mejor de Phase es que es Open Source y lo puedes alojar en tu propio servidor.

TEMPLATES 🖥️ 
Free SaaS Website UI Kit

Usualmente te compartimos UI Kits para Next.js o para alguna herramienta React o JS en general, pero hoy te traemos uno para Framer, el popular builder de sitios y aplicaciones web no-code.

INISPIRACIÓN 💡 
Recursos y metodos de UX

Con tanta competencia que hay actualmente en el mercado haciendo frontend, ¿cómo puede uno destacarse? La respuesta esta en los procesos y en los detalles. Si dominas mejor tus procesos de lo que haces y sabes añadir detalles, estarás un paso adelante. Y es por eso, que hoy te compartimos esta pagina de recursos UX para que mejores tus habilidades frontenderas.

VACANTE 💼 
Frontend Developer, React (Intermediate)

Ubicación: México (Remoto)
Empresa: The Home Depot
Requisitos: Excelentes habilidades de comunicación en inglés, tanto escrita como verbal. Más de 3 años de experiencia laboral relevante en un entorno ágil. Interfaz sólida con JavaScript; específicamente reaccionar
Responsabilidades: Colabora constantemente con el liderazgo tecnológico de EE. UU. en hojas de ruta, mejores prácticas de desarrollo y caminos pavimentados. Trabaja con el equipo de producto para garantizar historias de usuarios que estén listas para los desarrolladores, fáciles de entender y comprobables. Configura soluciones comerciales listas para usar para alinearse con las necesidades comerciales en evolución. Supervisa las herramientas y participa en conversaciones para fomentar la colaboración entre los equipos de productos. Proporciona soporte de aplicaciones para software que se ejecuta en producción.

Aquí te dejamos el link para que aproveches esta oportunidad. 🤞 

RESULTADO DEL CHALLENGE ANTERIOR 🧐 
¡Gracias a los que contestaron el último challenge! Aquí te dejamos nuestra respuesta:

Para implementar el algoritmo de ordenamiento por inserción en JavaScript, puedes seguir estos pasos para manipular el array directamente y ordenarlo en orden ascendente. Aquí está el código detallado para hacerlo:

function ordenamientoPorInsercion(array) {
    // Iterar sobre el array comenzando desde el segundo elemento
    for (let i = 1; i < array.length; i++) {
        // Almacenar el valor actual porque podría cambiar más tarde
        let valorActual = array[i];
        let j;

        // Realizar una comparación hacia atrás con los elementos del array ordenado
        for (j = i - 1; j >= 0 && array[j] > valorActual; j--) {
            // Desplazar el elemento una posición hacia la derecha
            array[j + 1] = array[j];
        }

        // Insertar el valor actual en su posición correcta dentro de la parte ordenada del array
        array[j + 1] = valorActual;
    }

    return array;
}

// Ejemplo de uso
console.log(ordenamientoPorInsercion([6, 1, 8, 4, 5])); // Debería retornar [1, 4, 5, 6, 8]
console.log(ordenamientoPorInsercion([12, 11, 13, 5, 6])); // Debería retornar [5, 6, 11, 12, 13]

• El bucle for comienza desde el segundo elemento del array, ya que el primer elemento se considera que está en la posición ordenada por defecto.
  • valorActual almacena temporalmente el valor del elemento que estamos intentando insertar en la parte ordenada del array.
  • El bucle interior for mueve los elementos que son mayores que valorActual una posición hacia la derecha para hacer espacio para insertar valorActual.
  • Este proceso continúa hasta que se encuentra una posición donde valorActual es mayor que el elemento anterior o hasta que se alcanza el comienzo del array.
  • Después de completar el desplazamiento necesario, se inserta valorActual en su ubicación correcta.
  • Este proceso se repite para cada elemento del array hasta que el array entero esté ordenado.

CHALLENGE DE HOY ⚔️ 
Implementar una Cola usando dos Pilas

Las pilas son estructuras de datos de tipo LIFO (Last In, First Out), mientras que las colas son de tipo FIFO (First In, First Out). Tu tarea es usar dos pilas para simular el comportamiento de una cola, donde el orden de los elementos encolados se mantiene al desencolarlos.

1. Implementa una clase ColaConDosPilas que utilice dos instancias de una clase Pila para simular el comportamiento de una cola.

2. La clase Pila debe soportar, al menos, dos operaciones: push (para añadir un elemento) y pop (para eliminar el último elemento).

3. La clase ColaConDosPilas debe tener dos métodos principales: • enqueue(elemento): para añadir un elemento a la cola. • dequeue(): para eliminar y retornar el primer elemento añadido (si la cola no está vacía).

4. Asegúrate de que el método dequeue maneje correctamente los casos cuando las pilas están vacías.

let cola = new ColaConDosPilas();
cola.enqueue(1);
cola.enqueue(2);
cola.enqueue(3);
console.log(cola.dequeue()); // Debería mostrar 1
console.log(cola.dequeue()); // Debería mostrar 2
cola.enqueue(4);
console.log(cola.dequeue()); // Debería mostrar 3

Consejos:

• Utiliza pila1 para manejar las operaciones de enqueue.
• Para dequeue, si pila2 está vacía, transfiere todos los elementos de pila1 a pila2, invirtiendo el orden para simular el comportamiento FIFO.
• Asegúrate de que el método dequeue verifique si pila2 está vacía antes de intentar desencolar, y maneje el caso cuando ambas pilas están vacías.

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 👀