8 Code Playground para aprender desarrollo web

Tanto si eres un programador principiante como un desarrollador experto, los campos de juego de código son útiles a la hora de compartir y aprender con los demás.

Un patio de recreo de código es un servicio en línea donde puedes 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ás aprendiendo desarrollo web y practicando tu HTML o CSS, utilizar un patio de recreo de código sería útil para crear páginas web sencillas en línea. Además, podrías aprovechar los proyectos de tendencia en esas plataformas y tomarlos como recursos de aprendizaje.

Por otro lado, si eres un desarrollador web profesional y quieres presumir de tu trabajo, los code playgrounds son el lugar perfecto para hacerlo.

Lo mejor es que la mayoría de los parques de juegos de código tienen un nivel gratuito, y puedes incrustar los resultados del código en tu sitio web.

Repasemos algunas de ellas.

JSFiddle

JSFiddle es una zona de juegos de código donde puedes probar HTML, CSS y Javascript fragmentos. Surgió como una aplicación de prueba de concepto en 2009 y ahora es uno de los mayores parques de juegos de código que existen.

Puedes crear una cuenta gratuita, guardar todos tus chascarrillos y también bifurcar los de otras personas.

Otra cosa impresionante de JSFiddle son las sesiones de colaboración. Puedes crear una sesión de audio-chat mientras codificas en el fiddle.

Si eres un blogger que quiere incrustar el resultado de fragmentos de código y también su código fuente, JSFiddle sería una excelente opción a elegir.

Por supuesto, en el momento de escribir este código, este patio de recreo no soporta otros lenguajes de programación populares como Python, Vaya ao PHPpor lo que no se puede esperar construir un aplicación full-stack en él.

Características

• Plataforma gratuita
• Interfaz minimalista
• Compatibilidad con HTML, CSS y JS
• bifurcar cualquier fragmento de fiddle público en la plataforma
• Colabora con otras personas utilizando el chat de audio directamente en el sitio web
• Bien documentación

Codepen

Codepen no es sólo un patio de recreo de código, sino una comunidad de desarrolladores que quieren 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ás empezando a aprender front-end, lo ideal es encontrar ideas y motivación para continuar tu viaje de aprendizaje.

¿Y la experiencia de desarrollo?

Puedo decirte 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 depende de un paquete npm, puede instalarlo desde el panel de configuración.

Características

• Opcional pro plan
• 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

CodeSandbox

Crear prototipos de un sitio web puede ser una tarea difícil si no se cuenta con la configuración adecuada. Utilizando CodeSandbox debería ser una decisión obvia cuando la prioridad es crear sitios web rápidamente.

Como su nombre indica, CodeSandbox proporciona un entorno "sandboxed" para el desarrollo frontend.

Desde integraciones con GitHub y herramientas de depuración hasta una experiencia personalizable similar a la de VS code, este patio de recreo de código te ofrece todo lo necesario para empezar a programar en cuestión de segundos.

Si tu propósito principal es colaborar, todo lo que necesitas es compartir el enlace de tu sandbox, y estarías listo para hacer programación en parejas en tiempo real.

Por ejemplo, puede explorar una lista cuidadosamente seleccionada de los los mejores areneros.

Podría quedarme sin tiempo para enumerar todas las características de CodeSandbox, así que vamos a mencionar sus características más destacadas.

Características

• Integración en GitHub
• Basado en el Editor de Mónaco que impulsa el popular editor VScode
• La colaboración, primera plataforma
• Despliegue en Vercel o Netlify
• Herramientas de depuración
• Marcos de pruebas listos para usar
• soporte npm

Sololearn

La popular plataforma de aprendizaje de programación Sololearn tiene su propio zona de juegos para el desarrollo web.

Para ser honesto, no es un IDE completo 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 puedes escribir y ejecutar código.

Esto debería ser más que suficiente si estás empezando con la programación.

Otra cosa interesante de Sololearn es la gran comunidad y la compatibilidad con varios lenguajes de programación, lo que es muy bueno si quieres jugar con otras tecnologías.

Características

• Uso gratuito con su cuenta Sololearn
• Sencillo editor de código en línea
• Gran comunidad para compartir tu código
• Compatibilidad con varios idiomas
• Un gran ecosistema con los cursos Sololearn

En resumen, el patio de recreo de código de Sololearn no es batería incluida, pero funciona en lo que debe, y si ya formas parte de los millones de sololearners, deberías darle una oportunidad.

Codeply

Lo mejor de Codeply es la compatibilidad con múltiples frameworks y bibliotecas desde el primer momento y el editor de código orientado al diseño responsivo.

Si acabas de empezar con un nuevo framework como ReaccioneVue, o Angular, Codeply es un gran lugar para empezar debido a un conjunto completo de plantillas de partida y una gran comunidad de más de 40k desarrolladores.

Características

• Plataforma gratuita
• Simple pero sencillo documentación
• Plan Pro de pago único
• Incluye más de 50 bibliotecas
• Prueba tu web en diferentes resoluciones de pantalla

Replit

Replit es posiblemente el IDE en línea más adecuado para cualquier desarrollador. Incluye literalmente todo que necesitarías para construir, desde una simple página de inicio hasta una compleja aplicación web utilizando cualquier librería JS moderna.

Con Replit, puedes programar en más de 50 lenguajes, escribir aplicaciones de forma sincronizada con tus compañeros, probar tus programas, integrarte con GitHub y acceder a una de las mayores comunidades de desarrolladores que existen.

Podría quedarme literalmente sin papel mencionando todas las características de Replit, así que pasemos a las principales.

Características

• El paquete de inicio gratuito o 5$ /mes plan hacker
• Modo multijugador (programación por parejas en directo)
• Gran comunidad
• Muchos idiomas compatibles
• Personalización del editor
• Botón Ejecutar: Ejecuta el proyecto con acciones personalizables
• Almacenamiento secreto
• Código alojado

StackBlitz

Si no puedes vivir sin código VS, StackBlitz es la opción adecuada para usted. Al igual que CodeSandbox, se basa en la Editor de Mónacoque impulsa este popular editor de código.

Inicia sesión con tu cuenta de GitHub y ¡voilá! Tendrás acceso a un entorno familiar.

Aparte de la experiencia del editor de código, es un patio de recreo bastante sólido. Puedes utilizar plantillas listas para usar para frameworks frontales y librerías como React, Vue, Angular, Svelte y Ionic.

Pero la principal peculiaridad de esta herramienta es la posibilidad de jugar con frameworks de backend como Node.js, Next.js y GraphQL.

Características

• Plan "Cadete" gratuito
• Experiencia de código VS dentro de tu navegador. Esto incluye Intellisense, búsqueda de proyectos y mucho más.
• Experiencia en codificación fluida (muy fluida)
• Editor de código sin conexión (¡eh! podría ser útil si te desconectas un día o dos)
• URL de aplicación alojada: compartir en directo fácilmente

Glitch

Por último, pero no por ello menos importante, Glitch es un entorno de programación colaborativo que facilita la creación de aplicaciones web.

Tiene una de las interfaces más agradables para programar. Echa un vistazo:

En caso de que te lo estés preguntando, sí, tiene un modo oscuro.

Aparte de su bonita interfaz, millones de personas utilizan Glitch gracias a su facilidad de uso, su programación por parejas en directo y su agradable comunidad.

Puedes crear cualquier tipo de app full-stack usando no sólo HTML, CSS y JS, sino también Node.js (Backend), React o Eleventy (que no sabía que existía antes de entrar en la página de Glitches).

Características

• Plan gratuito con opción de ampliación
• Desarrolle aplicaciones completas en su navegador
• Programación por parejas en directo
• Interfaz agradable
• Aplicaciones para principiantes
• Remezcla (o bifurca) las aplicaciones públicas de otros

Conclusión

Hoy en día, se puede construir cualquier aplicación web utilizando un patio de recreo de código como los que hemos visto anteriormente. Ya no es necesario descargar IDEs pesados en tu ordenador, mientras puedes construir, depurary despliegue sin salir del navegador.

Si no está del todo seguro sobre la transición al uso de estas herramientas, ¿por qué no echa un vistazo a la Los 10 mejores editores de código (los que debe instalar en su máquina).