La locura de la accesibilidad en la UI del JavaScript moderno

Si has escuchado nuestro podcast 👏 habrás oido que luego nos quejamos mucho, que en el mundo siempre cambiante del desarrollo web moderno, hay poco espacio para la accesibilidad, y no somos los únicos que piensan esto.

Componente Headless, un patrón para Interfaces de Usuario con React

Cuando React salió, uno de sus puntos fuertes era que se hacia mucho énfasis en la parte de biblioteca para construir componentes, y cuando se migró a Functional components, el enfoque se hizo mas fuerte. En este artículo se habla de cómo repensar en ese factor y optimizar para lograrlo.

Las preocupaciones de accesibilidad en el diseño de tipo fluido

Quizás has notado que de un tiempo para acá, comenzó a hablarse de diseño fluido y a popularizarse el uso de clamp() para crear containers y layouts. Aunque este enfoque de diseño web tiene sus fans, también hay preocupaciones sobre qué tan accesible puede ser. 💸 

HERRAMIENTA
CSS to Tailwind

Puede que algún día tengas la necesidad de convertir tu código CSS a Tailwind, y cuando ese momento llegue, puedes usar esta herramienta para hacerlo.

Dark mode con TailwindCSS

Plugin para construir dark modes o themes con TailwindCSS.

GUÍA
Construye diseño web basado en Contenido

Google lanzó una serie de guías de cómo construir en base al contenido y sobre todo como diseñar soluciones para la web moderna, ¡tienes que checarlo!

Practicando React Query

¿Has utilizando React Query? Si no, en esta guía, vas a aprender a utilizarlo.

VACANTE
Senior Software Engineer (React)

Si tienes experiencia con tecnologías híbridas, como React Native, Ionic, PhoneGap/Cordova, experiencia en la entrega de aplicaciones nativas mediante App Store Connect / Google Play, entre otras, son un plus que tomarán en cuenta para trabajar en Stuzo.

CHALLENGE

Imagina que estás trabajando con un conjunto de datos, representado como un array de objetos. Cada objeto tiene varias propiedades. Tu tarea es escribir una función que pueda agrupar estos objetos en un objeto cuyas claves son los valores de una propiedad específica.

Descripción del Reto:

• La función debe tomar dos argumentos: un array de objetos y una cadena de texto que representa la propiedad por la cual agrupar.

• La función debe devolver un objeto donde cada clave es un valor único de la propiedad especificada y el valor asociado es un array de objetos que tienen ese valor en la propiedad.

Ejemplo: Dado el siguiente array de objetos:

const people = [
    { name: "John", age: 20 },
    { name: "Jane", age: 20 },
    { name: "Bill", age: 30 },
    { name: "Sara", age: 30 },
    { name: "Paul", age: 40 }
];

Llamar a groupBy(people, 'age') debería devolver:

{
    20: [{ name: "John", age: 20 }, { name: "Jane", age: 20 }],
    30: [{ name: "Bill", age: 30 }, { name: "Sara", age: 30 }],
    40: [{ name: "Paul", age: 40 }]
}

Ver resultado 👀

RESULTADO

function groupBy(array, property) {
    return array.reduce((accumulator, obj) => {
        // Obtener la clave del objeto actual basada en la propiedad dada
        let key = obj[property];

        // Si la clave no existe en el acumulador, inicializarla con un array vacío
        if (!accumulator[key]) {
            accumulator[key] = [];
        }

        // Añadir el objeto actual al array de su clave correspondiente
        accumulator[key].push(obj);

        return accumulator;
    }, {}); // Iniciar el acumulador como un objeto vacío
}

Tu feedback nos ayuda a mejorar

Por favor elige una opción y dinos lo qué te gustó y lo que no. Leemos todas las respuestas 👀