Nuestra misión en programacion.net es mantenerte al día con las últimas y más frescas tendencias del desarrollo web. Es por eso que todos los meses te mostramos una colección cuidadosamente seleccionada de algunos de los mejores recursos con los que me he topado por la red y que considero dignos de vuestra atención.
La lista para este septiembre contiene una amplia variedad de diferentes librerías incluyendo una excelente subida de ficheros mediante arrastrar y soltar, un CSS reset, un minimizador CSS, animaciones de fondo y mucho más.
Dropzone
Librería muy pulida de Javascript que es capaz de convertir cualquier elemento HTML en una zona donde subir archivos mediante arrastrar y soltar (drag and drop). Entre sus características destaca el poder ver una preview de la imagen que estás subiendo in situ, la subida múltiple de ficheros, un medidor de progreso, soporte para ficheros grandes y muchas más. Muy personalizable y sin dependencias.
React-MDL
Google Material Design Lite (MDL) es uno de los frameworks CSS más útiles de toda la red. Combínalo con la librería de Javascript de Facebook, React, y el resultado es React-MDL. Una librería que te ofrece una vasta colecciónde componentes de React personalizados con la moda de material design.
Postmate
Postmate es un wrapper del método Window.postMessage(), permitiendo a las páginasalojar iFrames dentro de ellas. La librería proporciona una API muy simple con la que los desarrolladores pueden acceder de forma segura a diversos datos sobre el iFrame y emitir eventos desde él, hasta la página principal.
Particles
Una librería muy ligera y sencilla de usar para crear fondos animados. Consiste en único fichero js de 2kb, que contiene un solo método, Particles.init({options});, cogiendo un objeto con un montón de personalizaciones. Existen dos animaciones disponibles: partículas individuales, o partículas conectadas formando constelaciones apabullantes.
Recharts
Librería de gráficas desarrollada con React y D3. Las gráficas se crean mediante sintaxis XML, con muchas opciones importantes definidas directamente como atributos. La librería también proporciona de ejemplos muy prácticos en los que podemos ver el uso de varios componentes, y el uso de distintas gráficas, como las de barras, sectores...
Shepherd
Shepherd te permite guiar a los usuarios en un recorrido por tu sitio web o aplicación. Con una sencilla API, puede captar la atención del usuario sucesivamente de una sección a otra. El elemento HTML que quieras enfatizar, se puede remarcar e incluso añadirle una burbuja de texto con un título, descripción y botones de diálogo.
Waud
¿Sabías que, aparte de la tag audio de HTML existe también una API de JavaScript Web Audio compleja, que te ofrece una gran poder sobre la manipulación avanzada del sonido. Waud funciona como una solución de 2 en 1, te permite acceder a la API JavaScrtip si está disponible, y si no al API de HTML.
Grade
Grade.js coge los dos colores más dominantes en una imagen y los utiliza para crear degradados elegantes. Este efecto puede ser utilizado para hacer marcos de imágenes o establecer un fondo a juego con toda tu página. La librería es muy pequeña y no tiene ninguna dependencia.
Rainyday
Añade animaciones de lluvia que calmen tus páginas web utilizando esta pequeña librería de JavaScript. En realidad, Rainyday utiliza un elemento canvas de HTML y su API para dibujar una superficie similar al vidrio con gotas de agua desperdigadas al azar.
CSSnano
En lugar de eliminar espacios en blanco al minimizar hojas de estilo, CSSnano también hace otras optimizaciones tales como fusionar propiedades en sus equivalentes, eliminar comentarios, acortar los valores de color, y muchas cosas más. CSSnano es compatible con varias plataformas, incluyendo Node.js, grunt, gulp, webpack, y el editor de texto Atom.
Multirange
Librería Javascript y CSS para crear input sliders con dos handles, permitiendo a los usuarios seleccionar intervalos entre dos números (por ejemplo, el precio entre 100€ y 500€). En los navegadores en los que no se puede lograr este comportamiento, la librería automáticamente utiliza dos controles sliders separados.
Minireset
Minireset es una librería sencilla para resetear CSS que normaliza sólo las propiedades CSS más importantes sin aditivos. Restablece los tamaños de fuente, márgenes y paddings, define el box-sizing a border-box en todos los elementos, y aplica otros conjuntos por defecto muy útiles. Puesto que es muy pequeña, puedes modificar fácilmente la librería si debes modificar algunos de los valores.
In-view
Librería que rastrea los elementos de la página y reacciona cuando están a punto de salir o entrar del viewport. La librería no tiene dependencias externas y es muy fácil de usar con una sintaxis sencilla de devolución de llamada:
inView('.someSelector')
.on('enter', doSomething)
.on('exit', el => {
el.style.opacity = 0.5;
});
Papa Parse
Papa Parser es un potente parseador de CSV del lado del cliente. Está lleno de características impresionantes como la conversión a JSON, soporte de cadenas, archivos locales o URL, un modo asíncrono, un modo rápido, y mucho más. Esta librería no tiene dependencias y puede funcionar igual de bien con vainilla JavaScript o jQuery.
Fuente: tutorialzine.com