Brackets: un editor de HTML, CSS y JavaScript muy prometedor

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Brackets-un-editor-de-HTML-CSS-y-JavaScript-muy-prometedor.aspx

Recientemente he descubierto un nuevo editor que está preparando Adobe (sí: los mismos de Flash que se han rendido a la evidencia de HTML 5) y que promete resultar muy útil para desarrollo de aplicaciones Web.

Se trata de Brackets, un editor Open Source con licencia MIT que está basado en Google Chrome y ofrece algunas características interesantes para agilizar nuestros desarrollos.

De momento está disponible como una aplicación de escritorio que funciona realmente con Chrome por debajo, pero se espera que pronto se pueda utilizar también directamente on-line, sin necesidad de instalar nada.

Sus dos principales características en mi opinión que lo diferencian bastante de otros editores son:

  • La posibilidad de editar en línea el código de archivos relacionados que afecta al punto del editor en el que nos encontramos. Ahora lo explico mejor.
  • La posibilidad de ver cómo afectan los cambios que hacemos en tiempo real en una versión en ejecución de la página que estamos desarrollando (Live Preview).

Edición en línea

Este concepto es bastante interesante. Cuando estamos sobre un elemento HTML de nuestra página podemos pulsar CTRL+E (o CMD+E en Mac) para que inmediatamente el editor determine qué estilos CSS de los definidos están afectando a nuestro elemento, y los muestre en una nueva zona que se abre justo debajo. Podemos editar el CSS en esta área que se ha desplegado y los cambios surtirán efecto inmediatamente en la página:

Brackets_1
Pulsa para aumentar

Por ejemplo, en la figura anterior nos ponemos encima de de un encabezado de la página, y al pulsar CTRL+E se nos abren los estilos que afectan a este elemento, como podemos observar debajo. Si hubiera más de un archivo .css que afectase al elemento podríamos movernos entre todos ellos con la navegación de la parte derecha, en la que se nos indica el nombre del archivo .css y la línea que se está mostrando.

Así de entrada puede no parecer muy espectacular, pero lo cierto es que nos puede ahorrar mucho trabajo. En otros editores podemos cambiar cualquier elemento de la página y editar las definiciones CSS, pero tenemos que tener en mente en cada momento qué reglas CSS afectan a nuestro elemento en particular. Un mismo elemento puede estar afectado simultáneamente por varias reglas CSS y no las obvias que nosotros podamos tener en mente. Por ejemplo, puede que un <div> esté afectado por una regla que atada a su identificador, una redefinición general de las etiquetas de tipo <div>, una clase o varias que se le están aplicando y además por el hecho de ser la hija de otros elementos en reglas CSS anidadas. Brackets localizará todas estas reglas y las mostrará justo debajo, ahorrándonos trabajo y sobre todo ayudándonos a ver qué reglas afectan verdaderamente a un elemento determinado. Lo cual no está nada mal.

Por ejemplo, en esta figura vemos un elemento que parece que es muy sencillo (un simple <a> dentro de un <li>), pero que realmente está afectado por muchísimas CSS diferentes, como se puede observar en la lista de archivos que aparece al pulsar CTRL+E:

Brackets_2

Esto nos simplifica mucho el trabajo y nos evita errores.

Si pulsamos sobre el nombre del archivo en ese editor en-línea que aparece, nos lleva al archivo original con el cursor ya posicionado en esa misma línea, por si queremos mayor amplitud al  editar.

También hace lo propio con el código JavaScript, ofreciéndonos edición en-línea de funciones cuando tenemos el curso sobre una de ellas:

Brackets_3

Además se nos ofrece ayuda contextual mientras escribimos el código. Es un estilo IntelliSense de Visual Studio, pero menos potente. Te ayuda con las etiquetas HTML, sus atributos, las propiedades CSS, etc…

Para que funcione esta edición en línea los archivos involucrados tienen que estar contemplados en la lista de archivos de la barra lateral, por lo que es recomendable abrir una carpeta (incluirá también las sub-carpetas) en lugar de archivos individuales.

Live Preview

Otra característica interesante es lo que han llamado Live Preview. Consiste en lanzar en un navegador Chrome la página actual sobre la que estaos trabajando. Mientras está activado el Live Preview cualquier cambio que hagamos en cualquiera de los archivos del proyecto web que afecte a la página que se está visualizando se verá reflejado en tiempo real en lo que se visualiza en el navegador. De este modo si queremos ver cómo afectan ciertos cambios en el HTML o en las CSS de nuestra página, podemos tener abierto Brackets y el Live Preview y a medida que hacemos los cambios se verá su efecto en tiempo real en la página.

Esto es bastante más útil que abrir la página normalmente en el navegador y luego usar las herramientas de desarrollador (F12) para toquetear lo estilos y el HTML, teniendo que recordar exactamente qué hemos hecho para arreglar algo. Aquí editamos el código en su ubicación original por lo que no hay nada que recodar, pero al mismo tiempo vemos los cambios en directo. Muy útil.

Es muy parecido (aunque menos potente, creo yo) que lo que ofrece WebStorm de Jetbrains. Lo bueno es que con Brackets no tenemos que instalar Java (yo si puedo mantener Java fuera de mis equipos mejor). Eso sí, lo que hace webStorm es impresionante, y si no mira este vídeo y alucina.

En cualquier es algo muy a tener en cuenta que puede sernos de gran utilidad en ocasiones.

Otras cosas

Brackets es extensible y ofrece por el momento unas cuantas extensiones sencillas, aunque a medida que se incorporen nuevos desarrolladores veremos muchas más (espero)

Hay multitud de teclas rápidas que podemos utilizar, aunque las primordiales a tener siempre en mente son CTRL+E, para la edición en-línea y CTRL+ALT+P para el Live preview. De momento solo soporta CSS, HTML y JavaScript pero tienen pensado incorporar otros tipos de archivos en el futuro, gracias al modelo de extensiones que tiene el editor.

Brackets está implementado 100% en HTML y JavaScript en si mismo, lo cual hace predecir que pronto estará disponible como producto “en la nube”. Se puede descargar el código fuente, y también contribuir al proyecto.

No es el editor de tu vida ni va a levantar las pasiones que levanta Sublime, pero seguro que te puede resultar útil añadirlo a tu caja de herramientas de desarrollador web.

Descárgalo desde aquí.

¡Espero que te resulte útil!

Elevación de variables (hoisting) en JavaScript

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Elevacion-de-variables-(hoisting)-en-JavaScript.aspx

GruaEn esta ocasión quiero hablar de un efecto quizá poco conocido pero importante del modo en que procesa el código JavaScript.

En JavaScript existen variables globales, las cuales tienen sus ventajas en un lenguaje como este, pero también están llenas de peligros, y variables locales, cuyo ámbito se circunscribe exclusivamente a las funciones en las que se declaran.

Podemos utilizar una variable global desde dentro de una función cualquiera, ya que están accesibles desde cualquier lugar de la página, por ejemplo:

//Variable global
var name = "Jose";

function HelloWorld(){
  alert(name);
}

HelloWorld();

Al hacer esto saltará el mensaje con el nombre que hay en la variable. Bastante obvio.

Bien, pero ¿qué pasa si definimos una variable con el mismo nombre dentro de la función?:

//Variable global
var name = "Jose";

function HelloWorld(){
  //Variable local
  var name = "Pepe";
  alert(name);
}

HelloWorld();

Las reglas de precedencia de variables en JavaScript dicen que las variables locales preceden a las globales, por lo que en este caso veríamos aparecer por pantalla la palabra “Pepe” que es el valor de la variable local.

Sin embargo ahora vamos a hacerle un sutil cambio al código anterior y haremos lo siguiente:

//Variable global
var name = "Jose";

function HelloWorld(){
   alert(name);
   //Variable local
   var name = "Pepe";
}

HelloWorld();

¿Qué veremos ahora por pantalla?

Por lógica parece que deberíamos ver “Jose”, ya que en el momento de llamar al alert todavía no se ha declarado la variable local, y por lo tanto se debería acceder a la global ¿verdad? Pues no.

Lo que veremos por pantalla es un bonito “undefined”:

Undefined

¿Por qué ocurre esto?

Declaración vs Definición de variables en JavaScript

Una variable en JavaScript se declara de dos formas diferentes: mediante la palabra clave “var”, o bien directamente nombrándola por primera vez cuando se le asigna un valor (sin poner var delante, lo cual es muy mala práctica, por cierto).

El hecho de declarar una variable no implica tener que definirla, ya que la podemos declarar pero no necesariamente asignarle un valor:

var variable1;  //Se declara pero no se define
variable1 = “1”; //Se define asignándole un valor

var variable2 = 2; //Se declara y se define todo a la vez

Ahora que tenemos claro este concepto, podemos entender mejor lo que ocurre en el ejemplo anterior para que se muestre un undefined por pantalla.

El efecto de elevación

Aunque JavaScript es un lenguaje interpretado y procesa las líneas de código una a una según se las va encontrando, en realidad no es del todo así. En el caso de las variables que hay dentro de una función lo que hace el intérprete es declararlas todas a la vez al principio de la función, independientemente de donde estén realmente declaradas dentro de ésta. Por eso, en el ejemplo anterior aunque la variable está declarada y definida abajo del todo, cuando la vamos a mostrar nos devuelve un “undefined”: el intérprete “eleva” la declaración implícitamente al principio de la función, así que el código anterior es equivalente a este:

//Variable global
var name = "Jose";

function HelloWorld(){
   //Variable local
   var name;
   alert(name);
   name = "Pepe";
}

HelloWorld();

Si vemos el código de esta manera entonces el resultado cobra todo el sentido del mundo ¿verdad?

Así que precisamente por este efecto se considera una buena práctica el declarar todas las variables locales de nuestras funciones siempre al principio, independientemente de donde las vayamos a definir o utilizar. Esto nos evitará efectos desagradables como este.

Es un efecto que es interesante conocer y que puede evitarnos algún “bug” raro que nos sería muy difícil corregir si no somos conscientes de su existencia.

¡Espero que te sea útil!

Para saber más: Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web

Nuevo libro de JavaScript y AJAX

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Nuevo-libro-de-JavaScript-y-AJAX.aspx

Tras pasarme todo el verano trabajando y después de casi un mes de haberlo terminado, por fin puedo decir que ¡aquí está mi nuevo libro! 🙂

cubierta-javascript-350Se trata de Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web.

En él he tratado de crear una obra muy completa que abarque desde los fundamentos del lenguaje JavaScript hasta temas de mayor nivel (como la orientación orientada a objetos o multitud de detalles importantes que se comentan en el libro). De este modo el libro sirve tanto para gente que se quiere iniciar en el lenguaje y quiere llegar a tener un buen nivel, como aquellos otros que lo usan habitualmente pero necesitan profundizar en algunas cosas para sacarle más partido en su trabajo del día día.

Lo puedes usar como guía de estudio sistemático o como manual de referencia para tener a mano cuando necesites consultar algo.

Viene con infinidad de ejemplos sencillos, orientados a entender bien los conceptos, contiene trucos, curiosidades, historia de Internet y cultura general informática que todo programador debería conocer.

Si eres programador de jQuery pero no has profundizado en el lenguaje JavaScript en sí, lo encontrarás especialmente útil ya que te ayudará a comprender mejor lo que haces al usar jQuery y, sobre todo, cuando se produzcan errores sabrás solucionarlos mejor al entender bien los fundamentos de funcionamiento de los navegadores.

Todo programador debería conocer bien este lenguaje tan incomprendido por regla general.

Dado que JavaScript está más en primera plana que nunca y sirve no sólo para la Web sino también para crear aplicaciones de servidor, manejar suites ofimáticas o incluso programar para Windows 8, este libro está más de actualidad que nunca.

En el enlace anterior tienes acceso a toda la información sobre el libro, y además puedes ver con detalle el índice y leer un capítulo completo gratis.

La verdad es que estoy muy contento con el resultado final y cómo han quedado estas casi 400 páginas.

Por cierto, ¿alguien sabe decirme qué fruta es la que hemos usado en la portada? parece una pelota de tenis a medio pelar, pero tiene más relación con Java de lo que parece 😉

¡Espero que te guste y que te lo compres!