Smashing Podcast Folge 37 mit Adam Argyle: Was ist VisBug?

In dieser Folge sprechen wir über VisBug. Was ist das und wie unterscheidet es sich von der Reihe von Optionen, die bereits in Chrome DevTools zu finden sind? Drew McLellan spricht mit seinem Schöpfer Adam Argyle, um es herauszufinden.

Notizen anzeigen

• VisBug Sandkasten und Spielplatz
• Adam auf Twitter
• Adams persönliche Seite
• VisBug auf YouTube
• VisBug 101

Wöchentliches Update

• Die Konferenzplattform, die wir für unsere Online-Veranstaltungen nutzen: Hopin von Amanda Annandale
• Eine Einführung in CSS-Containerabfragen von Stephanie Eckles
• Frustrierende Designmuster, die behoben werden müssen: Geburtstagsauswahl von Vitaly Friedman
• Tree-Shaking: A Reference Guide von Átila Fassina
• Wie wir unsere Core Web Vitals verbessert haben von Beau Hartshorne

Abschrift

Drew McLellan: Er ist ein aufgeweckter, leidenschaftlicher Punk-Ingenieur mit einer Vorliebe für das Web, der es vorzieht, seine Fähigkeiten für erstklassige UI und UX einzusetzen und die Menschen um ihn herum zu stärken. Er hat in kleinen und großen Unternehmen gearbeitet und arbeitet derzeit als Developer Advocate bei Google für Chrome. Er ist Mitglied der CSS-Arbeitsgruppe und der Schöpfer von VisBug, einem Design-Debugging-Tool. Wir wissen also, dass er sich mit Design und UX auskennt, aber wussten Sie, dass er mehr Paar Flip-Flops besitzt als jeder lebende Zweibeiner? Meine großartigen Freunde, bitte heißen Sie Adam Argyle willkommen.

Adam Argyle: Hallo.

Drew: Hallo Adam, wie geht es dir?

Adam: Oh, ich schlage um, du weißt es.

Drew: Das ist gut zu hören. Deshalb wollte ich heute mit Ihnen über Ihr Projekt VisBug und allgemein über das Konzept hinter dem Design-Debugging sprechen und darüber, wie es in Projekt-Workflows passen könnte. Ich meine, wir haben seit langem entwicklerorientierte Browser-Debugging-Tools, ich meine, wahrscheinlich seit mehr als einem Jahrzehnt. Aber diese konzentrieren sich offensichtlich sehr stark auf Code. Was ist also anders an VisBug? Und was ist die Art von Problem, das es zu lösen versucht?

Adam: Großartig. Ja, das Hauptproblem, in dem es verwurzelt ist, ist, dass ich als Front-End-Ingenieur die ganze Zeit mit Designern zusammenarbeite, und ich liebte immer diesen Moment, in dem wir uns hinsetzten und ich dachte: „Okay. Ich mache den letzten Schliff. Wir haben noch ein, zwei Tage bis zum Einsatz. Also Designer, setz dich hin und würdest du das kritisieren? Ich möchte, dass Sie meine lokale Host-Version in Ihrem Browser und auf Ihrem Telefon oder was auch immer öffnen und mit mir darüber sprechen, was Sie sehen.“

Adam: Und nachdem ich das viele Jahre lang gemacht und diese Interaktion immer geliebt hatte, fing ich nach einer Weile an, mich irgendwie schuldig zu fühlen, weil die Aufgaben so gewöhnlich und einfach waren. Sie würden sagen: „Ein Pixel hier unten. Fünf Pixel Rand hier.“ Und es waren immer Nissen und Stupser und Nissen und Stupser für Abstände und Typ. Ich meine, selten war es so: „Ooh, Moment mal, während ich 30 Minuten damit verbringe, einige Winkel oder was auch immer zu ändern, um mein DOM so anzupassen, dass das DOM Ihre Anfrage unterstützen kann“, oder was auch immer.

Adam: Es waren normalerweise Kleinigkeiten. Und dann habe ich eine Umfrage gemacht und all diese Designer bei Google befragt. Und ich dachte: „Was machst du, wenn du DevTools öffnest?“ Und es war irgendwie klar, dass sie nur die Grundlagen brauchen. Und so entstand daraus, dass ich dachte: „Das sollte einfacher sein. Sie sollten nicht die Motorhaube auf dem Ferrari öffnen, ein Stück Motor bewegen müssen, nur um die Farbe der Autositze zu ändern. Das ist nicht fair. Sie sollten die Autositze einfach berühren und die Farbe ändern können, genau wie bei einem Designwerkzeug.“ Ich dachte: „Etwas könnte diesen Arbeitsablauf erleichtern.“ Und ich dachte: „Okay, ich denke, ich werde etwas hacken, um zu sehen, ob ich die Lösung erstellen kann.“

Adam: Und so fing alles an. Es begann wirklich mit Abständen und dann mit Typografie. Und sobald ich einen Auswahlmechanismus hatte, der Designtools emulierte, dachte ich: „Nun, was kann ich sonst noch tun?“ Und von da an ging es einfach weiter. Aber ja, in diesem Moment geboren.

Drew: Die Idee ist also, dass der Client Sie auffordert, das Logo zu vergrößern, und VisBug hilft dem Browser, sich eher wie ein Designtool zu verhalten, um diese Art von Optimierungen vorzunehmen. So näher an etwas wie Illustrator oder Photoshop oder Figma oder irgendetwas dieser Art von Dingen.

Adam: Ja. Dieser Anwendungsfall ist auch gut. Denn Sie könnten mit einem Kunden zusammen sein und er sagt: „Oh, wir lieben das“, das ist so klassisch, „wir lieben das Design, aber diese Farbe Blau ist schwer für uns.“ Und du sagst: „Wirklich?“ Das ist so, die Leute können ein Formular einreichen und Sie können Geld verdienen, aber Sie möchten jetzt sofort mit mir über Blau sprechen? Und normalerweise würde es einen ganzen Zyklus schaffen. Der PM würde sagen: „Okay, wir nehmen Ihre Anfrage entgegen und senden sie dann an das Design.“

Adam: Aber wenn der Designer da ist und es sein Browser ist, der es anzeigt, würden sie sagen: „Okay. Nun, ich klicke einfach auf das Ding und ändere die Farbe.“ Und Sie können einen ganzen Arbeitszyklus unterbrechen, indem Sie einfach die Änderung dort im Browser prototypisieren. So ist es. Es ist am effektivsten gegen ein bestehendes Produkt, richtig? Weil es ein Debugging-Tool ist. Es ist nicht unbedingt ein Generierungswerkzeug. Es erstellt keine Website für Sie. Es kann, aber es ist irgendwie umständlich.

Drew: Technisch gesehen handelt es sich also um eine Erweiterung, die Sie in einem Chrome-Browser installieren. Ist das richtig?

Adam: Ja. Und es ist eine Erweiterung. Wenn Sie es starten, lädt es eine JavaScript-Datei herunter, die besagt: „Hier ist ein benutzerdefiniertes Element namens VisBug.“ Und dann fügen Sie das DOM-Element vis-bug auf der Seite ein. Und puh, ich nehme mir einfach diesen Moment und verwandle ihn in eine Symbolleiste und fange an, Ereignisse auf der Seite zu hören. Ich lausche auf Ihre Hover-Events und ich lausche auf Ihre Click-Events. Und ich versuche mein Bestes zu tun, um sie abzufangen und nicht mit Ihrer Hauptseite zu konkurrieren.

Adam: Aber ja, das ist die Essenz von … Der einzige Grund, warum es sich um eine Erweiterung handelt, ist, dass es einfach ist, sie auf Ihre Seite zu stellen. Obwohl es zu diesem Zeitpunkt einige Einstellungen gibt, die Sie in allen Browsern mitbringen. Aber es ist zu 99,9 % immer noch ein benutzerdefiniertes Element ohne Abhängigkeiten. Ich glaube, ich mag eine Farbbibliothek, die ich verwende, und ansonsten ist es nur Vanille. Ja.

Drew: Ich schätze, so hat Firebug angefangen, oder? Als Firefox-Erweiterung damals.

Adam: Ja. Deshalb heißt es VisBug. Es ist sehr stark von Firebug inspiriert, aber für visuelle Designer.

Drew: Ah. Na, bitte. Ich meine, das ist vielleicht nicht das ideale Format, um als Audio-Podcast über ein visuelles Werkzeug zu sprechen. Aber führen Sie uns, wenn Sie so wollen, einige der Tools und Optionen durch, die Ihnen VisBug bietet.

Adam: Absolut. Eines der ersten Dinge, die VisBug tut, und Sie können auch, wenn Sie zu Hause oder an einem Computer sind, zu visbug.web.app gehen und VisBug ohne die Erweiterung ausprobieren, richtig?

Drew: Ah.

Adam: Es ist eine Webkomponente, also habe ich für Sie hier unter visbug.web.app eine Webseite hochgeladen, die aussieht, als hätte sie eine ganze Reihe von Zeichenflächen und dann natürlich VisBug vorinstalliert. Und das Ziel dieser Seite ist es, Sie spielen, erkunden und löschen zu lassen. Ich denke, die Löschtaste ist eines der befriedigendsten Werkzeuge für den Anfang. Du sagst: „Was kann ich mit einer Seite machen?“ Und du sagst: „Nun, ich kann es zerstören.“

Adam: Und ich habe es so gemacht, dass Sie löschen können, es wird das nächste finden ... Was bei einem Löschen ziemlich schwierig ist. Sie löschen etwas und es wählt das nächste Geschwister aus. Also wird es das nächste Geschwister für immer auswählen. Wenn Sie löschen gedrückt halten, bis Sie das Ganze löschen ... Wie auch immer, sehr befriedigend. Klicken Sie auf Aktualisieren und alles kommt zurück. Aber das erste Tool, mit dem VisBug ausgeliefert wird, also wenn Sie es einfach starten, ist das Guides-Tool. Und ich habe Papier buchstäblich an meinen Bildschirm gehalten oder mir eine Systemerweiterung besorgt, mit der ich Dinge markieren und Linien erstellen konnte.

Adam: Ja, die Ausrichtung wird für viele Designer an einem bestimmten Punkt sehr optisch, richtig? Sie wollen nicht unbedingt eine mathematische Ausrichtung, richtig? Aus diesem Grund hat Typografie optisches Kerning. Es ist kein mathematisches Kerning. Das ist menschliches Kerning. Und so wurzelt das Guides-Tool darin, dass viele Nits, die von einem Designer passieren, auf Dinge zoomen und die Ausrichtung überprüfen. Ist der Abstand gut?

Adam: Das ist also die zweite Sache, die das Guides-Tool macht. Wenn Sie es starten und einfach über Sachen schweben, sehen Sie, dass das Element, über das Sie geschwebt haben, ein kleines Kästchen darum bekommt. Und dann tauchen gestrichelte Hilfslinien auf, genau wie Lineale es normalerweise tun würden. Und genau wie bei Sketch und Zeplin, wo Sie schweben und diese Anleitungen erhalten, ist es das gleiche Konzept, nur live auf Ihrer Seite. Und wenn Sie auf etwas klicken und dann den Mauszeiger auf ein neues Ziel bewegen, erhalten Sie Messwerkzeuge. Und die Messwerkzeuge sind in Pixeln und sie werden berechnet ... Also visuell, wie viele Pixel dazwischen liegen. Nicht, was jemand gesagt hat. Es addiert nicht alle Abstände, man klickt einfach auf dieses Ding und es ist so weit weg von dem anderen Kästchen.

Adam: Und ich denke, das wird wirklich hilfreich, weil Sie die Umschalttaste gedrückt halten und weiter klicken können und im Wesentlichen überprüfen, ob Sie den gleichen Abstand zwischen fünf Symbolen haben. Und es sind nur ein paar Klicks. Sie müssen keinen Code kennen, starten Sie einfach VisBug, fahren Sie mit der Maus darüber, klicken Sie, klicken Sie, klicken Sie, und Sie sehen: „Oh, schau, es ist. Ja. 15 Pixel dazwischen.“ Oder manchmal bekommen Sie etwas, das ziemlich nervig ist, Sie klicken in ein Kästchen und dann auf das übergeordnete Kästchen und Sie werden feststellen, dass der obere Abstand neun und der untere acht ist. Und Sie sagen: „Wie soll ich das zentrieren? Es liegt irgendwie dazwischen.“ Und schüttelt die Faust.

Adam: Aber zumindest kannst du es mit dem Guides-Tool schön und einfach sehen. Also ja, das ist das Guides-Tool.

Drew: Ich war definitiv dabei, als ich Papierschnipsel an den Bildschirm hielt. Der andere Trick, den ich verwenden würde, besteht darin, ein anderes Browserfenster zu öffnen und den Rand des Fensters zu verwenden, um Elemente auszurichten. Und dann versuchen Sie irgendwie, alles an der richtigen Stelle zu halten, so dass, wenn Sie den Code ändern und aktualisieren, alles immer noch in einer Reihe steht. Ja, keine ideale Arbeitsweise, also.

Adam: Keine ideale Arbeitsweise. Ja. Und da ist die nächste … Also, oh, und die erste Version davon war sehr locker. Es schnappte nicht, es hielt nur ein Fadenkreuz hoch, was eine Funktion ist, die ich später wieder hinzufügen werde. Einige Benutzer sagen also: „Hey, ich liebe das Einrasten, es ist genau wie meine Designwerkzeuge. Aber was ist, wenn ich eine lockere Messung möchte? Oder ich will einen Brief machen, ich will einen Brief messen, nicht seinen Briefkasten?“ Und so könnte dieses Hilfslinien-Tool sehr einfach in eine Modifikatortaste geändert werden.

Adam: Hier wird VisBug ein bisschen anders, aber hoffentlich auch vertraut, weil es sehr viele Hotkey-Modifikatoren enthält. So wie Sie einem professionellen Designer zuschauen, sind sie sehr versiert in Hotkeys. Und sie drücken hier Hotkeys, zoomen hinein, drücken dort drüben Hotkeys und tun einfach alles, was sie von ihrer Tastatur aus anstupsen. Und so ist VisBug sehr tastaturzentriert in der Art und Weise, wie Sie Dinge ändern.

Adam: Das liegt auch daran, dass VisBug eine Mehrfachauswahl zulässt und den Abstand von 100 Elementen gleichzeitig ändern kann. Und das relativ. Wie auch immer, es hat ein paar interessante Macken, aber die Tastatur in einem Modifikatorkonzept ist wirklich wichtig. Und Sie können in vielen Werkzeugen die Option, die Umschalttaste oder den Befehl gedrückt halten und etwas anderes oder eine neue Art von Funktion darin erhalten.

Drew: Es ist also eines dieser Tools, bei denen es sich wirklich lohnt, die Tastaturkürzel zu lernen.

Adam: Das tut es. Wenn Sie also VisBug starten und den Mauszeiger über eines der Werkzeugsymbole bewegen, erhalten Sie eine Aufschlüsselung. Es wirft ein kleines Flyout-Menü aus, es sagt den Hotkey für die Auswahl dieses Werkzeugs und es sagt Ihnen, was es tun kann und welche Interaktionen zu tun sind, um sie zu erhalten. Das Hilfslinien-Tool sagt also: „Elementhilfslinien, bewegen Sie einfach den Mauszeiger. Messen Sie etwas, klicken Sie und bewegen Sie dann den Mauszeiger über etwas Neues. Sticky-Messungen sind Verschiebung plus Klick, damit sie bestehen bleiben.“

Adam: Und diese Guides eignen sich auch sehr gut für Screenshots. Wenn Sie also eine PR überprüfen, auch nur als Front-End-Ingenieur oder vielleicht als Designer, der eine PR überprüft, kann dies eine wirklich leistungsstarke Möglichkeit für Sie sein, dort einzusteigen und, ja, eine High-Fidelity-Inspektion durchzuführen. Was uns zum nächsten Tool führt. Möchten Sie mehr über das nächste Tool erfahren?

Drew: Ja, sicher. Auf geht's.

Adam: Großartig. Das nächste ist das Prüfwerkzeug. Und dieser ist wie … Designer wollen normalerweise nicht das gesamte CSS, richtig? Wenn sie mit… Ich hätte fast Firebug gesagt, aber die Chrome DevTools, bekommen Sie die vollständige Liste, richtig? Ich habe dieses H1 ausgewählt und hier ist alles bis zurück zum Browser-Stylesheet. Und der Designer sagt: „Der Browser was? Der Browser hat ein Stylesheet?“

Drew: Unten am düsteren Ende dieses Bildlauffelds.

Adam: Der trübe Boden, richtig?

Drew: Ja.

Adam: Es ist, als hättest du alle Schichten abgezogen und dann denkst du: „Ooh, ich mag diese Schichten nicht mehr.“ Und das Inspektionstool hier sagt: „Ah, Designer, ich weiß, was Sie wollen. Es ist nur die Randfarbe.“ Zeigen Sie mir grundsätzlich nur etwas, wenn es einzigartig ist, also decken Sie mich nicht nur mit CSS-Eigenschaften ab. Und ich interessiere mich wirklich hauptsächlich für Farbe, Typografie und Abstände. Also werde ich mir die Ränder, Zeilenhöhen und Schriftfamilien ansehen, die wirklich wichtig sind, richtig? Es gibt eine ganze Erweiterung, nur um Ihnen zu sagen, was die Schriftfamilie auf einer Seite ist.

Adam: In VisBug ist das nur ein Einzelposten im Inspektionstool. Sie starten also einfach VisBug, klicken auf Inspizieren und bewegen den Mauszeiger über eine beliebige Typografie, und es wird Ihnen die Schriftfamilie angezeigt. Also ja, es versucht, einen Designer dazu zu bringen, sich auf das zu konzentrieren, was es zeigt, ja.

Drew: Dieses Tool zeigt also keine geerbten Stile an. Ist das richtig?

Adam: Das ist richtig. Es sei denn, sie sind vererbt und einzigartig. Also, wenn sie… Eine Textfarbe oder so etwas, wenn die Textfarbe nicht wörtlich das Wort erben ist, wird es Ihnen sagen, dass es ein berechneter Wert ist, dass es etwas Interessantes ist.

Drew: Ja, das ist wirklich nützlich, nur … Ja. Hilft Ihnen, sich auf die Dinge zu konzentrieren, die nur buchstäblich auf diese eine Instanz von etwas zutreffen, die Sie offensichtlich ändern wollten. Ich meine, ich denke, das könnte wirklich nützlich sein, all diese Tools wären wirklich nützlich, um, wie Sie erwähnt haben, Stakeholder-Feedback zu erhalten. Und irgendwie interaktiv mit einem Kunden zu arbeiten.

Drew: Ich denke, es würde genauso gut über die Bildschirmfreigabe funktionieren, wie wir es heutzutage immer mehr tun müssen. Sie müssen nicht mit jemandem an einem Computer sitzen, Sie könnten am anderen Ende eines Anrufs sitzen und Ihren Browser teilen und es so tun. Ich denke, es wäre ein ziemlich effektiver Weg, Feedback zu bekommen, wenn ein Kunde nicht auf den Bildschirm zeigen und sagen kann:

Adam: Definitiv.

Adam: Es ist immer magisch, wenn Sie die Live-Webseite in etwas verwandeln, das wie eine Zeichenfläche von Zeplin aussieht. Jemand sagt: „Was … sind wir gerade woanders hingegangen?“ Und Sie sagen: „Nein, das ist Ihr Produkt. Wir interagieren nur sehr visuell damit.“ Ja, das kann sehr schön sein.

Drew: Gibt es andere interessante Anwendungsfälle, die Sie gesehen haben, in denen VisBug eingesetzt wurde, oder die Ihnen eingefallen sind und die interessant sein könnten?

Adam: Ja. Also, ja, es gibt so viele, dass es schwer ist, anzufangen. Oh, was wichtig ist, ist die Kommunikation von Entwickler zu Entwickler. VisBug arbeitet mit den berechneten Werten. Es betrachtet also nicht Ihre erstellten Werte. Und das kann wirklich schön sein, weil Sie das absolute Endergebnis in der Art und Weise messen und untersuchen, wie die Pixel auf dem Bildschirm berechnet wurden. Und das kann wirklich schön sein, sich auf diese Weise zu unterhalten, während Sie an den Ergebnissen arbeiten, im Gegensatz zur Autorenseite.

Adam: Und Sie können zurückgehen in Richtung: „Okay, nun, was haben wir beim Authoring falsch gemacht, wenn wir das visuell bekommen haben?“ Was auch irgendwie ins Spiel kommt, das nächste Tool ist das Accessibility Inspect Tool. Das Inspektionstool macht es also einfach, die Stile eines Elements zu sehen, und es schlüsselt sie auf sehr designerfreundliche Weise auf. Das Barrierefreiheitstool hilft Ihnen, alle Elemente auf einer Seite zu überprüfen, und es zeigt alle zugänglichen Eigenschaften an, die es hat, was es hoffentlich einfacher macht, zu überprüfen, ob etwas getan wurde.

Adam: Also eine PR… Und Dinge werden oft erschaffen. Das ist also wieder Entwickler für Entwickler, Designer-Entwickler, Sie überprüfen Schnittstellen. Es ist einfach so kritisch. Wenn Sie sich eine Schnittstelle ansehen und neugierig sind, hat VisBug dort einen Anwendungsfall für Sie. Es gibt auch Anwendungsfälle, in denen Sie im Browser eine Art Prototyp erstellen können. Also haben wir über eine gesprochen, bei der es so ist, dass der Kunde Blau ausprobieren wollte. Okay, das ist ein ziemlich einfaches Szenario.

Adam: Aber es gibt auch andere. Wenn Sie in VisBug den Befehl D drücken, duplizieren Sie ein Element. Und es ist egal, was Sie duplizieren. Sie könnten also einen Header duplizieren, etwas Abstand zwischen den beiden Headern hinzufügen und eine Variante im Browser live machen. Sie doppelklicken auf den Kopfzeilentext und er wird zu einem bearbeitbaren Textfeld, und Sie probieren eine neue Überschrift aus und sehen, wie die Überschrift passt. Passen Sie ein paar Abstände an und Sie haben sich gerade die ganze Entwicklerarbeit gespart, eine Quelldatei und all diese Dinge gefunden, und Sie sind nur ...

Adam: Also ja, es kann Ihnen beim Erkunden und Verifizieren helfen. Es ist irgendwie seltsam … Ich meine, es sind viele Dinge, die DevTools tut, richtig? Es kommt herein, nachdem Sie fertig sind, es gibt Ihnen nicht sehr oft Quellcode, es kommt nicht sehr oft vor, dass Sie Code aus DevTools kopieren. Sie könnten ein Schlüsselwertpaar kopieren. Wie: „Oh, ich habe diesen Stil geändert.“ Aber ja, trotzdem.

Drew: Mm-hmm (bestätigend). Ja. Ich kann mir einige besonders visuelle Fälle vorstellen, in denen Sie, wie Sie erwähnten, Gegenstände duplizieren möchten. Vielleicht möchten Sie einen ganzen Abschnitt der Seite nehmen und ihn duplizieren, um zu simulieren, wie es wäre, wenn viel mehr Inhalt vorhanden wäre, als Sie erwartet haben.

Adam: Ja. Das ist der Anwendungsfall für Chaostests.

Drew: Ja.

Adam: Absolut.

Drew: Das ist etwas, womit wir uns alle auseinandersetzen müssen, das Designen mit CMS-basierten Systemen und all diesen lustigen Aufgaben.

Adam: Ja, das ist auch ein wirklich entscheidender Anwendungsfall. Weil ich das mache für … Ja, Schlagzeilen, wie ich schon sagte. Sie doppelklicken einfach auf einen Text und ich schlage einfach die Tastatur zu. Blah, bla, bla, bla, und drücke ein paar Leerzeichen, bla, bla. Und ich dachte: „Okay, wie hat sich das Layout geschlagen? Oh, es hat gut getan. Okay, gut, ich kann mit der nächsten Sache weitermachen. Was passiert, wenn ich dies viermal dupliziere? Gibt es noch Platz zwischen allem? Fließt es neben dem nächsten Gegenstand?“

Adam: Es kann wirklich schön sein für diese Simulation des, ja, Content-Chaos. Ganz kurze Titel, ganz lange Titel, hat keine Freunde, hat eine Million Freunde. Wie gehen Sie mit diesen Anwendungsfällen in der Benutzeroberfläche um? Ja.

Drew: Es funktioniert also mit jedem browserbasierten Inhalt. Also sowohl PWAs als auch normale Webseiten?

Adam: Ja, das tut es. Also, wenn Sie Spotify installiert haben, mache ich das die ganze Zeit, ich habe Spotify installiert und ich werde nur sagen: „Spotify, Sie sehen aus, als wären Sie eine unmöglich zu inspizierende App.“ Aber rate mal was? VisBug ist das egal. VisBug überlagert all Ihre Inhalte und untersucht die gesamte Typografie. Ich habe ein Light-Theme für … Oh, ich habe irgendwo einen Tweet, wo ich ein Light-Theme für Spotify erstellt habe.

Adam: Oh, das war, sorry, ein weiterer Anwendungsfall für das Prototyping von Farbe. Ich kann ein helles Thema auf dem Produkt selbst erstellen, ohne mich mit einem Haufen Aufkleberbögen herumschlagen zu müssen, richtig? Es gibt also diese wichtige gleichmäßige Mentalität, ich würde es lieben, wenn VisBug den Leuten dabei helfen würde, Ihr Produkt als Spielplatz zu verwenden. Benutze das als … Es ist so real. Es ist realer als Ihre Designkompositionen. Verbringen Sie also etwas mehr Zeit dort. Ich denke, Sie werden feststellen, dass Sie effektivere Designentscheidungen treffen können, wenn Sie an Ihrem eigentlichen Produkt arbeiten.

Drew: Und auch der Fall der Zugänglichkeit ist besonders interessant, weil wir gerade heutzutage oft sehr viel in Komponentenbibliotheken arbeiten und uns kleine Komponenten einer Seite ansehen. Und Sie verbringen weniger Zeit damit, sich all diese integrierten Ansichten anzusehen, um die Art von Ansichten zu erstellen, mit denen ein Kunde tatsächlich interagiert. Und es wird wirklich schwierig, diese Art von feineren Details im Auge zu behalten, wie Zugänglichkeitsdinge, Attribute, die auf der Seite nicht sichtbar sind.

Drew: Es ist sehr schwierig, Dinge im Auge zu behalten, die nicht sichtbar sind. Hier können Werkzeuge wirklich, wirklich helfen, etwas zu inspizieren und zu sehen, ja, es hat die richtigen Rollen und es ist-

Adam: Das tut es. Das ist der genaue Anwendungsfall. Ich möchte, dass eine PM in der Lage ist, dieses Zeug zu überprüfen. Ich möchte, dass ein Designer sich die Zugänglichkeit ansehen kann und nicht die Tools öffnen muss, um den DOM-Knoten zu finden, es ist alles im Elementbereich zusammengekauert und sieht komisch aus. Dass dort nur steht: „Hier sind die Bereichsattribute, hier ist der Titel, falls vorhanden.“ Es gibt auch einige andere Tools für die Barrierefreiheit. VisBug wird mit dem Suchsymbol ausgeliefert. Das Suchsymbol hat mehrere Möglichkeiten, damit zu interagieren.

Adam: Also fragt es zuerst die Seite ab. Wenn Sie also den gewünschten Elementtyp oder den gewünschten Elementklassennamen kennen, können Sie einfach danach suchen, sodass Sie ihn nicht mit der Maus finden müssen. Aber das hat auch Slash-Befehle drin. Es gibt also Plugins in VisBug, und sie führen Skripte auf der Seite aus. Wenn Sie also jemals ein Lesezeichen hatten, das Sie drei oder vier gespeichert haben, sagen Sie: „Ich werde dieses verwenden, weil es alle Grenzen hervorhebt und mir meine Kästchen zeigt.“ Es ist wie ein Debug-Trick oder so etwas.

Adam: Es ist wahrscheinlich ein VisBug-Plugin. Sie starten also VisBug, drücken den Schrägstrich und Sie erhalten eine automatische Vervollständigung, die Ihnen alle verschiedenen Plugins zeigt. Und es gibt einige Zugänglichkeit, die wirklich nett sind, die Fehler überlagern, und verschiedene solche Dinge. Also stimme ich zu. Barrierefreiheit sollte zugänglicher sein. Das ist einfach lahm zu sagen. Aber es muss näher am Werkzeuggürtel sein. Und ich denke, manchmal ist es zu weit weg, und vielleicht wird es deshalb übersehen. Ich hoffe also, wenn es etwas weiter vorne und in der Mitte und einfacher ist, dass es mehr überprüft wird. Ja.

Drew: Und es ist interessant, dass Sie sagen, dass VisBug mit der Art von berechneten Werten von Dingen arbeitet, also wie Farben. Bedeutet das also, dass Sie bei mehreren geschichteten Elementen mit unterschiedlicher Deckkraft die genaue Farbe messen können, die auf dem Bildschirm gerendert wird, anstatt

Adam: Oh.

Drew: … sich die einzelnen Elemente anzuschauen und zu versuchen, es irgendwie herauszuarbeiten?

Adam: Das ist eine wirklich gute Frage. Also denke ich, wenn ich die Frage richtig verstehe, was dies eine klassische Schwierigkeit im Frontend ist, ja, woher wissen Sie, ob Sie ein halb undurchsichtiges Textwort haben, welche Farbe es über grau oder über weiß hat ? Und woher kennst du seinen Kontrast? Im Moment wissen wir es nicht. VisBug kennt also die Farbe und sagt „50 % Grau“ oder was auch immer die Farbe ist, die Sie dort haben. Aber es weiß nichts Klügeres als das. Es kann nicht …

Adam: Ich denke, in diesem Fall müssten Sie eine Leinwand erstellen, alle Ebenen darauf malen und dann eine Pipette oder ein … verwenden. Sie würden es also auf Leinwand rendern und alles zu einem zusammenfügen eine einzelne gemalte Schicht, und ziehen Sie dann den einzelnen Pixelwert heraus, um zu sehen, was sein tatsächliches, berechnetes Grau ist, nachdem es auf das andere Material geschichtet wurde.

Adam: Ich denke, jemand hat es spezifiziert, oder vielleicht habe ich es als GitHub-Problem, dass es nett wäre. Weil VisBug dies zu 100% erleichtern könnte. VisBug, hinter den Kulissen habe ich bereits mit Textmetriken gearbeitet, bei denen Sie mit der Maus über Dinge fahren und Ihnen verrückte Informationen über die Schriftarten geben. Es sind fast zu viele Informationen, wie x-Höhe und Kappenhöhe, aber es geht noch mehr. Und es ist wie: "Ooh, ich bin an einem bestimmten Punkt irgendwie abgedreht." Also muss ich herausfinden, wie ich dort das Signal gegenüber dem Rauschen finden kann.

Adam: Aber ja, ich mag diesen Denkprozess, weil wir ein Tool haben sollten, das das tut. Und wenn wir wissen, wie man es berechnet, können wir VisBug beibringen, es zu tun, und das wäre eine wirklich coole Funktion, um die Opazitäts-relevante berechnete Farbe zu haben. Liebe es.

Drew: Ja, ich meine, es ist der Standardfall, Text vor einem Hintergrund zu haben, bei dem man sich nicht sicher ist, ob der Kontrast ausreicht, um die Barrierefreiheitsanforderungen zu erfüllen. Und vielleicht ist es das nicht, vielleicht ist der Kontrast zu gering und Sie möchten die Werte dann anpassen, bis Sie es gerade so weit haben, dass der Kontrast gut ist, aber nicht zu weit von dem entfernt ist, was der Kunde ursprünglich in Bezug auf Markenfarben wollte und Dinge.

Adam: Ich nenne das Bump, Bump bis du passierst.

Drew: Ja.

Adam: Weil es sich so anfühlt. Ich sage: „Ooh, ich bin ein bisschen knapp bei der Punktzahl.“ Also gehe ich zu meiner HSL-Leichtigkeit und stoße, stoße, stoße und beobachte, wie die kleinen Zahlen ticken, bis es heißt: „Ding“, ich habe ein grünes Häkchen. Ich sage: „Okay, cool.“ Und ja, manchmal ist ein Teil dieser Farbe nicht cool. Also, haben Sie viel von der 3.0-Arbeit zur wahrnehmungsbezogenen Barrierefreiheit studiert, die im Gange ist? Damit wir kein AA oder AAA mehr haben, haben wir eine Zahl, die Dinge wie Schriftdünnheit beinhaltet. Wenn es sich also um eine dünne Schriftart handelt, erhält sie eine niedrigere Punktzahl, wenn es sich um eine dicke Schriftart handelt, wird sie … Weil es viel auf den Kontrast ankommt.

Drew: Ja, nein, davon habe ich nichts gesehen, aber das klingt...

Adam: Wie auch immer, es ist eine wirklich coole Sache, es zu erkunden.

Drew: Das klingt faszinierend, ja. Ich muss jemanden finden, mit dem ich darüber reden kann. Das ist eine andere Folge. Ich meine, ich bin mir sicher, dass einige Entwickler argumentieren könnten, dass Sie alles, was VisBug tut, einfach über das CSS-Bedienfeld in DevTools tun können. Und ich denke, das ist irgendwie fair, verfehlt aber wahrscheinlich den Punkt, denn ja, Sie manipulieren CSS, wenn Sie Änderungen vornehmen, aber es setzt eher eine Art Designer-orientierte Benutzeroberfläche als eine Entwickler-orientierte Benutzeroberfläche oben drauf. Ist das eine angemessene Charakterisierung?

Adam: Das ist wirklich fair. Und ehrlich gesagt, die besten Ideen gehen aus VisBug in DevTools über. Und das haben sie bereits. Also VisBug, wenn Sie die Befehlsoption C für ein beliebiges Element drücken, nimmt es jeden berechneten Stil, zumindest ist das einzigartig. Nochmals, es ist also so, dass wir diejenigen machen, die wir Ihnen nicht nur all diese geerbten Eigenschaften geben werden. Aber wenn Sie sie alle in Ihre Zwischenablage legen, können Sie diesen Stil woanders einfügen, in einem Stylesheet, in einem CodePen, und das Element buchstäblich mit ein paar Klicks neu erstellen.

Adam: Und diese Art von Interaktionen haben ihren Weg in die DevTools gefunden, in dieses Elementfenster. Es gibt jedoch andere Dinge, die dies nicht getan haben, nämlich die DevTools, die nur ein Tool zur Inspektion einzelner Knoten sind. Und VisBug folgt dem Designtool-Mantra, das lautet: Nein, ich sollte in der Lage sein, mehrere auszuwählen. Ich muss in der Lage sein, massenweise zu bearbeiten und zu prüfen. Und so benutze ich VisBug die ganze Zeit für den Abstand. Weil ich mehrere Elemente hervorheben kann und sehe, wie der Rand zusammenfällt.

Adam: In DevTools können Sie es nie sehen, weil Sie die meiste Zeit nur einen Knoten gleichzeitig sehen können, obwohl es eine Möglichkeit gibt, mehrere Ränder anzuzeigen, aber es ist nicht dasselbe. Und ja, es hat diese Nischenanwendungsfälle, die so wirklich Spaß machen können. Eine andere ist, wenn Sie ein markieren … Nehmen wir an, Sie haben ein Typografiesystem und Sie haben H1 bis H7, wie in einem Märchenbuch oder so etwas, Sie können alle in VisBug markieren, die Umschalttaste gedrückt halten und einfach alle anklicken. Boop, boop, boop, boop, gehen Sie zum Typografie-Tool und drücken Sie nach oben oder unten, und es nimmt eine relative Änderung an jedem von ihnen vor.

Adam: Also wird jeder von ihnen einen nach oben oder unten schubsen. Und das ist einfach nicht etwas, das DevTools sehr einfach macht. Und ja, es hat solche Superkräfte, weil es ein bisschen agnostischer ist. Und es ist darauf vorbereitet, immer ein Array zu durchlaufen. Ja.

Drew: Also, was war der Ursprung von VisBug? Und jetzt ist es nur ein persönliches Projekt? Oder ist es ein Google-Projekt? Oder wie ist der Stand davon?

Adam: Ja. Der Status ist also zunächst einmal, dass es sich um ein Google-Projekt handelt. Sein Hauptziel ist es, ein Ort für Prototypen und Erkundungen zu sein, bevor Dinge in DevTools aufgenommen werden. Zumindest von der Google-Seite der Dinge. Aber von meiner persönlichen Seite sehe ich es immer noch als einen Ort, an dem ich die allgemeinen Aufgaben einbacken oder einige Optimierungen einbacken kann, um allgemeine Aufgaben zu bewältigen. Und nur um einem breiteren Publikum einen Einblick in das DOM zu geben.

Adam: Ich denke wirklich, dass die DevTools super leistungsfähig sind, aber es ist sehr einschüchternd. Nur ein Tab darin kann eine Karriere erfordern, um es zu lernen. Ich lerne immer noch Dinge in DevTools und verwende sie ständig. Und ja, das ist in gewisser Weise ein anderes Publikum. Es sind eher die Anfänger, die Leute, die neu hinzukommen, oder vielleicht sogar Leute wie PMs, Manager, die nie die Absicht haben, zu programmieren, aber am Ergebnis interessiert sind. Und so gibt es ihnen, ja, nur ein leichtes Werkzeug, um dort hineinzukommen.

Drew: Es ist ein interessanter Punkt, den Sie ansprechen, da ich persönlich oft Schwierigkeiten habe, einen komfortablen Workflow für die Verwaltung all dieser Arten von DevTools zu finden. Und Sie haben all diese kleinen klaustrophobischen Tafeln, und Sie können sie in ein anderes Fenster lösen, aber dann müssen Sie zwei verschiedene Fenster im Auge behalten. Und sobald Sie ein paar Browserfenster geöffnet haben, können Sie nicht … Sie fokussieren eines und wissen nicht, welche DevTools dazu gehören.

Drew: Und dann ist es in den Panels selbst eine Art Wilder Westen der Benutzeroberflächenkonventionen. Sie werden scrollen und die Dinge werden anfangen, seltsame Dinge zu tun, die Sie nicht erwartet haben. Und in Bezug auf die Benutzererfahrung habe ich das Gefühl, dass alles nur ein großes Durcheinander ist.

Adam: Das ist es. Ja.

Drew: Glaubst du, das ist unvermeidlich? Kann es besser sein?

Adam: Ich habe definitiv Gedanken hier. Und ja, ich denke, gut … Nehmen wir also an, Sie haben gerade einen Zuhörer, der sagt: „Ich kenne mich mit den DevTools ziemlich gut aus. Ich glaube nicht, dass sie so verrückt sind.“ Ich würde sagen: „Okay, öffne Android Studio oder Xcode. Beginnen Sie ein Projekt, sehen Sie sich die DevTools an und sehen Sie sich die Ausgabe an. Wie vertraut fühlst du dich gerade?“ Wahrscheinlich sehr fremd. Sie sehen das so: „Das ist Müll. Warum tun sie das? Warum ist diese Tafel hier drüben?“ Und Ihr Verstand beginnt mit all diesen Fragen nach dem Warum und der Verwirrung zu rasen.

Adam: Und es ist wie, nun, so fühlt sich jeder, wenn er DevTools zum ersten Mal öffnet. Da muss man also wirklich einfühlsam sein.

Drew: Ist es unvermeidlich, dass … können wir es besser machen? Oder ist das nur die Art der natürlichen Ordnung der Dinge?

Adam: Hier ist also meine aktuelle Sichtweise dazu: Ich denke, dass man sich leicht in Komplexität hineinversetzen kann. Und DevTools ist eines dieser Dinge, sie sind einfach von Natur aus komplex. Es gibt keine gute Benutzeroberfläche, um viele dieser Dinge zu erleichtern. Viele dieser Dinge werden von Entwicklern gebaut. Und ich denke, dass Entwickler Tools für Entwickler bauen, ist in Ordnung, denn Sie werden … Wenn es der einzige Weg ist, oder wenn es sogar ein guter Weg ist, werden Sie es lernen und Sie werden gut darin es, und Sie werden sich damit wohlfühlen.

Adam: Und alle DevTools sind irgendwie seltsam, weil sie für ihre seltsamen Anwendungsfälle gemacht sind, richtig? Die Entwicklung ist seltsam. Seien wir einfach ehrlich. Wir machen unsichtbare Zahnräder und unsichtbare Zwei mal Vier, und wir bauen Häuser im Grunde mit unsichtbaren, virtuellen Teilen. Also ja, wir brauchen seltsame Werkzeuge, um diese Dinge zu inspizieren und uns zu sagen, was sie ausgeben.

Adam: Nun, davon abgesehen, was VisBug tut, und was ich irgendwie langsam in DevTools verschoben habe, sind kleinere Tools, die fokussierter sind, im Gegensatz zu einem großen Tool, das behauptet, viel zu tun. Ich denke, es ist schwierig, Dinge wirklich gut zu machen. Und das ist ein klassisches Argument, oder? Das sind alles Stars, Spezialisten versus Generalisten. Beide werden nicht immer perfekt sein.

Adam: Aber was VisBug versucht, ist, es hat Spezialisten hervorgebracht. Das Guides-Tool führt also nur Guides aus. Und dieses Tool tritt niemals in die anderen Tools der Seite ein. Und deshalb versuche ich, dies mehr mit DevTools zu tun, wo DevTools Designern mehr helfen möchte, was VisBug dazu beigetragen hat, DevTools dazu zu inspirieren, es zu sehen. Und ich führe die Dinge immer wieder ein, anstatt zum Beispiel einen Grid-Editor zu erstellen, in dem Sie … „Volle Power des Grids in einem Overlay“ können, richtig? „Du kannst Tracks hinzufügen, Tracks entfernen, bla, bla, bla.“

Adam: Und ich denke: „Das klingt wirklich cool und auch sehr komplex.“ 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. 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: Ich habe einen Mod, bei dem beim Start von VisBug das gesamte HTML-Dokument genommen und zu einer Zeichenfläche verkleinert wird. Es sieht aus wie eine Zeichenfläche. Es schwebt auf einem Schatten auf einem grauen Raum. Sie können endlos um ihn herum schwenken. Sie können also von Ihrer Seitenleinwand wegscrollen, und was Sie tun können, ist, sagen wir, Sie haben eine Seite, die wirklich lang ist, und Sie möchten etwas von oben nach unten messen, nun, das können Sie jetzt tun , aber Sie würden dabei irgendwie den Kontext verlieren.

Adam: Nun, in diesem neuen VisBug-Zoom-Szenario halten Sie die Option oder die Alt-Taste auf Ihrer Tastatur gedrückt, Sie verwenden das Mausrad, oder Sie drücken Plus-Minus mit Ihrem Befehl und Sie können Ihre Webseite zoomen, als wäre es eine Zeichenfläche. Und ich versuche, es so nahtlos wie möglich zu machen. Sie gehen also rein und raus, und Sie scrollen nach unten, Sie gehen rein und raus, messen von der ... Und VisBug kümmert sich einfach nicht darum. Es zeichnet weiterhin berechnete Überlagerungen, Sie können den Abstand ändern.

Adam: Weil ich es für sehr wichtig halte, als Designer live die Vogelperspektive deiner Seite zu sehen. Animationen werden immer noch abgespielt, ihr alle. Scrollbare Bereiche sind immer noch scrollbar, oder? Es ist wirklich abgefahren. Du sagst: „Meine ganze Seite auf einen Blick.“ Jedenfalls ist es fast fertig. Es ist in-

Drew: Klingt abgefahren.

Adam: Es ist sehr abgefahren. Und es ist drin, ich muss nur sicherstellen, dass es browserübergreifend funktioniert, weil es offensichtlich einige knifflige Dinge tut, damit sich Ihre Live-Seite so anfühlt. Aber ja.

Drew: Erstaunlich. Ist es … ich meine, ich nehme an, dass VisBug ziemlich regelmäßig aktualisiert und weiterentwickelt wird. Was können wir in der Zukunft erwarten?

Adam: Ja, das ist definitiv eines der Features, an denen ich dort arbeite. Ich habe eine Funktion, bei der … Wenn Sie also auf etwas klicken, erhalten Sie eine Überlagerung mit etwas, das wie Griffe aussieht, richtig? Und es ist eine Art Illusion, es soll dafür sorgen, dass Sie sich wohl fühlen. Und die Absicht ist, dass diese Griffe schließlich ziehbar sind. Aber ich habe einige grundlegende Dinge, die ich zuerst lösen muss, wie Elemente im Browser keine Breite haben. Wenn Sie also einfach anfangen, die Breite zu erfassen, muss ich arbeiten, damit sich diese Illusion richtig anfühlt.

Adam: Und Sie erhalten möglicherweise nicht einmal die gewünschten Ergebnisse, weil es ein Element auf Blockebene sein könnte, dessen Breite Sie verkleinern, und Sie erhalten keinen Reflow eines Elements daneben. Und Sie fragen sich vielleicht, warum. Ich habe also Prototypen, bei denen Sie Ecken ziehen und Elemente herumziehen können. Aber ich muss mich wirklich darauf konzentrieren, wie die Design-Tools dies tun. Sie haben immer diese Umschalttaste. Und es ist wie … Sehen Sie, wie heißt der Schalter?

Adam: Aber im Grunde ist es wie Schrumpfen… ich nenne es Schrumpffolie. Schrumpfen Sie mein Element ein, es ist die Breite dieses Elements ist die Breite seines Inhalts, im Gegensatz zu hier ist die Breite meines Elements, kleben Sie etwas hinein. Ich brauche also so etwas im Browser, das dem Element überlagert ist, damit Sie zwischen diesen wählen können, und vielleicht sogar etwas, mit dem Sie zwischen Block und Inline wählen können, damit Sie die gewünschten Ergebnisse erzielen können.

Adam: Aber letztendlich ist das Ziel hier, dass VisBug nicht komplett tastaturgesteuert sein will. Ich möchte, dass Sie Abstände ziehen können. Wenn Sie oben einen Randabstand von 12 sehen, sollten Sie in der Lage sein, hineinzugreifen und ihn zu greifen, während Sie jetzt auf der Tastatur nach oben drücken müssen, um anzugeben, dass die Oberseite der Box einen Rand hinzufügen muss.

Adam: Und ja, ich muss ein paar Macken in Bezug auf die Strategie ausarbeiten. Aber es ist ein großes Ziel, es noch näher an Design-Tools zu bringen. Und vielleicht werde ich mich dem sogar beugen. Es ist so, nun, wenn Sie die Breite ändern möchten und ein seltsames Design erhalten, gibt es immer Möglichkeiten, mit VisBug daraus herauszukommen, wie mit dem Positionswerkzeug, mit dem Sie wirklich dem Fluss entkommen können. Der Fluss ruiniert also Ihre Idee, das Positionswerkzeug lässt Sie entkommen.

Adam: Und so gibt es… Wenn jemand wirklich versiert mit VisBug werden würde, würde er die Leute umhauen, weil es irgendwie unbegrenzt ist, und es ist wie, was kann man auf den Tisch bringen? Es hat ein Ausdruckselement. Es gibt definitiv expressive Taktiken. Aber wie auch immer, um es kurz zu machen, die Illusion ist, ich möchte es nur kleiner und kleiner und kleiner machen. Ich möchte, dass die Illusion einfach so ist: „Wow, ich fühle mich wirklich wie ein Designwerkzeug.“

Adam: Und dann, ja, einige Verbesserungen beim Exportieren wären schön. Aber auch eine Verbesserung des Exports für DevTools wäre schön, und das hält uns nicht wirklich auf. Ich weiß es nicht. Es gibt eine Menge Probleme, gehen Sie auf jeden Fall darüber abstimmen. Ich denke, eines der nächsten großen Features, die ich gerne machen würde, sind grüne Linien. Anstatt also nur Barrierefreiheits-Overlays anzuzeigen, bewegen Sie den Mauszeiger, um einige Dinge wirklich mit grünen Linien anzuzeigen und mehr anzuzeigen und mehr Informationen anzuzeigen, und ich weiß es nicht. Ja.

Drew: Wenn ich an den Prozess denke, eine Chrome-Erweiterung wie diese zu erstellen, ich meine, vorausgesetzt, es ist alles in JavaScript implementiert, wie sehr ähnelt es der normalen Webentwicklung? Erstellen einer Chrome-Erweiterung.

Adam: Das ist eine gute Frage. Es ist… Puh, das ist schwer. Es ist schrullig. Zunächst einmal ist die Umgebung, in der Sie Ihren Code starten können, nicht der Browser. Sie geben Ihnen dort nicht wirklich vollen Zugriff. Sie können, wenn Sie wirklich knifflig werden, was VisBug tun musste, dieses noch kniffligere Szenario. Also im Moment habe ich früher ausgeführt in der … Das wird so schnell so unscharf.

Adam: Weil es aus Datenschutzgründen mehrere Sandboxes für Ihre Erweiterung gibt. Und sie machen es schwierig, Skripte auf der eigentlichen Seite auszuführen, richtig? Weil Sie nicht wollen, dass jemand Ihr Formular absendet, wenn Sie das Ding oder etwas starten, es an sich selbst abschickt oder was auch immer. Es könnte wirklich destruktiv sein. Es hat also solche Macken. Da ist eine Brücke, über die man gehen muss. Und einer von ihnen, der VisBug geplagt hat, ist, dass VisBug früher verwendet hat …

Adam: Es sind also alles benutzerdefinierte Elemente, und benutzerdefinierte Elemente ermöglichen es Ihnen, umfangreiche Daten als Eigenschaft an sie zu übergeben. Sie sagen also, customelement.foo=myrichobject, voller Arrays oder was auch immer. Und das benutzerdefinierte Element erhält das nur als einige Daten auf dem Knoten selbst. Aber da ich mich in dieser seltsamen kleinen Sandbox-Welt befinde, wird es im Wesentlichen herausgefiltert, wenn ich versuche, etwas Einzigartiges wie dieses auf meinem Objekt festzulegen. Sie haben festgestellt, dass bestimmte Dinge nicht ... Ich kann also eine Zeichenfolge an mein benutzerdefiniertes Element übergeben, aber ich kann ihm kein Rich-Objekt übergeben.

Adam: Aber ja, abgesehen von kleinen Macken wie diesen, sobald Sie den Fluss heruntergefahren haben und die Zeit damit verbringen, ein Rollup-Szenario zu erstellen, wird dies eine Stunde oder so Arbeit sein, damit Sie LiveReload in Ihr Ding geben , es kann ziemlich natürlich werden. Ich denke, Firefox hat ehrlich gesagt die beste Erweiterungsentwicklungserfahrung, wenn Sie mit der CLI vertraut sind, können Sie mit einem Befehl etwas aufdrehen, und es installiert es, gibt Ihnen diese LiveReload-Funktionen und gibt Ihnen Debugging-Tools. Es hält irgendwie deine Hand durch, es kann wirklich nett sein.

Adam: Aber letztendlich ist es ein bisschen skurril. Aus diesem Grund arbeite ich viel auf dieser Demoseite, die wie ein Haufen Zeichenflächen aussieht, weil ich die meiste Zeit nicht wirklich eine echte Webseite brauche, um VisBug-Tests durchzuführen, solange ich Zeichenflächen habe Simulieren Sie verschiedene Probleme oder haben Sie zugängliche Dinge, die Sie sich ansehen können, und geben Sie mir sozusagen den Inhalt, den ich sehen muss. Ich erledige einen Großteil der Arbeit direkt im Browser, als wäre es nur eine normale Webanwendung. Die Entwicklung von VisBug ist also wirklich einfach, es sei denn, Sie versuchen, es über einen Browser zu testen, und dann wird es einfach etwas chaotisch und was auch immer.

Drew: Das sind wirklich interessante Einblicke. Also, ich habe heute alles über VisBug gelernt, was hast du in letzter Zeit gelernt, Adam?

Adam: Ich verbessere immer noch meine Wok-Fähigkeiten. Also möchte ich ein Wok-Mann werden, und ich spreche nicht vom Kassettenrekorder der 90er. Ich möchte Gemüse umdrehen und es ein wenig in der Luft Feuer fangen lassen, es mit einigen köstlichen Gewürzen bedecken und den Knoblauch wirklich anbraten und es knusprig lecker machen. Und dann legen Sie es auf ein kleines Reisbett und schieben es zu sich hin und sehen, was Sie denken.

Adam: Also freue ich mich gerade auf den Sommer, denn das bedeutet, dass ich den Wok auspeitschen und wieder in diese schnelllebige, heiße Kochumgebung eintauchen kann, und es macht wirklich Spaß.

Drew: Erstaunlich. Das hört sich lecker an. Wenn Sie, lieber Zuhörer, mehr von Adam hören möchten, können Sie ihm auf Twitter folgen, wo er @argyleinc ist, und seine persönliche Website unter nerdy.dev finden. Wenn Sie VisBug ausprobieren möchten, finden Sie es im Chrome Web Store, und Sie können die Sandbox-Version unter visbug.web.app ausprobieren. Danke, dass Sie heute zu uns gekommen sind, Adam. Gab es Abschiedsworte.

Adam: Nein, du warst wirklich nett. Das war wirklich süß. Danke, dass du mich eingeladen hast, ich weiß das wirklich zu schätzen.