- Frontenderos
- Posts
- #145 16 lecciones menos conocidas sobre accesibilidad
#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 arrayarray
como argumento.Inicializa un objeto vacío
frecuencias
para almacenar la frecuencia de cada elemento.Itera sobre cada
elemento
del array conforEach
.Si el
elemento
no existe como una clave enfrecuencias
, lo agrega y establece su valor a 1.Si el
elemento
ya existe como una clave enfrecuencias
, 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.
Implementa una función
concatenarYFiltrar
que acepte varios arrays como argumentos.La función debe retornar un nuevo array que sea el resultado de concatenar todos los arrays de entrada, eliminando cualquier elemento duplicado.
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 luegofilter()
o unSet
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! 🤟