#189 Porque el mal diseño es bueno

Porque el mal diseño es bueno

Echando a perder se aprende. A veces necesitamos romper las reglas para innovar y ser disruptivos, y es ahi donde el mal diseño puede ser productivo. No se trata de entregar mal diseño, sino de hacer tantas pruebas que no temas hacer mal diseño para aprender. En arte e ingenieria, el mal diseño ha llevado a probar errores que no sabíamos que existían hasta que se probaron como idea y como concepto. No temas equivocarte si con eso vas a aprender, y más en el diseño web y en el front-end.

Todo lo que necesitas saber sobre Diseño de Logos Responsivos

No, hacer logos responsivos no se trata de reducir el tamaño de la imagen. Pero para hacer diseños responsivos de logos, se necesita tener definidos el logotipo, imagotipo e isotipo. Tienes que trabajar el branding, tienes que adecuar los vectores y colores y repensar la estructura de tu diseño.

Tooltips CSS modernos y burbujas de diálogo

Los tooltips son uno de los componentes básicos que debes conocer y dominar al momento de construir Interfaces de Usuario. Si eres frontendero de varias décadas, quizás los aprendiste a hacer con ciertas técnicas que pueden ser mejoradas y actualizadas, y si eres frontendero, quizás solo aprendiste a hacerlo con bibliotecas y también puedas usar este artículo para hacerlo solo con CSS.

Estrategias de monetización para WordPress

Aunque este articulo sobre estrategias de monetización esta pensado para WordPress, se puede extrapolar a cualquier area de desarrollo web que puedas pensar, tanto a nivel de diseño y desarrollo, como de bibliotecas o frameworks, solo sustituye la palabra WordPress por tu herramienta favorita y listo. Ahora que si tu herramienta favorita es WordPress y andas buscando generar ingresos extra, adelante.

Comienza a hablar un nuevo idioma en el año nuevo.

¿Grandes sueños para el 2024? Estás en el lugar adecuado. Con solo 10 minutos al día, Babbel te permitirá empezar a hablar un nuevo idioma como siempre has soñado. Desde inglés y francés hasta italiano, ruso o noruego, el método de Babbel, desarrollado con más de 150 lingüistas y profesores expertos, se centra en aprender a través de la conversación. Ya sea que estés a punto de emprender un viaje o quieras mejorar tu currículum en el nuevo año, Babbel es tu accesorio imprescindible. ¡Obtén un 60% de descuento al registrarte hoy!

GUÍA 📖 
Una guía práctica para diseñar para daltonismo

La accesibilidad de colores, no es solo hacer más contraste o los bordes más grandes. Hay toda una serie de investigación y recomendaciones que tomar en cuenta al momento de diseñar pensando en accesibilidad. Una de las mejores prácticas que puedes adoptar de este artículo, es que no solo debes depender del color, sino debes usar otros elementos como etiquetas, iconos, formas, para indicar lo que normalmente indicas con el color: el state de un elemento.

Explorando administración de cookies en Vue.js

¿Quieres una guía rápida de cómo implementar cookies en Vue.js? No busques más, esta es la guía mas simple para comenzar a hacerlo.

VIDEO 📹️ 
Nuxt 3.10, mejora tus tiempos de construcción

En tiempos donde el prefetching de rutas importa mucho para ofrecer la navegación más fluida y la carga de información más rápida, y cada meta-framework de JavaScript esta implementando nuevas técnicas de como mejorar este apartado, Nuxt 3.10 presenta esta técnica llamada sharedPrerenderData para solucionar este problema.

HERRAMIENTA 🛠️ 
Las mejores bibliotecas de UI Vue y Nuxt

Ya sea que seas un recién llegado a Vue y/o Nuxt, o te estes actualizando a su versión 3, o solo quieras experimentar, tienes que leer sobre las bibliotecas más utilizadas y populares del ecosistema.

TEMPLATES 🖥️ 
Nuxt UI Pro

Nuxt UI pro, es una colección de componentes Vue premium para crear aplicaciones Nuxt bellas y responsivas, y que además siguen las mejores recomendaciones en solo unos minutes. Y lo mejor, es que esa biblioteca official de Nuxt, entonces siempre habrá la mejor compatibilidad.

LANZAMIENTO 🚀 
Million Lint está en beta público

Esta es una herramienta que te va a gustar si eres React dev. Si has utilizado las herramientas para encontrar cuellos de botella en performance de navegadores, o extensiones en navegadores como React Dev Tools, entonces sabrás que no son tan intuitivas. Y es aquí donde entra Million Lint, que con una interfaz sencilla donde te muestra cuantas complejidad tienes en tus componentes directamente en VSCode, te será más fácil depurar.

UN DÍA COMO HOY 🗓️ 

El 18 de marzo de 2003, Apple descontinúa el  primer modelo de la iMac G3.

Al igual que los primeros Macs, el iMac G3 es un ordenador personal “todo-en-uno” que abarca tanto el monitor y la unidad del sistema en un solo recinto.

Originalmente lanzado en azul Bondi y más tarde una gama de otros colores brillantes, el iMac G3 estaba cubierta de plástico translúcido, el iMac se incluye con un teclado y un ratón en tonos a juego.

El iMac G3 es el único hasta la fecha en estar disponible en una amplia gama de colores.

El iMac G3, fue el primer modelo de la línea iMac de ordenadores personales de Apple y fue lanzado por el 15 de agosto de 1998.

VACANTE 💼 
Frontend Developer (React/TypeScript)

Ubicación: Área Metropolitana de la Ciudad de México (Remoto)
Empresa: Oowlish
Requisitos: Más de 5 años de experiencia creando experiencias web y móviles interactivas y centradas en el usuario utilizando React, TypeScript y Vite. Experiencia con la integración de Clerk/Stripe en aplicaciones web. Experiencia con lienzos altamente interactivos o UI basadas en SVG y bibliotecas relacionadas (ReactFlow, D3.js, etc.). Pasión por mantenerse actualizado con las tendencias y tecnologías actuales en desarrollo web y móvil. Excelentes habilidades de comunicación y capacidad para trabajar colaborativamente en equipo. Fuertes habilidades de programación y compromiso para entregar código de alta calidad.
Beneficios: Home Office, Horario flexible; Compensación competitiva basada en la experiencia; Planes de carrera que permitan un amplio crecimiento en la empresa; Proyectos Internacionales; Programa de inglés Oowlish (Mejorando y Certificando) Clases de español Fitness de búho con Total Pass; Conectándote (asignación de Internet); Bono de aniversario; entre otros.

Para poder aplicar a esta vacante, entra aquí. 🤞 

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

Para implementar una función mapPersonalizado que imite el comportamiento del método Array.prototype.map sin utilizar el método incorporado, puedes seguir el siguiente patrón. Esta implementación básica aplica una función de callback a cada elemento de un array y acumula los resultados en un nuevo array:

function mapPersonalizado(array, callback) {
    // Inicializar un nuevo array para los resultados
    const resultado = [];

    // Iterar sobre cada elemento del array original
    for (let i = 0; i < array.length; i++) {
        // Aplicar la función de callback al elemento actual
        // y agregar el resultado al array de resultados
        resultado.push(callback(array[i], i, array));
    }

    // Retornar el nuevo array con los elementos transformados
    return resultado;
}

// Ejemplo de uso
const numeros = [1, 2, 3, 4];
const duplicar = numero => numero * 2;

console.log(mapPersonalizado(numeros, duplicar)); // Debería retornar [2, 4, 6, 8]

• La función mapPersonalizado acepta un array y una función de callback como argumentos.

• Dentro de mapPersonalizado, se inicializa un nuevo array vacío llamado resultado para almacenar los elementos transformados.

• Se utiliza un bucle for para iterar sobre cada elemento del array original.

• Para cada elemento del array, se invoca la función de callback pasando el elemento actual (array[i]), el índice del elemento (i), y el array completo (array) como argumentos. Esto imita el comportamiento del método map nativo, que también proporciona estos argumentos a la función de callback.

• El valor retornado por la función de callback se agrega al array resultado utilizando push.

• Después de procesar todos los elementos, se retorna el array resultado, que contiene los elementos transformados.

CHALLENGE DE HOY ⚔️ 
Implementa una Función filter Personalizada

El método filter es fundamental en la programación funcional en JavaScript, permitiendo crear un nuevo array con todos los elementos que cumplan con una condición especificada por una función de callback. Tu tarea es desarrollar una función filterPersonalizado que replique esta funcionalidad.

1. Implementa una función filterPersonalizado que acepte dos argumentos: un array y una función de callback.

2. La función de callback recibe como argumento cada elemento del array y debe retornar true para incluir el elemento en el nuevo array o false para excluirlo.

3. filterPersonalizado debe retornar el nuevo array con los elementos que cumplan la condición especificada por la función de callback.

4. No utilices el método filter nativo de los arrays en tu implementación.

Ejemplo de uso:

const numeros = [1, 2, 3, 4, 5, 6];
const esPar = numero => numero % 2 === 0;

console.log(filterPersonalizado(numeros, esPar)); // Debería retornar [2, 4, 6]

Código Base para Empezar:

function filterPersonalizado(array, callback) {
    // Tu implementación aquí
}

// Ejemplo de uso

• Puedes utilizar un bucle for o forEach para iterar sobre todos los elementos del array.

• Para cada elemento, aplica la función de callback y, si retorna true, incluye el elemento en el nuevo array.

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 👀