JavaScript. Ah, JavaScript. Nadie queda impasible ante JavaScript, o te encanta o lo odias. Punto y a parte. Tanto si lo odia como si lo ama, si usted está haciendo desarrollo web lo está usando. Es sencillo, no se puede escribir una línea de código en una moderna aplicación online (excepto que esté utilizando herramientas que no necesiten JavaScript como Asna Mobile RPG) sin JavaScript.

Las buenas noticias son que el entorno de desarrollo ha madurado considerablemente en los últimos años. Hubo en tiempo en que los únicos debuggins disponibles eran el dialogo Alert() y el statement debugger;. Este ya no es el caso y hay excelentes herramientas de  JavaScript formando parte de los más modernos navegadores de hoy en día.

Entornos de prueba online de JavaScript

Otra cosa que está haciendo más fácil de aprender JavaScript son los entornos de trabajo en línea o "playgrounds." Estos sitios web de testeo para JavaScript/HTML/CSS existen desde hace mucho tiempo pero en los últimos dos años han madurado mucho. Los mejores de estos playgrounds de JavaScript son codepen.io, jsfiddle.net y jsbin.com. Los tres permiten la introducción de fragmentos de código  HTML, CSS y JavaScript para testear y compartirlos. Siempre he sido un fiel seguidor de JSFiddle pero recientemente las mejoras de CodePen me han ganado. En CodePen, un snippet se llama Pen.

Algunas características de CodePen:

  • Paneles interactivos de entrada para HTML, CSS y JavaScript.
  • Posibilidad de incorporar CSS externos y recursos de JavaScript via un link de CDN.
  • Panel de previsualización de  HTML (si su Pen tiene HTML).
  • Panel de consola de JavaScript. Esta función básicamente permite imitar la función de la consola en en entornos de desarrollo/ejecución . Tener este panel integrado en CodePen es muy práctico.
  • Cada Pen tiene su propia y única URL para ser compartido. Tambien puede insertar un Pen en un blog o en una página web.
  • Puede crear un Pen como una plantilla--le hará más fácil crear Pen similares.
  • No estoy seguro de que se use mucho, pero CodePen también tiene una función blog o comentario. Podríoa ser útil para introducir un comentario o información sobre el funcionamiento de un Pen.
  • CodePen hace muy fácil poder consultar otros Pen públicos. Hay montón de buenos ejemplos y usted puede   buscar ejemplos por patrones. 

Hablemos de dinero

CodePen es gratis, pero también tiene tres planes "Pro" con características mejoradas. El plan Pro basic cuesta 75$ por año e incorpora bastantes mejoras, pero los planes "Professor" y "Collaborative" dejan el plan Pro solo para desarrolladores poco serios.

Imagen 1a más abajo muestra un Pen de CodePen.io (click aquí para ver el Pen en acción). Este Pen no necesita CSS, por lo que el panel (contraido entre el de HTML y el de JS ) está cerrado. La barra blanca en la parte inferior de la imagen muestra el Pen en ejecución y la consola está justo debajo.



Imagen 1a. CodePen en acción

 

Puede configurar fácilmene un Pen con el panel que se muestra en la imagen 1b. Quizás lo más importante de este panel es donde puede añadir referencias externas como un host en CDN.


Imagen 1b. Panel de configuración de CodePen

 

Una de las cosas que más me ralentizaba con CodePen era que por defecto el botón  "Run" no se muestra en el Pen. Por defecto, el Pen se ejecuta automáticamente en cada cambio. Se puede cambiar ese comportamiento por defecto desactivando el botón "Auto Update Preview" en la pestaña "Behavior" del panel de control. Cuando se hace esto se puede ver el botón "Run" como está en la Imagen 1a. Yo prefiero este comportamiento más manual.


Imagen 1c. Desactivando la actualización automática (añadiendo el botón "Run" en el Pen)

 

Si está desarrollando aplicaciones on line en HTML 5-, estos entornos de prueba y aprendizaje son muy recomendable. Dele un vistazo, son realmente buenos y ofrecen la posibilidad de aprender JavaScript, HTML, and CSS sin riesgos.