#212 Conmemorando el 35 aniversario de la Web

Conmemorando el 35 aniversario de la Web

El creador de la Web, tiene una carta conmemorando el 35 aniversario de la Web, y llama a hacer conciencia sobre el estado actual y futuro de lo que llama un bien público y su desvirtualización. Para reflexionar y compartir.

Navegando el futuro del frontend

El presente de la Web como plataforma, es inmenso. Todas las herramientas que se han creado desde el inicio, han servido para pavimentar el camino hasta aquí, y hoy contamos con una solución para cada tipo de escenario a problemas que queremos solucionar. Asi que, ¿cuál es el siguiente paso? ¿Y cómo hacemos sentido a todo lo que tenemos a nuestra disposición para construir sin marearnos y fatigarnos de tantas opciones que nos impidan construir?

GUÍA 📖 
Construye una aplicación full-stack con React y Azure Static Web Apps

La cuota de mercado de Azure sigue aumentando y tarde o temprano te tocará escribir una app utilizando esos servicios de nube, y que mejor que te vayas preparando practicando con esta guía.

INISPIRACIÓN 💡 
Modern Font Stacks

¿Quieres saber cuáles son las tipografías que puedes utilizar de forma nativa en cada sistema operativo para hacer el mejor uso de ellas desde CSS? Pásate a checar este link y guárdalo en tus marcadores para futuras referencias.

HERRAMIENTA 🛠️ 
TLD-List

¿Estas pensando en comprar un dominio para tu siguiente proyecto? Revisa esta página antes de que lo hagas para que sepas sobre los mejores precios de los mas populares proveedores.

React Content Loader

Otra herramienta, o en este caso, biblioteca, que necesitarás para tu cinturón de herramientas. Los skeletons se han vuelto muy populares como solución a mostrar cuando tu data esta cargando y aun no puedes mostrarla. Esta biblioteca además viene con muy buenos ejemplos para que comiences a usarla de una.

UN DÍA COMO HOY 🗓️ 

El 10 de abril de 1995, Opera Software lanza la versión 1.0 de su navegador web Opera.
El navegador usaba el motor de renderizado Blink y dispone de versiones para computadoras de escritorio, teléfonos móviles y tabletas.
Los sistemas operativos compatibles con Opera de escritorio son Windows, OS X y GNU/Linux.
Los sistemas operativos móviles soportados son BlackBerry, Symbian, Windows Phone, Android e iOS entre otros.
El 22 de abril de 1996, Opera Software libera su primera versión pública, la versión 2.0, la cual solo funcionaba en Microsoft Windows.
La versión 3.0 fue lanzada el 01 de diciembre de 1997 e introdujo el bloqueo de ventanas emergentes.
En 1998, Opera desarrolla el primer navegador para dispositivos móviles. En 2000, el navegador incluye la navegación por pestañas.
En 2006, el navegador Opera fue seleccionado por Nintendo como su navegador oficial y Opera Software lanza “Canal Internet” y “Nintendo DS Browser”, los navegadores de las consolas de juegos Nintendo Wii y Nintendo DS.
Opera ha sido pionero en incorporar características innovadoras que luego han sido adoptadas por el resto de los navegadores web, como por ejemplo el Acceso Rápido (Speed Dial).
El 23 de abril de 2014, Opera Software lanzó la versión 12.17 (solo para Windows).

VACANTE 💼 
Senior Frontend Engineer (Docker Suite UI)

Ubicación: México (Remoto)
Empresa: Docker, Inc
Requisitos:Experiencia en la creación, ejecución, prueba y depuración de aplicaciones frontend para web o escritorio en marcos y tiempos de ejecución JS como React, Electron, NodeJS y navegadores web. Profundo conocimiento técnico de Javascript y Typecript. Gran dominio de las herramientas de construcción frontend, como hilo, webpack, eslint, jest. Fuertes habilidades en inglés verbal y escrito que se utilizan para una colaboración efectiva. Apasionado por la productividad del desarrollo frontend a través de mejores prácticas y patrones. Cómodo trabajando con React, Remix y Electron. Entre otros.
Beneficios: Libertad y flexibilidad; adapta tu trabajo a tu vida. Configuración de oficina en casa; queremos que estés cómodo mientras trabajas 16 semanas de licencia parental remunerada. Estipendio tecnológico equivalente a $100 netos/mes. Plan PTO que lo alienta a tomarse el tiempo para hacer las cosas que disfruta. Hackathons trimestrales para toda la empresa. Entre otros.

Si te interesó esta vacante, puedes aplicar aquí. 🤞 

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 sumar dos números representados por dos listas enlazadas, necesitamos iterar a través de ambas listas simultáneamente, sumar sus valores (más cualquier acarreo de la suma anterior), y mantener un acarreo si es necesario para la siguiente suma. La solución final se construirá como una nueva lista enlazada. Aquí te muestro cómo podrías hacerlo:

class Nodo {
    constructor(valor = 0, siguiente = null) {
        this.valor = valor;
        this.siguiente = siguiente;
    }
}

function sumarListas(lista1, lista2) {
    let cabezaResultado = new Nodo(0); // Nodo ficticio para facilitar la manipulación de la lista resultante
    let nodoActual = cabezaResultado;
    let acarreo = 0;

    while (lista1 !== null || lista2 !== null) {
        // Obtener los valores de los nodos actuales, si existen
        let valor1 = lista1 ? lista1.valor : 0;
        let valor2 = lista2 ? lista2.valor : 0;

        // Calcular la suma y el acarreo
        let suma = valor1 + valor2 + acarreo;
        acarreo = Math.floor(suma / 10); // Determinar el nuevo acarreo

        // Crear un nuevo nodo con el dígito de la suma y mover el apuntador del nodo actual
        nodoActual.siguiente = new Nodo(suma % 10);
        nodoActual = nodoActual.siguiente;

        // Mover los apuntadores de las listas a sus siguientes nodos, si existen
        if (lista1) lista1 = lista1.siguiente;
        if (lista2) lista2 = lista2.siguiente;
    }

    // Si queda un acarreo después de procesar ambas listas, agregar un nuevo nodo
    if (acarreo > 0) {
        nodoActual.siguiente = new Nodo(acarreo);
    }

    return cabezaResultado.siguiente; // Retornar el nodo siguiente al nodo ficticio inicial
}

// Ejemplo de uso
let lista1 = new Nodo(2, new Nodo(4, new Nodo(3)));
let lista2 = new Nodo(5, new Nodo(6, new Nodo(4)));
let resultado = sumarListas(lista1, lista2);

// Para imprimir el resultado
function imprimirLista(nodo) {
    let actual = nodo;
    while (actual !== null) {
        console.log(actual.valor);
        actual = actual.siguiente;
    }
}

imprimirLista(resultado); // Debería imprimir los valores 7, 0, 8, que representa el número 807

Se define la clase Nodo que representa cada dígito del número en la lista enlazada.

• La función sumarListas toma dos listas enlazadas (lista1 y lista2) como argumentos

• Se utiliza un nodo ficticio (cabezaResultado) al principio de la lista resultante para facilitar la manipulación de la lista.

• Se itera a través de ambas listas hasta que ambas hayan sido completamente procesadas. En cada iteración, se suman los valores de los nodos actuales de ambas listas (considerando el acarreo de la suma anterior).

• Si después de terminar de iterar ambas listas queda un acarreo, se añade un nuevo nodo al final de la lista resultante con este valor de acarreo.

• Se retorna la lista resultante omitiendo el nodo ficticio inicial.

• La función imprimirLista es un helper para imprimir el resultado en la consola.

CHALLENGE DE HOY ⚔️ 
Crear un Menú Desplegable Responsivo

Debes desarrollar un menú de navegación que contenga varios enlaces. Este menú debe mostrarse en línea en pantallas grandes (por ejemplo, en computadoras de escritorio) y cambiar a un menú de hamburguesa (icono de tres líneas horizontales) en dispositivos móviles o pantallas pequeñas. Al hacer clic en el icono de hamburguesa, el menú se debe expandir para mostrar los enlaces.

Tareas a realizar:

1. Utiliza HTML para estructurar el menú de navegación con al menos cuatro enlaces.

2. Implementa CSS para que el menú sea horizontal en pantallas con un ancho de 768px o más.

3. Agrega la funcionalidad responsiva para cambiar a un menú de hamburguesa en pantallas más pequeñas de 768px de ancho.

4. Implementa una transición suave para la expansión del menú de hamburguesa.

Código Base para Empezar: 
HTML:

<nav class="menu-navegacion">
    <label for="toggle">☰</label>
    <input type="checkbox" id="toggle"/>
    <div class="menu">
        <a href="#">Inicio</a>
        <a href="#">Sobre Nosotros</a>
        <a href="#">Servicios</a>
        <a href="#">Contacto</a>
    </div>
</nav>

Consejos:

• Utiliza media queries para aplicar estilos diferentes dependiendo del tamaño de la pantalla.

• Para el menú de hamburguesa, puedes ocultar inicialmente los enlaces con display: none; y mostrarlos cuando el checkbox esté en :checked.

• Asegúrate de que el icono de hamburguesa solo sea visible en pantallas pequeñas.

• Experimenta con transiciones CSS para la expansión del menú.

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 👀