Cómo funciona la reactividad en estos frameworks

La reactividad, es la actualización automática que pasa en un elemento de interfaz de usuario cuando el estado de la aplicación cambia. En este artículo se explora como funciona este concepto en tus bibliotecas y frameworks favoritos.

NOTICIA
Eleventy logra 5 millones de descargas de NPM

Eleventy ha llegado a las 5 millones de descargas de su componente principal y, a pesar de que dejaron de recibir soporte oficial de Netlify y eso bajo considerablemente el número de descargas, sigue siendo una de las herramientas más populares para construir sitios web en la actualidad.

HERRAMIENTAS
Color.js

Con los cambios que trae el modulo de Color nivel 4 de CSS, tenemos más posibilidades al momento de trabajar con colores en la web, y esta herramienta te permitirá conocer y lograr más en este apartado.

GUÍA
Creando mejores temas en Tailwind con OKLCH

Hace unas semanas les platicábamos de OKLCH, la nueva función de CSS para computar colores y por qué deberían usarla. Ahora les traemos un articulo que habla de como usar esta función con Tailwind.

ENCUESTA
UXTools

Si eres frontender@ que diseña, tienes que llenar esta encuesta para que tengamos más información sobre el status de las herramientas de UX y UI actuales.

EL RINCÓN DE CSS
CSS reduce transparencia

Hay un nuevo media query para accesibilidad que tienes que conocer y usar en tus sitios. Se trata de una opción para reducir la transparencia de UIs para las personas con problemas de la vista.

VACANTE
Front-end Engineer

Air Apps esta buscando un desarrollador con experiencia en mobile development

CHALLENGE
Crea una función JavaScript que acepte una fecha como argumento y calcule cuántos días, horas, minutos y segundos faltan para esa fecha desde el momento actual, sin usar una biblioteca 😉. Esta función debe considerar las zonas horarias y debe manejar los casos en los que la fecha ya haya pasado.

Ejemplo: Si la función recibe "2023-12-25", y hoy es "2023-11-11", la función debe calcular el tiempo restante hasta el 25 de diciembre de 2023.

Requisitos:

1. Debe aceptar una fecha en formato de cadena (string) como "DD-MM-AAAA".

2. Debe devolver un objeto con las propiedades dias, horas, minutos, y segundos.

3. Considerar las zonas horarias.

4. Manejar casos donde la fecha ya haya pasado, devolviendo ceros o un mensaje adecuado.

RESULTADO

function cuentaRegresiva(fecha) {
    const ahora = new Date();
    const fechaEvento = new Date(fecha);
    const diferencia = fechaEvento - ahora;

    if (diferencia < 0) {
        return { dias: 0, horas: 0, minutos: 0, segundos: 0 };
    }

    let segundos = Math.floor(diferencia / 1000);
    let minutos = Math.floor(segundos / 60);
    let horas = Math.floor(minutos / 60);
    let dias = Math.floor(horas / 24);

    horas = horas % 24;
    minutos = minutos % 60;
    segundos = segundos % 60;

    return { dias, horas, minutos, segundos };
}