Durante el último par de años han aparecido varios sitios donde los diseñadores web podemos jugar, para nuestro deleite. Estas, son aplicaciones web que nos permiten la edición la vista previa en tiempo real de lenguaje del lado del clientes: HTML, CSS y JavaScript. La mejor parte de estas zonas de juego donde se programa o Playgrounds, que es su nombre técnico, es que la mayoría de ellas son gratuitos y es posible compartir tus "juegos" con alguien, ya sea con fines docentes o de depuración.
Personalmente, estas aplicaciones web han sido de gran ayuda para mi trabajo. Cada vez que me estanco con algo implementado en JavaScript o CSS, lo creo en el playground y lo comparto con mis compañeros desarrolladores para obtener ayuda. Son divertidos, interactivos y totalmente útiles, especialmente para los novatos. En este artículo te mostramos 4 playgrounds que puedes probar por ti mismo.
1. Codepen
Codepen es probablemente uno de los playgrounds más populares que existen. Chris Coyier de CSS Tricks es el co-fundador/co-creador de Codepen, lo que probablemente explica por qué esta aplicación web luce tan bien. Aparte de sus efectos visuales elegantes, Codepen muestra vistas previas online de los cambios que realices en el editor, por lo que es más fácil ver la causa y el efecto.
Codepen dispone de pre-procesadores de CSS como SCSS, SASS, MENOS y Stylus. Y como pre-procesadores de Javascript cuenta con CoffeeScript y LiveScript. Para HTML cuenta con Haml, Markdown, Slim y Jade. También tiene incorporadas 8 bibliotecas Javascript listas para ser utilizadas.
2. jsFiddle
JsFiddle, probablemente, sea el responsable de la popularidad de los playgrounds, ya que es una de los primeros y más famosos playgrounds. JsFiddle cuenta con más de 30 bibliotecas de JavaScript listas para su uso inmediato, además de poder añadir archivos externos fácilmente. Para el pre-procesamiento de CSS cuenta con SCSS, para Javascript tiene a CoffeeScript de JS y para HTML, simple vanilla.
Si estás colaborando en un proyecto con otro desarrollador, recomiendo encarecidamente utilizar jsFiddle para solucionar problemas. Entre los playgrounds disponibles por ahí, la característica de colaboración de jsFiddle es probablemente la mejor de todas las opciones que verás aquí. Además, esta función es fácil de utilizar y gratuita, a diferencia Codepen.
Lo que hecho de menos en jsFiddle son las vistas previas online. Hay que refrescar la página haciendo clic en el botón de reproducción. Y en comparación con otras playgrounds, jsFiddle es probablemente la más lenta. Otra peculiaridad un poco frustrante de jsFiddle es su botón de ejecución, a veces el clic no funciona, por lo que tendrás que hacer clic varias veces para que se ejecute el código (y sí, he probado esto en varios navegadores).
3. JS Bin
JS Bin fue desarrollado por Remy Sharp, un desarrollador de JavaScript que es dueño de una empresa de desarrollo web centrada en, lo has adivinado, JavaScript (y HTML5). Los preprocesadores de Javascript de JS Bin incluyen CoffeeScript, TypesScript, Traceur y JSX y cuenta con más de 40 librerías javascript a tu disposición. Puedes añadir archivos externos, pero vas a tener que hacerlo manualmente en el editor. En cuanto al preprocesador de CSS, cuenta con LESS.
Lo que lo diferencia de las playgrounds anteriores es que JS Bin te permite descargar los archivos a tu ordenador, una ingeniosa característica que puede resultar útil para los desarrolladores, especialmente cuando quieres trabajar sin conexión. También puedes crear "cubos" privados en JS Bin, pero tendrás que pagar por esta característica. Por desgracia, JS Bin no cuenta con función colaborativa.
4. CSSDeck
CSSDeck ha existido desde hace varios años, pero no ha tenido un gran impacto. Aunque todavía tiene notoriedad debido a su simplicidad. Si quieres evitar todo el ruido de otras playgrounds con todas sus características, CSSDeck es la aplicación que debes utilizar.
Los preprocesadores de CSSDeck incluyen HAML, Markdown, Slim, y Jade para HTML; LESS, Stylus, SASS y SCSS para CSS y CoffeeScript para JS. También cuenta con varias librerías de CSS y JS disponibles y puedes agregar bibliotecas que no están en la lista de forma manual.
Una cosa que me sorprendió de CSSDeck fue la función que permite a los usuarios aumentar el tamaño del texto. Parece una tontería, pero créeme que no lo es. Si estás buscando una playground con un montón de características de lujo, CSSDeck no es para ti. Pero esto es también lo que la hace única, desde su simplicidad muestra atención en las cosas que importan.
Y este ha sido el artículo en el que trataba mostraros 4 sitios donde un diseñador web puede jugar, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!