L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Qu'estce que VisBug?
Dans cet épisode, nous parlons de VisBug. Qu'est-ce que c'est et en quoi est-il différent de la gamme d'options déjà disponibles dans Chrome DevTools? Drew McLellan parle à son créateur Adam Argyle pour le savoir.
Afficher les notes
Mise à jour hebdomadaire
Transcription
Drew McLellan: C'est un ingénieur punk brillant, passionné avec une adoration pour le Web, qui préfère utiliser ses compétences pour les meilleures interfaces 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 un promoteur des développeurs travaillant 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 le design et l'expérience utilisateur, mais saviez-vous qu'il possède plus de paires de tongs que n'importe quel bipède vivant? Mes amis fracassants, veuillez souhaiter la bienvenue à Adam Argyle.
Adam Argyle: Bonjour.
Drew: Bonjour Adam, comment allez-vous?
Adam: Oh, je vous écrase, vous sachez-le.
Drew: C'est bon à entendre. Je voulais donc vous parler aujourd'hui de votre projet, VisBug, et en général, 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. Alors, qu'est-ce qui est différent à propos de VisBug? Et quel type de problème essaie-t-il de résoudre?
Adam: Génial. Oui, 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 la touche finale. Nous avons encore un jour ou deux avant le déploiement. Alors designer, asseyez-vous et critiqueriez-vous cela? Je veux que vous ouvriez ma version d'hôte local sur votre navigateur et sur votre téléphone, ou autre chose, et parlez-moi de ce que vous voyez. »
Adam: Et après avoir fait cela pendant de nombreuses années et toujours aimer cela interaction, j'ai en quelque sorte commencé à me sentir coupable après un certain temps à cause de la simplicité et de la simplicité des tâches. Ils seraient comme: "Un pixel ici. Marge de cinq pixels ici. » Et c'était toujours des lentes et des coups de coude, et des lentes et des coups de coude à l'espacement et au type. Je veux dire, c'était rarement comme, "Ooh, attendez une minute pendant que je passe 30 minutes à changer un angle, ou autre chose, pour ajuster mon DOM afin que le DOM puisse prendre en charge votre demande," ou autre.
Adam: ] C'était généralement de minuscules trucs. Et puis j'ai fini par faire un sondage, et j'ai sondé tous ces designers chez Google. Et je me suis dit: "Lorsque vous ouvrez DevTools, que faites-vous?" Et c'était un peu retentissant qu'ils aient juste besoin 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 d'auto. Ce n'est pas juste. Vous devriez simplement pouvoir toucher les sièges de la voiture et changer la couleur, comme un outil de conception. " Je me suis dit: "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é par l'espacement puis la typographie. Et une fois que j'ai mis en place un mécanisme de sélection qui émulait les outils de conception, c'était comme: «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 faire ce genre de réglages. 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 un bon cas. Parce que vous pourriez être avec un client et ils disent: «Oh, nous adorons ça», c'est tellement classique, «nous adorons le design, mais cette couleur bleue est difficile pour nous.» Et vous vous dites "Vraiment?" C'est comme si les gens peuvent soumettre un formulaire et vous pouvez gagner de l'argent, mais vous voulez me parler du bleu maintenant? Et généralement, cela créerait un cycle entier. Le PM disait: "D'accord, nous prendrons votre demande et ensuite nous l'enverrons à la conception."
Adam: Mais si le concepteur est là et c'est son navigateur qui le montre, il le sera. comme, "D'accord. Eh bien, je vais simplement cliquer sur l'objet et changer la couleur. " Et vous pouvez interrompre tout un cycle de travail en prototypant simplement le changement dans le navigateur. Donc c'est. C’est le plus efficace contre un produit existant, non? 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 de site pour vous. C'est possible, mais c'est un peu gênant.
Drew: Donc, techniquement, c'est une extension que vous installez dans un navigateur Chrome.
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 entrer en concurrence avec votre page principale.
Adam: Mais oui, c'est l'essence de… La seule raison pour laquelle il s'agit d'une extension est simplement qu'il est facile de mettre sur votre page. Bien qu'à ce stade, il dispose maintenant de certains paramètres qui vous accompagnent 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 c’est autrement 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. Il est très inspiré par Firebug mais pour les graphistes.
Drew: Ah. On y va. Je veux dire, ce n’est peut-être pas le format idéal, étant un podcast audio, pour parler d’un outil visuel. Mais passez-nous en revue, si vous voulez, certains des types d'outils et les 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 tableaux graphiques, 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 vous demandez "Que puis-je faire sur une page?" Et vous vous dites: "Eh bien, je peux le détruire."
Adam: Et je l'ai fait pour que vous puissiez maintenir la suppression, il trouvera le suivant… Ce qui est assez difficile sur une suppression. Vous supprimez quelque chose et il sélectionne le prochain frère. Il sélectionnera donc le prochain frère pour toujours. Si vous maintenez la touche Suppr jusqu'à ce que vous supprimiez le tout… En tout cas, très satisfaisant. Appuyez sur Rafraîchir et tout revient. Mais le premier outil fourni avec VisBug, donc lorsque vous venez de le lancer, est l'outil de guides. Et je tenais littéralement du papier sur mon écran, ou j'allais chercher une extension système qui me permettrait de marquer 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, non? Ils ne veulent pas nécessairement d’alignement mathématique, non? C'est pourquoi la typographie a un crénage optique. Ce n’est pas un crénage mathématique. C'est du crénage humain. Et donc l'outil de guides est enraciné dans le fait que beaucoup de lentes qui se produisent d'un concepteur zooment sur des éléments, vérifient l'alignement. L'espacement est-il bon?
Adam: C'est donc la deuxième chose que fait l'outil de guidage. 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 obtenez ces guides, c'est le même concept, en direct sur votre page. Et si vous cliquez sur quelque chose, puis passez la souris sur 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 se trouvent entre eux. Pas ce que quelqu'un a dit. Ce n'est pas l'addition de tout l'espacement, 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, parce que vous pouvez maintenir shift et continuer à cliquer, et vérifiez essentiellement que vous disposez d'un espacement égal entre cinq icônes. Et ce n'est que quelques clics. Vous n'avez pas besoin de connaître le code, lancez simplement VisBug, survolez, cliquez, cliquez, cliquez, cliquez, et vous voyez cela, "Oh regarde ça l'est. Oui. 15 pixels entre chacun d'eux. » Ou parfois vous obtenez quelque chose qui est un peu ennuyeux, vous cliquerez dans une boîte, puis vous cliquerez sur sa boîte parente et vous vous rendrez compte que sa distance supérieure est de neuf et celle du bas de huit. Et vous dites: «Comment vais-je centrer cela? C'est en quelque sorte entre les deux. Et secoue le poing.
Adam: Mais au moins, vous pouvez le voir facilement et facilement avec l'outil de guidage. Alors oui, c'est l'outil des guides.
Drew: J'y suis définitivement allé, avec 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 s'aligne toujours. Oui, ce n'est 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 cela était très lâche. Il ne s'est pas cassé, il a simplement tenu un réticule, ce qui est une fonctionnalité que je rajouterai plus tard. Certains utilisateurs se disent donc: "Hé, j'adore le cliché, c'est comme mes outils de conception. Mais que faire 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 guides pourrait très facilement être changé pour avoir une touche de modification.
Adam: Alors, voici où VisBug devient un peu différent, mais aussi, espérons-le, familier, est-il très lourd sur les modificateurs de raccourcis clavier . Donc, tout comme si vous regardez un concepteur professionnel, ils sont très avertis en matière de raccourcis clavier. Et ils appuient sur les raccourcis clavier ici, font un zoom avant, appuient sur les raccourcis clavier là-bas, et font simplement tous leurs coups de coude à partir de 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 des sélections multiples, et 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é là-dedans.
Drew: C'est donc l'un de ces outils où ça rapporte vraiment pour 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 jette un petit menu volant, il indique le raccourci clavier pour choisir cet outil, et il vous dit ce qu'il peut faire et quelles interactions faire pour les obtenir. Ainsi, l'outil des guides dit: «Guides d'élément, survolez simplement. Mesurez quelque chose, cliquez, puis passez la souris sur quelque chose de nouveau. Les mesures collantes sont un décalage plus un clic, donc elles persisteront. »
Adam: Et ces guides sont également très utiles pour la capture d'écran. Donc, si vous révisez un PR, même en tant qu'ingénieur front-end, ou peut-être un concepteur révisant un PR, cela peut être un moyen très puissant pour vous d'entrer là-dedans et, oui, d'avoir une inspection haute fidélité. Quel genre de nous amène dans le prochain outil. Voulez-vous en savoir plus sur le prochain outil?
Drew: Oui, bien sûr. Allons-y.
Adam: Génial. Le suivant est l'outil d'inspection. Et celui-ci est comme… Les concepteurs généralement, ils ne veulent pas de tout le CSS, non? Quand ils s'attendent avec… J'ai presque dit Firebug, mais Chrome DevTools, vous obtenez la liste complète, non? J'ai sélectionné ce H1 et voici donc tout ce qui revient à la feuille de style du navigateur. Et le concepteur dit: "Le navigateur quoi? Le navigateur a une feuille de style? »
Drew: En bas en bas de ce panneau de défilement.
Adam: Le fond trouble, n'est-ce pas?
Drew: Ouais.
Adam: C'est comme si vous aviez décollé toutes les couches et ensuite vous vous êtes dit: "Ooh, je n'aime plus ces couches." Et l'outil d'inspection ici, il dit: «Ah, les concepteurs, je sais ce que vous voulez. C'est juste la couleur de la bordure. » En gros, ne me montrez quelque chose que s’il est unique, alors ne me couvrez pas uniquement de propriétés CSS. Et je m'intéresse surtout à la couleur, à la typographie et à l'espacement. Je vais donc examiner les marges, les hauteurs de ligne, la famille de polices est vraiment importante, non? Il existe une extension complète juste pour vous dire quelle est la famille de polices sur une page.
Adam: Dans VisBug, il ne s'agit que d'un élément de campagne 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 concepteur se concentre sur ce qu'il fait surface, oui.
Drew: Donc, cet outil ne montre aucun style hérité.
Adam: C'est exact. À moins qu'ils ne soient hérités et uniques. Donc s'ils … Une couleur de texte ou quelque chose, si la couleur du texte n'est pas littéralement le mot hérité, cela vous dira que c'est une valeur calculée, que c'est quelque chose d'intéressant.
Drew: Ouais, c'est vraiment un utile juste… Oui. Vous aide à vous concentrer sur les choses qui s'appliquent littéralement à cette seule instance de quelque chose, ce que vous vouliez évidemment changer. Je veux dire, je suppose que cela pourrait être vraiment utile, tous ces outils seraient vraiment utiles pour, en quelque sorte, 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 avec le partage d'écran, comme nous devons le faire de nos jours, de plus en plus. 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 vers l'écran et dire-
Adam: Certainement.
Adam: C'est toujours magique quand vous tournez la page Web en direct dans ce qui ressemble à un plan de travail Zeplin. Quelqu'un dit: "Quoi… Sommes-nous juste allés quelque part de nouveau?" 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 VisBug vous a été confronté ou qui vous sont apparus qui pourraient être intéressants?
Adam: Ouais . Alors, oui, il y en a tellement qu’il est difficile de commencer. Oh, l’une des plus importantes est la communication entre les développeurs. VisBug fonctionne sur les valeurs calculées. Il ne tient donc pas compte de vos valeurs créées. Et cela peut être vraiment sympa, car vous mesurez et inspectez en quelque sorte le résultat final absolu dans la façon dont les pixels ont été calculés à l'écran. Et cela peut être vraiment agréable d'avoir une conversation de cette façon, pendant que vous travaillez sur les résultats, par opposition au côté auteur.
Adam: Et vous pouvez revenir en arrière vers comme, "D'accord, eh bien comment nous sommes-nous trompés du côté de la création si c'est ce que nous avons visuellement? » Ce qui joue également un rôle, l'outil suivant est l'outil d'inspection d'accessibilité. Ainsi, l'outil d'inspection permet de visualiser facilement les styles d'un élément et de les décomposer 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 rend, j'espère, plus facile d'aller vérifier que quelque chose est fait.
Adam: Donc un PR… Et les choses se créent souvent. Donc, encore une fois, de développeur à développeur, concepteur de développeur, vous examinez 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 dans lesquels vous pouvez trier un prototype dans le navigateur. Nous en avons donc parlé où c’était le cas, 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 dupliquerez 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 faire une variante en direct 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 enregistrer tout ce travail de développeur, 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, non? Il arrive une fois que vous avez terminé, il ne vous donne pas de code source très souvent, ce n'est pas très souvent que vous copiez du code hors de DevTools. Vous pouvez copier une paire clé / valeur. Comme, "Oh, j'ai changé ce style." Mais oui, quoi qu'il en soit.
Drew: Mm-hmm (affirmatif). Oui. Je peux penser à des cas particulièrement visuels où vous voudrez peut-être, 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 à quoi elle ressemblerait s'il y avait beaucoup plus de contenu que ce à quoi vous vous attendiez.
Adam: Oui. C'est le cas d'utilisation du test du 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 ça pour… Ouais, les gros titres, comme je l'ai dit. Vous double-cliquez simplement sur du texte et je claque simplement le clavier. Bla, bla, bla, bla, et frappe un tas d'espaces, bla, bla. Et je me dis: "D'accord, comment fonctionne la mise en page? Oh, ça a fait du bien. D'accord, bien, je peux passer à la chose suivante. Que se passe-t-il si je duplique cela quatre fois? Y a-t-il encore un espace entre tout? Est-ce que ça passe à côté de l'élément suivant? »
Adam: Cela peut être vraiment sympa pour cette simulation du, oui, chaos de contenu. Titre vraiment court, titres vraiment longs, n'a pas d'amis, a un million d'amis. Comment gérez-vous ces cas d'utilisation dans l'interface utilisateur? Oui.
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 Spotify est installé, je le fais tout le temps, j'ai installé Spotify et je me dis simplement: "Spotify, vous avez l'air d'être une application impossible à inspecter." Mais devinez quoi? VisBug s'en moque. VisBug recouvre toutes vos affaires, inspecte toute la typographie. J'ai créé un thème clair 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 clair sur le produit lui-même sans avoir à me soucier d'un tas de feuilles d'autocollants, n'est-ce pas? Il y a donc cette mentalité d'égalité importante, j'adorerais VisBug pour aider les gens à entrer dans ce qui signifie, 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. Alors, passez 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 les bibliothèques de composants, et en regardant les 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: Il est très difficile de garder un œil sur les choses qui ne sont pas visibles. t visible. C'est donc là que l'outillage peut vraiment, vraiment aider à être en mesure d'inspecter quelque chose et de voir que, oui, il a les bons rôles et c'est –
Adam: C'est le cas. C’est le cas d’utilisation exact. Je veux qu'un PM puisse vérifier ce truc. Je veux qu’un concepteur puisse se pencher sur l’accessibilité et ne pas avoir à ouvrir les outils, à trouver le nœud DOM, tout est croisé dans le panneau des éléments et a l’air bizarre. Qu'il dise simplement: "Voici les attributs de la zone, voici le titre s'il existe." Il existe également d'autres outils d'accessibilité pour. VisBug est livré avec l'icône de recherche. L'icône de recherche a plusieurs façons d'interagir avec elle.
Adam: Donc d'abord, elle interroge la page. Donc, si vous connaissez le type d’élément ou le nom de la classe d’élément que vous souhaitez, vous pouvez simplement le rechercher, de sorte que vous n’avez pas à le trouver avec la souris. Mais cela contient également des commandes de barre oblique. 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 signet que 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 barre oblique, et vous obtiendrez la saisie semi-automatique, et il vous montrera tous les différents plugins. Et il y a des problèmes d'accessibilité qui sont vraiment sympas qui superposent des erreurs, et diverses choses comme ça. Alors je suis d'accord. L'accessibilité devrait être plus accessible. C'est tout simplement nul à dire. Mais il doit être plus proche de la ceinture porte-outils. Et je pense que parfois c’est trop loin, et c’est peut-être pour cela qu’il est manqué. J'espère donc que si c'est un peu plus à l'avant et au centre, et plus facile, il sera vérifié davantage. 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: Ooh.
] Drew: … en regardant les éléments individuels et en essayant de trouver une solution?
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, c'est, oui, comment savoir si vous avez un mot de texte à moitié opaque, quelle est sa couleur sur gris par rapport au blanc ? Et comment connaissez-vous son contraste? Pour le moment, nous ne savons pas. VisBug connaît donc la couleur, et il dira «50% de gris», ou quelle que soit la couleur que vous avez là-bas. Mais il ne sait rien de plus intelligent que cela. Il est impossible de…
Adam: Je pense que ce que vous auriez à faire dans ce cas est de créer une toile, de peindre toutes les couches là-dessus, puis d'utiliser une pipette ou un… Donc, vous effectuez un rendu dans le canevas, faites-les tous briser ensemble en une seule couche peinte, puis allez extraire la valeur de pixel unique pour voir quelle est sa fin réelle calculée en gris après avoir été superposée sur les autres éléments.
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 passez la souris sur 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 de la casquette, mais cela va encore plus loin. Et c'est comme, "Ooh, je suis en quelque sorte éteint à un certain moment." Je dois donc trouver comment trouver le signal par rapport au bruit là-bas.
Adam: Mais oui, j'aime ce processus de réflexion, parce que nous devrions avoir un outil qui le fasse. 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 appropriée à l'opacité. J'adore.
Drew: Oui, je veux dire, c'est le genre de cas standard d'avoir du texte sur un arrière-plan où vous ne savez pas si le contraste est suffisant pour répondre 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 voulez ensuite modifier les valeurs jusqu'à ce que vous obteniez juste au point où le contraste est bon, mais il n'est pas trop éloigné de ce que le client souhaitait initialement en termes de couleurs de marque. et des choses.
Adam: J'appelle cette bosse, bosse jusqu'à ce que vous passiez.
Drew: Ouais.
Adam: Parce que c'est ce que ça fait. Je me dis: "Ooh, je suis un peu à court de partition." Donc, je vais aller à ma légèreté HSL et je vais simplement cogner, bosse, bosse et regarder les petits chiffres monter jusqu'à ce que ce soit comme, "Ding", j'ai une coche verte. Je me dis: "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 nombre et cela inclut des choses comme la minceur de la police. Donc si c'est une police fine, elle obtiendra un score plus bas, si c'est une police épaisse ça va… Parce qu'il y a beaucoup de contraste.
Drew: Ouais, non, je n'avais rien vu de tout ça , mais cela semble…
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 affirmer que tout ce que fait VisBug vous pouvez simplement le faire via le panneau CSS dans DevTools. Et je pense que c'est en quelque sorte juste, mais ça passe probablement à côté, en ce sens que, oui, vous manipulez le CSS lorsque vous apportez des modifications, mais cela met une sorte d'interface utilisateur axée sur le concepteur au-dessus plutôt qu'une interface centrée sur les développeurs. Est-ce une description juste?
Adam: C’est vraiment juste. Et honnêtement, les meilleures idées sortent de VisBug pour devenir 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 tous les styles calculés, au moins c'est unique. Encore une fois, c'est comme si nous ferions ceux que nous n'allons pas simplement vous donner toutes ces propriétés héritées. Mais mettez-les tous dans votre presse-papiers, et vous pouvez aller 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 ont fait leur chemin dans DevTools, dans ce panneau d'éléments. Cependant, il y a d'autres choses qui ne l'ont pas été, à savoir que les DevTools sont un outil d'inspection à un seul nœud. Et VisBug suit le mantra de l'outil de conception qui est, non, je devrais pouvoir sélectionner plusieurs fois. Je dois être en mesure de modifier et d'inspecter en bloc. 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 a ces cas d'utilisation de niche qui peuvent être vraiment amusants comme ça. Une 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 d'histoires ou quelque chose comme ça, vous pouvez tous les mettre en évidence dans VisBug, maintenez la touche Maj enfoncée, cliquez simplement sur chacun d'eux. Boop, boop, boop, boop, allez à l'outil de typographie et frappez vers le haut ou vers le bas, et cela apporte un changement relatif à chacun d'eux.
Adam: Donc chacun d'eux va pousser vers le haut ou vers le bas. 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: Alors, quelle était l'origine de VisBug? Et maintenant, est-ce juste un projet personnel? Ou est-ce un projet Google? Ou quel est son statut?
Adam: Ouais. Donc, tout d'abord, le statut est, c'est un projet Google. Son objectif principal est d'être un endroit pour prototyper et explorer avant que les choses n'entrent dans DevTools. Au moins du côté de Google. Mais de mon côté personnel, je le vois toujours comme un endroit pour aller cuire au four dans les tâches courantes, ou pour cuire dans certaines optimisations pour accomplir les tâches courantes. Et juste pour donner à un public plus large un moyen de regarder dans le DOM.
Adam: Je pense vraiment que les DevTools sont super puissants, 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 plus les débutants, les gens qui arrivent, ou peut-être même des gens comme les PM, les gestionnaires, qui n’ont jamais l’intention de coder mais qui s’intéressent au résultat. Et donc ça leur donne en quelque sorte, oui, juste des outils légers pour y entrer.
Drew: C'est un point intéressant que vous soulevez, parce que personnellement, je trouve souvent que j'ai du mal à trouver un flux de travail confortable pour gérer tout ce genre 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 garder une trace de deux fenêtres différentes. Et une fois que vous avez quelques fenêtres de navigateur ouvertes, vous ne pouvez pas… Vous vous concentrez sur une seule et vous ne savez pas à quel DevTools lui appartient.
Drew: Et puis dans les panneaux eux-mêmes, c'est une sorte de une sorte de Far West des conventions d'interface utilisateur. Vous allez faire défiler 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 ce n’est qu’un gros gâchis.
Adam: Oui. Yeah.
Drew: Do you think that’s unavoidable? Can it be better?
Adam: I definitely have thoughts here. And yeah, I think a good… So let’s say you have a listener right now that’s like, “I’m pretty savvy with the DevTools. I don’t think they’re that crazy.” I’d say, “Okay, go open up Android Studio or Xcode. Begin a project, and go look at the DevTools, go look at the output. How familiar do you feel right now?” Probably very foreign. You’re looking at that going, “This is garbage. Why do they do this? Why is this panel over here?” And your mind starts to race with all these questions why and confusion.
Adam: And it’s like, well that’s how everyone feels the first time they open DevTools. So you got to really kind of be empathetic to that.
Drew: Is it inevitable that… Can we do better? Or is this just the sort of natural order of things?
Adam: So here’s my current take on this, is I think complexity is really easy to find yourself getting into. And DevTools is one of those things, they’re just naturally complex. There’s no good UI to facilitate a lot of these things. A lot of these things get built by devs. And I think devs building tools for devs is fine, because you’re going to have… If it’s the only way, or if it’s even if it’s a good way, you’re going to learn it, and you’ll get good at it, and you’ll get comfy with it.
Adam: And all DevTools are kind of weird, because they’re made for their weird use cases, right? Development is weird. Let’s just be honest. We make invisible cogs and invisible two by fours, and we build houses, basically, with invisible, virtual parts. So yeah, we need weird tools to go inspect these things, and to tell us what they’re outputting.
Adam: Now, that being said, what VisBug does, and what I’ve been kind of slowly moving things into DevTools as, is smaller tools that are more focused as opposed to a big tool that claims to do a lot. I think it’s hard for things to do a lot really well. And this is classic argument, right? This is all stars, specialists versus generalists. Neither are always going to be perfect.
Adam: But what VisBug is trying to do is, it has made specialists. So the guides tool just does guides. And that tool never leak into the other tools of the page. And so I’m trying to do that more with DevTools, where DevTools wants to help designers more, which is something VisBug has helped inspire DevTools to see. And the way that I keep introducing things is, instead of making a grid editor, for example, where you can… “Full power of grid in one overlay,” right? “You can add tracks, remove tracks, blah, blah, blah.”
Adam: And I’m like, “That sounds really cool and also really complex.” 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 naïve. It’s a naïve 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. So…
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: I have a mod where, when you launch VisBug it takes the whole HTML document and shrinks it into an artboard. It looks like an artboard. It’s floating on a shadow on a gray space. You can infinitely pan around it. So you can scroll away from your page canvas, and what it lets you do is, see, let’s say you have a page that’s really long, and you want to measure something from the top to the bottom, well you can do that right now, but you’d kind of lose context as you go.
Adam: Well in this new VisBug zoom scenario, you hold option or alt on your keyboard, you use the mouse wheel, or you hit plus minus with your command and you can zoom your webpage as if it’s an artboard. And I try to make it as seamless as it is. So you’re going in and out, and you scroll down, you go in and out, measure from the… And VisBug just doesn’t care. It keeps drawing computed overlays, you can change spacing.
Adam: Because I think it’s really important, as a designer to see the bird’s eye of your page live. Animations are still playing, y’all. Scrollable areas are still scrollable, right? It’s really cool. You’re like, “My whole page in one view.” Anyway, so it’s almost done. It’s in-
Drew: Sounds trippy.
Adam: It’s very trippy. And it’s in, I just need to make sure it works cross browser, because it’s doing some, obviously, some tricky things to make your live page feel that way. But yeah.
Drew: Amazing. Is it… I mean, I presume that VisBug is fairly regularly updated and is being progressed. What is it that we might expect to see in the future?
Adam: Yep, that’s definitely one of the features I’m working on there. I have a feature where… So, when you click something you get an overlay with what looks like handles, right? And it’s sort of an illusion, it’s supposed to make you feel comfortable. And the intent is to eventually have those handles be draggable. But I have some fundamental things I have to solve first, like elements in the browser don’t have a width. So if you just start grabbing the width I have to do work to make that illusion feel right.
Adam: And you might not even get the results you want, because it could be a block level element that you’re pulling the width smaller, and you’re not getting reflow of an item next to it. And you might be wondering why. So I have prototypes where you can drag corners, drag elements around. But I really need to focus on how the design tools are doing this. They always have this toggle button. And it’s like… See, what’s the toggle called?
Adam: But it’s basically like shrink… I call it shrink wrap. Shrink wrap my element, it’s the width of this element is the width of its content, versus here’s the width of my element, stick something in it. So I need something like that in the browser, overlayed on the element so that you could choose between these and maybe even something that let’s you choose between block and inline, so that you could get the results that you want.
Adam: But ultimately the goal here is that VisBug does not want to be entirely keyboard-driven. I want you to be able to drag spacing. If you see 12 margin spacing on top, you should be able to reach in and grab it, whereas right now you have to hit up on the keyboard to specify the top side of the box needs an addition of margin.
Adam: And so yeah, I have a couple of quirks to work out, in terms of strategy. But it’s very much a goal to make it even closer to design tools. And maybe even I will bend in that. It’s like, well, if you want to change the width and you’re going to get a weird design, there’s always ways to get out of it with VisBug, like the position tool really lets you escape the flow. So flow is ruining your idea, the position tool lets you escape.
Adam: And so there’s… If someone was to get really savvy with VisBug they would blow people’s minds, because it’s sort of unlimited, and it’s like, what can you bring to the table? It has an expression element to it. There is definitely expressive tactics. But anyway, so long story short is, the illusion is, I just want to make it smaller and smaller and smaller. I want the illusion to just be like, “Wow, I’m really feeling like a design tool.”
Adam: And then, yeah, some enhancements to exporting would be nice. But also, enhancement to exporting for DevTools would be nice, and that doesn’t really stop us. So I don’t know. There’s a ton of issues, definitely go vote on them. I think one of the next big features I’d love to do is green lines. So instead of just showing accessibility overlays on hover to really indicate some things with green lines, and expose more, and surface more information, and I don’t know. Yeah.
Drew: Sort of thinking about the process of building a Chrome extension like this, I mean, presuming it’s all implemented in JavaScript, how much like regular web development is it? Building a Chrome extension.
Adam: That’s good question. It’s… Phew, this is hard one. It’s quirky. First off, the environment that you get to launch your code in isn’t the browser. They don’t really give you full access there. You can, if you really get tricky with it, which VisBug had to graduate into, this even trickier scenario. So right now, I used to execute in the… This is going to get so fuzzy so fast.
Adam: Because there’s multiple sandboxes for your extension, for privacy issues. And they make it hard to execute scripts on the actual page, right? Because you don’t want someone submitting your form when you launch the thing or something, submitting it to themselves or whatever. It could be really destructive. So it has some quirks like that. There’s a bridge you have to pass over. And one of them that’s been plaguing VisBug is, VisBug used to use…
Adam: So it’s all custom elements, and custom elements allow you to pass rich data to them as property. So you’re saying like, customelement.foo=myrichobject, full of arrays or whatever. And the custom element just gets that as some data on the node itself. But since I’m in this weird little sandbox world, if I try to set something unique like that on my object, essentially it’s filtered out. They’ve established that certain things can’t… So I can pass a string to my custom element, but I can’t pass it a rich object.
Adam: But yeah, other than little quirks like that, once you get the flow down, and if you spend the time to get a rollup scenario, which is going to be an hour or so of work so that you give LiveReload in your thing, it can become pretty natural. I think Firefox has, honestly, the best extension development experience if you’re savvy with the CLI you can spin something up with one command, and it installs it, gives you these LiveReload features, and gives you debugging tools. It kind of holds your hand through it, it can be really nice.
Adam: But ultimately, it’s a little quirky. That’s why I do a lot of the work on that demo site that looks like a bunch of artboards, because I don’t really need a real webpage most of the time, to do VisBug testing, as long as I’ve got artboards that simulate various issues, or have accessible things to look at, and sort of give me the content I need to see. I do a lot of the work right there in the browser as if it’s just a normal web application. So VisBug’s dev experience is really easy, unless you’re trying to test it across browser, and then it just gets kind of messy and whatever.
Drew: That’s really interesting insights. So I’ve been learning all about VisBug today, what have you been learning about lately, Adam?
Adam: I am still improving my wok skills. So I want to be a wok man, and I’m not talking the ’90s cassette player. I’m want to flip veggies and have them kind of catch fire a little bit in the air, cover them with some delicious spices, and just really sear up that garlic and make it crispy delicious. And then put it on a little bed of rice and slide it towards you and see what you think.
Adam: So I’m excited for summer right now, because that means I get to whip out the wok and get back into that fast-paced, hot cooking environment, and it’s really fun.
Drew: Amazing. That sounds delicious. If you, dear listener, would like to hear more from Adam you can follow him on Twitter where he’s @argyleinc, and find his personal website at nerdy.dev. If you want to give VisBug a try, you can find it in the Chrome Web Store, and you can try out the sandbox version at visbug.web.app. Thanks for joining us today Adam. Did you have any parting words.
Adam: No, you were really nice. This was really sweet. Thanks for having me on, I really appreciate it.
(il)Source link