Une trentaine d'extensions sont installées dans mon navigateur qui simplifient la vie et le travail sur Internet. Dans cet article, je souhaite partager 10 extensions Google Chrome pertinentes pour le typographe que j'utilise constamment lors du développement de sites.
1. PerfectPixel
Un exemple d'utilisation de PerfetPixel lors du développement de nouveaux blocs sur www.wrike.com
La mise en page du site pixel par pixel pose des difficultés tant aux débutants qu'aux professionnels confirmés. PerfectPixel superpose l'image de mise en page au-dessus de la mise en page dans le navigateur. Dans les paramètres d'extension, vous pouvez ajuster la transparence et la disposition de la disposition, ce qui vous permet de prendre en compte toutes les tailles et retraits nécessaires. L'utilisation de ce plugin simplifiera la mise en page et réduira le nombre de modifications lors de la soumission d'un projet. Dans mon jeu d'extensions, PerfectPixel occupe la première place en raison de sa fonctionnalité et de sa convivialité.
Lien pour installer l'extension
2. Wappalyzer
Étude de cas Wappalyzer sur collaborate.wrike.com/2019/london
Il est toujours intéressant de savoir quels outils et technologies sont utilisés sur les sites. Wappalyzer fournit des informations sur les CMS, les frameworks JS, les bibliothèques CSS, les outils d'analyse et bien plus encore. Imaginez que l'animation sur le site soit une bibliothèque CSS gratuite que vous pouvez utiliser dans votre projet. Cela réduira le temps de recherche de l'outil nécessaire et sera au courant des technologies que le site utilise.
Lien pour installer l'extension
3. HTML5 Outliner
Hiérarchie des en- têtes sur habr.com/en/company/wrike
HTML 5 Outliner affiche une liste d'en-têtes sur une page de site. L'extension permet de structurer les en-têtes et d'identifier les violations dans la hiérarchie. Par exemple, dans la section balise HTML 5 Outliner affiche un avertissement concernant l'absence de la balise h2 . C'est l'un des moyens rapides et pratiques de déterminer l'utilisation correcte des en-têtes dans la mise en page.
Lien pour installer l'extension
4. Wireframify
Étude de cas Wireframify sur www.wrike.com
Les concepteurs conçoivent des sites à l'aide d'un filaire - un ensemble de lignes, de blocs et de signatures. Cette approche vous permet de créer une architecture de projet basée sur l'indentation, la taille et l'emplacement des blocs sur la page. Wireframify inclut une forme alternative du site sous la forme d'un filaire, ce qui aidera à éviter une utilisation erronée:
- marge négative;
- alignement des éléments à l'aide du rembourrage;
- indentation en utilisant les propriétés CSS gauche, droite;
Lien pour installer l'extension
5. PageLiner
Étude de cas PageLiner sur www.wrike.com/apps
Dans l'éditeur graphique, vous pouvez aligner les éléments ou afficher la grille du site à l'aide de lignes directrices. Le typographe peut activer cette fonctionnalité dans le navigateur à l'aide de PageLiner . L'extension affiche des guides similaires, comme dans le même Adobe Photoshop. Avec PageLiner, l' alignement des éléments est beaucoup plus facile.
Lien pour installer l'extension
6. Développeur Web
Liste des fonctionnalités du développeur Web
Web Developer ajoute une barre d'outils supplémentaire au navigateur. À l'intérieur, il y a 10 onglets: Désactiver, Cookies, CSS, Formulaires, Images, Informations, Divers, Aperçu, Redimensionner et Outils. La fonctionnalité d'extension vous permet de:
- désactiver CSS, JS et images;
- vérifier la validité de HTML, CSS;
- manipuler les styles CSS;
- Tester les formulaires HTML
- afficher les balises META d'informations nécessaires;
- Redimensionner la fenêtre du navigateur
- vider le cache;
Web Developer reste une extension populaire parmi les développeurs. Il peut être comparé au multitool dans la vie réelle: vous avez toujours le jeu d'outils nécessaire à portée de main.
Lien pour installer l'extension
7. CSS utilisateur
Exemple de CSS utilisateur sur www.wrike.com/customers
Imaginez que vous vouliez corriger CSS directement dans le navigateur, mais après cela, vous deviez recharger la page. Toutes vos réalisations ont disparu et vous devez à nouveau apporter des modifications. Utilisez User CSS , qui enregistrera vos styles. Ne vous inquiétez plus de la disparition de CSS. La fonctionnalité de l'extension vous permettra de tester le CSS écrit lors du déplacement vers d'autres pages.
Lien pour installer l'extension
8. StyleURL
Étude de cas de StyleURL sur Wrike www.wrike.com/customers
Le CSS utilisateur ne remplacera pas le panneau de développement du navigateur. Si vous avez l'habitude de travailler dans devtools et que vous ne souhaitez pas en même temps perdre les modifications après la mise à jour du navigateur, installez StyleURL . L'extension se souviendra de vos modifications et vous permettra d'enregistrer le travail dans un fichier séparé ou de le télécharger dans github gist.
Lien pour installer l'extension
9. Vérificateur d'accessibilité de Siteimprove
Étude de cas Siteimprove Accessibility Checker sur www.wrike.com/newsroom
Siteimprove Accessibility Checker est un outil qui vérifie la conformité du HTML aux normes d'accessibilité pour fournir un accès au contenu pour tout le monde. L'extension affiche des erreurs avec des informations détaillées. Dans leur description, vous trouverez des notes de bas de page des WCAG 2 et des liens directs vers des articles détaillés sur l'accessibilité.
Lien pour installer l'extension
10. Tabsbook
Exemple de tabsbook
Chacun travaille avec des signets à sa manière. Il y a ceux qui enregistrent des liens pour un accès rapide aux sites et ceux qui utilisent des signets pour stocker des informations utiles. Avec Tabsbook, vous pouvez transformer vos signets en une base de connaissances. L'interface d'extension affiche une structure de dossiers arborescente pour une navigation facile de vos signets. Toutes les données sont stockées dans le cloud, ce qui vous permet d'y accéder depuis n'importe quel appareil.
Lien pour installer l'extension
Les extensions seront utiles à tous les débutants et professionnels expérimentés qui ne les connaissaient pas. Écrivez dans les commentaires les extensions que vous utilisez.
Des extensions de navigateur plus utiles peuvent être trouvées dans les 10 meilleurs liens des plugins Chrome pour les concepteurs et des extensions Google Chrome utiles pour le programmeur.