frontenderos icon

Podcast

Newsletter

#145 16 lecciones menos conocidas sobre accesibilidad

Errores comunes de Next.js con App Router y como arreglarlos

16 lecciones menos conocidas sobre accesibilidad

Cuando piensas en accesibilidad y las formas más fáciles para implementar buenas practicas en tu sitio web, quizás lo primero que se te viene a la mente son cosas básicas como añadir texto alternativo a imágenes, contraste en colores, y tamaños de texto. ¿Quieres mejorar tu juego? Pon en practica las lecciones de este articulo.

Errores comunes de Next.js con App Router y como arreglarlos

El cambio del Pages router al App router trajo muchos errores porque cambió el flujo de trabajo que muchos frontenderos estaban acostumbrados. Si estas teniendo problemas trabajando con las nuevas versiones de Next.js, y te encuentras estos errores, ya sabrás como solucionarlos.

EL RINCÓN DE CSS 👨‍💻 
Una introducción practica animaciones con Scroll-Driven

¿Has visto todas las cosas que ya se pueden hacer con animaciones en CSS? Uno de los escenarios mas interesantes es para hacer animaciones con scrolling, y para ejemplos, los de este articulo.

GUÍA 📖 
Como rediseñar

Rediseñar cualquier proyecto de software, siempre es un desaíio, si estas en posición de toma de desiciones en tu equipo usa esta guía para apoyarte sobre lo que tienes que hacer, y si no lo estas, pásasela a tu manager nada mas te enteres que hay que hacer rediseño.

HERRAMIENTA 🛠️ 
dep-tree

Esta herramienta es más para exploración y educación, que uso, pero te será util por lo mismo. Además de que es divertida de usar. Ve las dependencias de tu repo y sus ramificaciones, con esta grafica de nodos en linea.

DevLink by WebFlow

Diseña componentes para React visualmente con esta herramienta de WebFlow. Si eres de los frontenderos que trabajan con no-code y tu herramienta favorita es WebFlow, tienes que experimentar con DevLink.

UN DÍA COMO HOY 🗓️ 

El 03 de febrero de 1986, Philip Elmer-DeWitt en un artículo de la revista TIME, utilizó por primera vez el término "vaporware".

El término se usa comúnmente para describir el software del cual se anuncia su lanzamiento en varias ocasiones y aun no se libera.

En ese momento, muchos expertos creían Microsoft era culpable de utilizar anuncios vaporware para mantener a los clientes de la compra de software de otras compañías para convencerlos que una versión de Microsoft estaba próximamente a ser lanzada sin ser así en realidad.

Elmer-DeWitt, inicia su artículo de en el TIME, informando:

En junio pasado , Steven Ballmer, vicepresidente de Microsoft, dijo a la prensa que su compañía enviaría un importante nuevo programa llamado Windows "antes de que caiga la nieve".

Windows, le da a un ordenador IBM el aspecto y el tacto de un Apple Macintosh.

VACANTE 💼 
Senior React Developer

Ubicación: México (Remoto)
Empresa: EPAM Systems
Requisitos: 5 años de experiencia: aporta una experiencia sustancial en pruebas, desarrollo o lanzamiento de productos de software. 5 años de dominio completo: con 5 años en un entorno de JavaScript o TypeScript, estará bien versado en desarrollo front-end y back-end. Más de 3 años de experiencia con React y Redux: ha pasado al menos 3 años dominando React y Redux, convirtiendo ideas complejas en soluciones elegantes. Más de 2 años de experiencia trabajando con GraphQL: tiene más de 2 años de experiencia práctica con GraphQL, lo que permite una comunicación de datos eficiente. Entre otros.
Beneficios: Plan de carrera y oportunidades reales de crecimiento. Acceso ilimitado a las soluciones de aprendizaje de LinkedIn Plan de Movilidad Internacional en 25 países Capacitación constante, mentorías, cursos corporativos online, eLearning y más Clases de inglés con profesor certificado. Apoyo a las iniciativas de los empleados (club de algoritmos, tostadores, club ágil y más) Ambiente de trabajo agradable (sala de juegos, área de siesta, comodidades, eventos, equipos deportivos y más) Horario de trabajo flexible y código de vestimenta. Entre otros.

Ingresa aquí para conocer más de esta vacante. 🤞 

RESULTADO DEL CHALLENGE DE AYER 🧐 
¡Gracias a los que contestaron el challenge de ayer! Aquí te dejamos nuestra respuesta:

function contarOcurrencias(array) {
    const frecuencias = {};

    array.forEach(elemento => {
        if (!frecuencias[elemento]) {
            frecuencias[elemento] = 1;
        } else {
            frecuencias[elemento]++;
        }
    });

    return frecuencias;
}

// Ejemplo de uso
console.log(contarOcurrencias(["manzana", "banana", "manzana", "naranja"]));
// Debería retornar { manzana: 2, banana: 1, naranja: 1 }

console.log(contarOcurrencias([1, 4, 3, 2, 3, 1, 4, 4]));
// Debería retornar {1: 2, 2: 1, 3: 2, 4: 3}
  • La función contarOcurrencias toma un array array como argumento.

  • Inicializa un objeto vacío frecuencias para almacenar la frecuencia de cada elemento.

  • Itera sobre cada elemento del array con forEach.

  • Si el elemento no existe como una clave en frecuencias, lo agrega y establece su valor a 1.

  • Si el elemento ya existe como una clave en frecuencias, incrementa su valor en 1.

  • Devuelve el objeto frecuencias que contiene la cuenta de cada elemento del array.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que concatene varios arrays y filtre los elementos repetidos para dejar solo elementos únicos en el array resultante.

  1. Implementa una función concatenarYFiltrar que acepte varios arrays como argumentos.

  2. La función debe retornar un nuevo array que sea el resultado de concatenar todos los arrays de entrada, eliminando cualquier elemento duplicado.

  3. Asegúrate de que la función pueda aceptar un número variable de argumentos de array.

Ejemplo de uso:

console.log(concatenarYFiltrar([1, 2], [2, 3, 4], [4, 5]));
// Debería retornar [1, 2, 3, 4, 5]
  • Considera el uso del operador de propagación (...) para manejar un número variable de argumentos de array.

  • Puedes usar métodos como concat() para combinar los arrays y luego filter() o un Set para eliminar duplicados.

Comparte tu respuesta en redes sociales y etiquétanos (@frontenderos), compartiremos nuestra respuesta en el issue de mañana. 😎 

Tu feedback nos ayuda a mejorar

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

¿Qué te pareció el email de hoy?

Iniciar Sesión o Suscríbete para participar en las encuestas.

¡Hasta mañana! 🤟