#166 El desarrollo web se esta volviendo muy complejo y es nuestra culpa

El desarrollo web se esta volviendo muy complejo y es nuestra culpa

¿Has sentido FOMO(Fear of Missing Out) sobre el futuro, y quizás presente, del Desarrollo de Software Web? No eres el único, el ecosistema crece a tal ritmo que incluso los más expertos pueden llegarse a sentir fuera de lugar y que no conocen todo lo que esta sucediendo. ¿Quieres tener más tranquilidad al respecto? Hay un secreto, deja te lo cuento. No necesitas saber todo ni usar técnicas, metodologías y herramientas de empresas enormes.

Búsqueda móvil ¿qué patrón debería usar?

El diseño en móvil es diferente al diseño en pantallas para escritorio o portátiles. No solo es el tamaño de la pantalla o el dispositivo apuntador y método de entrada, también hay que tomar en cuenta la experiencia de usuario que se espera, la velocidad de Internet y muchas otras cuestiones. Descubre que patrón deberías usar para tu búsqueda en móvil aquí.

EL RINCÓN DE CSS 👨‍💻 
Subrayando texto con scroll down

Con las propiedades existentes de CSS, puedes dar una experiencia de usuario personalizada y sobre todo gratificante, como es este caso de uso de FrontendMasters.

HERRAMIENTA 🛠️ 
Svelte Stepper

Un componente Stepper, es un componente muy común en onboarding y en product dashboards. Svelte Stepper, es un componente que te permitirá crear este tipo de componentes de una forma muy simple.

Baklava Design System

Baklava Design System, es una opción fresca y versátil para crear tu siguiente proyecto Web que tiene todo lo que necesitas para crear blogs, product dashboards y hasta ecommerce systems.

VIDEO 📹️ 
Como hacer un gran framework mejor

En esta entrevista el creador de Svelte, Rich Harris, nos habla de la filosofía, características y futuro del framework. Quizás después de ver este video terminas por enamorarte de Rich, digo de Svelte. 🤭 

LANZAMIENTO 🚀 
React Cosmos v6.0

React Cosmos, es una herramienta para probar y desarrollar componentes UI React de forma isolada. O en otras palabras, es una herramienta para que hagas tu component library sin que tengas que preocuparte por temas de organización, construcción y administración y solo te dediques a hacer frontend.

UN DÍA COMO HOY 🗓️ 

El 24 de febrero de 1955, nace en San Francisco, Estados Unidos, Steven Paul Jobs, fue empresario y magnate del negocio del sector informático, de la industria del entretenimiento estadounidense, cofundador y CEO de Apple.
En 1976, Steve Jobs funda Apple junto a Steve Wozniak en el garage de su casa.
A los 26 años ya era millonario gracias a la exitosa salida a bolsa de su compañía Apple.
En 1984, lanza Macintosh 128K,  el primer ordenador personal que se comercializó exitosamente que usaba interfaz gráfica de usuario (GUI) y un ratón en lugar de línea de comandos.
En 1985, fue despedido de Apple por problemas con la directiva, vendió todas sus acciones, salvo una.
En 1985, funda NeXT, empresa que desarrolló y fabricó una serie de estaciones de trabajo destinadas a la educación superior y las empresas. Tim Berner-Lee desarrolló su primer navegador web en una NeXT.
El 03 de febrero de 1986 pagó US$5 millones a George Lucas e invirtió $5 millones de dólares de capital para comprar The Graphics Group (una división de LucasFilms) y funda Pixar.
Steve Jobs y Pixar revolucionaron la industria de animación con el lanzamiento de Toy Story. La integración de Pixar con Disney convirtió a Jobs en el máximo accionista individual de The Walt Disney Company.
En 1997, Apple se encontraba en una grave situación y decide comprar NeXT la empresa de Jobs y así éste retorna a Apple fue su CEO hasta el 24 de agosto de 2011.
En su segunda etapa en Apple cambió el modelo de negocio de la industria musical con productos como el iPod y iTunes en 2001, revolucionó el mercado de la telefonía móvil con el iPhone en 2007 y creó el mercado de las tablets con el iPad 2010.
En 2011, el año de su muerte, su fortuna se valoraba en US$8.300 millones y ocupaba el puesto 110 en la lista de grandes fortunas de la revista Forbes.
Según el registro de patentes de los Estados Unidos, 317 patentes de Jobs figuran a nombre de Apple.

VACANTE 💼 
Front End Engineer, Device OS

Ubicación: Ciudad de México
Empresa: Amazon Lab126
Requisitos: Más de 5 años de experiencia en desarrollo de software profesional sin prácticas. Más de 5 años de programación con al menos un lenguaje de programación de software. Más de 5 años de experiencia líder en diseño o arquitectura (patrones de diseño, confiabilidad y escalamiento) de sistemas nuevos y existentes. Experiencia como mentor, líder tecnológico o líder de un equipo de ingeniería.

Como parte de la organización Device OS, podrá interactuar y trabajar con varios equipos para desarrollar un ecosistema de extremo a extremo que abarque la concepción del producto hasta el envío en la gran cantidad de dispositivos de Amazon en el campo.

Entra aquí para conocer más acerca de esta vacante. 🤞

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

Para completar el desafío de crear una tarjeta de presentación interactiva con HTML y CSS, aquí tienes un ejemplo básico de cómo podrías implementarlo. Este ejemplo muestra información básica en el estado normal y revela detalles adicionales cuando pasas el cursor sobre la tarjeta.

HTML:

<div class="tarjeta">
    <div class="informacion-basica">
        <img src="avatar.png" alt="Avatar" class="avatar">
        <h2>Jane Doe</h2>
        <p>Desarrolladora Web</p>
    </div>
    <div class="informacion-adicional">
        <p>Email: [email protected]</p>
        <p>Teléfono: +123456789</p>
        <a href="#">LinkedIn</a> | <a href="#">Twitter</a>
    </div>
</div>

CSS:

.tarjeta {
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.informacion-basica {
    text-align: center;
    padding: 20px;
}

.avatar {
    width: 100px;
    border-radius: 50%;
}

.informacion-adicional {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f8f8f8;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    text-align: center;
    padding: 20px;
}

.tarjeta:hover .informacion-adicional {
    transform: translateY(0);
}

h2, p {
    margin: 10px 0;
}

a {
    text-decoration: none;
    color: #007bff;
}

Explicación:

• La tarjeta tiene dos principales divisiones: .informacion-basica y .informacion-adicional.

• La .informacion-adicional se oculta inicialmente fuera de la vista (usando transform: translateY(100%);) y se revela al pasar el cursor sobre la tarjeta (usando :hover para cambiar transform a translateY(0);).

• Las transiciones suaves se logran con la propiedad transition.

CHALLENGE DE HOY ⚔️ 
Sistema de Rutas para una Aplicación de Una Sola Página (SPA)

Las SPA son aplicaciones web que cargan una sola página HTML y dinámicamente actualizan el contenido según la interacción del usuario, mejorando la experiencia del usuario al evitar recargas completas de la página. Tu tarea es implementar un sistema de rutas básico que cambie el contenido mostrado al usuario según la URL sin recargar la página.

Tareas a realizar:

1. Implementa una función iniciarEnrutador que configure el enrutamiento en la carga de la página y en los cambios de la URL.

2. Define un conjunto de rutas y los componentes (o contenido) asociados a cada ruta.

3. La función debe escuchar cambios en la URL (por ejemplo, cuando el usuario hace clic en enlaces dentro de tu SPA) y mostrar el contenido correspondiente sin recargar la página.

4. Asegúrate de que al cambiar la URL manualmente o al usar los botones de adelante y atrás del navegador, el contenido se actualice adecuadamente.

Ejemplo de configuración de rutas:

const rutas = {
    '/': 'Inicio',
    '/acerca': 'Acerca de',
    '/contacto': 'Contacto'
};

Puedes apoyarte de este código:

function iniciarEnrutador() {
    // Configurar el enrutador aquí
}

// Definir las rutas y el contenido asociado
const rutas = {
    '/': 'Inicio',
    '/acerca': 'Acerca de',
    '/contacto': 'Contacto'
};

document.addEventListener('DOMContentLoaded', iniciarEnrutador);

• Utiliza el objeto window.location para obtener la ruta actual y actualizar el contenido.

• Considera usar window.addEventListener para escuchar el evento popstate, que se dispara cuando hay cambios en la URL.

• Para cambiar la vista sin recargar, mira hacia las funciones history.pushState y history.replaceState.

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 👀