frontenderos icon

Podcast

Newsletter

#179 100 cosas que puedes hacer en tu sitio Web

Barreras en la accesibilidad móvil

100 cosas que puedes hacer en tu sitio Web

pgdue GIF

Las redes sociales no son para siempre. Los servicios donde puedas publicar tus sitios web, tampoco son para siempre. ¿Sabes que si es para siempre? Que tengas el control y puedas hostear tu propio sitio web en donde tu quieras y moverlo de ahí libremente. Y si crees que tener tu propio sitio web no es importante o es aburrido, hay muchas cosas que puedes hacer con el, por ejemplo, las que están en este sitio.

Barreras en la accesibilidad móvil

Sabemos que hay muchas herramientas y muchos recursos para hacer que tu sitio web sea más accesibles para navegadores, o herramientas en computadoras de escritorio o laptops. Pero para dispositivos móviles, como celulares y tabletas, es otra historia. Y tienes que aprender sobre estas herramientas y tecnologías y hacer las adaptaciones necesarias a tus flujos de trabajo. Pero una vez que comienzas a pensar en todos tus tipos de usuario, las recompensas son mayores.

¿Qué es Utility-First en CSS?

Hay un termino que se esta volviendo tendencia gracias a herramientas como TailwindCSS, y tienes que aprender porque entender este tipo de, llamémosle patrones, de CSS te ayudará mucho a aplicarlos con o sin ayuda de herramientas.

GUÍA 📖 
Animaciones basadas en dirección en Framer Motion

Framer Motion, es una biblioteca para crear animaciones para React que tiene muchas características que nos encantan y es super fácil de utilizar. En esta guía, vas a aprender a animar la dirección en base al contexto, porque no hay nada más molesto que algo que tenga que ir hacia un lado termine yendo hacia el otro, y esto mejorará mucho la experiencia de usuario.

HERRAMIENTA 🛠️ 
React Tag Autocomplete

Esta es una biblioteca que tienes que tener sí o sí en tu cinturón de herramientas, tanto por si puedes implementarlo en un proyecto, porque sabemos que luego hay limitaciones por las cuales no se puede implementar una biblioteca nada más porque si, o si quieres estudiar su código fuente para saber como funciona. De todas formas es un win-win para tu yo del futuro que lo quiera ocupar.

React Use Wizard

Si hay un componente grande que cualquier MVP necesita, ese sería un Wizard o stepper. Y aunque igual lo puedes construir desde cero, si puedes agilizar el desarrollo utilizándolo o quieres aprender como funciona, este te puede servir porque tiene todas las características que puedes esperar de un componente de este estilo.

LANZAMIENTO 🚀 
Polypane 18

Polypane, el navegador que te permite trabajar con multiples paneles siendo cada uno un diferente navegador que puede funcionar independientemente para pruebas y para personalizaciones, acaba de lanzar su versión 18 y trae algo muy interesante. Esta característica se llama Portal, y permite compartir la sesión de navegador a otros dispositivos conectados a red o a Internet y es algo que va a ser muy útil para trabajar en equipos.

NOTICIA 📰 
Express.js sufre de spam

¿Te enteraste que hace unas semanas el repositorio de Express.js, el framework que usaba de inicio tu framework favorito o aun usa, sufrió una avalancha de Pull Requests basura que solo podemos clasificar como spam a raíz de un video de un popular canal de YouTube? El tema escaló rápido hasta el punto que ya hay un debate sobre quien debe o no contribuir al OSS y las ventajas y desventajas de hacerlo cuando apenas estas empezando a programar, además de que tener unos commits que realmente no solucionan nada en un proyecto Open Source no te va a ayudar a conseguir ese trabajo que buscas.

UN DÍA COMO HOY 🗓️ 

El 08 de marzo de 2006, Microsoft mejora su buscador MSN Search y lo renombra con el nombre de Windows Live Search (versión beta) lanzando su versión final el 11 de septiembre de 2006.
Live Search ofrecía a los usuarios la capacidad de buscar tipos específicos de información mediante fichas de búsqueda que incluía la Web, noticias, imágenes, música, escritorio, local y la enciclopedia Microsoft Encarta.
Live Search contaba con un menú de configuración disponible en Internet Explorer para cambiar el motor de búsqueda predeterminado.
En el cambio de MSN Search a Windows Live Search, Microsoft dejó de usar Picsearch como su proveedor de búsqueda de imágenes y comenzó a llevarla a cabo por sí mismo, alimentado por sus propios algoritmos de búsqueda.
Microsoft, reemplazó Windows Live Search oficialmente por Bing el 03 de junio de 2009.
Bing es el nuevo buscador web de Microsoft el cual fue presentado el 28 de mayo de 2009.
El 29 de julio del 2009, Microsoft y Yahoo! anunciaron que Bing reemplazaría a Yahoo! Search. Este cambio fue implementado a principios de 2012.

VACANTE 💼 
Desarrollador Front end Sr- 100% remoto

Ubicación: México (Remoto)
Empresa: Falabella Financiero
Requisitos: Experiencia 4 años+ en: Habilidades Conocimientos y experiencia en web markup, especialmente HTML5, CSS3. Indispensable experiencia en JavaScript y frameworks de desarrollo, especialmente Angular(>=7) y/0 React(>=15). Html, Css y Js. Buena comprensión de arquitecturas web. Buenos conocimientos en el manejo de solicitudes asíncronas. Deseable: Pruebas Unitarias; CI/CD; Contenedores.

Para conocer más de esta vacante, entra aquí. 🤞 

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

Para resolver el desafío de combinar dos arrays de números y ordenarlos de menor a mayor, puedes usar el siguiente código que aprovecha los métodos concat y sort de los arrays en JavaScript:


function combinarYOrdenar(array1, array2) {
    // Combinar los dos arrays
    const arrayCombinado = array1.concat(array2);

    // Ordenar el array combinado
    arrayCombinado.sort((a, b) => a - b);

    // Retornar el array combinado y ordenado
    return arrayCombinado;
}

// Ejemplo de uso
console.log(combinarYOrdenar([1, 3, 5], [2, 4, 6])); // Debería retornar [1, 2, 3, 4, 5, 6]
console.log(combinarYOrdenar([7, 8], [10, 9, 11])); // Debería retornar [7, 8, 9, 10, 11]
  • La función combinarYOrdenar toma dos arrays como argumentos.

  • Utiliza el método concat para combinar los dos arrays en uno solo. concat devuelve un nuevo array que incluye los elementos de ambos arrays de entrada.

  • Luego, el nuevo array se ordena utilizando el método sort. Por defecto, sort ordena los elementos como si fueran cadenas, lo que puede llevar a resultados incorrectos al trabajar con números. Para asegurar un ordenamiento numérico correcto, se proporciona una función de comparación ((a, b) => a - b) como argumento de sort, la cual ordena los números en orden ascendente.

  • Finalmente, la función retorna el nuevo array combinado y correctamente ordenado.

Este código es un ejemplo claro y eficiente de cómo combinar y ordenar arrays en JavaScript, demostrando la manipulación de arrays y el uso de funciones de comparación con sort para manejar correctamente los datos numéricos.

CHALLENGE DE HOY ⚔️ 
El manejo de cadenas y la manipulación de caracteres son habilidades esenciales en la programación. Tu tarea es desarrollar una función que, dada una cadena de texto, determine cuántas vocales contiene y retorne ese número.

  1. Implementa una función contarVocales que acepte una cadena de texto como argumento.

  2. La función debe analizar la cadena y contar el número total de vocales (a, e, i, o, u).

  3. La función debe ser insensible a mayúsculas y minúsculas.

  4. Retorna el total de vocales encontradas en la cadena.

Ejemplo de uso:

console.log(contarVocales("Hola Mundo")); // Debería retornar 4
console.log(contarVocales("AEIOU")); // Debería retornar 5
console.log(contarVocales("bcdfghjklmnpqrstvwxyz")); // Debería retornar 0
  • Considera convertir la cadena a minúsculas o mayúsculas para hacer una comparación insensible a mayúsculas/minúsculas más sencilla.

  • Puedes iterar sobre cada carácter de la cadena y comprobar si es una vocal.

  • Alternativamente, podrías utilizar una expresión regular para encontrar todas las coincidencias de vocales en la cadena.

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! 🤟