frontenderos icon

Podcast

Newsletter

#142 Formateando dinero en la Web

Como centrar elementos en CSS

Formateando dinero en la Web

Bugs Bunny Money GIF by Looney Tunes

Dicen que es de mala educación hablar de dinero, ¡patrañas!. Si no hablas de dinero, ¿cómo vas a formatear monedas en JavaScript? Lo cual es una tarea importante, no difícil, al menos no tanto como trabajar con fechas y horas, pero importante. ☝️ 

Como centrar elementos en CSS

Parece que con cada nuevo conjunto de valores en CSS, o nuevas características en general, siempre esta el reto de centrar elementos de una manera diferente. Es como si fuera el Hola mundo de los diseñadores web. En este caso, aprenderás a centrar elementos en CSS sin usar un elemento contenedor en HTML. Lo cual es útil para esos momentos en los que no podrás hacerlo.

HERRAMIENTA 🛠️ 
Create Rust App

Parece que Rust está en todos lados en el mundo del frontend. O al menos esta cada vez más presente en el toolchain de JavaScript y TypeScript. Y aunque este proyecto aun esta en pañales, es una idea muy interesante.

react-resize-detector

Hay veces que necesitas poder capturar el resize de un elemento o ventana en React y no puedes hacerlo a través de media queries o las APIs Web, para esos momentos, te vendría bien usar esta herramienta.

react-medium-image-zoom

Esta herramienta es justo lo que el nombre indica: un zoom de imágenes al estilo de medium.com que te puede ser muy util para mas de un tipo de proyecto, como blogs y product dashboards.

TEMPLATES 🖥️ 
Open SaaS

Este boilerplate te va a ahorrar mucho trabajo con características listas para usar fuera de la caja, como integración a Stripe, blog con Astro, envío de emails, dashboard y muchas otras cosas más que tienes que investigar.

EL RINCÓN DE CSS 👨‍💻 
5 snippets CSS que debes conocer

¿Quieres tener nuevos trucos bajo la manga para trabajar con CSS que funcionen en los principales navegadores? Checa este link y ponlos a prueba.

NOTICIA 📰 
AdonisJS v6

¿Conocías Adonis? Adonis es un framework Node.js con soporte total para TypeScript y muchas características que te pueden gustar, si te gusta eso del fullstackeo. Mención especial para el login social, envío de emails y subida de archivos. Y apenas sacaron su versión 6.0 en la que migran a ESM y tiene muchas mejoras.

UN DÍA COMO HOY 🗓️ 

El 31 de enero de 1956, nace en los Paises Bajos, Guido van Rossum, (@gvanrossum) científico de la computación, conocido por ser el autor del lenguaje de programación Python.

En 1982, van Rossum obtiene su título universitario en matemáticas y computación por la Universidad de Ámsterdam. van Rossum, crea Python a finales de los años ochenta en el Centro para las Matemáticas y la Informática (CWI, Centrum Wiskunde & Informática), en los Países Bajos, como un sucesor del lenguaje de programación ABC. El nombre del lenguaje proviene de la afición de van Rossum por los humoristas británicos “Monty Python”.

VACANTE 💼 
Front End Developer

Ubicación: México (Híbrido)
Empresa: Marsh McLennan
Requisitos: Conjuntos de habilidades de desarrollo de UI. Al menos 3-4 años de experiencia en desarrollo UI/UX. Tener habilidades en: D3JS, JavaScript y mecanografiado. Comprender ES6 y SPA HTML, CSS, SCSS. Entender el diseño responsivo. Node.js 12+ y administradores de paquetes (por ejemplo, npm/yarn) Experiencia con el marco Angular 8+ Experiencia con la biblioteca de interfaz de usuario de Angular Material. Entre otros.

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:

function maxProducto(array) {
    // Ordenar el array de mayor a menor
    array.sort((a, b) => b - a);

    // El producto máximo puede ser de los dos números más grandes, o de los dos más pequeños si son negativos
    const productoFinal = Math.max(array[0] * array[1], array[array.length - 1] * array[array.length - 2]);

    return productoFinal;
}

// Ejemplo de uso
console.log(maxProducto([2, 3, 5, 7])); // Debería retornar 35 (producto de 5 y 7)
console.log(maxProducto([-2, -3, -5, -7])); // Debería retornar 21 (producto de -3 y -7)
  • La función maxProducto toma un array array como argumento.

  • Primero, ordena el array de forma descendente.

  • Luego, calcula el producto de los dos números más grandes (primeros dos elementos del array ordenado) y el producto de los dos números más pequeños (últimos dos elementos del array ordenado).

  • Finalmente, devuelve el mayor de estos dos productos.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que combine dos arrays, alternando los elementos de cada uno.

  1. Implementa una función mezclarArrays que acepte dos arrays como argumentos.

  2. La función debe retornar un nuevo array combinado, alternando los elementos de los arrays originales.

  3. Asegúrate de incluir todos los elementos de ambos arrays en el array final.

Ejemplo:

console.log(mezclarArrays([1, 3, 5], [2, 4, 6, 8, 10]));
// Debería retornar [1, 2, 3, 4, 5, 6, 8, 10]
  • Puedes usar un bucle para iterar sobre los elementos de ambos arrays.

  • Considera el uso de métodos como splice o slice para manejar los elementos restantes de los arrays.

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! 🤟