Catégories
Astuces et Design

Découvrez Polypane, un navigateur qui vous rend cinq fois plus rapide

En tant que développeurs, nous aimons utiliser des outils spécialement conçus pour nous rendre aussi efficaces que possible. Nous recherchons excessivement et obtenons le clavier parfait, notre éditeur de code ou IDE est soigneusement choisi et utilise le thème de codage et la police de codage parfaits (code Fira, dans mon cas). Nous avons des flux de travail pour optimiser notre CSS et nos images et nos outils de construction sont optimisés pour faire autant que possible le plus rapidement possible.

Et puis, nous utilisons le même navigateur que tout le monde utilise pour aimer les vidéos de chats sur Facebook.

N'est-ce pas bizarre? Nous choisissons notre éditeur de code spécifiquement parmi les dizaines disponibles; notre clavier a le cliquetis parfait pour nos doigts; pourtant, nous utilisons le même navigateur que tout le monde. Tout comme nous n'utilisons pas Word pour écrire du code simplement parce que tout le monde utilise Word pour écrire des choses, nous ne devrions pas accepter d'utiliser un navigateur classique pour créer des sites Web.


Cet article fait partie de La feuille de route, où nous examinons la création et la promotion de produits du point de vue du développeur. Nous partagerons les meilleures leçons des chefs de produit et donnerons aux fondateurs techniques un espace pour partager avec vous leurs produits en phase de démarrage. Si vous souhaitez être présenté, faites-le nous savoir.


Navigateurs réguliers

Un flux de travail typique avec un navigateur ordinaire ressemble un peu à ceci: créez le site Web sur une taille unique, puis redimensionnez votre navigateur et créez le design pour cela. Puis redimensionnez à nouveau le navigateur et créez le design pour cela. Alors… eh bien, vous l'avez. Vous faites tout cela un par un, en vous répétant encore et encore. Et si vous n'êtes pas chanceux, vous pouvez le faire plusieurs fois au fur et à mesure que vous créez, avec de nouvelles pages qui apportent de nouvelles exigences qui affectent les pages que vous avez déjà terminées.

Et vous voudrez peut-être faire plus que simplement créer le côté visuel de votre page. Voulez-vous vérifier l'accessibilité de vos pages au fur et à mesure? Ajoutez une extension de navigateur. Voulez-vous créer une capture d'écran pleine page à envoyer à votre patron ou client? Ajoutez une extension de navigateur. Voulez-vous vérifier que vos balises meta sont correctes? Vous l'avez deviné, ajoutez une extension de navigateur. Avec juste quelques éléments de base, vous avez déjà besoin d'une demi-douzaine d'extensions de navigateur. Avez-vous utilisé un navigateur avec une demi-douzaine d'extensions? Cela rend IE11 rapide en comparaison.

Inspection d'élément polypane

Polypane fonctionne différemment

Lorsque vous ouvrez Polypane, vous ne voyez pas seulement un site Web. Vous voyez votre site Web dans plusieurs tailles d'écran en même temps, comme si vous aviez un tas d'appareils sur votre bureau. Ce qui est mieux, cependant, c'est que toutes ces tailles d'écran sont synchronisées: si vous interagissez avec l'un d'entre eux, vous interagissez avec tous, que vous fassiez défiler, cliquiez, survoliez ou tapiez. Vous interagissez avec un seul site Web; il se trouve que vous le voyez dans plusieurs tailles en même temps.

Voir toutes les tailles d'écran côte à côte signifie que vous n'avez plus à redimensionner votre navigateur et à les parcourir une par une. Et ces tailles d'écran sont à vous: vous pouvez choisir parmi plus de 20 appareils préconfigurés, comme les téléphones, les tablettes et les tailles d'ordinateurs portables, ou vous pouvez les redimensionner librement comme vous le souhaitez.

Ou vous pouvez demander à Polypane d'analyser le CSS de la page, de trouver toutes les requêtes multimédias CSS et de créer des tailles d'écran à partir de celles-ci, en vous assurant que vous testez toujours le site sur toutes les tailles que vous souhaitez prendre en charge.

Cela seul fait de Polypane un gain de productivité considérable. Mais si vous supprimez tout le temps le redimensionnement de votre navigateur, que pouvons-nous faire d'autre?

Eh bien, qu'en est-il du rechargement?

Polypane fonctionne avec n'importe quel système de rechargement à chaud ou de rechargement en direct, comme n'importe quel autre navigateur moderne. Mais Polypane dispose également d'un serveur de rechargement en direct intégré qui ne nécessite aucune configuration. Dites-lui simplement quel dossier vérifier et vous avez terminé. Cela fonctionne même avec des fichiers HTML simples! Et le meilleur de tous, si vous mettez à jour un fichier CSS ou une image, Polypane ne fait que l'actualiser au lieu de recharger la page complète.

Outils de développement Polypane

À ce stade, vous pourriez demander: mais qu'en est-il des outils de développement? Les outils de développement fournis avec les navigateurs standards sont incroyables et Polypane utilise les mêmes outils de développement puissants que Google Chrome et Microsoft Edge (extensions d'outils de développement incluses). Mais les outils de développement dans les navigateurs sont également un complément. 99% du public cible d'un navigateur est constitué de non-développeurs, nous n'avons donc vraiment que cette petite boîte d'outils de développement comme territoire.

Mais si nous considérons l'ensemble du navigateur comme l'outil de développement, nous pouvons non seulement débloquer beaucoup plus de nouvelles fonctionnalités, mais nous pouvons également l'optimiser afin que chaque nouvelle fonction ne ralentisse pas le reste du navigateur comme le font les extensions de navigateur.

Et c'est pourquoi Polypane a tant de fonctionnalités intégrées:

  • captures d'écran pleine page
  • émulation de périphérique
  • des aperçus en direct de ce à quoi votre page ressemble lorsqu'elle est partagée sur les réseaux sociaux
  • test d'accessibilité intégré
  • mode sombre et émulation de requête multimédia à mouvement réduit
  • édition CSS en direct sur tous les écrans
  • en-têtes personnalisés
  • émulation tactile
  • simulateurs de daltonisme
  • un navigateur latéral pour que vous puissiez afficher votre outil de transfert, votre documentation ou votre conception juste à côté de votre site
  • un vérificateur de contraste de couleur CSS qui vous suggère des couleurs que vous pouvez ensuite prévisualiser en direct
  • superpositions d'images pour les tests de régression visuelle ou la conception au pixel près

Outils de test avancés

Outils de test de polypane

Et nous ne faisons que commencer. Qu'en est-il d'un inspecteur d'éléments qui vous permet d'éditer votre page sur tous les écrans en même temps et qui permet de tester très facilement de nouveaux styles et contenus? C’est ce que vous permet l’inspecteur d’éléments Polypane.


Aucun autre navigateur ne vous permet de modifier plusieurs tailles d'écran en même temps d'une manière aussi intuitive et rapide. Nous avons également des panneaux qui vous permettent de vérifier le contour de votre page (montrant tous les en-têtes et leur hiérarchie), un qui vous permet de modifier toutes les informations de stockage local et de cookie, ou un qui vous permet d'écrire CSS ou Sass qui est ensuite inséré dans chaque écran pour ultra -prototypage rapide.

Les superpositions de Polypane vous permettent d'essayer rapidement une grande variété de choses sur des écrans uniques, comme émuler le daltonisme ou d'autres déficiences visuelles, vérifier votre mise en page pour des problèmes ou répertorier tous les z-index sur une page.

Tous ces outils vous aident dans différentes parties du développement de votre page Web, et dans les recherches que nous avons effectuées avec les utilisateurs de Polypane, nous avons constaté que les développeurs sont entre trois et dix fois plus productifs lorsqu'ils utilisent Polypane, en fonction de la tâche. De plus, parce que Polypane facilite la vérification de choses comme les méta-informations et tout la taille du navigateur, la quantité de corrections de bogues post-lancement diminue considérablement.

Dans les prochains articles, nous explorerons comment réaliser un audit complet de site Web à l'aide de Polypane et comment créer une conception réactive à partir de zéro en utilisant tout ce que Polypane a à offrir.

Polypane a un essai gratuit qui vous permet de démarrer avec 14 jours pour l'essayer.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *