#175 La maquinaria de Marketing de Tailwind

La maquinaria de Marketing de Tailwind

El mensaje de TailwindCSS, o al menos el de su fundador, ha cambiado. ¿Eres fan de esta tecnología? Quizás quieras leer con detenimiento este artículo y hacer una lista de pros y contras para usarlo en presentes y futuros proyectos. Podrán decir lo que quieran, pero CSS es resiliente y su adopción no pone restricciones.

Los navegadores que tenemos hoy en día

Hay muchos navegadores ahi afuera disponibles para la mayoría de usuarios, excepto quizás Safari, pero tienen sus ventajas y desventajas. En el contexto actual donde el hype de AI esta reemplazando el de las criptomonedas y la web3, muchos navegadores fijaron el rumbo de sus esfuerzos y ahora hay muchos usuarios sin saber a dónde ir. Y tú, ¿que buscas en un navegador web hoy en día?

Lo bueno, lo malo, los componentes web

Quizás hay demasiada confusión respecto al tema de Web Components porque cada framework JavaScript maneja un concepto parecido de Component, y dado que son herramientas para Web, son también Web Components. Por eso hay que hacer la distinción de los que son nativos y los que necesitan una biblioteca o framework JavaScript y cuales son sus ventajas y desventajas.

INISPIRACIÓN 💡 
Design Trends para 2024

¿Quieres saber todo lo que esta en tendencia para la Web este año? Checa este sitio que seguro te va a inspirar.

HERRAMIENTA 🛠️ 
Dualite

¿Quieres acelerar tu proceso de desarrollo de software? Checa este plugin para exportar de Figma a código. Una de sus ventajas es que también te da código React.js, entonces si estas buscando algo así tienes que probar este plugin.

JSR, El Registro JavaScript

Tenemos otro registro para bibliotecas JavaScript que es compatible con npm, yarn y pnpm, ademas de que funciona para Node, Deno, Bun y esta pensado para los tiempos modernos, por eso esta pensado para TypeScript y ESModules.

GUÍA 📖 
Como usar favicones en 2024

Es 2024 ¿cómo añades faviconos a tu sitio o app web? 🤔 Quizás usas un generador como favicongenerator u otro parecido. ¿Te gustaría a aprender a generar por tu cuenta los archivos que necesitas para que tengas mejor control de lo que estas haciendo? Mira la siguiente guía con los 6 artículos que necesitas.

UN DÍA COMO HOY 🗓️ 

El 04 de marzo de 1983, nace en Massachusetts, Andrew W. "Drew" Houston, empresario de Internet el cual es más conocido por ser el fundador y CEO de Dropbox, un servicio de backup y almacenamiento en línea.
Houston, obtuvo una licenciatura en Ciencias de la Computación del Instituto Tecnológico de Massachusetts, donde fue miembro de la fraternidad Phi Delta Theta.
Allí conoció a Arash Ferdowsi, que más tarde pasaría a ser co-fundador y CTO de Dropbox.
Houston, fue nombrado uno de los “empresarios más prometedores de menos de 30 años” por Business Week.
Dropbox ha sido promocionado como la inversión de más éxito por “Y Combinator” hasta la fecha.
Houston también fue nombrada entre los “30 principales empresarios menores de 30” por inc.com.
Dropbox ha sido llamado uno de los 20 mejores startups de Silicon Valley.

VACANTE 💼 
Frontend Developer

Ubicación: México (Remoto)
Empresa: excelia
Requisitos: Dominio de HTML, CSS y Bootstrap para el desarrollo de interfaces atractivas y responsivas. Experiencia sólida en programación con JavaScript y desarrollo de aplicaciones utilizando React. Conocimientos en Frameworks de pruebas automatizadas para garantizar la calidad del código y la funcionalidad del producto final.
Beneficios: La oportunidad de formar parte de un equipo dinámico y apasionado. Colaboración en proyectos innovadores y desafiantes. Desarrollo profesional continuo. Paquete de compensación competitivo acorde a la experiencia y habilidades del candidato.

Para poder conocer más sobre esta vacante, entra aquí. 🤞 

CHALLENGE DE HOY ⚔️ 
Crea un Menú de Navegación Responsivo

Tu tarea es crear un menú de navegación responsivo que se adapte a diferentes tamaños de pantalla, utilizando solo CSS y HTML. Este menú deberá mostrar los enlaces de navegación en línea en pantallas grandes (por ejemplo, desktops) y convertirse en un menú de hamburguesa (icono de tres líneas horizontales) en pantallas más pequeñas (por ejemplo, móviles). Al hacer clic en el icono de hamburguesa, los enlaces de navegación deben expandirse verticalmente.

Requisitos:

1. Utiliza HTML semántico para la estructura del menú.

2. Implementa CSS para estilos y responsividad, usando media queries para adaptar el diseño según el tamaño de la pantalla.

3. Asegúrate de que el menú de hamburguesa solo aparezca en pantallas pequeñas (menos de 768px de ancho) y que los enlaces de navegación se muestren en línea en pantallas más grandes.

4. Implementa una transición suave para la expansión de los enlaces de navegación cuando el menú de hamburguesa esté activo.

Código de Ejemplo para Empezar:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menú Responsivo</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>

<nav>
    <div id="menuIcono">☰</div>
    <ul id="listaMenu">
        <li><a href="#

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 👀