Calculer la bande disponible de nos internautes avec la méthode window.performance, petite révolution !

J’ai vu passer cette présentation qui parle d’une nouvelle API qui vaut son pesant d’or : http://mattandrews.info/talks/port80-2013/#/33

L’objet window.performance va nous permettre, par exemple, de connaitre la bande passante disponible par l’internaute qui consulte un site. Il existe des méthodes qui permettent déjà de tester la BP disponible en calculant par exemple le temps de téléchargement de rendu d’une image mais d’expérience ça prendre du temps à développer pour des résultats aléatoires. Ici on a une API intégrée au moteur du navigateur et les résultats devraient être plus précis.

Cela permet donc d’ajuster, en javascript, certains comportements de la page comme la présentation de médias adaptés à ce qui est disponible. Par exemple des images ou des vidéos plus une moins lourdes.

Plus détails chez nos amis de HTML5Rocks : http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now et Mozilla : https://developer.mozilla.org/en-US/docs/Web/API/Performance.now()

On y apprend notamment que la grande différence avec Date.now() est que la valeur n’est pas le temps Unix écoulé mais une valeur en milliseconde depuis l’initialisation de la propriété PerformanceTiming.navigationStart

Gérer des cookies avec Javascript

J’utilise depuis longtemps un script de Scott Edwards avec une petite adaptation, pour le rendre privé, pour gérer des cookies, c’est extrêmement simple :


/*
* @name cookie
* @createCookie (method) static
* @readCookie (method) static
* @deleteCookie (method) static
* @param sName (string) Cookie variable name
* @param sValue (string) Cookie variable value
* @param iDays (integer) Cookie duration in days; empty is for session
*/

(cookie = function (){

//Based on Scott Andrew script
this.createCookie = function createCookie(sName,sValue,iDays) {
if (sDays) {
var dDate = new Date();
dDate.setTime(dDate.getTime()+(iDays*24*60*60*1000));
var sExpires = "; expires="+date.toGMTString();
}
else var sExpires = "";
document.cookie = sName+"="+sValue+sExpires+"; path=/";
}; //createCookie

this.readCookie = function readCookie(sName) {
var nameEQ = sName + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}; //readCookie

this.deleteCookie = function deleteCookie(sName){
dDate = new Date;
dDate.setFullYear(dDate.getFullYear()-1);
createCookie(sName, null, dDate);
}; //deleteCookie

return {

createCookie : this.createCookie,
readCookie : this.readCookie,
deleteCookie : this.deleteCookie

}

})();

Si je veux créer un cookie, il faut instancier l’objet cookie :

cCookie = new cookie();

puis appeler la méthode createCookie(); avec les paramètres nécessaires, si l’on omet le troisième, le cookie est valable le temps de la session :

cCookie.createCookie( 'hasVisited', 'true', 10 );

pour le lire, on rappelle le nom de la valeur à lire :

cCookie.readCookie( 'hasVisited' );

et enfin pour l’effacer on appelle la méthode deleteCookie(); avec toujours le nom de la valeur à supprimer :

cCookie.deleteCookie( 'hasVisited' );

Attention la valeur du cookie ‘hasVisited’ est de type String et non booléen, ainsi pour comparer la valeur, on utilise :

if ( cCookie.readCookie('hasVisited') == 'true' ) instructions

et non

if (cCookie.readCookie('hasVisited')) instructions

qui serait toujours faux.