#194 Un paquete de Next.js para administrar bibliotecas de terceros

Un paquete de Next.js para administrar bibliotecas de terceros

Si te ha tocado implementar una biblioteca de terceros en Next.js, como Google Analytics con su paquete oficial @next/third-parties, seguro te preguntaste por qué razón se tiene que hacer a través de este paquete y no de otras maneras. La respuesta está en la optimización de las secuencias de comandos, y todo comenzó por iniciativa de Google. Y la historía no termina aquí porque quieren hacer que otras bibliotecas de terceros, y no solo las suyas, se beneficien de estas practicas.

Programmatic SEO

Hacer SEO para un frontendero puede ser aburrido. Hacer SEO de forma programática. puede ser divertido porque vas a tener que hacer mucho trabajo creando páginas, optimizando links, y adaptando para diseño responsivo. Pero cuando haces este tipo de prácticas, tienes que tener mucho cuidado, sigue estas recomendaciones para que no te acusen de estar haciendo spam con tus sitios.

¿AVIF es el futuro de las imágenes Web?

Hay un nuevo formato de imágenes que está generando ruido como posible buena opción para el futuro. Traído por la Alliance for Open Media, es un formato que promete un montón de características que, en teoría, suenan bien, pero en la práctica se tienen que adoptar de forma masiva para que sea el sucesor, sino que le pregunten a Google y su formato webp.

EL RINCÓN DE CSS 👨‍💻 
Algunas formas en las que estoy usando :has en producción

El pseudo-selector :has era una de las cosas que más se habían estado pidiendo en CSS por años, porque se estaba pidiendo poder seleccionar elementos padres desde el hijo, pero estas características brillan más cuando no tienes acceso directo al HTML, y tienes que hacerlo todo desde el CSS. Si quieres ver algunos de estos casos de uso, checa este link.

HERRAMIENTA 🛠️ 
GetWaves

¿Preocupado porque el diseñador en turno puso olas en tu siguiente proyecto que debes programar?, ¡para de sufrir!. Con este generador de olas SVG que cubre varias opciones, vas a poder entregar ese sitio sin tener que poner imágenes PNG o JPG posicionadas con absolute.

Clippy

Seguro has visto en sitios modernos que hay imágenes cortadas en cierto patrón geométrico, y tu cliente o diseñador te pidió si puedes incluir algo así y para aumentar las complicaciones, tiene que ser dinámico para que funcione con cualquier imagen. Tienes dos opciones, decirle al cliente que no se puede, o usar clip-path como un pro, con este generador de patrones.

UN DÍA COMO HOY 🗓️ 

El 23 de marzo de 1928, nace en Nueva york, Jean E. Sammet, científica de la computación estadounidense que desarrolló el lenguaje de programación FORMAC en 1962.
Recibió su B.A. en Matemáticas de Mount Holyoke College en 1948 y su Maestría en Matemáticas de la Universidad de Illinois en Urbana- Champaign en 1949.
Ella recibió un Doctor en Ciencias Honoris Causa del Mount Holyoke College en 1978.
Sammet fue empleada por Sperry Gyroscope 1955-1958 donde supervisó el primer grupo de programación científica.
De 1958 a 1961 trabajó para Sylvania como consultor personal para la investigación de la programación y fue miembro del grupo original de COBOL.
Se incorporó a IBM en 1961 donde desarrolló FORMAC, el primer lenguaje de programación ampliamente utilizado para la manipulación simbólica de fórmulas matemáticas.
En IBM investigó el uso de restringida Inglés como lenguaje de programación y el uso de lenguaje natural para los programas de matemáticas.
Sammet fundó el Comité Especial Interés ACM sobre Cálculo simbólico y algebraico (SICSAM) en 1965 y fue Presidente del Grupo de Interés Especial sobre Lenguajes de Programación (SIGPLAN).
Ella fue la primera mujer presidente de la ACM , 1974-1976

VACANTE 💼 
Software Developer Banner

Ubicación: Ciudad de México (Híbrido)
Empresa: VASS
Experiencia: Experiencia en Banner (3 o más años); Experiencia en PLSQL (3 o más años); Experiencia en Admin Pages de Banner (3 o más años); Experiencia en GitHub (3 ó más años); Experiencia en GitHub Actions (2 ó más años); Experiencia con SonarCloud (2 ó más años); Experiencia en automatización de pruebas (2 ó más años); Experiencia con metodologías ágiles (3 ó más años); Conocimiento de Jira Software (2 ó más años); Conocimiento deseable en DevSecOps implementado sobre Banner.
Requisitos: Escolaridad: Ingeniería o Licenciatura en Sistemas o afín.

Para conocer más de esta vacante, entra 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 rangos de tiempo dados como strings y retornar el tiempo total en formato "HH:MM", puedes seguir el enfoque de descomponer cada rango en horas y minutos, sumarlos por separado y luego convertir el total de minutos en horas y minutos adecuadamente. Aquí tienes cómo podrías implementarlo:

function sumarRangosDeTiempo(rangos) {
    let totalMinutos = 0;

    rangos.forEach(rango => {
        // Separar los tiempos de inicio y fin
        const [inicio, fin] = rango.split("-");
        const [horaInicio, minutoInicio] = inicio.split(":").map(Number);
        const [horaFin, minutoFin] = fin.split(":").map(Number);

        // Calcular la duración del rango actual en minutos
        const duracion = (horaFin * 60 + minutoFin) - (horaInicio * 60 + minutoInicio);

        // Sumar la duración al total de minutos
        totalMinutos += duracion;
    });

    // Convertir el total de minutos a horas y minutos
    const horas = Math.floor(totalMinutos / 60);
    const minutos = totalMinutos % 60;

    // Retornar el tiempo total en formato "HH:MM"
    return `${String(horas).padStart(2, '0')}:${String(minutos).padStart(2, '0')}`;
}

// Ejemplo de uso
console.log(sumarRangosDeTiempo(["10:00-12:00", "02:30-04:00"])); // Debería retornar "04:30"
console.log(sumarRangosDeTiempo(["09:10-10:00", "11:00-11:45", "15:00-15:10"])); // Debería retornar "02:45"

• La función sumarRangosDeTiempo toma un array de strings rangos como argumento.

• Se inicializa totalMinutos a 0 para llevar el conteo del tiempo total en minutos.

• Usando forEach, se itera sobre cada rango de tiempo en el array. Para cada rango, se separan los tiempos de inicio y fin utilizando split("-").

• Luego, se separan las horas y minutos de los tiempos de inicio y fin utilizando split(":") y se convierten a números con map(Number).

• Se calcula la duración del rango actual en minutos y se suma al totalMinutos.

• Una vez que se han procesado todos los rangos, se convierte el totalMinutos en horas y minutos. Las horas se obtienen dividiendo totalMinutos por 60 y redondeando hacia abajo con Math.floor. Los minutos se obtienen tomando el residuo de la división de totalMinutos por 60.

• Finalmente, se retorna el tiempo total en formato "HH:MM", asegurándose de formatear las horas y los minutos para que siempre tengan dos dígitos utilizando String().padStart(2, '0').

CHALLENGE DE HOY ⚔️ 
Convertir Nombres a Formato CamelCase

El formato CamelCase es una convención de nomenclatura en la que las palabras están unidas sin espacios, y cada palabra comienza con una letra mayúscula, excepto la primera palabra. Por ejemplo, "hello world" se convierte en "helloWorld" y "data-base_model" en "dataBaseModel". Tu tarea es desarrollar una función que transforme strings dados en formato CamelCase, independientemente de si contienen espacios, guiones (-) o guiones bajos (_).

Tareas a realizar:

1. Implementa una función convertirACamelCase que acepte una cadena de texto como argumento.

2. La función debe procesar la cadena y convertirla al formato CamelCase.

3. Retorna el string transformado en CamelCase.

Ejemplo de uso:

console.log(convertirACamelCase("hello world")); // Debería retornar "helloWorld"
console.log(convertirACamelCase("data-base_model")); // Debería retornar "dataBaseModel"
console.log(convertirACamelCase("convertir a camel case")); // Debería retornar "convertirACamelCase"

• Considera usar métodos de string y array como split, map, y join.

• Puedes dividir el string original en palabras utilizando una expresión regular que encuentre espacios, guiones y guiones bajos.

• Luego, transforma todas las palabras (excepto la primera) para que comiencen con una letra mayúscula.

• Finalmente, une todas las palabras transformadas en un único string.

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 👀