¿Cómo ejecutas código jQuery en tus desarrollos?

Cuando comencé a utilizar jQuery, supe que todo el código que iba a ejecutar una vez que se cargue el DOM, debía ponerlo dentro de:

$(document).ready(function() {
  //...
});

Con la práctica, me olvidé del código anterior y empecé a usar su equivalente, más sencillo de recordar y más corto para escribir:

$(function() {
  //...
});

Y de repente, revisando código de algún gurú, me topé con esto:

(function() {
  //...
}());

¿Mi reacción? ¡Confusión total!

Antes que nada, ¿qué diferencias hay entre ambas?

  • El “$” al inicio de la primera.
  • Los parentesís “()” al final de la segunda.

El primer detalle es comprensible, pues sabemos (o deberíamos saber) que el símbolo monetario seguido de paréntesis “$()” es equivalente a “jQuery()“, que es lo que habitualmente usamos para seleccionar elementos del DOM.

El segundo detalle no era muy claro para mí, así que luego de una divertida investigación, descubrí que el objetivo de los paréntesis “()” al final, inmediatamente después de la definición de la función, es la ejecución de la misma.

¡Ah! Pero hay un detalle, no es suficiente sólo incluir esos paréntesis al final, si no que son necesarios otros paréntesis, los que engloban a la propia función, para indicar que no se trata de una declaración, si no de una expresión.

A este tipo de funciones ejecutables al momento, se les conoce como Immediately-Invoked Function Expression (IIFE).

Por último, si vamos a usar una IIFE para ejecutar nuestro código jQuery (o JavaScript directo), no debemos olvidar colocarla al final de nuestro HTML, justo antes de <body>.

¿Beneficios? No necesitamos jQuery para ejecutar nuestro código JS, o bien, evitamos una llamada al framework.

Referencias

Si desean profundizar más sobre el tema, les dejo los siguientes enlaces:

Gliimpse, el futuro en previsualización de HTML y LaTeX

Gliimpse LogoJusto cuando pensaba que había perdido mi capacidad de asombro, conozco Gliimpse, ¡una maravilla alucinante! Se trata de una técnica de previsualización rápida de documentos creados con lenguajes de marcado (markup code), como HTML y LaTeX, mostrando una transición fluida del documento renderizado con sólo pulsar una tecla.

Es difícil explicarlo con palabras (estoy seguro que luego de leer mi explicación anterior se quedaron con cara de “Whaaat?”), así que mejor vean el siguiente video.

En el sitio oficial de Gliimpse pueden descargar el video anterior con una mejor resolución, así como un demo funcional multiplataforma (el cual requiere Java y otras dependencias, lean el “readme.txt“).

Sería genial que los principales editores de código, IDEs, e incluso navegadores web, adoptaran esta asombrosa técnica, ¿no les parece? :-)

Visto en Mozilla Hacks.

Share

Notepad++ 6 liberado, incluye Mapa de Documento

Si eres desarrollador, y además usas Windows al programar, estoy seguro conoces Notepad++, el poderoso (y a la vez ligero) editor de código, que además es gratuito y libre (open source). Si es así, te alegrará saber que acaba de ser liberado Notepad++ 6, con interesantes novedades.

[Notepad++ 6 con Document Map activado]

Como pueden notar en la captura de pantalla anterior, una de sus principales novedades es el nuevo Mapa de Documento (lo activan en el menú Vista » Document Map). Su funcionamiento es muy similar a la misma característica del cada día más popular Sublime Text, aunque no se muestra el 100% del mapa a la vez, por lo que al usarlo para hacer scrolling podría causar cierta confusión.

Otras novedades son el soporte para PCRE (Perl Compatible Regular Expressions) y el desempeño mejorado al cargar documentos extensos.

Pueden descargar Notepad++ 6 desde su página oficial.

Share

HTML5 Cheat Sheet Wallpaper

Giovanni Scala acaba de publicar un nuevo cheat sheet (guía rápida, chuleta) de tipo wallpaper (fondo de pantalla, de escritorio) sobre HTML5, disponible en 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200 y 2560×1600 pixeles.

HTML5 Cheat Sheet Wallpaper

Enlace: HTML5 Cheat Sheet Wallpaper

Cabe mencionar que Giovanni Scala es el creador de QuicklyCode, un sitio que recopila cheat sheets, infografías y otros recursos para programadores, desarrolladores y diseñadores. Les recomiendo ampliamente visitarlo.

Por cierto, si consideran que este cheat sheet tiene muy poca información sobre HTML5, los invito a ver una más completa (no es wallpaper, es una infografía).

Share

MicroJS – Colección de Micro Librerías JavaScript

¿Sabías que las versiones minificadas de las últimas versiones de jQuery y MooTools pesan más de 90 KB? Por lo general necesitamos una librería o framework JavaScript para nuestros proyectos, pero a veces no requerimos todas las funcionalidades de grandes frameworks (como los mencionados).

Por lo anterior es bueno conocer la existencia de micro librerías o micro frameworks que podemos usar hoy en día, y MicroJS se ha encargado de crear un listado de ellas (¡ninguna rebasa los 5 KB!), organizadas en categorías descriptivas.

Enlace: MicroJS.com

¡No olviden agregar MicroJS a sus bookmarks! :-)

Share

PHP 5.4.0 disponibe: Reutilización de código con Traits, Sintaxis corta para definir Arreglos y Servidor Web embebido

PHP Logo¡Amigos desarrolladores web! Les informo que acaba de ser liberado PHP 5.4.0, y según dicen los chicos de su equipo de desarrollo, se trata de un gran paso adelante para la serie 5.x; y no lo dicen a la ligera, pues las novedades son en verdad muy atractivas.

Las novedades principales de PHP 5.4.0 son:

  • Nuevo mecanismo de reutilización de código, llamado Traits. En pocas palabras, un trait es similar a una clase, de la cual no pueden crearse instancias, cuyo objetivo es reducir la complejidad y limitaciones de la herencia simple permitiendo reutilizar libremente conjuntos de métodos en otras clases independientes. Ejemplo:

    <?php
    trait HolaMundo {
        public function mensaje() {
            echo 'Hola Mundo!';
        }
    }
     
    class miHolaMundo {
        use HolaMundo;
    }
     
    $hola = new miHolaMundo();
    $hola->mensaje();
    ?>

    El ejemplo anterior es algo tonto, pero sirve para ilustrarnos sobre la sintaxis de los traits.

  • Nueva sintaxis para definir arreglos, la cual reemplaza el uso de array( ) por [ ] (al puro estilo de Python). Ejemplo:

    $a = [1, 2, 3, 4];
    $a = ['uno' => 1, 'dos' => 2, 'tres' => 3, 'cuatro' => 4];
  • Desempeño mejorado y menor consumo de memoria.

  • Servidor Web embebido en línea de comandos, para uso exclusivo al desarrollar, y así no tener la necesidad de tener instalado Apache, NGINX, o similar, al momento de hacer pruebas.

  • ¡Atención! Register globals, magic quotes y safe mode han sido eliminados.

  • El formato de números binarios ha sido agregado. Ejemplo: 0b001001101.

  • Ahora el default_charset es “UTF-8” en php.ini.

  • Muchas mejoras adicionales y corrección de bugs.

Por cierto, PHP 5.4.x será la última serie con soporte para Windows XP y Windows 2003, en otras palabras, ya no serán liberados instaladores binarios para dichas versiones de Windows después de PHP 5.4.

Más información (la cual recomiendo ampliamente leer) en:

Share

¿Qué pasa si establecemos el atributo autofocus a varios elementos de un formulario en HTML5?

Con HTML5 llegó la posibilidad de potenciar nuestros formularios web, y otorgarles características que antes sólo eran posibles en aplicaciones de escritorio (o usando scripts, por supuesto). Una de ellas es el auto enfoque (autofocus), gracias al cual un control específico de un formulario recibe el enfoque al cargarse la página web, para que el usuario interactúe primeramente con él.

[ Ejemplo de Formulario ]

Pero, ¿qué sucede si por error incluimos el atributo autofocus a más de un elemento del formulario? Cada navegador web trata este problema de manera diferente:

¿Qué es mejor? ¿enfoque al primer o al último elemento? Depende del punto de vista. Como usuario, es preferible que el auto enfoque se “detenga” en la primera ocurrencia de autofocus, pero como desarrollador web quizás sea mejor que el auto enfoque llegue hasta el último elemento y de esta forma detectar de inmediato el error (y así eliminar los autofocus innecesarios).

Y tú, ¿qué opinas?

Referencia: The Chetankjain Dev Blog

Share

Apache HTTP Server 2.4 disponible

Apache HTTP Server 2.4 Logo¡Tremenda noticia! The Apache Software Foundation acaba de anunciar la disponibilidad de Apache HTTP Server 2.4, aprovechando que se cumplen 17 años de su existencia. Más de 6 años tuvieron que pasar (la versión 2.2 fue liberada el 21 de diciembre de 2005) para tener con nosotros una nueva versión mayor del servidor web más utilizado del mundo (es usado en aproximadamente 400 millones de sitios web).

¡Hay muchas novedades! Aquí algunas de ellas:

  • Desempeño mejorado (menor consumo de recursos y mejor concurrencia)
  • Menor uso de memoria.
  • Soporte de Entrada/Salida asíncrona (asyncronous I/O).
  • Configuración de proxy dinámico inverso (dynamic reverse proxy).
  • Desempeño a la par, o mejor, comparado con otros servidores web dirigidos por eventos (event-driven).
  • Soporte de ajuste detallado del caché para servidores y proxies de alto tráfico.

Es claro que Apache se está adaptando a los tiempos modernos, donde “la nube” es la tendencia clara.

Si el desempeño ha sido mejorado, si ya no consume tantos recursos, y si ya no usa tanta memoria, entonces podríamos considerar a la versión 2.4 como un “renacimiento” de este servidor web.

Apenas Apache HTTP Server 2.4 llegue a los repositorios de ArchLinux y Ubuntu, publicaré las instrucciones de instalación y configuración correspondientes… ¡no se desesperen!

Y tú, ¿usas Apache en tus proyectos? ¿o has preferido migrar a otras opciones, como NGINX o Cherokee?

[Actualización 2014-03-10] ¡Ha llegado Apache 2.4 a ArchLinux! Es un cambio importante y requiere nuestra intervención manual para hacer que nuestro servidor LAMP vuelva a funcionar sin problemas.

Share

WP Function – Colección de Snippets para crear Themes de WordPress

Me entero por un tweet de Smashing Magazine de esta excelente herramienta. Si eres diseñador de themes para WordPress, te la recomiendo.

Se trata de WP Function, una colección de fragmentos de código (snippets) para usarse en el archivo functions.php, eje central de todo theme de WordPress.

Como pueden ver, podemos elegir que elementos deseamos incluir, y al final presionar el botón “Get Your Code!” para obtener los snippets correspondientes, listos para ser insertados en functions.php.

Sin duda, WP Function se convertirá rápidamente en una herramienta indispensable para todo diseñador de themes para WordPress.

Enlace: wpfunction.me

Share