Smashing Podcast Episode 37 z Adamem Argyle: Co to jest VisBug?

W tym odcinku mówimy o VisBug. Co to jest i czym różni się od szeregu opcji dostępnych już w Chrome DevTools? Drew McLellan rozmawia z jego twórcą Adamem Argyle, aby się dowiedzieć.

Pokaż notatki

• Piaskownica i plac zabaw VisBug
• Adam na Twitterze
• Strona osobista Adama
• VisBug na YouTube
• VisBug 101

Cotygodniowa aktualizacja

• Platforma konferencyjna, której używamy do naszych wydarzeń online: Hopin autorstwa Amandy Annandale
• Elementarz zapytań kontenerowych CSS autorstwa Stephanie Eckles
• Frustrujące wzorce projektowe, które wymagają naprawy: Wybór urodzin autorstwa Vitaly Friedman
• Potrząsanie drzewem: przewodnik referencyjny autorstwa Átila Fassina
• Jak ulepszyliśmy nasze kluczowe wskaźniki internetowe autorstwa Beau Hartshorne

Transkrypcja

Drew McLellan: To bystry, pełen pasji, punkowy inżynier z uwielbieniem dla sieci, który woli wykorzystywać swoje umiejętności do najlepszego w swojej klasie UI i UX oraz wzmacniać otoczenie. Pracował w małych i dużych firmach, a obecnie jest adwokatem programistów pracującym w Google w Chrome. Jest członkiem grupy roboczej CSS i twórcą VisBug, narzędzia do debugowania projektu. Wiemy, że zna się na projektowaniu i UX, ale czy wiesz, że ma więcej par klapek niż jakikolwiek żywy dwunożny? Moi miażdżący przyjaciele, witajcie Adama Argyle'a.

Adam Argyle: Witam.

Drew: Cześć Adam, jak się masz?

Adam: Och, miażdżę, wiesz o tym.

Drew: Dobrze to słyszeć. Chciałem więc dzisiaj porozmawiać z Tobą o Twoim projekcie, VisBug i ogólnie o koncepcji debugowania projektu oraz o tym, jak może to wpasować się w przepływ pracy projektu. To znaczy, od dłuższego czasu mamy narzędzia do debugowania przeglądarek przeznaczone dla programistów, prawdopodobnie od ponad dekady. Ale są one oczywiście bardzo skupione na kodzie. Czym więc różni się VisBug? A jaki rodzaj problemu próbuje rozwiązać?

Adam: Super. Tak, głównym problemem, w którym jest to zakorzenione, jest to, że jako front-endowy inżynier cały czas pracuję z projektantami i zawsze uwielbiałem ten moment, w którym usiedliśmy i powiedziałem: „Ok. Dokonuję ostatnich poprawek. Mamy jeszcze dzień lub dwa do rozmieszczenia. Więc projektant, usiądź i czy skrytykujesz to? Chcę, żebyś otworzył moją lokalną wersję hosta w przeglądarce i na telefonie lub w innym miejscu, i porozmawiaj ze mną o tym, co widzisz.

Adam: I po robieniu tego przez wiele lat i zawsze kochaniu tej interakcji, po pewnym czasie zacząłem czuć się winny z powodu tego, jak powszechne i proste były zadania. Mówiliby: „Jeden piksel tutaj. Margines pięciu pikseli tutaj. I zawsze były to gnidy i szturchnięcia, i gnidy i szturchnięcia do odstępów i liter. Mam na myśli, że rzadko było tak: „Och, poczekaj chwilę, podczas gdy ja spędzam 30 minut zmieniając jakiś kąt, lub cokolwiek, aby dostosować mój DOM, aby DOM mógł obsłużyć twoją prośbę” lub cokolwiek.

Adam: To były zwykle małe rzeczy. A potem zrobiłem ankietę i przeprowadziłem ankietę wśród wszystkich projektantów w Google. A ja pomyślałem: „Kiedy otwierasz DevTools, co robisz?” I trochę brzmiało, że potrzebują tylko podstaw. I tak się zrodziło, pomyślałem: „To powinno być łatwiejsze. Nie trzeba otwierać maski Ferrari, ruszać kawałkiem silnika, tylko po to, by zmienić kolor siedzeń. To niesprawiedliwe. Powinieneś być w stanie po prostu dotknąć siedzeń samochodu i zmienić kolor, tak jak narzędzie do projektowania”. Pomyślałem: „Coś może ułatwić ten przepływ pracy”. A ja na to: „Dobra, chyba zhakuję coś, żeby zobaczyć, czy uda mi się stworzyć rozwiązanie”.

Adam: I tak to się wszystko zaczęło. Zaczęło się tak naprawdę od odstępów, a potem od typografii. A kiedy już miałem mechanizm selekcji w emulowanych narzędziach projektowych, brzmiało to jak: „No cóż, co jeszcze mogę zrobić?” I to po prostu szło dalej. Ale tak, urodzony w tym momencie.

Drew: Pomysł polega na tym, że klient prosi cię o powiększenie logo, a VisBug pomaga przeglądarce zachowywać się bardziej jak narzędzie projektowe do wprowadzania tego rodzaju poprawek. A więc bliżej czegoś takiego jak Illustrator, Photoshop, Figma lub innych tego typu rzeczy.

Adam: Tak. Ten przypadek użycia też jest dobry. Ponieważ możesz być z klientem, a on mówi: „Och, uwielbiamy to”, to takie klasyczne, „uwielbiamy projekt, ale ten kolor niebieski jest dla nas trudny”. A ty mówisz: „Naprawdę?” To tak, że ludzie mogą przesłać formularz, a ty możesz zarabiać, ale chcesz teraz porozmawiać ze mną o niebieskim? I zwykle tworzyłoby to cały cykl. PM mówił: „Dobra, usuniemy twoją prośbę i wyślemy ją do projektowania”.

Adam: Ale jeśli projektant jest tam i to jego przeglądarka to pokazuje, oni by tak: „Ok. Cóż, po prostu kliknę i zmienię kolor. I możesz zdusić cały cykl pracy, po prostu prototypując zmianę w przeglądarce. Tak jest. Jest najskuteczniejszy w stosunku do istniejącego produktu, prawda? Ponieważ jest to narzędzie do debugowania. Niekoniecznie jest to narzędzie do generowania. Nie tworzy witryny dla Ciebie. Może, ale to trochę niezręczne.

Drew: Technicznie rzecz biorąc jest to rozszerzenie, które instalujesz w przeglądarce Chrome. Czy to prawda?

Adam: Tak. I to jest rozszerzenie. Po uruchomieniu pobiera plik JavaScript z napisem „Oto niestandardowy element o nazwie VisBug”. A potem umieszczasz na stronie element DOM, vis-bug. I pysk, po prostu biorę tę chwilę i zamieniam ją w pasek narzędzi i zaczynam słuchać wydarzeń na stronie. Słucham twoich zdarzeń najechania i słucham twoich kliknięć. I staram się jak najlepiej je przechwycić, a nie konkurować z twoją stroną główną.

Adam: Ale tak, to jest esencja… Jedynym powodem, dla którego jest to rozszerzenie, jest to, że łatwo go umieścić na swojej stronie. Chociaż w tym momencie ma teraz pewne ustawienia, które są dostępne w różnych przeglądarkach. Ale nadal jest to głównie 99,9%, niestandardowy element bez zależności. Myślę, że lubię bibliotekę kolorów, której używam, a poza tym jest po prostu waniliowa. Tak.

Drew: Myślę, że tak zaczął się Firebug, prawda? Jako rozszerzenie przeglądarki Firefox w dawnych czasach.

Adam: Tak. Dlatego nazywa się VisBug. Jest bardzo inspirowany Firebug, ale dla projektantów wizualnych.

Drew: Ach. No to jedziemy. To znaczy, być może nie jest to idealny format, jako podcast audio, aby mówić o narzędziu wizualnym. Jeśli chcesz, zapoznaj nas z niektórymi narzędziami i opcjami, które oferuje VisBug.

Adam: Absolutnie. A więc jedną z pierwszych rzeczy, które robi VisBug, a jeśli jesteś w domu lub przy komputerze, możesz przejść do visbug.web.app i wypróbować VisBug bez rozszerzenia, prawda?

Drew: Ach.

Adam: Jest to komponent sieciowy, więc załadowałem dla Ciebie stronę internetową tutaj na visbug.web.app, która wygląda na to, że ma całą masę tablic graficznych, a następnie oczywiście wstępnie załadowany VisBug. A celem tej witryny jest umożliwienie Ci grania, odkrywania i usuwania. Myślę, że klawisz usuwania jest jednym z najbardziej satysfakcjonujących narzędzi na początek. Mówisz: „Co mogę zrobić ze stroną?” A ty mówisz: „Cóż, mogę to zniszczyć”.

Adam: I zrobiłem to tak, że możesz trzymać delete, znajdzie następny… Co jest dość trudne przy usuwaniu. Usuwasz coś i wybiera następne rodzeństwo. Więc na zawsze wybierze następne rodzeństwo. Jeśli przytrzymasz usuwanie, dopóki nie usuniesz całości… W każdym razie bardzo satysfakcjonujące. Hit odświeżania i wszystko wróci. Ale pierwszym narzędziem, z którym jest dostarczany VisBug, więc kiedy tylko je uruchomisz, jest narzędzie przewodników. Kiedyś dosłownie trzymałem papier na ekranie, albo kupowałem rozszerzenie systemu, które pozwalałoby mi oznaczać rzeczy i tworzyć linie.

Adam: Ponieważ, tak, wyrównanie staje się w pewnym momencie bardzo optyczne dla wielu projektantów, prawda? Nie chcą koniecznie wyrównania matematycznego, prawda? Dlatego typografia ma kerning optyczny. To nie jest kerning matematyczny. To jest ludzkie kerning. I tak narzędzie prowadnic jest zakorzenione w tym, że wiele gnidów, które zdarzają się od projektanta, powiększa rzeczy, sprawdzając wyrównanie. Czy odstępy są dobre?

Adam: A więc to druga rzecz, którą robi narzędzie przewodników. Kiedy go uruchomisz i po prostu najedziesz na coś, zobaczysz, że element, na którym się unosisz, ma wokół niego małe pudełko. A potem pojawiają się przerywane przewodniki, tak jak zwykle robią władcy. I tak jak w Sketch i Zeplin, gdzie w pewnym sensie unosisz się i otrzymujesz te przewodniki, to ta sama koncepcja, po prostu żyj na swojej stronie. A jeśli coś klikniesz, a następnie najedziesz na nowe miejsce docelowe, otrzymasz narzędzia pomiarowe. A narzędzia pomiarowe są w pikselach i są obliczane… Więc wizualnie, ile pikseli jest między nimi. Nie to, co ktoś powiedział. To nie sumuje wszystkich odstępów, po prostu klikasz to i jest tak daleko od tego drugiego pola.

Adam: I myślę, że to jest naprawdę pomocne, ponieważ możesz przytrzymać shift i dalej klikać, i zasadniczo sprawdzić, czy masz równe odstępy między pięcioma ikonami. A to tylko kilka kliknięć. Nie musisz znać kodu, po prostu uruchom VisBug, najedź, kliknij, kliknij, kliknij, a zobaczysz, że „Och, spójrz. Tak. 15 pikseli między każdą z nich”. Albo czasami dostajesz coś, co jest trochę irytujące, klikasz pole, a potem jego pole nadrzędne i zdasz sobie sprawę, że jego górna odległość to dziewięć, a dolna to osiem. A ty pytasz: „Jak mam to wyśrodkować? Jest jakoś pomiędzy.” I potrząsa pięścią.

Adam: Ale przynajmniej możesz to ładnie i łatwo zobaczyć za pomocą narzędzia przewodników. Więc tak, to jest narzędzie przewodników.

Drew: Na pewno tam byłem, trzymając kawałki papieru na ekranie. A także inną sztuczką, której użyłbym, jest otwarcie innego okna przeglądarki i użycie krawędzi okna do wyrównania elementów. A potem starasz się trzymać wszystko we właściwym miejscu, tak aby podczas wprowadzania zmian w kodzie i odświeżania wszystko wciąż się układało. Tak, nie jest to idealny sposób pracy, więc.

Adam: Nie jest to idealny sposób pracy. Tak. I jest następna… Więc, och, a pierwsza wersja tego była bardzo luźna. Nie pękło, po prostu podniosło celownik, co jest funkcją, którą dodam później. Niektórzy użytkownicy mówią więc: „Hej, uwielbiam przyciąganie, to tak jak moje narzędzia projektowe. Ale co, jeśli chcę luźnego pomiaru? A może chcę zrobić literę, chcę zmierzyć literę, a nie jej skrzynkę na listy?” No cóż, to narzędzie przewodników można bardzo łatwo zmienić na klucz modyfikujący.

Adam: Więc tutaj VisBug staje się trochę inny, ale miejmy nadzieję, znajomy, jest bardzo ciężki w modyfikatorach skrótów. Tak więc, tak jak oglądasz profesjonalnego projektanta, oni są bardzo wyczuleni na skróty klawiszowe. Wciskają klawisze skrótów tutaj, powiększają, naciskają klawisze skrótów tam i po prostu naciskają klawisze. Tak więc VisBug jest bardzo skoncentrowany na klawiaturze w sposobie, w jaki zmieniasz rzeczy.

Adam: Dzieje się tak również dlatego, że VisBug umożliwia wielokrotne zaznaczanie i może jednocześnie zmieniać odstępy 100 elementów. I robi to stosunkowo. W każdym razie ma kilka ciekawych dziwactw, ale klawiatura w koncepcji modyfikatora jest naprawdę ważna. I możesz przytrzymać opcję, przesunięcie lub polecenie w wielu narzędziach i uzyskać coś innego lub uzyskać nowy rodzaj funkcji.

Drew: Jest to więc jedno z tych narzędzi, w których naprawdę opłaca się nauczyć się skrótów klawiszowych.

Adam: Tak. I tak, kiedy uruchomisz VisBug i najedziesz kursorem na jedną z ikon narzędzi, otrzymasz awarię. Wyświetla małe menu rozwijane, mówi skrót do wyboru tego narzędzia i mówi, co może zrobić i jakie interakcje należy wykonać, aby je uzyskać. Tak więc narzędzie prowadnic mówi: „Prowadnice elementów, po prostu najedź kursorem. Zmierz coś, kliknij, a następnie najedź na coś nowego. Lepkie pomiary to przesunięcie plus kliknięcie, więc będą się utrzymywać”.

Adam: Te poradniki też są naprawdę fajne do robienia zrzutów ekranu. Więc jeśli recenzujesz PR, nawet jako inżynier front-end, lub może projektant recenzujący PR, może to być naprawdę potężny sposób, aby się tam dostać i, tak, mieć kontrolę wysokiej wierności. Który rodzaj prowadzi nas do następnego narzędzia. Chcesz usłyszeć o kolejnym narzędziu?

Drew: Tak, jasne. Zróbmy to.

Adam: Super. Następny to narzędzie do inspekcji. A ten jest jak… Projektanci zwykle nie chcą całego CSS, prawda? Kiedy się spodziewają z… prawie powiedziałem Firebug, ale Chrome DevTools, masz pełną listę, prawda? Wybrałem ten H1, więc tutaj jest wszystko z powrotem do arkusza stylów przeglądarki. A projektant: „Co w przeglądarce? Przeglądarka ma arkusz stylów?”

Drew: W mrocznym dnie przewijanego panelu.

Adam: Mroczne dno, prawda?

Drew: Tak.

Adam: To tak, jakbyś zdjął wszystkie warstwy, a potem pomyślałeś: „Och, już nie lubię tych warstw”. A narzędzie kontrolne tutaj mówi: „Ach, projektanci, wiem, czego chcecie. To tylko kolor obramowania”. Zasadniczo pokaż mi coś tylko wtedy, gdy jest unikalne, więc nie zakrywaj mnie tylko właściwościami CSS. A mnie najbardziej interesuje kolor, typografia i odstępy. Więc przyjrzę się marginesom, wysokościom linii, rodzinie czcionek są naprawdę ważne, prawda? Istnieje całe rozszerzenie tylko po to, aby poinformować Cię, jaka rodzina czcionek znajduje się na stronie.

Adam: W VisBug to tylko pozycja w narzędziu inspekcji. Więc po prostu uruchamiasz VisBug, naciskasz sprawdzanie i najeżdżasz na dowolną typografię, a wyświetli Ci się rodzina czcionek. Więc tak, stara się, aby projektant skupił się na tym, co się pojawia, tak.

Drew: Więc to narzędzie nie pokazuje żadnych dziedziczonych stylów. Czy to prawda?

Adam: Zgadza się. Chyba że są odziedziczone i niepowtarzalne. Więc jeśli… Kolor tekstu lub coś takiego, jeśli kolor tekstu nie jest dosłownie dziedziczeniem słowa, powie ci, że jest to wartość obliczona, że ​​jest to coś interesującego.

Drew: Tak, to naprawdę przydatne po prostu… Tak. Pomaga skoncentrować się na rzeczach, które dosłownie odnoszą się do tego jednego przypadku czegoś, co jest oczywiście tym, co chciałeś zmienić. To znaczy, myślę, że to może być naprawdę przydatne, wszystkie te narzędzia byłyby naprawdę przydatne, tak jak wspomniałeś, w uzyskiwaniu informacji zwrotnych od interesariuszy. I rodzaj interaktywnej pracy z klientem.

Drew: Myślę, że działałoby to równie dobrze w przypadku udostępniania ekranu, jak obecnie musimy to robić coraz częściej. Nie musisz siedzieć z kimś przy komputerze, możesz siedzieć po drugiej stronie połączenia i udostępniać przeglądarkę i robić to w ten sposób. Myślę, że byłby to całkiem skuteczny sposób na uzyskanie informacji zwrotnej, gdy klient nie może wskazać ekranu i powiedzieć:

Adam: Zdecydowanie.

Adam: To zawsze magiczne, kiedy zmieniasz stronę na żywo w coś, co wygląda jak obszar roboczy Zeplina. Ktoś pyta: „Co… Czy po prostu poszliśmy w nowe miejsce?” A ty myślisz: „Nie, to jest twój produkt. Po prostu wchodzimy z tym w interakcję bardzo wizualnie”. Tak, może być naprawdę fajnie.

Drew: Czy są jakieś inne interesujące przypadki użycia, w które widziałeś VisBug lub które mogą być dla ciebie interesujące?

Adam: Tak. Więc tak, jest ich tak wiele, że ciężko jest zacząć. Och, jedno, co jest ważne, to komunikacja między programistami a programistami. VisBug działa na obliczonych wartościach. Więc nie patrzy na twoje autorskie wartości. I to może być naprawdę miłe, ponieważ w pewnym sensie mierzysz i sprawdzasz bezwzględny wynik końcowy w sposób, w jaki piksele zostały obliczone na ekranie. I to może być naprawdę miłe, prowadzić rozmowę w ten sposób, gdy pracujesz nad wynikami, w przeciwieństwie do strony autorskiej.

Adam: I możesz wrócić do czegoś w stylu: „Dobra, jak poszliśmy źle po stronie autorskiej, jeśli to właśnie otrzymaliśmy wizualnie?” Kolejnym narzędziem, które również wchodzi w grę, jest narzędzie do sprawdzania dostępności. Tak więc narzędzie inspekcji ułatwia po prostu zobaczenie stylów na elemencie i rozbija je w bardzo przyjazny dla projektantów sposób. Narzędzie ułatwień dostępu pomaga w sprawdzaniu wszystkich elementów na stronie i wyświetla wszystkie dostępne właściwości, które ma, dzięki czemu, mam nadzieję, łatwiej jest sprawdzić, czy coś zostało zrobione.

Adam: A więc PR… I często rzeczy powstają. Więc to jest znowu programista do programisty, projektant programista, przeglądasz interfejsy. To bardzo ważne. Jeśli patrzysz na interfejs i jesteś ciekawy, VisBug ma dla Ciebie przypadek użycia. Istnieją również przypadki użycia, w których można zrobić prototyp w przeglądarce. Więc rozmawialiśmy o jednym, w którym klient chciał spróbować niebieskiego. Dobra, to całkiem prosty scenariusz.

Adam: Ale są też inne. Jeśli naciśniesz polecenie D na VisBug, zduplikujesz element. I nie obchodzi go, co duplikujesz. Możesz więc zduplikować nagłówek, dodać trochę odstępów między dwoma nagłówkami i ustawić wariant na żywo w przeglądarce. Dwukrotnie klikasz tekst nagłówka i staje się on edytowalnym polem tekstowym, a następnie próbujesz nowy nagłówek i idziesz zobaczyć, jak pasuje nagłówek. Idź, dostosuj trochę odstępów, a po prostu zaoszczędziłeś sobie całą tę pracę programisty, znalezienie pliku źródłowego i tego rodzaju rzeczy, a po prostu…

Adam: Więc tak, może ci to pomóc odkrywać i weryfikować. To trochę dziwne… To znaczy, wiele rzeczy robi DevTools, prawda? Pojawia się, gdy skończysz, tak naprawdę nie daje kodu źródłowego zbyt często, nieczęsto kopiujesz kod z DevTools. Możesz skopiować parę klucz-wartość. Na przykład: „Och, zmieniłem ten styl”. Ale tak, w każdym razie.

Drew: Mm-hmm (tak). Tak. Przychodzą mi na myśl bardzo wizualne przypadki, w których możesz chcieć, jak wspomniałeś, powielać przedmioty. Możesz wziąć całą sekcję strony i zduplikować ją, aby zasymulować, jak by to wyglądało, gdyby było o wiele więcej treści, niż się spodziewałeś.

Adam: Tak. To jest przypadek użycia testowania chaosu.

Drew: Tak.

Adam: Absolutnie.

Drew: Co jest czymś, z czym wszyscy musimy sobie radzić, projektując coś w rodzaju systemów opartych na CMS i tego rodzaju zabawnych zadań.

Adam: Tak, to też jest bardzo ważny przypadek użycia. Ponieważ robię to dla… Tak, nagłówki, tak jak powiedziałem. Po prostu klikasz dwukrotnie jakiś tekst, a ja po prostu trzaskam klawiaturą. Bla, bla, bla, bla i uderzył w kilka spacji, bla, bla. A ja na to: „Dobra, jak układ się układa? Och, poszło dobrze. Dobra, mogę przejść do następnej rzeczy. Co się stanie, jeśli powiem to cztery razy? Czy między wszystkim jest jeszcze przestrzeń? Czy płynie obok następnego przedmiotu?”

Adam: To może być naprawdę miłe dla tej symulacji, tak, chaosu treści. Naprawdę krótki tytuł, naprawdę długie tytuły, nie ma przyjaciół, ma milion przyjaciół. Jak radzisz sobie z tymi przypadkami użycia w interfejsie użytkownika? Tak.

Drew: Działa więc z każdą zawartością przeglądarkową. Czyli PWA czy zwykłe strony internetowe?

Adam: Tak, ma. Więc jeśli masz zainstalowane Spotify, robię to cały czas, mam zainstalowane Spotify i powiem tylko: „Spotify, wyglądasz, jakbyś był niemożliwą do sprawdzenia aplikacją”. Ale zgadnij co? VisBug to nie obchodzi. VisBug nakłada wszystkie twoje rzeczy, sprawdza całą typografię. Stworzyłem lekki motyw dla… Och, mam gdzieś tweeta, w którym stworzyłem lekki motyw Spotify.

Adam: Och, to był kolejny przypadek użycia, przepraszam, do prototypowania koloru. Mogę stworzyć jasny motyw na samym produkcie bez konieczności bałaganu z mnóstwem arkuszy naklejek, prawda? Więc jest ta ważna, nawet mentalność, bardzo chciałbym, aby VisBug pomógł ludziom zrozumieć, jak używać twojego produktu jako placu zabaw. Użyj tego jako… To takie prawdziwe. Jest bardziej realny niż twoje kompozycje projektowe. Więc spędź tam trochę więcej czasu. Myślę, że odkryjesz, że możesz podejmować bardziej efektywne decyzje projektowe, pracując nad swoim rzeczywistym produktem.

Drew: Sprawa dostępności jest szczególnie interesująca, ponieważ często, szczególnie w dzisiejszych czasach, bardzo dużo pracujemy nad bibliotekami komponentów i przyglądamy się małym komponentom strony. I spędzać mniej czasu na oglądaniu wszystkich zintegrowanych ze sobą, aby stworzyć rodzaj widoków, z którymi klient faktycznie wchodzi w interakcję. I naprawdę trudno jest mieć oko na te drobne szczegóły, takie jak ułatwienia dostępu, atrybuty, które nie są widoczne na stronie.

Drew: Bardzo trudno jest mieć oko na rzeczy, których nie widać. Więc w tym miejscu oprzyrządowanie może naprawdę, naprawdę pomóc, aby móc coś sprawdzić i zobaczyć, że tak, ma odpowiednie role i jest-

Adam: Tak. To jest dokładny przypadek użycia. Chcę, żeby PM mógł sprawdzić te rzeczy. Chcę, aby projektant mógł spojrzeć na dostępność i nie musieć otwierać narzędzi, znajdować węzła DOM, wszystko jest zgniecione w panelu elementów i wygląda dziwnie. To po prostu mówi: „Oto atrybuty obszaru, oto tytuł, jeśli istnieje”. Istnieje również kilka innych narzędzi ułatwień dostępu. VisBug jest dostarczany z ikoną wyszukiwania. Ikona wyszukiwania umożliwia interakcję z nią na wiele sposobów.

Adam: Więc najpierw pyta stronę. Więc jeśli znasz typ elementu lub nazwę klasy elementu, które chcesz, możesz je po prostu przeszukać, więc nie musisz go znajdować za pomocą myszy. Ale zawiera również polecenia ukośnika. W VisBug są wtyczki, które będą wykonywać skrypty na stronie. Więc jeśli kiedykolwiek miałeś zakładkę, którą zapisałeś trzy lub cztery… Mówisz: „Zamierzam użyć tej, ponieważ podświetla wszystkie obramowania i pokazuje moje pola”. To jak sztuczka debugowania czy coś.

Adam: To prawdopodobnie wtyczka VisBug. Więc uruchamiasz VisBug, naciskasz ukośnik, a otrzymasz autouzupełnianie i pokaże ci wszystkie różne wtyczki. Jest też kilka naprawdę fajnych ułatwień dostępu, które nakładają się na błędy i inne tego typu rzeczy. Więc zgadzam się. Dostępność powinna być bardziej dostępna. To po prostu kiepskie do powiedzenia. Ale musi być bliżej paska narzędzi. I myślę, że czasami jest za daleko i może dlatego jest pomijany. Więc mam nadzieję, że jeśli będzie trochę bardziej z przodu, na środku i łatwiej, że zostanie bardziej sprawdzony. Tak.

Drew: Interesujące jest to, że mówisz, że VisBug działa z obliczonymi wartościami rzeczy, takimi jak kolory. Czy to oznacza, że ​​jeśli masz kilka warstwowych elementów, które mają różne poziomy krycia, będziesz w stanie zmierzyć dokładny kolor, który jest renderowany na ekranie, a nie…

Adam: Och.

Drew: …patrząc na poszczególne elementy i próbując jakoś to rozpracować?

Adam: To naprawdę dobre pytanie. Więc myślę, że jeśli dobrze rozumiem pytanie, co jest klasyczną trudnością w interfejsie, to tak, skąd wiesz, że masz półprzezroczysty tekst, jaki jest jego kolor nad szarym czy nad białym ? A skąd znasz jego kontrast? W tej chwili nie wiemy. Więc VisBug zna kolor i powie „50% szarości” lub inny kolor, który tam masz. Ale nie wie nic mądrzejszego niż to. Nie jest w stanie…

Adam: Myślę, że w takim przypadku musiałbyś stworzyć płótno, pomalować na nim wszystkie warstwy, a następnie użyć zakraplacza lub… Więc wyrenderowałbyś to na płótnie, zmiażdżywszy je w całość. pojedynczą pomalowaną warstwę, a następnie wyciągnij wartość pojedynczego piksela, aby zobaczyć, jaki jest jej rzeczywisty koniec obliczony na szaro po nałożeniu na inne rzeczy.

Adam: Myślę, że ktoś to określił, a może mam to jako wydanie na GitHubie, że byłoby fajnie. Ponieważ VisBug może to ułatwić, w 100%. VisBug, za kulisami, już skończyłem z metrykami tekstowymi, gdzie najeżdżasz na rzeczy i daje ci szalone informacje o czcionkach. To prawie za dużo informacji, takich jak wysokość x i wysokość czapki, ale idzie jeszcze więcej. A to jak: „Och, w pewnym momencie jestem wyłączony”. Więc muszę wymyślić, jak znaleźć tam sygnał w porównaniu do szumu.

Adam: Ale tak, podoba mi się ten proces myślowy, ponieważ powinniśmy mieć narzędzie, które to robi. A jeśli wiemy, jak to obliczyć, możemy nauczyć VisBug, aby to robił, i byłoby to naprawdę fajną funkcją, aby mieć obliczony kolor odpowiedni do krycia. Kocham to.

Drew: Tak, mam na myśli to, że jest to rodzaj standardowego przypadku umieszczania tekstu na tle, w którym nie masz pewności, czy kontrast jest wystarczający, aby spełnić wymagania dostępności. A może tak nie jest, być może jest to zbyt niski kontrast i chcesz następnie dostosować wartości, aż uzyskasz to tylko do punktu, w którym kontrast jest dobry, ale nie odbiega zbytnio od tego, czego początkowo chciał klient w zakresie kolorów marki i rzeczy.

Adam: Nazywam to uderzeniem, uderzeniem, dopóki nie zdasz.

Drew: Tak.

Adam: Bo tak to jest. Mówię: „Och, trochę mi brakuje”. Więc to jest tak, że przejdę do mojej lekkości HSL i będę po prostu uderzać, uderzać, uderzać i patrzeć, jak małe cyfry tykają, aż będzie jak „Ding”, mam zielony znacznik wyboru. Mówię: „Dobra, fajnie”. I tak, czasami niektóre z tego koloru nie są fajne. Czy przestudiowałeś większość prac nad dostępnością percepcyjną w wersji 3.0, które mają miejsce? Abyśmy nie mieli już AA ani AAA, będziemy mieli numer i obejmuje takie rzeczy, jak grubość czcionki. Więc jeśli jest to cienka czcionka, otrzyma niższy wynik, jeśli jest to gruba czcionka, to idzie… Ponieważ jest wiele kontrastów.

Drew: Tak, nie, nic z tego nie widziałem, ale to brzmi-

Adam: W każdym razie to naprawdę fajna rzecz do odkrycia.

Drew: To brzmi fascynująco, tak. Muszę znaleźć kogoś, z kim mógłbym o tym porozmawiać. To kolejny odcinek. To znaczy, jestem pewien, że niektórzy programiści mogą argumentować, że wszystko, co robi VisBug, możesz po prostu zrobić za pomocą panelu CSS w DevTools. I myślę, że to trochę sprawiedliwe, ale prawdopodobnie mija się z celem, ponieważ tak, manipulujesz CSS, kiedy wprowadzasz zmiany, ale jest to umieszczenie na górze interfejsu użytkownika zorientowanego na projektanta, a nie na interfejs programisty. Czy to uczciwa charakterystyka tego?

Adam: To naprawdę uczciwe. I szczerze, najlepsze pomysły przechodzą z VisBug do DevTools. I już to zrobili. Więc VisBug, jeśli naciśniesz opcję polecenia C na dowolnym elemencie, przyjmie on każdy obliczony styl, przynajmniej to jest unikalne. Znowu, więc to jest tak, że zrobimy te, które nie tylko damy ci wszystkie te odziedziczone właściwości. Ale umieszcza je wszystkie w schowku i możesz wkleić ten styl w innym miejscu, w arkuszu stylów, w CodePen i dosłownie odtworzyć element za pomocą kilku kliknięć.

Adam: I tego rodzaju interakcje trafiły do ​​DevTools, do tego panelu elementów. Są jednak inne rzeczy, których nie ma, tj. DevTools jest narzędziem służącym tylko do kontroli pojedynczego węzła. VisBug postępuje zgodnie z mantrą narzędzia do projektowania, która brzmi: nie, powinienem być w stanie dokonać wielokrotnego wyboru. Muszę mieć możliwość zbiorczej edycji, zbiorczej inspekcji. I tak cały czas używam VisBug do spacji. Ponieważ mogę wyróżnić wiele elementów i zobaczyć zapadanie się marginesu.

Adam: W DevTools nigdy tego nie widać, ponieważ przez większość czasu możesz zobaczyć tylko jeden węzeł na raz, chociaż jest sposób na pokazanie wielu marginesów, ale to nie to samo. I tak, ma te niszowe przypadki użycia, które mogą być naprawdę zabawne. Innym jest to, że jeśli zaznaczysz… Powiedzmy, że masz system typografii i masz H1 do H7, jak w bajce lub czymś w tym rodzaju, możesz podświetlić je wszystkie w VisBug, przytrzymaj Shift, po prostu kliknij je wszystkie. Buu, buu, buu, buu, przejdź do narzędzia typograficznego i uderz w górę lub w dół, a to spowoduje względną zmianę w każdym z nich.

Adam: A więc każdy z nich podniesie jeden lub jeden w dół. A to po prostu nie jest coś, co DevTools bardzo ułatwia. I tak, ma takie supermoce, ponieważ jest trochę bardziej agnostyczny. I jest przygotowany do zawsze iteracji po tablicy. Tak.

Drew: Więc skąd wziął się VisBug? A teraz czy to tylko osobisty projekt? A może jest to projekt Google? Albo jaki jest jego status?

Adam: Tak. Po pierwsze, status jest taki, że jest to projekt Google. Jego głównym celem jest bycie miejscem do tworzenia prototypów i eksploracji, zanim wszystko trafi do DevTools. Przynajmniej od strony Google. Ale z mojej osobistej strony nadal postrzegam to jako miejsce do pieczenia typowych zadań lub do pieczenia niektórych optymalizacji, aby przejść przez typowe zadania. I tylko po to, by szersza publiczność mogła zajrzeć do DOM.

Adam: Naprawdę uważam, że DevTools jest super potężne, ale to bardzo onieśmielające. Tylko jedna zakładka w nim może zająć karierę, aby się nauczyć. Wciąż się uczę w DevTools i cały czas z nich korzystam. I tak, pod pewnymi względami jest to inna publiczność. To bardziej początkujący, ludzie przychodzący, a może nawet tacy jak PM, menedżerowie, którzy nigdy nie zamierzają kodować, ale są zainteresowani wynikami. A więc daje im to, tak, po prostu lekkie oprzyrządowanie, żeby się tam dostać.

Drew: To interesująca kwestia, o której mówisz, ponieważ osobiście często uważam, że mam trudności ze znalezieniem wygodnego przepływu pracy w zarządzaniu wszystkimi tego rodzaju narzędziami DevTool. I masz wszystkie te małe klaustrofobiczne panele i możesz je odłączyć do innego okna, ale wtedy musisz śledzić dwa różne okna. A kiedy masz już otwartych kilka okien przeglądarki, nie możesz… Skupiasz się na jednym i nie wiesz, które DevTools do niego należy.

Drew: A potem w samych panelach jest to coś w rodzaju dzikiego zachodu konwencji interfejsu użytkownika. Będziesz przewijać i rzeczy zaczną robić dziwne rzeczy, których się nie spodziewałeś. A jeśli chodzi o wrażenia użytkownika, wydaje mi się, że to tylko wielki bałagan.

Adam: Jest. Tak.

Drew: Czy uważasz, że to nieuniknione? Czy może być lepiej?

Adam: Zdecydowanie mam tutaj myśli. I tak, myślę, że dobrze… Załóżmy, że masz teraz słuchacza, który mówi: „Jestem całkiem obeznany z DevTools. Nie sądzę, że są aż tak szaleni. Powiedziałbym: „Ok, otwórz Android Studio lub Xcode. Rozpocznij projekt i spójrz na DevTools, spójrz na dane wyjściowe. Jak znajomo się teraz czujesz? Prawdopodobnie bardzo obcy. Patrzysz na to, mówiąc: „To są śmieci. Dlaczego to robią? Dlaczego ten panel jest tutaj? A twój umysł zaczyna ścigać się z tymi wszystkimi pytaniami „dlaczego” i zamętem.

Adam: I wygląda na to, że tak właśnie czują się wszyscy, gdy po raz pierwszy otwierają DevTools. Więc musisz być naprawdę empatyczny.

Drew: Czy to nieuniknione, że… Czy możemy zrobić coś lepszego? A może to tylko naturalny porządek rzeczy?

Adam: A więc oto moje obecne podejście do tego, uważam, że złożoność jest naprawdę łatwa do znalezienia. A DevTools to jedna z tych rzeczy, są one po prostu naturalnie złożone. Nie ma dobrego interfejsu użytkownika, który ułatwiłby wiele z tych rzeczy. Wiele z tych rzeczy jest tworzonych przez deweloperów. I myślę, że programiści tworzący narzędzia dla programistów są w porządku, ponieważ będziesz miał… Jeśli to jedyny sposób, lub nawet jeśli jest to dobry sposób, nauczysz się tego i staniesz się dobry w i poczujesz się z tym komfortowo.

Adam: I wszystkie DevTools są trochę dziwne, ponieważ są stworzone do ich dziwnych przypadków użycia, prawda? Rozwój jest dziwny. Bądźmy po prostu szczerzy. Robimy niewidzialne trybiki i niewidzialne dwa na cztery, a domy budujemy w zasadzie z niewidzialnych, wirtualnych części. Więc tak, potrzebujemy dziwnych narzędzi, aby sprawdzić te rzeczy i powiedzieć nam, co one wytwarzają.

Adam: Biorąc to pod uwagę, to, co robi VisBug i to, co powoli przenoszę do DevTools, to mniejsze narzędzia, które są bardziej skoncentrowane, w przeciwieństwie do dużego narzędzia, które twierdzi, że dużo robi. Myślę, że ciężko jest, aby rzeczy robiły się naprawdę dobrze. I to jest klasyczny argument, prawda? To wszystko gwiazdy, specjaliści kontra generaliści. Żadne z nich nie zawsze będzie idealne.

Adam: Ale to, co próbuje zrobić VisBug, to zrobienie specjalistów. Więc narzędzie do prowadzenia po prostu robi przewodniki. A to narzędzie nigdy nie wycieka do innych narzędzi na stronie. Dlatego staram się to zrobić bardziej z DevTools, gdzie DevTools chce bardziej pomagać projektantom, do czego VisBug pomógł zainspirować DevTools. A sposób, w jaki wprowadzam różne rzeczy, polega na tym, że zamiast na przykład tworzyć edytor siatki, w której można… „Pełna moc siatki w jednej nakładce”, prawda? „Możesz dodawać utwory, usuwać utwory, bla, bla, bla”.

Adam: A ja na to: „Brzmi to naprawdę fajnie, a także bardzo złożone”. 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: Mam mod, w którym po uruchomieniu VisBug pobiera cały dokument HTML i zmniejsza go do obszaru roboczego. Wygląda jak obszar roboczy. Unosi się w cieniu szarej przestrzeni. Możesz go bez końca przesuwać. Możesz więc przewijać z dala od kanwy strony, a to, co ci pozwala, to powiedzmy, że masz stronę, która jest naprawdę długa i chcesz zmierzyć coś od góry do dołu, cóż, możesz to zrobić teraz , ale po drodze stracisz kontekst.

Adam: Cóż, w tym nowym scenariuszu powiększania VisBug, przytrzymujesz opcję lub alt na klawiaturze, używasz kółka myszy lub wciskasz plus minus za pomocą polecenia i możesz powiększać swoją stronę tak, jakby była to obszar roboczy. I staram się, aby było tak płynne, jak jest. Więc wchodzisz i wychodzisz, przewijasz w dół, wchodzisz i wychodzisz, mierzysz od… A VisBug po prostu nie dba o to. Utrzymuje rysowanie wyliczonych nakładek, można zmieniać odstępy.

Adam: Ponieważ uważam, że dla projektanta to bardzo ważne, aby zobaczyć na żywo twoją stronę z lotu ptaka. Animacje wciąż grają, wszyscy. Przewijalne obszary nadal można przewijać, prawda? To naprawdę fajne. Mówisz: „Cała moja strona w jednym widoku”. W każdym razie, więc już prawie gotowe. To jest w-

Drew: Brzmi dziwnie.

Adam: To bardzo tripowe. I jest, muszę się tylko upewnić, że działa w różnych przeglądarkach, ponieważ oczywiście robi kilka trudnych rzeczy, aby Twoja strona na żywo wyglądała w ten sposób. Ale tak.

Drew: Niesamowite. Czy to… to znaczy, zakładam, że VisBug jest dość regularnie aktualizowany i jest rozwijany. Czego możemy się spodziewać w przyszłości?

Adam: Tak, to zdecydowanie jedna z funkcji, nad którą tam pracuję. Mam funkcję, w której… Tak więc, gdy coś klikniesz, otrzymasz nakładkę z czymś, co wygląda jak uchwyty, prawda? I to rodzaj iluzji, ma sprawić, że poczujesz się komfortowo. A zamiarem jest, aby ostatecznie te uchwyty można było przeciągać. Ale najpierw muszę rozwiązać kilka podstawowych rzeczy, na przykład elementy w przeglądarce nie mają szerokości. Więc jeśli po prostu zaczniesz łapać szerokość, muszę popracować, aby ta iluzja wydawała się odpowiednia.

Adam: I możesz nawet nie uzyskać oczekiwanych rezultatów, ponieważ może to być element na poziomie bloku, który ściągasz na mniejszą szerokość i nie otrzymujesz ponownego przepływu elementu obok niego. I możesz się zastanawiać, dlaczego. Mam więc prototypy, w których można przeciągać rogi, przeciągać elementy dookoła. Ale naprawdę muszę się skupić na tym, jak robią to narzędzia do projektowania. Zawsze mają ten przycisk przełączania. I to jest jak… Widzisz, jak nazywa się przełącznik?

Adam: Ale to właściwie jest jak kurczliwość… ja to nazywam kurczeniem się. Folia w folię kurczliwą mój element, to szerokość tego elementu to szerokość jego zawartości, a tu szerokość mojego elementu, wklej coś w to. Potrzebuję więc czegoś takiego w przeglądarce, nałożonego na element, abyś mógł wybierać między nimi, a może nawet coś, co pozwoli ci wybrać między blokiem a inline, aby uzyskać pożądane wyniki.

Adam: Ale ostatecznym celem jest to, aby VisBug nie chciał być całkowicie sterowany za pomocą klawiatury. Chcę, żebyś mógł przeciągać odstępy. Jeśli widzisz odstępy 12 marginesów na górze, powinieneś być w stanie sięgnąć i chwycić go, podczas gdy teraz musisz nacisnąć klawiaturę, aby określić, że górna strona pola wymaga dodania marginesu.

Adam: A więc tak, mam kilka dziwactw do wypracowania, jeśli chodzi o strategię. Ale bardzo ważnym celem jest, aby jeszcze bardziej zbliżyć się do narzędzi projektowych. A może i ja się w tym uginam. To tak, no cóż, jeśli chcesz zmienić szerokość i chcesz uzyskać dziwny projekt, zawsze są sposoby, aby się z tego wydostać za pomocą VisBug, na przykład narzędzie do ustawiania pozycji naprawdę pozwala ci uciec od przepływu. Więc przepływ rujnuje twój pomysł, narzędzie pozycjonowania pozwala ci uciec.

Adam: A więc jest… Jeśli ktoś miałby być naprawdę doświadczony w VisBug, rozwaliłby ludziom umysły, bo to trochę nieograniczone, a to jak, co można wnieść do stołu? Ma w sobie element ekspresji. Jest zdecydowanie wyrazista taktyka. Ale w każdym razie, tak krótko mówiąc, iluzja jest taka, że ​​chcę tylko, aby była coraz mniejsza i mniejsza. Chcę, aby iluzja była jak: „Wow, naprawdę czuję się jak narzędzie do projektowania”.

Adam: A potem, tak, kilka ulepszeń w eksporcie byłoby fajnie. Ale także ulepszenie eksportu do DevTools byłoby miłe, a to nas nie powstrzymuje. Więc nie wiem. Jest mnóstwo problemów, zdecydowanie zagłosuj na nie. Myślę, że jedną z następnych dużych funkcji, które chciałbym zrobić, są zielone linie. Więc zamiast po prostu pokazywać nakładki ułatwień dostępu po najechaniu kursorem, aby naprawdę wskazać niektóre rzeczy zielonymi liniami, pokazać więcej i ujawnić więcej informacji, a nie wiem. Tak.

Drew: Coś w rodzaju myślenia o procesie tworzenia takiego rozszerzenia Chrome, to znaczy, zakładając, że wszystko jest zaimplementowane w JavaScript, jak bardzo przypomina on zwykłe tworzenie stron internetowych? Tworzenie rozszerzenia do Chrome.

Adam: To dobre pytanie. To… Uff, to jest trudne. To dziwaczne. Po pierwsze, środowisko, w którym możesz uruchomić swój kod, nie jest przeglądarką. Nie dają tam pełnego dostępu. Możesz, jeśli naprawdę masz z tym problem, do którego VisBug musiał przejść, ten jeszcze trudniejszy scenariusz. Więc w tej chwili wykonywałem w… To będzie tak niewyraźne, tak szybko.

Adam: Ponieważ jest wiele piaskownic dla twojego rozszerzenia, ze względu na problemy z prywatnością. I utrudniają wykonywanie skryptów na rzeczywistej stronie, prawda? Ponieważ nie chcesz, aby ktoś przesyłał twój formularz, kiedy uruchamiasz coś lub coś, przesyłając go do siebie lub cokolwiek innego. To może być naprawdę destrukcyjne. Więc ma takie dziwactwa. Jest most, przez który musisz przejść. A jednym z nich, który nęka VisBug jest to, że VisBug używał…

Adam: Więc to są wszystkie elementy niestandardowe, a elementy niestandardowe umożliwiają przekazywanie im bogatych danych jako właściwości. Więc mówisz, customelement.foo=myrichobject, pełen tablic lub cokolwiek innego. A element niestandardowy po prostu pobiera to jako niektóre dane w samym węźle. Ale ponieważ jestem w tym dziwnym, małym świecie piaskownicy, jeśli spróbuję ustawić coś takiego na moim obiekcie, zasadniczo zostanie to odfiltrowane. Ustalili, że pewne rzeczy nie mogą… Mogę więc przekazać ciąg do elementu niestandardowego, ale nie mogę przekazać mu obiektu bogatego.

Adam: Ale tak, poza małymi takimi dziwactwami, kiedy już zmniejszysz przepływ i jeśli poświęcisz czas, aby uzyskać scenariusz podsumowania, co będzie wymagało około godziny pracy, aby dać LiveReload w swojej rzeczy , może stać się całkiem naturalny. Szczerze mówiąc, uważam, że Firefox ma najlepsze możliwości tworzenia rozszerzeń, jeśli jesteś doświadczony w obsłudze interfejsu CLI, możesz uruchomić coś jednym poleceniem, a następnie je zainstaluje, udostępni te funkcje LiveReload i zapewni narzędzia do debugowania. Trochę trzyma twoją rękę, może być naprawdę fajny.

Adam: Ale ostatecznie to trochę dziwaczne. Dlatego dużo pracuję nad tą witryną demonstracyjną, która wygląda jak zbiór obszarów roboczych, ponieważ przez większość czasu nie potrzebuję prawdziwej strony internetowej, aby testować VisBug, o ile mam takie obszary robocze symulować różne problemy lub mieć dostępne rzeczy do obejrzenia i w pewnym sensie dostarczać mi treści, które potrzebuję zobaczyć. Dużo pracy wykonuję bezpośrednio w przeglądarce, tak jakby była to zwykła aplikacja internetowa. Tak więc doświadczenie programistyczne VisBug jest naprawdę łatwe, chyba że próbujesz go przetestować w różnych przeglądarkach, a wtedy robi się trochę bałaganiarski i cokolwiek.

Drew: To naprawdę interesujące spostrzeżenia. Więc dowiedziałem się dzisiaj wszystkiego o VisBug, o czym ty się ostatnio dowiedziałeś, Adamie?

Adam: Ciągle doskonalę swoje umiejętności wokowe. Więc chcę być człowiekiem woka i nie mówię o magnetofonie z lat 90-tych. Chcę przewrócić warzywa i sprawić, by trochę zapaliły się w powietrzu, przykryć pysznymi przyprawami i po prostu podsmażyć ten czosnek i sprawić, by był pyszny i chrupiący. A potem połóż go na małym łóżku ryżowym i przysuń do siebie i zobacz, co myślisz.

Adam: Tak więc jestem teraz podekscytowany na lato, ponieważ oznacza to, że mogę wycisnąć wok i wrócić do tego szybkiego, gorącego środowiska gotowania i to jest naprawdę zabawne.

Drew: Niesamowite. To brzmi smakowicie. Jeśli, drogi słuchaczu, chciałbyś usłyszeć więcej od Adama, możesz śledzić go na Twitterze, gdzie jest @argyleinc, i znaleźć jego osobistą stronę internetową pod adresem nerdy.dev. Jeśli chcesz wypróbować VisBug, możesz go znaleźć w Chrome Web Store, a wersję piaskownicy możesz wypróbować na visbug.web.app. Dzięki za dołączenie do nas dzisiaj Adam. Czy miałeś jakieś pożegnalne słowa.

Adam: Nie, byłeś naprawdę miły. To było naprawdę słodkie. Dzięki za zaproszenie, naprawdę to doceniam.