#149 Desarrollo moderno de Vue con Vite

Desarrollo moderno de Vue con Vite

Ya te hemos compartido guía para desarrollo con Bit en React y Next.js, y ahora le toca el turno a Vue y Vite. Y aquí te queremos preguntar, ¿ya utilizas Bit para algún proyecto o en tu trabajo? Cuéntanos, queremos saber tu opinión.

Colores relativos en CSS

Trabajar con colores en CSS puede ser una ciencia si sabes la teoría y las funciones CSS adecuadas. Para que así la siguiente vez que te den un solo color para el diseño, tu puedas sacar tu paleta de colores y triunfar como siempre.

EL RINCÓN DE CSS 👨‍💻 
Mi punto de vista en contenido desapareciendo usando gradientes transparentes

¿Has visto hacks de CSS que suenan genial y se ven muy bien, pero no son funcionales?, por ejemplo, este truco para hacer que el texto de un banner desaparezca pero que no es accesible porque no se puede seleccionar. Y si quisieras hacerlo accesible ¿cómo lo harías? Lee el siguiente articulo para que lo descubras.

HERRAMIENTA 🛠️ 
Animotion

El motion graphic está en crecimiento y con CSS y la Web puedes hacer tus propias animaciones. También puedes usar herramientas como Animotion para hacer todo más sencillo.

NOTICIA 📰 
Nuevos features WebKit en Safari 17.3

Esta versión solo soluciona bugs de la 17.2, pero no por eso debes dejar de actualizar. Recuerda que esta versión no solo esta disponible para macOS, sino también para iOS y para iPadOS.

INISPIRACIÓN 💡 
Elementos gráficos en secciones de Hero

¿Qué es lo primero que ves en un sitio web cuando entras? El Hero, y quizás te has dado cuenta que hay una tendencia web en meter elementos gráficos en esta sección. Si no te habías percatado, descuida, entra al siguiente link e inspírate.

UN DÍA COMO HOY 🗓️ 

El 07 de febrero de 2007, Google puso a disposición del público en general su servicio de correo electrónico gratuito Gmail.
Gmail se inició solo por invitación en versión beta desde el 01 de abril de 2004.
Gmail puede ser accedido utilizando protocolos POP3 o IMAP4.
Gmail en sus inicios ofreció una capacidad de almacenamiento de 1GB por usuario, muy superior al estándar de los servicios de correo del momento el cual ofrecían de manera gratuita entre 2 a 4MB, como era el caso de Hotmail.

VACANTE 💼 
UI Engineer

Ubicación: América Latina (Remoto)
Empresa: UI Engineer
Requisitos: Hablar y escribir inglés de nivel intermedio alto a fluido. Capaz de tener una conversación en tiempo real. Más de 4 años de experiencia práctica en ingeniería de UI a tiempo completo. Más de 2 años de experiencia práctica en Frontend (React, Vue, Angular) a tiempo completo. Más de 2 años de experiencia práctica en JavaScript a tiempo completo. Más de 2 años de experiencia práctica en HTML a tiempo completo. Más de 2 años de experiencia práctica en CSS a tiempo completo. Experiencia con frameworks UI como Bootstrap, Chakra o MUI. Debería poder mostrarnos las páginas web estéticamente agradables que haya implementado. Experiencia en la implementación de diseños de píxeles perfectos. Ser exigente con los detalles del diseño.

Si cumples con los requisitos, ingresa aquí para aplicar. 🤞 

RESULTADO DEL CHALLENGE DE AYER 🧐 
¡Gracias, Alexis Herrera, por compartir tu resultado! 😄 

Aquí te dejamos nuestra implementación:

function sumarHastaUnDigito(numero) {
    while (numero > 9) {
        let suma = 0;
        numero.toString().split('').forEach(digito => {
            suma += parseInt(digito, 10);
        });
        numero = suma;
    }
    return numero;
}

// Ejemplo de uso
console.log(sumarHastaUnDigito(38)); // Debería retornar 2
console.log(sumarHastaUnDigito(987)); // Debería retornar 6

• La función sumarHastaUnDigito acepta un número numero como argumento.

• Utiliza un bucle while para repetir el proceso de suma de dígitos mientras el número tenga más de un dígito (numero > 9).

• Dentro del bucle, convierte el número a string y luego a un array de sus dígitos con split(''). Después, itera sobre cada dígito, sumándolos después de convertirlos de nuevo a números enteros con parseInt.

• Asigna la suma obtenida a numero, y el bucle continúa si numero todavía tiene más de un dígito.

• Finalmente, cuando numero es de un solo dígito, termina el bucle y retorna numero.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que tome un array de objetos y los convierta en un mapa (Map) donde cada clave es única y se asocia con un objeto específico.

1. Implementa una función arrayAmapa que acepte dos argumentos: un array de objetos y una cadena que representa la propiedad del objeto a usar como clave.

2. La función debe retornar un nuevo objeto Map donde cada clave es el valor de la propiedad especificada de cada objeto, y el valor es el objeto completo.

3. Asegúrate de que todos los objetos en el array tengan la propiedad especificada.

Ejemplo:

const objetos = [
    { id: 10, nombre: "Manzana", color: "Rojo" },
    { id: 20, nombre: "Banana", color: "Amarillo" }
];

console.log(arrayAmapa(objetos, "id"));
// Debería retornar un Mapa con:
// 10 => { id: 10, nombre: "Manzana", color: "Rojo" }
// 20 => { id: 20, nombre: "Banana", color: "Amarillo" }

• Puedes utilizar el constructor Map y el método forEach para iterar sobre el array y llenar el mapa.

• Asegúrate de verificar que cada objeto tenga la propiedad clave antes de agregarla al mapa.

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 👀