Reto: Entra a la fiesta solo si llevas sombrero (usa la IA sin pagar a OpenAI)
.#295 · Además: Adblocker para YouTube, tutorial de HTMX, ahorcado en JavaScript, componentes y plantillas
Te confieso que apuesto firmemente por la evolución como programador a base de hacer proyectos.
✨ Son más valiosos para tu portfolio y tu baúl de conocimientos que cualquier otra cosa.
Por eso el envío de hoy (y solo hoy) es este experimento diferente a lo de siempre.
Quiero proponerte una idea de proyecto moderno.
Quiero que te emociones, te vengas arriba y pongas las manos sobre el teclado :)
🎩 Estamos montando una gran fiesta malandriner
Estarás invitado/a, pero, habrá una condición severa: Tienes que llevar sombrero.
Si no lo haces, recibirás un “amistoso calambrazo” ⚡️ y no podrás pasar.
🏁 Tu misión es crear una webapp para controlar la entrada.
👀 Muy pronto lo tendréis resuelto en el canal de YouTube de Web Reactiva.
Paso 1: Plantilla
Este es el wireframe:
👉 Si quieres más datos, en este enlace encontrarás:
Las plantillas para empezar (anda que no te lo pongo fácil ;)
El reto explicado con muchas más pistas
Paso 2: A la webcam tenemos que llegar
Para no dejar escapar a nadie sin algo puesto sobre la cabeza tendremos que capturar su imagen.
Lo más sencillo es activar la webcam y que la web sea un espejo de los que están frente a ella.
🔎 Pista: No hacen falta frameworks, con el JavaScript del navegador es posible.
Paso 3. Procesar vídeo es complicado
Tenemos el tiempo real de la imagen en movimiento, pero, ¡¡es muy difícil que la gente se quede quieta!!
Van a una fiesta, así que tendrás que apañártelas para capturar imágenes estáticas.
🔎 Pista: Es complicado, lo sé. Si no te sale usa una imagen estática, no pasa nada.
(Seguimos más abajo ⤵️)
🔰 PARA APRENDER
Aprende JavaScript con el juego del ahorcado
Dulce Amaya explica paso a paso cómo crear este juego con Vanilla JavaScript. Y si te pierdes consulta su curso abierto sobre todas las bases de JavaScript.
Intro a HTMX, la nueva era en el desarrollo web
Sin dependencias de frameworks HTMX evoluciona el AJAX para trabajar con peticiones o WebSockets. Es probable que tengas un 🤯
Explicando SSH al taxista
Realmente Jessica Wang se lo explica a su conductor/a de Uber, pero es igual de efectivo si quieres comprender de forma sencilla qué es el SSH con dibujos y gorros de cocina.
⚡️ ASOMBROSICO
¿De verdad la web puede hacer eso?
Un showcase de Google dedicado a ver las maravillas que puedes hacer sin salir de la web: manejar ficheros, trabajar con gráficos grandes, PWA o hacer más fácil un login seguro.
🤖 IA PRÁCTICA
Ollama UI, una alternativa a ChatGPT
Ollama nos simplifica la vida para tener un LLM en nuestro ordenador. Con esta capa visual web tendrás chats con la IA sin conectar internet.
🧡 Recurso recomendado por José Arturo
⤴️ Paso 4. La IA al rescate, ¡y gratis!
Existen modelos especializados que permiten hacer cosas mágicas. El que usaremos es de tipo “clasificador” y entiende las cosas que aparecen en pantalla.
Nada de OpenAI ni de Gemini. Gracias a transformers lo tienes directo en el navegador y en open source.
No hace falta servidor, no hay que conectarse a nada, no guardamos nada.
🔎 Pista importante: Mira la demo y elige a Messi (fíjate en la captura). Luego pulsa en “Generate” y verás la magia.
Paso 5. Analiza y reparte calambrazos
¡Casi lo tienes!
Ahora procesa la imagen para que detecte un “hat” con una alta probabilidad (por lo menos un 0,8) y si hay sombrero muéstralo en pantalla con una señal en verde.
Si no tiene sombrero, basta con un mensaje en rojo. Lo de los 300 mil volitos lo dejamos para el próximo reto ;)
🔎 Pista: Puedes consultar esta demo para ver como encaja el código.
💬 Si te vienes arriba con el reto, cuéntamelo en los comentarios ;)
↗️ ¿Te gustaría recibir un reto como este por email cada semana?
Para ti solo es un clic. Para mi es un montón de valor. Gracias.
🛠 HERRAMIENTAS
FadBlock, un bloqueador de anuncios para YouTube
Enlazo al código de esta extensión para varios navegadores que utiliza la Mutation Observer para observar cambios en la web y filtrar los ads.
🎢 CARRERA PROFESIONAL
Mejora la comunicación en tu equipo con un 'Manager's ReadMe'
Proporciona consejos sobre cómo los líderes pueden hacer que sus equipos entiendan mejor sus pensamientos y expectativas. La gente no puede leer tu mente, pero si tu readme 😉
Cómo imprimir recetas directamente de Tiktok o Reels
Artículo que explica cómo de una idea se monta un pequeño servicio. Usando la IA pero aportando un valor claro para que los vídeos cortos sean más útiles.
⚓️ BACKEND
Loco, un framework minimalista en Rust
Centrado en una sola persona y en la productividad. Gestión de servicios, datos, emails, tareas en background y CLI incluidos.
Dropbase, una alternativa a Retool
Plataforma para desarrollar aplicaciones internas con SQL y Python rápidamente con una UI fácil de montar.
🎨 PLANTILLAS
Más templates con TW-Elements
Amplia colección de componentes, secciones y plantillas basadas en Tailwind CSS. Integración con JavaScript para dotar de vida a los componentes.
Emojis vectoriales con una línea de código
Emoji Cloud te permite añadir gráficos vectoriales en tu web sin ningún esfuerzo, solo con una dependencia a su librería
🧡 Comunidad Malandriner
En nuestra comunidad tenemos un grupo de telegram productivo. ¿Cómoooo? ¡Eso es imposible!
Pues verás, ya lo era porque:
✔ Compartimos recursos, ofertas, proyectos y sugerencias.
✔ La gente con dudas obtiene una buena respuesta.
✔ Enviamos fotos de comidas pantagruélicas.
Ahora también tenemos a RESUMEITOR
Bajo su chapa de hojalata esconde unos mecanismos que, tras leerse la conversación del grupo, la devuelve al día siguiente en forma de resumen.
Resumeitor funciona con Make, una hoja de cálculo, una pizca de código y GPT-3.5.
💪🏼 Productivo al 100% para enchufarse.
Esta es una pieza más para que, si te sientes así:
❌ Tienes 100 cursos de Udemy sin hacer
❌ No tienes ni tiempo ni foco
❌ Estás más solo que un paraguas
Te proponga algo diferente:
✅ Formación práctica y sin complejos
✅ Foco en aprender y mejorar
✅ Rodeado de la Comunidad Malandriner
PD: Montarte un avión roto en África para volver a casa, ¿te atreverías? Tranqui, Noel Philips lo hace por ti en YT.
#reactivisima295
Reto casi superado. Falta mejorar algunos puntos. Pero ya es funcional https://retohatchecker.web.app/