Plusieurs postes sont disponibles chez Nmédia!Amène ton talent, on fournit le plaisir!

Quelques extensions Chrome utiles pour le développement Web de tous les jours

29 mai 2015Par David Malo
Catégories :

De nos jours, chaque intégrateur, programmeur ou designer a son navigateur Web préféré. À force de les utiliser quotidiennement, on finit par en trouver un qu’on préfère plus que les autres. Chrome, Explorer et Firefox ont tous leurs options et leurs petites particularités qui nous permettent de les utiliser chacun à notre façon.

Mais qu’arrive-t-il si on en veut plus? Les navigateurs Web nous offrent toujours plus de possibilités et sont de plus en plus rapides mais, même en 2015, ils ne peuvent toujours pas lire dans nos pensées. Pour exaucer vos désirs les plus fous, vous pouvez toutefois utiliser des extensions.

Que vous les appeliez extensions, add-ons ou plugins, la communauté d’utilisateurs de Chrome, d’Internet Explorer et de Firefox travaille fort pour créer des extensions qui peuvent nous faciliter la vie.

Aujourd’hui, je vous ai trouvé une liste de quelques extensions pour Chrome que je trouve particulièrement pratiques. À vous de les essayer!

PerfectPixel

Lorsqu’on se doit de faire des maquettes HTML le plus fidèlement possible à ce que le designer nous a fourni, c’est important de comparer régulièrement notre travail en cours à ce que devrait ressembler le résultat final. J’avais pris l’habitude de toujours faire des captures d’écran de mon travail en HTML, pour ensuite les coller dans Photoshop puis les positionner correctement pour, finalement, analyser les éléments que je devais ajuster. C’est quand même beaucoup d’étapes à répéter souvent. Quelle joie fut la mienne lorsque j’ai découvert une extension qui me permettait de faire toutes ces étapes en une seule fois!

Grâce à PerfectPixel, vous n’avez qu’à sauvegarder votre maquette du design en .png ou en .jpg, à l’exporter dans Chrome, à la positionner et le tour est joué. Cette image va rester par-dessus votre site jusqu’à ce que vous décidiez de l’enlever ou que vous fermiez l’onglet. Vous pouvez également changer son opacité, ou la cacher tout simplement.

[img]perfectpixel.png|600||true|PerfectPixel|[/img]

AwesomeScreenshot : Screen capture, annotate

Qui n’a jamais utilisé la fonction print screen d’un ordinateur pour partager une capture d’écran à un collègue? Cette fonction est presque indispensable de nos jours. Mais qu’en est-il si jamais vous voulez prendre la capture d’écran d’une page Web au complet? Vous avez deux solutions. La première est de prendre plusieurs captures d’écran et de les « coller » ensemble dans un logiciel d’édition. La deuxième est d’utiliser AwesomeScreenshot, qui fait tout ça pour vous!

Jot

C’est incroyable le nombre de petits détails qu’on a à se rappeler dans une journée. Certains d’entre vous ont probablement déjà une application sur leur téléphone qui permet de prendre des notes spontanées. D’autres ont simplement un fichier bloc note d’ouvert avec diverses notes à l’intérieur. C’est pratique, mais loin d’être esthétique. Je vous présente alors Jot, une extension qui change la page « nouvel onglet » de Chrome et qui la remplace par quelque chose de très scénique, épuré vous permettant en même temps de prendre des notes.

[img]jot.png|600||true|Jot|[/img]

Hoverzoom

N’êtes-vous pas fatigués des galeries d’images et de toujours avoir à cliquer sur un thumbnail pour voir les détails que vous voulez vraiment voir? Ne désespérez pas, HoverZoom est là! Grâce à cette extension, un simple hover sur le thumbnail vous fera apparaître un aperçu de l’image en grand format, sans avoir à ouvrir ou fermer une fenêtre interstitielle.

[img]hoverzoom.png|600||true|HoverZoom|[/img]

Web Developer

Utilisée depuis bien longtemps par les développeurs Web, l’extension Web Developer est un incontournable lorsqu’il s’agit du développement d’un site Web. Vous voulez faire afficher les styles d’impression? Facile. Vous voulez remplir les champs d’un formulaire avec des données de test? Pas de problème. Vous voulez voir quelles images n’ont pas de texte alternatif? Parfait!

[img]webdev.png|600||true|Web Developer|[/img]

ColorZilla

Besoin de savoir rapidement quelle est la couleur de fond utilisée par un site? Prenez une capture d’écran de la page et allez voir dans Photoshop. Besoin de le savoir encore plus rapidement? Utilisez ColorZilla!

[img]colorzilla.png|600||true|ColorZilla|[/img]

WhatFont

Besoin de savoir rapidement quelle est la police de texte utilisée par un site? Allez inspecter l’élément et regardez ses styles. Besoin de le savoir encore plus rapidement? Utilisez WhatFont!

[img]whatfont.png|600||true|WhatFont|[/img]

J’espère que cet article vous a donné le goût d’aller essayer quelques extensions. Si jamais vous en avez une préférée qui ne faisait pas partie de cette liste, n’hésitez pas à nous en faire part!