1  🚀 Playground Interactivo

¡Bienvenido al Playground Interactivo!

Esta sección te permite experimentar directamente con las herramientas CLI sin salir del navegador. Aquí puedes:

• ✏️ Editar código en tiempo real
• ▶️ Ejecutar comandos de forma simulada
  
• 💾 Guardar snippets para uso posterior
• 🔗 Conectar con API local para funcionalidades avanzadas

1.1 Funcionalidades Interactivas

1.1.1 🎯 Toolbar Flotante

En la parte derecha de la pantalla encontrarás un toolbar flotante con estas opciones:

Botón	Función	Atajo
	Editar código en línea	Ctrl/Cmd + E
	Ejecutar código simulado	Ctrl/Cmd + R
	Guardar snippet	Ctrl/Cmd + S
	Probar con API local	-

1.1.2 📝 Edición de Código

Cada bloque de código en esta guía es completamente editable. Simplemente:

1. Haz clic en el botón de cualquier bloque de código
2. Modifica el código según tus necesidades
3. Haz clic en “Aplicar” para ver los cambios

Ejemplo interactivo:

# Lista archivos con eza (modificable)
eza -la --icons --git

1.1.3 ⚡ Ejecución Simulada

Puedes ejecutar comandos de forma simulada para ver su estructura y salida esperada:

# Buscar archivos con ripgrep
rg "función" --type py

1.1.4 💾 Gestión de Snippets

Guarda tus comandos favoritos y configuraciones personalizadas:

# Tu configuración personalizada de git
git config --global user.name "Tu Nombre"
git config --global user.email "tu.email@ejemplo.com"

1.2 🔗 Integración con el Ecosistema

1.2.1 API Local

Si tienes el servidor API ejecutándose (npm run start en api-server/), podrás:

• 🔍 Buscar herramientas en tiempo real
• 📊 Ver estadísticas de uso
• 🎯 Obtener recomendaciones personalizadas

Iniciar API:

cd api-server
npm install
npm start

1.2.2 CLI Offline

Usa la herramienta CLI local para consultas rápidas:

# Buscar herramientas de desarrollo
./scripts/cli-guide search desarrollo

# Modo interactivo con fzf
./scripts/cli-guide interactive

1.2.3 Dashboard Web

Accede al dashboard interactivo:

# Abrir dashboard en el navegador
open tools-explorer.html

1.3 🎨 Ejemplos Interactivos Avanzados

1.3.1 Combinaciones Poderosas

# Pipeline complejo: buscar, filtrar y procesar
rg "export" --type js | fzf --preview 'head -20 {}' | xargs -I {} head -5 {}

1.3.2 Configuración de Desarrollo

# Setup completo de entorno de desarrollo
brew install node python@3.11 git gh
gh auth login
npm config set prefix ~/.npm-global

1.3.3 Análisis de Sistema

# Monitoreo completo del sistema
btop & 
du -h ~ | head -20
df -h

1.4 🎯 Consejos de Uso

Mejores Prácticas

1. Experimenta libremente - todos los cambios son temporales
2. Guarda snippets útiles - para reutilizar configuraciones
3. Usa atajos de teclado - para mayor productividad
4. Conecta la API - para funcionalidades completas

1.4.1 Personalización

Puedes personalizar la experiencia:

• Temas: Cambia entre modo claro y oscuro
• Fuentes: Optimizadas para programación
• Atajos: Personaliza según tus preferencias

1.4.2 Resolución de Problemas

Si algo no funciona:

1. Recarga la página
2. Verifica que JavaScript esté habilitado
3. Comprueba la consola del navegador
4. Asegúrate de que la API local esté ejecutándose

1.5 🚀 Próximos Pasos

Una vez que domines el playground:

1. Explora las secciones temáticas del libro
2. Prueba combinaciones avanzadas de herramientas
3. Contribuye con tus propios ejemplos
4. Comparte configuraciones útiles con la comunidad

---

¡Importante!

Este playground funciona mejor con:

• Navegadores modernos (Chrome, Firefox, Safari)
• JavaScript habilitado
• API local ejecutándose (opcional pero recomendado)

¡Disfruta explorando y experimentando con las herramientas CLI! 🎉