#195 90% de los diseñadores fallan en esto para ser contratables

90% de los diseñadores fallan en esto para ser contratables

Este es un articulo para diseñadores, pero bien se puede extrapolar a frontenderos con un poco de imaginación y leyendo las letras chiquitas. Allá afuera, en el mundo real, los procesos de creatividad no son y no pueden ser lineales como te los enseñan en escuelas o bootcamps; y está también es la razón por la que muchos proyectos frontenderos fallan. Y cuando un proyecto falla, es cuando el aprendizaje real comienza.

EL RINCÓN DE CSS 👨‍💻 
Sliders son una mala práctica de UX

¿Has utilizado sliders como componente interactivo? ¿Qué tal lo sintieron tus usuarios? ¿Qué tal fue la experiencia de usuario en dispositivos móviles? Si tus usuarios no están a gusto con este tipo de interfaces, quizás debas probar nuevas formas de entregar la misma interacción pero utilizando otros componentes.

GUÍA 📖 
4 maneras de manejar estado en React en 2024

Es 2024, y no todos los proyectos tienen los mismos requerimientos para el manejo del estado de la aplicación. Algunos van a necesitar una solución pequeña, otros vas a necesitar Redux y todo su ecosistema. Dependiendo del sapo, será la pedrada.

HERRAMIENTA 🛠️ 
Blob Maker

Si no son olas o imágenes cortadas geométricamente, van a ser formas aleatorias, pero seguro que uno de estos tres esta en el siguiente diseño web que tengas en tu escritorio. Y si es esta ultima opción, aquí tienes un generador de formas que te hará la vida más fácil.

Gradientor

Este es quizás el generador de gradientes en linea más interactivo que existe y tienes que probarlo aunque no lo vayas a utilizar de forma inmediata.

LANZAMIENTO 🚀 
Storybook 8

Storybook 8 ya esta aquí, y como no podia faltar, trae soporte para React Server Components (RSC), mejora en sus herramientas de testing, mejor integración con React y Vue y sobre todo una arquitectura más orientada al ecosistema Vite. Vivimos en la era de Vite, y lo sabemos.

UN DÍA COMO HOY 🗓️ 

El 24 de marzo de 2004, la Comisión Europea impone a Microsoft una multa de  €497 millones (US$613 millones) por abuso de posición dominante con su sistema operativo Windows el cual ostentaba el 90% del mercado europeo.

Además, se ordena Microsoft  hacer una versión europea de su sistema operativo dentro de los noventa días.

El OS Windows deberá estar desprovisto del reproductor multimedia Media Player, que copa el 64% del mercado de la UE, para que los consumidores puedan optar por otros rivales en la provisión de servicios de acceso audiovisual a Internet, como RealPlayer de Real Networks, que tenía el 22% del mercado, o Quicktime de Apple.

También Microsoft deberá compartir parte de sus códigos con otros fabricantes de servidores para que éstos puedan producir aparatos que funcionen con Windows como lo hacen los propios productos de Microsoft. Estos fabricantes deberán abonar royalties a Microsoft.

VACANTE 💼 
Senior Front End Developer

Ubicación: México (Remoto)
Empresa: TechBridgeIT
Requisitos: Más de 5 años de experiencia en desarrollo de software. JavaScript, HTML5 y CSS3. Vue.js, Nuxt.js (obligatorio) Fuerte conocimiento de integraciones de API REST. Capacidad comprobada para resolver problemas complejos con soluciones creativas. Fuertes habilidades organizativas, atención al detalle y capacidad para gestionar múltiples tareas y cumplir con los plazos. Fuertes habilidades de comunicación y la capacidad de traducir conceptos técnicos complejos en términos comprensibles. Comprensión de las plataformas sin código y sus capacidades para un desarrollo eficiente (agradable tener) Voluntad de adoptar y adaptarse a nuevas tecnologías y herramientas para mantenerse al día. tendencias y avances de la industria. Experiencia con herramientas de análisis en el front-end. Conocimiento de pruebas unitarias y herramientas de control de calidad E2E. Es bueno tener experiencia trabajando con proveedores de nube como AWS. Familiaridad con Node.js. SQL y GraphQL. Fluido en español e inglés (comprensión 80%)

Aquí te dejamos el link para que puedas postularte. 🤞 

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

Para convertir strings con espacios, guiones o guiones bajos a formato CamelCase, puedes seguir el enfoque de dividir el string en palabras según estos delimitadores, capitalizar la primera letra de cada palabra excepto la primera, y luego unir todas las palabras. Aquí te muestro cómo podrías implementarlo:

function convertirACamelCase(texto) {
    // Dividir el texto en palabras usando una expresión regular que encuentre espacios, guiones y guiones bajos
    const palabras = texto.split(/[\\s-_]+/);

    // Transformar cada palabra a CamelCase
    const palabrasCamelCase = palabras.map((palabra, indice) => {
        // Dejar la primera palabra en minúsculas y capitalizar la primera letra de las demás palabras
        if (indice === 0) {
            return palabra.toLowerCase();
        } else {
            return palabra.charAt(0).toUpperCase() + palabra.slice(1).toLowerCase();
        }
    });

    // Unir todas las palabras transformadas en un único string
    return palabrasCamelCase.join('');
}

// Ejemplo de uso
console.log(convertirACamelCase("hello world")); // Debería retornar "helloWorld"
console.log(convertirACamelCase("data-base_model")); // Debería retornar "dataBaseModel"
console.log(convertirACamelCase("convertir a camel case")); // Debería retornar "convertirACamelCase"

• La función convertirACamelCase toma un string texto como argumento.

• Utiliza split con una expresión regular /[\\\\s-_]+/ para dividir el texto en palabras, basándose en espacios, guiones y guiones bajos como delimitadores.

• Después, map itera sobre el array de palabras. Para cada palabra, si es la primera (indice === 0), la convierte completamente a minúsculas. Para las demás palabras, capitaliza la primera letra y asegura que el resto estén en minúsculas.

• join('') une todas las palabras transformadas en un string único, siguiendo el formato CamelCase.

• Finalmente, la función retorna el string en CamelCase.

CHALLENGE DE HOY ⚔️ 
Validar Paréntesis en un String

Los paréntesis dentro de un string se consideran correctamente equilibrados si cada paréntesis de apertura "(" tiene un paréntesis de cierre ")" correspondiente y los paréntesis se cierran en el orden correcto. Tu tarea es desarrollar una función que tome un string como entrada y retorne true si los paréntesis están correctamente equilibrados, y false en caso contrario.

Tareas a realizar:

1. Implementa una función validarParentesis que acepte un string como argumento.

2. La función debe analizar el string y determinar si los paréntesis están correctamente equilibrados.

3. Retorna true si los paréntesis están equilibrados, y false si no lo están.

Ejemplo de uso:

console.log(validarParentesis("(hola)(mundo)")); // Debería retornar true
console.log(validarParentesis("(()()())")); // Debería retornar true
console.log(validarParentesis("(hola(mundo))")); // Debería retornar true
console.log(validarParentesis(")(")); // Debería retornar false
console.log(validarParentesis("(()")); // Debería retornar false
console.log(validarParentesis("(hola)(mundo))(")); // Debería retornar false

• Considera usar una pila para llevar un seguimiento de los paréntesis de apertura mientras iteras por el string.

• Cada vez que encuentres un paréntesis de apertura, ponlo en la pila.

• Cada vez que encuentres un paréntesis de cierre, verifica si hay un paréntesis de apertura correspondiente en la cima de la pila. Si es así, retíralo de la pila; si no, los paréntesis no están equilibrados.

• Al final de la iteración, si la pila está vacía, entonces los paréntesis están correctamente equilibrados.

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 👀