Smashing Podcast Episodio 37 con Adam Argyle: ¿Qué es VisBug?

En este episodio, estamos hablando de VisBug. ¿Qué es y en qué se diferencia de la variedad de opciones que ya se encuentran en Chrome DevTools? Drew McLellan habla con su creador Adam Argyle para averiguarlo.

Mostrar notas

• Arenero y parque infantil VisBug
• Adán en Twitter
• Sitio personal de Adán
• VisBug en YouTube
• VisBug 101

Actualización semanal

• La plataforma de conferencias que usamos para nuestros eventos en línea: Hopin por Amanda Annandale
• Introducción a las consultas de contenedores CSS por Stephanie Eckles
• Patrones de diseño frustrantes que necesitan arreglo: Selector de cumpleaños por Vitaly Friedman
• Tree-Shaking: A Reference Guide por Átila Fassina
• Cómo mejoramos nuestro Core Web Vitals por Beau Hartshorne

Transcripción

Drew McLellan: es un ingeniero brillante, apasionado y punk con una adoración por la web, que prefiere usar sus habilidades para obtener la mejor UI y UX de su clase, y empoderar a quienes lo rodean. Ha trabajado en pequeñas y grandes empresas, y actualmente es un defensor de desarrolladores que trabaja en Google en Chrome. Es miembro del grupo de trabajo de CSS y creador de VisBug, una herramienta de depuración de diseño. Entonces, sabemos que conoce bien el diseño y la experiencia de usuario, pero ¿sabías que tiene más pares de chanclas que cualquier bípedo vivo? Mis grandes amigos, denle la bienvenida a Adam Argyle.

Adán Argyle: Hola.

Drew: Hola Adam, ¿cómo estás?

Adam: Oh, estoy destrozando, lo sabes.

Drew: Es bueno escuchar eso. Así que quería hablarles hoy sobre su proyecto, VisBug y, en general, sobre el concepto detrás de la depuración del diseño y cómo podría encajar en los flujos de trabajo del proyecto. Quiero decir, hemos tenido herramientas de depuración de navegadores enfocadas en desarrolladores durante mucho tiempo, quiero decir, probablemente más de una década ahora. Pero obviamente están muy enfocados en el código. Entonces, ¿qué tiene de diferente VisBug? ¿Y cuál es el tipo de problema que está tratando de resolver?

Adán: Impresionante. Sí, el problema principal en el que está arraigado es que, como ingeniero front-end, trabajo con diseñadores todo el tiempo, y siempre me encantó este momento en el que nos sentamos y decía: “Está bien. Estoy haciendo los toques finales. Tenemos uno o dos días más hasta que nos desplieguemos. Entonces, diseñador, siéntese y ¿criticaría esto? Quiero que abras mi versión de host local en tu navegador y en tu teléfono, o lo que sea, y me hables sobre lo que ves”.

Adam: Y después de hacer esto durante muchos años y siempre amando esta interacción, comencé a sentirme culpable después de un tiempo por lo comunes y simples que eran las tareas. Serían como, “Un píxel aquí abajo. Margen de cinco píxeles aquí. Y siempre eran liendres y empujones, y liendres y empujones al espaciado y al tipo. Quiero decir, rara vez fue como, "Ooh, espera un minuto mientras paso 30 minutos cambiando algunos angulares, o lo que sea, para ajustar mi DOM para que el DOM pueda admitir tu solicitud", o lo que sea.

Adam: Por lo general, eran cosas pequeñas. Y luego terminé haciendo una encuesta, y encuesté a todos estos diseñadores en Google. Y yo estaba como, "Cuando abres DevTools, ¿qué haces?" Y fue un poco rotundo que solo necesitan lo básico. Y así nació, yo estaba como, “Esto debería ser más fácil. No deberías tener que abrir el capó del Ferrari, mover una parte del motor, solo para cambiar el color de los asientos del automóvil. No es justo. Debería poder tocar los asientos del automóvil y cambiar el color, como una herramienta de diseño”. Yo estaba como, "Algo podría facilitar este flujo de trabajo". Y yo estaba como, "Está bien, supongo que piratearé algo para ver si puedo crear la solución".

Adán: Y así fue como empezó todo. Realmente comenzó con el espaciado y luego con la tipografía. Y una vez que tuve un mecanismo de selección que emulaba las herramientas de diseño, fue como, "Bueno, ¿qué más puedo hacer?" Y siguió adelante desde allí. Pero sí, nacido en ese momento.

Drew: Entonces, la idea es que el cliente te pida que hagas el logo más grande, y VisBug ayuda al navegador a comportarse más como una herramienta de diseño para hacer ese tipo de ajustes. Así que más cerca de algo como Illustrator, Photoshop, Figma o cualquiera de estos tipos de cosas.

Adán: Sí. Ese caso de uso también es bueno. Porque podrías estar con un cliente y decir: "Oh, nos encanta esto", es tan clásico, "nos encanta el diseño, pero ese color azul es difícil para nosotros". Y tú estás como, "¿En serio?" Esto es como, las personas pueden enviar un formulario y puedes ganar dinero, pero ¿quieres hablarme sobre el azul en este momento? Y normalmente crearía un ciclo completo. El PM diría: "Está bien, eliminaremos su solicitud y luego la enviaremos a diseño".

Adam: Pero si el diseñador está allí y es su navegador el que lo muestra, dirían: “Está bien. Bueno, simplemente haré clic en la cosa y cambiaré el color”. Y puede eliminar un ciclo completo de trabajo simplemente creando un prototipo del cambio allí en el navegador. Así es. Es más eficaz contra un producto existente, ¿verdad? Porque es una herramienta de depuración. No es necesariamente una herramienta de generación. No crea un sitio para usted. Puede, pero es un poco incómodo.

Drew: Técnicamente es una extensión que instalas en un navegador Chrome. ¿Está bien?

Adán: Sí. Y es una extensión. Cuando lo ejecuta, descarga un archivo JavaScript que dice: "Aquí hay un elemento personalizado llamado VisBug". Y luego pones el elemento DOM, vis-bug en la página. Y puf, solo tomo ese momento y lo convierto en una barra de herramientas, y empiezo a escuchar eventos en la página. Escucho sus eventos de desplazamiento y escucho sus eventos de clic. Y trato de hacer todo lo posible para interceptarlos y no competir con su página principal.

Adam: Pero sí, esa es la esencia de... La única razón por la que es una extensión es porque es fácil de poner en tu página. Aunque en este punto tiene algunas configuraciones ahora que vienen con usted en todos los navegadores. Pero sigue siendo en su mayoría, 99.9%, un elemento personalizado sin dependencias. Creo que me gusta la biblioteca de colores que uso, y por lo demás es todo vainilla. Si.

Drew: Supongo que así fue como empezó Firebug, ¿no? Como una extensión de Firefox en el pasado.

Adán: Sí. Por eso se llama VisBug. Está muy inspirado en Firebug pero para diseñadores visuales.

Drew: Ah. Aquí vamos. Quiero decir, este no es quizás el formato ideal, siendo un podcast de audio, para hablar de una herramienta visual. Pero explíquenos, si lo desea, algunos de los tipos de herramientas y opciones que le brinda VisBug.

Adán: Absolutamente. Entonces, una de las primeras cosas que hace VisBug, y también puedes, si estás en casa o en una computadora, puedes ir a visbug.web.app y probar VisBug sin la extensión, ¿verdad?

Drew: Ah.

Adam: Es un componente web, así que cargué una página web aquí en visbug.web.app que parece tener un montón de tableros de arte y luego, por supuesto, VisBug precargado. Y el objetivo de este sitio es permitirte jugar, explorar y eliminar. Creo que la tecla Eliminar es una de las herramientas más satisfactorias para empezar. Eres como, "¿Qué puedo hacer con una página?" Y dices: "Bueno, puedo destruirlo".

Adam: Y lo hice para que puedas mantener presionado eliminar, encontrará el siguiente... Lo cual es bastante difícil en una eliminación. Eliminas algo y selecciona al siguiente hermano. Entonces seleccionará al próximo hermano para siempre. Si mantiene presionado eliminar hasta que elimine todo... De todos modos, muy satisfactorio. Presiona actualizar y todo regresa. Pero la primera herramienta con la que se envía VisBug, así que cuando la inicias, es la herramienta de guías. Y solía sostener literalmente el papel en mi pantalla, o buscaba una extensión del sistema que me permitiera marcar cosas y crear líneas.

Adam: Porque, sí, la alineación se vuelve muy óptica en cierto punto para muchos diseñadores, ¿verdad? No quieren, necesariamente, alineación matemática, ¿verdad? Esta es la razón por la que la tipografía tiene interletraje óptico. No es interletraje matemático. Este es el interletraje humano. Y, por lo tanto, la herramienta de guías se basa en que muchos de los problemas que ocurren con un diseñador se están acercando a las cosas, verificando la alineación. ¿Es bueno el espaciado?

Adam: Esa es la segunda cosa que hace la herramienta de guías. Cuando lo inicias y pasas el cursor sobre las cosas, verás que el elemento sobre el que estás pasando tiene una pequeña caja a su alrededor. Y luego aparecen guías discontinuas, como lo harían normalmente las reglas. Y al igual que en Sketch y Zeplin, donde pasas el mouse por encima y obtienes estas guías, es el mismo concepto, solo vive en tu página. Y si hace clic en algo y luego se desplaza a un nuevo destino, obtiene herramientas de medición. Y las herramientas de medición están en píxeles, y están calculadas... Visualmente, cuántos píxeles hay entre ellas. No lo que dijo alguien. No es sumar todo el espacio, es solo que haces clic en esta cosa y está tan lejos de esa otra caja.

Adam: Y creo que eso se vuelve realmente útil, porque puede mantener presionada la tecla Mayús y continuar haciendo clic, y esencialmente verificar que tiene el mismo espacio entre cinco íconos. Y son sólo un par de clics. No es necesario que sepa código, simplemente inicie VisBug, desplace el mouse, haga clic, haga clic y haga clic, y verá que, “Oh, mire, lo es. Si. 15 píxeles entre cada uno de estos”. O a veces obtienes algo que es un poco molesto, haces clic en un cuadro y luego haces clic en su cuadro principal y te das cuenta de que su distancia superior es nueve y la inferior es ocho. Y dices: “¿Cómo voy a centrar esto? Está de alguna manera en el medio”. Y sacude el puño.

Adam: Pero al menos puedes verlo bien y fácilmente con la herramienta de guías. Así que sí, esa es la herramienta de guías.

Drew: Definitivamente he estado allí, sosteniendo pedazos de papel en la pantalla. Y también, el otro truco que usaría es abrir otra ventana del navegador y usar el borde de la ventana para alinear los elementos. Y luego trata de mantener todo en el lugar correcto para que, a medida que cambia el código y actualice, todo siga alineado. Sí, no es una forma ideal de trabajar, entonces.

Adam: No es una forma ideal de trabajar. Sí. Y está el siguiente... Entonces, oh, y la primera versión de eso era muy vaga. No se rompió, solo levantó una cruz, que es una característica que volveré a agregar más adelante. Entonces, algunos usuarios dicen: “Oye, me encanta el ajuste, es como mis herramientas de diseño. Pero, ¿y si quiero una medida suelta? ¿O quiero hacer una letra, quiero medir una letra, no su buzón? Y así, bueno, esta herramienta de guías podría cambiarse muy fácilmente para tener una tecla modificadora.

Adam: Así que aquí es donde VisBug se vuelve un poco diferente, pero también con suerte familiar, es que tiene muchos modificadores de teclas de acceso rápido. Entonces, al igual que si ves a un diseñador profesional, son muy expertos en teclas de acceso rápido. Y están presionando teclas de acceso rápido aquí, acercando el zoom, presionando teclas de acceso rápido allá, y simplemente haciendo todo el empujón desde su teclado. Entonces, VisBug está muy centrado en el teclado en la forma en que cambias las cosas.

Adam: También se debe a que VisBug permite selecciones múltiples y puede cambiar el espacio de 100 elementos al mismo tiempo. Y lo hace relativamente. De todos modos, tiene un par de peculiaridades interesantes, pero el teclado en un concepto modificador es realmente importante. Y puede mantener presionada la opción, cambiar o comandar en muchas de las herramientas y obtener algo diferente, u obtener un nuevo tipo de función allí.

Drew: Así que es una de esas herramientas en las que realmente vale la pena aprender los atajos de teclado.

Adán: Lo hace. Entonces, cuando inicie VisBug y pase el mouse sobre uno de los íconos de herramientas, obtendrá un desglose. Muestra un pequeño menú flotante, dice la tecla de acceso rápido para elegir esta herramienta y le dice qué puede hacer y qué interacciones debe hacer para obtenerlos. Entonces, la herramienta de guías dice: “Guías de elementos, simplemente desplace el cursor. Mida algo, haga clic y luego coloque el cursor sobre algo nuevo. Las medidas adhesivas son shift más clic para que persistan”.

Adam: Y estas guías también son muy buenas para hacer capturas de pantalla. Entonces, si está revisando un PR, incluso como un ingeniero de front-end, o tal vez un diseñador revisando un PR, esta puede ser una forma realmente poderosa para que ingrese allí y, sí, tenga una inspección de alta fidelidad. Lo que nos lleva a la siguiente herramienta. ¿Quieres saber sobre la próxima herramienta?

Drew: Sí, claro. Vamos a por ello.

Adán: Impresionante. La siguiente es la herramienta de inspección. Y este es como... Los diseñadores por lo general, no quieren todo el CSS, ¿verdad? Cuando esperan con… Casi digo Firebug, pero Chrome DevTools, obtienes la lista completa, ¿verdad? Seleccioné este H1 y aquí está todo hasta la hoja de estilo del navegador. Y el diseñador dice: “¿El navegador qué? ¿El navegador tiene una hoja de estilo?

Drew: Abajo en la parte inferior turbia de ese panel de desplazamiento.

Adam: El fondo turbio, ¿verdad?

Drew: Sí.

Adam: Es como si quitaras todas las capas y luego dijeras: "Ooh, ya no me gustan estas capas". Y la herramienta de inspección aquí dice: “Ah, diseñadores, sé lo que quieren. Es solo el color del borde”. Básicamente, solo muéstrame algo si es único, así que no me cubras solo con propiedades CSS. Y lo que más me interesa es el color, la tipografía y el espaciado. Así que voy a ver los márgenes, la altura de las líneas, la familia de fuentes es muy importante, ¿verdad? Hay una extensión completa solo para decirle cuál es la familia de fuentes en una página.

Adam: En VisBug, eso es solo una línea de pedido en la herramienta de inspección. Simplemente inicie VisBug, presione inspeccionar y pase el mouse sobre cualquier tipografía y le dirá la familia de fuentes. Así que sí, trata de hacer que un diseñador se concentre en lo que emerge, sí.

Drew: Entonces esa herramienta no muestra ningún estilo heredado. ¿Está bien?

Adán: Eso es correcto. A menos que sean heredados y únicos. Así que si ellos... Un color de texto o algo así, si el color de texto no es literalmente la palabra heredar, les dirá que es un valor calculado, que es algo interesante.

Drew: Sí, eso es realmente útil solo... Sí. Te ayuda a concentrarte en las cosas que literalmente se aplican a esa única instancia de algo, que obviamente es lo que querías cambiar. Quiero decir, supongo que esto podría ser muy útil, todas estas herramientas serían muy útiles, como mencionaste, para obtener comentarios de las partes interesadas. Y una especie de trabajo interactivo con un cliente.

Drew: Supongo que funcionaría igual de bien con el uso compartido de la pantalla, como tenemos que hacer en estos días, cada vez más. No tiene que estar sentado frente a una computadora con alguien, podría estar sentado al otro lado de una llamada y compartir su navegador y hacerlo de esa manera. Supongo que sería una forma bastante efectiva de obtener comentarios cuando un cliente no puede señalar la pantalla y decir:

Adán: Definitivamente.

Adam: Siempre es mágico cuando conviertes la página web activa en lo que parece una mesa de trabajo de Zeplin. Alguien dice: "¿Qué... acabamos de ir a un lugar nuevo?" Y dices: “No, este es tu producto. Simplemente estamos interactuando con él muy visualmente”. Sí, puede ser muy agradable.

Drew: ¿Hay otros casos de uso interesantes en los que haya visto VisBug o que se le hayan ocurrido que podrían ser interesantes?

Adán: Sí. Entonces, sí, hay tantos que es un poco difícil comenzar. Oh, uno que es importante es la comunicación de desarrollador a desarrollador. VisBug trabaja sobre los valores calculados. Por lo tanto, no mira sus valores creados. Y eso puede ser muy bueno, porque estás midiendo e inspeccionando el resultado final absoluto en la forma en que se calcularon los píxeles en la pantalla. Y eso puede ser muy bueno, tener una conversación de esa manera, mientras trabajas en los resultados, a diferencia del lado de la autoría.

Adam: Y puedes volver a decir: "Está bien, bueno, ¿cómo nos equivocamos en el lado de la creación si esto es lo que obtuvimos visualmente?" En lo que también juega, la siguiente herramienta es la herramienta de inspección de accesibilidad. Por lo tanto, la herramienta de inspección facilita ver los estilos en un elemento y los desglosa de una manera muy amigable para el diseñador. La herramienta de accesibilidad lo ayuda a inspeccionar todos los elementos de una página y muestra las propiedades accesibles que tiene, lo que hace que, espero, sea más fácil verificar que se haya hecho algo.

Adam: Entonces, relaciones públicas... Y las cosas a menudo se crean. Así que esto es, de nuevo, de desarrollador a desarrollador, desarrollador diseñador, estás revisando interfaces. Es tan crítico. Si está mirando una interfaz y tiene curiosidad, VisBug tiene un caso de uso para usted allí. También hay casos de uso en los que puede ordenar un prototipo en el navegador. Hablamos de uno en el que el cliente quería probar el azul. Bien, ese es un escenario bastante fácil.

Adam: Pero también hay otros. Si presiona el comando D en VisBug, duplicará un elemento. Y no le importa lo que estés duplicando. Por lo tanto, podría duplicar un encabezado, agregar algo de espacio entre los dos encabezados y crear una variante en vivo en el navegador. Hace doble clic en el texto del encabezado y se convierte en un campo de texto editable, prueba un nuevo título y ve cómo encaja. Vaya a ajustar un poco el espacio y se ahorrará todo este trabajo de desarrollador, encontrando un archivo fuente y todo ese tipo de cosas, y simplemente...

Adam: Así que sí, puede ayudarte a explorar y verificar. Es un poco extraño... Quiero decir, son muchas de las cosas que hace DevTools, ¿verdad? Aparece una vez que haya terminado, en realidad no le proporciona el código fuente muy a menudo, no es muy frecuente que copie el código de DevTools. Puede copiar un par de valores clave. Como, "Oh, cambié este estilo". Pero sí, de todos modos.

Drew: Mm-hmm (afirmativo). Si. Puedo pensar en una especie de casos particularmente visuales en los que es posible que desee, mencionó, duplicar elementos. Es posible que desee tomar una sección completa de la página y duplicarla para simular cómo sería si hubiera mucho más contenido del que esperaba.

Adán: Sí. Ese es el caso de uso de prueba de caos.

Drew: Sí.

Adán: Absolutamente.

Drew: Que es algo con lo que todos tenemos que lidiar, diseñando con una especie de sistemas basados ​​en CMS y todo ese tipo de tareas divertidas.

Adam: Sí, ese también es un caso de uso crucial. Porque lo hago para... Sí, titulares, como dije. Simplemente haces doble clic en un texto y yo golpeo el teclado. Bla, bla, bla, bla, y golpea un montón de espacios, bla, bla. Y yo estoy como, "Bien, ¿cómo te fue con el diseño? Oh, lo hizo bien. Está bien, bien, puedo pasar a lo siguiente. ¿Qué sucede si duplico esto cuatro veces? ¿Todavía hay espacio entre todo? ¿Fluye al lado del siguiente artículo?”

Adam: Puede ser muy bueno para esa simulación del caos de contenido. Título muy corto, títulos muy largos, no tiene amigos, tiene un millón de amigos. ¿Cómo maneja estos casos de uso en la interfaz de usuario? Sí.

Drew: Así que funciona con cualquier contenido basado en navegador. Entonces, ¿las PWA y las páginas web normales?

Adán: Sí, lo hace. Entonces, si tiene Spotify instalado, hago esto todo el tiempo, tengo Spotify instalado y solo diré: "Spotify, parece que eres una aplicación imposible de inspeccionar". ¿Pero adivina que? A VisBug no le importa. VisBug superpone todas tus cosas, inspecciona toda la tipografía. Hice un tema ligero para... Oh, tengo un tweet en alguna parte donde hice un tema ligero de Spotify.

Adam: Oh, este fue otro caso de uso, lo siento, para crear prototipos de color. Puedo crear un tema ligero en el producto en sí sin tener que ensuciarme con un montón de hojas de calcomanías, ¿verdad? Entonces, existe esta importante mentalidad uniforme, me encantaría que VisBug ayudara a la gente a entrar en lo que es, usar su producto como un patio de recreo. Usa eso como... Es tan real. Es más real que tus composiciones de diseño. Así que pasa más tiempo allí. Creo que encontrará que puede tomar decisiones de diseño más efectivas trabajando en su producto real.

Drew: Y el caso de la accesibilidad también es particularmente interesante, porque a menudo, particularmente en estos días, trabajamos mucho en bibliotecas de componentes y observamos pequeños componentes de una página. Y pasar menos tiempo mirando todos los integrados juntos para crear el tipo de vistas con las que un cliente realmente interactúa. Y se vuelve realmente difícil vigilar ese tipo de detalles más finos como cosas de accesibilidad, atributos, que no son visibles en la página.

Drew: Es muy difícil vigilar cosas que no son visibles. Así que aquí es donde las herramientas realmente pueden ayudar a poder inspeccionar algo y ver que, sí, tiene las funciones correctas y es...

Adán: Lo hace. Ese es el caso de uso exacto. Quiero un PM para poder ir a verificar estas cosas. Quiero que un diseñador pueda ver la accesibilidad y no tener que abrir las herramientas, encontrar el nodo DOM, todo está aplastado en el panel de elementos y se ve extraño. Que simplemente dice: "Aquí están los atributos del área, aquí está el título, si existe". También hay algunas otras herramientas de accesibilidad para. VisBug se envía con el icono de búsqueda. El ícono de búsqueda tiene varias formas de interactuar con él.

Adam: Primero consulta la página. Entonces, si conoce el tipo de elemento o el nombre de la clase de elemento que desea, puede buscarlo, por lo que no tiene que encontrarlo con el mouse. Pero eso también tiene comandos de barra. Entonces, hay complementos en VisBug, y ejecutarán scripts en la página. Entonces, si alguna vez ha tenido un marcador en el que ha guardado tres o cuatro... Dice: "Voy a usar este porque resalta todos los bordes y me muestra mis casillas". Es como un truco de depuración o algo así.

Adam: Probablemente sea un complemento de VisBug. Así que inicias VisBug, presionas la barra inclinada y obtendrás la función de autocompletar, y te mostrará todos los complementos diferentes. Y hay algunos de accesibilidad que son realmente buenos que superponen errores, y varias cosas por el estilo. Así que estoy de acuerdo. La accesibilidad debería ser más accesible. Eso es tonto de decir. Pero tiene que estar más cerca del cinturón de herramientas. Y creo que a veces está demasiado lejos, y tal vez por eso se pierde. Así que espero que si es un poco más directo y centrado, y más fácil, se revise más. Si.

Drew: Y es interesante que digas que VisBug funciona con el tipo de valores calculados de las cosas, como los colores. Entonces, ¿eso significa que si tiene varios elementos en capas que tienen diferentes niveles de opacidad, podrá medir el color exacto que se muestra en la pantalla en lugar de...

Adán: Oh.

Drew: … mirando los elementos individuales y tratando de resolverlo de alguna manera?

Adam: Esa es una muy buena pregunta. Así que creo que, si entiendo bien la pregunta, que es una dificultad clásica en el front-end, sí, ¿cómo sabes si tienes una palabra de texto medio opaca, cuál es su color sobre gris versus sobre blanco? ? ¿Y cómo sabes su contraste? Ahora mismo, no lo sabemos. Así que VisBug sabe el color, y dirá, "50% gris", o el color que sea que tengas ahí. Pero no conoce nada más inteligente que eso. No es capaz de…

Adam: Creo que lo que tendrías que hacer en ese caso es crear un lienzo, pintar todas las capas allí y luego usar un cuentagotas o un... Así que lo renderizarías en un lienzo, harías que todos se rompan en un una sola capa pintada, y luego extraiga el valor de un solo píxel para ver cuál es su gris final calculado después de que se haya superpuesto en las otras cosas.

Adam: Creo que alguien lo especificó, o tal vez lo tengo como un problema de GitHub que sería bueno. Porque VisBug podría facilitar esto, 100%. VisBug, detrás de escena, ya lo he hecho con métricas de texto, donde pasas el mouse sobre las cosas y te brinda información increíble sobre las fuentes. Es casi demasiada información, como la altura x y la altura del límite, pero va aún más. Y es como, "Ooh, estoy un poco desconectado en cierto punto". Así que tengo que averiguar cómo encontrar la señal frente al ruido allí.

Adam: Pero sí, me gusta este proceso de pensamiento, porque deberíamos tener una herramienta que haga eso. Y si sabemos cómo calcularlo, podemos enseñarle a VisBug a hacerlo, y esa sería una característica realmente interesante, el color calculado relevante para la opacidad. Me encanta.

Drew: Sí, quiero decir, es el tipo de caso estándar de tener texto contra un fondo en el que no estás seguro de si el contraste es suficiente para pasar los requisitos de accesibilidad. Y tal vez no lo sea, tal vez sea un contraste demasiado bajo y luego desee modificar los valores hasta que llegue al punto en que el contraste sea bueno, pero no se desvíe demasiado de lo que el cliente quería inicialmente en términos de colores de la marca. y cosas.

Adam: A eso lo llamo bache, bache hasta que pase.

Drew: Sí.

Adam: Porque eso es lo que se siente. Estoy como, "Ooh, estoy un poco corto en el puntaje". Así que es como, iré a mi ligereza de HSL y solo voy a chocar, chocar, chocar, y veré cómo los pequeños números aumentan hasta que es como, "Ding", obtuve una marca de verificación verde. Estoy como, "Está bien, genial". Y sí, a veces, algo de ese color no es genial. Entonces, ¿ha estudiado gran parte del trabajo de accesibilidad perceptual 3.0 que se está llevando a cabo? Para que ya no tengamos AA o AAA, tendremos un número e incluye cosas como la delgadez de la fuente. Entonces, si es una fuente delgada, obtendrá una puntuación más baja, si es una fuente gruesa, va... Porque hay mucho que contrasta.

Drew: Sí, no, no había visto nada de eso, pero eso suena...

Adam: De todos modos, es algo realmente genial para explorar.

Drew: Eso suena fascinante, sí. Tendré que encontrar a alguien con quien hablar de eso. Ese es otro episodio. Entonces, quiero decir, estoy seguro de que algunos desarrolladores podrían argumentar que todo lo que VisBug está haciendo puede hacerlo a través del panel CSS en DevTools. Y creo que es bastante justo, pero probablemente no entiende el punto, en eso, sí, estás manipulando CSS cuando estás haciendo cambios, pero está poniendo una especie de interfaz de usuario enfocada en el diseñador en la parte superior en lugar de una interfaz enfocada en el desarrollador. ¿Es esa una caracterización justa de eso?

Adam: Esa es realmente justa. Y honestamente, las mejores ideas pasan de VisBug a DevTools. Y ya lo tienen. Entonces, VisBug, si presiona la opción de comando C en cualquier elemento, toma todos los estilos calculados, al menos eso es único. Nuevamente, es como, haremos unos que no solo le daremos todas estas propiedades heredadas. Pero los pone todos en su portapapeles, y puede pegar ese estilo en otro lugar, en una hoja de estilo, en un CodePen, y literalmente recrear el elemento con un par de clics.

Adam: Y ese tipo de interacciones se han abierto camino en DevTools, en ese panel de elementos. Sin embargo, hay otras cosas que no lo han hecho, a saber, DevTools es una herramienta de inspección de un solo nodo. Y VisBug sigue el mantra de la herramienta de diseño que es, no, debería poder seleccionar múltiples. Necesito poder editar masivamente, inspeccionar masivamente. Y entonces uso VisBug todo el tiempo para espaciar. Porque puedo resaltar varios elementos y ver el colapso del margen.

Adam: En DevTools nunca puedes verlo, porque solo puedes ver un nodo a la vez la mayor parte del tiempo, aunque hay una forma de mostrar múltiples márgenes, pero no es lo mismo. Y entonces, sí, tiene estos casos de uso de nicho que pueden ser realmente divertidos así. Otra es, si resalta un... Digamos que tiene un sistema tipográfico y tiene H1 a H7, como en un libro de cuentos o algo así, puede resaltarlos todos en VisBug, mantenga presionada la tecla Mayús, simplemente haga clic en todos ellos. Boop, boop, boop, boop, ve a la herramienta de tipografía y golpea arriba o abajo, y hace un cambio relativo a cada uno de ellos.

Adam: Así que cada uno de ellos subirá o bajará uno. Y eso no es algo que DevTools hace muy fácil. Y entonces, sí, tiene algunos superpoderes como ese, porque es un poco más agnóstico. Y está preparado para iterar siempre en una matriz. Si.

Drew: Entonces, ¿cuál fue el origen de VisBug? ¿Y ahora es solo un proyecto personal? ¿O es un proyecto de Google? O cuál es el estado de la misma?

Adán: Sí. Primero, el estado es, es un proyecto de Google. Su objetivo principal es ser un lugar para crear prototipos y explorar antes de que las cosas entren en DevTools. Al menos desde el lado de Google de las cosas. Pero desde mi lado personal, todavía lo veo como un lugar para hornear las tareas comunes, o para hornear algunas optimizaciones para realizar tareas comunes. Y solo para brindarle a una audiencia más amplia una forma de ver el DOM.

Adam: Realmente creo que DevTools es súper poderoso, pero es muy intimidante. Solo una pestaña puede tomar una carrera para aprender. Todavía estoy aprendiendo cosas en DevTools y las uso todo el tiempo. Y sí, esta es una especie de audiencia diferente en algunos aspectos. Son más los principiantes, las personas que ingresan, o tal vez incluso personas como PM, gerentes, que nunca tienen la intención de codificar pero están interesados ​​​​en el resultado. Y así les da, sí, solo herramientas ligeras para entrar allí.

Drew: Es un punto interesante el que mencionas, porque personalmente a menudo encuentro que me cuesta encontrar un flujo de trabajo cómodo para administrar todo este tipo de DevTools. Y tienes todos estos pequeños paneles claustrofóbicos, y puedes separarlos en otra ventana, pero luego tienes que hacer un seguimiento de dos ventanas diferentes. Y una vez que tiene algunas ventanas del navegador abiertas, no puede... Enfoca una y no sabe a qué DevTools pertenece.

Drew: Y luego, dentro de los propios paneles, es como una especie de salvaje oeste de convenciones de interfaz de usuario. Te desplazarás y las cosas comenzarán a hacer cosas extrañas que no esperabas. Y en términos de experiencia de usuario, siento que todo es un gran desastre.

Adán: Lo es. Si.

Drew: ¿Crees que eso es inevitable? ¿Puede ser mejor?

Adam: Definitivamente tengo pensamientos aquí. Y sí, creo que es bueno… Así que digamos que tienes un oyente en este momento que dice: “Soy bastante experto en DevTools. No creo que estén tan locos”. Yo diría: “Está bien, abre Android Studio o Xcode. Comience un proyecto y busque DevTools, busque el resultado. ¿Qué tan familiar te sientes en este momento? Probablemente muy extranjero. Estás viendo eso diciendo, “Esto es basura. ¿Por qué hacen esto? ¿Por qué está este panel aquí? Y tu mente comienza a correr con todas estas preguntas por qué y confusión.

Adam: Y es como, bueno, así es como todos se sienten la primera vez que abren DevTools. Así que tienes que ser realmente empático con eso.

Drew: ¿Es inevitable que... ¿Podemos hacerlo mejor? ¿O es solo el tipo de orden natural de las cosas?

Adam: Así que aquí está mi opinión actual sobre esto, es que creo que es muy fácil meterse en la complejidad. Y DevTools es una de esas cosas, son naturalmente complejas. No hay una buena interfaz de usuario para facilitar muchas de estas cosas. Muchas de estas cosas son construidas por desarrolladores. Y creo que los desarrolladores crean herramientas para desarrolladores está bien, porque van a tener... Si es la única manera, o incluso si es una buena manera, van a aprenderlo y serán buenos en y te sentirás cómodo con él.

Adam: Y todas las DevTools son un poco extrañas, porque están hechas para sus casos de uso extraños, ¿verdad? El desarrollo es extraño. Seamos honestos. Hacemos engranajes invisibles e invisibles de dos en cuatro, y construimos casas, básicamente, con partes invisibles, virtuales. Así que sí, necesitamos herramientas raras para ir a inspeccionar estas cosas y decirnos qué están generando.

Adam: Ahora, dicho esto, lo que hace VisBug, y lo que he estado moviendo lentamente las cosas a DevTools, son herramientas más pequeñas que están más enfocadas en comparación con una herramienta grande que dice hacer mucho. Creo que es difícil que las cosas se hagan muy bien. Y este es un argumento clásico, ¿verdad? Esto es todo estrellas, especialistas versus generalistas. Ninguno de los dos siempre va a ser perfecto.

Adam: Pero lo que VisBug está tratando de hacer es crear especialistas. Entonces, la herramienta de guías solo hace guías. Y esa herramienta nunca se filtra a las otras herramientas de la página. Y entonces estoy tratando de hacer eso más con DevTools, donde DevTools quiere ayudar más a los diseñadores, que es algo que VisBug ha ayudado a inspirar a DevTools a ver. Y la forma en que sigo introduciendo cosas es, en lugar de hacer un editor de cuadrícula, por ejemplo, donde puedes... "Toda la potencia de la cuadrícula en una superposición", ¿verdad? “Puedes agregar pistas, eliminar pistas, bla, bla, bla”.

Adam: Y yo digo: "Eso suena genial y también muy complejo". 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: Tengo un mod en el que, cuando inicias VisBug, toma todo el documento HTML y lo reduce a una mesa de trabajo. Parece una mesa de trabajo. Está flotando en una sombra en un espacio gris. Puedes desplazarte infinitamente a su alrededor. Así que puede alejarse del lienzo de su página y lo que le permite hacer es ver, digamos que tiene una página que es realmente larga y desea medir algo de arriba hacia abajo, bueno, puede hacerlo ahora mismo. , pero perderías el contexto a medida que avanzas.

Adam: Bueno, en este nuevo escenario de zoom de VisBug, mantienes presionada la opción o alt en tu teclado, usas la rueda del mouse o presionas más menos con tu comando y puedes hacer zoom en tu página web como si fuera una mesa de trabajo. Y trato de hacerlo tan perfecto como es. Así que entras y sales, te desplazas hacia abajo, entras y sales, mides desde el... Y a VisBug simplemente no le importa. Sigue dibujando superposiciones calculadas, puede cambiar el espaciado.

Adam: Porque creo que es muy importante, como diseñador, ver la vista de pájaro de tu página en vivo. Las animaciones todavía están jugando, ustedes. Las áreas desplazables siguen siendo desplazables, ¿verdad? Es bastante genial. Eres como, "Toda mi página en una sola vista". De todos modos, por lo que es casi hecho. Está dentro-

Drew: Suena extraño.

Adam: Es muy alucinante. Y está listo, solo necesito asegurarme de que funcione en todos los navegadores, porque obviamente está haciendo algunas cosas difíciles para que su página en vivo se sienta de esa manera. Pero sí.

Drew: Impresionante. Es... Quiero decir, supongo que VisBug se actualiza con bastante regularidad y está progresando. ¿Qué es lo que podríamos esperar ver en el futuro?

Adam: Sí, esa es definitivamente una de las funciones en las que estoy trabajando allí. Tengo una función en la que... Entonces, cuando haces clic en algo, obtienes una superposición con lo que parecen manijas, ¿verdad? Y es una especie de ilusión, se supone que te hace sentir cómodo. Y la intención es que eventualmente esos controles se puedan arrastrar. Pero tengo algunas cosas fundamentales que debo resolver primero, como que los elementos en el navegador no tienen un ancho. Entonces, si solo comienzas a agarrar el ancho, tengo que trabajar para que esa ilusión se sienta bien.

Adam: Y es posible que ni siquiera obtenga los resultados que desea, porque podría ser un elemento de nivel de bloque que está reduciendo el ancho y no está obteniendo el reflujo de un elemento al lado. Y te estarás preguntando por qué. Así que tengo prototipos en los que puedes arrastrar esquinas, arrastrar elementos. Pero realmente necesito concentrarme en cómo las herramientas de diseño están haciendo esto. Siempre tienen este botón de alternar. Y es como... Mira, ¿cómo se llama la palanca?

Adam: Pero es básicamente como encogimiento... Yo lo llamo envoltura encogible. Retractilar mi elemento, el ancho de este elemento es el ancho de su contenido, versus este es el ancho de mi elemento, pegar algo en él. Así que necesito algo así en el navegador, superpuesto en el elemento para que pueda elegir entre estos y tal vez incluso algo que le permita elegir entre bloque e integrado, para que pueda obtener los resultados que desea.

Adam: Pero, en última instancia, el objetivo aquí es que VisBug no quiera estar completamente controlado por teclado. Quiero que puedas arrastrar el espaciado. Si ve un espacio de 12 márgenes en la parte superior, debería poder alcanzarlo y agarrarlo, mientras que ahora tiene que presionar el teclado para especificar que el lado superior del cuadro necesita un margen adicional.

Adam: Y sí, tengo un par de peculiaridades que resolver, en términos de estrategia. Pero es en gran medida un objetivo acercarlo aún más a las herramientas de diseño. Y tal vez incluso me doblegue en eso. Es como, bueno, si quieres cambiar el ancho y vas a obtener un diseño extraño, siempre hay formas de salir de eso con VisBug, como la herramienta de posición que realmente te permite escapar del flujo. Así que el flujo está arruinando tu idea, la herramienta de posición te permite escapar.

Adam: Y entonces hay... Si alguien se volviera realmente inteligente con VisBug, sorprendería a la gente, porque es algo ilimitado, y es como, ¿qué puedes traer a la mesa? Tiene un elemento de expresión. Definitivamente hay tácticas expresivas. Pero de todos modos, en pocas palabras, la ilusión es que solo quiero hacerlo más y más y más pequeño. Quiero que la ilusión sea como: "Guau, realmente me siento como una herramienta de diseño".

Adam: Y luego, sí, algunas mejoras en la exportación estarían bien. Pero también sería bueno mejorar la exportación para DevTools, y eso realmente no nos detiene. Así que no lo sé. Hay un montón de problemas, definitivamente vota por ellos. Creo que una de las próximas grandes características que me encantaría hacer son las líneas verdes. Entonces, en lugar de solo mostrar superposiciones de accesibilidad al pasar el mouse para indicar realmente algunas cosas con líneas verdes, y exponer más, y mostrar más información, y no sé. Si.

Drew: Pensando en el proceso de creación de una extensión de Chrome como esta, quiero decir, suponiendo que todo esté implementado en JavaScript, ¿cuánto se parece al desarrollo web normal? Creación de una extensión de Chrome.

Adán: Esa es una buena pregunta. Es… Uf, esto es difícil. es peculiar En primer lugar, el entorno en el que puede iniciar su código no es el navegador. Realmente no te dan acceso completo allí. Puedes, si realmente te pones complicado con eso, en lo que VisBug tuvo que graduarse, este escenario aún más complicado. Entonces, en este momento, solía ejecutar en el... Esto se va a volver confuso muy rápido.

Adam: Porque hay varios sandboxes para su extensión, por cuestiones de privacidad. Y dificultan la ejecución de scripts en la página real, ¿verdad? Porque no desea que alguien envíe su formulario cuando inicie la cosa o algo así, enviándoselo a sí mismo o lo que sea. Podría ser realmente destructivo. Así que tiene algunas peculiaridades como esa. Hay un puente por el que tienes que pasar. Y uno de ellos que ha estado plagando a VisBug es que VisBug solía usar...

Adam: Todos son elementos personalizados, y los elementos personalizados le permiten pasarles datos enriquecidos como propiedad. Entonces estás diciendo customelement.foo=myrichobject, lleno de arreglos o lo que sea. Y el elemento personalizado solo obtiene eso como algunos datos en el nodo mismo. Pero como estoy en este pequeño y extraño mundo de caja de arena, si trato de configurar algo único como ese en mi objeto, esencialmente se filtra. Han establecido que ciertas cosas no pueden... Así que puedo pasar una cadena a mi elemento personalizado, pero no puedo pasarle un objeto enriquecido.

Adam: Pero sí, aparte de pequeñas peculiaridades como esa, una vez que logras el flujo, y si pasas el tiempo para obtener un escenario de resumen, será una hora más o menos de trabajo para que le des LiveReload en tu cosa , puede llegar a ser bastante natural. Creo que Firefox tiene, sinceramente, la mejor experiencia de desarrollo de extensiones. Si eres experto en la CLI, puedes activar algo con un comando y lo instala, te brinda estas características de LiveReload y te brinda herramientas de depuración. De alguna manera sostiene tu mano a través de él, puede ser realmente agradable.

Adam: Pero en última instancia, es un poco peculiar. Es por eso que hago mucho del trabajo en ese sitio de demostración que parece un montón de mesas de trabajo, porque realmente no necesito una página web real la mayor parte del tiempo, para hacer pruebas de VisBug, siempre que tenga mesas de trabajo que simular varios problemas, o tener cosas accesibles para mirar, y darme el contenido que necesito ver. Hago mucho del trabajo allí mismo en el navegador como si fuera una aplicación web normal. Entonces, la experiencia de desarrollo de VisBug es realmente fácil, a menos que esté tratando de probarlo en un navegador, y luego se vuelve un poco desordenado y lo que sea.

Drew: Esas son ideas muy interesantes. He estado aprendiendo todo sobre VisBug hoy, ¿qué has estado aprendiendo tú últimamente, Adam?

Adam: Todavía estoy mejorando mis habilidades con el trabajo. Así que quiero ser un hombre wok, y no estoy hablando del reproductor de casetes de los 90. Quiero voltear las verduras y hacer que se incendien un poco en el aire, cubrirlas con algunas especias deliciosas, y realmente chamuscar ese ajo y hacerlo crujiente y delicioso. Y luego colóquelo en una pequeña cama de arroz y deslícelo hacia usted y vea lo que piensa.

Adam: Así que estoy emocionado por el verano en este momento, porque eso significa que puedo sacar el wok y volver a ese ambiente de cocina caliente y acelerado, y es muy divertido.

Drew: Impresionante. Eso suena delicioso. Si usted, querido oyente, desea saber más de Adam, puede seguirlo en Twitter, donde es @argyleinc, y encontrar su sitio web personal en nerdy.dev. Si desea probar VisBug, puede encontrarlo en Chrome Web Store y puede probar la versión sandbox en visbug.web.app. Gracias por acompañarnos hoy Adam. ¿Tuviste alguna palabra de despedida?

Adam: No, fuiste muy amable. Esto fue muy dulce. Gracias por invitarme, realmente lo aprecio.