• Télécharger la dernière version de Quick Javascript Switcher (.crx)
• Quick Javascript Switcher sur le chrome webstore

Actuellement, il n’existe aucun moyen de désactiver facilement Javascript sous Chrome, même avec l’extension web-developper, et Chris Pederick explique ici pourquoi.
Cette fonction m’étant indispensable, j’ai décidé de me pencher sur le problème, et ainsi est née l’extension Quick Javascript Switcher, les sources et la procédure d’installation sont disponibles sur github.

N’hésitez pas à me faire des retours via twitter ! (même un petit merci ça fait plaisir !)

• Korben en parle : http://korben.info/chrome-javascript-extension.html

J’avais aussi créé une mini extension (en fait juste un raccourci) et un bookmarklet qui permettaient d’accéder directement au panneau Javascript de Chrome. (Plutôt que devoir faire Clé à Molette > Outils > Options > Options avancées > Paramètres de contenu > Javascript…)

[en] Here is the extension to disable javascript in chrome

Because there is no way to enable/disable Javascript on the fly with the current Chrome API, i’ve made this simple extension for open quickly the JS panel. I hope this will be useful to webdeveloppers.

https://chrome.google.com/webstore/detail/bplfgniooljehbfmfbhckfiecijgmadg

Alternative method with Bookmarklets

Just drag these 2 bookmarklets to your Bookmarks Toolbar

1. JS Panel >
2. Switch

Now open JS Panel, and then just click on switch !

please make feedbacks on my twitter @maximelebreton

Ceci est un document collaboratif, vous pouvez donc simplement accéder au Mémo des variables Prestashop, mais aussi y contribuer (via google docs).

CIFR est une solution libre en cours de développement, nous travaillons sur le projet durant notre temps libre, donc ça avance vraiment doucement et il reste beaucoup de choses à régler, mais si jamais le projet vous emballe, nous serions vraiment curieux d’avoir des retours, ou des encouragements !
(Genre “wouah c mortel lé gars continué comme sa !”)

Description du système CIFR

Pour que tout le monde comprenne bien de quelle manière fonctionne le core de cifr, je vais essayer d’expliquer (et je vous invite à me corriger si je me trompe ou si je formule mal quelque chose) chaque étape de la transformation.

L’origine de CIFR part d’un besoin simple, qui est de pouvoir utiliser, à l’identique, une police complexe, qui ne peut être reproduite avec les solutions actuelles (@font-face, cùfon, flir, etc…), et ce, dynamiquement.
Exemple, cette police à effet métallisé ne peut pas être reproduite fidèlement avec les solutions actuelles ::

Et bien, avec CIFR, c’est possible.

Le principe de CIFR se base sur la technique des sprites CSS.

La transformation se fait via php ou javascript, qui convertit le texte en code html et css.

Cela signifie que cifr peut fonctionner totalement sans javascript, qu’il peut également fonctionner totalement sans php, et qu’il peut même fonctionner sans php ni javascript, si on génère le code manuellement grâce à un outil online que nous proposerons.

CIFR s’adresse surtout aux designers, qui souhaitent pouvoir aller plus loin dans le détail, la finesse, et la fidélité de leur police.
qui aiment avoir la main sur chaque pixel, sur chaque propriété css sans avoir à mettre le nez dans un code javascript obscur.

Avantages

1. Liberté graphique totale
2. Fidelité de rendu absolue

1. Légalité : respecte les licences d’utilisation des polices commerciales (contrairement à @font-face, Typeface et Cùfon)

1. Lourdeur : consommation CPU, exécution côté client, temps d’affichage
2. Accessibilité : support par les lecteurs d’écrans, que javascript soit activé ou non

Inconvénients

1. Souplesse : Si vous souhaitez utiliser une police dans plusieurs couleurs, avec une variante italique, et bold, il faut créer une sprite et une css pour chacune des versions
2. Rapidité de mise en place : avec cùfon on convertit la police en js, on insère le tout dans la page et hop c’est près. Avec CIFR, il y’a un peu plus d’étapes avant d’avoir quelque chose d’opérationnel.

Il est mis à disposition un fichier psd, qui contient un tableau de caractères (basé sur le standard ISO 8859-15). L’intérêt de ce tableau est que les caractères sont codés sur 2 octets, et donc il est possible de représenter un caractère via une coordonnée xy.
Ce qui serait impossible avec l’utf8, codée sur 4 octets.

Attention, cela ne veut pas dire que CIFR est codé en ISO 8859-15, il se sert juste de ce standard pour représenter un tableau graphiquement parlant, mais en bien codé en UTF-8.
Par contre, il n’affichera que les caractères ISO 8859-15 (il serait bien trop lourd de devoir générer une sprite en UTF-8).

Voici le fichier psd en question : http://www.maximelebreton.com/labs/cifr/cifr_psd_sprite.zip

Cette sprite est composée de cellules de 100 x 100 px.

(Car une police de caractère dépasse très rarement les 100px.

Mais cela veut dire que si vous souhaitez utiliser une police avec une taille supérieure à 100px, la sprite d’origine et la css fournie ne fonctionnera pas.

Par contre, vous pouvez tout à fait l’adapter pour vos besoins, au niveau du noyau (php ou javascript), cela ne change rien.)

Il est donc ensuite très simple de cibler une lettre via une background-position.

Exemple :
la lettre b est codée 62.
Le sens de lecture du tableau est de y, puis x (ne me demandez pas pourquoi, je l’ai signalé dans la discussion concernant l’article de wikipedia).
y6 et x2 valent sur le tableau -600px et -200px.

donc b = background-position:-200px -600px; (en css, le sens de lecture est de xy)

Pour afficher cette lettre, je créé donc un span avec une classe .iso_62 qui contient la background position citée plus haut.

Maintenant, il faut automatiser la transformation d’une lettre, en utilisant php ou javascript.

Et en voici les étapes :

1. Une fonction récupère le texte (brut ou html) à convertir.
2. Une boucle passe sur chaque caractère, et la stocke dans un tableau
3. Une regex détecte si c’est du code html ou non
4. Chaque lettre est englobée dans un span.iso_xx, et chaque mot dans un span.word, le tout dans un span.cifr qui porte la classe de la police utilisée. Exemple span.cifr.arial-14px