• Frontenderos
  • Posts
  • #135 Los principales errores de Accesibilidad encontrados en 2023

#135 Los principales errores de Accesibilidad encontrados en 2023

¿Es HTMX solo otro framework JavaScript?

Los principales errores de Accesibilidad encontrados en 2023

Sorry Error GIF by pikaole

Estos errores, son muy comunes y sobre todo fáciles de resolver, échale un vistazo y comienza a solucionar esa deuda técnica ya.

¿Es HTMX solo otro framework JavaScript?

question mark pixel GIF by ProfessorLightWAV

Y ahora la pregunta que uno que otro se ha de haber hecho este año. La respuesta puede que ya la sepas, pero el contexto te fascinara.

Mi lista de deseos en WebDev 2024

Es año nuevo y todo mundo tiene lista de deseos y propósitos (el nuevo año se termina de celebrar el 31 de Enero 🤫 ) y que te parece, propósitos pensados en la salud del ecosistema web, esto te hará mejor frontendero a la larga, y piénsalo como una dieta, es por tu salud frontendera.

EL RINCÓN DEL DISEÑADOR 🎨 
¿Qué son los component, global y alias tokens en Design System?

Este es un excelente articulo para que sigas aprendiendo lo básico de Design Systems y te familiarices con mas términos.

INISPIRACIÓN 💡 
Nueva página de inicio de Vercel

Conoce el proceso de exploración, diseño y creación de la nueva página de Vercel (por si no sabías que teían nueva página de inicio)

HERRAMIENTA 🛠️ 
SVGPS

Convierte tus iconos SVG a un solo archivo JSON que puedes utilizar fácilmente en tu proyecto web.

zip.js

Olvídate de pagar WinRar cuando puedes programar tu aplicación o proyecto para que comprima y descomprima archives .zip

UN DÍA COMO HOY 🗓️ 

¡Hoy la Macintosh cumple 40 años! 🥳 
El 24 de enero de 1984, Apple Computer lanza el Macintosh 128K, el primer ordenador de éxito que cuenta con ratón y una interfaz gráfica de usuario (GUI).

Su presentación ocurre con un solo comercial "1984" durante Superbowl XVIII.

El Macintosh 128K cuenta con procesador Motorola MC68000 de 7.83MHz, 128 KB de memoria RAM (de allí su nombre), una ROM de 64 KB, una unidad de disquete de 3,5” (400kb), un monitor built-in de 9” y un ratón.

VACANTE 💼 
Software Engineer - Front End

Ubicación: Monterrey, Nuevo León (Presencial)
Empresa: moneypool
Requisitos: Fuerte experiencia en ingeniería de software. Te encantan los desafíos de crear aplicaciones altamente receptivas y tolerantes a fallas. Tienes la voluntad de oponerte a la tendencia.
¿Qué harás?: Colaborar con otros ingenieros en el diseño y desarrollo de API. Ayudará a formar la visión, la hoja de ruta y los objetivos del producto. Evaluar las ventajas y desventajas técnicas de cada decisión. Realizar revisiones de código y garantice una calidad de código excepcional.

Si vives en Monterrey y te interesa saber mas de esta vacante, entra aquí. 🤞 

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

function cifrarCesar(texto, desplazamiento) {
    return texto.split('').map(char => {
        if (!char.match(/[A-Za-z]/)) {
            return char;
        }

        const mayuscula = char === char.toUpperCase();
        let charCode = char.charCodeAt(0) + desplazamiento;

        if (mayuscula) {
            if (charCode > 90) {
                charCode = (charCode - 90) + 64;
            } else if (charCode < 65) {
                charCode = 91 - (65 - charCode);
            }
        } else {
            if (charCode > 122) {
                charCode = (charCode - 122) + 96;
            } else if (charCode < 97) {
                charCode = 123 - (97 - charCode);
            }
        }

        return String.fromCharCode(charCode);
    }).join('');
}
  • La función cifrarCesar toma un texto y un número desplazamiento como argumentos.

  • Primero, convierte el texto en un array de caracteres usando split('').

  • Luego, itera sobre cada carácter del array con map:

    • Si el carácter no es una letra (usando match(/[A-Za-z]/)), lo devuelve sin cambios.

    • Si es una letra, calcula el nuevo código de carácter aplicando el desplazamiento.

    • Ajusta el código de carácter para manejar los límites del alfabeto (por ejemplo, después de 'Z' viene 'A').

    • Convierte el código de carácter de vuelta a un carácter con String.fromCharCode.

  • Finalmente, une todos los caracteres transformados en un string con join('') y devuelve el resultado.

CHALLENGE DE HOY ⚔️ 
Crea una función que valide números de tarjetas de crédito utilizando el algoritmo de Luhn.

El algoritmo de Luhn es una fórmula de suma de verificación simple utilizada para validar una variedad de números de identificación, especialmente números de tarjetas de crédito. El algoritmo fue creado por el científico de IBM Hans Peter Luhn.

  1. Implementa una función validarTarjeta que acepte un número de tarjeta de crédito como string.

  2. La función debe retornar true si el número de tarjeta es válido según el algoritmo de Luhn, o false en caso contrario.

  3. No consideres espacios o guiones como parte del número de la tarjeta.

Ejemplo:

console.log(validarTarjeta("4539 1488 0343 6467")); // Debería retornar true

Consejos:

  • El algoritmo de Luhn implica invertir el número de la tarjeta, luego alternar la duplicación de los dígitos, y finalmente sumar todos los dígitos.

  • Asegúrate de convertir el string en un array de números para realizar los cálculos.

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