Herramientas de Playground de código web que debe probar

Si te gusta la codificación web, probablemente hayas usado al menos un campo de juegos de código en tu tiempo. Estos no son sus editores de código habituales, sino lugares donde puede probar su código sin preocuparse por la configuración del servidor backend. Codepen y JSFiddle son los dos más populares, pero, tal vez como era de esperar (dado que el público objetivo de los parques infantiles de código web son personas que tienen las habilidades para construir campos de juegos de código por sí mismos) muchos alternativas.

Si solo desea crear una aplicación HTML / CSS / JavaScript rápida y jugar con ella, el campo de juego que elija será prácticamente una cuestión de preferencia personal. Sin embargo, si desea más funciones, como codificación colaborativa en tiempo real, acceso rápido a marcos JS como React o Vue, soporte de back-end o incluso solo una comunidad creativa activa, es posible que desee comparar un poco.

CodePen

Probablemente el campo de juegos de código front-end más popular que existe es CodePeny por una buena razón: es intuitivo y fácil de usar, tiene una comunidad grande y vibrante y se ha convertido en un estándar aceptado para incrustar código web funcional en páginas. Sus rápidas actualizaciones automáticas y ventanas de visualización flexibles lo hacen bastante popular para cosas como proyectos de animación CSS. Tiene preprocesadores CSS / JS y puede conectarse fácilmente a scripts externos (React, Vue y cualquier otra cosa disponible a través de CDNjs) e incluso a otros bolígrafos.

Code Playgrounds Codepen

En general, CodePen merece su primer lugar, especialmente para carteras y proyectos de front-end. Sin embargo, no está diseñado para back-end, y algunas de sus características, como la codificación colaborativa, varios proyectos (a diferencia de los bolígrafos individuales) y las vistas de página completa en vivo (las vistas de página parcial en vivo son gratuitas), requieren un profesional pagado suscripción.

JSFiddle

En el segundo violín (aunque cronológicamente es uno de los más antiguos) en el mundo del patio de juegos de código front-end es JSFiddle. Como su nombre podría implicar, está orientado a JavaScript, por lo que ofrece más funciones de JS listas para usar y menos en la forma de HTML / CSS. (Literalmente, tiene soporte predeterminado para Sass pero no para Less). Sin embargo, eso no es un gran problema, ya que con un poco de trabajo puede agregar cualquier característica HTML / CSS / JS que necesite, y dado que admite sugerencias de código y recarga, incluso puede ser un poco mejor que CodePen en términos de capacidades generales de codificación.

Code Playgrounds Js Fiddle

Un gran punto a favor de JSFiddle es que ofrece el modo de colaboración (¡que incluye chat de voz y texto!) De forma gratuita, lo que le permite trabajar en el código al mismo tiempo que otras personas. Sin embargo, no tiene mucho aspecto de comunidad y no muestra proyectos interesantes, por lo que pierde ante CodePen en ese frente.

En general, si tiene un proyecto con más JS o necesita codificar en colaboración, JSFiddle es una excelente opción. Sin embargo, si algo al respecto te molesta, hay muchas alternativas muy similares en la lista “Otros parques infantiles” a continuación.

Falla

De acuerdo, no solo estás buscando jugar con cosas de front-end: necesitas algo en lo que puedas construir una aplicación web de pila completa. Muchos campos de juego de código simplemente le permiten codificar HTML / CSS / JS y generar páginas web estáticas, pero Falla le brinda un poco de espacio de almacenamiento, 4000 solicitudes por hora y hace que sea bastante fácil ejecutar el código del lado del servidor de Node.js. Por el precio de ganga absoluto de $ 0.00, obtiene una forma de construir e implementar instantáneamente proyectos a pequeña escala, independientemente de la experiencia que tenga.

Error en Code Playgrounds

También viene con una gran cantidad de otras características excelentes: codificación colaborativa, control de versiones (llamado “rebobinar”), muchos recursos de aprendizaje, buena integración de GitHub, incrustaciones fáciles, una comunidad amigable, toneladas de proyectos con los que puedes mezclar y jugar, e incluso la integración de Visual Studio. Es posible que su interfaz de codificación de front-end no sea tan elegante como la de otros parques infantiles, pero su funcionalidad general es igual de buena. Si está buscando una manera rápida y fácil de poner en funcionamiento una aplicación web (¡o está tratando de aprender cómo hacerlo!), Glitch es una excelente primera parada.

Código Caja de arena

Código Caja de arena está en la misma categoría que Glitch, pero un poco más complejo y con todas las funciones. Donde Glitch coloca una interfaz bastante minimalista sobre su funcionalidad bastante poderosa, CodeSandbox pone todo ese poder al aire libre utilizando el mismo Editor de Mónaco que impulsa VS Code. Las personas que se sienten cómodas con ese IDE, por lo tanto, se sentirán como en casa con CodeSandbox.

Code Playgrounds Codesandbox

Es enormemente flexible y personalizable, de código abierto, le permite implementar aplicaciones web completas (aunque con unos pocos pasos más que Glitch), aloja sus archivos, tiene un ambiente de comunidad y hace gran parte del trabajo preliminar por usted, dejándolo libre para solo escriba el código e implemente su aplicación. También tiene integración de GitHub y VS Code, Emmet (un expansor de abreviaturas) y un montón de otras características que los usuarios avanzados y los codificadores menos experimentados apreciarán por igual. Probablemente sea exagerado si solo está jugando, pero si su proyecto ya no encaja en un CodePen y no le importa un poco la curva de aprendizaje, consulte CodeSandbox.

Repl.it

Este patio de juegos / IDE no está al final porque es mi menos favorito (ciertamente no lo es): es porque Repl.it está en una categoría propia. Es compatible con un tonelada de idiomas, desde Python hasta LOLCODE (el lenguaje de programación preferido de Lolcats), tiene soporte de código front-end y back-end, le permite implementar sitios y aplicaciones, viene con una integración muy estrecha de GitHub, alberga una comunidad de desarrolladores grande y muy activa y tiene una interfaz intuitiva que oculta lo poderoso que es realmente.

Replit de Code Playgrounds

Repl.it tiene todas las características que esperas de los otros campos de juego en esta lista, desde la codificación colaborativa hasta la incrustación, y aunque sigue siendo principalmente una herramienta para crear prototipos y compartir código, definitivamente tiene suficiente jugo para la mayoría proyectos de tamaño medio (siempre que tenga una conexión a Internet estable). Puede ser un poco excesivo si solo está haciendo diseños de front-end o si es nuevo en el código, pero si programa con regularidad, vale la pena explorarlo.

Otros patios de recreo muy impresionantes para ver

Code Playgrounds Flems

Los patios de recreo de arriba son mis favoritos personales, pero hay muchos más. Todos son muy capaces de hacer lo básico, y cada uno tiene su propio toque para satisfacer una necesidad diferente. JSFiddle claramente inspiró a muchos de ellos, por lo que si está buscando una alternativa a esa aplicación, puede encontrarla aquí.

  • Liveweave: muy parecido a JSFiddle, pero más orientado al diseño. Destaca especialmente por su CSS incorporado, herramientas generadoras de color y su editor de vectores.
  • JSItor: una alternativa de JSFiddle con una sensación muy similar y, en particular, aplicaciones de Android / iOS.
  • StackBlitz: un excelente IDE basado en navegador creado con Monaco Editor que impulsa VS Code. Se parece un poco a CodeSandbox pero es un poco más simple ya que carece de soporte de backend.
  • Flems: barebones, parque infantil minimalista. Perfecto si quieres algo sin tonterías y / o sin distracciones.
  • JSBin: una versión más minimalista de JSFiddle.
  • CSSDeck: un patio de juegos frontal muy simple. Si desea una forma sencilla de probar algunas ideas en HTML / CSS y JS básico, es una buena elección.
  • ICECoder: es un área de juegos en línea con características comparables a muchas de las otras, pero su principal atractivo es que es además un programa descargable que se ejecuta en su navegador, lo que esencialmente lo convierte en un IDE basado en navegador sin conexión.
  • Plunker: una herramienta de front-end que te permite jugar con archivos un poco más que con otros patios de juegos y tiene buenas integraciones de escritorio / GitHub.
  • Scrimba: bien, este no es estrictamente un campo de juegos de código, es un sitio con una combinación innovadora de editor de video / código que le brinda un entorno de aprendizaje y un campo de juego al mismo tiempo. ¡Vale la pena buscarlo para los estudiantes!
  • Creador web: buen campo de juego de front-end con funcionalidad fuera de línea e incluso integración con CodePen.
  • Incursionar: patio de juegos HTML / CSS / JS bastante básico pero buen diseño.
  • PlayCode: un bonito y básico campo de juegos HTML / CSS / JS. El mayor inconveniente: un mensaje molesto que aparece cada 60 segundos indicándole que actualice a un plan profesional.

¡Hay demasiados! Cual elijo?

Sí, hay un millón de áreas de juego de código web, pero no se pierda decidiendo entre ellas y dejando que ese tiempo absorba el tiempo que podría dedicar a hacer cosas. Si tiene una idea medio decente de lo que está buscando en un entorno de codificación en línea, simplemente limítelo a dos o tres aplicaciones que tengan esas características, intente trabajar con cada una de ellas un poco y vea cuál encuentra usted mismo. gravitando hacia. Muchos de ellos tienen integración de GitHub y / o funciones de exportación / importación de todos modos, por lo que no es como si se estuviera encerrando en una mala decisión para siempre.

Yo personalmente uso CodePen para páginas estáticas simples y experimentos de diseño y Glitch para proyectos más grandes, aunque aprecio el diseño VS Code de CodeSandbox y la consola de Repl.it. Si me perdí su área de juegos favorita o no mencioné una característica increíble, ¡comente a continuación para que otros puedan encontrarla!

¿Es útil este artículo?

¡Ayúdanos a correr la voz!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *