Techniques Article

Déboguer en 3D votre HTML et CSS avec Tilt de Firefox

Déboguer en 3D votre HTML et CSS avec Tilt de Firefox

Tous le monde connaît plus ou moins les outils web pour déboguer le HTML et le CSS. En général une bonne console web fait la job ! On clique sur un élément HTML et on voit le CSS associé. On peut même modifier en temps réel le CSS. Tout ça est clairement bien utile mais depuis un moment firefox intègre nativement TILT qui permet d’obtenir une visualisation 3D de votre page. TILT est très pratique pour déboguer le HTML et le CSS puisque le moteur 3D vous permet de voir plein de chose qu’on ne voit pas d’habitude. Il est ainsi facile déboguer les div non fermé, les couches z-index ou encore les positions absolue CSS.

Comment lancer le débogueur 3D de Firefox

Rien de plus facile! Ouvrez votre firefox et aller sur votre site préféré : Undisconnected.com par exemple 😉 Ensuite « cliquez droit » sur un élément de la page que vous aimeriez inspecter et choisissez l’option contextuelle « Examiner l’élément ». Ceci a pour effet de lancer la console web et de vous afficher l’élément sélectionné dans l’arbre du DOM (Document Object Model) et de vous afficher le CSS relié à cet élément. Jusque là rien de bien nouveau!

Diriger vous ensuite en bas à droite de la fenêtre de firefox, vous devriez voir un bouton 3D apparaître. Cliquer sur ce bouton … et ô magie, une vue 3D de la page apparaît. Il est possible de sélectionner des éléments de la page et d’en voir le CSS ainsi que leur place dans le DOM. 

Vidéo de la vue 3d dans Firefox : TILT en action 

Pour mieux voir à quoi cela ressemble rien de tel qu’une petite vidéo. 

[youtube]http://www.youtube.com/watch?v=lu_h6ko-ugk[/youtube]

Conclusion 

Soulignons l’effort de la fondation Mozilla pour amener aux développeurs une nouvelle génération d’outils puissants pour le débogage. J’espère que cet article vous aidera à gagner du temps et aussi à perdre moins de cheveux 😉 Si vous avez des questions ou que vous souhaitez partager votre expérience de l’outil laissez un commentaire.

Utiliser l’éditeur VIM pour changer de vie

Voici quelques semaines que j’utilise VIM pour éditer les fichiers sur Linux et je dois dire que ça me simplifie la vie. Les puristes rigoleront d’entendre ça car pour eux il s’agit DU meilleur éditeur toute catégorie confondue. J’ai toujours préférer la simplicité de nano et toujours perçu VIM comme un outil complexe … mais c’est en fait l’inverse si l’on connait les quelques commandes de base de VIM. Attention, cet article s’adresse aux débutants Linux (comme moi) et qui veulent en apprendre un peu plus.

Je vais donc vous présenter rapidement ce qu’il faut savoir pour commencer à utiliser VIM  et j’espère convaincre les débutants de le substituer à nano.

Fonctionnement et bases de l’éditeur VIM 

Premièrement il est important de savoir qu’il existe 2 modes, le mode édition (changer les texte) et le mode lecture (on parcours le fichier). 

Lorsqu’on ouvre un fichier avec VIM (vim monfichier.txt), on ouvre le fichier en mode lecture, si on veut éditer le fichier il faudra alors taper « i » (pour insert). Revenir en mode lecture se fera grâce à touche « ESC ». 

Lorsque vous êtes en mode édition, pour sauver le fichier il faut repasser en mode lecture (appuyer sur la touche ESC) et saisir « :w » et appuyer la touche « Entrer ». Le texte  « :w » s’affichera en bas de la fenêtre de votre terminal. Il est aussi possible de sortir du document au moment de sauver le fichier, saisissez alors « :wq ».

Il est aussi simple de sortir du document en saissant « :q ».

Résumé des commandes de bases de VIM

i = passer en mode edition
esc = Passer en mode lecture
:w = ecrire (en mode lecture)
:wq = ecrire et quitter le fichier (en mode lecture)

Conclusion : 

Comme vous pouvez le voir, VIM est au final très facile à utiliser et se révèle tellement plus pratique que nano. Si vous souhaitez gagner en productivité, je vous le conseil.

 

Comment mettre des données à l’échelle avec un calcul simple

Comment mettre des données à l’échelle avec un calcul simple

Je suis actuellement en train de construire un plugin pour WordPress. Ce plugin a pour but d’afficher un tag cloud basé sur une librarie JS (d3.js) qui permet un rendu différent et amélioré du tag cloud de base de WordPress. Des fois certaines contraintes nous obligent à travailler à l’echelle (plus grand ou plus petit) et donc de normaliser un set de données.

L’exemple par le tag cloud (nuage de mots-clés)

Pour un tag cloud le principe consiste à compter le nombre de fois qu’un mot apparaît dans le blog (Ce nombre peut-être de grandeur très variable, par exemple un mot peu apparaître 10 fois comme un autre pourrait apparaître 1000 fois). Ensuite il faut afficher la liste des mots les plus trouvés et les faire apparaître avec une taille de police en fonction de leur nombre d’apparition dans le blog.

Le problème : Pourquoi mettre à l’echelle

Une police est quelque chose qui ne peut pas être modulé dans de grands écarts. Une police de caractère à 1000px par exemple risque de poser un petit problème de design. Et de même un mot qui n’aurait pas une grande fréquence dans un blog ne pourra pas se voir affubler une police à 2px. Vous voyez le problème.

La solution : Comment mettre à l’echelle

La solution à ce problème est d’appliquer une normalisation à votre échelle de donnée. Le principe est de « mapper » chaque valeur à sa valeur à l’échelle. Voici le calcul/code à utiliser :

Résultat du array normalisé entre 12 et 32 :

Conlusion

Il s’agit donc de mapper chaque valeur pour obtenir un nombre entre le minimum et le maximum voulu. Personnellement j’utilise cette technique / formule pour travailler avec des libraries graphiques comme protovis ou d3.js. C’est assurément à garder dans sa boite à outil ! A noté que le code est ici en PHP mais ceci peu très bien se faire en n’importe quel autre language.