#90 Psicología de velocidad

10 hacks HTML raros que le dieron forma al Internet

Psicología de velocidad

Hay veces que te tienes que poner a pensar fuera de la caja. Mientras que la experiencia de desarrollador (DX o Developer Experience) es importante, es más importante la User Experience (UX) y es ahi cuando tienes que comenzar a aprender y utilizar conceptos como este, que una vez que lo domines, aumentará tus estadísticas de uso y todos serán felices. 😄 

10 hacks HTML raros que le dieron forma al Internet

Tonight Show Crying GIF by The Tonight Show Starring Jimmy Fallon

Hey, es hora de ponerse nostálgico. 🥺 Aquí te dejamos la historia de 10 hacks HTML que, quizás conocías, quizás no, y cómo le dieron forma al Internet y la Web modernos.

HERRAMIENTA 🛠️ 
p5-wrapper/react

Episode 1 Applause GIF by Friends

Problema: quieres usar p5 en react, pero no quieres configurar; solución: usas esta herramienta que te ahorrará chamba y te puedes poner a crear animaciones y programación creativa de inmediato. 😉 

Beautiful Tree

Sad Joke GIF by ABC Network

¿Recuerdas esa entrevista donde te pusieron a hacer árboles como pregunta técnica? Para la siguiente, muéstrales un ejemplo utilizando esta herramienta, y si no se les hace graciosa la broma, no apliques, nadie quiere trabajar en una empresa sin sentido del humor. 🙄 

React share

Relaxed Chill GIF

¿Estás haciendo un blog, un sitio corporativo o de noticias?
99.99999% seguro que te pedirán que “añadas” redes sociales para compartir. No te estreses, usa esta biblioteca y continua con tu vida normal.

EL RINCÓN DE CSS 👨‍💻 
Hollow text hover effect

Seguimos compartiendo tips de CSS para tipografía porque son bonitos😍 y porque son fáciles de implementar y pueden ser una excelente micro-interacción.

NOTICIA 📰 
react-native-permissions 4.0.0

¿Estas haciendo una app con React Native que necesita muchos permisos de usuario, y no quieres estar peleándote con ellos?, no pasa nada, puedes usar esta herramienta que, con su ultima versión, trae soporte para la ultima versión de React Native, así como compatibilidad con nuevas versiones de Android y de iOS.

Redux Toolkit v2.0.0

¿Utilizas Redux Toolkit? Entonces checa el changelog y analiza si te conviene migrar. 🧐 

UN DÍA COMO HOY 🗓️ 


El 10 de diciembre de 1993, se lanza id Software lanza DOOM, un juego FPS (siglas en inglés de First-Person Shooter) de temática de ciencia ficción y terror. DOOM es considerado uno de los títulos más importantes e influyentes en la industria del videojuego, por haber impulsado la popularidad del género de los FPS.

El 10 de diciembre de 1815, nace en Londres, Augusta Ada King, Condesa de Lovelace, nacida como Augusta Ada Byron. Ada Byron también es conocida como Ada Lovelace fue matemática y escritora y fue conocida principalmente por su trabajo sobre la máquina calculadora mecánica de uso general de Charles Babbage, la Máquina analítica. Entre las notas de Byron sobre la máquina de Babbage se encuentra lo que se reconoce hoy como el primer algoritmo destinado a ser procesado por una máquina. Como consecuencia, se le atribuye a Byron el título de ser la primera programadora de ordenadores. 👩🏻‍💻

VACANTE 💼 
FRONT END DEVELOPER MID

Ubicación: Ciudad de México (Remoto)
Empresa: Fairplay
Objetivos: Crear, mantener y mejorar nuestros productos web. Optimizar las aplicaciones para obtener el mejor rendimiento y experiencia. Diseñar funciones basadas en dispositivos móviles. (Móvil primero). Entre otros.
Requerimientos: Más de 2 años usando Javascript o Typecript, HTML y CSS. Experiencia en gestión de proyectos desde la planificación técnica hasta la producción. Tener un excelente conocimiento de las tecnologías web: arquitecturas cliente/servidor, REST y buenas prácticas. Entre otros.

CHALLENGE ⚔️ 

En muchas aplicaciones web, se utilizan funciones de autocompletado para mejorar la experiencia del usuario, permitiéndoles completar rápidamente entradas de texto basadas en sugerencias. Tu tarea es implementar una función que, dada una cadena de entrada y un conjunto de posibles completados, devuelva las sugerencias más relevantes.

Descripción del Reto:

  • La función debe aceptar dos argumentos: una cadena de entrada y un array de posibles sugerencias.

  • Debe devolver un array de sugerencias que comiencen con la cadena de entrada.

  • Las sugerencias deben ser limitadas a un número máximo (por ejemplo, 5).

RESULTADO 🧐 

function autocompletar(input, sugerencias) {
    const palabrasInput = input.toLowerCase().split(' ');
    const sugerenciasFiltradas = sugerencias.filter(sugerencia => 
        palabrasInput.every(palabraInput => 
            sugerencia.toLowerCase().includes(palabraInput))
    );

    // Limitar el número de sugerencias, por ejemplo, a 5
    return sugerenciasFiltradas.slice(0, 5);
}

// Ejemplo de uso con múltiples palabras
const nombres = ["Juan Pérez", "Ana Gómez", "Pedro Juanes", "Juana Pilar", "Juan Pablo"];
console.log(autocompletar("Juan P", nombres)); // ["Juan Pérez", "Juan Pablo"]

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