Smashing Podcast Épisode 37 Avec Adam Argyle : Qu'est-ce que VisBug ?

Dans cet épisode, nous parlons de VisBug. De quoi s'agit-il et en quoi diffère-t-il de la gamme d'options déjà trouvées dans Chrome DevTools ? Drew McLellan parle à son créateur Adam Argyle pour le savoir.

Afficher les remarques

• Bac à sable et aire de jeux VisBug
• Adam sur Twitter
• Le site personnel d'Adam
• VisBug sur YouTube
• VisBug 101

Mise à jour hebdomadaire

• La plateforme de conférence que nous utilisons pour nos événements en ligne : Hopin par Amanda Annandale
• Une introduction aux requêtes de conteneur CSS par Stephanie Eckles
• Modèles de conception frustrants à corriger : sélecteur d'anniversaire par Vitaly Friedman
• Tree-Shaking: Un guide de référence par Átila Fassina
• Comment nous avons amélioré nos principaux éléments vitaux Web par Beau Hartshorne

Transcription

Drew McLellan : C'est un ingénieur punk brillant et passionné avec une adoration pour le Web, qui préfère utiliser ses compétences pour la meilleure interface utilisateur et UX de sa catégorie, et responsabiliser ceux qui l'entourent. Il a travaillé dans de petites et grandes entreprises et est actuellement défenseur des développeurs chez Google sur Chrome. Il est membre du groupe de travail CSS et créateur de VisBug, un outil de débogage de conception. Nous savons donc qu'il connaît bien le design et l'UX, mais saviez-vous qu'il possède plus de paires de tongs que n'importe quel bipède vivant ? Mes amis fracassants, veuillez accueillir Adam Argyle.

Adam Argyle : Bonjour.

Drew : Salut Adam, comment vas-tu ?

Adam : Oh, je suis fracassant, tu le sais.

Drew : C'est bon à entendre. Je voulais donc vous parler aujourd'hui de votre projet, VisBug, et plus généralement, du concept derrière le débogage de conception et de la façon dont il pourrait s'intégrer dans les flux de travail du projet. Je veux dire, nous avons des outils de débogage de navigateur axés sur les développeurs depuis longtemps, je veux dire, probablement plus d'une décennie maintenant. Mais ceux-ci sont évidemment très axés sur le code. En quoi VisBug est-il différent ? Et quel est le genre de problème qu'il essaie de résoudre ?

Adam : Génial. Ouais, le principal problème dans lequel il est enraciné est qu'en tant qu'ingénieur front-end, je travaille tout le temps avec des designers, et j'ai toujours aimé ce moment où nous nous sommes assis et je me disais : « D'accord. Je fais les dernières retouches. Nous avons encore un jour ou deux jusqu'au déploiement. Alors designer, asseyez-vous et voudriez-vous critiquer cela ? Je veux que vous ouvriez ma version hôte locale sur votre navigateur et sur votre téléphone, ou autre, et que vous me parliez de ce que vous voyez.

Adam : Et après avoir fait cela pendant de nombreuses années et toujours aimé cette interaction, j'ai en quelque sorte commencé à me sentir coupable au bout d'un moment à cause de la simplicité et de la simplicité des tâches. Ils seraient comme, « Un pixel ici. Une marge de cinq pixels ici. Et c'était toujours des lentes et des coups de coude, et des lentes et des coups de pouce à l'espacement et au type. Je veux dire, c'était rarement comme "Ooh, attendez une minute pendant que je passe 30 minutes à changer certains angles, ou quoi que ce soit, pour ajuster mon DOM afin que le DOM puisse prendre en charge votre demande", ou quoi que ce soit.

Adam : C'était généralement des trucs minuscules. Et puis j'ai fini par faire un sondage, et j'ai sondé tous ces designers chez Google. Et je me disais : "Quand vous ouvrez DevTools, que faites-vous ?" Et il était en quelque sorte retentissant qu'ils n'aient besoin que de bases. Et donc c'est né de, je me suis dit: «Cela devrait être plus facile. Vous ne devriez pas avoir à ouvrir le capot de la Ferrari, à déplacer un morceau de moteur, juste pour changer la couleur des sièges de la voiture. Ce n'est pas juste. Vous devriez juste pouvoir toucher les sièges de la voiture et changer la couleur, tout comme un outil de conception. » J'étais comme, "Quelque chose pourrait faciliter ce flux de travail." Et je me suis dit : "D'accord, je suppose que je vais pirater quelque chose pour voir si je peux créer la solution."

Adam : Et c'est comme ça que tout a commencé. Cela a vraiment commencé avec l'espacement puis la typographie. Et une fois que j'avais un mécanisme de sélection qui imitait les outils de conception, c'était comme: "Eh bien, que puis-je faire d'autre?" Et ça a continué à partir de là. Mais oui, né à ce moment-là.

Drew : L'idée est donc que le client vous demande d'agrandir le logo, et VisBug aide le navigateur à se comporter davantage comme un outil de conception pour effectuer ce genre de modifications. Donc plus proche de quelque chose comme Illustrator, ou Photoshop, ou Figma, ou n'importe lequel de ces types de choses.

Adam : Ouais. Ce cas d'utilisation est également bon. Parce que vous pourriez être avec un client et qu'il dise : « Oh, nous adorons ça », c'est tellement classique, « Nous adorons le design, mais cette couleur bleue est difficile pour nous. » Et vous êtes comme, "Vraiment?" C'est comme, les gens peuvent soumettre un formulaire et vous pouvez gagner de l'argent, mais vous voulez me parler de bleu maintenant ? Et généralement, cela créerait tout un cycle. Le Premier ministre disait : « D'accord, nous allons enregistrer votre demande, puis nous l'enverrons à la conception. »

Adam : Mais si le concepteur est là et que c'est son navigateur qui l'affiche, il dirait : "D'accord. Eh bien, je vais simplement cliquer sur la chose et changer la couleur. Et vous pouvez supprimer tout un cycle de travail en prototypant simplement le changement dans le navigateur. Donc c'est. C'est plus efficace contre un produit existant, n'est-ce pas ? Parce que c'est un outil de débogage. Ce n'est pas nécessairement un outil de génération. Il ne crée pas un site pour vous. C'est possible, mais c'est un peu gênant.

Drew : Techniquement, c'est une extension que vous installez dans un navigateur Chrome. Est-ce correct?

Adam : Oui. Et c'est une extension. Lorsque vous le lancez, il télécharge un fichier JavaScript qui dit : « Voici un élément personnalisé appelé VisBug ». Et puis vous mettez l'élément DOM, vis-bug sur la page. Et pouf, je prends juste ce moment et le transforme en une barre d'outils, et commence à écouter les événements sur la page. J'écoute vos événements de survol et j'écoute vos événements de clic. Et j'essaie de faire de mon mieux pour les intercepter et ne pas concurrencer votre page principale.

Adam : Mais oui, c'est l'essence même de… La seule raison pour laquelle c'est une extension, c'est juste pour qu'elle soit facile à mettre sur votre page. Bien qu'à ce stade, certains paramètres vous accompagnent désormais dans tous les navigateurs. Mais il s'agit toujours principalement, à 99,9 %, d'un élément personnalisé sans dépendances. Je pense que j'aime une bibliothèque de couleurs que j'utilise, et sinon c'est tout simplement vanille. Ouais.

Drew : Je suppose que c'est comme ça que Firebug a commencé, n'est-ce pas ? En tant qu'extension Firefox à l'époque.

Adam : Oui. C'est pourquoi il s'appelle VisBug. C'est très inspiré de Firebug mais pour les concepteurs visuels.

Drew : Ah. Nous y voilà. Je veux dire, ce n'est peut-être pas le format idéal, étant un podcast audio, pour parler d'un outil visuel. Mais expliquez-nous, si vous voulez, certains des types d'outils et d'options que VisBug vous offre.

Adam : Absolument. Donc, l'une des premières choses que fait VisBug, et vous pouvez aussi, si vous êtes à la maison ou devant un ordinateur, vous pouvez aller sur visbug.web.app, et essayer VisBug sans l'extension, n'est-ce pas ?

Drew : Ah.

Adam : C'est un composant Web, donc j'ai chargé une page Web pour vous ici à visbug.web.app qui semble avoir tout un tas de planches d'art, et puis bien sûr, VisBug préchargé. Et le but de ce site est de vous permettre de jouer, d'explorer et de supprimer. Je pense que la touche de suppression est l'un des outils les plus satisfaisants pour commencer. Vous êtes comme, "Qu'est-ce que je peux faire à une page?" Et vous vous dites : "Eh bien, je peux le détruire."

Adam : Et j'ai fait en sorte que tu puisses maintenir la suppression, il trouvera le suivant… Ce qui est assez difficile sur une suppression. Vous supprimez quelque chose et il sélectionne le frère suivant. Donc, il sélectionnera le frère suivant pour toujours. Si vous maintenez la suppression jusqu'à ce que vous supprimiez le tout… Quoi qu'il en soit, très satisfaisant. Appuyez sur Actualiser et tout revient. Mais le premier outil livré avec VisBug, donc lorsque vous venez de le lancer, est l'outil guides. Et j'avais l'habitude de tenir littéralement du papier sur mon écran, ou j'allais chercher une extension système qui me permettrait de trier des choses et de créer des lignes.

Adam : Parce que, oui, l'alignement devient très optique à un certain point pour beaucoup de designers, n'est-ce pas ? Ils ne veulent pas nécessairement un alignement mathématique, n'est-ce pas ? C'est pourquoi la typographie a un crénage optique. Ce n'est pas du crénage mathématique. C'est le crénage humain. Et donc l'outil de guides est enraciné dans le fait que beaucoup de nits qui se produisent d'un concepteur zooment sur des choses, vérifient l'alignement. L'espacement est-il bon ?

Adam : C'est donc la deuxième chose que fait l'outil guides. Lorsque vous le lancez et que vous survolez simplement des éléments, vous verrez que l'élément sur lequel vous êtes survolé est entouré d'une petite boîte. Et puis des guides en pointillés apparaissent, comme le feraient normalement les dirigeants. Et tout comme dans Sketch et Zeplin où vous survolez et vous obtenez ces guides, c'est le même concept, il suffit de vivre sur votre page. Et si vous cliquez sur quelque chose, puis survolez vers une nouvelle destination, vous obtenez des outils de mesure. Et les outils de mesure sont en pixels, et ils sont calculés… Donc visuellement, combien de pixels sont entre eux. Pas ce que quelqu'un a dit. Il ne s'agit pas d'additionner tous les espacements, c'est juste que vous cliquez sur cette chose et c'est si loin de cette autre boîte.

Adam: Et je pense que cela devient vraiment utile, car vous pouvez maintenir la touche Maj enfoncée et continuer à cliquer, et essentiellement vérifier que vous avez un espacement égal entre cinq icônes. Et c'est juste quelques clics. Vous n'avez pas besoin de connaître le code, il suffit de lancer VisBug, de survoler, de cliquer, de cliquer, de cliquer, et vous verrez que « Oh, regardez ! Ouais. 15 pixels entre chacun d'eux. Ou parfois vous obtenez quelque chose qui est un peu ennuyeux, vous cliquerez dans une case puis cliquez sur sa case parente et vous vous rendrez compte que sa distance supérieure est de neuf et celle du bas est de huit. Et vous dites : « Comment vais-je centrer ça ? C'est en quelque sorte entre les deux. Et serre le poing.

Adam : Mais au moins, vous pouvez le voir facilement et agréablement avec l'outil des guides. Alors oui, c'est l'outil des guides.

Drew : J'y suis certainement allé, en tenant des bouts de papier devant l'écran. Et aussi, l'autre astuce que j'utiliserais est d'ouvrir une autre fenêtre de navigateur et d'utiliser le bord de la fenêtre pour aligner les éléments. Et puis vous essayez en quelque sorte de tout garder au bon endroit afin que, lorsque vous modifiez et actualisez le code, tout reste aligné. Ouais, pas une façon idéale de travailler, donc.

Adam : Ce n'est pas une façon idéale de travailler. Ouais. Et il y a le suivant… Alors, oh, et la première version de ça était très lâche. Il ne s'est pas cassé, il a juste tenu un réticule, ce qui est une fonctionnalité que je rajouterai plus tard. Ainsi, certains utilisateurs disent : « Hé, j'adore le snapping, c'est comme mes outils de conception. Mais que se passe-t-il si je veux une mesure lâche ? Ou je veux faire une lettre, je veux mesurer une lettre, pas sa boîte aux lettres ? Et donc, eh bien, cet outil de guidage pourrait très facilement être remplacé par une touche de modification.

Adam : C'est donc là que VisBug devient un peu différent, mais aussi, espérons-le, familier, c'est qu'il est très lourd en modificateurs de raccourcis clavier. Donc, tout comme si vous regardez un designer professionnel, ils sont très avertis en matière de raccourcis clavier. Et ils appuient sur des raccourcis clavier ici, zooment, appuient sur des raccourcis clavier là-bas et font tout leur travail depuis leur clavier. Et donc VisBug est très centré sur le clavier dans la façon dont vous changez les choses.

Adam : C'est aussi parce que VisBug permet plusieurs sélections et qu'il peut modifier l'espacement de 100 éléments en même temps. Et il le fait relativement. Donc de toute façon, il a quelques bizarreries intéressantes, mais le clavier dans un concept de modificateur est vraiment important. Et vous pouvez maintenir l'option, ou déplacer ou commander dans de nombreux outils et obtenir quelque chose de différent, ou obtenir un nouveau type de fonctionnalité.

Drew : C'est donc l'un de ces outils où il vaut vraiment la peine d'apprendre les raccourcis clavier.

Adam : C'est le cas. Ainsi, lorsque vous lancez VisBug et que vous survolez l'une des icônes d'outils, vous obtenez une ventilation. Il lance un petit menu déroulant, il indique le raccourci clavier pour choisir cet outil, et il vous indique ce qu'il peut faire et quelles interactions faire pour les obtenir. Ainsi, l'outil de guides dit: «Guides d'élément, survolez simplement. Mesurez quelque chose, cliquez, puis survolez quelque chose de nouveau. Les mesures collantes sont décalage plus clic afin qu'elles persistent.

Adam : Et ces guides sont vraiment bien aussi pour les captures d'écran. Donc, si vous examinez un PR, même en tant qu'ingénieur frontal, ou peut-être un concepteur examinant un PR, cela peut être un moyen très puissant pour vous d'y entrer et, oui, d'avoir une inspection haute fidélité. Ce qui nous amène à l'outil suivant. Voulez-vous entendre parler du prochain outil ?

Drew : Oui, bien sûr. Allons y pour ça.

Adam : Génial. Le suivant est l'outil d'inspection. Et celui-ci est comme… Les concepteurs ne veulent généralement pas tout le CSS, n'est-ce pas ? Quand ils s'attendent à… J'ai presque dit Firebug, mais les Chrome DevTools, vous obtenez la liste complète, n'est-ce pas ? J'ai sélectionné ce H1 et voici donc tout jusqu'à la feuille de style du navigateur. Et le concepteur est comme, « Le navigateur quoi ? Le navigateur a une feuille de style ?

Drew : Au bas de ce panneau défilant.

Adam : Le fond trouble, n'est-ce pas ?

Drew : Ouais.

Adam : C'est comme si vous décolliez toutes les couches et que vous vous disiez : "Ooh, je n'aime plus ces couches." Et l'outil d'inspection ici dit : « Ah, les concepteurs, je sais ce que vous voulez. C'est juste la couleur de la bordure. Fondamentalement, ne me montrez quelque chose que s'il est unique, alors ne me couvrez pas simplement de propriétés CSS. Et je m'intéresse surtout à la couleur, à la typographie et à l'espacement. Je vais donc regarder les marges, les hauteurs de ligne, la famille de polices est vraiment importante, n'est-ce pas ? Il y a toute une extension juste pour vous dire quelle est la famille de polices sur une page.

Adam : Dans VisBug, il s'agit simplement d'un élément de ligne dans l'outil d'inspection. Il vous suffit donc de lancer VisBug, d'appuyer sur inspecter et de survoler n'importe quelle typographie et il vous indiquera la famille de polices. Alors oui, il essaie de faire en sorte qu'un designer se concentre sur ce qu'il fait surface, oui.

Drew : Cet outil n'affiche donc aucun style hérité. Est-ce correct?

Adam : C'est exact. Sauf s'ils sont hérités et uniques. Donc s'ils… Une couleur de texte ou quelque chose comme ça, si la couleur du texte n'est pas littéralement le mot héritage, ça vous dira que c'est une valeur calculée, que c'est quelque chose d'intéressant.

Drew : Ouais, c'est vraiment utile juste… Oui. Vous aide à vous concentrer sur les choses qui s'appliquent littéralement à cette seule instance de quelque chose, ce qui est évidemment ce que vous vouliez changer. Je veux dire, je suppose que cela pourrait être vraiment utile, tous ces outils seraient vraiment utiles pour, un peu comme vous l'avez mentionné, obtenir les commentaires des parties prenantes. Et une sorte de travail interactif avec un client.

Drew : Je suppose que cela fonctionnerait aussi bien que le partage d'écran, comme nous devons le faire de plus en plus de nos jours. Vous n'avez pas besoin d'être assis devant un ordinateur avec quelqu'un, vous pouvez être assis à l'autre bout d'un appel et partager votre navigateur et le faire de cette façon. Je suppose que ce serait un moyen assez efficace d'obtenir des commentaires lorsqu'un client ne peut pas pointer l'écran et dire-

Adam : Certainement.

Adam : C'est toujours magique lorsque vous transformez la page Web en direct en ce qui ressemble à un plan de travail Zeplin. Quelqu'un est comme, "Quoi... Est-ce qu'on vient d'aller dans un nouvel endroit?" Et vous vous dites : « Non, c'est votre produit. Nous interagissons simplement avec lui de manière très visuelle. Ouais, ça peut être vraiment sympa.

Drew : Y a-t-il d'autres cas d'utilisation intéressants auxquels vous avez vu VisBug ou qui vous sont venus à l'esprit ?

Adam : Ouais. Donc, oui, il y en a tellement que c'est un peu difficile de commencer. Oh, celui qui est important est la communication développeur à développeur. VisBug travaille sur les valeurs calculées. Donc, il ne regarde pas vos valeurs créées. Et cela peut être très agréable, car vous êtes en quelque sorte en train de mesurer et d'inspecter le résultat final absolu dans la façon dont les pixels ont été calculés à l'écran. Et cela peut être très agréable d'avoir une conversation de cette façon, alors que vous travaillez sur les résultats, par opposition au côté auteur.

Adam : Et vous pouvez revenir en arrière : "D'accord, comment nous sommes-nous trompés du côté de la création si c'est ce que nous avons obtenu visuellement ?" Ce qui joue également en quelque sorte, l'outil suivant est l'outil d'inspection de l'accessibilité. Ainsi, l'outil d'inspection permet de voir facilement les styles sur un élément, et il les décompose d'une manière très conviviale pour les concepteurs. L'outil d'accessibilité vous aide à inspecter tous les éléments d'une page, et il met en évidence toutes les propriétés accessibles dont il dispose, ce qui, je l'espère, facilite la vérification que quelque chose est fait.

Adam : Donc, un PR… Et les choses sont souvent créées. C'est donc, encore une fois, de développeur à développeur, concepteur développeur, vous passez en revue les interfaces. C'est tellement critique. Si vous regardez une interface et que vous êtes curieux, VisBug a un cas d'utilisation pour vous. Il existe également des cas d'utilisation où vous pouvez trier un prototype dans le navigateur. Nous avons donc parlé d'un cas où c'est comme si le client voulait essayer le bleu. D'accord, c'est un scénario assez simple.

Adam : Mais il y en a d'autres aussi. Si vous appuyez sur la commande D sur VisBug, vous dupliquez un élément. Et peu importe ce que vous dupliquez. Vous pouvez donc dupliquer un en-tête, ajouter un espacement entre les deux en-têtes et créer une variante dans le navigateur. Vous double-cliquez sur le texte de l'en-tête et il devient un champ de texte modifiable, et vous allez essayer un nouveau titre et allez voir comment le titre s'adapte. Allez ajuster un peu d'espacement et vous venez de vous épargner tout ce travail de développeur, de trouver un fichier source et tout ce genre de choses, et vous êtes juste…

Adam : Alors oui, cela peut vous aider à explorer et à vérifier. C'est un peu bizarre… Je veux dire, c'est beaucoup de choses que DevTools fait, n'est-ce pas ? Il arrive une fois que vous avez terminé, il ne vous donne pas très souvent du code source, ce n'est pas très souvent que vous copiez du code à partir de DevTools. Vous pouvez copier une paire clé-valeur. Comme, "Oh, j'ai changé ce style." Mais oui, de toute façon.

Drew : Mm-hmm (affirmatif). Ouais. Je peux penser à des cas particulièrement visuels où vous pourriez vouloir, vous l'avez mentionné, dupliquer des éléments. Vous voudrez peut-être prendre une section entière de la page et la dupliquer pour simuler ce que ce serait s'il y avait beaucoup plus de contenu que prévu.

Adam : Oui. C'est le cas d'utilisation des tests de chaos.

Drew : Ouais.

Adam : Absolument.

Drew : C'est quelque chose que nous devons tous gérer, concevoir avec une sorte de systèmes basés sur CMS et toutes ces sortes de tâches amusantes.

Adam : Oui, c'est aussi un cas d'utilisation vraiment crucial. Parce que je fais celui-là pour… Ouais, les gros titres, comme je l'ai dit. Vous venez de double-cliquer sur du texte et je vais juste claquer le clavier. Blah, bla, bla, bla, et frappez un tas d'espaces, bla, bla. Et je me dis, "D'accord, comment va la mise en page ? Oh, ça a fait du bien. Bon, bien, je peux passer à la chose suivante. Que se passe-t-il si je le duplique quatre fois ? Y a-t-il encore de l'espace entre tout ? Est-ce qu'il coule à côté de l'élément suivant ? »

Adam : Ça peut être vraiment bien pour cette simulation du chaos du contenu. Titre très court, titres très longs, n'a pas d'amis, a un million d'amis. Comment gérez-vous ces cas d'utilisation dans l'interface utilisateur ? Ouais.

Drew : Cela fonctionne donc avec n'importe quel contenu basé sur un navigateur. Donc, les PWA ainsi que les pages Web régulières ?

Adam : Oui, c'est le cas. Donc, si vous avez installé Spotify, je le fais tout le temps, j'ai installé Spotify et je me dis simplement : "Spotify, tu as l'air d'être une application impossible à inspecter." Mais devinez quoi ? VisBug s'en fiche. VisBug superpose toutes vos affaires, inspecte toute la typographie. J'ai créé un thème léger pour… Oh, j'ai un tweet quelque part où j'ai créé un thème léger de Spotify.

Adam : Oh, c'était un autre cas d'utilisation, désolé, pour le prototypage de la couleur. Je peux créer un thème lumineux sur le produit lui-même sans avoir à me soucier d'un tas de feuilles d'autocollants, n'est-ce pas ? Donc, il y a cette mentalité importante, j'aimerais que VisBug aide les gens à se lancer, c'est-à-dire à utiliser votre produit comme terrain de jeu. Utilisez ça comme… C'est tellement réel. C'est plus réel que vos compositions de conception. Passez donc un peu plus de temps là-dedans. Je pense que vous constaterez que vous pouvez prendre des décisions de conception plus efficaces en travaillant sur votre produit réel.

Drew : Et le cas de l'accessibilité est également particulièrement intéressant, car souvent, en particulier ces jours-ci, nous travaillons beaucoup dans des bibliothèques de composants et examinons de petits composants d'une page. Et passer moins de temps à regarder tous ceux qui sont intégrés ensemble pour créer le type de vues avec lesquelles un client interagit réellement. Et il devient vraiment difficile de garder un œil sur ce genre de détails plus fins comme les éléments d'accessibilité, les attributs, qui ne sont pas visibles sur la page.

Drew : C'est très difficile de garder un œil sur les choses qui ne sont pas visibles. C'est donc là que l'outillage peut vraiment, vraiment aider à inspecter quelque chose et à voir que, oui, il a les bons rôles dessus et c'est-

Adam : C'est le cas. C'est le cas d'utilisation exact. Je veux qu'un PM puisse aller vérifier ce truc. Je veux qu'un concepteur puisse aller voir l'accessibilité et ne pas avoir à ouvrir les outils, trouver le nœud DOM, tout est compressé dans le panneau des éléments et a l'air bizarre. Qu'il dit simplement "Voici les attributs de la zone, voici le titre s'il existe." Il existe également d'autres outils d'accessibilité. VisBug est livré avec l'icône de recherche. L'icône de recherche a plusieurs façons d'interagir avec elle.

Adam : Donc, il interroge d'abord la page. Donc, si vous connaissez le type d'élément ou le nom de classe d'élément que vous souhaitez, vous pouvez simplement le rechercher, vous n'avez donc pas à le trouver avec la souris. Mais cela contient également des commandes slash. Il y a donc des plugins dans VisBug, et ils exécuteront des scripts sur la page. Donc, si vous avez déjà eu un marque-page dont vous avez enregistré trois ou quatre… Vous vous dites : « Je vais utiliser celui-ci car il met en évidence toutes les bordures et me montre mes boîtes. C'est comme une astuce de débogage ou quelque chose comme ça.

Adam : C'est probablement un plugin VisBug. Donc, vous lancez VisBug, appuyez sur slash, et vous obtiendrez la saisie semi-automatique, et il vous montrera tous les différents plugins. Et il y en a quelques-uns sur l'accessibilité qui sont vraiment sympas qui superposent les erreurs, et diverses choses comme ça. Donc je suis d'accord. L'accessibilité devrait être plus accessible. C'est juste boiteux à dire. Mais il doit être plus proche de la ceinture à outils. Et je pense que parfois c'est trop loin, et c'est peut-être pour ça qu'on le rate. J'espère donc que si c'est un peu plus à l'avant et au centre, et plus facile, il sera plus vérifié. Ouais.

Drew : Et c'est intéressant que vous disiez que VisBug fonctionne avec le genre de valeurs calculées des choses, comme les couleurs. Cela signifie-t-il que si vous avez plusieurs éléments en couches qui ont différents niveaux d'opacité, vous pourrez mesurer la couleur exacte qui est rendue à l'écran plutôt que-

Adam : Oh.

Drew : … en regardant les éléments individuels et en essayant de les résoudre d'une manière ou d'une autre ?

Adam : C'est une très bonne question. Donc je pense, si je comprends bien la question, qu'il s'agit d'une difficulté classique dans le front-end, ouais, comment savez-vous si vous avez un mot de texte à moitié opaque, quelle est sa couleur sur le gris par rapport au blanc ? Et comment connaissez-vous son contraste? Pour l'instant, nous ne savons pas. Donc VisBug connaît la couleur, et il dira "50% gris", ou quelle que soit la couleur que vous avez là-bas. Mais il ne sait rien de plus intelligent que cela. Il n'est pas en mesure de…

Adam: Je pense que ce que vous auriez à faire dans ce cas, c'est de créer une toile, de peindre toutes les couches dessus, puis d'utiliser une pipette ou un… Donc, vous le rendriez dans la toile, les feriez tous s'écraser ensemble dans un une seule couche peinte, puis extrayez la valeur de pixel unique pour voir quelle est sa fin réelle calculée en gris après qu'elle a été superposée sur l'autre élément.

Adam : Je pense que quelqu'un l'a spécifié, ou peut-être que je l'ai comme un problème GitHub que ce serait bien. Parce que VisBug pourrait faciliter cela, à 100 %. VisBug, dans les coulisses, j'ai déjà fait avec les métriques de texte, où vous survolez les choses et cela vous donne des informations folles sur les polices. C'est presque trop d'informations, comme la hauteur x et la hauteur du plafond, mais cela va encore plus loin. Et c'est comme, "Ooh, je suis un peu éteint à un certain point." Je dois donc trouver comment trouver le signal par rapport au bruit là-bas.

Adam : Mais oui, j'aime ce processus de réflexion, car nous devrions avoir un outil qui fait cela. Et si nous savons comment le calculer, nous pouvons apprendre à VisBug à le faire, et ce serait une fonctionnalité vraiment intéressante à avoir, une couleur calculée pertinente pour l'opacité. Aimer.

Drew : Oui, je veux dire, c'est le genre de cas standard d'avoir du texte sur un arrière-plan où vous n'êtes pas sûr que le contraste soit suffisant pour satisfaire aux exigences d'accessibilité. Et peut-être que ce n'est pas le cas, peut-être que le contraste est trop faible et que vous souhaitez ensuite ajuster les valeurs jusqu'à ce que vous obteniez juste le point où le contraste est bon, mais il ne s'éloigne pas trop de ce que le client voulait initialement en termes de couleurs de la marque et les choses.

Adam : J'appelle ça bosse, bosse jusqu'à ce que tu passes.

Drew : Ouais.

Adam : Parce que c'est ce que ça fait. Je suis comme, "Ooh, je suis un peu à court de score." Donc c'est comme, je vais aller à ma légèreté HSL et je vais juste cogner, cogner, cogner, et regarder les petits chiffres monter jusqu'à ce que ce soit comme, "Ding", j'ai une coche verte. Je suis comme, "D'accord, cool." Et oui, parfois, une partie de cette couleur n'est pas cool. Alors, avez-vous étudié une grande partie du travail d'accessibilité perceptuelle 3.0 en cours ? Pour que nous n'ayons plus AA ou AAA, nous aurons un numéro et cela inclut des choses comme la finesse de la police. Donc, si c'est une police fine, il obtiendra un score inférieur, si c'est une police épaisse, il va… Parce qu'il y a beaucoup de contraste.

Drew : Ouais, non, je n'avais rien vu de tout ça, mais ça a l'air...

Adam : Quoi qu'il en soit, c'est une chose vraiment cool à explorer.

Drew : Cela semble fascinant, oui. Je vais devoir trouver quelqu'un à qui en parler. C'est un autre épisode. Donc, je veux dire, je suis sûr que certains développeurs pourraient dire que tout ce que fait VisBug, vous pouvez le faire via le panneau CSS de DevTools. Et je pense que c'est un peu juste, mais que c'est probablement à côté de la plaque, dans la mesure où, oui, vous manipulez CSS lorsque vous apportez des modifications, mais cela met une sorte d'interface utilisateur axée sur le concepteur plutôt qu'une interface axée sur le développeur. Est-ce une description juste?

Adam : C'est vraiment juste. Et honnêtement, les meilleures idées passent de VisBug à DevTools. Et ils l'ont déjà fait. Donc VisBug, si vous appuyez sur l'option de commande C sur n'importe quel élément, il prend chaque style calculé, au moins c'est unique. Encore une fois, c'est comme si nous en ferions des dont nous n'allons pas simplement vous donner toutes ces propriétés héritées. Mais placez-les tous dans votre presse-papiers, et vous pouvez coller ce style ailleurs, dans une feuille de style, dans un CodePen, et recréer littéralement l'élément en quelques clics.

Adam : Et ce genre d'interactions a fait son chemin dans DevTools, dans ce panneau d'éléments. Il y a d'autres choses, cependant, qui ne l'ont pas été, à savoir que DevTools est un outil d'inspection à un seul nœud uniquement. Et VisBug suit le mantra de l'outil de conception qui est, non, je devrais pouvoir effectuer une sélection multiple. J'ai besoin de pouvoir éditer en masse, inspecter en masse. Et donc j'utilise VisBug tout le temps pour l'espacement. Parce que je peux mettre en évidence plusieurs éléments et voir la marge s'effondrer.

Adam : Dans DevTools, vous ne pouvez jamais le voir, car vous ne pouvez voir qu'un seul nœud à la fois la plupart du temps, bien qu'il existe un moyen d'afficher plusieurs marges, mais ce n'est pas la même chose. Et donc, oui, il y a ces cas d'utilisation de niche qui peuvent être vraiment amusants comme ça. Un autre est, si vous mettez en surbrillance un… Disons que vous avez un système de typographie et que vous avez H1 à H7, comme dans un livre de contes ou quelque chose comme ça, vous pouvez tous les mettre en surbrillance dans VisBug, maintenez la touche Maj enfoncée, cliquez simplement sur chacun d'eux. Boop, boop, boop, boop, allez dans l'outil de typographie et appuyez sur haut ou bas, et cela fait un changement relatif pour chacun d'eux.

Adam : Donc, chacun d'entre eux en augmentera un ou en diminuera un. Et ce n'est tout simplement pas quelque chose que DevTools rend très facile. Et donc, oui, il a des super pouvoirs comme ça, parce que c'est un peu plus agnostique. Et il est prêt à toujours itérer sur un tableau. Ouais.

Drew : Quelle est donc l'origine de VisBug ? Et maintenant, est-ce juste un projet personnel ? Ou est-ce un projet Google ? Ou quel est l'état de celui-ci?

Adam : Ouais. Alors d'abord, le statut est, c'est un projet Google. Son objectif principal est d'être un lieu de prototype et d'exploration avant que les choses n'entrent dans DevTools. Du moins du côté de Google. Mais de mon point de vue personnel, je le vois toujours comme un endroit où aller préparer les tâches courantes ou intégrer certaines optimisations pour accomplir les tâches courantes. Et juste pour donner à un public plus large un moyen de se pencher sur le DOM.

Adam : Je pense vraiment que DevTools est super puissant, mais c'est très intimidant. Un seul onglet peut prendre une carrière à apprendre. J'apprends encore des choses dans DevTools et je les utilise tout le temps. Et donc oui, c'est une sorte de public différent à certains égards. Ce sont plutôt les débutants, les gens qui arrivent, ou peut-être même des gens comme les PM, les managers, qui n'ont jamais l'intention de coder mais qui sont intéressés par le résultat. Et donc cela leur donne en quelque sorte, oui, juste un outil léger pour y entrer.

Drew : C'est un point intéressant que vous soulevez, car personnellement, je constate souvent que j'ai du mal à trouver un flux de travail confortable pour gérer tous ces types de DevTools. Et vous avez tous ces petits panneaux claustrophobes, et vous pouvez les détacher dans une autre fenêtre, mais vous devez ensuite suivre deux fenêtres différentes. Et une fois que vous avez ouvert quelques fenêtres de navigateur, vous ne pouvez pas… Vous en concentrez une et vous ne savez pas à quel DevTools elle appartient.

Drew : Et puis dans les panneaux eux-mêmes, c'est une sorte de Far West des conventions d'interface utilisateur. Vous défilerez et les choses commenceront à faire des choses étranges auxquelles vous ne vous attendiez pas. Et en termes d'expérience utilisateur, j'ai l'impression que tout n'est qu'un gros gâchis.

Adam : C'est le cas. Ouais.

Drew : Pensez-vous que c'est inévitable ? Peut-il être mieux?

Adam: J'ai définitivement des pensées ici. Et oui, je pense qu'un bon… Alors disons que vous avez un auditeur en ce moment qui se dit : « Je suis assez calé avec les DevTools. Je ne pense pas qu'ils soient si fous. Je dirais: "D'accord, ouvrez Android Studio ou Xcode. Commencez un projet, et allez voir les DevTools, allez voir la sortie. À quel point vous sentez-vous familier en ce moment ? » Probablement très étranger. Vous regardez cela en disant: «Ce sont des ordures. Pourquoi font-ils cela? Pourquoi ce panneau est-il ici ? » Et votre esprit commence à courir avec toutes ces questions pourquoi et confusion.

Adam : Et c'est comme, eh bien, c'est comme ça que tout le monde se sent la première fois qu'il ouvre DevTools. Donc, vous devez vraiment être empathique à cela.

Drew : Est-ce inévitable que… Pouvons-nous faire mieux ? Ou est-ce juste le genre d'ordre naturel des choses ?

Adam : Alors, voici mon point de vue actuel à ce sujet, je pense que la complexité est vraiment facile à comprendre. Et DevTools est l'une de ces choses, ils sont naturellement complexes. Il n'y a pas de bonne interface utilisateur pour faciliter beaucoup de ces choses. Beaucoup de ces choses sont construites par des développeurs. Et je pense que les développeurs construisent des outils pour les développeurs, c'est bien, parce que vous allez avoir... Si c'est le seul moyen, ou si c'est même si c'est un bon moyen, vous allez l'apprendre, et vous deviendrez bon à il, et vous vous sentirez à l'aise avec elle.

Adam : Et tous les DevTools sont un peu bizarres, parce qu'ils sont faits pour leurs cas d'utilisation bizarres, n'est-ce pas ? Le développement est bizarre. Soyons honnêtes. Nous fabriquons des rouages ​​invisibles et des invisibles deux par quatre, et nous construisons des maisons, essentiellement, avec des parties virtuelles invisibles. Alors oui, nous avons besoin d'outils bizarres pour aller inspecter ces choses et nous dire ce qu'elles sortent.

Adam : Cela étant dit, ce que fait VisBug, et ce que j'ai déplacé lentement dans DevTools, ce sont des outils plus petits qui sont plus ciblés, par opposition à un gros outil qui prétend faire beaucoup. Je pense qu'il est difficile que les choses se passent vraiment bien. Et c'est un argument classique, non ? Ce sont toutes des stars, des spécialistes contre des généralistes. Aucun des deux ne sera toujours parfait.

Adam : Mais ce que VisBug essaie de faire, c'est qu'il a créé des spécialistes. Ainsi, l'outil de guides ne fait que des guides. Et cet outil ne fuit jamais dans les autres outils de la page. Et donc j'essaie de faire cela davantage avec DevTools, où DevTools veut aider davantage les concepteurs, ce que VisBug a aidé à inspirer DevTools à voir. Et la façon dont je continue à introduire des choses est, au lieu de créer un éditeur de grille, par exemple, où vous pouvez… « Toute la puissance de la grille dans une seule superposition », n'est-ce pas ? "Vous pouvez ajouter des pistes, supprimer des pistes, bla, bla, bla."

Adam : Et je me dis : « Cela semble vraiment cool et aussi très complexe. » I'm like, “Grid is crazy, there's no way we're going to build a GUI for that.” So I'm like, “Why don't we just handle grid template columns first, and the ability to manage the tracks in there, almost like they're chips? What if we could just add, and edit, and delete them?” They're much more physical and less of string. I'm like, “Well what we've done is, we've created a micro-experience that solves one problem really well and then doesn't leak anywhere else, and it's also really naive. It's a naive tool.”

Adam: So and a good example of that is the angel tool in DevTools. Have you seen that tool yet?

Drew: No, I haven't.

Adam: Any angle… So this is, I'm calling these type components. So their CSS is typed, and the angle is a type, and many CSS properties will take a type value of angle. And what I was like… Well, angles, those are just a wheel like a clock. Why don't we give someone a GUI so that if they click an angle they can change an angle and snap it to 45, snap it to 90, there's common interactions with just this unit of angle.

Adam: And we made a tool for it. And it's super cool. It looks great, the interaction is great, keyboard accessible the whole nine, and that's an example where I think you can make small focused things that have big impact, but don't necessarily solve some big problem. And yeah, you'll have another tool like Webflow that's trying to create entire design tool and facilitate all your CSS.

Adam: So, yeah, I don't know the right answer, but I do know that an approachability factor comes in when things do less. And so it just kind of makes it a little easier. Like VisBug, you might only know three tools on it. You only use the guides, the margin tool, and then the accessibility inspect tool. Maybe you never use the move tool or the opposition tool. Just, yeah.

Drew: I mean, talking of design tools, we've seen a big rise in the last few years of tools. Things like Figma, which are great for originating new design work in the browser. Is there overlap there with what Figma is doing and what VisBug is trying to do?

Adam: There's definitely overlap. I think they come at it from different directions. One of the things that I'm frustrated with Figma at is not something that VisBug could solve. And I think that design these days, even with the powerful tools and the Flexbox-like layouts that we have, I still think we start wrong when we draw a box on a canvas of a certain size. I'm like, “Sorry, that's just not the web. You're already not webby.”

Adam: Nothing is very content-focused. If I just drop a paragraph into Figma, it gives it some default styles and I'm like, “Why doesn't it do what the web does? Put it in one big long line.” You're like, “Contain it somehow,” right? And so I don't know. I think that Figma is empowering people to be expressive, limitless… What is the phrase I like to use? Yeah, okay, it's expression-centric. That's where I think VisBug and a lot of debug tooling is…

Adam: So yeah, one is empowering expression, and the other one is empowering inspection and augmentation. You need both, I think. I think that in one cycle of a product you're in full expression. You need to not have any limiters. You need it to feel free, create something exciting, something unique. But then as your product evolves and as more teammates get added, and just the thing grows and solidifies, you'll exit a phase of expression and into a phase of maintenance, and augmentation, and editing.

Adam: At which point your Figma files do two things, they get crusty, because your product is more… Well, it's real. Your product has made changes, and design decisions, because it's now in the medium. And so your file starts to look crusty. And then your file also just is constantly chasing production. And that's just a pain in the butt. And so VisBug is sort of waiting. So in the expression phase VisBug's like, “I can't help you very much. I'm just sort of, I'm not that powerful at expression.”

Adam: But then as you have a real product you can inspect it. And yeah, it can inspect anything. It has no limits. It goes into shadow DOM and everything. So yeah, I think they're just different mentalities for different phases of products, yeah.

Drew: So in VisBug if you have made a whole lot of changes, maybe you're sat with a client and you've tweaked some spacing, and you've changed some colors, and you've got it looking exactly how the client wants, they're happy. They obviously now think that all the work has been done.

Adam: It's done.

Drew: Which of course, it's not. We understand that. But what is the path? What is the developer journey from that point to… I mean, I presume that it's not practical to save or export, because there's no way to map what you're doing in the browser with those source files that originated that look. But what's the journey? How do you save, or export, or is it, I guess, taking a screenshot? Or what do you do?

Adam: Yeah, there's a couple paths here. And I want to reflect quickly on what we do in DevTools. So let's say, DevTools, we made a bunch of changes, there is the changes tab in DevTools, I don't think very many people know about it, which will surface your source file changes, and some other changes in there that you could go copy paste.

Adam: And yeah, this becomes a hard thing with all these tools that are editing code output, they don't have any knowledge of source or authoring files. I mean, maybe they have source maps, but I think that's a really interesting future. If we get to something where the calculated output could be mapped all the way back to the uncompiled source, that'd be really cool. But until then, VisBug does do similar to what you do in DevTools. Where you just copy paste the sort of pieces.

Adam: But I will share some fun ways to sort of make it even better. So one thing, let's say you made a header change, color change, and a change over here. You can go to the inspect tool, and when you hover on something it will show you a delta. It'll say, “Local modifications.” And if you hold shift you can create multiple sticky pinned inspections. And so you'll go to your header, you'll click it, you'll hold shift, click your other little box, and hold shift to click another little box. And now you have tool tips showing what you changed over the actual items in the page, take a screenshot, and ship it to a dev.

Adam: And they can sort of say, “Okay, I see you changed margin top to 20 pixels. I don't use pixels or margin top in my CSS. So I'll go ahead and change to margin block start two RAM, thank you and bye bye.” And that's kind of nice, is that the editor didn't have to care or know about the system details, they just got to say something visually and screenshot it. So that workflow is nice. It's pretty hands off and creates a static asset which is fine for a lot of changes.

Adam: But if you had a lot of changes and you really changed the page and you wanted to save it, there is another extension called… Let's see. Page, single file. Single file will download the entire current page as a single file HTML element, at which point you could drag that right into Netlify and get yourself a hosted version of your prototype.

Adam: Because what VisBug does is, it writes its styles in line on the DOM notes themself. So save file comes with it all. And I've got a tweet where I went to GitHub and I made… I just totally tweaked the whole site, and it looked cool. And I was like, “All right, save file.” And I saved it, opened it up in a new tab, just dragged it into the new tab and I was like, “Well this is really cool.” Because VisBug's been wanting a feature like this for a while. But it's a whole other extension's responsibility, is taking those third party assets, dealing with all the in line… And anyway, so it's really nice that that exists.

Adam: And so you can deliver a file, if you want to, or host it somewhere, and share multiple links to multiple versions of production. You modified production and then shipped it into netlify, and someone can go inspect it, and it's still responsive at that point too, right? At that point it's not a static comp you're sharing, it's still the live, responsive… Anyway, it's exciting. I mean, there's a future here that's, I think, really, really interesting and not far away.

Adam: It's just like we're a little still stuck, as designers, in our expression land. We're just too happy expressing. And we're dipping our toes into design systems, but even those I think are starting to get a little heavy for designers. And they're like, “Ooh, maybe it's too much system now.” And like, “Ugh, I'm getting turned off. I liked making pretty stuff. And it's a whole new job if you're doing design ops,” or whatever. Alors…

Drew: I like the fact that VisBug takes an approach of not being another DevTools panel, because the interface, it embeds a toolbar on top of your page just like a design toolbar. I guess that was a deliberate move to make it more familiar to people who are familiar with design tools.

Adam: Yep. If you've used Paint or Photoshop, they all come that way. And so it was the sort universal thing, that if I put a toolbar on the left that floated over your content, almost everyone's going to be like, “Well I'll go hover on these and see what my options are. And here's my tools. And I get to go play.” And it made a really nice, seamless interaction there. I do have a really exciting almost finished enhancement to this.

Adam: So, it's so cool to me, but I don't know if everyone else is going to be as excited. And this'll be a mode that you can change in your extension settings, is how do you want to overlay the page? Because right now VisBug puts a toolbar right on the browser page, which the page is rendered normal, and I know this is going to be weird to say that, but okay, so you scroll the page, and the content, and the body is width to width in the browser, right? So it's filling the little viewport.

Adam : J'ai un mod où, lorsque vous lancez VisBug, il prend tout le document HTML et le réduit dans un plan de travail. Cela ressemble à un plan de travail. Il flotte sur une ombre sur un espace gris. Vous pouvez vous déplacer à l'infini autour de lui. Ainsi, vous pouvez faire défiler le canevas de votre page, et ce qu'il vous permet de faire, vous voyez, disons que vous avez une page très longue et que vous voulez mesurer quelque chose de haut en bas, eh bien vous pouvez le faire maintenant , mais vous perdriez en quelque sorte le contexte au fur et à mesure.

Adam : Eh bien, dans ce nouveau scénario de zoom VisBug, vous maintenez l'option ou alt sur votre clavier, vous utilisez la molette de la souris, ou vous appuyez sur plus moins avec votre commande et vous pouvez zoomer votre page Web comme s'il s'agissait d'un plan de travail. Et j'essaie de le rendre aussi transparent que possible. Donc, vous entrez et sortez, et vous faites défiler vers le bas, vous entrez et sortez, mesurez à partir du… Et VisBug ne s'en soucie pas. Il continue à dessiner des superpositions calculées, vous pouvez modifier l'espacement.

Adam : Parce que je pense que c'est vraiment important, en tant que designer, de voir la vue d'ensemble de votre page en direct. Les animations sont toujours en cours, vous tous. Les zones défilantes sont toujours défilables, n'est-ce pas ? C'est vraiment cool. Vous êtes comme, "Ma page entière en une seule vue." En tout cas, c'est presque fini. C'est dedans-

Drew : Ça a l'air trippant.

Adam : C'est très trippant. Et c'est dans, j'ai juste besoin de m'assurer que cela fonctionne sur tous les navigateurs, car il fait évidemment certaines choses délicates pour que votre page en direct se sente ainsi. Mais ouais.

Drew : Incroyable. Est-ce… Je veux dire, je présume que VisBug est mis à jour assez régulièrement et progresse. Qu'est-ce que nous pouvons nous attendre à voir dans le futur ?

Adam : Oui, c'est certainement l'une des fonctionnalités sur lesquelles je travaille. J'ai une fonctionnalité où... Ainsi, lorsque vous cliquez sur quelque chose, vous obtenez une superposition avec ce qui ressemble à des poignées, n'est-ce pas ? Et c'est une sorte d'illusion, c'est censé vous mettre à l'aise. Et l'intention est de faire en sorte que ces poignées soient déplaçables. Mais j'ai des choses fondamentales que je dois d'abord résoudre, comme les éléments du navigateur n'ont pas de largeur. Donc, si vous commencez juste à saisir la largeur, je dois travailler pour que cette illusion se sente bien.

Adam : Et vous n'obtiendrez peut-être même pas les résultats souhaités, car il peut s'agir d'un élément au niveau du bloc dont vous réduisez la largeur, et vous n'obtenez pas la refusion d'un élément à côté. Et vous vous demandez peut-être pourquoi. J'ai donc des prototypes où vous pouvez faire glisser des coins, faire glisser des éléments. Mais je dois vraiment me concentrer sur la façon dont les outils de conception font cela. Ils ont toujours ce bouton bascule. Et c'est comme… Vous voyez, comment s'appelle la bascule ?

Adam : Mais c'est essentiellement comme du film rétractable… J'appelle ça du film rétractable. Rétractez mon élément, c'est la largeur de cet élément qui est la largeur de son contenu, contre voici la largeur de mon élément, collez quelque chose dedans. J'ai donc besoin de quelque chose comme ça dans le navigateur, superposé sur l'élément afin que vous puissiez choisir entre ceux-ci et peut-être même quelque chose qui vous permette de choisir entre bloc et en ligne, afin que vous puissiez obtenir les résultats souhaités.

Adam : Mais en fin de compte, le but ici est que VisBug ne veuille pas être entièrement piloté par le clavier. Je veux que vous puissiez faire glisser l'espacement. Si vous voyez un espacement de marge de 12 en haut, vous devriez pouvoir l'atteindre et le saisir, alors qu'en ce moment, vous devez appuyer sur le clavier pour spécifier que le côté supérieur de la boîte a besoin d'une marge supplémentaire.

Adam: Et donc oui, j'ai quelques bizarreries à régler, en termes de stratégie. Mais c'est vraiment un objectif de le rendre encore plus proche des outils de conception. Et peut-être même que je m'y plierai. C'est comme, eh bien, si vous voulez changer la largeur et que vous allez obtenir un design bizarre, il y a toujours des moyens de s'en sortir avec VisBug, comme l'outil de position vous permet vraiment d'échapper au flux. Si le flux ruine votre idée, l'outil de position vous permet de vous échapper.

Adam : Et donc il y a… Si quelqu'un devenait vraiment averti avec VisBug, il épaterait les gens, parce que c'est en quelque sorte illimité, et c'est comme, que pouvez-vous apporter à la table ? Il a un élément d'expression. Il y a certainement des tactiques expressives. Mais de toute façon, pour faire court, l'illusion est que je veux juste la rendre de plus en plus petite et de plus en plus petite. Je veux que l'illusion soit juste comme, "Wow, je me sens vraiment comme un outil de conception."

Adam : Et puis, oui, quelques améliorations à l'exportation seraient bien. Mais aussi, l'amélioration de l'exportation pour DevTools serait bien, et cela ne nous arrête pas vraiment. Alors je ne sais pas. Il y a une tonne de problèmes, allez voter dessus. Je pense que l'une des prochaines grandes fonctionnalités que j'aimerais faire est les lignes vertes. Donc, au lieu de simplement afficher des superpositions d'accessibilité en survol pour vraiment indiquer certaines choses avec des lignes vertes, et exposer plus, et faire apparaître plus d'informations, et je ne sais pas. Ouais.

Drew : Une sorte de réflexion sur le processus de création d'une extension Chrome comme celle-ci, je veux dire, en supposant que tout est implémenté en JavaScript, à quel point cela ressemble-t-il à un développement Web normal ? Création d'une extension Chrome.

Adam : C'est une bonne question. C'est… Ouf, c'est difficile. C'est bizarre. Tout d'abord, l'environnement dans lequel vous lancez votre code n'est pas le navigateur. Ils ne vous donnent pas vraiment un accès complet là-bas. Vous pouvez, si vous devenez vraiment délicat avec cela, dans lequel VisBug a dû passer, ce scénario encore plus délicat. Donc en ce moment, j'avais l'habitude d'exécuter dans le… Cela va devenir si flou si vite.

Adam : Parce qu'il y a plusieurs bacs à sable pour votre extension, pour des questions de confidentialité. Et ils rendent difficile l'exécution de scripts sur la page réelle, n'est-ce pas ? Parce que vous ne voulez pas que quelqu'un soumette votre formulaire lorsque vous lancez la chose ou quelque chose, le soumette à lui-même ou autre. Cela pourrait être vraiment destructeur. Donc, il a des bizarreries comme ça. Il y a un pont qu'il faut traverser. Et l'un d'eux qui tourmente VisBug est que VisBug utilisait…

Adam : Ce sont donc tous des éléments personnalisés, et les éléments personnalisés vous permettent de leur transmettre des données riches en tant que propriété. Donc, vous dites comme, customelement.foo=myrichobject, plein de tableaux ou autre. Et l'élément personnalisé obtient simplement cela sous forme de données sur le nœud lui-même. Mais puisque je suis dans ce petit monde étrange de bac à sable, si j'essaie de définir quelque chose d'unique comme ça sur mon objet, il est essentiellement filtré. Ils ont établi que certaines choses ne peuvent pas… Je peux donc passer une chaîne à mon élément personnalisé, mais je ne peux pas lui passer un objet riche.

Adam : Mais oui, à part de petites bizarreries comme celle-là, une fois que vous obtenez le flux, et si vous passez du temps à obtenir un scénario de cumul, ce qui va prendre environ une heure de travail pour que vous donniez LiveReload dans votre truc , cela peut devenir assez naturel. Je pense que Firefox a, honnêtement, la meilleure expérience de développement d'extensions si vous êtes averti avec la CLI, vous pouvez faire tourner quelque chose avec une seule commande, et il l'installe, vous donne ces fonctionnalités LiveReload et vous donne des outils de débogage. Il tient en quelque sorte votre main à travers, ça peut être vraiment sympa.

Adam : Mais finalement, c'est un peu décalé. C'est pourquoi je fais beaucoup de travail sur ce site de démonstration qui ressemble à un tas de planches d'art, parce que je n'ai pas vraiment besoin d'une vraie page Web la plupart du temps, pour faire des tests VisBug, tant que j'ai des planches d'art qui simuler divers problèmes, ou avoir des choses accessibles à regarder, et me donner en quelque sorte le contenu que j'ai besoin de voir. Je fais une grande partie du travail directement dans le navigateur, comme s'il s'agissait d'une application Web normale. Donc, l'expérience de développement de VisBug est vraiment facile, à moins que vous n'essayiez de la tester sur un navigateur, et ensuite ça devient un peu désordonné et peu importe.

Drew : Ce sont des idées vraiment intéressantes. J'ai donc tout appris sur VisBug aujourd'hui, qu'avez-vous appris dernièrement, Adam ?

Adam : J'améliore encore mes compétences en wok. Donc, je veux être un wokman, et je ne parle pas du lecteur de cassettes des années 90. Je veux retourner les légumes et les faire s'enflammer un peu dans les airs, les recouvrir de délicieuses épices, et simplement saisir cet ail et le rendre croustillant et délicieux. Et puis posez-le sur un petit lit de riz et faites-le glisser vers vous et voyez ce que vous en pensez.

Adam : Donc, je suis excité pour l'été en ce moment, parce que cela signifie que je peux sortir le wok et revenir dans cet environnement de cuisson rapide et chaud, et c'est vraiment amusant.

Drew : Incroyable. Ça a l'air délicieux. Si vous, cher auditeur, souhaitez en savoir plus sur Adam, vous pouvez le suivre sur Twitter où il est @argyleinc, et trouver son site Web personnel sur nerdy.dev. Si vous voulez essayer VisBug, vous pouvez le trouver dans le Chrome Web Store, et vous pouvez essayer la version sandbox sur visbug.web.app. Merci d'être avec nous aujourd'hui Adam. Avez-vous eu des mots d'adieu.

Adam : Non, tu étais vraiment sympa. C'était vraiment adorable. Merci de m'avoir invité, j'apprécie vraiment.