progressjs-w550

Pump up da Project: 5 JavaScripts imprescindibles (edición de febrero de 2014)

¿Ya has oído hablar de «Puede que no necesites jQuery»? Ese sitio creó ondas poco después de su lanzamiento hace unas semanas. Sugiere que sería mejor apuntar directamente a las características modernas del navegador, en lugar de confiar en jQuery para lograr básicamente lo mismo. Por otra parte, quién como desarrollador puede realmente determinar qué navegadores definitivamente no se utilizarán para visitar el proyecto que se va a crear. Tengo mis dudas sobre jQuery en general, pero siempre he tenido simpatía por los JavaScripts que son autónomos y no dependen de jQuery. No recomendaría optar por CSS puro en este momento, incluso si es teóricamente posible. Se necesita JavaScript de todos modos, entonces, ¿por qué no usarlo cuando sea adecuado? A continuación, reuní un grupo nuevo de los que más me impresionaron últimamente…

JavaScript: ¿Por qué no?

El uso de JavaScript no solo es adecuado cuando no hay otras opciones válidas disponibles. Usar JavaScript tal como lo leo ya es adecuado, tan pronto como otras soluciones sean más complejas, tomen más líneas de código o se retrasen en otras formas. En lugar de romperme los dedos escribiendo 10 líneas con un código preestablecido, generalmente prefiero usar JavaScript. La mayoría de los proyectos en los que colaboro tienen jQuery incorporado de todos modos, entonces, ¿por qué no hacer uso de la funcionalidad que ya existe? Algunos proyectos míos más pequeños no usan jQuery, pero confían en JavaScript de una forma u otra. También allí, no veo la necesidad de prescindir por completo de JavaScript, incluso si pudiera vivir sin él.

Antes de que levante sospechas de que podría querer convertirte en un misionero, pasemos a nuestra pequeña lista:

ProgresoJS

ProgressJS es una biblioteca de JavaScript y CSS3 que tiene como objetivo crear y administrar barras de progreso para cualquier objeto en una página de una manera visualmente atractiva. Desarrollado por Afshin Mehrabani de Teherán, ProgressJS se lanzó a mediados de febrero y aún se encuentra en su etapa beta.

El uso es simple. ProgressJS puede funcionar para la página como un todo, mostrando una barra de progreso justo encima del extremo superior de la ventana visible del navegador. Habiendo incrustado ProgressJS y su CSS correspondiente, la llamada se ve así:

progressJs().start();

Teniendo ProgressJS manejando un elemento específico, la llamada varía ligeramente a:

progressJs("#targetElement").start();

Eche un vistazo a la demostración y descargue el script de Github. Es completamente gratuito para uso privado y comercial bajo los términos de la licencia MIT.

WOW.js

wowjs-w550

Wow.js oculta los elementos HTML hasta que llegan a la ventana gráfica del usuario. ¿Porqué querrías eso? Bueno, aporta algo de movimiento a sus páginas web demasiado estáticas.

Para la animación, Wow.js se basa en una biblioteca de animación CSS separada. Por defecto espera Animar.css para realizar la acción. Si prefiere una biblioteca diferente, simplemente cámbiela enlazándola.

Después de tener Wow.js incrustado e inicializado así,

espera elementos equipados con la clase wow. Los elementos que lleven esta clase permanecerán ocultos a la vista hasta que los usuarios se desplacen lo suficiente como para llegar a la ventana gráfica. Tan pronto como eso ocurre, el elemento se vuelve visible.

Para un poco más de atractivo visual, active una de las animaciones disponibles de la biblioteca CSS utilizada en la clase de esta manera:

My unique content to be revealed

Wow.js fue diseñado por el conocido Vincent LeMoign alias Webalys y codificado por Matthieu Aussaguel. Es completamente gratuito para uso privado y comercial bajo los términos de la licencia MIT.

excavado.js

dugjs-w550

Rogie King de Montana (Estados Unidos) quería una forma de mostrar su cartera de Dribbble en su sitio. Descubrió que Dribbble ofrece feeds en JSONP y, por lo tanto, creó Dug.js. Este pequeño JavaScript puede leer cualquier feed JSONP y mostrarlo muy bien en cualquier sitio web.

Todo lo que necesita es un servicio con un extremo de API compatible con JSONP y una plantilla HTML para mostrar sus datos. 500px, Instagram, Pinterest, Dribbble (obviamente), Github, todos ofrecen JSONP. Con Dug.js, crea una salida para su propio sitio, por ejemplo, así:

Hay más parámetros para explorar. Puede descargar Dug.js y usarlo libremente sin más requisitos, ya que está licenciado bajo WTFPL (do What The Fuck you want to Public License). Un poco vergonzoso, pero impresionante 😉

Zoomerang.js

zoomerangjs-w550

Evan You, el creador de Zoomerang, vive en Nueva York y trabaja para Google aunque originalmente era de Shanghái. Zoomerang.js sirve solo para una tarea, pero la hace extremadamente bien. JavaScript le permite acercar y alejar casi cualquier elemento de su página, sin importar si se trata de una imagen, un texto o cualquier otra cosa. La página sigue siendo desplazable, incluso. Acercar y alejar son dos partes del mismo interruptor. Haga clic en un elemento y se acerca, haga clic de nuevo y se aleja.

Zoomerang.js puede descargarse de Github y usarse completamente gratis bajo los términos de la licencia MIT.

Marcador de posición

placeholdem-w550

El desarrollador web Jack Rugile de Denver, Colorado (Estados Unidos) quería que el marcador de posición en los campos de entrada no solo fuera visible hasta el enfoque, sino también después del desenfoque. Y no solo quería que el texto desapareciera y volviera a aparecer, sino que quería una buena eliminación incremental y volver a escribir. Eso es lo que hace Placeholdem.

Agregue un marcador de posición a una entrada o área de texto:

Y ejecute Placeholdem en todos los elementos con marcadores de posición:

Placeholdem( document.querySelectorAll( '[placeholder]' ) );

Esa es toda la magia. Placeholdem es completamente gratuito para uso privado y comercial bajo los términos de la licencia MIT.

enlaces relacionados

#Pump #Project #JavaScripts #imprescindibles #edición #febrero

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.