Por mucho que me gusten los IDE y los editores de desarrollo web sin conexión, odio los inconvenientes que conlleva tener que editar el código y luego abrir un navegador para probar los cambios. Incluso cuando una pestaña del navegador con el archivo de prueba está abierta, constantemente debe saltar del editor al navegador y actualizar la pestaña antes de que se muestren los cambios en el resultado. Tengo preferencia de trabajar en sitios donde el resultado se muestra en tiempo real.

Tan pronto como se escribe el código, el resultado listo para la prueba se entrega en segundos. Convenientemente, el código editable y la salida comprobable se muestran uno al lado del otro. Otro placer de estos campos de juego en línea es la enorme comunidad de diseñadores y desarrolladores web que publican fragmentos de código para que todo el mundo los vea.

1. Codepen

CodePen es una de las comunidades más grandes para diseñadores y desarrolladores web donde los usuarios pueden probar y mostrar fragmentos de código HTML, CSS y JavaScript creados por los usuarios. Funciona como un editor de código en línea y un entorno de aprendizaje de código abierto, donde los desarrolladores pueden crear fragmentos de código, llamados "bolígrafos", y probarlos. Los editores de Codepen vienen con algunas funciones comunes como los normales, con respecto a la sangría del código y el resaltado colorido de la sintaxis. También admite una gran variedad de preprocesadores para HTML, CSS y JS, incluidos, entre otros, Pug, Slim, SCSS y TypeScript. El modo de colaboración también es muy útil. Nunca tendrás que perder tu trabajo, porque se guarda automáticamente y puedes reanudarlo cuando quieras. Con similitudes cercanas a Github, siéntete libre de bifurcar y editar el código de otros usuarios como desees.

2. JSfiddle

JSFiddle es una vibrante comunidad en línea para probar y mostrar fragmentos de código HTML, CSS y JavaScript creados por usuarios y en colaboración, más apropiadamente conocidos como 'violines'. Permite llamadas AJAX simuladas. Al igual que con Codepen, la interfaz limpia coloca el código y el resultado uno al lado del otro, y los resultados se aplican inmediatamente después de hacer clic en el botón Ejecutar. Cuenta con soporte para SCSS, así como bibliotecas de JavaScript como TypeScript, CoffeeScript, Vue y React. Continúa mejorando y recientemente lanzó una función de sugerencias de código que sugerirá algunas propiedades CSS comunes y nombres de valores, lo mismo para JavaScript. También se admite la colaboración con otros desarrolladores.

Más información: Los 5 mejores campos de juego de desarrollo web front-end en línea