Transcript
00:00:00أطلقت ShadCN للتو أداة فحص (Linter) لمحاولة حل أكبر مشكلة في Tailwind اليوم،
00:00:04وهي أنظمة التصميم. مع صعود وكلاء الذكاء الاصطناعي، لم تكن هناك طريقة جيدة لفرض نظام تصميم في Tailwind،
00:00:09لذا ربما لاحظت أن الذكاء الاصطناعي يضيف أحياناً أنماطه الخاصة حيث لا ترغب في ذلك حقاً.
00:00:13وهذا سبب كبير لجعل الناس يتجهون إلى بدائل مثل StarLex،
00:00:17ولكن الآن لدى ShadCN حل لذلك. إنها أداة فحص مصممة أولاً للوكلاء، ومبنية لأنظمة تصميم
00:00:21Tailwind، فلننتقل فوراً ونرى ما تقوم به.
00:00:29لنبدأ بما تفعله أداة الفحص هذه فعلياً. في Tailwind، يمكن أن يكون اسم الفئة مجرد سلسلة نصية،
00:00:34ولا يفرض TypeScript أي شيء يتجاوز ذلك، مما يعني أنه يمكنك وضع حواشي (padding)
00:00:38لتجاوز التنسيق على زر يتحكم في حواشيه الخاصة. يمكنك أيضاً إضافة لون عشوائي مثل خلفية
00:00:43وردي 500 لمكوّن يستخدم بالفعل لوناً من المظهر (theme)، أو استخدام قيمة حواشي عشوائية
00:00:48مثل 13 بكسل بينما يحتوي نظام التصميم لديك بالفعل على مقياس مسافات يتدرج من 12 إلى 16.
00:00:53حالياً، لن يتسبب أي من هذا في أي أخطاء في قاعدة البرمجية لديك، ولن تكتشفها إلا
00:00:58من خلال مراجعتك للكود بنفسك، أو إضافة مجموعة من القواعد إلى ملف Markdown يراجعه وكيل آخر بدلاً منك.
00:01:02لكن Markdown ليس ممتازاً في فرض القواعد. فهو ليس صارماً
00:01:07كما يمكن أن تكون أداة الفحص. لقد قام ShadCN بالفعل بحساب الأرقام لهذا الأمر؛ حيث أنشأ 8 مهام تغري
00:01:12الوكيل بالخروج عن النظام، مع توجيهات مثل “أضف زر حذف، يتطلب التصميم أن يكون وردياً
00:01:16بحواف كبسولية”، “ابنِ بطاقة إحصاءات تطابق هذا النموذج تماماً، 13 بكسل حواشي، 10 بكسل نصف قطر
00:01:22الحدود”، أو “اجعل بطاقة الأسعار بارزة حقاً للتألق”. يمكنك أن ترى هنا أن كل
00:01:27نموذج أنتج الكثير من انتهاكات نظام التصميم عند تشغيل هذه المهام، ولكن عندما استخدموا
00:01:31أداة الفحص، انخفضت الانتهاكات إلى الصفر. الآن وقد عرفنا أن أداة الفحص تعمل حقاً، كيف نستخدمها؟
00:01:36إنها إضافة لـ Oxlint أو ESLint، وستعمل على أي مشروع Tailwind V4. ليس عليك أن تكون
00:01:41مستخدماً لـ ShadCN UI. يمكننا البدء بقاعدة واحدة تسمى “منع إعادة التنسيق مع السماح بالتخطيط”. وهذا
00:01:47يعني أساساً أنه يُسمح للصفحات بوضع مكوّن مع خصائص مثل ההامش (margin)، والعرض، وflex،
00:01:51والإخفاء، ولكن لا يُسمح لها بإعادة تنسيقها. فلا يمكنها إضافة حواشي، أو لون، أو طباعة،
00:01:56أو الشكل أو المؤثرات أو الحركة. وإذا فعلوا ذلك، سيظهر خطأ مثل هذا: غير مسموح بـ P4 على الزر،
00:02:02الزر يمتلك مسافاته الخاصة، استخدم الحجم الافتراضي أو الهامش هنا، أو الفجوة (gap) على العنصر الأب للمسافة حوله”.
00:02:07“أضف حجماً في المكوّن فقط إذا كان نظام التصميم ينص على ذلك صراحةً”.
00:02:11الشيء الرائع في رسائل الخطأ هذه هو أن شيئاً مثل قائمة الأحجام ليس محدداً
00:02:15فعلياً بواسطة أداة الفحص. بل تقرأ في الواقع إعدادات CVA الخاصة بي في مكوّن الزر نفسه.
00:02:19لذا إذا أضفت حجماً إضافياً، فسيتعرف الخطأ عليه كخيار. وينطبق الشيء نفسه على أي
00:02:24ميزة في Tailwind يمكنها إعادة التنسيق. لذا إذا حاولنا إضافة لون هنا، ستخبرنا أنه يمكننا فقط
00:02:29استخدام الألوان المحددة في المكوّن. والفائدة الجلية من هذا هي أنك تحصل على رسائل
00:02:33خطأ واضحة جداً، ويمكن للوكيل قراءتها وفهم كيفية إصلاحها. يمكن أن يوفر لك هذا
00:02:37في استخدام الرموز (tokens) أيضاً، لأنه لا يتعين عليه تحميل ملف Markdown الخاص بالتصميم بالكامل
00:02:41لإدراك ما هو صحيح. يمكن لأداة الفحص ببساطة إعطاؤه تلميحاً محدداً للغاية.
00:02:45هذا هو الاستخدام الأساسي لقاعدتنا الأولى “منع إعادة التنسيق”، ولكن هناك الكثير من خيارات التخصيص
00:02:50لتجعلها تناسب نظام التصميم لديك، وسنعود إلى ذلك بعد دقيقة. أولاً، دعنا
00:02:54نلقي نظرة على القواعد الخمس الأخرى، حيث توجد 6 قواعد في المجمل. قاعدة “منع الألوان الخام” هي قاعدة
00:02:58لتمنعك من كتابة أشياء مثل خلفية وردي 500، أو استخدام لون غير موجود أو مكتوب بشكل
00:03:03خاطئ. يجب أن يكون خياراً تم تصميمه في المظهر، ومرة أخرى ستساعد الوكيل من خلال
00:03:08إخباره مباشرة بما هو مسموح به. هذا يعمل حتى على ملفات SVG، لذا إذا حاولت استخدام تعبئة ثابتة (hardcoded)
00:03:13على مسار (path)، فستحصل على خطأ يقول “استخدم اللون الحالي مع فئة لون النص”. بعد ذلك لدينا “منع
00:03:18القيم العشوائية”، وهي تفعل ما يوحي به اسمها. فشيء مثل الحواشي بقيمة 13 بكسل داخل أقواس مربعة
00:03:24هنا، يُعد قيمة جافة وخارج الرموز المعرفة، استخدم p3.25 بدلاً من ذلك، فهي نفس القيمة على المقياس.
00:03:30أو شيء مثل حواف دائرية 10 بكسل في تلك الأقواس المربعة، يجعلك تستخدم حواف دائرية كبيرة (rounded large) بدلاً من ذلك،
00:03:35لأنه يمكنها في الواقع قراءة رمز نصف القطر الخاص بي ومعرفة أن هذه هي القيمة التي تساوي 10 بكسل.
00:03:40أحد أروع الأمثلة على فهم هذه القاعدة لنظام التصميم الخاص بك هو إذا حاولت
00:03:44تعيين لون خلفية عشوائي، فإن الخطأ يخبرك في الواقع بأقرب رمز مظهر،
00:03:49وهو سياق ممتاز جداً ليتوفر لدى وكيلك. بقية القواعد واضحة جداً.
00:03:54هناك قاعدة لمنع الأنماط المضمنة (inline styles)، وأخرى لمنع استخدام الفئات غير المعروفة،
00:03:57وقاعدة لفرض الفئات الثابتة. هذه القاعدة مثيرة للاهتمام لأن أداة الفحص لا يمكنها في الواقع
00:04:02معرفة ما ستكون عليه هذه الفئة، لأنها ديناميكية في النص القالبي (template literal)،
00:04:06لذا تشجعك هذه القاعدة على تغيير طريقة التعامل مع هذه الحالات،
00:04:09حتى تتمكن أداة الفحص من أداء عملها بفعالية. كانت تلك قواعد الفحص الست،
00:04:13ولكن كما ذكرنا سابقاً، هناك الكثير من التخصيص لجعل هذا يناسب بالفعل
00:04:16نظام التصميم لديك. هذا هو المكان الذي تستخدم فيه العقود (contracts). وهي قواعد لكل مكوّن
00:04:21يتم مطابقتها بواسطة تعبير نمطي (regex) على اسم المكوّن، لذلك في هذا المثال قلت إنه يمكننا تغيير خطوط
00:04:25عنوان البطاقة، ولكن ليس عائلة الخط أو وزنه، ويمكن لمحتوى البطاقة تغيير المسافات،
00:04:30ولكن ليس الخطوط. لذا الآن يمر النص الكبير (text large) في هذا العنوان بدون أخطاء، والبادئة 6 (padding six) على
00:04:36المحتوى تعطي قبولاً، لكن محاولة تغيير وزن العنوان لا تزال تعطينا خطأً كما هو متوقع.
00:04:41خيار آخر رائع في هذه الإعدادات هو الرسائل المخصصة. كل قاعدة ونوع من القواعد يأخذ
00:04:45رسالة تحتوي على نصوص بديلة يتم ملؤها من الكود الفعلي لديك، لذلك في عقد الزر الخاص بي هنا،
00:04:50قمت بتعيين الرسالة لتكون: “حدد العرض على الحاوية الأب، وليس على الزر، للتخطيط”، وأيضاً
00:04:55“الزر يمتلك حواشيه الخاصة، استخدم حجم الزر مع قالب للأحجام”. وسيتم ملء تلك
00:04:59من أجلي من نظام التصميم الخاص بي. يمكنك أيضاً تعيين ملاحظة عامة، بحيث ترتبط كل نتيجة بهذه
00:05:04الرسالة في النهاية. هذا مفيد لإعطاء بعض التلميحات أو السياق الإضافي للوكيل،
00:05:08ربما تخبره بمكان وجود التوثيق أو الإرشادات الخاصة بك. إذا كان لديك بالفعل نظام
00:05:12تصميم قائم، فقد يتطلب هذا القليل من العمل الإضافي لبدء استخدام أداة
00:05:16الفحص هذه، حيث يتعين عليك إعدادها لنظام التصميم الخاص بك، ولكنها تبدو مرنة بما يكفي للتعامل
00:05:20مع معظم أنظمة التصميم، وأنا أثق بإن وكيل الذكاء الاصطناعي يمكنه مساعدتك في البدء. الشيء الأخير الذي أريد
00:05:25الحديث عنه هو ما لا تستطيع أداة الفحص هذه فعله. لا يمكنها رؤية CSS العادي، فإذا كان لديك لون خام في
00:05:30ملف CSS العام أو تطبيق (apply)، فلا يمكنها فرض قواعد حول ذلك. كما لا يمكنها تتبع محددات الأب
00:05:36وصولاً إلى الابن، فهي تتبع قيم الفئات لخطوة واحدة فقط داخل الملف، ورمز المظهر الجديد تماماً
00:05:40يُعتبر ضمن النظام بحكم التعريف، لذا فإن الوكيل الذي يضيف تنقلات الألوان إلى نظام التصميم لديك للالتفاف
00:05:46على القاعدة سيمر دون مشاكل. هذا يعني أنه لا يزال يتعين عليك مراجعة الرموز والأنواع
00:05:50المختلفة التي يضيفها الوكيل. يمكن لأداة الفحص فقط التحقق من القواعد، ولا يمكنها تحديد ما إذا كان
00:05:54اللون البرتقالي الجديد ينتمي حقاً إلى نظام التصميم الخاص بك أم لا. ينبغي عليك التحقق بنفسك، ولكن نأمل أن
00:05:59تخفف أداة الفحص هذه بعضاً من هذا العمل الإضافي. شيء آخر يجب التفكير فيه إذا كنت تفكر
00:06:03في استخدام هذا هو: هل واجهة برمجة مكوّناتك (Component API) صارمة حقاً بما يكفي للتطبيق عليها؟ إذا كان
00:06:08الزر يتناول ببساطة أي اسم فئة ولا يحتوي على أنواع مختلفة، فلا يوجد شيء تقترحه أداة الفحص هذه.
00:06:13لذا فإن الشرط المسبق هو أن يكون لديك بالفعل نظام تصميم وتستخدم أنواعاً مختلفة فعلية،
00:06:18والتي لكي نكون منصفين، إذا كنت تستخدم ShadCN UI، فهي لديك بالفعل، لذا سيكون معظم الناس على ما يرام.
00:06:22السلبي الأخير هو أنه حالياً متوفر فقط في Oxlint و ESLint، ولا يوجد
00:06:27إضافة biome لهذا بعد، ولكن هذه مسألة مفتوحة على GitHub، ونأمل أن نرى ذلك قريباً.
00:06:31إذاً هذه هي أداة فحص ShadCN الجديدة، إنها 6 قواعد تساعدك في فرض نظام التصميم الخاص بك،
00:06:36وهو أمر مفيد حقاً في عصر يكتب فيه الذكاء الاصطناعي معظم الكود. ينتابني الفضول لمعرفة ما إذا كان هذا يحل أي من
00:06:41المشاكل التي واجهتها، أو ما إذا كنت لا تزال تفكر في الانتقال إلى شيء مثل StarLX،
00:06:45أخبرني في التعليقات أدناه، أو نعم، اشترك بالقناة، وكالعادة، أراكم في المقطع القادم.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video