12 meilleurs outils de conception et de développement de Google


Google ressemble à un iceberg : il y a la partie au-dessus de l’eau que nous pouvons voir et utiliser tous les jours ; il y a aussi la partie sous l’eau, que nous ne voyons pas et dont nous savons peu de choses.

Si nous sommes nombreux à nous inquiéter des aspects de Google que nous ne voyons pas, à savoir les éléments qui menacent notre vie privée ou monopolisent le Web, il est indéniable que Google propose des produits et des outils étonnants, dont beaucoup sont gratuits, et ce, grâce à la commodité d’une seule connexion.

Aujourd’hui, nous allons examiner 12 outils de Google qui apportent vraiment quelque chose de positif.

1. Polymère

Polymère est une bibliothèque JavaScript open-source de Google permettant de créer des applications web à l’aide de composants web. La plate-forme est fournie avec une tonne de bibliothèques et d’outils pour aider les concepteurs et les développeurs à exploiter le potentiel du web en tirant parti de fonctionnalités telles que HTTP/2, les composants web et les travailleurs de service.

La principale caractéristique du polymère est le composant Web. Avec les composants Web, vous pouvez partager des éléments personnalisés avec n’importe quel site, travailler de manière transparente avec les éléments intégrés de n’importe quel navigateur et utiliser efficacement des cadres de travail de toutes sortes. Des produits comme LitElement (une classe de base simple pour créer des composants web rapides et légers) et le kit de démarrage PWA rendent Polymer facile à utiliser. Si vous le souhaitez, vous pouvez créer votre application entièrement à partir de composants web.

2. Phare

Google Phare est un outil automatisé à code source libre qui permet d’améliorer la qualité des pages web. Le logiciel vous permet de vérifier les performances, le référencement, l’accessibilité, etc. des pages web. Vous pouvez exécuter Lighthouse à l’aide de ChromeDevTools, directement à partir de la ligne de commande, ou en tant que module Node.

Pour utiliser Lighthouse dans Google Chrome, il suffit d’aller à l’URL que vous souhaitez auditer (vous pouvez auditer n’importe quelle URL sur le web), d’ouvrir ChromeDevTools et de cliquer sur l’onglet Audits. Après avoir effectué l’audit, Lighthouse vous donnera un rapport détaillé sur la page web.

Grâce à ces rapports, vous verrez quelles parties de votre page web vous devez optimiser. Chaque rapport comporte un document de référence qui explique pourquoi cet audit est important et vous indique également les mesures que vous pouvez prendre pour y remédier.

Vous pouvez également utiliser Lighthouse CL pour empêcher la régression sur vos sites. Grâce à Lighthouse Viewer, vous pouvez consulter et partager des rapports en ligne. Vous pouvez également partager des rapports en tant que JSON ou GitHub Gists.

Lighthouse est également doté d’une fonction appelée Stack Packs qui permet à Lighthouse de détecter sur quelle plate-forme un site est construit. Il affiche également des recommandations spécifiques basées sur les piles.

3. Google Analytics

Google Analytics est l’étalon-or des services d’analyse. Google Analytics peut être installé gratuitement sur votre site avec une petite quantité de JavaScript et vous permet de voir toutes sortes de détails sur les visiteurs de votre site, comme le navigateur qu’ils utilisent et d’où ils viennent.

En utilisant Google Analytics, vous pouvez prendre des décisions concernant votre site en vous basant sur des données scientifiques, et donc être quelque peu confiant que les décisions que vous prenez se traduiront par le résultat que vous attendez.

4. Flutter

Flutter est la boîte à outils de l’interface utilisateur de Google qui permet de créer des applications nativement compilées pour le mobile, le web et le bureau à partir d’une base de code unique. Cette boîte à outils est open source et gratuite. La meilleure partie de Flutter est qu’il fonctionne avec le code existant.

La boîte à outils a une architecture en couches qui permet une personnalisation complète, ce qui se traduit par un rendu rapide et des conceptions flexibles. Elle est également fournie avec des widgets entièrement personnalisables qui permettent de construire des interfaces natives en quelques minutes. Grâce à ces widgets, vous pourrez ajouter des fonctionnalités de plate-forme telles que le défilement, la navigation, les icônes et les polices de caractères pour obtenir des performances natives complètes sur iOS et Android.

Flutter a également une fonction appelée rechargement à chaud qui vous permet de créer facilement des interfaces utilisateur, d’ajouter de nouvelles fonctionnalités et de corriger les bogues plus rapidement. Vous pouvez également compiler le code Flutter en code machine ARM natif en utilisant les compilateurs natifs Dart.

5. Explorateur de l’API Google

Google possède une énorme bibliothèque d’API qui sont à la disposition des développeurs, mais il peut être difficile de trouver ces API. Explorateur de l’API Google permet aux développeurs de localiser facilement n’importe quelle API. Sur la page web de Google API Explorer, vous trouverez une liste complète de la bibliothèque d’API. Vous pouvez facilement faire défiler la liste ou utiliser le champ de recherche pour filtrer la liste des API.

La meilleure partie de Google API Explorer est que chaque lien vers une page de référence est accompagné de plus de détails sur la façon d’utiliser l’API. API Explorer est un excellent moyen d’essayer les méthodes de l’API de surveillance sans avoir à écrire de code.

6. Marionnettiste

Marionnettiste est un projet de l’équipe Google Chrome. La plateforme permet aux développeurs web de contrôler un Chrome (ou tout autre navigateur basé sur le protocole Chrome DevTools) et d’exécuter des actions communes, un peu comme dans un vrai navigateur. Puppeteer est également une bibliothèque de nœuds et fournit une API de haut niveau pour travailler avec Chrome sans tête. C’est également un outil utile pour gratter, tester et automatiser des pages web.

Voici ce que vous pouvez faire avec Puppeteer : générer des captures d’écran et des PDF de pages, tester l’interface utilisateur, tester les extensions de Chrome, automatiser la soumission de formulaires, générer du contenu pré-rendu et explorer des applications monopages.

7. Codelabs

Développeur Google Codelabs est un outil pratique pour les développeurs débutants et même pour les développeurs avancés qui veulent améliorer leurs connaissances. Les Codelabs offrent une expérience de codage guidée, tutorielle et pratique. Le site des Codelabs est divisé en plusieurs sessions de tutorat sur différents sujets.

Grâce aux tutoriels sur Codelabs, vous pouvez apprendre à construire des applications à partir de zéro. Parmi les catégories de tutoriels, citons la réalité augmentée, TensorFlow, Analytics, Virtual Analytics, G Suite, Search, Google Compute Engine et Google API sur iOS.

8. Outil couleur

Outil couleur facilite la création, le partage et l’application des couleurs de l’interface utilisateur pour les concepteurs de sites web. Il mesure également le niveau d’accessibilité pour toute combinaison de couleurs avant l’exportation vers la palette. L’outil est livré avec 6 interfaces utilisateur et offre un choix de plus de 250 couleurs.

L’outil est également très facile à utiliser. Il vous suffit de choisir une couleur et de l’appliquer au schéma de couleur primaire ; passez au schéma de couleur secondaire et choisissez une autre couleur. Vous pouvez également passer en mode personnalisé pour choisir vos propres couleurs. Une fois que vous avez sélectionné toutes vos couleurs, utilisez la fonction Accessibilité pour vérifier si tout est bon avant de l’exporter dans votre palette.

9. Boîte de travail

Workbox est un ensemble de bibliothèques JavaScript et de modules Node. Les bibliothèques JavaScript facilitent l’ajout d’un support hors ligne aux applications web. Les modules Node permettent de mettre facilement en cache des ressources et offrent d’autres fonctionnalités pour aider les utilisateurs à créer des applications web progressives. Certaines de ces fonctionnalités comprennent le pré-caching, la mise en cache d’exécution, le routage des requêtes, la synchronisation en arrière-plan, le débogage et une plus grande flexibilité que sw-precache et sw-toolbox.

Avec Workbox, vous pouvez ajouter une règle rapide qui vous permet de mettre en cache les polices, images, JavaScript et fichiers CSS de Google. La mise en cache de ces fichiers accélérera le fonctionnement de votre page web et consommera moins d’espace de stockage. Vous pouvez également pré-cachez vos fichiers dans votre application web en utilisant leur CLI, module Node, ou plugin webpack.

10. PageSpeed Insights

PageSpeed Insights est un outil pratique de Google Developers qui analyse le contenu d’une page web, puis génère des suggestions sur la façon de rendre la page plus rapide. Il fournit des rapports sur les performances d’une page web sur les ordinateurs de bureau et les appareils mobiles. En haut du rapport, PageSpeed Insights fournit un score qui résume les performances de la page.

11. AMP sur Google

Les pages AMP se chargent plus rapidement et ont également une meilleure apparence que les pages HTML standard sur les appareils mobiles. AMP sur Google vous permet d’améliorer vos pages AMP sur Google. Il s’agit d’un cadre de composants Web qui vous permet de créer des sites Web, des annonces, des courriers électroniques et des articles en priorité pour l’utilisateur. L’un des avantages de l’AMP est qu’il permet à vos pages web de se charger presque instantanément sur tous les appareils et plates-formes, améliorant ainsi l’expérience de l’utilisateur.

12. Redimensionnement des fenêtres

Lors de la création de sites web, il est important que les développeurs les testent pour s’assurer qu’ils sont conçus de manière adaptée – c’est là que Redimensionnement des fenêtres entre en jeu. Window Resizer est une extension de Chrome qui redimensionne la fenêtre du navigateur afin que vous puissiez tester votre design réactif sur différentes résolutions d’écran. Les tailles d’écran courantes proposées sont celles des ordinateurs de bureau, des ordinateurs portables et des téléphones mobiles, mais vous pouvez également ajouter des tailles d’écran personnalisées.

Image en vedette via Unsplash.