Animación Web para React

Este artículo es una comparativa entre dos bibliotecas muy populares para crear animaciones en React y JavaScript, sus ventajas y desventajas y como lo puedes aprovechar.

URL explicado - los fundamentos

Este pequeño articulo, te muestra los fundamentos de cómo funcionan las URLs. No es que dudemos que no sepas, pero un recordatorio nunca esta de más.

NOTICIA
Hydrogen

Hydrogen, el headless framework de Shopify construido con Remix, tiene actualización y viene con la versión 2.2 de Remix.

HERRAMIENTA
Free Stock Video Footage

Aquí tienes stock de videos gratuitos sin marca de agua que puedes utilizar para tu siguiente proyecto.

Conecta tus ideas con Svelte Flow

Construir diagramas es algo que hacemos todos los frontenderos. Esta herramienta te permite hacer eso, pero con Svelte.

Visx

Visx, es una colección de paquetes para construir interfaces visuales con React y, ¡tienes que probarla! Esta basada en un concepto de design system llamado primitivas donde cada componente tiene que realizar una función minima y ser independiente.

EL RINCÓN DE CSS
Eliminar estilos de lista sin afectar la semántica

¿Quieres una lista, que no se vea como una lista, pero funcione como una lista? Usa este tip para que tu elemento siga siendo semántico.

VACANTE
Frontend Engineer

Si tienes experiencia con React Native, Amazon AWS services, Python, entre otros, aplica en esta vacante, para Qventus,Inc.

CHALLENGE
Escribe una clase en JavaScript que implemente un sistema de cache con la estrategia de reemplazo "Least Recently Used" (LRU). Este tipo de cache almacena un número limitado de elementos y, cuando se alcanza la capacidad, elimina el elemento que hace más tiempo no se ha utilizado para dar espacio a uno nuevo.

Especificaciones:

• La clase debe tener un constructor que acepte un argumento: la capacidad máxima de la cache.

• Implementa los métodos get(key) y put(key, value). get(key) debe retornar el valor asociado con la clave si existe en la cache, o -1 si no existe. put(key, value) debe insertar o reemplazar el valor si la clave ya existe. Si la cache alcanza su capacidad máxima, debe eliminar el elemento menos recientemente usado antes de insertar el nuevo elemento.

• Asegúrate de que las operaciones de get y put sean eficientes en términos de tiempo de ejecución.

Ejemplo de Uso:

let cache = new LRUCache(2);

cache.put(1, 1);
cache.put(2, 2);
console.log(cache.get(1)); // Retorna 1
cache.put(3, 3); // Elimina la clave 2
console.log(cache.get(2)); // Retorna -1 (no encontrado)

Ve la solución 👀

RESULTADO

class LRUCache {
    constructor(capacity) {
        this.capacity = capacity;
        this.map = new Map();
    }

    get(key) {
        if (!this.map.has(key)) {
            return -1;
        }
        const value = this.map.get(key);
        this.map.delete(key);
        this.map.set(key, value);
        return value;
    }

    put(key, value) {
        if (this.map.has(key)) {
            this.map.delete(key);
        } else if (this.map.size === this.capacity) {
            const firstKey = this.map.keys().next().value;
            this.map.delete(firstKey);
        }
        this.map.set(key, value);
    }
}