frontenderos icon

Podcast

Newsletter

#191 El Pull Request ideal es de 50 lineas

Menús, toasts y más con el poder de la API de Popover

El Pull Request ideal es de 50 lineas

Hay que tomar este tipo de artículos con pinzas… pero, si una compañía que tiene un producto para agilizar Pull Requests y te da una suite de herramientas para ello y tiene miles de usuarios y repos y por lo tanto puede analizar el contexto de cuales son los mejores PRs en base al número de lineas, escribe que 50 es el número mágico, quizás debamos tomarlo en cuenta. Y es que un PR de más de 300 lineas va a ser más dificil de revisar y por lo tanto va a atrasar el flujo, y mientras menos PRs se revisen, más se acumulan. Ahora ya lo sabes, si quieres mantener la productividad, PRs chiquitos debes crear.

Menús, toasts y más con el poder de la API de Popover

Vivimos en la mejor era para hacer frontend, ya que con la minima dependencia de JavaScript y bibliotecas de terceros, podemos lograr más con los cambios a WebAPIs, HTML y CSS. Y prueba de ello es el atributo popover, que nos va a permitir usar cualquier elemento HTML dependiendo del caso de uso y darle ese efecto que es tan necesario para representar estados en la web moderna. Lo mejor es el nivel de compatibilidad que tiene entre los principales navegadores y eso significa que ya lo puedes comenzar a usar para tus siguientes proyectos.

20 años no son nada

Citando a Tyrion Lannister, a todo el mundo le gusta una buena historia. Y esa historia que vas a leer hoy, es el impacto que ha tenido Git en sus casi 20 años de existencia.

EL RINCÓN DE CSS 👨‍💻 
Transitions en Vue.js

La Web se ve mejor animada. Y si utilizas Vue.js, necesitas mejorar tus proyectos con estos dos componentes que te van a permitir añadir cualquier tipo de animación, de una forma fácil y divertida.

INISPIRACIÓN 💡 
Puter

Puter, es una nube personal para almacenar archivos de forma segura, accesible y que tiene esta interfaz de sistema operativo que está rechula. 👌 

HERRAMIENTA 🛠️ 
Guía de inicio de Multiple

Multiple, es una plataforma de pruebas de carga construida para programadores. Con unas pocas lineas de JavaScript, puedes crear y ejecutar este tipo de pruebas, observar resultados en tiempo real y compartirlos con tu equipo. El concepto suena muy interesante, y si quieres probar esta herramienta tiene una capa gratuita para que pruebes.

Ordena.js

Si necesitas una biblioteca para manejar listas anidadas con JavaScript vainilla, no busques más.

LANZAMIENTO 🚀 
4ta edición de Eloquent JavaScript

Este es un post para los nostálgicos y los frontenderos que aprendieron JavaScript con este libro hace algunos ayeres.🥺 Eloquent JavaScript, acaba de sacar su 4ta edición, y si quieres mejorar tu conocimiento o actualizarlo, es una lectura obligatoria. Si te gusta este libro lo puedes compartir.

UN DÍA COMO HOY 🗓️ 

El 20 de marzo de 1996, Infogear registra la marca “iPhone” para los EUA.

La marca abarca "hardware y software para proporcionar una comunicación telefónica integrada con redes mundiales de información computarizados".

Ese mismo año, Infogear lanza un teléfono con un navegador web integrado con marca iPhone.

En junio de 2000, Cisco System adquirió a Infogear, incluyendo la marca registrada iPhone.

El 18 de diciembre de 2006, Cisco libera una gama teléfonos de Voz sobre IP (VoiP) con el nombre iPhone.

El 09 de enero de 2007, Steve Jobs anuncia el iPhone de Apple, lanzado el 29 de junio de 2007.

El 10 de enero 2007, Cisco anunció una demanda contra Apple sobre la infracción de la marca registrada iPhone.

El 20 de febrero de 2007, Apple y Cisco anuncian que estaban de acuerdo en que ambas empresas usen el nombre “iPhone” a cambio “de la exploración de la interoperabilidad” entre seguridad, el consumidor, y los productos de comunicaciones del negocio.

VACANTE 💼 
Full Stack Web

Ubicación: México (Remoto)
Empresa: Contalink
Requisitos: Al menos 3 años de experiencia en el desarrollo de aplicaciones web, tanto en el backend como en el frontend. Capacidad para operar eficazmente en un ambiente de equipo de ritmo rápido, en constante evolución y 100% remoto. Habilidad para aprender y adoptar nuevas tecnologías, lenguajes, frameworks o herramientas durante el proceso de desarrollo. Capacidad para operar eficazmente con alta energía y flexibilidad en un ambiente de equipo de ritmo rápido, en constante evolución. Compartir los valores de la empresa Ambición, Compromiso, Resultados, Organización, Desarrollo personal y Eficiencia.
Beneficios: Rango salarial competitivo; $1200 MXN para apoyo de gastos Home Office; Prestaciones de Ley; 2 Semanas de Vacaciones desde primer año; Computadora de la empresa; Libros (Tenemos un programa de lectura. Si quieres aprender y crecer a través de la lectura, todos los libros van por nuestra cuenta; Apoyo psicológico (Terapify)

¿Te interesó esta vacante? Entra a este link para conocer mas. 🤞 

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

Para implementar una función filterPersonalizado que imite el comportamiento del método Array.prototype.filter sin utilizar el método incorporado, sigue este enfoque. Esta implementación básica aplica una función de callback a cada elemento de un array para determinar si debe ser incluido en el nuevo array basado en si la función de callback retorna true o false:

function filterPersonalizado(array, callback) {
    // Inicializar un nuevo array para los resultados
    const resultado = [];

    // Iterar sobre cada elemento del array original
    for (let i = 0; i < array.length; i++) {
        // Aplicar la función de callback al elemento actual
        // Si la función de callback retorna true, agregar el elemento al array de resultados
        if (callback(array[i], i, array)) {
            resultado.push(array[i]);
        }
    }

    // Retornar el nuevo array con los elementos que cumplen la condición
    return resultado;
}

// Ejemplo de uso
const numeros = [1, 2, 3, 4, 5, 6];
const esPar = numero => numero % 2 === 0;

console.log(filterPersonalizado(numeros, esPar)); // Debería retornar [2, 4, 6]

Explicación del Código:

  • La función filterPersonalizado toma un array y una función de callback como argumentos.

  • Dentro de filterPersonalizado, se inicializa un nuevo array llamado resultado para almacenar los elementos que cumplan con la condición especificada por la función de callback.

  • Se utiliza un bucle for para iterar sobre cada elemento del array original.

  • Para cada elemento, se invoca la función de callback pasando el elemento actual (array[i]), el índice del elemento (i), y el array completo (array) como argumentos. Esto imita el comportamiento del método filter nativo.

  • Si la función de callback retorna true para un elemento, ese elemento se agrega al array resultado usando push.

  • Después de procesar todos los elementos, se retorna el array resultado, que contiene solo los elementos que cumplen la condición definida por la función de callback.

CHALLENGE DE HOY ⚔️ 
Encontrar el Máximo Producto de Dos Números en un Array

Descripción del desafío: Dado un array de números enteros, el desafío consiste en identificar el par de números que, al ser multiplicados, resulten en el máximo producto posible dentro del array. Es importante considerar que el array puede contener números negativos y positivos.

Tareas a realizar:

  1. Implementa una función maxProducto que acepte un array de números enteros como argumento.

  2. La función debe encontrar los dos números cuya multiplicación resulte en el máximo producto posible y retornar ese producto.

  3. Considera todos los pares posibles de números en el array para encontrar el producto máximo.

Ejemplo de uso:

console.log(maxProducto([2, 3, 5, 7, -7, 5, 8, -5])); // Debería retornar 56 (-7 * -8 = 56)
console.log(maxProducto([-10, -20, 0, 3])); // Debería retornar 200 (-10 * -20 = 200)
  • Una forma de resolverlo es mediante la comparación de todos los pares posibles en el array y mantener un registro del máximo producto encontrado.

  • Sin embargo, para mejorar la eficiencia, considera ordenar el array y luego comparar productos de los elementos en los extremos del array ordenado.

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 👀

¿Qué te pareció el email de hoy?

Iniciar Sesión o Suscríbete para participar en las encuestas.

¡Hasta mañana! 🤟