frontenderos icon

Podcast

Newsletter

#182 No hay ideas originales pero…

AI y Design Systems

No hay ideas originales pero…

Si crees que porque una idea ya existe no vale la pena probarla, tienes que leer este artículo. En tiempos donde comienzan a predominar las soluciones artificiales, es el ingenio humano y la ejecución humana lo que marcara la diferencia.

AI y Design Systems

Los Design Systems son herramientas que si se ejecutan bien ayudan a construir interfaces de usuario para grandes empresas de manera sistematizada. Y la polémica y el furor que está causando las herramientas de AI o LLM también las han alcanzado por lo mismo, todo lo que se puede automatizar tarde o temprano será asistido por este tipo de herramientas. Ahora, si nos ponemos a pensar en esta última expresión, asistir, no reemplazar, ¿cómo podemos utilizar y estar en control de lo que será el futuro de los Design Systems? El futuro solo se escribe, no se predice.

Las 3 capacidades que los diseñadores necesitan para construir su carrera de AI

Siguiendo la linea de adaptarse al futuro, y si te interesa saber más sobre como puedes alcanzar el futuro. Estas son las cosas que necesitas aprender, y toma en cuenta que estas predicciones pueden cambiar pero el enfoque es el mismo, ayudarte a ti y ayudar al usuario.

EL RINCÓN DE CSS 👨‍💻 
Jugando con Infinity en CSS

Hay una constante en CSS llamada infinity que aunque solo puede ser usada con calc() y aunque aun no sabemos todos los usos prácticos que puede tener, hay unos que puedes observar aquí, a ver si a ti se te ocurren nuevos casos de uso.

EL RINCÓN DEL DISEÑADOR 🎨 
Types of Love, pares de tipografia favoritos por diseñadores

A los humanos les encanta emparejar cosas, y cuando las cosas no se emparejan, les gusta crear cosas que emparejen. A los diseñadores también les encanta emparejar cosas y en este caso puedes ver algunos ejemplos de tipografías que van bien juntas.

HERRAMIENTA 🛠️ 
Mountaineer

¿Quién dice que un frontendero no puede ser fullstackero? Si tu stack de backend favorito es Python pero en el front eres más React y te gustaría tener en un solo framework ambas opciones, tienes que echarle una mirada a este proyecto que utilizar FastAPI de fondo. Esta es una solución que recuerda mucho a proyectos como Meteor o RedwoodJS entonces si te gusta ese tipo de stacks te va a gustar este.

Vue0

Retomando el titular de este número del newsletter y haciendo honor a que en el Open Source todo esta inspirado por sus predecesores, como alternativa a v0 de Vercel, aquí tienes vue0, para que también puedas generar interfaces con Vue.

TEMPLATES 🖥️ 
Functional UI Kit

Este UI Kit que tiene componentes de las dos herramientas más populares en el mercado frontendero: Figma y React, te va a ayudar mucho a sacar esos proyectos si no tienes un diseñador a tu lado si eres freelancer o el único programador en tu departamento. Y lo mejor de todo es que es gratuito y tiene muchas opciones de personalización.

NOTICIA 📰 
Google rediseño su página de login

Google esta haciendo un rediseño de su página de login y el cambio es muy evidente. Aprende a reconocer como se ve la nueva interfaz para evitar caer en scams.

LANZAMIENTO 🚀 
Doodle 0.10.0

Si con JavaScript podemos construir aplicaciones para móviles, también podemos hacer lo inverso, con un lenguaje de backend o móviles construir aplicaciones para Web. Si has visto la versatilidad con la que se crean interfaces con Kotlin para Android y pensaste “me gustaría hacerlo para Web” te tenemos una noticia, ya puedes hacerlo con Doodle y es que con su versión 0.10.0 ya hay soporte para WASM y ademas de poder incrustar elementos HTML en templates y soporte para mejoras en versión de escritorio.

UN DÍA COMO HOY 🗓️ 

El 11 de marzo de 2011, Apple lanza la segunda generación del iPad en los Estados Unidos.

Apple rediseñó la interfaz de usuario del iPad 2 para aprovechar el mayor tamaño del dispositivo y la capacidad de utilizar software para lectura de libros electrónicos, periódicos, navegación web y correo electrónico.

El iPad 2 posee un procesador A5, el cual es dos veces más rápido que el iPad original y hasta 9 veces más rápido cuando se trata de gráficos.

Además el iPad 2 también permitir el acceso al usuario a otras actividades de entretenimiento como películas, música y videojuegos.

El iPad 2 tiene una batería de litio que dura hasta 10 horas, un procesador dual core Apple A5 y dos cámaras designadas para videollamadas.

El iPad 2 cuenta con 2 cámaras, una trasera y una delantera para realizar video llamadas y su nuevo diseño es mucho más fino que el anterior, incluso que el del iPhone 4.

El iPad2 fue el último producto que anunció públicamente Steve Jobs.

el 25 de marzo de 2011 será lanzado en España, México y Canadá

VACANTE 💼 
Team Leader/Front-React/ Cdmx

Ubicación: Ciudad de México (Híbrido)
Empresa: NTT DATA Europe & Latam
Requisitos: Lic./Ing. en Sistemas, Informática o afín, Experiencia: 4 Años de experiencia en Front-React y Gestión de equipos de trabajo. Conocimientos: JavaScritp, Frontend, React, Web Components, CSS, Manejo de equipo de trabajo mínimo 2 personas.
Beneficios: Modalidad Hibrido, Sueldo base de acuerdo a experiencia/ 100% nominal, Prestaciones Superiores a la ley, Seguro de vida, Gastos médicos mayores, Seguro dental, Vales de despensa, Fondo de Ahorro, 12 días de Vacaciones que puedes comenzar a disfrutar a partir del 4 mes que tengas en la compañía, Apoyo para modalidad de Teletrabajo.

Para conocer más de esta vacante, ingresa aquí. 🤞 

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

Para encontrar el número faltante en una secuencia de números enteros donde un número está faltante, puedes usar un enfoque matemático para calcular la suma esperada de la secuencia completa y restar la suma de los números presentes en el array. Este método es eficiente y evita tener que ordenar el array o realizar una búsqueda exhaustiva.

function encontrarNumeroFaltante(array) {
    // Calcular la longitud total incluyendo el número faltante
    const n = array.length + 1;

    // Calcular la suma esperada de la secuencia completa
    // Fórmula para la suma de una serie aritmética: n(n + 1) / 2
    const sumaEsperada = n * (n + 1) / 2;

    // Calcular la suma real de los números presentes en el array
    const sumaReal = array.reduce((acumulador, valorActual) => acumulador + valorActual, 0);

    // El número faltante es la diferencia entre la suma esperada y la suma real
    return sumaEsperada - sumaReal;
}

// Ejemplo de uso
console.log(encontrarNumeroFaltante([3, 7, 1, 2, 8, 4, 5])); // Debería retornar 6
console.log(encontrarNumeroFaltante([10, 14, 12, 11, 15, 13, 17, 16, 18, 19])); // Debería retornar 20
  • Se calcula n, que es el total de números en la secuencia incluyendo el número faltante, como la longitud del array más uno.

  • Se calcula la sumaEsperada de todos los números si la secuencia estuviera completa, utilizando la fórmula para la suma de una serie aritmética: n(n + 1) / 2.

  • Se calcula la sumaReal sumando todos los elementos presentes en el array.

  • El número faltante es la diferencia entre la sumaEsperada y la sumaReal. Este es el valor que se retorna.

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