Leaflet es una librería JavaScript de código abierto, compatible con dispositivos móviles, de solo 42 KB y que cuenta con todas las características necesarias para un desarrollador que quiera incrustar un mapa interactivo en su web. Con 3 objetivos por bandera: simplicidad, rendimiento y usabilidad, Leaflet es compatible con la mayoría de las plataformas y navegadores. Además de contar con numerosos plugins desarrollados por la comunidad, también despliega una extensa documentación de la API.

Si queréis mostrar gráficas en vuestra web, sin usar Javascript (JS) ni recargar el sitio con más código del necesario, Chart CSS es vuestra solución. Un montón de estilos, para todas las variantes (barras, columnas, líneas, pastel, etc.), personalizables, responsive y en solo 6KB de CSS.

Si queremos mostrar sugerencias de un elemento en nuestra web, lo mejor es recurrir a globos emergentes de información, lo que -comúnmente- llamamos un Tooltip. Existen numerosos códigos (scripts) para integrar dicha funcionalidad en nuestro sitio. Este me ha gustado especialmente, muchísimas funcionalidades, rápido de cargar, con temas… ¡Creo que no le falta de nada!

Visitar web oficial Tippy.js

Chart JS es una forma simple y flexible de añadir gráficas a tu página web. Gracias a canvas y javascript, podrás insertar todo tipo de diseños. Rápido, gratis, responsive y cuenta con animaciones. No se puede pedir más. Échale un ojo a las demos, si todavía no estás convencido.

Últimamente estoy bicheando Laravel y VUE, creo que son dos entornos muy potentes (frameworks) para desarrollo Web. Os dejo un par de tutoriales (inglés), bastante completos, con los que familiarizaros con ellos:

● Tutorial Laravel y VUE

● Aprender VUE paso a paso desde cero (videotutorial)

Las imágenes y los códigos Java Script son los principales responsables del tiempo de carga de cualquier web (y más hoy en día). Así que, cuando queremos optimizar esta velocidad (un factor importante para el posicionamiento), revisar ambos puntos es una cuestión primordial. He encontrado un tutorial online, gratis y en inglés, sobre cómo hacerlo. Algo técnico, pero muy detallado.

Leer guía: Cargando JS de terceros

Si hay un código que, más de una vez, me haya dado quebraderos de cabeza, ese ha sido el responsable de copiar textos al portapapeles desde la web. Para que no paséis por el mismo mal trago, os traigo Clipboard.JS, un archivo de 3kb y muy fácil de implementar.

• Descargar ClipBoard.js

¡Muchos habréis visto ya este efecto tan de moda! Se trata de ir desplegando (mediante animación o transición) elementos en el cuerpo de la Web mientras vamos haciendo scroll. Si queréis programar algo parecido, aquí os dejo Scroll Reveal. Un código, en Java Script, que os facilitará la tarea.

¿Alguna vez habéis tenido que ordenar obras, diseños o algún tipo de material que tenía diferentes alturas y queríais que se encajaran como en la imagen que acompaña estas líneas? Pues con esta librería JS podéis hacerlo de una forma muy sencilla.

• Bricks.JS

¿Cuántas veces habéis diseñado una web que requiera de un mapa donde ubicar puntos de venta o algo similar? Con jVectorMap obtendréis una solución perfecta para esos casos. Entre sus ventajas cuenta con:

• Compatibilidad con todos los navegadores actuales, incluyendo explorer 6 en adelante.
• Vectorial. Podrás adaptarlo a cualquier ancho y alto sin perder calidad, perfecto también para dispositivos retina display.
• Posibilidad de generar mapas personalizados (por ejemplo el mapa de un centro comercial).
• Mapa del Mundo, Europa y España (por comunidades autónomas).

Visitar sitio de jVectorMap