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 aussi vite que 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 The Roadmap 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 normaux

Un flux de travail typique avec un navigateur ordinaire ressemble un peu à ceci: Construisez le site Web sur une taille, 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'avez pas de chance, vous pouvez tout faire plusieurs fois au fur et à mesure que vous construisez, 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 construire 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.

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 besoin de redimensionner votre navigateur et de les parcourir une par une. Et ces tailles d'écran sont à vous de choisir: 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, recherchez toutes les requêtes multimédias CSS et créez des tailles d'écran à partir de celles-ci, en vous assurant de toujours tester 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 constamment 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 tout 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 entière.

À 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, donc nous n'avons 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 ne pouvons pas seulement débloquer beaucoup plus nouvelle fonctionnalité, 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 [19659021] émulation de périphérique
• aperçus en direct de ce à quoi ressemble votre page lorsqu'elle est partagée sur les médias 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 design juste à côté de votre site
• un vérificateur de contraste de couleur CSS qui vous suggère des couleurs que vous peut ensuite avoir un aperçu en direct [19659021] superpositions d'images pour les tests de régression visuelle ou la conception au pixel près

Outils de test avancés

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 l’inspecteur d’éléments Polypane vous permet de faire.

Aucun autre navigateur ne vous permet de modifier simultanément plusieurs tailles d’écran de 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 un seul écran, 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, selon les tâche. De plus, comme Polypane permet de vérifier si facilement des éléments tels que les méta-informations et toutes les tailles de navigateur, le nombre de corrections de bogues post-lancement diminue considérablement.

Dans les prochains articles, nous explorerons comment faire un audit complet du 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. [19659040]

Source link