• Frontenderos
  • Posts
  • #193 Repensando que significa una startup MVP

#193 Repensando que significa una startup MVP

David Hoang en cómo AI influirá herramientas creativas

Repensando que significa una startup MVP

Hay muchos conceptos en el mundo de la tecnología, que se interseccionan con el mundo de los negocios, que a veces se cimentan y seguimos construyendo productos como se pensaron originalmente. Uno de esos conceptos, son las MVPs y cómo se fundaban startups alrededor. Y este articulo, nos invita a pensar cómo podríamos construirlas actualmente.

David Hoang en cómo AI influirá herramientas creativas

Uno de los directivos de Replit, hizo una entrevista con una Product Manager de Figma, sobre cómo la AI va a influir el desarrollo de herramientas creativas para diseño y desarrollo de productos, y da un mensaje esperanzador a diseñadores y desarrolladores sobre como estas herramientas no los sustituirán si las adoptan.

EL RINCÓN DEL CMS 👩‍💻 
No margen exterior para componentes

Aquí tienes un consejo que te va a servir para tus proyectos web de ahora en adelante: no uses márgenes exteriores o paddings exteriores para tus componentes. ¿Quieres saber la razón? Lee el siguiente artículo.

EL RINCÓN DEL DISEÑO 🎨 
Cómo usar tipografias grandes en la Web

Seguro ya lo viste en sitios de inspiración de diseño web o en las recomendaciones que te hemos hecho en este newsletter, pero hay una tendencia a usar texto con tamaño de fuente grande, muy grande. Y contrario a lo que pareciera, hacer este tipo de diseño no es fácil. Pero si es algo que te gustaría aprender, sigue estas recomendaciones y tu sitio se verá bien.

BOILERPLATE 🗃️ 
Node TypeScript Skeleton

Aquí tienes otro boilerplate fullstack para tus proyectos personales y quizás para alguno profesional. Estos boilerplates te los compartimos también para que analices la arquitectura de otros proyectos y sigas aprendiendo.

INISPIRACIÓN 💡 
Páginas 404

La página más creativa en un sitio o aplicación web, no es la landing page, es la página 404. Y si tú estas a cargo de diseñarla o de implementarla, quizás aquí encuentres la inspiración para hacer más distintiva esa página. Si haces una página 404 que quieras compartir, háznoslas llegar y la compartiremos con la comunidad.

UN DÍA COMO HOY 🗓️ 

El 22 de marzo de 2011, Amazon lanza la Amazon Appstore su tienda de aplicaciones móviles para el sistema operativo de Android.

Disponible en Estados Unidos, Reino Unido, Alemania, Francia, Italia y España. La tienda se puso en marcha con alrededor de 3.800 aplicaciones tanto gratuitas como de pago.

La Amazon Appstore, hizo su debut estando sólo disponible en los Estados Unidos, a partir del 30 de agosto 2012 se puso a disposición en varios países europeos.

Los desarrolladores reciben el 70% del precio de lista.

El 28 de septiembre de 2011, Amazon presentó su tablet  Kindle Fire, una tableta  diseñada para el consumo de medios en el ecosistema de Amazon, se basa únicamente en la Amazon Appstore para su mercado, evitando el acceso a Google Play.

La tableta fue diseñada para estar integrada con la Amazon  Appstore.

VACANTE 💼 
Lead Frontend Software Engineer

Ubicación: México (Remoto)
Empresa: PLAYSTUDIOS
Requisitos: Licenciatura o Maestría en Informática o similar 8-10 años de desarrollo de software profesional principalmente en frontend 5 años de experiencia en React/Redux y Jest Conocimiento avanzado de JavaScript, React/Redux, HTML/CSS/SASS, NodeJs, mejores prácticas de desarrollo web, aplicaciones de una sola página, MaterialUI, Webpack, Babel, Jest Experiencia en diseño web responsivo y problemas de compatibilidad entre dispositivos.
Responsabilidades: El ingeniero principal de software frontend es principalmente un desarrollador de React/Redux y comprende las últimas tendencias en el desarrollo de UI web y pruebas unitarias de JavaScript. Escriba, mantenga, estandarice y haga cumplir la calidad del código, las convenciones estándar y las mejores prácticas mediante revisiones de código e intercambio de conocimientos. Arquitecto y proporcionar diseño técnico y orientación a ingenieros. Crea animaciones CSS de alto rendimiento. Trabaje con propietarios de productos y gerentes de proyectos para dividir los objetivos de alto nivel en tareas y cronogramas y resolver problemas.

Aquí te dejamos el link para que puedas aplicar a esta vacante. 🤞 

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

Para resolver el desafío de agrupar anagramas a partir de un array de palabras, el enfoque consiste en utilizar una representación común para los anagramas, ordenando alfabéticamente las letras de cada palabra. Luego, estas palabras ordenadas se utilizan como claves en un objeto para agrupar los anagramas. Aquí tienes cómo podrías implementarlo:

function agruparAnagramas(palabras) {
    const grupos = {};

    palabras.forEach(palabra => {
        // Ordenar las letras de cada palabra para crear una clave
        const claveOrdenada = palabra.split('').sort().join('');
        // Si la clave no existe, inicializar un nuevo array
        if (!grupos[claveOrdenada]) {
            grupos[claveOrdenada] = [];
        }
        // Agregar la palabra original al grupo correspondiente
        grupos[claveOrdenada].push(palabra);
    });

    // Obtener y retornar solo los valores del objeto grupos como un array de arrays
    return Object.values(grupos).sort((a, b) => b.length - a.length);
}

// Ejemplo de uso
console.log(agruparAnagramas(["amor", "roma", "luz", "ser", "res", "zul"]));
// Debería retornar algo como [["amor", "roma"], ["ser", "res"], ["luz", "zul"]]
  • Inicias con un objeto grupos para almacenar los anagramas.

  • Iteras sobre cada palabra en el array de entrada, ordenando las letras de cada palabra alfabéticamente para formar una clave. Los anagramas tendrán la misma clave al estar sus letras ordenadas de la misma manera.

  • Usas esta clave para agrupar las palabras originales en el objeto grupos. Si la clave no existe en el objeto, inicializas un nuevo array. Luego, agregas la palabra al array correspondiente a su clave.

  • Finalmente, usas Object.values(grupos) para obtener los grupos de anagramas como un array de arrays. Además, se ordenan los grupos por su tamaño de mayor a menor antes de retornarlos, aunque este paso es opcional.

CHALLENGE DE HOY ⚔️ 
Suma Rangos de Tiempo

Supón que tienes un array de strings que representan rangos de tiempo (por ejemplo, ["10:00-12:00", "02:30-04:00"]), donde cada rango representa horas trabajadas en un día. Tu tarea es sumar todos estos rangos de tiempo y devolver el total de horas y minutos trabajados en el formato "HH:MM".

Tareas a realizar:

  1. Implementa una función sumarRangosDeTiempo que acepte un array de strings como argumento, donde cada string representa un rango de tiempo.

  2. Calcula el total de horas y minutos trabajados sumando todos los rangos de tiempo dados.

  3. Retorna el tiempo total en el formato "HH:MM".

Consideraciones:

  • Asume que todos los rangos de tiempo están dentro del mismo día y que el tiempo final de un rango es siempre mayor que el tiempo inicial.

  • Asegúrate de manejar correctamente la suma de minutos para que, al superar 60, se conviertan en horas.

Ejemplo de uso:

console.log(sumarRangosDeTiempo(["10:00-12:00", "02:30-04:00"])); // Debería retornar "04:30"
console.log(sumarRangosDeTiempo(["09:10-10:00", "11:00-11:45", "15:00-15:10"])); // Debería retornar "02:45"

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 👀

¿Qué te pareció el email de hoy?

Iniciar Sesión o Suscríbete para participar en las encuestas.

¡Hasta mañana! 🤟