تحطيم بودكاست الحلقة 37 مع آدم أرجيل: ما هو VisBug؟

في هذه الحلقة نتحدث عن VisBug. ما هو وكيف يختلف عن مجموعة الخيارات الموجودة بالفعل في Chrome DevTools؟ درو ماكليلان يتحدث إلى مبتكرها آدم أرجيل لمعرفة ذلك.

وتظهر الملاحظات

• صندوق رمل VisBug وملعب
• آدم على تويتر
• موقع آدم الشخصي
• VisBug على موقع يوتيوب
• VisBug 101

تحديث اسبوعي

• منصة المؤتمر التي نستخدمها لأحداثنا عبر الإنترنت: Hopin by Amanda Annandale
• كتاب تمهيدي عن استفسارات حاوية CSS بقلم ستيفاني إيكلز
• أنماط التصميم المحبطة التي تحتاج إلى إصلاح: منتقي عيد الميلاد بواسطة فيتالي فريدمان
• اهتزاز الشجرة: دليل مرجعي بقلم tila Fassina
• كيف قمنا بتحسين حيوية الويب الأساسية الخاصة بنا بواسطة Beau Hartshorne

نسخة طبق الأصل

درو ماكليلان: إنه مهندس ذكي وعاطفي وغيض ولديه عشق للويب ويفضل استخدام مهاراته لأفضل واجهة مستخدم وتجربة مستخدم وتمكين من حوله. لقد عمل في شركات صغيرة وكبيرة ، وهو حاليًا مدافع عن مطور يعمل في Google على Chrome. إنه عضو في مجموعة عمل CSS ومنشئ VisBug ، أداة تصحيح أخطاء التصميم. لذلك نحن نعلم أنه يعرف طريقه نحو التصميم وتجربة المستخدم ، لكن هل تعلم أنه يمتلك أزواجًا من النعال أكثر من أي شخص يعيش على قدمين؟ أصدقائي المحطمون ، يرجى الترحيب بآدم أرجيل.

آدم أرجيل: مرحبًا.

درو: مرحباً آدم ، كيف حالك؟

آدم: أوه ، أنا أحطم ، أنت تعرف ذلك.

درو: من الجيد سماع ذلك. لذلك أردت أن أتحدث إليكم اليوم عن مشروعك ، VisBug ، وبشكل عام ، حول المفهوم الكامن وراء تصحيح أخطاء التصميم وكيف يمكن أن يتناسب مع سير عمل المشروع. أعني ، لدينا أدوات تصحيح أخطاء المتصفح التي تركز على المطور لفترة طويلة ، أعني ، ربما أكثر من عقد الآن. لكن من الواضح أن هؤلاء يركزون بشكل كبير على الكود. إذن ما هو المختلف حول VisBug؟ وما هو نوع المشكلة التي تحاول حلها؟

آدم: رائع. نعم ، المشكلة الرئيسية التي تكمن في جذورها هي ، كمهندس واجهة أمامية أعمل مع مصممين طوال الوقت ، وكنت دائمًا أحب هذه اللحظة التي جلسنا فيها وأقول ، "حسنًا. أنا أصنع اللمسات الأخيرة. أمامنا يوم أو يومان آخران حتى ننتشر. أيها المصمم ، اجلس ، وهل ستنتقد هذا؟ أريدك أن تفتح إصدار المضيف المحلي الخاص بي على متصفحك وعلى هاتفك ، أو أي شيء آخر ، والتحدث معي بشأن ما تراه. "

آدم: وبعد القيام بذلك لسنوات عديدة وحب هذا التفاعل دائمًا ، بدأت أشعر بالذنب نوعًا ما بعد فترة بسبب مدى شيوع المهام وبساطتها. سيكونون مثل ، "بكسل واحد في الأسفل هنا. خمسة بكسل الهامش هنا. " ودائما كان الصئبان والدفعات ، والصئبان والدفعات إلى التباعد والكتابة. أعني ، نادرًا ما كان الأمر مثل ، "أوه ، انتظر دقيقة بينما أقضي 30 دقيقة في تغيير بعض الزوايا ، أو أي شيء آخر ، لضبط DOM الخاص بي حتى يتمكن DOM من دعم طلبك ،" أو أيًا كان.

آدم: كانت عادة أشياء صغيرة. وبعد ذلك انتهيت من إجراء استطلاع ، وقمت باستطلاع رأي كل هؤلاء المصممين في Google. وكنت مثل ، "عندما تفتح DevTools ، ماذا تفعل؟" وكان من المدوي أنهم يحتاجون فقط إلى الأساسيات. وهكذا ولدت من رحم ، كنت مثل ، "يجب أن يكون هذا أسهل. لا يجب أن تضغط على غطاء محرك السيارة الفيراري ، وتحريك جزء كبير من المحرك ، فقط لتغيير لون مقاعد السيارة. هذا ليس عدلا. يجب أن تكون قادرًا فقط على لمس مقاعد السيارة وتغيير اللون ، تمامًا مثل أداة التصميم ". كنت مثل ، "شيء ما يمكن أن يسهل سير العمل هذا." وكنت مثل ، "حسنًا ، أعتقد أنني سأقوم باختراق شيء ما لمعرفة ما إذا كان بإمكاني إنشاء الحل."

آدم: وهكذا بدأ كل شيء. لقد بدأت حقًا بالمسافات ثم الطباعة. وبمجرد أن أصبح لدي آلية اختيار أسفل أدوات التصميم التي تمت محاكاتها ، كان الأمر مثل ، "حسنًا ، ما الذي يمكنني فعله أيضًا؟" واستمر الأمر من هناك. لكن نعم ، ولدت في تلك اللحظة.

درو: الفكرة هي أن يطلب منك العميل تكبير الشعار ، ويساعد VisBug المتصفح على التصرف كأداة تصميم لإجراء تلك الأنواع من التعديلات. أقرب إلى شيء مثل Illustrator ، أو Photoshop ، أو Figma ، أو أي من هذه الأنواع من الأشياء.

آدم: بلى. حالة الاستخدام هذه جيدة أيضًا. لأنه يمكن أن تكون مع عميل ويقولون ، "أوه ، نحن نحب هذا" ، هذا كلاسيكي جدًا ، "نحن نحب التصميم ، ولكن هذا اللون الأزرق صعب علينا." وأنت مثل ، "حقًا؟" هذا مثل ، يمكن للأشخاص إرسال نموذج ويمكنك كسب المال ، لكن هل تريد التحدث معي عن اللون الأزرق الآن؟ وعادة ما تخلق دورة كاملة. سيقول رئيس الوزراء ، "حسنًا ، سنأخذ طلبك ثم نرسله للتصميم."

آدم: ولكن إذا كان المصمم موجودًا وكان متصفحه هو الذي يعرض ذلك ، فسيكون مثل ، "حسنًا. حسنًا ، سأقوم فقط بالنقر فوق الشيء وتغيير اللون ". ويمكنك القضاء على دورة كاملة من العمل بمجرد وضع نماذج أولية للتغيير في المتصفح. اذا هي كذلك. إنه أكثر فعالية ضد منتج موجود ، أليس كذلك؟ لأنها أداة تصحيح. إنها ليست بالضرورة أداة جيل. لا تنشئ موقعًا لك. يمكن ذلك ، لكنه محرج نوعًا ما.

درو: من الناحية الفنية ، فهو امتداد تقوم بتثبيته في متصفح Chrome. هل هذا صحيح؟

آدم: نعم. وهو امتداد. عند تشغيله ، يقوم بتنزيل ملف JavaScript يقول ، "هذا عنصر مخصص يسمى VisBug." ثم تضع عنصر DOM ، vis-bug على الصفحة. وأخذ هذه اللحظة وأقوم بتحويلها إلى شريط أدوات ، وأبدأ في الاستماع إلى الأحداث على الصفحة. أستمع إلى أحداث التحليق الخاصة بك ، وأستمع إلى أحداث النقر الخاصة بك. وأحاول أن أبذل قصارى جهدي لاعتراضهم ، وعدم التنافس مع صفحتك الرئيسية.

آدم: لكن نعم ، هذا هو جوهر… السبب الوحيد لكونه امتدادًا هو أنه من السهل وضعه على صفحتك. على الرغم من أنه في هذه المرحلة يحتوي على بعض الإعدادات التي تأتي معك عبر المتصفحات. لكنه لا يزال في الغالب ، 99.9٪ ، عنصرًا مخصصًا بدون تبعيات. أعتقد أنني أحب مكتبة الألوان التي أستخدمها ، وإلا فهي كلها مجرد فانيليا. نعم.

درو: أعتقد أن هذه هي الطريقة التي بدأ بها Firebug ، أليس كذلك؟ كإمتداد لفايرفوكس مرة أخرى في اليوم.

آدم: نعم. لهذا السبب يسمى VisBug. إنه مستوحى كثيرًا من Firebug ولكن لمصممي المرئيات.

درو: آه. هناك نذهب. أعني ، ربما لا يكون هذا هو التنسيق المثالي ، كونه بودكاست صوتيًا ، للحديث عن أداة بصرية. لكن قم بتشغيلنا من خلال ، إذا صح التعبير ، بعض أنواع الأدوات والخيارات التي يوفرها لك VisBug.

آدم: بالتأكيد. إذن ، أحد الأشياء الأولى التي يقوم بها VisBug ، ويمكنك أيضًا ، إذا كنت في المنزل أو على جهاز كمبيوتر ، يمكنك الانتقال إلى visbug.web.app ، وتجربة VisBug بدون الامتداد ، أليس كذلك؟

درو: آه.

آدم: إنه مكون ويب ، لذا قمت بتحميل صفحة ويب لك هنا على visbug.web.app التي تبدو وكأنها تحتوي على مجموعة كاملة من اللوحات الفنية ، ثم بالطبع ، تم تحميل VisBug مسبقًا. والهدف من هذا الموقع هو السماح لك باللعب والاستكشاف والحذف. أعتقد أن مفتاح الحذف هو أحد أكثر الأدوات إرضاءً كبداية. أنت مثل ، "ماذا يمكنني أن أفعل لصفحة؟" وأنت مثل ، "حسنًا يمكنني تدميرها."

آدم: لقد قمت بذلك حتى تتمكن من إجراء الحذف ، وسوف تجد التالي… وهو أمر صعب جدًا عند الحذف. تحذف شيئًا ما ويختار الأخ التالي. لذلك ستختار الشقيق التالي إلى الأبد. إذا استمررت في الحذف حتى تحذف الكل… على أي حال ، فهذا مرضٍ للغاية. ضرب تحديث ويعود كل شيء. لكن الأداة الأولى التي يأتي معها VisBug ، لذلك عند تشغيلها للتو ، هي أداة الأدلة. وكنت أعلق الورق على شاشتي حرفيًا ، أو سأحصل على امتداد للنظام يسمح لي بفرز تمييز الأشياء وإنشاء خطوط.

آدم: لأنه ، نعم ، تصبح المحاذاة بصرية للغاية في نقطة معينة لكثير من المصممين ، أليس كذلك؟ لا يريدون بالضرورة محاذاة رياضية ، أليس كذلك؟ هذا هو السبب في أن الطباعة لها تقنين بصري. انها ليست الرياضيات المسافة بين الحروف. هذا هو المسافات بين البشر. وبالتالي فإن أداة الأدلة متجذرة في أن الكثير من القمل التي تحدث من المصمم تقوم بتكبير الأشياء ، والتحقق من المحاذاة. هل التباعد جيد؟

آدم: هذا هو الشيء الثاني الذي تفعله أداة الأدلة. عندما تقوم بتشغيله وتحوم فوق الأشياء ، سترى أن العنصر الذي تحوم حوله يحصل على مربع صغير حوله. ثم تظهر الأدلة المتقطعة ، تمامًا كما يفعل الحكام عادةً. ومثلما هو الحال في Sketch و Zeplin حيث تحوم نوعًا ما وتحصل على هذه الأدلة ، إنه نفس المفهوم ، فقط عش على صفحتك. وإذا نقرت فوق شيء ما ، ثم مررت فوق وجهة جديدة ، فستحصل على أدوات قياس. وأدوات القياس بالبكسل ، ويتم حسابها ... بصريًا ، كم عدد البكسل بينها. ليس ما قاله أحدهم. إنه لا يضيف كل المسافات ، إنه فقط تنقر فوق هذا الشيء وهو بعيد جدًا عن هذا المربع الآخر.

آدم: وأعتقد أن هذا سيصبح مفيدًا حقًا ، لأنه يمكنك الضغط على مفتاح shift ومواصلة النقر ، والتحقق بشكل أساسي من وجود مسافات متساوية بين خمسة رموز. وهي فقط بضع نقرات. لا داعي لمعرفة الكود ، فقط قم بتشغيل VisBug ، وتحوم ، وانقر ، وانقر ، ثم انقر ، وستتمكن من رؤية ذلك ، "أوه ، انظر إليها. نعم. 15 بكسل بين كل من هؤلاء. " أو في بعض الأحيان تحصل على شيء مزعج نوعًا ما ، ستنقر فوق مربع ثم تنقر فوق المربع الأصلي الخاص به وستدرك أن المسافة العلوية له هي تسعة والجزء السفلي هو ثمانية. وتقول ، "كيف سأركز هذا؟ إنه بطريقة ما بينهما ". ويهز القبضة.

آدم: لكن على الأقل يمكنك رؤيته بشكل جميل وبسهولة باستخدام أداة الأدلة. حسنًا ، هذه هي أداة الأدلة.

درو: لقد كنت هناك بالتأكيد ، مع رفع أجزاء من الورق على الشاشة. وأيضًا ، الحيلة الأخرى التي سأستخدمها هي فتح نافذة متصفح أخرى واستخدام حافة النافذة لمحاذاة العناصر. وبعد ذلك تحاول نوعًا ما وتحافظ على كل شيء في مكانه الصحيح بحيث لا يزال كل شيء في طور الترتيب أثناء إجراء تغيير التعليمات البرمجية وتحديثها. نعم ، ليست طريقة عمل مثالية ، لذا.

آدم: ليست طريقة عمل مثالية. نعم. وهناك التالي… حسنًا ، والإصدار الأول من ذلك كان فضفاضًا جدًا. لم يتم التقاطها ، لقد حملت فقط علامة التصويب ، وهي ميزة سأضيفها لاحقًا. لذا فإن بعض المستخدمين مثل ، "مرحبًا ، أحب الالتقاط ، إنه مثل أدوات التصميم تمامًا. ولكن ماذا لو كنت أريد قياسًا سائبًا؟ أو أريد عمل حرف ، أريد قياس حرف ، وليس صندوق بريده؟ " وهكذا ، حسنًا ، يمكن بسهولة تغيير أداة الأدلة هذه إلى وجود مفتاح تعديل.

آدم: هنا حيث يصبح VisBug مختلفًا نوعًا ما ، ولكن نأمل أيضًا أن يكون مألوفًا ، هل هو ثقيل جدًا على معدِّلات مفتاح الاختصار. لذلك تمامًا كما لو كنت تشاهد مصممًا محترفًا ، فهم بارعون جدًا في مفاتيح الاختصار. وهم يقومون بضرب مفاتيح الاختصار هنا ، ويقومون بالتكبير ، ويضغطون على مفاتيح الاختصار هناك ، ويقومون بكل ما لديهم من دفع من لوحة المفاتيح الخاصة بهم. وبالتالي فإن VisBug يتمحور حول لوحة المفاتيح في الطريقة التي تغير بها الأشياء.

آدم: هذا أيضًا لأن VisBug يسمح بالعديد من التحديدات ، ويمكنه تغيير تباعد 100 عنصر في نفس الوقت. وهي تفعل ذلك نسبيًا. على أي حال ، لديها بعض المراوغات المثيرة للاهتمام ، لكن لوحة المفاتيح في مفهوم المعدل مهمة حقًا. ويمكنك الاحتفاظ بالخيار ، أو التبديل ، أو الأمر في الكثير من الأدوات والحصول على شيء مختلف ، أو الحصول على نوع جديد من الميزات هناك.

درو: إذن فهي إحدى تلك الأدوات حيث يكون تعلم اختصارات لوحة المفاتيح أمرًا مفيدًا.

آدم: نعم. وهكذا عندما تقوم بتشغيل VisBug وتحوم فوق أحد رموز الأداة ، ستحصل على انهيار. إنها تطرح قائمة منبثقة صغيرة ، تقول مفتاح الاختصار لاختيار هذه الأداة ، وتخبرك بما يمكنها فعله ، والتفاعلات التي يجب القيام بها من أجل الحصول عليها. لذلك تقول أداة الأدلة ، "أدلة العناصر ، مرر فقط. قم بقياس شيء ما ، وانقر فوقه ، ثم قم بالمرور فوق شيء جديد. القياسات اللاصقة هي التحول مع النقر حتى تستمر. "

آدم: وهذه الأدلة رائعة حقًا لالتقاط لقطات الشاشة. لذلك إذا كنت تقوم بمراجعة العلاقات العامة ، حتى لو كنت مجرد مهندس واجهة أمامية ، أو ربما مصممًا يراجع العلاقات العامة ، فقد تكون هذه طريقة قوية حقًا للوصول إلى هناك ، ونعم ، لديك بعض التفتيش عالي الدقة. أي نوع يقودنا إلى الأداة التالية. هل تريد أن تسمع عن الأداة التالية؟

درو: نعم ، بالتأكيد. هيا نذهب اليها.

آدم: رائع. التالي هو أداة الفحص. وهذا يشبه ... المصممون عادة ، لا يريدون كل CSS ، أليس كذلك؟ عندما يتوقعون ... كدت أقول Firebug ، لكن Chrome DevTools ، تحصل على القائمة الكاملة ، أليس كذلك؟ لقد حددت H1 وهذا كل شيء على طول طريق العودة إلى ورقة أنماط المتصفح. ومثل المصمم ، "المتصفح ماذا؟ المتصفح لديه ورقة أنماط؟ "

درو: لأسفل في الجزء السفلي الغامض من لوحة التمرير هذه.

آدم: القاع الغامض ، أليس كذلك؟

درو: نعم.

آدم: يبدو الأمر كما لو كنت تقشر كل الطبقات مرة أخرى ، ثم تقول ، "أوه ، لم أعد أحب هذه الطبقات بعد الآن." وأداة الفحص هنا تقول ، "آه ، المصممين ، أنا أعرف ما تريدون. إنه مجرد لون الحدود ". بشكل أساسي ، أرني شيئًا فقط إذا كان فريدًا ، لذلك لا تغطيني بخصائص CSS فقط. وأنا مهتم حقًا بالألوان والطباعة والتباعد. لذلك سوف ألقي نظرة على الهوامش ، ارتفاعات الخطوط ، عائلة الخطوط مهمة حقًا ، أليس كذلك؟ هناك امتداد كامل لإخبارك بمجموعة الخطوط الموجودة على الصفحة.

آدم: في VisBug ، هذا مجرد عنصر سطر في أداة الفحص. لذا ، ما عليك سوى تشغيل VisBug ، والضغط على فحص ، وتحوم فوق أي أسلوب طباعة وسوف يخبرك بمجموعة الخطوط. حسنًا ، إنه يحاول جعل المصمم يركز على ما يظهر على السطح ، نعم.

درو: لذلك لا تعرض هذه الأداة أي أنماط موروثة. هل هذا صحيح؟

آدم: هذا صحيح. ما لم تكن موروثة وفريدة من نوعها. لذلك إذا كانوا ... لون نص أو شيء ما ، إذا لم يكن لون النص حرفياً يرث الكلمة ، فسيخبرك أنه قيمة محسوبة ، وأنه شيء مثير للاهتمام.

درو: نعم ، هذا مفيد حقًا ... نعم. يساعدك على التركيز على الأشياء التي تنطبق حرفيًا على هذا المثال الوحيد لشيء ما ، وهو ما تريد تغييره بوضوح. أعني ، أعتقد أن هذا قد يكون مفيدًا حقًا ، كل هذه الأدوات ستكون مفيدة حقًا ، نوعًا ما كما ذكرت ، في الحصول على تعليقات أصحاب المصلحة. ونوع من العمل بشكل تفاعلي مع العميل.

درو: أعتقد أنه سيعمل بشكل جيد على حد سواء على مشاركة الشاشة ، كما يتعين علينا القيام به هذه الأيام ، أكثر وأكثر. لست مضطرًا للجلوس على جهاز كمبيوتر مع شخص ما ، يمكنك الجلوس على الطرف الآخر من المكالمة ومشاركة متصفحك والقيام بذلك بهذه الطريقة. أعتقد أنها ستكون طريقة فعالة للحصول على التعليقات عندما لا يستطيع العميل الإشارة إلى الشاشة ويقول-

آدم: بالتأكيد.

آدم: إنه أمر ساحر دائمًا عندما تقوم بتحويل صفحة الويب الحية إلى ما يشبه لوح رسم Zeplin. شخص ما مثل ، "ماذا ... هل ذهبنا للتو إلى مكان جديد؟" وأنت مثل ، "لا ، هذا هو منتجك. نحن فقط نتفاعل معها بشكل مرئي للغاية ". نعم ، يمكن أن يكون لطيفًا حقًا.

درو: هل هناك أي حالات استخدام أخرى مثيرة للاهتمام رأيت أنها وضعت VisBug أو حدثت لك قد تكون مثيرة للاهتمام؟

آدم: بلى. لذا ، نعم ، هناك الكثير مما يصعب البدء فيه. أوه ، أحد الأمور المهمة هو التواصل بين المطورين والمطورين. يعمل VisBug على القيم المحسوبة. لذلك لا ينظر إلى القيم المؤلفة الخاصة بك. ويمكن أن يكون ذلك رائعًا حقًا ، لأنك نوعًا ما تقيس وتفحص النتيجة النهائية المطلقة في الطريقة التي يتم بها حساب البكسل على الشاشة. ويمكن أن يكون هذا أمرًا رائعًا حقًا ، لإجراء محادثة بهذه الطريقة ، حيث تعمل على النتائج ، بدلاً من جانب المؤلف.

آدم: ويمكنك العودة إلى مثل ، "حسنًا ، حسنًا ، كيف أخطأنا في جانب المؤلف إذا كان هذا هو ما حصلنا عليه بصريًا؟" أي نوع من أنواع اللعب ، الأداة التالية هي أداة فحص إمكانية الوصول. لذا فإن أداة الفحص تجعل من السهل فقط رؤية الأنماط الموجودة على عنصر ما ، وتقوم بتقسيمها بطريقة سهلة للغاية للمصمم. تساعدك أداة إمكانية الوصول على فحص جميع العناصر الموجودة على الصفحة ، وتكشف عن أي خصائص يمكن الوصول إليها ، مما يجعل الأمر ، كما آمل ، أسهل في التحقق من إنجاز شيء ما.

آدم: إذن ، العلاقات العامة ... وغالبًا ما يتم إنشاء الأشياء. إذن هذا ، مرة أخرى ، مطور إلى مطور ، مصمم مصمم ، أنت تراجع الواجهات. إنه فقط حرج للغاية. إذا كنت تبحث عن واجهة وكنت فضوليًا ، فإن VisBug لديه حالة استخدام لك هناك. هناك أيضًا حالات استخدام حيث يمكنك نوعًا من النموذج الأولي في المتصفح. لذلك تحدثنا عن واحد حيث هو ، أراد العميل تجربة اللون الأزرق. حسنًا ، هذا سيناريو سهل جدًا.

آدم: لكن هناك أشياء أخرى أيضًا. إذا قمت بالضغط على الأمر D في VisBug ، فسوف تقوم بتكرار عنصر. ولا يهم ما تكرره. لذلك يمكنك نسخ رأس ، واذهب لإضافة بعض المسافات بين الرأسين ، واذهب لإنشاء متغير مباشر في المتصفح. تنقر نقرًا مزدوجًا فوق نص العنوان ويصبح حقلاً نصيًا قابلاً للتحرير ، وتذهب لتجربة عنوان رئيسي جديد وتذهب لترى كيف يتناسب العنوان. اذهب واضبط بعض التباعد وقمت للتو بحفظ كل عمل المطور هذا ، والعثور على ملف مصدر وكل هذه الأشياء ، وأنت فقط ...

آدم: حسنًا ، يمكن أن يساعدك على الاستكشاف والتحقق. إنه أمر غريب نوعًا ما ... أعني ، هناك الكثير من الأشياء التي تقوم بها DevTools ، أليس كذلك؟ يأتي بعد الانتهاء ، فهو لا يمنحك شفرة المصدر في كثير من الأحيان ، وفي كثير من الأحيان لا تنسخ الكود من DevTools. يمكنك نسخ زوج قيمة مفتاح. مثل ، "أوه ، لقد غيرت هذا الأسلوب." لكن نعم ، على أي حال.

درو: مم-هم (إيجابي). نعم. يمكنني التفكير في نوع من الحالات المرئية بشكل خاص حيث قد ترغب في تكرار العناصر ، كما ذكرت. قد ترغب في أخذ قسم كامل من الصفحة وتكراره لمحاكاة ما سيكون عليه الحال إذا كان هناك محتوى أكثر بكثير مما كنت تتوقع.

آدم: نعم. هذه هي حالة استخدام اختبار الفوضى.

درو: نعم.

آدم: بالتأكيد.

درو: هذا شيء يتعين علينا جميعًا التعامل معه ، حيث نصمم بنوع من الأنظمة المستندة إلى CMS وجميع أنواع المهام الممتعة.

آدم: نعم ، هذه حالة استخدام بالغة الأهمية أيضًا. لأنني أفعل ذلك من أجل ... نعم ، العناوين الرئيسية ، كما قلت. ما عليك سوى النقر نقرًا مزدوجًا فوق بعض النصوص وسأقوم بإغلاق لوحة المفاتيح. كذا وكذا وكذا وكذا وضرب مجموعة من المساحات وكذا وكذا. وأنا أحب ، "حسنًا ، كيف كان التخطيط؟ أوه ، لقد فعلت ذلك بشكل جيد. حسنًا ، جيد ، يمكنني الانتقال إلى الشيء التالي. ماذا يحدث إذا قمت بتكرار هذا أربع مرات؟ هل مازال هناك مسافة بين كل شيء؟ هل يتدفق بجوار العنصر التالي؟ "

آدم: يمكن أن يكون من الرائع حقًا محاكاة فوضى المحتوى. عنوان قصير حقًا ، عناوين طويلة حقًا ، ليس له أصدقاء ، به مليون صديق. كيف تتعامل مع حالات الاستخدام هذه في واجهة المستخدم؟ نعم.

درو: لذلك فهو يعمل مع أي محتوى قائم على المتصفح. إذن PWAs وكذلك صفحات الويب العادية؟

آدم: نعم ، إنها كذلك. لذلك إذا كان لديك Spotify مثبتًا ، فأنا أفعل ذلك طوال الوقت ، لقد قمت بتثبيت Spotify وسأقول فقط ، "Spotify ، يبدو أنك تطبيق مستحيل الفحص." لكن خمن ماذا؟ VisBug لا يهتم. يقوم VisBug بتراكب كل ما تبذلونه من الأشياء ، ويفحص كل الطباعة. لقد صنعت مظهرًا خفيفًا لـ ... أوه ، لدي تغريدة في مكان ما حيث صنعت مظهرًا خفيفًا لـ Spotify.

آدم: أوه ، كانت هذه حالة استخدام أخرى ، آسف ، لنمذجة اللون. يمكنني إنشاء سمة خفيفة على المنتج نفسه دون الحاجة إلى العبث بمجموعة من الملصقات ، أليس كذلك؟ إذاً هناك هذه العقلية المهمة ، أود أن يساعد VisBug الناس على الدخول في أي منها ، استخدام منتجك كملعب. استخدم هذا على أنه ... إنه حقيقي جدًا. إنها أكثر واقعية من تركيبات التصميم الخاصة بك. لذا اقض المزيد من الوقت هناك. أعتقد أنك ستجد أنه يمكنك اتخاذ قرارات تصميم أكثر فاعلية من خلال العمل على منتجك الفعلي.

درو: وحالة إمكانية الوصول أيضًا مثيرة للاهتمام بشكل خاص ، لأنه في كثير من الأحيان ، خاصة هذه الأيام ، نعمل كثيرًا في مكتبات المكونات ، وننظر إلى مكونات صغيرة من الصفحة. وقضاء وقت أقل في النظر إلى كل هؤلاء المدمجين معًا لإنشاء نوع المشاهدات التي يتفاعل معها العميل بالفعل. ويصبح من الصعب حقًا مراقبة هذا النوع من التفاصيل الدقيقة مثل أشياء إمكانية الوصول والسمات غير المرئية على الصفحة.

درو: من الصعب جدًا مراقبة الأشياء غير المرئية. هذا هو المكان الذي يمكن أن تساعد فيه الأدوات حقًا ، حقًا في أن تكون قادرًا على فحص شيء ما ورؤية أنه ، نعم ، إنه يحتوي على الأدوار الصحيحة عليه وهو-

آدم: نعم. هذه هي حالة الاستخدام بالضبط. أريد أن أكون قادرًا على الذهاب للتحقق من هذه الأشياء. أريد أن يكون المصمم قادرًا على إلقاء نظرة على إمكانية الوصول وليس عليه فتح الأدوات ، والعثور على عقدة DOM ، فقد تم تحطيمها جميعًا في لوحة العناصر وتبدو غريبة. أنه يقول فقط ، "ها هي سمات المنطقة ، إليك العنوان إذا كان موجودًا." هناك أيضًا بعض أدوات الوصول الأخرى لـ. يأتي VisBug مع أيقونة البحث. أيقونة البحث لها طرق متعددة للتفاعل معها.

آدم: أولًا يستفسر عن الصفحة. لذلك إذا كنت تعرف نوع العنصر أو اسم فئة العنصر الذي تريده ، يمكنك البحث عنه فقط ، حتى لا تضطر إلى العثور عليه بالماوس. ولكن هذا يحتوي أيضًا على أوامر مائلة فيه. إذاً هناك مكونات إضافية في VisBug ، وسوف يقومون بتنفيذ البرامج النصية على الصفحة. لذلك ، إذا كان لديك في أي وقت مضى إشارة مرجعية قمت بحفظها ثلاثة أو أربعة… فأنت مثل ، "سأستخدم هذه الإشارة لأنها تبرز جميع الحدود وتظهر لي الصناديق الخاصة بي." إنها مثل خدعة التصحيح أو شيء من هذا القبيل.

آدم: من المحتمل أنه مكون إضافي لـ VisBug. إذا قمت بتشغيل VisBug ، واضغط على Slash ، وستحصل على الإكمال التلقائي ، وسيظهر لك جميع المكونات الإضافية المختلفة. وهناك بعض عناصر إمكانية الوصول التي تعتبر رائعة حقًا بسبب أخطاء التراكب وأشياء مختلفة من هذا القبيل. لذا أوافق. يجب أن تكون إمكانية الوصول أكثر سهولة. هذا مجرد أعرج أن أقول. لكن يجب أن يكون أقرب إلى حزام الأدوات. وأعتقد أنه في بعض الأحيان يكون بعيدًا جدًا ، وربما لهذا السبب يتم تفويته. لذلك آمل أن يكون الأمر أكثر قليلاً في المقدمة ، والوسط ، ومن الأسهل أن يتم فحصه أكثر. نعم.

درو: ومن المثير للاهتمام أن تقول إن VisBug يعمل مع نوع القيم المحسوبة للأشياء ، مثل الألوان. هل يعني ذلك أنه إذا كان لديك العديد من العناصر ذات الطبقات التي لها مستويات مختلفة من التعتيم ، فستتمكن من قياس اللون الدقيق الذي يتم عرضه على الشاشة بدلاً من-

آدم: آه.

درو: ... النظر إلى العناصر الفردية ومحاولة حلها بطريقة ما؟

آدم: هذا سؤال جيد حقًا. لذلك أعتقد ، إذا كنت أفهم السؤال بشكل صحيح ، فهذه صعوبة كلاسيكية في الواجهة الأمامية هي ، نعم ، كيف تعرف إذا كان لديك نص نصف معتم ، ما هو لونها فوق الرمادي مقابل الأبيض ؟ وكيف تعرف تناقضه؟ في الوقت الحالي ، لا نعرف. لذا فإن VisBug يعرف اللون ، وسوف يقول ، "50٪ رمادي" ، أو أيًا كان اللون الذي لديك هناك. لكنها لا تعرف أي شيء أكثر ذكاءً من ذلك. إنه غير قادر على ...

آدم: أعتقد أن ما عليك فعله في هذه الحالة هو إنشاء لوحة رسم ، ورسم كل الطبقات الموجودة هناك ، ثم استخدام قطارة أو ... طبقة مطلية واحدة ، ثم انتقل إلى إخراج قيمة البكسل الفردي لمعرفة ما هي نهايته الفعلية باللون الرمادي بعد وضعه في طبقات على العناصر الأخرى.

آدم: أعتقد أن شخصًا ما حددها ، أو ربما أعتبرها مشكلة في GitHub أنها ستكون لطيفة. لأن VisBug يمكن أن يسهل هذا ، 100٪. VisBug ، خلف الكواليس ، لقد انتهيت بالفعل من مقاييس النص ، حيث تحوم فوق الأشياء وتعطيك معلومات راد مجنونة حول الخطوط. إنها تقريبًا معلومات كثيرة جدًا ، مثل ارتفاع x وارتفاع الحد الأقصى ، لكنها تذهب أكثر من ذلك. وهي مثل ، "أوه ، لقد توقفت عن العمل عند نقطة معينة." لذلك يجب أن أعرف كيفية العثور على الإشارة مقابل الضوضاء هناك.

آدم: لكن نعم ، أحب عملية التفكير هذه ، لأنه يجب أن يكون لدينا أداة تقوم بذلك. وإذا عرفنا كيفية حسابها ، فيمكننا تعليم VisBug القيام بذلك ، وستكون هذه ميزة رائعة حقًا ، وشفافية اللون المحسوب ذي الصلة. أحبها.

درو: نعم ، أعني ، إنها حالة قياسية لوجود نص على خلفية حيث لا تكون متأكدًا مما إذا كان التباين كافياً لاجتياز متطلبات إمكانية الوصول. وربما لا يكون الأمر كذلك ، فربما يكون التباين منخفضًا جدًا وتريد بعد ذلك تعديل القيم حتى تصل إلى النقطة التي يكون فيها التباين جيدًا ، لكنها لا تنجرف بعيدًا عما أراده العميل في البداية من حيث ألوان العلامة التجارية والأشياء.

آدم: أسمي هذا النتوء ، نتوء حتى تمر.

درو: نعم.

آدم: لأن هذا ما أشعر به. أنا مثل ، "أوه ، أنا أقصر قليلاً في النتيجة." لذا يبدو الأمر مثل ، سأذهب إلى خفة HSL الخاصة بي وسأرتطم ، وأرتطم ، وأتصادم ، وأراقب الأرقام الصغيرة تدق حتى تصبح مثل ، "Ding ،" حصلت على علامة اختيار خضراء. أنا مثل ، "حسنًا ، رائع." ونعم ، في بعض الأحيان ، بعض من هذا اللون ليس رائعًا. إذن ، هل درست الكثير من أعمال الوصول الإدراكي 3.0 التي تجري؟ حتى لا يكون لدينا AA أو AAA بعد الآن ، سيكون لدينا رقم ويتضمن أشياء مثل رقة الخط. لذلك إذا كان خطًا رفيعًا ، فسيحصل على درجة أقل ، وإذا كان خطًا سميكًا فسيستمر ... لأن هناك الكثير مما يتعارض.

درو: نعم ، لا ، لم أر أيًا من ذلك ، لكن هذا يبدو-

آدم: على أي حال ، من الرائع حقًا استكشافه.

درو: هذا يبدو رائعًا ، نعم. سآخذ للعثور على شخص ما للتحدث معه حول ذلك. هذه حلقة أخرى. لذلك ، أعني ، أنا متأكد من أن بعض المطورين قد يجادلون بأن كل ما يفعله VisBug يمكنك القيام به فقط من خلال لوحة CSS في DevTools. وأعتقد أن هذا يعد نوعًا من الإنصاف ولكن ربما يخطئ الهدف ، في ذلك ، نعم ، أنت تتلاعب بـ CSS عندما تقوم بإجراء تغييرات ، لكنها تضع نوعًا من واجهة المستخدم التي تركز على المصمم في الأعلى بدلاً من واجهة تركز على المطور. هل هذا توصيف عادل لها؟

آدم: هذا أمر عادل حقًا. وبصراحة ، تخرج أفضل الأفكار من VisBug إلى DevTools. ولديهم بالفعل. إذن VisBug ، إذا قمت بالضغط على خيار الأمر C على أي عنصر ، فإنه يأخذ كل نمط محسوب ، على الأقل هذا فريد من نوعه. مرة أخرى ، يبدو الأمر كذلك ، سنفعل أشياء لن نمنحك فقط كل هذه الخصائص الموروثة. لكن يضعهم جميعًا في الحافظة الخاصة بك ، ويمكنك الذهاب للصق هذا النمط في مكان آخر ، في ورقة أنماط ، في CodePen ، وإعادة إنشاء العنصر حرفيًا ببضع نقرات.

آدم: وشق هذا النوع من التفاعلات طريقه إلى DevTools ، إلى لوحة العناصر هذه. ومع ذلك ، هناك أشياء أخرى لم تفعل ذلك ، وهي أن DevTools هي أداة فحص عقدة واحدة فقط. ويتبع VisBug شعار أداة التصميم وهو ، لا ، يجب أن أكون قادرًا على الاختيار المتعدد. أحتاج إلى أن أكون قادرًا على التعديل الجماعي والتفتيش بالجملة. ولذا أستخدم VisBug طوال الوقت للتباعد. لأنه يمكنني تمييز عناصر متعددة ورؤية انهيار الهامش.

آدم: في DevTools لا يمكنك رؤيته مطلقًا ، لأنه لا يمكنك رؤية سوى عقدة واحدة في كل مرة في معظم الأوقات ، على الرغم من وجود طريقة لإظهار هوامش متعددة ، ولكنها ليست نفسها. وهكذا ، نعم ، لديها حالات الاستخدام المتخصصة هذه التي يمكن أن تكون ممتعة حقًا من هذا القبيل. واحد آخر ، إذا قمت بتمييز ... دعنا نقول أن لديك نظام طباعة ولديك H1 إلى H7 ، كما هو الحال في قصة أو شيء من هذا القبيل ، يمكنك إبرازهم جميعًا في VisBug ، مع الاستمرار في الضغط ، فقط انقر فوقهم جميعًا. Boop ، boop ، boop ، boop ، انتقل إلى أداة الطباعة واضغط لأعلى أو لأسفل ، وسيحدث تغييرًا نسبيًا لكل منها.

آدم: فسيقوم كل منهم بدفع أحدهما لأعلى أو لأسفل. وهذا ليس شيئًا تجعله DevTools أمرًا سهلاً للغاية. وهكذا ، نعم ، لديها بعض القوى الخارقة من هذا القبيل ، لأنها أكثر حيادية قليلاً. وهو مستعد دائمًا للتكرار على مصفوفة. نعم.

درو: إذن ما هو أصل VisBug؟ والآن هل هو مجرد مشروع شخصي؟ أم أنه أحد مشروعات Google؟ او ما هي حالته؟

آدم: بلى. أولاً ، الوضع هو ، إنه مشروع Google. هدفها الأساسي هو أن تكون مكانًا لتصميم النماذج الأولية والاستكشاف قبل الانتقال إلى DevTools. على الأقل من جانب Google للأشياء. ولكن من جانبي الأشياء الشخصية ، ما زلت أراها كمكان لأذهب إليه في المهام الشائعة ، أو لتحضير بعض التحسينات لتنفيذ المهام الشائعة. ولمجرد إعطاء جمهور أوسع طريقة للنظر في DOM.

آدم: أعتقد حقًا أن DevTools قوي جدًا ، لكنه مخيف جدًا. مجرد علامة تبويب واحدة فيها يمكن أن تتطلب مهنة لتتعلمها. ما زلت أتعلم أشياء في DevTools ، وأنا أستخدمها طوال الوقت. لذا ، نعم ، هذا نوع من الجمهور مختلف في بعض النواحي. إنه المزيد من المبتدئين ، أو الأشخاص القادمين ، أو ربما حتى الأشخاص مثل مديري المشروعات ، الذين لا يعتزمون البرمجة على الإطلاق ولكنهم مهتمون بالمخرجات. وهذا ما يمنحهم نوعًا ما ، نعم ، مجرد أدوات خفيفة للوصول إلى هناك.

درو: إنها نقطة مثيرة للاهتمام تطرحها ، لأنني شخصيًا غالبًا ما أجد صعوبة في العثور على سير عمل مريح في إدارة كل هذه الأنواع من DevTools. ولديك كل هذه الألواح الصغيرة الخانقة ، ويمكنك فصلها في نافذة أخرى ، ولكن بعد ذلك يتعين عليك تتبع نافذتين مختلفتين. وبمجرد أن تفتح بعض نوافذ المتصفح ، لا يمكنك ... أن تركز على واحدة ولا تعرف أي DevTools ينتمي إليها.

درو: ثم داخل اللوحات نفسها ، إنه نوع من الغرب المتوحش لاتفاقيات واجهة المستخدم. سوف تقوم بالتمرير وستبدأ الأشياء في فعل أشياء غريبة لم تكن تتوقعها. وفيما يتعلق بتجربة المستخدم أشعر أنها مجرد فوضى كبيرة.

آدم: إنه كذلك. نعم.

درو: هل تعتقد أن هذا أمر لا مفر منه؟ هل يمكن أن يكون أفضل؟

آدم: بالتأكيد لدي أفكار هنا. ونعم ، أعتقد أنه أمر جيد ... لذا دعنا نقول أن لديك مستمعًا الآن مثل ، "أنا بارع جدًا في DevTools. لا أعتقد أنهم بهذا الجنون ". سأقول ، "حسنًا ، افتح Android Studio أو Xcode. ابدأ مشروعًا ، واذهب لإلقاء نظرة على DevTools ، وانظر إلى الإخراج. إلى أي مدى تشعر أنك مألوف الآن؟ " ربما أجنبي جدا. أنت تنظر إلى ذلك ، "هذه قمامة. لماذا يفعلون ذلك؟ لماذا هذه اللوحة هنا؟ " ويبدأ عقلك في السباق مع كل هذه الأسئلة لماذا والارتباك.

آدم: وهذا ما يشعر به الجميع في المرة الأولى التي يفتحون فيها DevTools. لذلك عليك أن تكون متعاطفًا مع ذلك نوعًا ما.

درو: هل من الحتمي ... هل يمكننا أن نفعل ما هو أفضل؟ أم أن هذا مجرد نوع من الترتيب الطبيعي للأشياء؟

آدم: إذن هذا هو رأيي الحالي في هذا الأمر ، هل أعتقد أن التعقيد من السهل حقًا أن تجد نفسك تدخل فيه. و DevTools هو أحد هذه الأشياء ، إنها معقدة بشكل طبيعي. لا توجد واجهة مستخدم جيدة لتسهيل الكثير من هذه الأشياء. يتم بناء الكثير من هذه الأشياء من قبل المطورين. وأعتقد أن أدوات إنشاء المطورين للمطورين جيدة ، لأنك ستمتلك ... إذا كانت هذه هي الطريقة الوحيدة ، أو حتى لو كانت طريقة جيدة ، فستتعلمها ، وستتقن وسوف تشعر بالراحة معها.

آدم: وجميع أدوات DevTools غريبة نوعًا ما ، لأنها مصممة لحالات الاستخدام الغريبة ، أليس كذلك؟ التنمية أمر غريب. لنكن صادقين. نصنع تروسًا غير مرئية وأخرى غير مرئية ، اثنان تلو الآخر ، ونبني منازل ، بشكل أساسي ، بأجزاء افتراضية غير مرئية. حسنًا ، نحن بحاجة إلى أدوات غريبة لنفحص هذه الأشياء ، وتخبرنا بما ينتجونه.

آدم: الآن ، هذا ما يقال ، ما يفعله VisBug ، وما كنت أقوم بنقل الأشياء ببطء إلى DevTools ، هو أدوات أصغر تكون أكثر تركيزًا مقارنة بالأداة الكبيرة التي تدعي أنها تفعل الكثير. أعتقد أنه من الصعب على الأشياء أن تفعل الكثير بشكل جيد حقًا. وهذه حجة كلاسيكية ، أليس كذلك؟ هذا هو كل النجوم ، المتخصصين مقابل العموميين. لن يكون أي منهما مثاليًا دائمًا.

آدم: ولكن ما يحاول VisBug أن يفعله هو أنه صنع متخصصين. لذا فإن أداة الأدلة تعمل فقط كإرشادات. وهذه الأداة لا تتسرب أبدًا إلى الأدوات الأخرى للصفحة. ولذا أحاول أن أفعل ذلك أكثر مع DevTools ، حيث تريد DevTools مساعدة المصممين أكثر ، وهو شيء ساعد VisBug على إلهام DevTools لرؤيته. والطريقة التي أواصل بها تقديم الأشياء هي ، بدلاً من إنشاء محرر شبكة ، على سبيل المثال ، حيث يمكنك ... "الطاقة الكاملة للشبكة في تراكب واحد" ، أليس كذلك؟ "يمكنك إضافة مسارات ، وإزالة المسارات ، وكذا وكذا وكذا."

آدم: وأقول ، "هذا يبدو رائعًا حقًا ومعقد حقًا." 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. وبالتالي…

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.

آدم: لدي تعديل حيث ، عند تشغيل VisBug ، يأخذ مستند HTML بأكمله ويقلصه إلى لوح رسم. يبدو وكأنه لوح رسم. إنه يطفو على ظل على مساحة رمادية. يمكنك التدوير حوله بلا حدود. لذا يمكنك التمرير بعيدًا عن لوحة صفحتك ، وما يتيح لك القيام به هو ، لنفترض أن لديك صفحة طويلة حقًا ، وتريد قياس شيء ما من الأعلى إلى الأسفل ، حسنًا يمكنك فعل ذلك الآن ، ولكنك ستفقد السياق نوعًا ما كلما تقدمت.

آدم: حسنًا في سيناريو التكبير / التصغير الجديد لـ VisBug ، يمكنك الضغط على خيار أو بديل على لوحة المفاتيح ، أو استخدام عجلة الماوس ، أو الضغط على علامة زائد ناقص باستخدام الأمر الخاص بك ويمكنك تكبير صفحة الويب الخاصة بك كما لو كانت لوحة فنية. وأحاول أن أجعلها سلسة كما هي. لذا فأنت تدخل وتخرج ، وتقوم بالتمرير لأسفل ، تدخل وتخرج ، تقيس من… و VisBug فقط لا يهتم. يحتفظ برسم التراكبات المحسوبة ، يمكنك تغيير التباعد.

آدم: لأنني أعتقد أنه من المهم حقًا ، كمصمم أن ترى عين الطائر على صفحتك مباشرة. الرسوم المتحركة لا تزال تعمل ، لكم جميعا. لا تزال المناطق القابلة للتمرير قابلة للتمرير ، أليس كذلك؟ انه حقا رائع. أنت مثل ، "صفحتي بأكملها في عرض واحد." على أي حال ، لقد أوشكت على الانتهاء. انها في-

درو: يبدو تريبي.

آدم: إنه غريب جدًا. وهو موجود ، أريد فقط التأكد من أنه يعمل عبر المتصفح ، لأنه يقوم ببعض الأشياء الصعبة بوضوح لجعل صفحتك الحية تبدو بهذه الطريقة. لكن نعم.

درو: مذهل. هل هو ... أعني ، أفترض أن VisBug يتم تحديثه بانتظام إلى حد ما ويتم إحراز تقدم فيه. ما الذي قد نتوقع رؤيته في المستقبل؟

آدم: نعم ، هذه بالتأكيد إحدى الميزات التي أعمل عليها هناك. لدي ميزة حيث… ، عند النقر فوق شيء ما ، تحصل على تراكب مع ما يشبه المقابض ، أليس كذلك؟ وهو نوع من الوهم ، من المفترض أن يجعلك تشعر بالراحة. والقصد هو جعل هذه المقابض قابلة للسحب في النهاية. لكن لدي بعض الأشياء الأساسية التي يتعين علي حلها أولاً ، مثل العناصر الموجودة في المتصفح ليس لها عرض. لذلك إذا بدأت للتو في الاستيلاء على العرض ، يجب أن أقوم بعمل لجعل هذا الوهم يبدو على ما يرام.

آدم: وقد لا تحصل حتى على النتائج التي تريدها ، لأنه قد يكون عنصرًا على مستوى الكتلة يسحب العرض أصغر ، ولا يتم إعادة تدفق عنصر بجواره. وقد تتساءل لماذا. لدي نماذج أولية حيث يمكنك سحب الزوايا وسحب العناصر حولها. لكني أحتاج حقًا إلى التركيز على كيفية قيام أدوات التصميم بذلك. لديهم دائمًا زر التبديل هذا. وهي مثل ... انظر ، ما هو اسم التبديل؟

آدم: لكنه يشبه في الأساس شرينك ... أسميه تقليص التفاف. تقليص التفاف عنصري ، عرض هذا العنصر هو عرض محتواه ، مقابل عرض العنصر الخاص بي ، قم بلصق شيء ما فيه. لذلك أنا بحاجة إلى شيء من هذا القبيل في المتصفح ، متراكبًا على العنصر بحيث يمكنك الاختيار بين هذه وربما حتى شيء يتيح لك الاختيار بين الحظر والمضمّن ، حتى تتمكن من الحصول على النتائج التي تريدها.

آدم: ولكن الهدف هنا في النهاية هو أن VisBug لا يريد أن يعتمد بالكامل على لوحة المفاتيح. أريدك أن تكون قادرًا على سحب التباعد. إذا رأيت 12 تباعدًا في الهامش في الأعلى ، فيجب أن تكون قادرًا على الوصول إليه والاستيلاء عليه ، بينما يتعين عليك الآن الضغط على لوحة المفاتيح لتحديد الجانب العلوي من المربع يحتاج إلى إضافة هامش.

آدم: حسنًا ، لدي بعض المراوغات للعمل بها ، من حيث الإستراتيجية. لكن جعله أقرب إلى أدوات التصميم يعد هدفًا كبيرًا. وربما حتى أنا سوف أنحني في ذلك. إنه مثل ، إذا كنت تريد تغيير العرض وستحصل على تصميم غريب ، فهناك دائمًا طرق للخروج منه باستخدام VisBug ، مثل أداة الموضع التي تتيح لك حقًا الهروب من التدفق. لذا فإن التدفق يفسد فكرتك ، تتيح لك أداة الموضع الهروب.

آدم: وهناك ... إذا كان شخص ما يتمتع بالدهاء مع VisBug فسوف يفجر عقول الناس ، لأنه نوع غير محدود ، وهو مثل ، ما الذي يمكنك إحضاره إلى الطاولة؟ لها عنصر تعبير لها. هناك بالتأكيد تكتيكات معبرة. لكن على أي حال ، القصة الطويلة باختصار ، الوهم هو أنني أريد فقط أن أجعلها أصغر وأصغر وأصغر. أريد أن يكون الوهم مثل ، "واو ، أشعر حقًا أنني أداة تصميم."

آدم: حسنًا ، سيكون من الجيد إجراء بعض التحسينات على التصدير. ولكن أيضًا ، سيكون تحسين التصدير لصالح DevTools أمرًا رائعًا ، وهذا لا يوقفنا حقًا. لذا لا أعلم. هناك الكثير من القضايا ، وبالتأكيد اذهب للتصويت عليها. أعتقد أن إحدى الميزات الكبيرة التالية التي أحب أن أفعلها هي الخطوط الخضراء. لذا بدلاً من مجرد إظهار تراكبات إمكانية الوصول على التمرير للإشارة حقًا إلى بعض الأشياء بخطوط خضراء ، وكشف المزيد ، وإظهار المزيد من المعلومات ، ولا أعرف. نعم.

درو: نوع من التفكير في عملية إنشاء امتداد Chrome مثل هذا ، أعني ، بافتراض أنه تم تنفيذه بالكامل في JavaScript ، إلى أي مدى يشبه تطوير الويب العادي؟ بناء امتداد كروم.

آدم: هذا سؤال جيد. إنه ... Phew ، هذا صعب. إنه ملتوي. أولاً ، البيئة التي تحصل فيها على تشغيل الكود الخاص بك ليست المتصفح. إنهم لا يمنحونك حق الوصول الكامل إلى هناك. يمكنك ، إذا واجهت صعوبة في التعامل معها ، والتي كان على VisBug التخرج فيها ، فهذا سيناريو أكثر تعقيدًا. في الوقت الحالي ، اعتدت التنفيذ في… هذا سوف يصبح غامضًا جدًا بهذه السرعة.

آدم: نظرًا لوجود العديد من صناديق الحماية لتمديدك ، لقضايا الخصوصية. وهم يجعلون من الصعب تنفيذ البرامج النصية على الصفحة الفعلية ، أليس كذلك؟ لأنك لا تريد أن يقوم شخص ما بإرسال النموذج الخاص بك عند تشغيل الشيء أو شيء ما ، أو إرساله إلى نفسه أو أي شيء آخر. يمكن أن يكون مدمرًا حقًا. لذلك لديها بعض المراوغات من هذا القبيل. هناك جسر عليك المرور فوقه. وأحد هذه العناصر التي أصابت VisBug هو استخدام VisBug ...

آدم: حسنًا ، كل العناصر المخصصة ، والعناصر المخصصة تسمح لك بتمرير البيانات الثرية إليهم كممتلكات. إذن أنت تقول ، customelement.foo = myrichobject ، مليء بالمصفوفات أو أيا كان. والعنصر المخصص يحصل على ذلك مثل بعض البيانات الموجودة على العقدة نفسها. ولكن بما أنني في هذا العالم الرمل الصغير الغريب ، إذا حاولت تعيين شيء فريد كهذا على موضوعي ، فسيتم تصفيته بشكل أساسي. لقد أثبتوا أن بعض الأشياء لا يمكنها ... لذلك يمكنني تمرير سلسلة إلى العنصر المخصص الخاص بي ، لكن لا يمكنني تمريرها ككائن غني.

آدم: لكن نعم ، بخلاف المراوغات الصغيرة من هذا القبيل ، بمجرد أن تحصل على التدفق ، وإذا كنت تقضي الوقت في الحصول على سيناريو تراكمي ، فسيكون ذلك لمدة ساعة أو نحو ذلك من العمل بحيث تمنح LiveReload في الشيء الخاص بك ، يمكن أن تصبح طبيعية جدًا. أعتقد أن Firefox لديه ، بصراحة ، أفضل تجربة تطوير امتدادات إذا كنت خبيرًا في CLI ، يمكنك تدوير شيء ما بأمر واحد ، ويقوم بتثبيته ، ويمنحك ميزات LiveReload هذه ، ويمنحك أدوات تصحيح الأخطاء. إنه نوع من يمسك بيدك من خلاله ، يمكن أن يكون لطيفًا حقًا.

آدم: لكن في النهاية ، الأمر غريب بعض الشيء. لهذا السبب أقوم بالكثير من العمل على هذا الموقع التجريبي الذي يشبه مجموعة من اللوحات الفنية ، لأنني لا أحتاج حقًا إلى صفحة ويب حقيقية في معظم الأوقات ، لإجراء اختبار VisBug ، طالما أن لدي لوحات فنية محاكاة العديد من القضايا ، أو الحصول على أشياء يمكن الوصول إليها للنظر فيها ، ومنحني نوعًا ما المحتوى الذي أحتاج إلى رؤيته. أقوم بالكثير من العمل هناك في المتصفح كما لو كان مجرد تطبيق ويب عادي. لذا فإن تجربة مطوري VisBug سهلة حقًا ، إلا إذا كنت تحاول اختبارها عبر المتصفح ، وبعد ذلك تحصل على نوع من الفوضى وأي شيء آخر.

درو: هذه رؤى مثيرة للاهتمام حقًا. لقد تعلمت كل شيء عن VisBug اليوم ، ما الذي كنت تتعلم عنه مؤخرًا يا آدم؟

آدم: ما زلت أحسّن مهاراتي في المقلاة. لذلك أريد أن أكون رجل ووك ، وأنا لا أتحدث عن مشغل كاسيت التسعينيات. أرغب في قلب الخضار وجعلها تشتعل قليلاً في الهواء ، وتغطيتها ببعض التوابل اللذيذة ، وفقط أحرق الثوم واجعله مقرمشًا ولذيذًا. ثم ضعه على سرير صغير من الأرز وحركه نحوك وانظر ما هو رأيك.

آدم: لذلك أنا متحمس للصيف الآن ، لأن هذا يعني أنني سأخرج من المقلاة وأعود إلى بيئة الطهي الساخنة سريعة الخطى ، وهو أمر ممتع حقًا.

درو: مذهل. هذا يبدو لذيذ. إذا كنت ، عزيزي المستمع ، ترغب في سماع المزيد من آدم ، يمكنك متابعته على Twitter حيث هوargyleinc ، والعثور على موقعه الشخصي على موقع nerdy.dev. إذا كنت تريد تجربة VisBug ، فيمكنك العثور عليها في Chrome Web Store ، ويمكنك تجربة إصدار sandbox على visbug.web.app. شكرا لانضمامك إلينا اليوم يا آدم. هل لديك أي كلمات فراق.

آدم: لا ، لقد كنت لطيفًا حقًا. كان هذا رائعًا حقًا. شكرا لاستضافتي ، أنا حقا أقدر ذلك.