Incrustar un SVG dentro del HTML directamente

Lo bueno de los SVG es que puedes modificarlos mediante CSS directamente en el HTML, el único problema es que el SVG debe estar incrustado en el HTML, no mediante una imagen <img>, ni mediante la propiedad content de CSS.

Encontré un script muy bueno que te modifica una etiqueta img que contiene un SVG por su contenido SVG real. El problema viene cuando yo añado el SVG como una propiedad content:

.class {
  content: url('imagen.svg');
}

Para ello he modificado el script anterior para que coja la propiedad content de los selectores CSS que se indiquen y añada el SVG directamente al elemento:

jQuery(document).ready(function() {
  var replaceWithSVG = function(selector, url) {
    jQuery('').appendTo('head');
    jQuery.get(url, function(data) {
      // Replace image with new SVG
      jQuery(selector).prepend(data.replace(/<\?xml[^>]+>/, ''));
    }, 'text');
  }
  var selectors = ['.site-title a', '.btn-video']
  for(var i in selectors) {
    var selector = selectors[i];
    var url = window.getComputedStyle(
    	document.querySelector(selectors[i]), ':before'
    ).getPropertyValue('content');
    url = url.replace(/url\(["']?([^'"\)]+)["']?\)/, '$1');
    replaceWithSVG(selectors[i], url);
  }
});

Progreso de subida de ficheros únicamente con HTML5

Uno de los mayores problemas con los que nos hemos encontrado a la hora de hacer aplicaciones que suben ficheros, es mostrar al usuario cuánto se ha subido y así poder saber cuánto queda. Ahora con HTML5 y XMLHttpRequest Level 2 podemos mostrarlo sin necesidad de parte del servidor.

El script hace uso de Evento de Progreso de HTML5 para poder mostrar:

  • total: total de bytes
  • loaded: bytes subidos
  • lengthComputable: indica si el tamaño del fichero es conocido
  • transferSpeed: velocidad de transferencia
  • timeRemaining: tiempo que falta (en formato Date)

Por ahora solo es compatible con Firefox, Chrome y Safari.

En el post lo explican con gran detalle.

Html5 File Upload with Progress

JSZip: crear ficheros ZIP mediante Javascript

Interesante librería que nos permite crear ficheros ZIP desde Javascript, con unas simples líneas de código podemos crear zips con ficheros de texto, imágenes, crear directorios…

var zip = new JSZip();
zip.add("Hello.txt", "Hello World\n");
img = zip.folder("images");
img.add("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64,"+content;

El único problema que hay es a la hora de generar el nombre del fichero: Firefox crea un fichero con un nombre extraño y acabado en .part, Safari lo nombra “Unknown” sin extensión, Chrome “download.zip” e IE directamente ni funciona la librería.

JSZip

Vía / @devongovett

PDF.js librería Javascript para leer PDF en Canvas

Interesante librería Javascript que nos permite mostrar en Canvas (HTML5) el contenido de un PDF. Puede venir muy bien para aplicaciones móviles, ya que en navegación en escritorio normalmente la gente tiene instalado un visor de PDFs.



  Simple pdf.js page viewer
  
  





  
/ --

PDF.js

Vía / @badass_js

Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5

Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:

document.addEventListener("DOMContentLoaded", function () {
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
      var pop = Popcorn("#video");
      // play the video right away
      pop.play()
      // add a footnote at 2 seconds
        .footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnotediv"
        });
    }, false);

Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.

Popcorn.js

MathJax: librería javascript para mostrar fórmulas matemáticas

MathJax es una librería javascript que permite mostrar fórmulas LaTeX y MathML en nuestras páginas. Es compatible con casi todos los navegadores (menos IE5.5 lógicamente), permite copiar el código TeX y MathML de la página, utiliza fuentes CSS y no imágenes o Flash y muchas cosas más.




MathJax TeX Test Page




When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

MathJax

Close Pixelate: pixela imágenes con HTML5

Close Pixelate es un script que convierte una imagen en su correspondiente pixelada haciendo uso de HTML5 y canvas. Se le pueden indicar las siguientes opciones: resolución, forma del pixelado, tamaño, desplazamiento y canal alpha

Su uso es tan sencillo como ejecutar lo siguiente:

var docReady = function() {
  document.getElementById('portrait-image').closePixelate([
    { resolution : 24 },
    { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
  ]);
};
window.addEventListener( 'DOMContentLoaded', docReady, false);

Close Pixelate

Vía / WebAppers

Carga asíncrona de scripts en Webkit

Webkit está implementando en la última versión la carga de scripts de forma asíncrona, para ello hace uso de los atributos async y defer. Esta carga de scripts se realiza sin detener el renderizado del HTML y añade el evento onLoad para ejecutar un método cuando acabe de cargarse:


La diferencia entre async y defer es que async se ejecuta a la primera oportunidad después de que finalice la carga y antes de que se ejecute el evento load del objeto window, por lo que con bastante posibilidad el script se ejecute asíncronamente y no en el orden en el que se muestra en al página. Los scripts defer se ejecutarán en el orden en el que se indica en la página, pero empezará despues del parseo completo pero antes de que ocurra el evento DOMContentLoaded del objeto document.

Running scripts in WebKit

Vía / CSS-Tricks