#162 La Web se puso mejor con Interop 2024

La Web se puso mejor con Interop 2024

La Web es mejor cuando los Navegadores Web se ponen de acuerdo en metas en común. Por ejemplo, gracias a Interop 2024 border-image funciona como se quería desde el inicio, además Subgrid, Container Queries, :has() , Motion Path, CSS Math functions, inert y @property son soportadas por cada navegador por mencionar algunas. Y eso no hubiera sido posible sin la diplomacia y trabajo de los equipos de cada navegador, así que, felicidades a todas las personas involucradas. 👏 

La historia de éxito de Web Components

Mucho se ha hablado de Web Components como una alternativa a frameworks y bibliotecas JavaScript, pero en realidad son complementarios, razón por la que muchos de estos últimos están permitiendo implementarlos. Jake lo resumé muy bien aquí, el éxito de los Web Components no dependerá de que reemplacen a React, sino de que unan al ecosistema JavaScript a través de sus multiples variantes.

Mejores páginas de ventas con mejor Tipografía

Si eres un frontendero, tarde o temprano te va a tocar hacer landing pages. Si eres emprendedor, entonces debes saber hacer landing pages que conviertan. Lo mejor es que hay muchos recursos para aprender a hacer esto, por ejemplo, este.

EL RINCÓN DEL DISEÑADOR 🎨 
Comparando RGB, HSL, HEX y CMYK, y dónde se quedan cortos en cuanto a diseño

La ciencia detrás de los colores es muy interesante, y más en CSS, porque en tiempos recientes tenemos nuevas formas de definir colores. No te quedes solo con este articulo y explora el indice para leerte todas las lecciones de este sitio web.

INISPIRACIÓN 💡 
La historia de Comic Sans

¿Quieres conocer la historia detrás de Comic Sans y de la persona que la creo? Sumérgete en esta historia cortita pero ilustrativa de la mejor tipografía del mundo en palabras de su creador.

HERRAMIENTA 🛠️ 
Counterscale

Si utilizas Cloudflare como plataforma de hosting, y realmente no le estas sacando total provecho ¿qué te parecería instalar una biblioteca para tener Web Analytics? Así como lo lees. Hay que sacarle provecho al serverless y a la nube al máximo.

LANZAMIENTO 🚀 
jQuery 4.0.0 beta

Llego primero jQuery 4.0.0 que Express 5.0 😛

Esta versión quitó el soporte para Internet Explorer anterior a la versión 11, así que, aguas cuando actualices, no queremos que tus usuarios se queden sin un sitio web funcional. Pero ya hablando en serio, es bueno que haya una versión actualizada de jQuery porque sigue siendo una de las principales bibliotecas de JavaScript y porque adoptando técnicas y metodologías modernas, la Web sale ganando.

NOTICIA 📰 
Sora

OpenAI, acaba de anunciar una nueva herramienta que permite crear videos solamente ingresando texto. Si te perdiste la lluvia de memes y noticias al respecto, porque estabas ocupado haciendo buen frontend, aquí lo tienes. Vaya tiempo para estar vivos.

UN DÍA COMO HOY 🗓️ 

El 20 de febrero de 1981, nace en Boston, Massachusetts, Adrian Lamo, analista informático y hacker informático.
Lamo es conocido por sus intrusiones en The New York Times, Yahoo! y Microsoft.
También por haber delatado a Bradley Manning, el soldado que presuntamente filtró documentos secretos a WikiLeaks.
Lamo también se dedicó a identificar fallas de seguridad en las redes informáticas deFortune 500y posteriormente comunicó las fallas encontradas. Esto es ilegal en muchos países si las intrusiones no son solicitadas expresamente por la empresa.
Lamo no tiene diploma de escuela secundaria y es conocido como el "hacker sin hogar" por su estilo de vida supuestamente nómada. Lamo ha afirmado que ha pasado gran parte de sus viajes ocupando edificios abandonados, navegando en cibercafés, bibliotecas y universidades para investigar las redes, y a veces la explotación de agujeros de seguridad.
En 2001, Lamo fue elogiado por Worldcom para ayudar a fortalecer su seguridad de la empresa.

VACANTE 💼 
Senior React Developer

Ubicación: México (Remoto)
Empresa: EPAM Systems
Requisitos: 5 años de experiencia: aporta una experiencia sustancial en pruebas, desarrollo o lanzamiento de productos de software. 5 años de dominio completo: con 5 años en un entorno de JavaScript o TypeScript, estará bien versado en desarrollo front-end y back-end. Más de 3 años de experiencia con React y Redux: ha pasado al menos 3 años dominando React y Redux, convirtiendo ideas complejas en soluciones elegantes. Más de 2 años de experiencia trabajando con GraphQL: tiene más de 2 años de experiencia práctica con GraphQL, lo que permite una comunicación de datos eficiente. Entre otros.
Beneficios: Plan de carrera y oportunidades reales de crecimiento. Acceso ilimitado a las soluciones de aprendizaje de LinkedIn Plan de Movilidad Internacional en 25 países. Capacitación constante, mentorías, cursos corporativos online, eLearning y más. Clases de inglés con profesor certificado. Apoyo a las iniciativas de los empleados (club de algoritmos, tostadores, club ágil y más) Ambiente de trabajo agradable (sala de juegos, área de siesta, comodidades, eventos, equipos deportivos y más) Horario de trabajo flexible y código de vestimenta. Entre otros.

¿Te interesó esta vacante? Échale un ojo a los demás requisitos y aplica. 🤞 

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

function calcularProfundidadMaxima(array) {
    // Inicializar la profundidad máxima
    let profundidadMaxima = 1;

    // Función auxiliar recursiva para calcular la profundidad
    function calcularProfundidad(array, profundidadActual) {
        // Iterar a través del array
        for (let item of array) {
            // Si el item es un array, calcular su profundidad
            if (Array.isArray(item)) {
                calcularProfundidad(item, profundidadActual + 1);
            }
        }
        // Actualizar la profundidad máxima si la actual es mayor
        profundidadMaxima = Math.max(profundidadMaxima, profundidadActual);
    }

    // Llamar a la función auxiliar con la profundidad inicial de 1
    calcularProfundidad(array, 1);

    // Retornar la profundidad máxima encontrada
    return profundidadMaxima;
}

// Ejemplo de uso
console.log(calcularProfundidadMaxima([1, 2, [3, [4, 5]], 6])); // Debería retornar 3
console.log(calcularProfundidadMaxima([1, 2, 3, 4, 5])); // Debería retornar 1
console.log(calcularProfundidadMaxima([[], [[[]]]])); // Debería retornar 3

• La función principal calcularProfundidadMaxima inicializa una variable profundidadMaxima para rastrear la profundidad máxima encontrada.

• Define una función auxiliar calcularProfundidad que toma el array y la profundidad actual como argumentos. Esta función se llama recursivamente para cada array anidado encontrado, incrementando profundidadActual en 1 cada vez.

• Dentro de la función auxiliar, se itera sobre cada elemento del array. Si el elemento es también un array, se llama recursivamente a calcularProfundidad con este elemento y la profundidad actual incrementada en 1.

• Después de cada llamada recursiva, se compara profundidadActual con profundidadMaxima y se actualiza profundidadMaxima si es necesario.

• Una vez completada la iteración y las llamadas recursivas, la función principal retorna la profundidad máxima encontrada.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que, dado un array, elimine todos los elementos duplicados, dejando solo elementos únicos en el array resultante.

1. Implementa una función eliminarDuplicados que acepte un array como argumento.

2. La función debe retornar un nuevo array que contenga solo elementos únicos del array original.

3. Asegúrate de que la función pueda manejar diferentes tipos de datos en el array.

console.log(eliminarDuplicados([1, 2, 2, 3, 4, 4])); // Debería retornar [1, 2, 3, 4]
console.log(eliminarDuplicados(["apple", "banana", "apple", "orange"])); // Debería retornar ["apple", "banana", "orange"]

• Considera utilizar estructuras de datos como Set para facilitar la eliminación de duplicados.

• También puedes abordar este problema mediante el uso de métodos de array como filter junto con indexOf o includes para identificar y eliminar duplicados.

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 👀