#211 El kit de herramientas del depurador profesional

El kit de herramientas del depurador profesional

¿Quién no ha pasado horas y horas depurando un programa para simplemente descubrir que fue un typo, un error en la lógica o algo inesperado? Depurar es una ciencia y como tal se necesita una metodología que debes seguir para no estar dando vueltas sobre la misma solución, una y otra vez, y es por eso que Addy Osmani escribió este brillante artículo que debes de leer.

Prototipando en Figma contra HTML

Siendo honestos, los diseños en Figma que vemos por toda la Web siempre lucen fantásticos, pero a veces uno se pone a pensar, ¿eso es usable?. Y es ahí cuando la oportunidad de hacer prototipos en HTML contra prototipos en Figma se presenta. ¿Cuál es la mejor opción? Como todo en la vida, depende.

GUÍA 📖 
12 tips para configurar tu siguiente proyecto en Expo

¿Quieres evitarte dolores de cabeza la siguiente vez que hagas un proyecto mobile usando Expo y React Native? Considera las siguientes recomendaciones.

HERRAMIENTA 🛠️ 
Firebolt

Hay un meta-framework de React nuevo en la cuadra y es una alternativa interesante para esos proyectos pequeños en los que no sabes si usar React o Next, porque tiene lo mejor de ambos paradigmas pero con la misión de ser simple y rápido.

LANZAMIENTO 🚀 
Analog 1.0

Si te habías preguntado, dónde están los meta-framework de Angular, pues aquí está uno que acaba de anunciar su versión 1.0 y vaya que viene muy completo. Con soporte de Vite, SSR, SSG, y más, esta puede ser tu siguiente herramienta favorita.

UN DÍA COMO HOY 🗓️ 

El 09 de abril de 2013, Microsoft registra la marca “Blink”.

Curiosamente, Google habia anunciado seis días antes abandonar WebKit y utilizar su propio motor de renderizado denominado “Blink”.

Con esta solicitud de marca, Microsoft deseaba impedir que Google utilice el nombre de “Blink” para su nuevo motor de renderizado.

Microsoft, no se encuentra interesado en la nueva tecnología de Google, sino sólo en el nombre que planea utilizar.

Microsoft tiene una aplicación llamada Blink, capaz de "capturar una ráfaga de imágenes incluso antes de presionar el obturador y seguir capturando imágenes después de haber tomado tu foto".

Según Microsoft, Blink ayuda al usuario a tomar “la fotografia perfecta”, eliminando el movimiento de la cámara y centrándose en los elementos principales de una foto.

Cabe destacar, que Blink (la aplicación de Microsoft) era sólo un proyecto de Microsoft Research y Microsoft raramente registra marcas para herramientas de software conceptuales.

VACANTE 💼 
Sr. Front End Engineer

Ubicación: México (Remoto)
Empresa: Aha!
Requisitos: Más de dos años de experiencia trabajando en React. Producir páginas React escalables y con uso intensivo de datos. Experiencia en la creación de funciones (idealmente en una empresa SaaS de alto crecimiento) Colaborador activo con equipos de producto.
Beneficios: El rango de salario base para este puesto en los EE. UU. está entre $ 110 000 y $ 190 000. La compensación en efectivo también incluye participación en las ganancias y contribuimos con un porcentaje de su salario total cada mes para su jubilación. Planes médicos, dentales y de la vista (para muchos compañeros de equipo, cubrimos el 100% de las primas) Hasta 200 horas de tiempo libre remunerado al año para gastar como quieras 30 a 90 días de licencia parental remunerada y de cinco a 10 días de licencia remunerada para cuidados y duelo Hasta $1,000 al año para educación de terceros, junto con tiempo libre remunerado para sumergirse en el aprendizaje Oportunidades de voluntariado durante todo el año.

¿Te gustaría conocer más sobre esta vacante? Aquí te dejamos el link. 🤞 

RESULTADO DEL ÚLTIMO CHALLENGE🧐 
¡Gracias a los que contestaron el challenge anterior! Aquí te dejamos nuestra respuesta:

Para determinar si un array es subconjunto de otro, considerando también la frecuencia de los elementos, puedes seguir este enfoque utilizando objetos en JavaScript para contar la frecuencia de los elementos en ambos arrays. Luego, comparas estas frecuencias para verificar si el primer array es un subconjunto del segundo. Aquí te muestro cómo podrías hacerlo:

function esSubconjunto(array1, array2) {
    // Contar la frecuencia de cada elemento en array1
    const frecuencia1 = array1.reduce((acc, val) => {
        acc[val] = (acc[val] || 0) + 1;
        return acc;
    }, {});

    // Contar la frecuencia de cada elemento en array2
    const frecuencia2 = array2.reduce((acc, val) => {
        acc[val] = (acc[val] || 0) + 1;
        return acc;
    }, {});

    // Verificar que cada elemento en array1 esté en array2 con igual o mayor frecuencia
    for (const [elemento, count] of Object.entries(frecuencia1)) {
        if (!frecuencia2[elemento] || frecuencia2[elemento] < count) {
            return false;
        }
    }

    return true;
}

// Ejemplo de uso
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

• La función esSubconjunto toma dos arrays como argumentos.

• Utiliza el método reduce para construir dos objetos, frecuencia1 y frecuencia2, que mapean los elementos de array1 y array2 a su respectiva frecuencia de aparición en cada array.

• Luego, itera sobre frecuencia1 usando Object.entries para obtener cada par clave-valor (elemento y frecuencia) de array1.

• Para cada elemento en array1, verifica si el elemento existe en array2 (usando frecuencia2) y si la frecuencia en array2 es igual o mayor que en array1. Si alguna de estas condiciones no se cumple, retorna false.

• Si la iteración completa sin retornar false, significa que todos los elementos de array1 están presentes en array2 con la frecuencia requerida, por lo que retorna true.

CHALLENGE DE HOY ⚔️ 
Calcular la Suma de dos Números Representados por dos Listas Enlazadas

Se te dan dos listas enlazadas no vacías que representan dos números no negativos. Los dígitos están almacenados en orden inverso, y cada uno de sus nodos contiene un solo dígito. Suma los dos números y retorna la suma como una lista enlazada.

Puedes asumir que los dos números no contienen ningún cero al principio, excepto el número 0 mismo.

1. Implementa una función sumarListas que acepte dos listas enlazadas como argumentos.

2. La función debe calcular la suma de los dos números representados por las listas enlazadas y retornar el resultado como una nueva lista enlazada.

3. Asegúrate de manejar correctamente el acarreo si la suma de dos dígitos es mayor o igual a 10.

Ejemplo de uso: Supongamos que una lista enlazada se representa como una clase Nodo con propiedades valor y siguiente.

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

// Ejemplo: representando el número 342 como una lista enlazada: 2 -> 4 -> 3
let lista1 = new Nodo(2, new Nodo(4, new Nodo(3)));

// Ejemplo: representando el número 465 como una lista enlazada: 5 -> 6 -> 4
let lista2 = new Nodo(5, new Nodo(6, new Nodo(4)));

let resultado = sumarListas(lista1, lista2);

// El resultado debe ser una lista enlazada que represente el número 807: 7 -> 0 -> 8

Considera iniciar con un nodo ficticio (dummy node) para simplificar el manejo del resultado y el acarreo.

• Itera a través de ambas listas simultáneamente, sumando los dígitos correspondientes y manejando el acarreo cuando sea necesario.

• No olvides verificar si queda un acarreo después de terminar de iterar ambas listas.

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 👀