• Frontenderos
  • Posts
  • #67 Reinventemos la rueda, necesitamos mejores herramientas de diseño web

#67 Reinventemos la rueda, necesitamos mejores herramientas de diseño web

useFormState ya está en fase canary

Reinventemos la rueda, necesitamos mejores herramientas de diseño web

Work Working GIF by ABC Network

¿Necesitamos mejores herramientas para diseñar sitios y aplicaciones web? Necesitamos mejores herramientas. Unas que tomen en cuenta que la web no es una imagen y ademas, tomen en cuenta la experiencia de usuario de los elementos HTML, las Web APIs y el navegador en sí. Y que nos den ademas, soporte para accesibilidad y CSS al día.

NOTICIA
useFormState ya está en fase canary

useFormState, el hook que te permite actualizar el estado en base del resultado de una acción de formulario, ya está en fase canary para pruebas y lo puedes probar en frameworks que soporten React Server Components.

HERRAMIENTA
Monaspace

En épocas recientes, se ha visto la necesidad de utilizar mejores tipografías para los programas de edición de código, sobre todo en temas de accesibilidad. El otro día destacábamos una tipografía nueva de Vercel, y esta vez, es el turno de Github.

React Multistep

The Young And The Restless Love GIF by CBS

Gif by cbs on Giphy

Con este componente de Multistep, no tendrás que construir el tuyo y podrás personalizarlo a tu gusto.

EL RINCÓN DE CSS
Experimentando con gradientes en CSS

Con las nuevas opciones que permiten los gradientes en CSS, se pueden lograr resultados muy interesantes e innovadores.

VIDEOS
JavaScript Day 2023

Hace unos días fue el JavaScript Day 2023, patrocinado por JetBrains, aquí te dejamos el playlist de charla para que los disfrutes

VACANTE
React Frontend Developer

Si quieres saber más sobre CTAIMA y conocer sobre su oferta, puedes hacerlo dando click en este enlace.

CHALLENGE

Escribe una función en JavaScript que busque un término específico dentro de un array de objetos y devuelva un nuevo array con los objetos que contienen ese término en una de sus propiedades.

Imagina que tienes un array de objetos que representan libros, donde cada libro tiene propiedades como titulo, autor, y año. La función debe buscar en la propiedad titulo.

Requisitos:

  1. Define un array de objetos libros, donde cada objeto representa un libro con las propiedades titulo, autor, y año.

  2. Crea una función llamada buscarPorTitulo que tome dos parámetros: el array libros y una cadena terminoDeBusqueda.

  3. La función debe retornar un nuevo array con todos los libros cuyo título contenga terminoDeBusqueda.

  4. No debes modificar el array original.

Ejemplo: Si buscas el término "misterio" y tienes libros con títulos como "El misterio de la casa verde" y "Aventuras en el mar", solo el primer libro debe ser incluido en el array de resultados.

RESULTADO

const libros = [
    { titulo: 'El misterio de la casa verde', autor: 'Elena Moreno', año: 1999 },
    { titulo: 'Aventuras en el mar', autor: 'Juan Martínez', año: 2005 },
    { titulo: 'La historia del tiempo', autor: 'Stephen Hawking', año: 1988 },
    // ... más libros
];

function buscarPorTitulo(libros, terminoDeBusqueda) {
    return libros.filter(libro => libro.titulo.toLowerCase().includes(terminoDeBusqueda.toLowerCase()));
}

// Ejemplo de uso:
const resultado = buscarPorTitulo(libros, 'misterio');
console.log(resultado);

¡Hasta mañana! 🤟