• Frontenderos
  • Posts
  • #65 Ninguno de los top 100 sitios web usan HTML válido al 100%

#65 Ninguno de los top 100 sitios web usan HTML válido al 100%

Mejorando la velocidad de carga en JavaScript

Ninguno de los top 100 sitios web usan HTML válido al 100%

Este es un buen análisis de como los sitios más visitados en el mundo siguen los estándares de HTML y CSS, según los validadores de la W3C.

GUÍA
Mejorando la velocidad de carga en JavaScript

Flying To The Moon GIF by Ben Stillman

Esta es una serie de artículos sobre cómo puedes mejorar la velocidad de carga de tus herramientas favoritas en JavaScript con muy buenos ejemplos y recomendaciones.

EL RINCÓN DEL CSS
Animaciones de Salida

Scared Homer Simpson GIF by reactionseditor

¿Cómo animas la salida de un elemento del DOM? Cuando un elemento desaparece del DOM, ya no puedes animar su salida, entonces primero haces la animación y luego lo eliminas. Con la nueva API de View Transitions podrías hacerlo de forma fácil y aquí te explican como hacerlo.

HERRAMIENTAS
Sprit SVGs

Usando esta técnica vas a mejorar el desempeño de tus proyectos reduciendo el tamaño de tus SVGs

NOTICIA
Polypane 16

Nueva versión del navegador para frontenderos. En esta versión se mejoran muchos detalles de CSS además de que se actualiza a Chromium 118.

VACANTE
Frontend Developer

LJselection busca Frontend Developer para empresa de Gestión de eventos y Marketing.

CHALLENGE
Escribe una función de JavaScript para gestionar el inventario de una tienda. La tienda vende varios productos y tu función debe ayudar a actualizar el inventario después de cada venta. Aquí están tus requerimientos:

  1. Recibe dos argumentos:

    • ventas: un arreglo de objetos, donde cada objeto tiene idProducto (número) y cantidadVendida (número).

    • inventario: un arreglo de objetos, donde cada objeto tiene idProducto (número), descripcion (string), y cantidad (número).

  2. La función debe actualizar la cantidad de cada producto en inventario basándose en las ventas.

  3. Si un producto se agota (cantidad llega a 0), debe imprimirse un aviso: "Producto [descripcion] agotado".

  4. Debe regresar el inventario actualizado.

Datos de Prueba:

let ventas = [
  { idProducto: 101, cantidadVendida: 2 },
  { idProducto: 102, cantidadVendida: 1 },
  { idProducto: 103, cantidadVendida: 5 }
];

let inventario = [
  { idProducto: 101, descripcion: "Teclado", cantidad: 10 },
  { idProducto: 102, descripcion: "Mouse", cantidad: 3 },
  { idProducto: 103, descripcion: "Monitor", cantidad: 5 }
];

RESULTADO

function actualizarInventario(ventas, inventario) {
  ventas.forEach(venta => {
    let producto = inventario.find(p => p.idProducto === venta.idProducto);
    if (producto) {
      producto.cantidad -= venta.cantidadVendida;
      if (producto.cantidad <= 0) {
        console.log(`Producto ${producto.descripcion} agotado`);
        producto.cantidad = 0;
      }
    }
  });
  return inventario;
}

// Probando la función
let inventarioActualizado = actualizarInventario(ventas, inventario);
console.log(inventarioActualizado);