Ya sea que sea un programador principiante o un desarrollador experto, los campos de juego de código son útiles para compartir y aprender con otros.
Un patio 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 su HTML o habilidades de CSS, usar un campo de juegos de código sería útil para crear páginas web simples en línea. Además, podría aprovechar los proyectos de tendencias en esas plataformas y tomarlos como recursos de aprendizaje.
Por otro lado, si eres un desarrollador web profesional y quieres mostrar tu trabajo, los parques infantiles de código son el lugar perfecto para hacerlo.
La mejor parte es que la mayoría de las áreas de juego de código tienen un nivel gratuito y puede incrustar los resultados del código en su sitio web.
¡Repasemos algunos de ellos!
JSFiddle
JSFiddle es un campo de juegos de código donde puede probar HTML, CSS y Javascript fragmentos. Provino de una aplicación de prueba de concepto en 2009 y ahora es uno de los campos de juego 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 blogger que quiere incrustar el resultado de los fragmentos de código y también su código fuente, JSFiddle sería una excelente opción.
Por supuesto, al momento de escribir, este campo de código no es compatible con otros lenguajes de programación populares como Python, Goo PHP, por lo que no puede esperar construir un aplicación de pila completa en ella.
Caracteristicas
- Plataforma de uso gratuito
- Interfaz minimalista
- Soporte para HTML, CSS y JS
- Bifurca cualquier fragmento de violín público en la plataforma
- Colaborar con otras personas mediante el chat de audio directamente en el sitio
- Bueno documentación
Codepen
Codepen no es solo un campo de juegos de código, sino una comunidad de desarrolladores que desean mejorar sus habilidades y compartir el mejor trabajo que puedan.
Con más de 6 millones de usuarios, es uno de los editores de código en línea más utilizados para desarrollo frontend. Si está empezando a aprender desde el principio, 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.
Caracteristicas
- 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 de frontend
CodeSandbox
Crear un prototipo de un sitio web podría ser una tarea difícil si no tiene la configuración correcta. Utilizando Código Caja de arena debería ser una decisión obvia cuando la prioridad es crear sitios web rápidamente.
Como sugiere su nombre, CodeSandbox proporciona un entorno de espacio aislado para el desarrollo de frontend.
Desde integraciones de GitHub y herramientas de depuración hasta una experiencia personalizable similar a un código VS, este campo de código le brinda todo para comenzar a codificar en segundos.
Si su objetivo principal es colaborar, todo lo que necesita es compartir el enlace de su caja de arena y estará listo para realizar una programación de pares en tiempo real.
Por ejemplo, puede explorar una lista cuidadosamente seleccionada de mejores cajas de arena.
Podría quedarme sin tiempo enumerando todas las características de CodeSandbox, así que mencionemos sus características asesinas.
Caracteristicas
- Integración de GitHub
- Sobre la base de la Editor de Mónaco que impulsa el popular editor de VScode
- Primera plataforma de colaboración
- Implementar en Vercel o Netlify
- Herramientas de depuración
- Marcos de prueba listos para usar
- soporte npm
Sololearn
La popular plataforma de aprendizaje de codificación Sololearn tiene su propia patio de juegos de código para desarrollo web.
Para ser honesto, no es un IDE con todas las funciones como los otros editores en línea que hemos visto a través del artículo, pero ofrece un entorno sin distracciones en el que puede escribir y ejecutar código.
Esto debería ser más que suficiente si recién está 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.
Caracteristicas
- 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 Sololearn
En resumen, el campo de juegos de código de Sololearn no incluye la batería, pero funciona en lo que se supone que debe ser, y si ya eres parte de los millones de aprendices en solitario, deberías intentarlo.
Codeply
Lo mejor de Codeply es el soporte para múltiples marcos y bibliotecas listo para usar y el editor de código orientado al diseño receptivo.
Si recién está comenzando con un nuevo marco como Reaccionar, Vue o Angular, Codeply es un excelente lugar para comenzar debido a un conjunto completo de plantillas de inicio y una gran comunidad de más de 40k desarrolladores.
Caracteristicas
- Plataforma de uso gratuito
- Simple pero sencillo documentación
- Plan profesional de tarifa única
- Incluye más de 50 bibliotecas
- Pon a prueba tu suciedad web en diferentes resoluciones de pantalla
Replit
Repita es posiblemente el IDE en línea más adecuado para todos los desarrolladores. Incluye literalmente todo necesitaría construir, desde una simple página de inicio hasta una aplicación web compleja utilizando 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.
Caracteristicas
- El paquete de inicio gratuito o 5 $ / mes plan de hacker
- Modo multijugador (programación de parejas en vivo)
- Gran comunidad
- Soporta muchos idiomas
- Personalización del editor
- Botón Ejecutar: ejecuta el proyecto con acciones personalizables.
- Almacenamiento secreto
- Código alojado
StackBlitz
Si no puede vivir sin el código VS, ApilarBlitz es la opción correcta para ti. Al igual que CodeSandbox, se basa en el Editor de Mónaco, que impulsa a este popular editor de código.
Simplemente inicie sesión con su cuenta de GitHub y ¡listo! Obtienes acceso a un entorno familiar.
Aparte de la experiencia del editor de código, es un campo de juego bastante sólido. Puede usar plantillas listas para usar para bibliotecas y marcos frontend como React, Vue, Angular, Svelte e Ionic.
Pero la principal peculiaridad de esta herramienta es la capacidad de jugar con marcos de backend como Node.js, Next.js y GraphQL.
Caracteristicas
- Plan gratuito "Cadete"
- 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 uno o dos días)
- URL de la aplicación alojada: fácil uso compartido en vivo
Glitch
Por último, pero no menos importante Falla es un entorno de programación colaborativa que facilita la creación de una aplicación web.
¡Tiene una de las interfaces más agradables para codificar! Solo echa un vistazo:
Por si te lo estás preguntando, sí, tiene un modo oscuro.
Aparte de la hermosa interfaz, millones de personas utilizan Glitch debido a su facilidad de uso, programación de pares 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 Eleventy (que no sabía que existía antes de dirigirme a la página de Glitches).
Caracteristicas
- Plan gratuito con opción de actualización
- Desarrolle aplicaciones de pila completa en su navegador
- Programación de pares en vivo
- Interfaz agradable
- Aplicaciones de inicio
- Remix (o bifurcar) las aplicaciones públicas de otros
Conclusión
Hoy en día, puede crear por completo cualquier aplicación web utilizando un campo de juegos de código como los que hemos visto anteriormente. Ya no es necesario descargar IDE pesados en tu computadora, mientras puedes construir, depurar, pruebe e implemente sin salir de su navegador web.
Si no está seguro de la transición al uso de estas herramientas, ¿por qué no echa un vistazo a la 10 mejores editores de código (aquellos que necesita instalar en su máquina).
