Nes’ Blog

Comment débugger un code Javascript

En ce moment je ne fous vraiment plus rien sur mes projets, en fait je n’ai tout simplement pas la motivation (et ça m’énerve parce que les idées arrivent en masse). Dès que j’essaye de me mettre à coder je perds toute envie et je pars jouer à TF2. Y’a des périodes comme ça… ça m’est déjà arrivé et ça arrive aussi à d’autres. Bref, en ce moment je suis en mode flemmard.

Donc, vu que je n’ai rien à vous raconter sur ce que je fais (je joue, ça vous intéresse pas trop je suppose ^^’ ), j’ai décidé de sortir un petit article sur comment débugger un code en Javascript parce que je vois souvent pas mal de gens sur le forum du SdZ qui disent que “ça ne marche pas”. Oui, c’est bien, mais un peu plus d’infos et de recherche ça serait mieux non ? Si j’avais appelé le SdZ à la rescousse pour chacun de mes problèmes, j’en serai encore à coder le prototype de Sliding Menu…
Il faut savoir être un minimum autonome les gens ! Plein de solutions existent pour debugger un code, et parmi elles se trouvent des moyens très simples. Voici les principales :

• La console de votre navigateur : Non, la console n’est pas là pour faire joli sur votre bureau de geek, elle sert réellement à quelque chose ! Si je prends Firefox pour exemple, la console liste les erreurs de style CSS rencontrées mais aussi les erreurs de syntaxe dans votre code JS. La première chose à faire quand votre code ne fonctionne pas c’est de jeter un coup d’oeil à la console (elle est généralement accessible sur tous les navigateurs dans le menu des outils ou bien en mode développeur).
• Utiliser la fonction alert() : Généralement, si on a rien dans la console et que le code ne fonctionne toujours pas, c’est à cause d’une valeur erronée. Quand je parle de valeur erronée, je veux désigner par là tout ce qui concerne les variables. Imaginons que vous ayez une variable permettant de spécifier la position d’un DIV mais que celui-ci ne soit finalement pas à l’endroit auquel vous vous attendiez. Est-ce qu’il s’agit alors d’une erreur de CSS ou bien d’une erreur de JS ? Pour vérifier cela il vous suffit alors d’afficher la valeur que vous avez attribué à la position de votre DIV à l’aide d’un alert() et vous serez très vite fixé car si c’est la bonne valeur, il s’agit alors d’une erreur de CSS, dans le cas contraire il s’agira très probablement d’un mauvais calcul pour cette valeur.
  Le alert() est aussi très pratique pour vérifier si une condition s’est bien exécutée, il vous suffit de placer un alert() avec un message de votre choix dans la condition et si il est affiché alors la condition a bien été exécutée.
  Toutefois, le alert() a un défaut en ce qui concerne la lecture de variables : il ne peut pas être utilisé dans une boucle qui se répète de trop nombreuses fois. Pour cela il y a une autre façon de faire décrite ci-dessous.
• Afficher les valeurs directement dans le HTML : C’est “on ne peut plus bête”, il vous suffit de créer une balise de type SPAN (ou autre, au choix), de lui attribuer un id et d’y afficher les valeurs souhaitées. Simple, mais efficace. Généralement, j’utilise cette méthode quand je veux afficher le contenu d’une variable qui se trouve dans une boucle ou bien dans une fonction exécutée par un setInterval().
• Utiliser un debugger : Bon, cela est réservé à des besoins assez particuliers. Certaines personnes utilisent le debugger pour lire les valeurs de leurs variables pendant l’exécution du code mais je trouve ça parfaitement inutile, un bon vieux alert() est bien plus efficace ! En revanche, l’utilité d’un debugger se révèle lorsqu’il s’agit d’analyser du DHTML car si vous modifiez votre page web à l’aide du JS, le nouveau code HTML ne sera pas accessible, or le debugger, lui, sait afficher ce code modifié. Si vous souhaitez avoir un debugger sous Firefox, il vous faudra utiliser le plugin Firebug (perso, je préfère utiliser le debugger intégré à Chrome).
• Demander de l’aide sur un forum : Oui, je le mets en dernier car on demande de l’aide quand on ne trouve pas et non pas quand on a la flemme de chercher ! Mettez-vous bien ça dans le crâne : le forum c’est le dernier recours à utiliser !
  Personnellement, quand j’aide sur un forum, je le fais pour quelqu’un qui a envie de progresser et non pas pour un type qui veut qu’on lui finisse son code alors qu’il se tourne les pouces.

Voilà pour ma petite liste qui, autant le dire, n’aura pas servi aux habitués du Javascript. En revanche, j’espère avoir aidé certaines personnes qui débutent à mieux comprendre comment trouver leurs erreurs. Certes, c’est pas toujours très simple de les trouver mais c’est tellement plus enrichissant de le faire soi-même =)

À noter que tout ce que j’ai écrit ne s’applique pas uniquement au Javascript mais aussi à beaucoup d’autres langages (même pour la programmation logicielle), il suffit juste de modifier les méthodes d’affichage.

Nes’

Speedbox, ça avance !

Avant de commencer, je profite de cet article pour vous souhaiter à tous une très bonne année, pleine de bonheur, etc…
Je ne sais pas pour vous mais j’ai deux résolutions pour l’année :

• Avoir mon Bac
• Me raser plus souvent \o/

Bien, on arrête les conneries (parce que dans un sens la nouvelle année ce n’est qu’une simple formalité hein… je déconne, tapez pas T_T ) et on passe au vif du sujet :

J’ai commencé, il y a quelques jours, à bosser sur Speedbox et il se trouve que ça se passe plutôt bien et que je ne rencontre pas trop de problèmes (pour le moment). Pour ceux qui ne savent pas de quoi je parle, je vous renvoie à cet article (à partir de la troisième image).

Pour le moment, j’ai codé les fonctions principales qui sont en gros : le chargement de l’image, le positionnement de tout le bardaf et enfin l’affichage de l’image. Les animations viendront plus tard.

J’ai aussi un peu revu mes priorités, avant je voulais pas mal bosser sur le design, mais comme je reste une loque dans ce domaine, il restera donc comme il est actuellement (en clair, pas terrible).
Par contre j’ai implémenté l’une des fonctionnalités principales : le redimensionnement des images quand celles-ci sont trop grandes. Alors faut pas trop rêver non plus, il s’agit d’un redimensionnement par le biais de balises HTML, rien de bien incroyable, mais au moins ça marche (même si c’est un peu gourmand en ressources).
Mieux encore ! Si vous redimensionnez la taille de votre fenêtre, le design se réorganisera automatiquement afin que la mise en page ne soit pas détruite !

Bref, après vous avoir gavé de tout ça, je vous invite à essayer et à me dire ce que vous en pensez. Pour le moment il n’y a que très peu de fonctionnalités implémentées donc j’aimerais que vous me donniez un avis sur ce qui existe et non pas sur ce que vous voudriez voir (on verra ça plus tard ^^ ).

Ah, aussi ! J’ai découvert deux bugs pour le moment, ça ne sera pas utile de les rapporter :

• Quand on réduit la taille d’une fenêtre sous IE, le fond ne s’ajuste pas correctement au niveau de la hauteur.
• Sous Opera, le fond opaque ajoute un blanc à la fin de la page.

Merci pour les éventuels commentaires,
Nes’

Tags: SpeedBox

Sliding Menu v1.3.1

Déjà ? Eh bien oui !

J’avais pourtant bien dit que je souhaitais faire une pause pour ce projet mais il s’est avéré que ce n’était finalement pas possible tant que tout ne serait pas parfait.

Je suppose que vous aviez remarqué que mon script ne gérait pas l’opacité des images sous IE. Je ne comprenais pas pourquoi et j’avais donc quand même décidé de sortir la nouvelle version sans attendre de régler ça (mauvaise idée en fait). Et puis hier soir j’y ai repensé dans mon lit (c’est là que je réfléchis le plus =° ) et je me souvenais que je n’avais essayé ça qu’en local, ce matin j’ai donc essayé en ligne : aucun résultat !
Comme je suis du genre têtu j’ai donc continué à chercher et j’ai fini par découvrir que cette saloperie de filtre pour l’opacité ne pouvait s’appliquer que sur des éléments HTML possédant le layout, et le layout avec IE c’est pas toujours drôle…

Bref, j’ai fini par résoudre le problème en appliquant le filtre d’opacité directement sur les images et non pas sur les liens qui les contiennent. Tant que j’y étais, j’ai cherché comment faire fonctionner l’opacité sous Konqueror mais ça m’a saoulé (navigateur alakon, je l’ai toujours dit).

Donc, pour ceux qui le souhaitent, la version 1.3.1 de Sliding Menu est disponible et arrange cette histoire d’opacité pour Internet Explorer, j’en ai aussi profité pour faire une légère restructuration du code, plus propre sur certains points.

Au passage, j’ai fini de lire mon roman : “La Guilde des Magiciens”. Je le recommande à tout ceux qui aiment le fantastique, c’est vraiment génial, maintenant il faut que j’achète les 2 autres tomes ^^ .

Concernant le blog, je ne sais pas si vous avez remarqué mais j’ai ajouté en haut à gauche un petit lecteur flash, j’y mettrai la musique que j’apprécie (d’avance, oui, j’ai des goûts bizarres). Je pense que je changerai les morceaux assez fréquemment.

Nes’

Tags: Sliding Menu

Sliding Menu v1.2.4 et Noël : quel rapport ? Aucun !

Oui, ça fait longtemps que je n’ai plus donné de nouvelles, mais j’ai plusieurs alibis (libre à vous d’y croire ou non) :

• J’ai eu quelques problèmes avec la nouvelle mise à jour de Wordpress (dont l’url-rewriting foireux comme l’avait fait remarquer smilz).
• J’ai eu peu de temps de sommeil à cause de la série manga GetBackers, je me suis couché vers 1h à 2h du mat’ chaque soir parce que je lisais environ 2 ou 3 tomes dans mon lit à chaque fois. Faut que mes amis arrêtent de me prêter des mangas sinon je vais pas tenir toute l’année…
• Et puis j’avais rien à vous dire §

Enfin bref, même si il y aura eu pas mal de temps écoulé, l’important est que la version 1.2.4 de Sliding Menu est terminée (depuis un moment en fait =° ). Donc pour marquer le coup j’ai décidé de lui offrir une page web (c’est ça qui a pris le plus de temps xD ). J’ai essayé de la faire la plus élégante possible et je pense avoir réussi même si ce n’est pas incroyablement beau, disons que c’est sobre.

La page web en question

Concernant le menu lui-même, plusieurs modifications ont été apportées, les voici :

• La première lettre du nom de la classe est maintenant une majuscule (pensez-y !).
• Quelques corrections de bugs (hauteur des fondus mal définie, z-index et margin foireux, etc).
• Modification de la licence (passage de la GPL à la LGPL).
• Remplacement du terme “melted” par “fade” dans le code (erreur de traduction).
• Initialisation automatique du menu (aucun appel à la méthode init() n’est nécessaire dorénavant).
• Si les fonds ne sont pas spécifiés on les remplace alors par un système d’opacité progressif.
• Vérification de la largeur des images, le menu se lance pas si elles n’ont pas toute la même largeur.

Bref, on peut donc dire qu’il y a eu 2 ajouts majeurs qui sont donc la nouvelle animation (compatible avec tous les navigateurs gérant le style CSS opacity) et le chargement du menu uniquement lorsque toutes les images font la même largeur. Cette dernière fonctionnalité fait aussi office de vérificateur de chargement, si toutes les images ont commencé à se charger alors on peut lancer le menu sans risque, en revanche, si une image ne se charge pas alors le menu ne s’exécutera pas.

Bon, on va maintenant parler de ma vie vu que ça vous intéresse (ou pas) :

En ce moment nous sommes en pleine période de Noël (sans blague ?!) et il paraîtrait même que tout le monde se fait des cadeaux pendant cette période ! Bien sûr, comme je suis une véritable crevure, je pense avant tout à moi et il se trouve que je sais déjà quoi m’offrir =°

Pour commencer j’ai décidé d’acheter un bouquin Fantastique nommé “La Guilde des Magiciens” qui fait partie de “La Trilogie du Magicien Noir”. J’avais offert ce bouquin à ma sœur l’année dernière mais j’avais pas eu le temps de le finir avant de le lui remettre alors qu’il me plaisait (vu qu’elle habite à Paris et moi à Lyon, je pouvais pas le continuer), j’ai donc décidé de me l’acheter pour cette année =p

Voici la couverture pour les intéressés ainsi qu’un lien vers le résumé :

Pour ceux qui ne le savent pas, je suis un fan de mangas et d’animes (une liste de tout ce que je possède se trouve ici). J’ai en tout 54 volumes amassés en une année, et comme on en a jamais assez, j’ai quelques séries en vue et que je compte acheter plus tard (elles sont inscrites sur le lien ci-dessus). Et il se trouve que je vais très probablement entamer l’une d’elles qui est très connue : Love Hina ! Cela fait un moment que je la lorgne, mais faute d’argent je ne pouvais décemment pas commencer à l’acheter, je préférais continuer mes séries actuelles. Donc pour Noël je pense que je vais m’offrir les deux premiers tomes. En fait j’ai déjà lu la série mais je voudrais la posséder pour la relire autant de fois que je le souhaite ^^ .

Les couvertures des deux premiers tomes :

Et puis comme un manga ne vient jamais seul (comment ça c’est pas la bonne expression ?!), j’ai l’intention de m’offrir le 8ème tome de la série Lanfeust des Étoiles qui est sorti il y a maintenant 2 ou 3 semaines, le voici :

Voilà tout pour mes “occasions de Noël”, enfin plus ou moins… je m’achèterai peut-être d’autres choses (dont mon joystick qui se fait attendre).

Sinon je crois que c’est tout ce que j’avais à dire… Ah si ! Il manque quelque chose !

NOYEUX JOËL !!!

Nes’

PS : Selon Wordpress j’ai très exactement écrit 792 mots de conneries, c’est beau la technologie =’)

PPS : J’avais oublié de dire que je n’ai pas été accepté en tant que checkeur pour l’anime Hyakko.

Tags: Hyakko, Joystick, Lanfeust, Love Hina, Sliding Menu

Quelques petites choses…

Bon, je n’ai pas de sujet bien précis en revanche j’ai bien envie de vous parler de deux ou trois choses donc autant rassembler tout ça dans un seul et même article, ça fait des économies de papier. En plus ça fait un moment que je n’ai plus rien écrit =p

• Commençons par une innovation pour Firefox. Je rappelle tout d’abord aux incultes que la dernière version du célèbre navigateur Firefox est la version 3.0 et que la version 3.1 ne devrait plus trop tarder (une bêta existe déjà). Si je vous annonce cela c’est parce qu’ils ont ajouté une nouvelle fonctionnalité dans la 3.1 nommée les Workers, ces derniers permettent de lancer un code Javascript en arrière-plan et réduisent ainsi l’occupation du processeur par certains scripts gourmands. Personnellement, je trouve que ça a son intérêt car ça évite qu’un script bloque le chargement d’une page, c’est plus fluide quoi. Il faudra que je télécharge la version 3.1 de Firefox histoire de tester !

• Je passe à Sliding Menu, la version 1.2.4 est maintenant terminée et je ne pense pas faire de nouveaux ajouts avant sa sortie. Si vous êtes intéressés par cette version il vous faudra attendre un peu car je suis actuellement en train de réaliser une page web qui lui est consacrée, ce sera bien plus pratique pour le distribuer, voici un aperçu (non, je ne suis pas un dieu en graphisme, c’est clair…) :
  

  Page consacrée à Sliding Menu

  J’ai choisi d’exploiter un peu mon menu sur cette page (ben oui, faut bien en vanter les mérites ^^ ), je l’ai donc placé sur le bas avec un fondu et le contenu de la page viens se mettre “sous” le menu, je n’explique pas très bien mais vous verrez bientôt en quoi ça consiste.

  Concernant le menu lui-même, il y a quelques corrections de bugs et deux ajouts majeurs, vous en saurez plus par le biais d’un nouvel article.

• Autre chose, je ne sais pas si vous l’avez constaté mais une nouvelle version du navigateur Google Chrome est sortie, il s’agit enfin d’une version stable, la v1 quoi… mais le problème est que à mon goût ça reste une bêta, pourquoi ? Parce qu’il existe et subsiste un bug qui fait que le style CSS d’opacité foire sur les images PNG qui ont de la transparence, voyez plutôt… Ce genre de bug ne devrait pas être ignoré mais immédiatement rectifié, je ne comprends pas pourquoi ça n’a pas été fait pendant tout ce temps. Enfin bon, attendons encore un peu, on verra par la suite.

• Et enfin la dernière chose dont je souhaitais vous parler, cela concerne Wordpress, la plateforme de blog que j’utilise ici-même. Elle a bénéficié d’une mise à jour qui refond absolument toute l’interface d’administration, c’est assez impressionnant pour tout vous dire, ils ont dû y passer un sacré moment ! Voici un petit aperçu :
  

  Nouvelle interface Wordpress

  Tout ce que vous voyez peut être déplacé et ainsi réorganisé selon vos envies, la gestion des commentaires est devenue ultra-simple grâce à une utilisation intensive de l’Ajax (qui évite de recharger la page pour ceux qui ne savent pas). C’est pareil pour les articles, de plus le text-area servant à écrire à été amélioré, ça se sent, il est bien plus rapide qu’auparavant !

  Bref, je pense que je vous ferai un test de cette interface. Au passage, vous aurez sûrement noté qu’il y a de l’anglais et du Français, oui, c’est le point noir : la traduction n’est pas terminée ^^’

  L’autre problème c’est qu’ils ont dû changer quelques noms de classes car mon design a été légèrement modifié, je vais y remédier (Edit : J’ai rien dit, c’est juste qu’il manquait quelques styles à définir).

Voilà tout, je vous laisse =)

Nes’

Tags: Firefox, Sliding Menu