midudev! Mi objetivo es mejorar la empleabilidad de la comunidad de Programación Hispana y el acceso a contenido de calidad sobre Desarrollo Web.
#100Escritorio web
Un escritorio con ventanas desde el que abrir todos los proyectos
- Gestión de ventanas
- Pointer Events
- iframes
100proyectosde JavaScript
#100
#99Juego incremental
Haz click, compra mejoras y mira cómo crecen tus números
- Game loop con tiempo real
- Guardado en localStorage
- Notación compacta con Intl
#98Motor 3D con raycasting
Crea un laberinto en 3D como Wolfenstein 3D con raycasting
- Raycasting
- Trigonometría
- Canvas
#97Visor de JSON
Formatea, valida y explora cualquier JSON como un árbol
- JSON.parse y stringify
- Renderizado recursivo
- Elemento <details>
#96Notificaciones toast
Un sistema de notificaciones elegante, apilable y accesible
- Web Animations API
- aria-live
- Colas y temporizadores
#95Pizarra infinita
Dibuja en un lienzo infinito con zoom y desplazamiento
- Transformaciones de coordenadas
- Evento wheel
- Pointer Events
#94Analizador de texto
Cuenta palabras, frases y calcula el tiempo de lectura de cualquier texto
- Intl.Segmenter
- Estructura Map
- Expresiones regulares Unicode
#93Calculadora sin eval
Una calculadora científica que interpreta expresiones sin usar eval
- Tokenizador
- Algoritmo Shunting-yard
- Notación polaca inversa
#92Hundir la flota
Hunde la flota enemiga antes de que la IA hunda la tuya
- IA de búsqueda (hunt/target)
- Matrices
- Colocación aleatoria
#91Calendario
Un calendario mensual con eventos hecho solo con la API Date
- Objeto Date
- Intl.DateTimeFormat
- CSS Grid
#90Tester de mandos
Conecta tu mando y comprueba todos sus botones y joysticks
- Gamepad API
- Polling con requestAnimationFrame
- Vibración del mando
#89Reproductor de vídeo
Un reproductor de vídeo con controles personalizados
- HTMLMediaElement
- Fullscreen API
- Picture-in-Picture
#88Efectos con el ratón
Efectos interactivos de tarjetas y botones que siguen al cursor
- getBoundingClientRect
- CSS Custom Properties
- Transformaciones 3D
#87Galería con View Transitions
Transiciones animadas entre vistas con una sola línea de JavaScript
- View Transitions API
- view-transition-name
- Animaciones
#86Buscador de Wikipedia
Busca en Wikipedia con autocompletado mientras escribes
- Debounce
- AbortController
- Navegación con teclado
#85Física de pelotas
Lanza pelotas que rebotan y chocan entre sí con física real
- Colisiones elásticas
- Gravedad
- Vectores
#84Mensajes cifrados
Cifra mensajes con contraseña usando criptografía real del navegador
- Web Crypto API
- AES-GCM y PBKDF2
- TextEncoder y Base64
#83Sistema solar
Un sistema solar animado con las órbitas de los planetas
- Trigonometría
- Movimiento orbital
- Canvas
#82Generador de memes
Crea memes con tus imágenes y descárgalos al instante
- Texto en Canvas
- Arrastrar elementos
- Descarga de archivos
#81Árbol binario de búsqueda
Visualiza cómo se insertan, buscan y borran nodos en un árbol binario
- Estructuras de datos
- Recursión
- SVG dinámico
#80Grabador de pantalla
Graba tu pantalla con audio y descarga el vídeo sin instalar nada
- getDisplayMedia
- MediaRecorder
- Blobs
#79Generador de degradados
Crea degradados CSS preciosos y copia el código
- CSS Custom Properties
- Inputs de color y rango
- Clipboard API
#78Torres de Hanói
Resuelve el clásico rompecabezas o mira cómo lo resuelve la recursión
- Recursión
- Generadores
- Drag & Drop
#77Lector de Hacker News
Lee las noticias más populares de Hacker News
- Promise.allSettled
- Intl.RelativeTimeFormat
- Caché de datos
#76Chat entre pestañas
Comunica varias pestañas del navegador sin servidor
- BroadcastChannel API
- Evento storage
- Page Visibility API
#75Validación de formularios
Valida formularios con la API nativa del navegador y mensajes a medida
- Constraint Validation API
- setCustomValidity
- Algoritmo de Luhn
#74
#73Afinador de guitarra
Afina tu guitarra usando el micrófono del navegador
- Detección de tono
- Autocorrelación
- getUserMedia
#72
#71Lista virtual
Renderiza 100.000 elementos sin que tu navegador se congele
- Virtualización
- Rendimiento del DOM
- Eventos de scroll
#70Dino Runner
El juego del dinosaurio de Chrome cuando no hay internet
- Delta time
- Dificultad progresiva
- Sprites con código
#69Probador de RegExp
Escribe expresiones regulares y mira las coincidencias al instante
- Expresiones regulares
- matchAll
- Grupos con nombre
#68Notas offline (PWA)
Una app de notas instalable que funciona sin conexión
- Service Workers
- Cache API
- Web App Manifest
#67Fuegos artificiales
Lanza fuegos artificiales con un click
- Física de partículas
- globalCompositeOperation
- Canvas
#66
#65Puzzle deslizante
Ordena las piezas del clásico puzzle del 15
- Inversiones y resolubilidad
- background-position
- Animación FLIP
#64Relojes del mundo
Consulta la hora en cualquier ciudad del mundo con relojes analógicos
- Zonas horarias con Intl
- Trigonometría
- Transformaciones CSS
#63Reactividad con Proxy
Entiende cómo funcionan Vue y los signals creando tu propio sistema reactivo
- Proxy y Reflect
- Signals y effects
- Data binding
#62Código Morse
Traduce texto a código Morse y escúchalo, o tecléalo tú mismo
- Estructura Map
- Web Audio API
- Vibration API
#61
#60
#59Fractal de Mandelbrot
Haz zoom infinito en el famoso fractal de Mandelbrot
- Números complejos
- Web Workers
- ImageData
#58Explorador de países
Busca, filtra y ordena todos los países del mundo
- filter, sort y reduce
- Consumo de APIs
- Intl.DisplayNames
#57
#56Efectos de texto
Efectos de máquina de escribir, scramble y más para tus textos
- requestAnimationFrame
- Promesas
- Intl.Segmenter
#55Control de gastos
Registra tus ingresos y gastos y visualízalos en un gráfico
- IndexedDB
- Gráficos SVG
- Intl.NumberFormat
#54Lluvia de Matrix
Recrea el icónico efecto de lluvia de código de Matrix
- Canvas
- Efecto de rastro
- requestAnimationFrame
#53Router SPA
Construye tu propio enrutador para aplicaciones de una sola página
- History API
- Evento popstate
- URLPattern
#52
#51Compresor de imágenes
Reduce el peso de tus imágenes sin subirlas a ningún servidor
- File API
- canvas.toBlob
- Object URLs
#50Piano sintetizador
Toca el piano con el teclado del ordenador y moldea el sonido
- OscillatorNode
- Envolvente ADSR
- Frecuencias musicales
#49
#48Paleta de comandos
Una paleta de comandos al estilo VS Code que se abre con Cmd+K
- Atajos de teclado
- Elemento <dialog>
- Búsqueda fuzzy
#47Buscador de caminos A*
Dibuja muros y mira cómo el algoritmo A* encuentra el camino más corto
- Algoritmo A*
- Heurísticas
- Colas de prioridad
#46Firma digital
Firma con el ratón, el dedo o un lápiz y descarga tu firma
- Pointer Events
- Curvas de Bézier
- devicePixelRatio
#45
#44Perfil de GitHub
Busca cualquier usuario de GitHub y descubre sus repositorios
- Fetch API
- Errores HTTP
- Cabeceras de respuesta
#43Quiz de JavaScript
¿Cuánto sabes de JavaScript? Pon a prueba tus conocimientos
- ES Modules
- Máquina de estados
- Barajar arrays
#42Partículas interactivas
Un campo de partículas que reacciona al movimiento del ratón
- Clases
- Vectores
- Canvas
#41Simón dice
Memoriza y repite la secuencia de colores y sonidos
- async/await
- Promesas y temporizadores
- Web Audio API
#40Conversor de divisas
Convierte entre monedas con tipos de cambio actualizados
- Intl.NumberFormat
- Fetch API
- Caché de peticiones
#39Laberintos
Genera laberintos aleatorios y encuentra la salida automáticamente
- Backtracking (DFS)
- Búsqueda en anchura (BFS)
- Canvas
#38Web Components
Crea tus propios elementos HTML reutilizables sin frameworks
- Custom Elements
- Shadow DOM
- Slots
#37
#36
#35Tablero Kanban
Organiza tus tareas arrastrándolas entre columnas
- Drag & Drop con Pointer Events
- localStorage
- Estado y renderizado
#34Flappy Bird
Esquiva las tuberías aleteando en este juego adictivo
- Gravedad y velocidad
- Colisiones AABB
- Delta time
#33Visualizador de audio
Visualiza el sonido de tu micrófono o de un archivo de audio en tiempo real
- AnalyserNode
- getUserMedia
- Canvas
#32Comparador de textos
Encuentra las diferencias entre dos textos como hace Git
- Programación dinámica
- Algoritmo LCS
- Manipulación del DOM
#31Buscaminas
El mítico Buscaminas de Windows con sus tres niveles de dificultad
- Recursión (flood fill)
- Evento contextmenu
- Matrices
#30Selector de emojis
Un selector de emojis nativo usando la Popover API
- Popover API
- Delegación de eventos
- localStorage
#29
#28Editor de Pixel Art
Dibuja pixel art y exporta tu creación como imagen PNG
- Pointer Events
- CSS Grid
- Exportar Canvas a PNG
#27
#26Scroll infinito
Carga contenido automáticamente al llegar al final de la página
- IntersectionObserver
- Paginación de APIs
- Fetch API
#25Machaca el topo
Golpea a los topos antes de que se escondan
- setTimeout
- Delegación de eventos
- Animaciones CSS
#24Generador de paletas
Crea paletas de colores armoniosas pulsando la barra espaciadora
- Modelo de color HSL
- Clipboard API
- URL como estado
#23Visualizador de ordenación
Observa paso a paso cómo funcionan los algoritmos de ordenación
- Generadores (function*)
- Algoritmos de ordenación
- async/await
#22Editor de Markdown
Escribe Markdown y míralo convertido a HTML en tiempo real
- Expresiones regulares
- Parsers
- localStorage
#21Tres en raya imbatible
Juega contra una IA que nunca pierde gracias al algoritmo minimax
- Algoritmo Minimax
- Recursión
- Árboles de decisión
#20Batería virtual
Toca la batería con el teclado. Sonidos sintetizados sin archivos de audio
- Web Audio API
- Síntesis de sonido
- Eventos de teclado
#19App del tiempo
Consulta el tiempo de tu ubicación o de cualquier ciudad
- Geolocation API
- Fetch API
- async/await
#18Juego de la vida
Autómata celular de Conway donde patrones simples crean vida compleja
- Matrices 2D
- Autómatas celulares
- Canvas
#17Generador de contraseñas
Genera contraseñas seguras de verdad y mide su fortaleza
- crypto.getRandomValues
- Entropía
- Clipboard API
#16Temporizador Pomodoro
Gestiona tu tiempo con la técnica Pomodoro y recibe notificaciones
- setInterval y deriva del tiempo
- Notifications API
- document.title
#15Juego de memoria
Encuentra todas las parejas de cartas con el menor número de movimientos
- Transformaciones 3D en CSS
- Algoritmo Fisher-Yates
- Temporizadores
#14
#13Google Translate
Crea tu propio traductor de Google con HTML, CSS y JavaScript
- IA local
- Reconocimiento de voz
- SpeechSynthesis
#12
#11
#10Stack Game
Juego donde hay que apilar las piezas verticalmente
- Canvas
- Lógica de programación
- Eventos de teclado
#09
#08Hojas de cálculo
Crea tu propio Excel sin dependencias y funcional
- Tablas
- Eventos de Input: focus y blur
- Eval
#07Tier Maker
Arrastra y suelta las imágenes para crear tus propias listas de niveles
- Drag & Drop
- Input de imágenes
- CSS Custom Properties
#06Tetris en Canvas
Resolvemos una prueba técnica que te propone crear el Tetris en 40 minutos
- Canvas
- Eventos de teclado
- Lógica de programación
#05Buscar info de IP
Llama a una API para obtener información de cualquier IP y muestra la información en pantalla
- Fetch API
- Formularios
- Asincronía
#04
#03Reto de Mecanografía
Pon a prueba tus habilidades de mecanografía con este reto
- DOM
- Eventos de teclado
- Manejo de clases
- Optimización selectores
#02Arkanoid Game
Juego mítico y clásico de Arkanoid para controlar con teclado
- Dibujar en Canvas
- Eventos de teclado
- RequestAnimationFrame
- Sprites
#01Tinder Swipe
Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript.
- DOM
- Animaciones con gestos
- Eventos de mouse y touch
- Transiciones CSS
