5 ميزات رائعة يمكنك استخدامها مع ميزة "الدعم الذكي" في "أدوات مطوّري البرامج"

Matthias Rohmer
Matthias Rohmer

تاريخ النشر: 21 تشرين الأول (أكتوبر) 2024

في الأسبوع الماضي، طرحنا لوحة جديدة تمامًا في أدوات مطوّري البرامج: مساعدة الذكاء الاصطناعي يمكن أن تساعدك في تصحيح أخطاء التصميم باستخدام Gemini مباشرةً في أدوات مطوّري البرامج.

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

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

1. فهم التنسيقات

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

يمكنك أن تسأل الذكاء الاصطناعي عن تنسيق عنصر ومعرفة سبب عرضه بالطريقة التي يظهر بها وصولاً إلى العقدة الأخيرة، وسبب ظهور overflow: hidden; على عنصر معيّن. 👀

طلب تجربة الميزة

Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.

2. البرمجة الزوجية

أصبحت CSS قوية جدًا الآن. مع توفّر العديد من الخيارات، من الطبيعي أن تشعر بال confusion في بعض الأحيان: هل أحتاج إلى align-items؟ أو justify-items؟ أو justify-self أو align-content؟

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

سيفحص نظام المساعدة بشأن الذكاء الاصطناعي (AI) الرمز البرمجي الحالي ويقارنه بما تحاول تحقيقه، ويقترح عليك الإصلاحات المطلوبة لمراجعتها وتطبيقها ونسخها في قاعدة الرموز الخاصة بك.

3- مستشار تسهيل الاستخدام

من المهم أن يكون موقعك الإلكتروني سهل الاستخدام ويسهل الوصول إليه باستخدام التكنولوجيا المساعدة. يجب مراعاة إمكانية الوصول منذ بداية عملية التطوير، وليس كخطوة تالية، والسعي إلى اتّباع إرشادات إتاحة محتوى الويب (WCAG) خلال عملية التطوير.

استخدِم مساعدة الذكاء الاصطناعي للحصول على نصائح حول المواضع التي يمكن فيها استبدال <div> بأحد عناصر HTML التي تتضمن دلالات أكثر، أو حول كيفية الاستفادة من سمة aria-* إضافية، أو حول كيفية تحسين التباين في الألوان.

طلب للمحاولة

What about color contrast in this element?

4. اجعله يعكس شخصيتك

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

الأزرار كما تم تصميمها في Bootstrap من الإصدار 1 إلى 5
أنماط أزرار Bootstrap بمرور الوقت، من الإصدار 1 إلى 5، من الأعلى إلى الأسفل

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

طلب تجربة الميزة

This element looks a little boring. Can you make it look like a pirates theme park ride?

5- أن تصبح ميكانيكي طائرات

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

Chrome Devtools Hangar: مساحة تفاعلية لميزة "المساعدة المستندة إلى الذكاء الاصطناعي"

يُرجى إطلاعنا على تجربتك في أداة تتبُّع المشاكل العامة.