Google UX Engineer Adam Argyle joins Jerod and KBall to share all the details on VisBug, his just-released Chrome Extension that âmakes any webpage feel like an artboard.â Adam is passionate about doing for designers what Firebug (and later DevTools) did for developers. In this episode, he shares that passion and how itâs driven him to create and open source VisBug.
Adam Argyle: Yeah, Iâd love to. That demo - I got asked to do that demo last week, and that was crazy. The demo gods blessed me; I was practicing⌠That was crazy; that wasnât supposed to happen. The talk was supposed to happen with Jason Miller, and that was going great. Then I was supposed to have a booth in the forum, and that went great. And honestly, this tool is so weird⌠I mean, I call it Designer Vim sometimes; itâs not as complex as Vim, but it has the same mentality. Itâs modal. You switch to a different tool and your home row changes. In this case itâs not exactly your home row, itâs kind of the arrows in your manipulator commands⌠But itâs really similar that way. So I was like, thereâs no way people are just gonna be like âYeah! Keyboard!â I thought for sure there was just gonna be tons of like âOkay, whereâs the panels? Whereâs everything that Iâm used to? Whereâs the GUI that I can click up and down on an arrow?â If I had built that stuff, I would have never had this tool done in like five months.
So Iâve only been working on this tool for like 5-6 months, started out tiny⌠Anyway, I ended up pitching it to some people on the Chrome team, I was like âWhereâs the designer tools?â and they were like, âYeah, weâve been there. We tried that.â I was like, âOkay, can you send me what you did?â And they were like, âOkayâŚâ And they sent me all these old files and all these old videos and all these old design sprints⌠Brilliant work. They were doing exactly what they were supposed to do, but they failed in a couple of really interesting ways, and they sent this email like âHey, yo, if you can solve this, weâre interested.â I was like âWhoaâŚ! I have an opportunity. People have tried something and they failedâŚâ
Anyway, so I was driving home one day, and basically the massive problem was â among other issues, the biggest one was the documents in flow. If youâre grabbing corners of things and moving them around, itâs unpredictable; you donât know what could happen. So youâd have a user experience moment where it just went instant jink⌠And it was like turbo-jink; it would add a 250 margin to something, and that was just like, âWell, okay. Thatâs not gonna work.â And I was just driving home and I was like, âMan, the arrow keys are each side of a node. Why donât I just start there? Up adds margin to top, down adds margin to the bottom. How far can I run with this keyboard thingâŚ?â And it turns out that little keyboard scenario - thereâs a matrix of possibilities, and it turns out each tool that itâs geared towards, the matrix is fitting really well. So I pitched higher and higher up at Google, and I eventually pitched to Dion Almaer who was the first person to recognize what I was going for, which was a simple tool.
[08:07] Many engineers whoâd see my tool, theyâd go âWell, why not make a design tool?â or âHow do I get the code out?â, which is â not that these arenât valid questions, but theyâre basically like⌠In our industry, we reward complexity more than we reward simplicity. And I get it, because complexity is really fun. Itâs shiny. Weâre like moths to complexity, I feel like, as engineers. So what I wanted to do is â Iâve been a design lead before, Iâve been a product lead, Iâve been a front-end lead⌠I make a lot of decisions as a front-end designer; I want designers to make them. I feel like theyâre the better team to be making these decisions anyway.
Iâd seen these patterns where Iâd sit down with a designer, and I love this, because they always bowed to me like Iâm some magician⌠But theyâd be like, âCan you increase the font size on that thing two pixels?â And Iâd go over to my code and be like âBAM!â and then Browsersync would live reload it on their page, and theyâd be like âThis is crazy.â And so Iâd always be like this translator and at the end of the day, I was like âAfter all these years, Iâve pretty much only translated font size and padding and margin.â I was like, âHow do I just get this into their handsâŚ?â Because obviously, the dev tools â apparently it is too much; if itâs your first time popping that open, it does look like under the hood of a car. Thatâs really overwhelming, and I just wanted to abstract a lot of those implementation details away, and let people fiddle.
I feel like I took that question and ran with it a little bit⌠[laughter] So yeah, Chrome Dev Summit, the report - so far Iâve been so pleasantly surprised because of how weird this thing is I built. I think people understand its value more than they care about the interface, and the interface is â there is a small learning curve, but Iâm telling you, 30 minutes into it, youâre done. And at that point, youâre sort of flexing its really powerful skills that it has, which are like this multi-select â thereâs some multidimensional array operations that you can do with it that are super-cool, and Iâm just waiting for YouTube videos to come out where people are like âWatch this!â then 30 seconds of what I could do with VisBug, and theyâre gonna be like âMulti-select over here, select this thing, do a couple commands, and BAM!â Theyâre gonna have rearranged this page, and restyled it⌠And youâre gonna be like, âWhat just happened?â So my tool basically still is surprising me with what it can do, but its original goal was simplicity. Thatâs why you double-click to change text, thatâs why you can drag an image in, and it just swaps⌠That stuff should have been available a long time ago, and I donât know why it wasnât.
Itâs also kind of funny - a lot of the toolâs functions are literally like the querySelectorAll.style.whatever that we write every day⌠Itâs so simple the way that itâs built under the hood. AnywayâŚ