Accueil

Archives du mois de avril 2016

To blog or not to blog

29 avril 2016 Blog, Divers

Vous ne l’avez peut-être pas remarqué, mais ce blog a repris vie il y a peu après une pause de hum… deux années.

Pourquoi si longtemps ? Bonne question. J’écris cet article afin de vous raconter mon vécu, et dans la foulée vous donner des tuyaux pour ne pas reproduire les mêmes erreurs. Ne pas écrire, ne pas partager alors qu’on a l’envie, pour moi, c’est une erreur même pour ceux qui n’ont pas de blog.

Attention : cet article est issu de ma propre expérience, ‘le prenez pas pour argent comptant  😉 J’aurais également pu le nommer « 4 erreurs à ne pas faire en tant que bloggeur », mais de un : je ne me considère pas comme un bloggeur, et de deux : ça fait racoleur et je-sais-tout.

To blog or not to blog ?

Visualisez vos évènements DOM avec Visual Event

15 avril 2016 Javascript, Navigateurs web

Je suis certain que, lors de vos développements d’interface web et de charte graphique, vous aviez voulu à un moment ou à un autre rapidement lister l’ensemble des évènements Javascript définis sur votre page, pour déboguer ou même pour optimiser ces derniers.

Mieux : vous aimeriez les afficher visuellement sur les éléments du DOM, afin de réellement voir où et pour quels types d’évènements ils sont définis. Et pourquoi pas voir également le code des callbacks associés (soyons fous).

Ne cherchez plus : j’ai trouvé, testé et approuvé pour vous un outil qui fait exactement ça. Il s’appelle Visual Event, il est open-source et se présente sous la forme d’un bookmarklet (et donc, sans installation d’extension navigateur). Ce n’est également pas n’importe qui qui l’a conçu : il s’agit du créateur de DataTables.

Pour l’installer, glissez et déposez le lien affiché sur la page officielle (vers le bas dans la section Install) dans votre barre de marque-pages. Puis allez sur un site, et cliquez simplement sur le marque-page fraîchement créé. Cela injectera un fichier Javascript dans la page courante et affichera un truc de ce style (cela peut prendre du temps s’il y a beaucoup d’éléments à traiter) :

Screenshot de Visuel Event

Ça claque non ? Ci-dessus un exemple sur DuckDuckGo où est affiché le détail des évènements de l’icône du menu principal en haut à droite : 4 évènements y sont attachés.

A noter que cela ne fonctionne pas pour les sites protégés par la Content Security Policy.

Les WebSocket sur Firefox enfin visibles

5 avril 2016 Firefox, HTML5, WebSocket

Dieu existe. On peux enfin déboguer les WebSocket sur Firefox (j’avais déjà parlé ici des prémices). C’est tout chaud et c’est disponible sous forme d’extension du nom de WebSocket Monitor qui étends les fonctionnalités des Developers Tools de Firefox.

Screenshot de WebSocket Monitor

Et attention : ce n’est pas n’importe qui qui sont derrière tout ça, il s’agit de l’équipe de développement de Firebug. Avant cette extension, vous deviez utiliser Fiddler ou Chrome.

A propos de Firebug : la prochaine version majeure (la version 3) ne sera plus une extension à proprement parler, mais une amélioration des Developer Tools déjà existants. Ses buts, selon leur site :

  • Firebug has always been an extension (Firefox add-on) and the natural next step is to build the next version on top of existing developer related features and APIs built into Firefox – and extend them. This way Firebug can utilize the existing platform infrastructure and get significant performance, stability and security advantages.
  • Firebug wants to complement Firefox’ built-in tools by adding new functionality, not compete with them. The next Firebug generation starts with introducing a new Firebug theme and bringing the great Firebug user experience with it.
  • Users don’t want two separate tools in Firefox – they want one great and powerful tool!