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), existen muchas 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 de front-end más popular que existe es CodePen , y 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 muy 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.

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, múltiples proyectos (a diferencia de los bolígrafos individuales) y 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 frontal está 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.

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, realmente 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

Bien, entonces 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 Glitch 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.

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. Su interfaz de codificación de front-end puede no ser 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

CodeSandbox 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 a la vista 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.

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 escribe código e implementa tu 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 apreciarán tanto los usuarios avanzados como los codificadores menos experimentados. 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 recreo / IDE no está al final porque es mi menos favorito (ciertamente no lo es): es porque Repl.it está en una categoría propia. Admite una tonelada de lenguajes, desde Python hasta LOLCODE (el lenguaje de programación preferido de Lolcats), tiene soporte de código de front-end y back-end, le permite implementar sitios y aplicaciones, viene con una integración de GitHub muy ajustada, aloja una gran y muy comunidad de desarrolladores activa, y tiene una interfaz intuitiva que oculta lo poderosa que es en realidad.

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 estable a Internet). 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

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 de front-end muy simple. Si desea una forma sencilla de probar algunas ideas en HTML / CSS y JS básico, es una buena elección.
  • ICECoder : se trata de una zona de juegos en línea con características comparables a muchos de los otros, pero su principal atractivo es que es también un programa descargable que se ejecuta en el navegador, por lo que es esencialmente un IDE basado en el navegador fuera de línea.
  • Plunker : una herramienta de front-end que te permite jugar con archivos un poco más que otros patios de juegos y tiene buenas integraciones de escritorio / GitHub.
  • Scrimba : está 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 echarle un vistazo a los estudiantes!
  • Web Maker : buen campo de juego de front-end con funcionalidad fuera de línea e incluso integración con CodePen.
  • Dabblet : patio de juegos HTML / CSS / JS bastante básico pero con un diseño agradable.
  • 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 juegos 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, 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!

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario