Ya sea que sea un programador principiante o un desarrollador experto, los juegos de código son útiles para compartir y aprender con otros.
Un área de juegos de código es un servicio en línea donde puede escribir, compilar (o ejecutar) y compartir código con otros. También te dan la posibilidad de bifurcar y jugar con los códigos de otros.
Si está aprendiendo desarrollo web y practicando sus habilidades de HTML o CSS, sería útil usar un área de juegos de código para crear páginas web simples en línea. Además, podrías aprovechar proyectos tendencia en esas plataformas y tomarlos como recursos de aprendizaje.
Por otro lado, si eres un desarrollador web profesional y quieres mostrar tu trabajo, los juegos de código son el lugar perfecto para hacerlo.
La mejor parte es que la mayoría de los juegos de código tienen un nivel gratuito y puede incrustar los resultados del código en su sitio web.
¡Repasemos algunos de ellos!
Tabla de contenido
JSFiddle
JSFiddle es un patio de recreo de código donde puede probar fragmentos de HTML, CSS y Javascript. Provino de una aplicación de prueba de concepto en 2009 y ahora es uno de los juegos de código más grandes que existen.
Puede crear una cuenta gratuita, guardar todos sus violines y también bifurcar los fragmentos de otras personas.
Otra cosa impresionante de JSFiddle son las sesiones de colaboración. Puede crear una sesión de chat de audio mientras codifica en el violín.
Si eres un bloguero que quiere incrustar el resultado de fragmentos de código y también su código fuente, JSFiddle sería una excelente opción.
Por supuesto, en el momento de la escritura, este patio de juegos de código no es compatible con otros lenguajes de programación populares como Python, Go o PHP, por lo que no puede esperar crear una aplicación de pila completa en él.
Características
- Plataforma de uso gratuito
- Interfaz minimalista
- Compatibilidad con HTML, CSS y JS
- Fork cualquier fragmento de violín público en la plataforma
- Colabore con otras personas mediante el chat de audio directamente en el sitio
- Bueno documentación
Como con la mayoría de estas plataformas, hay un «extra” plan que ayuda a mantenerlos en funcionamiento. Si confía en ellos, debería considerar hacer una copia de seguridad de ellos.
Código abierto
Código abierto no es solo un patio de recreo de código, sino una comunidad de desarrolladores que desean mejorar sus habilidades y compartir el mejor trabajo que puedan.
Por @Yakudoo
Con más de 6 millones de usuarios, es uno de los editores de código en línea más utilizados para el desarrollo de frontend. Si está comenzando a aprender front-end, lo ideal es encontrar ideas y motivación para continuar su viaje de aprendizaje.
¿Qué pasa con la experiencia de desarrollo?
Te puedo decir que Codepen tiene un editor fácil de usar con tres paneles ajustables para codificar en HTML, CSS y JS. Codepen incluye soporte integrado para preprocesadores de Javascript y CSS como Typescript y Sass. Además, si confía en un paquete npm, puede instalarlo desde el panel de configuración.
Características
- Opcional plan profesional
- Editor de código fácil de usar
- Gran comunidad
- La mayoría de los codepens son de código abierto
- El lugar ideal para practicar el desarrollo frontend
CódigoSandbox
La creación de prototipos de un sitio web puede ser una tarea difícil si no tiene la configuración adecuada. Usando CódigoSandbox debería ser una decisión obvia cuando la prioridad es construir sitios web rápidamente.
Como sugiere su nombre, CodeSandbox proporciona un entorno de espacio aislado para el desarrollo de interfaz.
Desde las integraciones de GitHub y las herramientas de depuración hasta una experiencia similar a un código VS personalizable, este patio de juegos de código le brinda todo para comenzar a codificar en segundos.
Si su propósito principal es colaborar, todo lo que necesita es compartir su enlace de sandbox y estará listo para hacer programación en pareja en tiempo real.
Por ejemplo, puede explorar una lista cuidadosamente seleccionada de los mejores cajas de arena.
Podría quedarme sin tiempo para enumerar todas las características de CodeSandbox, así que mencionemos sus increíbles funciones.
Características
- Integración de GitHub
- Basado en el editor Monaco que impulsa el popular editor VScode
- Primera plataforma de colaboración
- Implementar en Vercel o Netlify
- Herramientas de depuración
- Marcos de prueba listos para usar
- soporte npm
soloaprender
La popular plataforma de aprendizaje de codificación soloaprender tiene su propio código de juegos para el desarrollo web.
Para ser honesto, no es un IDE con todas las funciones como los otros editores en línea que hemos visto a lo largo del artículo, pero ofrece un entorno libre de distracciones en el que puede escribir y ejecutar código.
Esto debería ser más que suficiente si recién estás comenzando con la programación.
Otra cosa interesante de Sololearn es la gran comunidad y el soporte para varios lenguajes de programación, lo cual es bastante bueno si quieres jugar con otras tecnologías.
Características
- Gratis para usar con su cuenta Sololearn
- Editor de código en línea simple
- Gran comunidad para compartir tu código.
- Soporte para múltiples idiomas
- Un gran ecosistema con los cursos de Sololearn
En resumen, el patio de recreo de código de Sololearn no incluye batería, pero funciona en lo que debe ser, y si ya eres parte de los millones de sololearners, deberías probarlo.
Codeply
La mejor cosa sobre Codeply es el soporte para múltiples marcos y bibliotecas listos para usar y el editor de código orientado al diseño receptivo.
Si recién está comenzando con un nuevo marco como React, Vue o Angular, Codeply es un excelente lugar para comenzar debido a un conjunto completo de plantillas iniciales y una gran comunidad de más de 40k desarrolladores.
Características
- Plataforma de uso gratuito
- Simple pero directo documentación
- Plan profesional de tarifa única
- Incluye más de 50 bibliotecas.
- Pruebe su maqueta web en diferentes resoluciones de pantalla
Repetir
Repetir es posiblemente el IDE en línea más adecuado para todos los desarrolladores. Incluye literalmente todo lo que necesitaría para crear, desde una simple página de inicio hasta una aplicación web compleja que utiliza cualquier biblioteca JS moderna.
Con Replit, puede codificar en más de 50 idiomas, escribir aplicaciones sincrónicamente con sus pares, probar sus programas, integrarse con GitHub y obtener acceso a una de las comunidades de desarrolladores más grandes que existen.
Literalmente podría quedarme sin papel mencionando todas las características de Replit, así que pasemos a las principales.
Características
- El paquete de inicio gratis o 5$ /mes plan de piratas informáticos
- Modo multijugador (programación en pareja en vivo)
- gran comunidad
- Muchos idiomas compatibles
- Personalización del editor
- Botón Ejecutar: ejecuta el proyecto con acciones personalizables
- almacenamiento secreto
- código alojado
ApilarBlitz
Si no puedes vivir sin el código VS, ApilarBlitz es la opción correcta para usted. Al igual que CodeSandbox, se basa en el editor Monaco, que impulsa este popular editor de código.
¡Simplemente inicie sesión con su cuenta de GitHub y listo! Tienes acceso a un entorno familiar.
Aparte de la experiencia del editor de código, es un patio de recreo bastante sólido. Puede usar plantillas listas para usar para marcos y bibliotecas frontend como React, Vue, Angular, Svelte e Ionic.
Pero la principal peculiaridad de esta herramienta es la capacidad de jugar con marcos de back-end como Node.js, Next.js y GraphQL.
Características
- Plan “Cadete” gratis
- Experiencia de código VS dentro de su navegador. Eso incluye Intellisense, búsqueda de proyectos y más.
- Experiencia de codificación fluida (realmente fluida)
- Editor de código sin conexión (¡Oye! Podría ser útil si te desconectas por un día o dos)
- URL de la aplicación alojada: fácil uso compartido en vivo
Falla
Por último, pero no menos importante, Falla es un entorno de programación colaborativo que facilita la creación de una aplicación web.
¡Tiene una de las interfaces más divertidas para codificar! Solo echa un vistazo:
En caso de que te lo preguntes, sí, tiene un modo oscuro.
Aparte de la hermosa interfaz, Glitch está siendo utilizado por millones debido a su facilidad de uso, programación en vivo y comunidad amigable.
Puede crear cualquier tipo de aplicaciones de pila completa utilizando no solo HTML, CSS y JS, sino también Node.js (Backend), React o once (que no sabía que existía antes de dirigirme a la página Glitches).
Características
- Plan gratuito con opción de actualización
- Desarrolle aplicaciones full-stack en su navegador
- Programación en pareja en vivo
- Interfaz agradable
- Aplicaciones de inicio
- Remezclar (o bifurcar) las aplicaciones públicas de otros
Conclusión
Hoy en día, puede crear cualquier aplicación web por completo utilizando un patio de recreo de código como los que hemos visto anteriormente. Ya no es necesario descargar IDE pesados en su computadora, mientras puede compilar, depurar, probar e implementar sin salir de su navegador web.
Si no está muy seguro acerca de la transición al uso de estas herramientas, ¿por qué no echa un vistazo a los 10 mejores editores de código (aquellos que necesita instalar en su máquina).