Réduire la taille d’une web font et bien plus encore…. [bookmark]

Le site FontSquirrel propose un outil très puissant qui va vous transformer votre font en tous les formats (woff, eot, ttf, svg, …), mais il vous propose aussi de réduire la taille de votre font pour une utilisation Web (ce qu’on nomme le « subsetting »). Par exemple si vous n’allez avoir besoin que des chiffres, il est dommage de télécharger une font de 500ko qui contient tous les caractères de tous les alphabets, alors qu’en ne conservant que les chiffres on pourrait tomber à 10ko.

Un outil à utiliser de toute urgence si vous devez traiter avec des web fonts !

Trouver l’heure et la date en Javascript d’un autre timezone [programmation]

Pour récupérer l’heure courante d’un autre timezone voici comment faire (ici je prends l’exemple de CST qui est UTC-5, c’est-à-dire -300 minutes) :

new Date(new Date(new Date().toUTCString()).setMinutes(-300));

Ensuite il faudra utiliser les fonctions getUTC* pour avoir les informations relatives à la nouvelle heure :

var dLocal = new Date(); // -> Thu Nov 03 2011 09:50:19 GMT+0100
var dOffset = new Date(new Date(new Date().toUTCString()).setMinutes(-300));
var offsetHours = dOffset.getUTCHours(); // -> 3

Envoyer un email à plusieurs personnes via un Workflow [Sharepoint]

Avec Sharepoint et les Workflow il est possible d’envoyer des emails à une personne (ou un groupe) en se basant sur un champs « Personne » de la Liste. Il est également possible d’envoyer un email à plusieurs personnes d’un coup grâce à ce même champs, mais en choisissant l’option « Sélection Multiple ».
Attention cependant: lorsque vous créez le Workflow qui va envoyer l’email, il ne va pas vous proposer le champs en question tant qu’il est en « Sélection Multiple » ! Pour que cela fonctionne, il faut désactiver la sélection multiple le temps de configurer le workflow, puis l’autoriser de nouveau.

C’est donc simplement l’interface utilisateur de Sharepoint Designer qui bloque, alors que c’est techniquement possible.

Plus d’informations : http://social.msdn.microsoft.com/forums/en-US/sharepointworkflow/thread/ebcb81ec-ba36-4a4c-bd01-26dc2c4d0913/

Supprimer les tags <script> d’une chaine de caractères [javascript]

Il suffit d’utiliser la chaine RegEx suivante :

var myText = 'blah blah <script type="text/javascript">foo=bar;</script>blah blah';
var myStripText = myText.replace(/<script.*?>[\s\S]*?<\/.*?script>/gi,"");
console.log(myStripText); // -> 'blah blah blah blah'

On peut également utiliser une expression régulière pour supprimer les liens javascripts :

var myText = 'blah blah <a href="javascript:alert(gniii)">foo</a>blah blah';
var myStripText = myText.replace(/javascript.*:[^"]*/gi,"");
console.log(myStripText); // -> 'blah blah <a href="">fooblah blah'

Revenir à l’actualité récente de Facebook suite à la mise à jour [Astuce]

Ces derniers jours Facebook a mis en place une nouvelle page d’accueil qui montre seulement les 20 dernières minutes des actualités récentes, et le reste dans un Top Story, assez moisi il faut bien le reconnaître…

Pour revenir à un système avec toutes les actualités récentes de ses amis, il suffit d’une petite astuce :

  1. Allez sur https://www.facebook.com/bookmarks/lists puis cliquez sur « Créer une liste » que vous pouvez nommer « Tout le monde » (ou « tous mes amis » ou « actualités récentes ») par exemple

  2. Maintenant cliquez sur « "Ajouter des ami(e)s" à cette liste pour voir leurs actualités », et choisissez tous vos amis (un par un….); pensez aussi à ajouter les Pages dont vous êtes fans pour continuer à suivre leurs actualités (en haut à gauche choisissez "Pages" au lieu d’ "Amis")
  3. Une fois terminé, vous aller voir « Tout le monde » (ou le nom que vous avez donné à la liste) dans la colonne de gauche au niveau de « Listes »
  4. Et voilà c’est prêt. Maintenant, lorsque vous voudrez voir l’actualité récente de vos amis, vous n’aurez qu’à cliquer sur ce « Tout le monde » dans la colonne de gauche.
    Vous pouvez aussi survoler ce « Tout le monde » avec la souris puis cliquer sur le petit crayon qui apparait à gauche et choisir « Ajouter aux favoris » pour être sûr de l’avoir de disponible facilement.

    Et le voilà de disponible dans vos favoris :

Aussi, n’oubliez pas d’ajouter vos nouveaux amis dans la liste « Tout le monde » à chaque fois pour être sûr de continuer à voir leurs actualités récentes.

Attention ! Si vous entrez un nouveau statut à partir de cette page, prenez en compte que ce statut pourra être vu par toutes les personnes de cette liste (c’est-à-dire tous vos amis). Cet avertissement vaut seulement pour ceux qui limitent leurs statuts à certains groupes.

Comment déboguer son code Javascript ? [programmation]

Évidemment vous pouvez utiliser Firebug (add-on Firefox) pour trouver les problèmes dans votre code, que ce soit des erreurs de syntax (syntax error) ou autre. Même s’il semble qu’avec la version de Firebug 1.8.x l’information fournie ne soit plus autant utile (mais espérons que ce ne soit que temporaire).

Il existe des sites web qui fournissent un débogage du Javascript, et mon préféré est http://www.javascriptlint.com/. Il vous montrera rapidement ce qu’il ne va pas dans ce que vous avez entré : oubli de parenthèse, de point-virgule, mauvaise déclaration, …

De plus si vous utilisez Notepad++ ou un autre éditeur, il est facile d’adjoindre la puissance de JSLint à votre programme préféré. Dans ce thread on vous explique tout.
En l’occurrence voici comment faire pour Notepad++ :

  1. Télécharger la version pour Windows, puis dézippez le fichier;
  2. Maintenant ouvrez Notepad++, puis dans le menu Plugins vous trouvez NppExec, et après Execute… (ou touche F6);
  3. Dans la zone qui apparait entrez la commande suivante (en supposant que vous ayez mis le fichier dézipppé dans « C:\Program Files\JavascriptLint\ ») :
    "C:\Program Files\JavascriptLint\jsl.exe" -conf "C:\Program Files\JavascriptLint\jsl.default.conf" -process "$(FULL_CURRENT_PATH)"
  4. Cliquez sur « Save… » et donnez un nom à cette commande;
  5. Vous pouvez désormais utilisez JSLint directement dans Notepad++
  6. Dans le fichier jsl.default.conf vous trouverez les options et les warnings à supprimer

Tester les performances d’un code Javascript via un benchmark [performance]

Je vous conseille de tester régulièrement votre code Javascript pour voir les performances par rapport à d’autres commandes. Il arrive qu’on hésite entre deux (ou plus!) façons de faire.

Il existe le populaire http://jsperf.com/ qui offre la possibilité de tester autant de bouts de code que l’on souhaite, en appelant même quelques framework bien connus (comme jQuery).

Mais si vous avez des besoins un peu plus particulier, ou vous devez travailler sur un environnement restreint, alors il est possible d’utiliser JSLitmus. La façon de l’utiliser est incroyablement simple :

<script src="JSLitmus.js"></script>
<script>
JSLitmus.test('Mon premier test', function() { /* do something */ });
JSLitmus.test('Mon second test', function() { /* do something else */ });
</script>

Cela fait apparaître un bouton « Run tests » avec un petit tableau. Une fois le test fini le tableau et un graphique vous donnent les informations nécessaires, et en l’occurrence plus le chiffre (nombre d’opérations/sec) est grand et mieux c’est.

Voici un exemple qui montre que l’utilisation de search est bien plus rapide que de déclarer une RegExp puis appeler match :

<html>
<head>
<script src="http://www.broofa.com/Tools/JSLitmus/JSLitmus.js"></script>
</head>
<body>
<script>
JSLitmus.test('Mon premier test', function() { var regExp = new RegExp("pouet$"); var ok = ("pouet".match(regExp) != null); });
JSLitmus.test('Mon deuxième test', function() { var ok = ("pouet".search("pouet") != -1); });
</script>
</body></html>

Résultat :

IE8 Developer Toolbar qui ne s’affiche plus [astuce]

Avec Internet Explorer il est possible d’utiliser un débogueur qu’ils nomment « IE Developer Toolbar ». C’est très peu puissant, mais quand on doit travailler sur ce navigateur ça peut être utile…

Pour l’activer il faut appuyer sur la touche F12, seulement, dans mon cas, même si elle apparaissait bien dans la liste des fenêtres ouvertes, quand je cliquais dessus rien ne se passait : elle ne s’ouvrait pas ! La solution consiste à faire un SHIFT + Clic Droit sur la fenêtre puis choisir « Maximize » (ou « Agrandir » en français), et là votre Developer Toolbar va s’ouvrir en grand. Les pré-réglages étant mauvais, la fenêtre s’ouvre dans un étrange mode.

Simple, mais il fallait y penser…

L’option « Déplacer vers le groupe » a disparu des onglets de Firefox ? [astuce]

Je me suis retrouvé dans une drôle de situation : après avoir ré-installé Firefox 5.0.1, je ne trouvais plus l’option « Déplacer vers le groupe » qui est présent lorsque vous faites un clic droit sur un onglet comme ceci :
Démonstration du menu d'options

Pour la faire réapparaître, c’est tout simple : il suffit de créer un nouveau groupe d’onglets !

L’opérateur typeof en Javascript [programmation]

Si vous avez déjà essayé d’utiliser typeof en Javascript pour trouver le type d’un objet, vous avez dû vous rendre compte que cet opérateur n’aide pas beaucoup….

Le typeof par défaut de Javascript

Déjà, comme typeof est un opérateur, vous n’avez pas besoin d’utiliser des parenthèses ou une quelconque autre décoration.
Ainsi on aura :

typeof 2; // -> "number"
typeof "Kodono"; // -> "string"

On peut remarquer qu’ici typeof nous a bien donné ce qu’on attendait… mais voilà ce qu’il se passe avec d’autres exemples :

typeof []; // -> "object"
typeof new Boolean(true); // -> "object"
typeof /a/; // -> "object"
typeof new Date(); // -> "object"
typeof null; // -> "object"

Comme on peut le voir, l’opérateur va fournir un « object » dans de nombreuses situations, ce qui n’aide pas du tout.

Créer un meilleur typeof

Pour faire court, on peut appliquer Object.prototype.toString.call à un objet qui va retourner une chaine au format « [object Class] ». Quelques exemples :

Object.prototype.toString.call(new Number(2)); // -> [object Number]
Object.prototype.toString.call(new Date()); // -> [object Date]
Object.prototype.toString.call(/a/); // -> [object RegExp]

Maintenant que l’on sait ça on peut créer notre propose fonction typeOf (en sachant que Object.prototype peut se raccourcir par ({})/).
On trouve sur Internet différentes façons de faire que je vais vous proposer.

La plus lente

Elle n’est pas très rapide (dûe à l’utilisation des expressions régulières), mais elle est très courte :

function typeOf(obj){return({}).toString.call(obj).match(/\s(\w+)/)[1]}

console.log(typeOf(new Number(2))); // -> Number
console.log(typeOf(new Date())); // -> Date
console.log(typeOf("test")); // -> String
console.log(typeOf(null)); // -> Null
console.log(typeOf(/a/)); // -> RegExp
console.log(typeOf([])); // -> Array
console.log(typeOf(function(){})); // -> Function

jQuery.type

Si vous utilisez déjà jQuery, vous pouvez utiliser la fonction jQuery.type qui propose une fonction assez rapide et efficace.
Ils utilisent la méthode suivante :

function typeOf(obj){
  var c2t={"[object Boolean]":"Boolean","[object Number]":"Number","[object String]":"String","[object Function]":"Function","[object Array]":"Array","[object Date]":"Date","[object RegExp]":"RegExp","[object Object]":"Object"};
  return obj==null?String(obj):c2t[({}).toString.call(obj)]||"object";
}

console.log(typeOf(new Number(2))); // -> Number
console.log(typeOf(new Date())); // -> Date
console.log(typeOf("test")); // -> String
console.log(typeOf(null)); // -> Null
console.log(typeOf(/a/)); // -> RegExp
console.log(typeOf([])); // -> Array
console.log(typeOf(function(){})); // -> Function

La plus courte et rapide

Celle-ci ne prend que quelques caractères, et se veut rapide en plus !

function typeOf(obj) {return({}).toString.call(obj).slice(8,-1)}

console.log(typeOf(new Number(2))); // -> Number
console.log(typeOf(new Date())); // -> Date
console.log(typeOf("test")); // -> String
console.log(typeOf(null)); // -> Null
console.log(typeOf(/a/)); // -> RegExp
console.log(typeOf([])); // -> Array
console.log(typeOf(function(){})); // -> Function

Conclusion

Si vous utilisez déjà jQuery dans votre code, alors vous pouvez faire confiance à jQuery.type, sinon je vous conseille la dernière fonction proposée :

function typeOf(obj) {return({}).toString.call(obj).slice(8,-1)}