#153 Web Components en serio

Web Components en serio

Quizás tu como Cassidy, tienes molestia o preocupación por el status del ecosistema React que a veces es muy fragmented. Y quieres construir proyectos, ya sea personales o empresariales con JavaScript, que duré más que los releases de nueva versión de Node. Si has visto los artículos sobre Web Components y te ha dado curiosidad, aquí tienes un articulo que te va a entusiasmar más.

HTMX y WebComponents son un buen match

HTMX es una biblioteca JavaScript que esta robándose el corazón de los frontenderos y los WebComponents están viviendo su mejor época desde su lanzamiento. Y sorprendentemente, ambos se complementan muy bien. Si quieres saber más al respecto, lee esto.

EL RINCÓN DE LA LECTURA 📚️ 
TypeScript Book

Esperamos que la SEP no tenga registrada esta marca que usaremos ahora como nueva sección. ¿Quieres aprender más de TypeScript y mejorar tu juego? No busques más, puedes leer este libro que es gratuito y open source.

HERRAMIENTA 🛠️ 
<sparkly-text />

Vivimos en la era de los Web Components. La carrera por tener tantos components, como tuvimos plugins de jQuery esta en marcha, y en esta ocasión vas a poder probar un componente para tener texto brillante ✨

GUÍA 📖 
Next App Router training

Seamos honestos, incluso los frontenderos más veteranos, tuvieron que leer y practicar mucho para entender cómo funcionaba la nueva convención de rutas que Next.js v13 introdujo. Es por eso que un mantenedor de Node.js y Webpack llamado Hiroppy creó esta guía de entrenamiento para dominar el nuevo App Router y que no te quedes atrás.

INISPIRACIÓN 💡 
Productos para Ingenieros

PostHog sacó un newsletter para brindar consejos sobre cómo dejar de pensar solo en lo técnico y comenzar a pensar en el todo, o sea, el producto. Te podríamos recomendar articulo por articulo, pero están muy buenos y te pueden ayudar a acelerar tu carrera.

NOTICIA 📰 
Astro 4.2

Nueva actualización de Astro que entre otras mejoras trae optimización para imágenes en markdown, mejores reglas de accesibilidad y soporte para características experimentales.

UN DÍA COMO HOY 🗓️ 

El 11 de febrero es el “Día Internacional de la Internet Segura”, día en el cual se cumple con la idea de promover el uso responsable de las nuevas tecnologías y concienciar a todos los internautas sobre la necesidad de estar seguros en la Red.

El ciberpeligro es un hecho aquí algunos datos:

1. Se detectan al día 200.000 muestras de malware.

2. Mas de 500 web son comprometidas a diario.

3. Surgen 1.400 muestras de malware bancario a diario.

4. ****Cada hora se registran 160.000 intentos de accesos a webs pornos por parte de menores de edad.

Consejos básicos:

1. El más importante, utiliza el sentido común mientras navegas por la web.

2. Solo utiliza conexiones WiFi seguras, no accedas a tus cuentas bancarias ni email personal en WiFi públicas.

3. Solo visita sitios web de confianza.

4. Utiliza un antivirus tanto en tu ordenador como en tu smartphone o utiliza sistema operativo Linux para navegar y olvídate de los virus.

5. Manten actualizado todo tu software: Sistema Operativo, Navegador, Java (Si no lo usas desinstalarlo preferiblemente), iTunes, Flash Player y PDF Reader entre otros.

VACANTE 💼 
Senior Frontend Engineer (React.js)

Ubicación: América Latina (Remoto)
Empresa: Deel
Requisitos: Sobresalga en el arte de diseñar, codificar, probar y mantener aplicaciones utilizando la tecnología mencionada anteriormente. Prospere en una cultura de trabajo colaborativo y remoto, donde el trabajo en equipo, la camaradería y estar juntos en todas partes son clave. Abrace la independencia y asuma la responsabilidad de sus proyectos, pero también sobresalga en un entorno de equipo y le encanta contribuir. Comunique ideas complejas con facilidad y disfrute colaborando con diversos equipos de partes interesadas técnicas y no técnicas. Entre otros.
Beneficios: Equipo informático aplicable a su rol Oportunidades de concesión de acciones Beneficios y ventajas adicionales según su situación laboral y país La posibilidad de elegir dónde trabajar, ya sea en casa, en la playa o en WeWork.

Si te interesa, entra aquí. 🤞 

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

function contarIslas(matriz) {
    let numeroDeIslas = 0;

    const dfs = (fila, columna) => {
        if (fila < 0 || fila >= matriz.length || columna < 0 || columna >= matriz[0].length || matriz[fila][columna] === 0) {
            return;
        }

        // Marcar la celda como visitada
        matriz[fila][columna] = 0;

        // Explorar las celdas vecinas
        dfs(fila + 1, columna);
        dfs(fila - 1, columna);
        dfs(fila, columna + 1);
        dfs(fila, columna - 1);
    };

    for (let fila = 0; fila < matriz.length; fila++) {
        for (let columna = 0; columna < matriz[0].length; columna++) {
            if (matriz[fila][columna] === 1) {
                numeroDeIslas++;
                dfs(fila, columna); // Iniciar DFS desde esta celda
            }
        }
    }

    return numeroDeIslas;
}

// Ejemplo de uso
const matriz = [
    [1, 1, 0, 0, 0],
    [0, 1, 0, 0, 1],
    [1, 0, 0, 1, 1],
    [0, 0, 0, 0, 0],
    [1, 0, 1, 0, 1]
];
console.log(contarIslas(matriz)); // Debería retornar 6

• La función contarIslas acepta una matriz bidimensional matriz como argumento.

• Define una función auxiliar dfs (búsqueda en profundidad) para explorar las celdas adyacentes a una celda dada. Esta función marca cada celda visitada cambiando su valor de 1 a 0 para evitar contar la misma isla más de una vez.

• La función dfs se llama a sí misma recursivamente para explorar todas las celdas conectadas vertical y horizontalmente que forman parte de la misma isla.

• La función principal itera sobre cada celda de la matriz. Cuando encuentra una celda con valor 1 (parte de una isla), incrementa numeroDeIslas y llama a dfs para marcar toda la isla como visitada.

• Finalmente, retorna el número total de islas encontradas.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que tome una lista de intervalos como entrada y fusione todos los intervalos superpuestos, devolviendo una lista con solo los intervalos no superpuestos.

1. Implementa una función fusionarIntervalos que acepte un array de intervalos.

2. La función debe retornar un nuevo array donde los intervalos superpuestos se han fusionado en intervalos individuales que cubran todo el rango de los intervalos superpuestos.

3. Los intervalos en el array de entrada están desordenados, y el array resultante debe estar ordenado.

Ejemplo de uso:

console.log(fusionarIntervalos([[1, 4], [2, 5], [7, 9]]));
// Debería retornar [[1, 5], [7, 9]]

console.log(fusionarIntervalos([[6, 7], [2, 4], [5, 9]]));
// Debería retornar [[2, 4], [5, 9]]

• Ordena primero los intervalos por su punto de inicio para facilitar la fusión.

• Itera sobre los intervalos ordenados y fusiona aquellos que se superponen revisando si el inicio del intervalo actual es menor o igual al final del intervalo anterior fusionado.

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 👀